From dcdb3a1ab8574931ee603cb734a6cb861da788d7 Mon Sep 17 00:00:00 2001
From: Zhoujiahui <539943419@qq.com>
Date: Sun, 29 Sep 2024 13:26:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E6=8B=96=E5=8A=A8?=
 =?UTF-8?q?=E6=9C=89=E6=95=88=E5=88=A4=E5=AE=9A=E6=9D=A1=E4=BB=B6=E3=80=82?=
 =?UTF-8?q?=E6=AD=8C=E5=8D=95=E6=B7=BB=E5=8A=A0=E6=92=AD=E6=94=BEmv?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E3=80=82=E6=AD=8C=E5=8D=95=E4=BB=85=E4=B8=BA?=
 =?UTF-8?q?1=E9=A6=96=E6=97=B6=E4=B9=9F=E8=83=BD=E5=94=A4=E8=B5=B7?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/miaoDropHandler.vue            | 20 +++++++++-----
 src/hooks/miaoTools.ts                        |  7 ++++-
 .../miaoMusicPlayer/hooks/aplayerMiao.ts      |  7 ++---
 .../miaoMusicPlayer/miaoMusicPlayerDemo.vue   | 14 +++++-----
 .../miaoMusicPlayer/src/APlayer.fix.css       |  8 +++---
 .../miaoMusicPlayer/src/aplayerListNew.vue    | 27 ++++++++++++++-----
 src/plugins/miaoVideoPlayer/export.ts         |  5 ++--
 7 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/src/components/miaoDropHandler.vue b/src/components/miaoDropHandler.vue
index b403ec4..46f914c 100644
--- a/src/components/miaoDropHandler.vue
+++ b/src/components/miaoDropHandler.vue
@@ -1,5 +1,9 @@
 <template>
-    <div class="container" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
+    <div
+        class="container"
+        @dragover="handleDragOver"
+        @dragleave="handleDragLeave"
+        @drop="handleDrop">
         <slot></slot>
         <miao-mask v-model:show="showMask"></miao-mask>
     </div>
@@ -64,11 +68,15 @@ const removeDirectory = async (files: File[]) => {
         }
     }
 }
