feat: 用aplayer随便做了一个音乐插件

package.json

@@ -25,6 +25,7 @@
         "@codemirror/lang-yaml": "^6.1.1",
         "@vicons/ionicons5": "^0.12.0",
         "aes-js": "^3.1.2",
+        "aplayer": "^1.10.1",
         "axios": "^1.7.3",
         "codemirror": "^6.0.1",
         "copy-to-clipboard": "^3.3.3",

pnpm-lock.yaml

@@ -47,6 +47,9 @@ importers:
       aes-js:
         specifier: ^3.1.2
         version: 3.1.2
+      aplayer:
+        specifier: ^1.10.1
+        version: 1.10.1
       axios:
         specifier: ^1.7.3
         version: 1.7.3
@@ -606,6 +609,9 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
+  aplayer@1.10.1:
+    resolution: {integrity: sha512-HAfyxgCUTLAqtYlxzzK9Fyqg6y+kZ9CqT1WfeWE8FSzwspT6oBqWOZHANPHF3RGTtC33IsyEgrfthPDzU5r9kQ==}
+
   aproba@2.0.0:
     resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
 
@@ -629,6 +635,9 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  balloon-css@0.5.2:
+    resolution: {integrity: sha512-zheJpzwyNrG4t39vusA67v3BYg1HTVXOF8cErPEHzWK88PEOFwgo6Ea9VHOgOWNMgeuOtFVtB73NE2NWl9uDyQ==}
+
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -1019,6 +1028,9 @@ packages:
     resolution: {integrity: sha512-Aweb9unOEpQ3ezu4Q00DPvvM2ZTUitJdNKeP/+uQgr1IBIqu574IaZoURId7BKtWMREwzKa9OgzPzezWGPWFQw==}
     engines: {node: ^10 || ^12 || >=14}
 
+  promise-polyfill@7.1.0:
+    resolution: {integrity: sha512-P6NJ2wU/8fac44ENORsuqT8TiolKGB2u0fEClPtXezn7w5cmLIjM/7mhPlTebke2EPr6tmqZbXvnX0TxwykGrg==}
+
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
@@ -1079,6 +1091,9 @@ packages:
   simple-get@3.1.1:
     resolution: {integrity: sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==}
 
+  smoothscroll@0.4.0:
+    resolution: {integrity: sha512-sggQ3U2Un38b3+q/j1P4Y4fCboCtoUIaBYoge+Lb6Xg1H8RTIif/hugVr+ErMtIDpvBbhQfTjtiTeYAfbw1ZGQ==}
+
   source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
@@ -1793,6 +1808,12 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  aplayer@1.10.1:
+    dependencies:
+      balloon-css: 0.5.2
+      promise-polyfill: 7.1.0
+      smoothscroll: 0.4.0
+
   aproba@2.0.0:
     optional: true
 
@@ -1818,6 +1839,8 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  balloon-css@0.5.2: {}
+
   binary-extensions@2.3.0: {}
 
   brace-expansion@1.1.11:
@@ -2271,6 +2294,8 @@ snapshots:
       picocolors: 1.0.1
       source-map-js: 1.2.0
 
+  promise-polyfill@7.1.0: {}
+
   proxy-from-env@1.1.0: {}
 
   punycode.js@2.3.1: {}
@@ -2347,6 +2372,8 @@ snapshots:
       simple-concat: 1.0.1
     optional: true
 
+  smoothscroll@0.4.0: {}
+
   source-map-js@1.2.0: {}
 
   string-width@4.2.3:

src/plugins/miaoMusicPlayer/export.ts

@@ -0,0 +1,33 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import { PluginExportType } from '@/types/type'
+import Disc from '@vicons/ionicons5/es/Disc'
+
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoMusicPlayer',
+    name: '音乐',
+    icon: Disc,
+    getComponent: async () => 
+        (await import('./miaoMusicPlayerDemo.vue')).default,
+    filter: (vDirs, vFiles) => {
+        if (vDirs.length !== 0) {
+            return false
+        }
+        if (vFiles.length === 0) {
+            return false
+        }
+        for (let i of vFiles) {
+            for (let s of ['mp3']) {
+                if (i.name.endsWith(s)) {
+                    return true
+                }
+            }
+        }
+        return vFiles[0].name.endsWith('?')
+    },
+    disable: false
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.component

src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue

