From f99dbac95f983da8439415243a8826080e1093e4 Mon Sep 17 00:00:00 2001
From: BeADre <34639100+BeADre@users.noreply.github.com>
Date: Thu, 22 Oct 2020 14:39:02 +0800
Subject: [PATCH 1/5] fix: add some translations (#36)

* feat: add i18n

* refactor: move songs to common
---
 src/locale/lang/en.js    | 11 +++++++++--
 src/locale/lang/zh-CN.js | 11 +++++++++--
 src/utils/filters.js     |  4 +++-
 src/views/album.vue      |  2 +-
 src/views/artist.vue     |  9 +++++----
 src/views/library.vue    |  2 +-
 src/views/playlist.vue   |  2 +-
 src/views/search.vue     |  4 +++-
 8 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js
index 3af4d89..4c71e3a 100644
--- a/src/locale/lang/en.js
+++ b/src/locale/lang/en.js
@@ -31,7 +31,10 @@ export default {
     showMore: "SHOW MORE",
     showLess: "SHOW LESS",
     EPsSingles: "EPs & Singles",
-    albums: "Albums"
+    albums: "Albums",
+    withAlbums: "Albums",
+    artist: "Artist",
+    videos: "Music Videos"
   },
   album: {
     released: "Released"
@@ -88,6 +91,10 @@ export default {
     song: "Songs",
     mv: "MVs",
     playlist: "Playlists",
-    noResult: "No Results"
+    noResult: "No Results",
+    searchFor: "Search for"
+  },
+  common: {
+    songs: "Songs",
   }
 };
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index 9684433..22ddaf5 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -31,7 +31,10 @@ export default {
     showMore: "显示更多",
     showLess: "收起",
     EPsSingles: "EP和单曲",
-    albums: "专辑"
+    albums: "专辑",
+    withAlbums: "张专辑",
+    artist: "歌手",
+    videos: "个视频"
   },
   album: {
     released: "发行于"
@@ -93,6 +96,10 @@ export default {
     song: "歌曲",
     mv: "视频",
     playlist: "歌单",
-    noResult: "暂无结果"
+    noResult: "暂无结果",
+    searchFor: "搜索"
+  },
+  common: {
+    songs: "首歌",
   }
 };
diff --git a/src/utils/filters.js b/src/utils/filters.js
index 8760dc9..38180da 100644
--- a/src/utils/filters.js
+++ b/src/utils/filters.js
@@ -22,7 +22,9 @@ 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}`;
   }
 });
 
diff --git a/src/views/album.vue b/src/views/album.vue
index c9002a7..3a4b213 100644
--- a/src/views/album.vue
+++ b/src/views/album.vue
@@ -27,7 +27,7 @@
           <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">
diff --git a/src/views/artist.vue b/src/views/artist.vue
index 44320cf..4325b51 100644
--- a/src/views/artist.vue
+++ b/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>
diff --git a/src/views/library.vue b/src/views/library.vue
index bb9821c..dc63212 100644
--- a/src/views/library.vue
+++ b/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">
diff --git a/src/views/playlist.vue b/src/views/playlist.vue
index 76473c1..bcda9d9 100644
--- a/src/views/playlist.vue
+++ b/src/views/playlist.vue
@@ -37,7 +37,7 @@
         <div class="date-and-count">
           {{ $t("playlist.updatedAt") }}
           {{ playlist.updateTime | formatDate }} ·
-          {{ playlist.trackCount }} Songs
+          {{ playlist.trackCount }} {{ $t("common.songs") }}
         </div>
         <div class="description" @click="showFullDescription = true">
           {{ playlist.description }}
diff --git a/src/views/search.vue b/src/views/search.vue
index 9ff1e83..da0b30e 100644
--- a/src/views/search.vue
+++ b/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')">

From af30eb431d03660f9be808b98cbaf056dd5ccac3 Mon Sep 17 00:00:00 2001
From: BeADre <34639100+BeADre@users.noreply.github.com>
Date: Thu, 22 Oct 2020 17:21:23 +0800
Subject: [PATCH 2/5] fix(loginUsername): add throttle for search (#39)

---
 src/utils/common.js         | 10 ++++++++++
 src/views/loginUsername.vue |  7 ++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/utils/common.js b/src/utils/common.js
index 96a2bcb..7b73fb4 100644
--- a/src/utils/common.js
+++ b/src/utils/common.js
@@ -58,3 +58,13 @@ 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);
+  }
+}
diff --git a/src/views/loginUsername.vue b/src/views/loginUsername.vue
index 3b4f809..5d4de8f 100644
--- a/src/views/loginUsername.vue
+++ b/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>

From 91fac552e0dabddee80a37a3e0f3d94c30bd4c02 Mon Sep 17 00:00:00 2001
From: qier222 <68148142+qier222@users.noreply.github.com>
Date: Thu, 22 Oct 2020 18:09:30 +0800
Subject: [PATCH 3/5] fix: update .env.example

---
 .env.example | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index ab14a6b..eec8514 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1,2 @@
-VUE_APP_NETEASE_API_URL=http://localhost:3000
\ No newline at end of file
+VUE_APP_NETEASE_API_URL=http://localhost:3000
+VUE_APP_ENABLE_SENTRY=false
\ No newline at end of file

From 281f9fe0bce58799ecabb5ad97db9fce9e841c51 Mon Sep 17 00:00:00 2001
From: qier222 <68148142+qier222@users.noreply.github.com>
Date: Thu, 22 Oct 2020 18:13:48 +0800
Subject: [PATCH 4/5] feat: save lang to localStorage

---
 src/components/Navbar.vue | 37 +++++++++++++++++++++----------------
 src/locale/index.js       |  3 ++-
 src/store/index.js        | 17 ++++++++++++-----
 src/store/initState.js    | 37 +++++++++++++++++++------------------
 src/store/mutations.js    | 23 +++++++++++++----------
 5 files changed, 67 insertions(+), 50 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index afa9d2f..60fc25b 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -9,18 +9,18 @@
       /></button-icon>
     </div>
     <div class="navigation-links">
-      <router-link to="/" :class="{ active: this.$route.name === 'home' }"
-        >{{ $t('nav.home') }}</router-link
-      >
+      <router-link to="/" :class="{ active: this.$route.name === 'home' }">{{
+        $t("nav.home")
+      }}</router-link>
       <router-link
         to="/explore"
         :class="{ active: this.$route.name === 'explore' }"
-        >{{ $t('nav.explore') }}</router-link
+        >{{ $t("nav.explore") }}</router-link
       >
       <router-link
         to="/library"
         :class="{ active: this.$route.name === 'library' }"
-        >{{ $t('nav.library') }}</router-link
+        >{{ $t("nav.library") }}</router-link
       >
     </div>
     <div class="right-part">
@@ -42,8 +42,7 @@
         </div>
       </div>
       <div class="locale-changer" @click="changeLang">
-        <svg-icon icon-class="translation" class="translation"
-      />
+        <svg-icon icon-class="translation" class="translation" />
       </div>
     </div>
   </nav>
@@ -55,13 +54,13 @@ import ButtonIcon from "@/components/ButtonIcon.vue";
 export default {
   name: "Navbar",
   components: {
-    ButtonIcon,
+    ButtonIcon
   },
   data() {
     return {
       inputFocus: false,
       keywords: "",
-      langs: ['zh-CN', 'en']
+      langs: ["zh-CN", "en"]
     };
   },
   methods: {
@@ -71,19 +70,27 @@ export default {
     },
     goToSearchPage() {
       if (!this.keywords) return;
-      if (this.$route.name === 'search' && this.$route.query.keywords === this.keywords) return;
+      if (
+        this.$route.name === "search" &&
+        this.$route.query.keywords === this.keywords
+      )
+        return;
       this.$router.push({
         name: "search",
-        query: { keywords: this.keywords },
+        query: { keywords: this.keywords }
       });
     },
     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);
     }
-  },
+  }
 };
 </script>
 
@@ -215,6 +222,4 @@ nav {
     width: 48px;
   }
 }
-
-
 </style>
diff --git a/src/locale/index.js b/src/locale/index.js
index 0a62566..34c3548 100644
--- a/src/locale/index.js
+++ b/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
diff --git a/src/store/index.js b/src/store/index.js
index 836ebcb..081fb29 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -13,8 +13,7 @@ if (localStorage.getItem("appVersion") === null) {
   window.location.reload();
 }
 
-Vue.use(Vuex);
-const saveToLocalStorage = (store) => {
+const saveToLocalStorage = store => {
   store.subscribe((mutation, state) => {
     // console.log(mutation);
     localStorage.setItem("player", JSON.stringify(state.player));
@@ -22,20 +21,28 @@ const saveToLocalStorage = (store) => {
   });
 };
 
+Vue.use(Vuex);
 const store = new Vuex.Store({
   state: state,
   mutations,
   actions,
-  plugins: [saveToLocalStorage],
+  plugins: [saveToLocalStorage]
 });
 
 store.state.howler = new Howl({
   src: [
-    `https://music.163.com/song/media/outer/url?id=${store.state.player.currentTrack.id}`,
+    `https://music.163.com/song/media/outer/url?id=${store.state.player.currentTrack.id}`
   ],
   html5: true,
