feat: 修改拖动有效判定条件。歌单添加播放mv按钮。歌单仅为1首时也能唤起。

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) {

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
 }

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
 }
 
 /**

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;
 }

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
 }
 

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)

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