拖拽替换 PV

Author: clansty

AquaMai

@@ -1,9 +1,17 @@
 import { useDropZone } from '@vueuse/core';
 import { defineComponent, PropType, ref, computed, watch, shallowRef } from 'vue';
 import { startProcess as startProcessMusicImport } from '@/components/ImportCreateChartButton/ImportChartButton';
+import { uploadFlow as uploadFlowMovie } from '@/components/MusicEdit/SetMovieButton';
+import { selectedADir, selectedMusic } from '@/store/refs';
 
 export const mainDivRef = shallowRef<HTMLDivElement>();
 
+enum DropType {
+  None,
+  Charts,
+  Video,
+}
+
 export default defineComponent({
   // props: {
   // },
@@ -13,12 +21,24 @@ export default defineComponent({
       console.log(files);
       const items = e.dataTransfer?.items;
       if (!items?.length) return;
+      const firstType = items[0].type;
+      console.log(firstType);
       const handles = await Promise.all(Array.from(items).map(item => item.getAsFileSystemHandle()));
       console.log(handles);
       if (handles.every(handle => handle instanceof FileSystemDirectoryHandle)) {
         startProcessMusicImport(handles.length === 1 ? handles[0] : handles);
       }
+      else if (handles.length === 1 && handles[0] instanceof FileSystemFileHandle) {
+        if (selectedADir.value === 'A000') return;
+        if (!selectedMusic.value) return;
+        const file = handles[0] as FileSystemFileHandle;
+        if (file.kind === 'file' && (firstType.startsWith('video/') || ['dat', 'usm'].includes(file.name.toLowerCase().split('.').pop()!))) {
+          uploadFlowMovie(file);
+        }
+      }
     }
+    const dropType = ref<DropType>(DropType.None);
+
 
     const { isOverDropZone } = useDropZone(mainDivRef, {
       onDrop,
@@ -29,13 +49,41 @@ export default defineComponent({
       // whether to prevent default behavior for unhandled events
       preventDefaultForUnhandled: true,
       onOver(f, e) {
+        dropType.value = DropType.None;
         e.stopPropagation();
-        if (e.dataTransfer)
+        if (e.dataTransfer) {
+          // 由于没法判断是不是文件夹也不知道扩展名，所以没法给出推理
+          // const items = e.dataTransfer.items;
+          // console.log(items[0].type);
+          // if (items?.length) {
+          //   const allDirectories = Array.from(items).every(item => item.kind === 'file' && item.type === '');
+          //   if (allDirectories) {
+          //     dropType.value = DropType.Charts;
+          //   }
+          // }
+          // if (items.length === 1) {
+          //   const item = items[0];
+          //   if (item.type.startsWith('video/') && selectedMusic.value){
+          //     dropType.value = DropType.Video;
+          //   }
+          // }
+
+          // if (dropType.value === DropType.None) {
+          //   e.dataTransfer.dropEffect = 'none';
+          // }
+          // else {
           e.dataTransfer.dropEffect = 'copy';
+          // }
+        }
       },
     });
 
     return () => <>
+      {isOverDropZone.value && dropType.value !== DropType.None && <div class="absolute-full z-100 bg-white/50 backdrop-blur-sm flex justify-center items-center" >
+        {/* {dropType.value === DropType.Charts && selectedADir.value !== 'A000' && <div class="text-2xl">
+          松开鼠标导入谱面
+        </div>} */}
+      </div>}
     </>;
   },
 });

MaiChartManager/Front/src/components/DragDropDispatcher/index.tsx

@@ -16,6 +16,9 @@ enum STEP {
   Progress,
 }
 
+export let uploadFlow = async (fileHandle?: FileSystemFileHandle) => {
+}
+
 export default defineComponent({
   props: {
     disabled: Boolean,
@@ -84,28 +87,48 @@ export default defineComponent({
       });
     })
 
-    const uploadFlow = async () => {
+    uploadFlow = async (fileHandle?: FileSystemFileHandle) => {
       step.value = STEP.Select
       try {
-        const [fileHandle] = await window.showOpenFilePicker({
-          id: 'movie',
-          startIn: 'downloads',
-          types: [
-            {
-              description: t('music.edit.supportedFileTypes'),
-              accept: {
-                "video/*": [".dat"],
-                "image/*": [],
+        if (!fileHandle) {
+          [fileHandle] = await window.showOpenFilePicker({
+            id: 'movie',
+            startIn: 'downloads',
+            types: [
+              {
+                description: t('music.edit.supportedFileTypes'),
+                accept: {
+                  "video/*": [".dat"],
+                  "image/*": [],
+                },
               },
-            },
-          ],
-        });
+            ],
+          });
+        }
         step.value = STEP.None
         if (!fileHandle) return;
         const file = await fileHandle.getFile() as File;
 
         if (file.name.endsWith('.dat')) {
           load.value = true;
+          await new Promise<void>((resolve, reject) => {
+            dialog.info({
+              showIcon: false,
+              title: t('common.confirm'),
+              content: t('music.edit.confirmSetMovie', { filename: file.name }),
+              positiveText: t('common.confirm'),
+              negativeText: t('common.cancel'),
+              positiveButtonProps: {
+                type: 'primary',
+              },
+              onPositiveClick: () => {
+                resolve();
+              },
+              onNegativeClick: () => {
+                reject(new DOMException('', 'AbortError'));
+              },
+            })
+          })
           await api.SetMovie(props.song.id!, selectedADir.value, { file, padding: 0 });
         } else if (version.value?.license !== LicenseStatus.Active) {
           showNeedPurchaseDialog.value = true;
@@ -134,7 +157,7 @@ export default defineComponent({
       }
     }
 
-    return () => <NButton secondary onClick={uploadFlow} loading={load.value} disabled={props.disabled}>
+    return () => <NButton secondary onClick={() => uploadFlow()} loading={load.value} disabled={props.disabled}>
       {t('music.edit.setPv')}
 
       <NDrawer show={step.value === STEP.Select} height={250} placement="bottom">
@@ -151,7 +174,7 @@ export default defineComponent({
       </NDrawer>
       <NModal
         preset="card"
-        class="w-[min(30vw,25em)]"
+        class="w-[min(30vw,30em)]"
         title={t('music.edit.setOffsetSeconds')}
         show={step.value === STEP.Offset}
         onUpdateShow={() => step.value = STEP.None}

MaiChartManager/Front/src/components/MusicEdit/SetMovieButton.tsx

@@ -342,6 +342,16 @@ mod:
     button2P: 2P Button {index}
     select1P: 1P Select
     select2P: 2P Select
+  soundChannel:
+    P1SpeakerLeft: 1P Speaker Left
+    P1SpeakerRight: 1P Speaker Right
+    P1HeadphoneLeft: 1P Headphone Left
+    P1HeadphoneRight: 1P Headphone Right
+    P2SpeakerLeft: 2P Speaker Left
+    P2SpeakerRight: 2P Speaker Right
+    P2HeadphoneLeft: 2P Headphone Left
+    P2HeadphoneRight: 2P Headphone Right
+    None: Disabled
   judgeAccuracyInfo:
     author: 'Author: '
     viewDoc: View Documentation

MaiChartManager/Front/src/locales/en.yaml

@@ -311,6 +311,16 @@ mod:
     button2P: 2P 按鍵 {index}
     select1P: 1P 選擇鍵
     select2P: 2P 選擇鍵
+  soundChannel:
+    P1SpeakerLeft: 1P 外放左
+    P1SpeakerRight: 1P 外放右
+    P1HeadphoneLeft: 1P 耳機左
+    P1HeadphoneRight: 1P 耳機右
+    P2SpeakerLeft: 2P 外放左
+    P2SpeakerRight: 2P 外放右
+    P2HeadphoneLeft: 2P 耳機左
+    P2HeadphoneRight: 2P 耳機右
+    None: 停用
   judgeAccuracyInfo:
     author: 作者：
     viewDoc: 檢視說明檔案

MaiChartManager/Front/src/locales/zh-TW.yaml

@@ -121,6 +121,7 @@ music:
       如果游戏版本是 1.{gameVersion} 的话，这里的数字大于等于 {b15ver} 就会让歌出现在 B15 里面，否则就会出现在 B35
       里面。这个值还会控制按上线时间排序时的顺序
     idConflictWarning: 以下目录中存在冲突的 ID
+    confirmSetMovie: 确认要使用 {filename} 替换当前的 PV 吗
   batch:
     title: 批量操作
     batchAndSearch: 批量操作与搜索