YesPlayMusic/src/App.vue

204 lines
4.5 KiB
Vue
Raw Normal View History

2020-10-10 19:54:44 +08:00
<template>
<div id="app">
2020-11-23 16:04:45 +08:00
<Navbar ref="navbar" />
2021-01-06 20:53:47 +08:00
<main v-show="!this.$store.state.showLyrics">
2020-10-10 19:54:44 +08:00
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</main>
<transition name="slide-up">
2020-10-14 21:10:45 +08:00
<Player
2021-01-05 22:17:47 +08:00
v-if="this.$store.state.player.enabled"
2020-10-14 15:39:41 +08:00
ref="player"
2021-01-20 14:02:03 +08:00
v-show="showPlayer"
2020-10-10 19:54:44 +08:00
/></transition>
2020-12-09 16:00:38 +08:00
<Toast />
2021-01-05 22:21:01 +08:00
<ModalAddTrackToPlaylist v-if="isAccountLoggedIn" />
<ModalNewPlaylist v-if="isAccountLoggedIn" />
2021-01-29 21:36:10 +08:00
<transition name="slide-up" v-if="this.$store.state.player.enabled">
2021-01-20 14:02:03 +08:00
<Lyrics v-show="this.$store.state.showLyrics" />
</transition>
2020-10-10 19:54:44 +08:00
</div>
</template>
<script>
import ModalAddTrackToPlaylist from "./components/ModalAddTrackToPlaylist.vue";
import ModalNewPlaylist from "./components/ModalNewPlaylist.vue";
2020-10-10 19:54:44 +08:00
import Navbar from "./components/Navbar.vue";
2020-10-14 21:10:45 +08:00
import Player from "./components/Player.vue";
2020-12-09 16:00:38 +08:00
import Toast from "./components/Toast.vue";
2020-11-23 16:04:45 +08:00
import { ipcRenderer } from "./electron/ipcRenderer";
2021-01-05 22:21:01 +08:00
import { isAccountLoggedIn } from "@/utils/auth";
2021-01-06 20:53:47 +08:00
import Lyrics from "./views/lyrics.vue";
2020-10-10 19:54:44 +08:00
export default {
name: "App",
components: {
Navbar,
2020-10-14 21:10:45 +08:00
Player,
2020-12-09 16:00:38 +08:00
Toast,
ModalAddTrackToPlaylist,
ModalNewPlaylist,
2021-01-06 20:53:47 +08:00
Lyrics,
2020-10-10 19:54:44 +08:00
},
data() {
return {
2020-11-23 16:44:17 +08:00
isElectron: process.env.IS_ELECTRON, // true || undefined
2020-10-31 14:03:41 +08:00
};
},
2021-01-05 22:21:01 +08:00
computed: {
isAccountLoggedIn() {
return isAccountLoggedIn();
},
2021-01-20 14:02:03 +08:00
showPlayer() {
return (
["mv", "loginUsername", "login", "loginAccount"].includes(
this.$route.name
) === false
);
},
2021-01-05 22:21:01 +08:00
},
2020-10-30 10:59:26 +08:00
created() {
if (this.isElectron) {
2020-11-23 16:04:45 +08:00
ipcRenderer(this);
}
window.addEventListener("keydown", this.handleKeydown);
},
2020-10-10 19:54:44 +08:00
methods: {
handleKeydown(e) {
if (e.code === "Space") {
if (e.target.tagName === "INPUT") return false;
if (this.$route.name === "mv") return false;
e.preventDefault();
this.$refs.player.play();
}
},
},
2020-10-10 19:54:44 +08:00
};
</script>
<style lang="scss">
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700;1,800;1,900&display=swap");
2020-10-25 21:04:33 +08:00
:root {
--color-body-bg: #ffffff;
--color-text: #000;
--color-primary: #335eea;
--color-primary-bg: #eaeffd;
--color-secondary: #7a7a7b;
--color-secondary-bg: #f5f5f7;
--color-navbar-bg: rgba(255, 255, 255, 0.86);
2020-12-09 16:55:13 +08:00
--color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
--color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
2020-10-25 21:04:33 +08:00
}
[data-theme="dark"] {
--color-body-bg: #222222;
--color-text: #ffffff;
--color-primary: #335eea;
--color-primary-bg: #bbcdff;
--color-secondary: #7a7a7b;
--color-secondary-bg: #323232;
--color-navbar-bg: rgba(34, 34, 34, 0.86);
2020-12-09 16:55:13 +08:00
--color-primary-bg-for-transparent: rgba(255, 255, 255, 0.12);
--color-secondary-bg-for-transparent: rgba(255, 255, 255, 0.08);
2020-10-25 21:04:33 +08:00
}
2020-10-10 19:54:44 +08:00
#app {
width: 100%;
transition: all 0.4s;
}
#app,
input {
2020-10-10 19:54:44 +08:00
font-family: "Barlow", -apple-system, BlinkMacSystemFont, Helvetica Neue,
PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC,
WenQuanYi Micro Hei, sans-serif;
2020-10-25 21:04:33 +08:00
}
body {
background-color: var(--color-body-bg);
2020-10-10 19:54:44 +08:00
}
2020-10-10 19:54:44 +08:00
html {
overflow-y: overlay;
2021-01-02 20:55:43 +08:00
min-width: 768px;
2020-10-10 19:54:44 +08:00
}
main {
2021-01-02 20:55:43 +08:00
margin-top: 84px;
2020-10-10 19:54:44 +08:00
margin-bottom: 96px;
padding: {
right: 10vw;
left: 10vw;
}
}
2021-01-02 20:55:43 +08:00
@media (max-width: 1336px) {
main {
padding: 0 5vw;
}
}
select,
2020-10-10 19:54:44 +08:00
button {
2020-10-20 21:40:01 +08:00
font-family: inherit;
}
button {
2020-10-10 19:54:44 +08:00
background: none;
border: none;
cursor: pointer;
}
input,
button {
&:focus {
outline: none;
}
}
a {
color: inherit;
text-decoration: none;
2020-10-31 12:05:28 +08:00
cursor: pointer;
2020-10-10 19:54:44 +08:00
&:hover {
text-decoration: underline;
}
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
2020-10-25 21:04:33 +08:00
border-left: 1px solid rgba(128, 128, 128, 0.18);
2020-12-09 20:01:59 +08:00
background: var(--color-body-bg);
2020-10-10 19:54:44 +08:00
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
2021-01-31 20:40:19 +08:00
background: rgba(128, 128, 128, 0.38);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
2020-10-25 21:04:33 +08:00
background: var(--color-secondary-bg);
2020-10-10 19:54:44 +08:00
}
.slide-up-enter-active,
.slide-up-leave-active {
transition: all 0.4s;
}
.slide-up-enter, .slide-up-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform: translateY(100%);
}
[data-electron="yes"] {
button,
.navigation-links a,
.playlist-info .description {
cursor: default !important;
}
}
2020-10-10 19:54:44 +08:00
</style>