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'));