歌词界面支持全屏切换

dev-dist/sw.js

@@ -1 +1 @@
-if(!self.define){let e,t={};const i=(i,n)=>(i=new URL(i+".js",n).href,t[i]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=i,e.onload=t,document.head.appendChild(e)}else e=i,importScripts(i),t()})).then((()=>{let e=t[i];if(!e)throw new Error(`Module ${i} didn’t register its module`);return e})));self.define=(n,r)=>{const o=e||("document"in self?document.currentScript.src:"")||location.href;if(t[o])return;let s={};const l=e=>i(e,o),u={module:{uri:o},exports:s,require:l};t[o]=Promise.all(n.map((e=>u[e]||l(e)))).then((e=>(r(...e),s)))}}define(["./workbox-30e9d199"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"registerSW.js",revision:"3ca0b8505b4bec776b69afdba2768812"},{revision:null,url:"index.html"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html"),{allowlist:[/^\/$/]}))}));
+if(!self.define){let e,i={};const t=(t,n)=>(t=new URL(t+".js",n).href,i[t]||new Promise((i=>{if("document"in self){const e=document.createElement("script");e.src=t,e.onload=i,document.head.appendChild(e)}else e=t,importScripts(t),i()})).then((()=>{let e=i[t];if(!e)throw new Error(`Module ${t} didn’t register its module`);return e})));self.define=(n,s)=>{const o=e||("document"in self?document.currentScript.src:"")||location.href;if(i[o])return;let r={};const l=e=>t(e,o),c={module:{uri:o},exports:r,require:l};i[o]=Promise.all(n.map((e=>c[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-d4ada07d"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"registerSW.js",revision:"3ca0b8505b4bec776b69afdba2768812"},{revision:null,url:"index.html"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html"),{allowlist:[/^\/$/]})),e.registerRoute(/(.*?)\.(woff2|woff|ttf)/,new e.CacheFirst({cacheName:"file-cache",plugins:[]}),"GET"),e.registerRoute(/(.*?)\.(webp|png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/,new e.CacheFirst({cacheName:"image-cache",plugins:[]}),"GET")}));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "splayer",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "private": true,
   "author": "imsyy",
   "home": "https://imsyy.top",
@@ -20,6 +20,7 @@
     "plyr": "^3.7.3",
     "qrcode.vue": "^3.3.3",
     "sass": "^1.56.1",
+    "screenfull": "^6.0.2",
     "terser": "^5.16.1",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"

pnpm-lock.yaml

@@ -13,6 +13,7 @@ specifiers:
   plyr: ^3.7.3
   qrcode.vue: ^3.3.3
   sass: ^1.56.1
+  screenfull: ^6.0.2
   terser: ^5.16.1
   unplugin-auto-import: ^0.12.0
   unplugin-vue-components: ^0.22.11
@@ -32,6 +33,7 @@ dependencies:
   plyr: 3.7.3
   qrcode.vue: 3.3.3_vue@3.2.45
   sass: 1.56.1
+  screenfull: 6.0.2
   terser: 5.16.1
   vue: 3.2.45
   vue-router: 4.1.6_vue@3.2.45

src/components/Player/BigPlayer.vue

@@ -18,6 +18,12 @@
         :component="KeyboardArrowDownFilled"
         @click="music.setBigPlayerState(false)"
       />
+      <n-icon
+        class="screenfull"
+        size="36"
+        :component="screenfullIcon"
+        @click="screenfullChange"
+      />
       <div :class="music.getPlaySongLyric[0] ? 'all' : 'all noLrc'">
         <div class="left">
           <PlayerCover v-if="setting.playerStyle === 'cover'" />
@@ -125,12 +131,15 @@ import {
   KeyboardArrowDownFilled,
   GTranslateFilled,
   MessageFilled,
+  FullscreenRound,
+  FullscreenExitRound,
 } from "@vicons/material";
 import { musicStore, settingStore } from "@/store/index";
 import { useRouter } from "vue-router";
 import MusicFrequency from "@/utils/MusicFrequency.js";
 import PlayerRecord from "./PlayerRecord.vue";
 import PlayerCover from "./PlayerCover.vue";
+import screenfull from "screenfull";
 
 const router = useRouter();
 const music = musicStore();
@@ -148,6 +157,17 @@ const jumpTime = (time) => {
   if ($player) $player.currentTime = time;
 };
 
+// 全屏切换
+let screenfullIcon = shallowRef(FullscreenRound);
+const screenfullChange = () => {
+  if (screenfull.isEnabled) {
+    screenfull.toggle();
+    screenfullIcon.value = screenfull.isFullscreen
+      ? FullscreenRound
+      : FullscreenExitRound;
+  }
+};
+
 // 前往评论
 const toComment = () => {
   music.setBigPlayerState(false);
@@ -262,7 +282,8 @@ watch(
     backdrop-filter: blur(80px);
     z-index: -1;
   }
-  .close {
+  .close,
+  .screenfull {
     position: absolute;
     top: 24px;
     right: 24px;
@@ -280,6 +301,10 @@ watch(
       transform: scale(1);
     }
   }
+  .screenfull {
+    right: 80px;
+    padding: 2px;
+  }
   .all {
     width: 100%;
     height: 100%;