diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js index 7c39853..9918c58 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 c17df89..e21bf4a 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 22ba73a..ebee00f 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 e73a993..efe29e9 100644 --- a/src/views/lyrics.vue +++ b/src/views/lyrics.vue @@ -32,6 +32,9 @@
+
+ {{ date }} +
@@ -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; diff --git a/src/views/settings.vue b/src/views/settings.vue index bf9564a..c25d441 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;