diff --git a/src/assets/icons/fullscreen-exit.svg b/src/assets/icons/fullscreen-exit.svg new file mode 100644 index 0000000000..f76f601e87 --- /dev/null +++ b/src/assets/icons/fullscreen-exit.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/fullscreen.svg b/src/assets/icons/fullscreen.svg new file mode 100644 index 0000000000..e6128c0a70 --- /dev/null +++ b/src/assets/icons/fullscreen.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue index a46695cc9f..a593fdd458 100644 --- a/src/views/lyrics.vue +++ b/src/views/lyrics.vue @@ -268,6 +268,12 @@ +
+ +
@@ -305,6 +311,7 @@ export default { minimize: true, background: '', date: this.formatTime(new Date()), + isFullscreen: !!document.fullscreenElement, }; }, computed: { @@ -435,6 +442,15 @@ export default { this.getLyric(); this.getCoverColor(); this.initDate(); + document.addEventListener('keydown', e => { + if (e.key === 'F11') { + e.preventDefault(); + this.fullscreen(); + } + }); + document.addEventListener('fullscreenchange', () => { + this.isFullscreen = !!document.fullscreenElement; + }); }, beforeDestroy: function () { if (this.timer) { @@ -466,6 +482,13 @@ export default { second.padStart(2, '0') ); }, + fullscreen() { + if (document.fullscreenElement) { + document.exitFullscreen(); + } else { + document.documentElement.requestFullscreen(); + } + }, addToPlaylist() { if (!isAccountLoggedIn()) { this.showToast(locale.t('toast.needToLogin'));