fix: conflict

.env.example

@@ -1 +1,2 @@
-VUE_APP_NETEASE_API_URL=http://localhost:3000
+VUE_APP_NETEASE_API_URL=http://localhost:3000
+VUE_APP_ENABLE_SENTRY=false

src/components/Navbar.vue

@@ -81,10 +81,14 @@ export default {
       });
     },
     changeLang() {
+      let lang = "";
       if (this.$i18n.locale === "zh-CN") {
-        return (this.$i18n.locale = "en");
+        lang = "en";
+      } else {
+        lang = "zh-CN";
       }
-      this.$i18n.locale = "zh-CN";
+      this.$i18n.locale = lang;
+      this.$store.commit("changeLang", lang);
     },
   },
 };

src/components/TrackListItem.vue

@@ -7,16 +7,29 @@
     @mouseover="focus = true"
     @mouseleave="focus = false"
   >
-    <img :src="imgUrl | resizeImage(224)" v-if="!isAlbum" @click="goToAlbum" />
+    <img
+      :src="imgUrl | resizeImage(224)"
+      v-if="!isAlbum"
+      @click="goToAlbum"
+      :class="{ hover: focus }"
+    />
     <div class="no" v-if="isAlbum">
       <button
         class="play-button"
-        v-show="focus && track.playable"
+        v-show="focus && track.playable && !isPlaying"
         @click="playTrack"
       >
         <svg-icon icon-class="play"></svg-icon>
       </button>
-      <span v-show="!focus || !track.playable">{{ track.no }}</span>
+      <span v-show="(!focus || !track.playable) && !isPlaying">{{
+        track.no
+      }}</span>
+      <button v-show="isPlaying">
+        <svg-icon
+          icon-class="volume"
+          style="height: 16px; width: 16px"
+        ></svg-icon>
+      </button>
     </div>
     <div class="title-and-artist">
       <div class="container">
@@ -156,15 +169,6 @@ button {
   }
 }
 
