feat: scrollbar and logic update for electron

This commit is contained in:
kunkka 2020-10-31 14:03:23 +08:00
parent ae6ecd96fd
commit 3e38604119
2 changed files with 59 additions and 40 deletions

View File

@ -79,7 +79,8 @@
"eslintConfig": { "eslintConfig": {
"root": true, "root": true,
"env": { "env": {
"node": true "node": true,
"browser": true
}, },
"extends": [ "extends": [
"plugin:vue/essential", "plugin:vue/essential",
@ -88,6 +89,9 @@
"parserOptions": { "parserOptions": {
"parser": "babel-eslint" "parser": "babel-eslint"
}, },
"globals": {
"ipcRenderer": "off"
},
"rules": {} "rules": {}
}, },
"browserslist": [ "browserslist": [

View File

@ -25,8 +25,6 @@
import Navbar from "./components/Navbar.vue"; import Navbar from "./components/Navbar.vue";
import Player from "./components/Player.vue"; import Player from "./components/Player.vue";
import GlobalEvents from "vue-global-events"; import GlobalEvents from "vue-global-events";
const electron = window.require("electron");
const ipcRenderer = electron.ipcRenderer;
export default { export default {
name: "App", name: "App",
@ -35,44 +33,56 @@ export default {
Player, Player,
GlobalEvents, GlobalEvents,
}, },
data() {
return {
isElectron: process.env.IS_ELECTRON // "true" || undefined
}
},
created() { created() {
// listens to the main process 'changeRouteTo' event and changes the route from if (this.isElectron) {
// 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. document.body.classList.add('is-electron')
ipcRenderer.on("changeRouteTo", (event, path) => { // ipc message channel
console.log(event); const electron = window.require("electron");
this.$router.push(path); const ipcRenderer = electron.ipcRenderer;
}); // listens to the main process 'changeRouteTo' event and changes the route from
ipcRenderer.on("play", () => { // inside this Vue instance, according to what path the main process requires.
this.$refs.player.play(); // responds to Menu click() events at the main process and changes the route accordingly.
}); ipcRenderer.on("changeRouteTo", (event, path) => {
ipcRenderer.on("next", () => { console.log(event);
this.$refs.player.next(); this.$router.push(path);
}); });
ipcRenderer.on("previous", () => { ipcRenderer.on("play", () => {
this.$refs.player.previous(); this.$refs.player.play();
}); });
ipcRenderer.on("increaseVolume", () => { ipcRenderer.on("next", () => {
if (this.$refs.player.volume + 0.1 >= 1) { this.$refs.player.next();
return (this.$refs.player.volume = 1); });
} ipcRenderer.on("previous", () => {
this.$refs.player.volume += 0.1; this.$refs.player.previous();
}); });
ipcRenderer.on("decreaseVolume", () => { ipcRenderer.on("increaseVolume", () => {
if (this.$refs.player.volume - 0.1 <= 0) { if (this.$refs.player.volume + 0.1 >= 1) {
return (this.$refs.player.volume = 0); return (this.$refs.player.volume = 1);
} }
this.$refs.player.volume -= 0.1; this.$refs.player.volume += 0.1;
}); });
ipcRenderer.on("like", () => { ipcRenderer.on("decreaseVolume", () => {
this.$refs.player.likeCurrentSong(); if (this.$refs.player.volume - 0.1 <= 0) {
}); return (this.$refs.player.volume = 0);
ipcRenderer.on("repeat", () => { }
this.$refs.player.repeat(); this.$refs.player.volume -= 0.1;
}); });
ipcRenderer.on("shuffle", () => { ipcRenderer.on("like", () => {
this.$refs.player.shuffle(); this.$refs.player.likeCurrentSong();
}); });
ipcRenderer.on("repeat", () => {
this.$refs.player.repeat();
});
ipcRenderer.on("shuffle", () => {
this.$refs.player.shuffle();
});
}
}, },
methods: { methods: {
play(e) { play(e) {
@ -161,6 +171,11 @@ a {
} }
} }
// for electron
body.is-electron::-webkit-scrollbar {
width: 0;
}
/* Let's get this party started */ /* Let's get this party started */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;