@@ -0,0 +1,73 @@
+<template>
+    <miao-drop-handler @on-virtual-files="handleDropVFiles">
+        <div class="miaoMusic-container">
+            <div ref="aplayer" />
+        </div>
+    </miao-drop-handler>
+</template>
+
+<script setup lang="ts">
+import miaoDropHandler from '@/components/miaoDropHandler.vue'
+import { VirtualFile } from '@/class/VirtualDirectory';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import 'APlayer/dist/APlayer.min.css';
+// @ts-ignore
+import APlayer from 'APlayer';
+import config from '@/config';
+
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+    required: true
+});
+
+const MusicList = computed(() => currentFiles.value.map(v => ({
+    url: `${config.baseUrl}${v.url}`,
+    name: v.name,
+    artist: '???',
+})));
+
+const handleDropVFiles = (files: VirtualFile[]) => {
+    currentFiles.value = [...currentFiles.value, ...files];
+};
+
+const aplayer = ref<any>(null);
+
+let ap: any
+
+onMounted(() => {
+    currentFiles.value = [...currentFiles.value.reverse()]
+    const aplayerOption = {
+        container: aplayer.value,
+        audio: MusicList.value,
+        autoplay: true,
+    }
+    ap = new APlayer(aplayerOption);
+});
+
+onUnmounted(() => {
+    ap.destroy()
+})
+</script>
+
+<style scoped lang="scss">
+.miaoMusic-container {
+    width: 100%;
+    height: 100%;
+}
+</style>
+<style lang="scss">
+.aplayer {
+    height: calc(100% - 10px);
+    display: flex;
+    flex-direction: column;
+    // .aplayer-list {
+    //     max-height: none !important;
+    //     height: fit-content;
+    //     min-height: 0;
+    //     ol {
+    //         max-height: none !important;
+    //         height: fit-content;
+    //     }
+    // }
+}
+</style>

src/plugins/miaoPluginTemplate/template.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="miaoCrypto-container"></div>
+    <div class="template-container"></div>
 </template>
 
 <script setup lang="ts">
@@ -12,7 +12,7 @@
 </script>
 
 <style scoped lang="scss">
-.miaoCrypto-container {
+.template-container {
     width: 100%;
     height: 100%;
 }

src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue

@@ -10,44 +10,74 @@
 import { VirtualFile } from '@/class/VirtualDirectory'
 import miaoDropHandler from '@/components/miaoDropHandler.vue'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
-// import useVirtualPages from '@/hooks/useVirtualPages';
 import XGPlayer from 'xgplayer'
 import '@/style/xgplayer.scss'
 import TextTrack from 'xgplayer/es/plugins/track'
 import 'xgplayer/es/plugins/track/index.css'
-import lockScreen from './playerPlugin/lockScreen'
 import axios from 'axios'
 import { uniq } from 'lodash'
-// import config from '@/config'
+import lockScreen from './playerPlugin/lockScreen/lockScreen'
+import xgplayerVueApp from './src/XGPlayerVuePluginRoot.vue'
+import useXGPlayerVueFrame from './playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame'
+
 
-// const props = defineProps<{
-//     id: number
-// }>()
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
     required: true
 })
