feat: Add time to lyric page (#1676)

* feat: Add time on lyrics page

* feat: Add the setting item of whether to display the time on the lyrics page

* fix: fix some issue

src/locale/lang/en.js

@@ -166,6 +166,7 @@ export default {
     subTitleDefault: 'Show Alias for Subtitle by default',
     enableReversedMode: 'Enable Reversed Mode (Experimental)',
     enableCustomTitlebar: 'Enable custom title bar (Need restart)',
+    showLyricsTime: 'Display current time',
     lyricsBackground: {
       text: 'Show Lyrics Background',
       off: 'Off',

src/locale/lang/zh-CN.js

@@ -173,6 +173,7 @@ export default {
       on: '打开',
       dynamic: '动态（GPU 占用较高）',
     },
+    showLyricsTime: '显示当前时间',
     closeAppOption: {
       text: '关闭主面板时...',
       ask: '询问',

src/locale/lang/zh-TW.js

@@ -164,6 +164,7 @@ export default {
     subTitleDefault: '副標題使用別名',
     enableReversedMode: '啟用倒序播放功能 (實驗性功能)',
     enableCustomTitlebar: '啟用自訂標題列（重新啟動後生效）',
+    showLyricsTime: '顯示目前時間',
     lyricsBackground: {
       text: '顯示歌詞背景',
       off: '關閉',

src/views/lyrics.vue

@@ -32,6 +32,9 @@
 
       <div class="left-side">
         <div>
+          <div v-if="settings.showLyricsTime" class="date">
+            {{ date }}
+          </div>
           <div class="cover">
             <div class="cover-container">
               <img :src="imageUrl" loading="lazy" />
@@ -277,6 +280,7 @@ export default {
       highlightLyricIndex: -1,
       minimize: true,
       background: '',
+      date: this.formatTime(new Date()),
     };
   },
   computed: {
@@ -367,6 +371,12 @@ export default {
   created() {
     this.getLyric();
     this.getCoverColor();
+    this.initDate();
+  },
+  beforeDestroy: function () {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
   },
   destroyed() {
     clearInterval(this.lyricsInterval);
@@ -374,6 +384,25 @@ export default {
   methods: {
     ...mapMutations(['toggleLyrics', 'updateModal']),
     ...mapActions(['likeATrack']),
+    initDate() {
+      var _this = this;
+      clearInterval(this.timer);
+      this.timer = setInterval(function () {
+        _this.date = _this.formatTime(new Date());
+      }, 1000);
+    },
+    formatTime(value) {
+      let hour = value.getHours().toString();
+      let minute = value.getMinutes().toString();
+      let second = value.getSeconds().toString();
+      return (
+        hour.padStart(2, '0') +
+        ':' +
+        minute.padStart(2, '0') +
+        ':' +
+        second.padStart(2, '0')
+      );
+    },
     addToPlaylist() {
       if (!isAccountLoggedIn()) {
         this.showToast(locale.t('toast.needToLogin'));
@@ -596,6 +625,20 @@ export default {
 
   z-index: 1;
 
+  .date {
+    max-width: 54vh;
+    margin: 24px 0;
+    color: var(--color-text);
+    text-align: center;
+    font-size: 4rem;
+    font-weight: 600;
+    opacity: 0.88;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+  }
+
   .controls {
     max-width: 54vh;
     margin-top: 24px;

src/views/settings.vue

@@ -202,6 +202,22 @@
           </select>
         </div>
       </div>
+      <div class="item">
+        <div class="left">
+          <div class="title"> {{ $t('settings.showLyricsTime') }} </div>
+        </div>
+        <div class="right">
+          <div class="toggle">
+            <input
+              id="show-lyrics-time"
+              v-model="showLyricsTime"
+              type="checkbox"
+              name="show-lyrics-time"
+            />
+            <label for="show-lyrics-time"></label>
+          </div>
+        </div>
+      </div>
       <div class="item">
         <div class="left">
           <div class="title"> {{ $t('settings.lyricFontSize.text') }} </div>
@@ -936,6 +952,17 @@ export default {
         });
       },
     },
+    showLyricsTime: {
+      get() {
+        return this.settings.showLyricsTime;
+      },
+      set(value) {
+        this.$store.commit('updateSettings', {
+          key: 'showLyricsTime',
+          value,
+        });
+      },
+    },
     closeAppOption: {
       get() {
         return this.settings.closeAppOption;