From ecabeb3bffda0453dbfa1d2fd70572bd69a5f402 Mon Sep 17 00:00:00 2001 From: 8790 <2467042336@qq.com> Date: Sun, 5 Jun 2022 08:07:40 +0800 Subject: [PATCH 1/3] feat: Add time on lyrics page --- src/views/lyrics.vue | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue index 2f5b7da1f7..010e93d135 100644 --- a/src/views/lyrics.vue +++ b/src/views/lyrics.vue @@ -32,6 +32,9 @@
+
+ {{ date }} +
@@ -245,6 +248,7 @@ export default { highlightLyricIndex: -1, minimize: true, background: '', + date: this.formatTime(new Date()), }; }, computed: { @@ -327,6 +331,12 @@ export default { created() { this.getLyric(); this.getCoverColor(); + this.initDate(); + }, + beforeDestroy: function () { + if (this.timer) { + clearInterval(this.timer); + } }, destroyed() { clearInterval(this.lyricsInterval); @@ -334,6 +344,24 @@ export default { methods: { ...mapMutations(['toggleLyrics']), ...mapActions(['likeATrack']), + initDate() { + var _this = this; + this.timer = setInterval(function () { + _this.date = _this.formatTime(new Date()); + }, 1000); + }, + formatTime(value) { + let hour = value.getHours(); + let minute = value.getMinutes(); + let second = value.getSeconds(); + return ( + (hour >= 10 ? hour : '0' + hour) + + ':' + + (minute >= 10 ? minute : '0' + minute) + + ':' + + (second >= 10 ? second : '0' + second) + ); + }, playPrevTrack() { this.player.playPrevTrack(); }, @@ -536,6 +564,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; From d1106278f83613066f35ce9dd4529e2bcd548428 Mon Sep 17 00:00:00 2001 From: 8790 <2467042336@qq.com> Date: Sun, 5 Jun 2022 09:02:36 +0800 Subject: [PATCH 2/3] feat: Add the setting item of whether to display the time on the lyrics page --- src/locale/lang/en.js | 1 + src/locale/lang/zh-CN.js | 1 + src/locale/lang/zh-TW.js | 1 + src/views/lyrics.vue | 2 +- src/views/settings.vue | 27 +++++++++++++++++++++++++++ 5 files changed, 31 insertions(+), 1 deletion(-) diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js index 7c39853d2e..9918c585c8 100644 --- a/src/locale/lang/en.js +++ b/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', diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js index c17df89d9b..e21bf4a78a 100644 --- a/src/locale/lang/zh-CN.js +++ b/src/locale/lang/zh-CN.js @@ -173,6 +173,7 @@ export default { on: '打开', dynamic: '动态（GPU 占用较高）', }, + showLyricsTime: '显示当前时间', closeAppOption: { text: '关闭主面板时...', ask: '询问', diff --git a/src/locale/lang/zh-TW.js b/src/locale/lang/zh-TW.js index 22ba73a4f3..1287c9cbd9 100644 --- a/src/locale/lang/zh-TW.js +++ b/src/locale/lang/zh-TW.js @@ -164,6 +164,7 @@ export default { subTitleDefault: '副標題使用別名', enableReversedMode: '啟用倒序播放功能 (實驗性功能)', enableCustomTitlebar: '啟用自訂標題列（重新啟動後生效）', + showLyricsTime: '顯示當前時間', lyricsBackground: { text: '顯示歌詞背景', off: '關閉', diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue index 010e93d135..85a9fb8bab 100644 --- a/src/views/lyrics.vue +++ b/src/views/lyrics.vue @@ -32,7 +32,7 @@
-
+
{{ date }}
diff --git a/src/views/settings.vue b/src/views/settings.vue index bf9564aab9..c25d4411f9 100644 --- a/src/views/settings.vue +++ b/src/views/settings.vue @@ -202,6 +202,22 @@
+
+
+
{{ $t('settings.showLyricsTime') }}
+
+
+
+ + +
+
+
{{ $t('settings.lyricFontSize.text') }}
@@ -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; From 70a4444eb5599dd3761b9b2366d3c6df412dbaff Mon Sep 17 00:00:00 2001 From: 8790 <2467042336@qq.com> Date: Fri, 10 Jun 2022 15:19:31 +0800 Subject: [PATCH 3/3] fix: fix some issue --- src/locale/lang/zh-TW.js | 2 +- src/views/lyrics.vue | 13 +++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/locale/lang/zh-TW.js b/src/locale/lang/zh-TW.js index 1287c9cbd9..ebee00f79b 100644 --- a/src/locale/lang/zh-TW.js +++ b/src/locale/lang/zh-TW.js @@ -164,7 +164,7 @@ export default { subTitleDefault: '副標題使用別名', enableReversedMode: '啟用倒序播放功能 (實驗性功能)', enableCustomTitlebar: '啟用自訂標題列（重新啟動後生效）', - showLyricsTime: '顯示當前時間', + showLyricsTime: '顯示目前時間', lyricsBackground: { text: '顯示歌詞背景', off: '關閉', diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue index 85a9fb8bab..6fe24b3a1d 100644 --- a/src/views/lyrics.vue +++ b/src/views/lyrics.vue @@ -346,20 +346,21 @@ export default { ...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(); - let minute = value.getMinutes(); - let second = value.getSeconds(); + let hour = value.getHours().toString(); + let minute = value.getMinutes().toString(); + let second = value.getSeconds().toString(); return ( - (hour >= 10 ? hour : '0' + hour) + + hour.padStart(2, '0') + ':' + - (minute >= 10 ? minute : '0' + minute) + + minute.padStart(2, '0') + ':' + - (second >= 10 ? second : '0' + second) + second.padStart(2, '0') ); }, playPrevTrack() {