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": {
"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": [

View File

@ -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;