feat(ui): add fullscreen button (#2276)

* feat(ui): add fullscreen button * fix: fullscreen图标修改，添加exit icon
qier222 · Aug 13, 2024 · df82c7c · df82c7c
1 parent bd5af9c
commit df82c7c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/src/assets/icons/fullscreen-exit.svg b/src/assets/icons/fullscreen-exit.svg
diff --git a/src/assets/icons/fullscreen.svg b/src/assets/icons/fullscreen.svg
diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue
@@ -268,6 +268,12 @@
           <svg-icon icon-class="arrow-down" />
         </button>
       </div>
+      <div class="close-button" style="left: 24px" @click="fullscreen">
+        <button>
+          <svg-icon v-if="isFullscreen" icon-class="fullscreen-exit" />
+          <svg-icon v-else icon-class="fullscreen" />
+        </button>
+      </div>
     </div>
   </transition>
 </template>
@@ -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'));