拖放替换音频和曲绘

Author: clansty

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

@@ -2,7 +2,9 @@ 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 { uploadFlow as uploadFlowAcbAwb } from '@/components/MusicEdit/AcbAwb';
 import { selectedADir, selectedMusic } from '@/store/refs';
+import { upload as uploadJacket } from '@/components/JacketBox';
 
 export const mainDivRef = shallowRef<HTMLDivElement>();
 
@@ -35,6 +37,12 @@ export default defineComponent({
         if (file.kind === 'file' && (firstType.startsWith('video/') || ['dat', 'usm'].includes(file.name.toLowerCase().split('.').pop()!))) {
           uploadFlowMovie(file);
         }
+        else if (file.kind === 'file' && (firstType.startsWith('audio/') || file.name.endsWith('.acb'))) {
+          uploadFlowAcbAwb(file);
+        }
+        else if (file.kind === 'file' && (firstType.startsWith('image/') || file.name.endsWith('.jpeg') || file.name.endsWith('.jpg') || file.name.endsWith('.png'))) {
+          uploadJacket(file);
+        }
       }
     }
     const dropType = ref<DropType>(DropType.None);

MaiChartManager/Front/src/components/JacketBox.tsx

@@ -6,10 +6,13 @@ import { globalCapture, selectedADir, selectedMusic } from "@/store/refs";
 import { MusicXmlWithABJacket } from "@/client/apiGen";
 import { useI18n } from 'vue-i18n';
 
