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;