-
-// const views = useVirtualPages()
-// const view = views.getView(props.id)
-
-// const videoPath = ref<string>('');
 const xgPlayer = ref()
 
 let _player: XGPlayer
 const { setVideo } = (() => {
+    const initPlayer = (videos: VirtualFile[], texttrack: {
+        list: {
+            id: number; url: string
+            text: string
+        }[]
+    }) => {
+        const videoVFile = videos.shift() as VirtualFile
+        _player && _player.destroy()
+        _player = new XGPlayer({
+            plugins: [
+                TextTrack,
+                lockScreen,
+                useXGPlayerVueFrame(xgplayerVueApp),
+            ],
+            el: xgPlayer.value,
+            url: videoVFile.url,
+            width: '100%',
+            height: '100%',
+            volume: 1,
+            // loop: true,
+            // pip: true,
+            videoFillMode: 'contain',
+            autoplay: true,
+            download: true,
+            screenShot: {
+                saveImg: true,
+                quality: 1,
+                type: 'image/png',
+                format: '.png'
+            },
+            lang: 'zh-cn',
+            playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
+            playNext: {
+                urlList: videos.map(v => v.url)
+            },
+            texttrack,
+            ignores: [videos.length === 0 ? 'playNext' : undefined].filter(v => v) as string[]
+        })
+    }
     return {
         setVideo: async (
-            videoVFile: VirtualFile,
+            videoVFiles: VirtualFile[],
             textTrackFiles?: VirtualFile[]
         ) => {
-            if(!currentFiles.value.includes(videoVFile)) {
+            // 天哪什么精神状态会写出这种代码
-                currentFiles.value = [videoVFile]
-            }
-            videoVFile || (videoVFile = findVideo(currentFiles.value))
             textTrackFiles &&
                 textTrackFiles.push(...findTextTrack(currentFiles.value))
             textTrackFiles = uniq(textTrackFiles)
-            currentFiles.value = [videoVFile, ...(textTrackFiles ?? [])]
+            currentFiles.value = uniq([...currentFiles.value, ...videoVFiles, ...(textTrackFiles ?? [])])
+            const videos = findVideo(uniq([...currentFiles.value, ...videoVFiles]))
             const _list = []
             if (textTrackFiles) {
                 for (let i of textTrackFiles) {
@@ -92,31 +122,7 @@ const { setVideo } = (() => {
             const texttrack = {
                 list: _list
             }
-            _player && _player.destroy()
+            initPlayer([...videos], texttrack)
-            _player = new XGPlayer({
-                plugins: [TextTrack, lockScreen],
-                el: xgPlayer.value,
-                url: videoVFile.url,
-                width: '100%',
-                height: '100%',
-                volume: 1,
-                pip: true,
-                videoFillMode: 'contain',
-                autoplay: true,
-                download: true,
-                screenShot: {
-                    saveImg: true,
-                    quality: 1,
-                    type: 'image/png',
-                    format: '.png'
-                },
-                lang: 'zh-cn',
-                playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
-                playNext: {
-                    urlList: []
-                },
-                texttrack
-            })
         }
     }
 })()
@@ -138,7 +144,7 @@ const { setUrl, destroyUrl } = (() => {
 })()
 
 const handleDropVFiles = (files: VirtualFile[]) => {
-    setVideo(findVideo(files), findTextTrack(files))
+    setVideo(findVideo(files.reverse()), findTextTrack(files))
 }
 
 function srtToVtt(srt: string) {
@@ -285,14 +291,14 @@ function ssaToVtt(ssaContent: string): string {
 }
 
 const findVideo = (vFiles: VirtualFile[]) =>
-    vFiles.filter((v) => {
+    uniq(vFiles.filter((v) => {
         for (let s of ['mp4', 'mp3']) {
             if (v.name.endsWith(s)) {
                 return true
             }
         }
         return false
-    })[0]
+    }))
 
 const findTextTrack = (vFiles: VirtualFile[]) =>
     vFiles.filter((v) => {
@@ -306,6 +312,7 @@ const findTextTrack = (vFiles: VirtualFile[]) =>
 
 onMounted(() => {
     if (currentFiles.value.length) {
+        currentFiles.value.reverse()
         setVideo(
             findVideo(currentFiles.value),
             findTextTrack(currentFiles.value)

src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts

@@ -1,23 +1,11 @@
 import { BasePlugin } from 'xgplayer'
 import './lockScreen.scss'
 
-interface LockPluginConfig {
-    lockText: string
-    unlockText: string
-}
-
 export default class LockPlugin extends BasePlugin {
     static get pluginName() {
         return 'lockPlugin'
     }
 
-    static get defaultConfig(): LockPluginConfig {
-        return {
-            lockText: '锁定',
-            unlockText: '解锁'
-        }
-    }
-
     private locked: boolean
     private lockDiv: HTMLDivElement | null = null
     private overlayDiv: HTMLDivElement | null = null

src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/fakeRoot.vue

@@ -0,0 +1,36 @@
+<template>
+    <Teleport :to="player.root">
+        <App v-bind="pick(toRaw(props), ['player', 'root'])"></App>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import { Component, toRaw } from "vue";
+import Player from "xgplayer/es/player";
+import { pick } from "lodash";
+const props = defineProps({
+    player: {
+        type: Player,
+        required: true
+    },
+    root: {
+        type: Element,
+        required: true
+    },
+    App: {
+        type: Object as () => Component,
+        required: true
+    }
+})
+
+</script>
+
+<style lang="scss" scoped>
+.test {
+    width: 50px;
+    height: 50px;
+    background-color: aliceblue;
+    position: absolute;
+    right: 0;
+}
+</style>

src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame.ts

@@ -0,0 +1,35 @@
+import { App, Component, createApp } from "vue";
+import { BasePlugin } from "xgplayer";
+import fakeApp from "./fakeRoot.vue";
+
+const useXGPlayerVueFrame = (App: Component) => {
+	return class XGPlayerVueFrame extends BasePlugin {
+		static get pluginName() {
+			return "xgplayerVueFrame";
+		}
+
+		private root: HTMLDivElement | null = null;
+		private app: App<Element> | null = null;
+
+		constructor(args: any) {
+			super(args);
+		}
+
+		afterCreate() {
+			this.createVueFrame();
+		}
+
+		private createVueFrame() {
+			this.root = document.createElement("div");
+			this.app = createApp(fakeApp, { player: this.player, root: this.root, App })
+			this.app.mount(this.root);
+			// this.app.mount(this.player.root);
+		}
+
+		destroy() {
+			this.app?.unmount()
+		}
+	};
+};
+
+export default useXGPlayerVueFrame;

src/plugins/miaoVideoPlayer/src/XGPlayerVuePluginRoot.vue

@@ -0,0 +1,33 @@
+<template>
+    <!-- <div class="test"></div> -->
+</template>
+
+<script setup lang="ts">
+import { onMounted } from "vue";
+import Player from "xgplayer/es/player";
+const props = defineProps({
+    player: {
+        type: Player,
+        required: true
+    },
+    root: {
+        type: Element,
+        required: true
+    }
+})
+
+onMounted(() => {
+    props
+})
+
+</script>
+
+<style lang="scss" scoped>
+.test {
+    width: 50px;
+    height: 50px;
+    background-color: aliceblue;
+    position: absolute;
+    right: 0;
+}
+</style>