-const check = (event: DragEvent) => [
-    ...(event.dataTransfer?.files ?? []),
-    ...(dataBus.get('dragData_vFiles') ?? []),
-    ...(dataBus.get('dragData_vDirectory') ?? [])
-].length !== 0
+const check = (event: DragEvent) => {
+    return (
+        [
+            ...(event.dataTransfer?.types?.filter(v=>v === 'Files') ?? []),
+            ...(dataBus.get('dragData_vFiles') ?? []),
+            ...(dataBus.get('dragData_vDirectory') ?? [])
+        ].length !== 0
+    )
+}
 
 const handleDragOver = async (event: DragEvent) => {
     if (props.disable || check(event) === false) {
diff --git a/src/hooks/miaoTools.ts b/src/hooks/miaoTools.ts
index 8d8b287..f81afe0 100644
--- a/src/hooks/miaoTools.ts
+++ b/src/hooks/miaoTools.ts
@@ -53,7 +53,12 @@ export const renderIcon = (icon: any) => {
     }
 }
 
+export const sleep = async (timeout: number) => {
+    await new Promise(_=>setTimeout(_, timeout))
+}
+
 export default {
     filePicker,
-    renderIcon
+    renderIcon,
+    sleep
 }
diff --git a/src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts b/src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts
index f10c930..ef73fb6 100644
--- a/src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts
+++ b/src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts
@@ -1,10 +1,11 @@
 import { createApp, Reactive } from "vue";
 import aplayerListNew from "../src/aplayerListNew.vue";
-import apType from "../types/ap";
+import apType, { audioType } from "../types/ap";
 
 type aplayerMiaoOption = {
-	onDragItemStart?: () => void,
-	onDragItemEnd?: () => void,
+    onDragItemStart?: () => void
+    onDragItemEnd?: () => void
+    onPlayVideo?: (element: audioType) => void
 }
 
 /**
diff --git a/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue b/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue
index fd1760d..8127b55 100644
--- a/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue
+++ b/src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue
@@ -26,6 +26,9 @@ import config from '@/config';
 import difference from 'lodash/difference';
 import uniq from 'lodash/uniq'
 import apType from './types/ap';
+import usePluginCenter from '@/hooks/usePluginCenter';
+
+const pluginCenter = usePluginCenter()
 
 const miaoMessageRef = ref<InstanceType<typeof miaoAlertTipProvider>>()
 
@@ -49,7 +52,7 @@ const getMusicList = (mp3VFiles: VirtualFile[]) => mp3VFiles.map((v, index) => (
     url: `${config.baseUrl}${v.url}`,
     name: v.name,
     artist: ' ',
-    index
+    index,
 }));
 
 const handleDropVFiles = (files: VirtualFile[]) => {
@@ -58,8 +61,6 @@ const handleDropVFiles = (files: VirtualFile[]) => {
 
 const aplayer = ref<any>(null);
 
-const disableDropReceiver = ref(false)
-
 let ap: apType
 let vueApp: App<Element>
 
@@ -77,11 +78,12 @@ onMounted(() => {
     ap = reactive<apType>(new APlayer(aplayerOption))
     vueApp = useAplayerMiao(ap, {
         onDragItemStart: () => {
-            disableDropReceiver.value = true
         },
         onDragItemEnd: () => {
-            disableDropReceiver.value = false
         },
+        onPlayVideo: element => {
+            pluginCenter.usePlugin('miaoVideoPlayer', [], [currentFiles.value.find(v=>v.name === element.name) as VirtualFile])
+        }
     })
     ap.on('listremove', (...args: any) => {
         const { index } = args[0] as { index: number }
@@ -112,7 +114,7 @@ onUnmounted(() => {
 .aplayer {
     display: flex;
     flex-direction: column-reverse;
-    position: fixed;
+    position: absolute;
     bottom: 10px;
     width: -webkit-fill-available;
 }
diff --git a/src/plugins/miaoMusicPlayer/src/APlayer.fix.css b/src/plugins/miaoMusicPlayer/src/APlayer.fix.css
index de7a46e..8b8c8b7 100644
--- a/src/plugins/miaoMusicPlayer/src/APlayer.fix.css
+++ b/src/plugins/miaoMusicPlayer/src/APlayer.fix.css
@@ -427,11 +427,11 @@
     fill: #000
 }
 
-.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu,
+/* .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu,
 .aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-menu,
 .aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode {
     display: none
-}
+} */
 
 .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap {
     position: relative;
@@ -556,9 +556,9 @@
 
 .aplayer .aplayer-list {
     overflow: auto;
-    transition: all .5s ease;
+    transition: all .35s ease;
     will-change: height;
-    display: none;
+    /* display: none; */
     overflow: hidden
 }
 
diff --git a/src/plugins/miaoMusicPlayer/src/aplayerListNew.vue b/src/plugins/miaoMusicPlayer/src/aplayerListNew.vue
index 8cbbe9c..28d3df8 100644
--- a/src/plugins/miaoMusicPlayer/src/aplayerListNew.vue
+++ b/src/plugins/miaoMusicPlayer/src/aplayerListNew.vue
@@ -1,7 +1,9 @@
 <template>
     <ol
         :style="{ maxHeight: ap.options.listMaxHeight }"
-        :class="[!isDragging ? 'miaoMusic-ol-isDragging' : 'miaoMusic-ol-notDragging']"
+        :class="[
+            !isDragging ? 'miaoMusic-ol-isDragging' : 'miaoMusic-ol-notDragging'
+        ]"
         :key="refreshKey"
         ref="ol">
         <VueDraggable
@@ -24,6 +26,12 @@
                 <span class="aplayer-list-index">{{ index + 1 }}</span>
                 <span class="aplayer-list-title">{{ element.name }}</span>
                 <div class="aplayer-list-control">
+                    <div
+                        v-if="isVideo(element)"
+                        class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
+                        @click.stop="onPlayVideo(element)">
+                        <VideocamOutline class="aplayer-list-control-btn-svg" />
+                    </div>
                     <div
                         class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
                         @click.stop="switchAudio(index)">
@@ -79,7 +87,8 @@ import {
     CloseOutline,
     ReorderFourOutline,
     PlayOutline,
-    HeartOutline
+    HeartOutline,
+    VideocamOutline
 } from '@vicons/ionicons5'
 import { VueDraggable } from 'vue-draggable-plus'
 // 与vue-draggable冲突
@@ -90,6 +99,7 @@ const props = defineProps<{
     ap: apType
     onDragItemStart: () => void
     onDragItemEnd: () => void
+    onPlayVideo: (element: audioType) => void
 }>()
 
 const ol = ref<HTMLOListElement>()
@@ -188,10 +198,15 @@ const { onDragStart, onDragEnd } = (() => {
         }
     }
 })()
-// const onDragEnd = (_e: any) => {
-//     const curr = props.ap.list.audios[props.ap.list.index]
-//     listRefreshIndex(curr)
-// }
+
+const isVideo = (element: audioType) => {
+    for (let end of ['mp4']) {
+        if (element.name.endsWith(end)) {
+            return true
+        }
+    }
+    return false
+}
 
 onMounted(() => {
     // console.log(props.ap)
diff --git a/src/plugins/miaoVideoPlayer/export.ts b/src/plugins/miaoVideoPlayer/export.ts
index 907333a..fd3f452 100644
--- a/src/plugins/miaoVideoPlayer/export.ts
+++ b/src/plugins/miaoVideoPlayer/export.ts
@@ -15,14 +15,15 @@ const pluginConfig: registerComponentOption = {
             return false
         }
         for (let i of vFiles) {
-            for (let s of ['mp4', 'mp3']) {
+            for (let s of ['mp4']) {
                 if (i.name.endsWith(s)) {
                     return true
                 }
             }
         }
         return false
-    }
+    },
+    priority: 6
 }
 
 export default pluginConfig