feat: player component i18n support

src/components/ContextMenu.vue

@@ -25,7 +25,7 @@ export default {
     };
   },
   methods: {
-    setMenu: function(top, left) {
+    setMenu(top, left) {
       let largestHeight =
         window.innerHeight - this.$refs.menu.offsetHeight - 25;
       let largestWidth = window.innerWidth - this.$refs.menu.offsetWidth - 25;
@@ -35,11 +35,11 @@ export default {
       this.left = left + "px";
     },
 
-    closeMenu: function() {
+    closeMenu() {
       this.showMenu = false;
     },
 
-    openMenu: function(e) {
+    openMenu(e) {
       this.showMenu = true;
       this.$nextTick(
         function() {

src/components/Player.vue

@@ -37,7 +37,7 @@
           </div>
         </div>
         <div class="like-button" v-show="isLoggedIn">
-          <button-icon @click.native="likeCurrentSong">
+          <button-icon @click.native="likeCurrentSong" :title="$t('player.like')">
             <svg-icon
               icon-class="heart"
               v-show="!liked.songs.includes(currentTrack.id)"
@@ -50,29 +50,29 @@
         </div>
       </div>
       <div class="middle-control-buttons">
-        <button-icon @click.native="previous" title="Previous Song"
+        <button-icon @click.native="previous" :title="$t('player.previous')"
           ><svg-icon icon-class="previous"
         /></button-icon>
         <button-icon
           class="play"
           @click.native="play"
-          :title="playing ? 'Pause' : 'Play'"
+          :title="playing ? $t('player.pause') : $t('player.play')"
         >
           <svg-icon :iconClass="playing ? 'pause' : 'play'"
         /></button-icon>
-        <button-icon @click.native="next" title="Next Song"
+        <button-icon @click.native="next" :title="$t('player.next')"
           ><svg-icon icon-class="next"
         /></button-icon>
       </div>
       <div class="right-control-buttons">
         <button-icon
           @click.native="goToNextTracksPage"
-          title="Next Up"
+          :title="$t('player.nextUp')"
           :class="{ active: this.$route.name === 'next' }"
           ><svg-icon icon-class="list"
         /></button-icon>
         <button-icon
-          title="Repeat"
+          :title="$t('player.repeat')"
           @click.native="repeat"
           :class="{ active: player.repeat !== 'off' }"
         >
@@ -82,11 +82,11 @@
         <button-icon
           @click.native="shuffle"
           :class="{ active: player.shuffle }"
-          title="Shuffle"
+          :title="$t('player.shuffle')"
           ><svg-icon icon-class="shuffle"
         /></button-icon>
         <div class="volume-control">
-          <button-icon title="Mute" @click.native="mute">
+          <button-icon :title="$t('player.mute')" @click.native="mute">
             <svg-icon icon-class="volume" v-show="volume > 0.5" />
             <svg-icon icon-class="volume-mute" v-show="volume === 0" />
             <svg-icon

src/locale/messages.js

@@ -61,6 +61,17 @@ export default {
       nowPlaying: 'Now Playing',
       nextUp: 'Next Up'
     },
+    player: {
+      like: 'Like',
+      previous: 'Previous Song',
+      next: 'Next Song',
+      repeat: 'Repeat',
+      shuffle: 'Shuffle',
+      play: 'Play',
+      pause: 'Pause',
+      mute: 'Mute',
+      nextUp: 'Next Up'
+    },
     playlist: "Playlists",
     play: "PLAY",
     likedSong: "Liked Songs",
@@ -134,6 +145,17 @@ export default {
       nowPlaying: '正在播放',
       nextUp: '即将播放'
     },
+    player: {
+      like: '喜欢',
+      previous: '上一首',
+      next: '下一首',
+      repeat: '单曲循环',
+      shuffle: '随机播放',
+      play: '播放',
+      pause: '暂停',
+      mute: '静音',
+      nextUp: '播放列表'
+    },
     playlist: "播放列表",
     play: "播放",
     likedSong: "我喜欢的音乐",