-button.play-button {
-  opacity: 1;
-  .svg-icon {
-    height: 14px;
-    width: 14px;
-    color: #335eea;
-  }
-}
-
 .track {
   display: flex;
   align-items: center;
@@ -205,6 +209,11 @@ button.play-button {
     border: 1px solid rgba(0, 0, 0, 0.04);
     cursor: pointer;
   }
+
+  img.hover {
+    filter: drop-shadow(100 200 0 black);
+  }
+
   .title-and-artist {
     flex: 1;
     display: flex;
@@ -282,6 +291,7 @@ button.play-button {
   .artist,
   .album,
   .time,
+  .no,
   .featured {
     color: rgba(0, 0, 0, 0.28) !important;
   }

src/locale/index.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import VueI18n from "vue-i18n";
+import store from "@/store";
 
 import en from "./lang/en.js";
 import zhCN from "./lang/zh-CN.js";
@@ -7,7 +8,7 @@ import zhCN from "./lang/zh-CN.js";
 Vue.use(VueI18n);
 
 const i18n = new VueI18n({
-  locale: "en",
+  locale: store.state.settings.lang,
   messages: {
     en,
     "zh-CN": zhCN,

src/locale/lang/en.js

@@ -32,6 +32,9 @@ export default {
     showLess: "SHOW LESS",
     EPsSingles: "EPs & Singles",
     albums: "Albums",
+    withAlbums: "Albums",
+    artist: "Artist",
+    videos: "Music Videos",
   },
   album: {
     released: "Released",
@@ -89,5 +92,9 @@ export default {
     mv: "MVs",
     playlist: "Playlists",
     noResult: "No Results",
+    searchFor: "Search for",
+  },
+  common: {
+    songs: "Songs",
   },
 };

src/locale/lang/zh-CN.js

@@ -32,6 +32,9 @@ export default {
     showLess: "收起",
     EPsSingles: "EP和单曲",
     albums: "专辑",
+    withAlbums: "张专辑",
+    artist: "歌手",
+    videos: "个视频"
   },
   album: {
     released: "发行于",
@@ -94,5 +97,9 @@ export default {
     mv: "视频",
     playlist: "歌单",
     noResult: "暂无结果",
+    searchFor: "搜索"
   },
+  common: {
+    songs: "首歌",
+  }
 };

src/store/index.js

@@ -13,7 +13,6 @@ if (localStorage.getItem("appVersion") === null) {
   window.location.reload();
 }
 
-Vue.use(Vuex);
 const saveToLocalStorage = (store) => {
   store.subscribe((mutation, state) => {
     // console.log(mutation);
@@ -22,6 +21,7 @@ const saveToLocalStorage = (store) => {
   });
 };
 
+Vue.use(Vuex);
 const store = new Vuex.Store({
   state: state,
   mutations,
@@ -38,4 +38,11 @@ store.state.howler = new Howl({
 });
 Howler.volume(store.state.player.volume);
 
+if ([undefined, null].includes(store.state.settings.lang)) {
+  let lang = "en";
+  if (navigator.language.slice(0, 2) === "zh") lang = "zh-CN";
+  store.state.settings.lang = lang;
+  localStorage.setItem("settings", JSON.stringify(store.state.settings));
+}
+
 export default store;

src/store/initState.js

@@ -84,6 +84,7 @@ const initState = {
     user: {
       id: 0,
     },
+    lang: null,
   },
 };
 

src/store/mutations.js

@@ -100,4 +100,7 @@ export default {
       return t;
     });
   },
+  changeLang(state, lang) {
+    state.settings.lang = lang;
+  },
 };

src/utils/common.js

@@ -58,3 +58,15 @@ export function shuffleAList(list) {
   });
   return newSorts;
 }
+
+export function throttle(fn, time) {
+  let isRun = false;
+  return function () {
+    if (isRun) return;
+    isRun = true;
+    fn.apply(this, arguments);
+    setTimeout(() => {
+      isRun = false;
+    }, time);
+  };
+}

src/utils/filters.js

@@ -19,7 +19,11 @@ Vue.filter("formatTime", (Milliseconds, format = "HH:MM:SS") => {
       ? `${hours}:${mins.padStart(2, "0")}:${seconds}`
       : `${mins}:${seconds}`;
   } else if (format === "Human") {
-    return hours !== "0" ? `${hours} hr ${mins} min` : `${mins} min`;
+    const hoursUnit = locale.locale === "zh-CN" ? "小时" : "hr";
+    const minitesUnit = locale.locale === "zh-CN" ? "分钟" : "min";
+    return hours !== "0"
+      ? `${hours} ${hoursUnit} ${mins} ${minitesUnit}`
+      : `${mins} ${minitesUnit}`;
   }
 });
 

src/views/album.vue

@@ -27,7 +27,8 @@
           <span :title="album.publishTime | formatDate">{{
             new Date(album.publishTime).getFullYear()
           }}</span>
-          <span> · {{ album.size }} songs</span>,
+          <span> · {{ album.size }} {{ $t("common.songs") }}</span
+          >,
           {{ albumTime | formatTime("Human") }}
         </div>
         <div class="description" @click="showFullDescription = true">

src/views/artist.vue

@@ -6,10 +6,11 @@
       </div>
       <div>
         <div class="name">{{ artist.name }}</div>
-        <div class="artist">Artist</div>
+        <div class="artist">{{ $t("artist.artist") }}</div>
         <div class="statistics">
-          {{ artist.musicSize }} Songs · {{ artist.albumSize }} Albums ·
-          {{ artist.mvSize }} Music Videos
+          {{ artist.musicSize }} {{ $t("common.songs") }} ·
+          {{ artist.albumSize }} {{ $t("artist.withAlbums") }} ·
+          {{ artist.mvSize }} {{ $t("artist.videos") }}
         </div>
         <div class="buttons">
           <ButtonTwoTone @click.native="playPopularSongs()" :iconClass="`play`">
@@ -45,7 +46,7 @@
             </div>
             <div class="type">
               {{ latestRelease.type | formatAlbumType(latestRelease) }} ·
-              {{ latestRelease.size }} Songs
+              {{ latestRelease.size }} {{ $t("common.songs") }}
             </div>
           </div>
         </div>

src/views/library.vue

@@ -21,7 +21,7 @@
           <div class="titles">
             <div class="title">{{ $t("library.likedSongs") }}</div>
             <div class="sub-title">
-              {{ likedSongsPlaylist.trackCount }} songs
+              {{ likedSongsPlaylist.trackCount }} {{ $t("common.songs") }}
             </div>
           </div>
           <button @click.stop="playLikedSongs">

src/views/loginUsername.vue

@@ -10,7 +10,7 @@
               <input
                 :placeholder="$t('login.searchHolder')"
                 v-model="keyword"
-                @keydown.enter="search"
+                @keydown.enter="throttleSearch"
               />
             </div>
           </div>
@@ -53,6 +53,7 @@ import NProgress from "nprogress";
 import { search } from "@/api/others";
 import Cookies from "js-cookie";
 import { userPlaylist } from "@/api/user";
+import { throttle } from "@/utils/common";
 
 import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 
@@ -74,6 +75,7 @@ export default {
   methods: {
     ...mapMutations(["updateUser", "updateUserInfo"]),
     search() {
+      if (!this.keyword) return;
       search({ keywords: this.keyword, limit: 9, type: 1002 }).then((data) => {
         this.result = data.result.userprofiles;
         this.activeUser = this.result[0];
@@ -93,6 +95,9 @@ export default {
         this.$router.push({ path: "/library" });
       });
     },
+    throttleSearch: throttle(function () {
+      this.search();
+    }, 500),
   },
 };
 </script>

src/views/playlist.vue

@@ -34,8 +34,8 @@
         </div>
         <div class="date-and-count">
           {{ $t("playlist.updatedAt") }}
-          {{ playlist.updateTime | formatDate }} ·
-          {{ playlist.trackCount }} Songs
+          {{ playlist.updateTime | formatDate }} · {{ playlist.trackCount }}
+          {{ $t("common.songs") }}
         </div>
         <div class="description" @click="showFullDescription = true">
           {{ playlist.description }}

src/views/search.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="search" v-show="show">
-    <h1><span>Search for</span> "{{ keywords }}"</h1>
+    <h1>
+      <span>{{ $t("search.searchFor") }}</span> "{{ keywords }}"
+    </h1>
     <div class="result" v-if="isExistResult">
       <div class="row">
         <div class="artists" v-if="result.hasOwnProperty('artist')">