+export let upload = async (fileHandle?: FileSystemFileHandle) => {
+}
+
 export default defineComponent({
   props: {
-    info: {type: Object as PropType<MusicXmlWithABJacket>, required: true},
-    upload: {type: Boolean, default: true}
+    info: { type: Object as PropType<MusicXmlWithABJacket>, required: true },
+    upload: { type: Boolean, default: true }
   },
   setup(props) {
     const dialog = useDialog();
@@ -18,47 +21,49 @@ export default defineComponent({
       getUrl(`GetJacketApi/${props.info.assetDir}/${props.info.id}?${updateTime.value}`) : noJacket)
     const { t } = useI18n();
 
-    const upload = async () => {
-      if (!props.upload) return;
-      try {
-        const [fileHandle] = await window.showOpenFilePicker({
-          id: 'jacket',
-          startIn: 'downloads',
-          types: [
-            {
-              description: t('genre.imageDescription'),
-              accept: {
-                "application/jpeg": [".jpeg", ".jpg"],
-                "application/png": [".png"],
-              },
-            },
-          ],
-        });
-
-        if (!fileHandle) return;
-        const file = await fileHandle.getFile();
+    if (props.upload)
+      upload = async (fileHandle?: FileSystemFileHandle) => {
+        if (!props.upload) return;
+        try {
+          if (!fileHandle) {
+            [fileHandle] = await window.showOpenFilePicker({
+              id: 'jacket',
+              startIn: 'downloads',
+              types: [
+                {
+                  description: t('genre.imageDescription'),
+                  accept: {
+                    "application/jpeg": [".jpeg", ".jpg"],
+                    "application/png": [".png"],
+                  },
+                },
+              ],
+            });
+          }
+          if (!fileHandle) return;
+          const file = await fileHandle.getFile();
 
-        const res = await api.SetMusicJacket(props.info.id!, selectedADir.value, {file});
-        if (res.error) {
-          const error = res.error as any;
-          dialog.warning({title: t('jacket.setFailed'), content: error.message || error});
-          return;
-        }
-        if (res.data) {
-          dialog.info({title: t('jacket.setFailed'), content: res.data})
-          return;
+          const res = await api.SetMusicJacket(props.info.id!, selectedADir.value, { file });
+          if (res.error) {
+            const error = res.error as any;
+            dialog.warning({ title: t('jacket.setFailed'), content: error.message || error });
+            return;
+          }
+          if (res.data) {
+            dialog.info({ title: t('jacket.setFailed'), content: res.data })
+            return;
+          }
+          updateTime.value = Date.now()
+          props.info.hasJacket = true;
+          selectedMusic.value!.hasJacket = true;
+          (selectedMusic.value as any).updateTime = updateTime.value
+        } catch (e: any) {
+          if (e.name === 'AbortError') return
+          console.log(e)
+          globalCapture(e, t('jacket.replaceFailed'))
         }
-        updateTime.value = Date.now()
-        props.info.hasJacket = true;
-        selectedMusic.value!.hasJacket = true;
-        (selectedMusic.value as any).updateTime = updateTime.value
-      } catch (e: any) {
-        if (e.name === 'AbortError') return
-        console.log(e)
-        globalCapture(e, t('jacket.replaceFailed'))
       }
-    }
 
-    return () => <img src={jacketUrl.value} class={`object-fill rounded-lg ${props.upload && 'cursor-pointer'}`} onClick={upload}/>
+    return () => <img src={jacketUrl.value} class={`object-fill rounded-lg ${props.upload && 'cursor-pointer'}`} onClick={() => upload()} />
   }
 })

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

@@ -8,6 +8,9 @@ import AudioPreviewEditorButton from "@/components/MusicEdit/AudioPreviewEditorB
 import SetMovieButton from "@/components/MusicEdit/SetMovieButton";
 import { t } from "@/locales";
 
+export let uploadFlow = async (fileHandle?: FileSystemFileHandle) => {
+}
+
 export default defineComponent({
   props: {
     song: { type: Object as PropType<MusicXmlWithABJacket>, required: true },
@@ -26,21 +29,23 @@ export default defineComponent({
     const cueIdNotMatch = computed(() => props.song.nonDxId !== props.song.cueId)
     const movieIdNotMatch = computed(() => props.song.nonDxId !== props.song.movieId)
 
-    const uploadFlow = async () => {
+    uploadFlow = async (fileHandle?: FileSystemFileHandle) => {
       tipShow.value = true
       try {
-        const [fileHandle] = await window.showOpenFilePicker({
-          id: 'acbawb',
-          startIn: 'downloads',
-          types: [
-            {
-              description: t('music.edit.supportedFileTypes'),
-              accept: {
-                "application/x-supported": [".mp3", ".wav", ".ogg", ".acb"],
+        if (!fileHandle) {
+          [fileHandle] = await window.showOpenFilePicker({
+            id: 'acbawb',
+            startIn: 'downloads',
+            types: [
+              {
+                description: t('music.edit.supportedFileTypes'),
+                accept: {
+                  "application/x-supported": [".mp3", ".wav", ".ogg", ".acb"],
+                },
               },
-            },
-          ],
-        });
+            ],
+          });
+        }
         tipShow.value = false;
         if (!fileHandle) return;
         const file = await fileHandle.getFile() as File;
@@ -99,7 +104,7 @@ export default defineComponent({
       {props.song.isAcbAwbExist && <audio controls src={url.value} class="w-0 grow"/>}
       {selectedADir.value !== 'A000' &&
         <NPopover trigger="hover" disabled={!cueIdNotMatch.value}>{{
-          trigger: () => <NButton secondary class={`${!props.song.isAcbAwbExist && "w-full"}`} onClick={uploadFlow} loading={load.value} disabled={cueIdNotMatch.value}>{props.song.isAcbAwbExist ? t('music.edit.replaceAudio') : t('music.edit.setAudio')}</NButton>,
+          trigger: () => <NButton secondary class={`${!props.song.isAcbAwbExist && "w-full"}`} onClick={() => uploadFlow()} loading={load.value} disabled={cueIdNotMatch.value}>{props.song.isAcbAwbExist ? t('music.edit.replaceAudio') : t('music.edit.setAudio')}</NButton>,
           default: () => t('music.edit.cueIdNotMatch')
         }}</NPopover>
       }