From 9e2a169347f3616370ab6302b30996b7a583bbd7 Mon Sep 17 00:00:00 2001
From: StarsEnd <starsend33a2d17@outlook.com>
Date: Mon, 22 Jul 2024 22:51:55 +0800
Subject: [PATCH 1/2] feat(ui): add fullscreen button

---
 src/assets/icons/fullscreen.svg |  1 +
 src/views/lyrics.vue            | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)
 create mode 100644 src/assets/icons/fullscreen.svg

diff --git a/src/assets/icons/fullscreen.svg b/src/assets/icons/fullscreen.svg
new file mode 100644
index 0000000000..86751429e8
--- /dev/null
+++ b/src/assets/icons/fullscreen.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill="" width="200" height="200"><path d="M475.3408 850.5344h-266.24a37.2736 37.2736 0 0 1-37.2736-37.2736v-266.24a37.2736 37.2736 0 1 1 74.5472 0v228.9664h228.9664a37.2736 37.2736 0 0 1 0 74.5472zM830.3104 495.5648a37.2736 37.2736 0 0 1-37.2736-37.2736V229.3248h-228.9664a37.2736 37.2736 0 1 1 0-74.5472h266.24a37.2736 37.2736 0 0 1 37.2736 37.2736v266.24a37.2736 37.2736 0 0 1-37.2736 37.2736z"></path></svg>
\ No newline at end of file
diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue
index a46695cc9f..80b5730b23 100644
--- a/src/views/lyrics.vue
+++ b/src/views/lyrics.vue
@@ -268,6 +268,11 @@
           <svg-icon icon-class="arrow-down" />
         </button>
       </div>
+      <div class="close-button" style="left: 24px" @click="fullscreen">
+        <button>
+          <svg-icon icon-class="fullscreen" />
+        </button>
+      </div>
     </div>
   </transition>
 </template>
@@ -435,6 +440,12 @@ export default {
     this.getLyric();
     this.getCoverColor();
     this.initDate();
+    document.addEventListener('keydown', e => {
+      if (e.key === 'F11') {
+        e.preventDefault();
+        this.fullscreen();
+      }
+    });
   },
   beforeDestroy: function () {
     if (this.timer) {
@@ -466,6 +477,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'));

From b9e6c22081a6d1dd08a966614534a1dcd1a330aa Mon Sep 17 00:00:00 2001
From: StarsEnd <starsend33a2d17@outlook.com>
Date: Thu, 8 Aug 2024 03:30:26 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20fullscreen=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=8C=E6=B7=BB=E5=8A=A0exit=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/fullscreen-exit.svg | 3 +++
 src/assets/icons/fullscreen.svg      | 4 +++-
 src/views/lyrics.vue                 | 7 ++++++-
 3 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/icons/fullscreen-exit.svg

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 @@
+<svg width="14" height="14" viewBox="0 0 14 14" data-darkreader-inline-fill="" xmlns="http://www.w3.org/2000/svg">
+  <path id="path" d="M1 11L3 11L3 13C3 13.55 3.45 14 4 14C4.55 14 5 13.55 5 13L5 10C5 9.45 4.55 9 4 9L1 9C0.45 9 0 9.45 0 10C0 10.55 0.45 11 1 11ZM11 3L11 1C11 0.45 10.55 0 10 0C9.45 0 9 0.45 9 1L9 4C9 4.54 9.45 5 10 5L13 5C13.55 5 14 4.54 14 4C14 3.45 13.55 3 13 3L11 3Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/fullscreen.svg b/src/assets/icons/fullscreen.svg
index 86751429e8..e6128c0a70 100644
--- a/src/assets/icons/fullscreen.svg
+++ b/src/assets/icons/fullscreen.svg
@@ -1 +1,3 @@
-<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill="" width="200" height="200"><path d="M475.3408 850.5344h-266.24a37.2736 37.2736 0 0 1-37.2736-37.2736v-266.24a37.2736 37.2736 0 1 1 74.5472 0v228.9664h228.9664a37.2736 37.2736 0 0 1 0 74.5472zM830.3104 495.5648a37.2736 37.2736 0 0 1-37.2736-37.2736V229.3248h-228.9664a37.2736 37.2736 0 1 1 0-74.5472h266.24a37.2736 37.2736 0 0 1 37.2736 37.2736v266.24a37.2736 37.2736 0 0 1-37.2736 37.2736z"></path></svg>
\ No newline at end of file
+<svg width="14" height="14" viewBox="0 0 14 14" data-darkreader-inline-fill="" xmlns="http://www.w3.org/2000/svg">
+  <path id="path" d="M1 9C0.45 9 0 9.45 0 10L0 13C0 13.55 0.45 14 1 14L4 14C4.55 14 5 13.55 5 13C5 12.45 4.55 12 4 12L2 12L2 10C2 9.45 1.55 9 1 9ZM9 1C9 1.54 9.45 2 10 2L12 2L12 4C12 4.54 12.45 5 13 5C13.55 5 14 4.54 14 4L14 1C14 0.45 13.55 0 13 0L10 0C9.45 0 9 0.45 9 1Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue
index 80b5730b23..a593fdd458 100644
--- a/src/views/lyrics.vue
+++ b/src/views/lyrics.vue
@@ -270,7 +270,8 @@
       </div>
       <div class="close-button" style="left: 24px" @click="fullscreen">
         <button>
-          <svg-icon icon-class="fullscreen" />
+          <svg-icon v-if="isFullscreen" icon-class="fullscreen-exit" />
+          <svg-icon v-else icon-class="fullscreen" />
         </button>
       </div>
     </div>
@@ -310,6 +311,7 @@ export default {
       minimize: true,
       background: '',
       date: this.formatTime(new Date()),
+      isFullscreen: !!document.fullscreenElement,
     };
   },
   computed: {
@@ -446,6 +448,9 @@ export default {
         this.fullscreen();
       }
     });
+    document.addEventListener('fullscreenchange', () => {
+      this.isFullscreen = !!document.fullscreenElement;
+    });
   },
   beforeDestroy: function () {
     if (this.timer) {