diff --git a/dev-dist/sw.js b/dev-dist/sw.js index 5e2e410..b99fe34 100644 --- a/dev-dist/sw.js +++ b/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")})); diff --git a/package.json b/package.json index c9501a4..e3f548a 100644 --- a/package.json +++ b/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" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2ffb594..681a59c 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/components/Player/BigPlayer.vue b/src/components/Player/BigPlayer.vue index 2e3730f..a9dbc15 100644 --- a/src/components/Player/BigPlayer.vue +++ b/src/components/Player/BigPlayer.vue @@ -18,6 +18,12 @@ :component="KeyboardArrowDownFilled" @click="music.setBigPlayerState(false)" /> +
@@ -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%;