From 5173b28ec584675c17b38278ae393d07ff91526e Mon Sep 17 00:00:00 2001 From: Miao_Spring <539943419@qq.com> Date: Thu, 26 Sep 2024 20:38:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=A7=86=E9=A2=91?= =?UTF-8?q?=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../miaoVideoPlayer/miaoVideoPlayer.vue | 29 ++++++-------- .../{ => lockScreen}/lockScreen.scss | 0 .../{ => lockScreen}/lockScreen.ts | 12 ------ .../xgplayer-vue-frame/fakeRoot.vue | 40 +++++++++++++++++++ .../xgplayer-vue-frame/xgplayer-vue-frame.ts | 36 +++++++++++++++++ .../src/XGPlayerVuePluginRoot.vue | 33 +++++++++++++++ 6 files changed, 122 insertions(+), 28 deletions(-) rename src/plugins/miaoVideoPlayer/playerPlugin/{ => lockScreen}/lockScreen.scss (100%) rename src/plugins/miaoVideoPlayer/playerPlugin/{ => lockScreen}/lockScreen.ts (94%) create mode 100644 src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/fakeRoot.vue create mode 100644 src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame.ts create mode 100644 src/plugins/miaoVideoPlayer/src/XGPlayerVuePluginRoot.vue diff --git a/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue b/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue index 0fb7fc9..22e9de9 100644 --- a/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue +++ b/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue @@ -10,19 +10,17 @@ 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 lockScreen from './playerPlugin/lockScreen/lockScreen' +import xgplayerVueApp from './src/XGPlayerVuePluginRoot.vue' +import useXGPlayerVueFrame from './playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame' import axios from 'axios' import { uniq } from 'lodash' -// import config from '@/config' -// const props = defineProps<{ -// id: number -// }>() + const currentFiles = defineModel('currentFiles', { required: true }) @@ -37,17 +35,15 @@ let _player: XGPlayer const { setVideo } = (() => { 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 = [...currentFiles.value, ...videoVFiles, ...(textTrackFiles ?? [])] + const videos = findVideo(currentFiles.value) + const videoVFile = videos.shift() as VirtualFile const _list = [] if (textTrackFiles) { for (let i of textTrackFiles) { @@ -94,13 +90,14 @@ const { setVideo } = (() => { } _player && _player.destroy() _player = new XGPlayer({ - plugins: [TextTrack, lockScreen], + plugins: [TextTrack, lockScreen, useXGPlayerVueFrame(xgplayerVueApp)], el: xgPlayer.value, url: videoVFile.url, width: '100%', height: '100%', volume: 1, - pip: true, + loop: true, + // pip: true, videoFillMode: 'contain', autoplay: true, download: true, @@ -113,7 +110,7 @@ const { setVideo } = (() => { lang: 'zh-cn', playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10], playNext: { - urlList: [] + urlList: videos.map(v=>v.url) }, texttrack }) @@ -292,7 +289,7 @@ const findVideo = (vFiles: VirtualFile[]) => } } return false - })[0] + }) const findTextTrack = (vFiles: VirtualFile[]) => vFiles.filter((v) => { diff --git a/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen.scss b/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.scss similarity index 100% rename from src/plugins/miaoVideoPlayer/playerPlugin/lockScreen.scss rename to src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.scss diff --git a/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen.ts b/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts similarity index 94% rename from src/plugins/miaoVideoPlayer/playerPlugin/lockScreen.ts rename to src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts index 49f1592..7d80111 100644 --- a/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen.ts +++ b/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 diff --git a/src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/fakeRoot.vue b/src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/fakeRoot.vue new file mode 100644 index 0000000..e728393 --- /dev/null +++ b/src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/fakeRoot.vue @@ -0,0 +1,40 @@ + + + + + \ No newline at end of file diff --git a/src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame.ts b/src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame.ts new file mode 100644 index 0000000..aba2aca --- /dev/null +++ b/src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame.ts @@ -0,0 +1,36 @@ +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 | null = null; + + constructor(args: any) { + super(args); + } + + afterCreate() { + console.log({fakeApp}) + 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; diff --git a/src/plugins/miaoVideoPlayer/src/XGPlayerVuePluginRoot.vue b/src/plugins/miaoVideoPlayer/src/XGPlayerVuePluginRoot.vue new file mode 100644 index 0000000..3d937ef --- /dev/null +++ b/src/plugins/miaoVideoPlayer/src/XGPlayerVuePluginRoot.vue @@ -0,0 +1,33 @@ + + + + + \ No newline at end of file