diff --git a/package.json b/package.json index 753766c..ccbb0ac 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,8 @@ "eslintConfig": { "root": true, "env": { - "node": true + "node": true, + "browser": true }, "extends": [ "plugin:vue/essential", @@ -88,6 +89,9 @@ "parserOptions": { "parser": "babel-eslint" }, + "globals": { + "ipcRenderer": "off" + }, "rules": {} }, "browserslist": [ diff --git a/src/App.vue b/src/App.vue index c920d03..79178d3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -25,8 +25,6 @@ import Navbar from "./components/Navbar.vue"; import Player from "./components/Player.vue"; import GlobalEvents from "vue-global-events"; -const electron = window.require("electron"); -const ipcRenderer = electron.ipcRenderer; export default { name: "App", @@ -35,44 +33,56 @@ export default { Player, GlobalEvents, }, + data() { + return { + isElectron: process.env.IS_ELECTRON // "true" || undefined + } + }, created() { - // listens to the main process 'changeRouteTo' event and changes the route from - // inside this Vue instance, according to what path the main process requires. - // responds to Menu click() events at the main process and changes the route accordingly. - ipcRenderer.on("changeRouteTo", (event, path) => { - console.log(event); - this.$router.push(path); - }); - ipcRenderer.on("play", () => { - this.$refs.player.play(); - }); - ipcRenderer.on("next", () => { - this.$refs.player.next(); - }); - ipcRenderer.on("previous", () => { - this.$refs.player.previous(); - }); - ipcRenderer.on("increaseVolume", () => { - if (this.$refs.player.volume + 0.1 >= 1) { - return (this.$refs.player.volume = 1); - } - this.$refs.player.volume += 0.1; - }); - ipcRenderer.on("decreaseVolume", () => { - if (this.$refs.player.volume - 0.1 <= 0) { - return (this.$refs.player.volume = 0); - } - this.$refs.player.volume -= 0.1; - }); - ipcRenderer.on("like", () => { - this.$refs.player.likeCurrentSong(); - }); - ipcRenderer.on("repeat", () => { - this.$refs.player.repeat(); - }); - ipcRenderer.on("shuffle", () => { - this.$refs.player.shuffle(); - }); + if (this.isElectron) { + // 添加专有的类名 + document.body.classList.add('is-electron') + // ipc message channel + const electron = window.require("electron"); + const ipcRenderer = electron.ipcRenderer; + // listens to the main process 'changeRouteTo' event and changes the route from + // inside this Vue instance, according to what path the main process requires. + // responds to Menu click() events at the main process and changes the route accordingly. + ipcRenderer.on("changeRouteTo", (event, path) => { + console.log(event); + this.$router.push(path); + }); + ipcRenderer.on("play", () => { + this.$refs.player.play(); + }); + ipcRenderer.on("next", () => { + this.$refs.player.next(); + }); + ipcRenderer.on("previous", () => { + this.$refs.player.previous(); + }); + ipcRenderer.on("increaseVolume", () => { + if (this.$refs.player.volume + 0.1 >= 1) { + return (this.$refs.player.volume = 1); + } + this.$refs.player.volume += 0.1; + }); + ipcRenderer.on("decreaseVolume", () => { + if (this.$refs.player.volume - 0.1 <= 0) { + return (this.$refs.player.volume = 0); + } + this.$refs.player.volume -= 0.1; + }); + ipcRenderer.on("like", () => { + this.$refs.player.likeCurrentSong(); + }); + ipcRenderer.on("repeat", () => { + this.$refs.player.repeat(); + }); + ipcRenderer.on("shuffle", () => { + this.$refs.player.shuffle(); + }); + } }, methods: { play(e) { @@ -161,6 +171,11 @@ a { } } +// for electron +body.is-electron::-webkit-scrollbar { + width: 0; +} + /* Let's get this party started */ ::-webkit-scrollbar { width: 8px;