-  format: ["mp3"],
+  format: ["mp3"]
 });
 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;
diff --git a/src/store/initState.js b/src/store/initState.js
index bdec04f..eaf8144 100644
--- a/src/store/initState.js
+++ b/src/store/initState.js
@@ -1,11 +1,11 @@
 const initState = {
   howler: null,
   liked: {
-    songs: [],
+    songs: []
   },
   contextMenu: {
     clickObjectID: 0,
-    showMenu: false,
+    showMenu: false
   },
   player: {
     enable: false,
@@ -26,51 +26,51 @@ const initState = {
           "https://p1.music.126.net/kHNNN-VxufjlBtyNPIP3kg==/109951165306614548.jpg",
         tns: [],
         pic_str: "109951165306614548",
-        pic: 109951165306614540,
+        pic: 109951165306614540
       },
       time: 196022,
-      playable: true,
+      playable: true
     },
     notShuffledList: [],
     list: [],
     listInfo: {
       type: "",
-      id: "",
-    },
+      id: ""
+    }
   },
   settings: {
     playlistCategories: [
       {
         name: "全部",
-        enable: true,
+        enable: true
       },
       {
         name: "推荐歌单",
-        enable: true,
+        enable: true
       },
       {
         name: "精品歌单",
-        enable: true,
+        enable: true
       },
       {
         name: "官方",
-        enable: true,
+        enable: true
       },
       {
         name: "流行",
-        enable: true,
+        enable: true
       },
       {
         name: "电子",
-        enable: true,
+        enable: true
       },
       {
         name: "摇滚",
-        enable: true,
+        enable: true
       },
       {
         name: "ACG",
-        enable: true,
+        enable: true
       },
       // {
       //   name: "最新专辑",
@@ -78,13 +78,14 @@ const initState = {
       // },
       {
         name: "排行榜",
-        enable: true,
-      },
+        enable: true
+      }
     ],
     user: {
-      id: 0,
+      id: 0
     },
-  },
+    lang: null
+  }
 };
 
 export default initState;
diff --git a/src/store/mutations.js b/src/store/mutations.js
index a682155..b8f1b0f 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -13,7 +13,7 @@ export default {
     state.howler = new Howl({
       src: [mp3],
       autoplay: true,
-      html5: true,
+      html5: true
     });
     state.howler.play();
   },
@@ -28,7 +28,7 @@ export default {
     state.player.repeat = status;
   },
   appendTrackToPlayerList(state, { track, playNext = false }) {
-    let existTrack = state.player.list.find((t) => t.id === track.id);
+    let existTrack = state.player.list.find(t => t.id === track.id);
     if (
       (existTrack === null || existTrack === undefined) &&
       playNext === false
@@ -38,7 +38,7 @@ export default {
     }
 
     // 把track加入到正在播放歌曲的下一首位置
-    state.player.list = state.player.list.map((t) => {
+    state.player.list = state.player.list.map(t => {
       if (t.sort > state.player.currentTrack.sort) {
         t.sort = t.sort + 1;
       }
@@ -54,10 +54,10 @@ export default {
     state.player.shuffle = true;
 
     let newSorts = shuffleAList(
-      state.player.list.filter((t) => t.sort > state.player.currentTrack.sort)
+      state.player.list.filter(t => t.sort > state.player.currentTrack.sort)
     );
 
-    state.player.list = state.player.list.map((track) => {
+    state.player.list = state.player.list.map(track => {
       if (newSorts[track.id] !== undefined) track.sort = newSorts[track.id];
       return track;
     });
@@ -68,7 +68,7 @@ export default {
       JSON.stringify(state.player.notShuffledList)
     );
     state.player.currentTrack.sort = state.player.list.find(
-      (t) => t.id === state.player.currentTrack.id
+      t => t.id === state.player.currentTrack.id
     ).sort;
   },
   shuffleTheListBeforePlay(state) {
@@ -76,7 +76,7 @@ export default {
       JSON.stringify(state.player.list)
     );
     let newSorts = shuffleAList(state.player.list);
-    state.player.list = state.player.list.map((track) => {
+    state.player.list = state.player.list.map(track => {
       track.sort = newSorts[track.id];
       return track;
     });
@@ -91,13 +91,16 @@ export default {
     state.liked.songs = trackIDs;
   },
   switchSortBetweenTwoTracks(state, { trackID1, trackID2 }) {
-    let t1 = state.player.list.find((t) => t.id === trackID1);
-    let t2 = state.player.list.find((t) => t.id === trackID2);
+    let t1 = state.player.list.find(t => t.id === trackID1);
+    let t2 = state.player.list.find(t => t.id === trackID2);
     let sorts = [t1.sort, t2.sort];
-    state.player.list = state.player.list.map((t) => {
+    state.player.list = state.player.list.map(t => {
       if (t.id === t1.id) t.sort = sorts[1];
       if (t.id === t2.id) t.sort = sorts[0];
       return t;
     });
   },
+  changeLang(state, lang) {
+    state.settings.lang = lang;
+  }
 };

From 903c58d659d20a5f3e52228b79dc90ba009599f2 Mon Sep 17 00:00:00 2001
From: qier222 <68148142+qier222@users.noreply.github.com>
Date: Thu, 22 Oct 2020 21:21:32 +0800
Subject: [PATCH 5/5] refactor: change the style of playing track

---
 src/components/TrackListItem.vue | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/TrackListItem.vue b/src/components/TrackListItem.vue
index 62ce2c8..6aa5ae0 100644
--- a/src/components/TrackListItem.vue
+++ b/src/components/TrackListItem.vue
@@ -7,16 +7,26 @@
     @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 +166,6 @@ button {
   }
 }
 
-button.play-button {
-  opacity: 1;
-  .svg-icon {
-    height: 14px;
-    width: 14px;
-    color: #335eea;
-  }
-}
-
 .track {
   display: flex;
   align-items: center;
@@ -205,6 +206,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 +288,7 @@ button.play-button {
   .artist,
   .album,
   .time,
+  .no,
   .featured {
     color: rgba(0, 0, 0, 0.28) !important;
   }