Merge 98e7282d12 into c48dbd8a35

src/component/PreviewTable.vue

@@ -1,25 +1,27 @@
 <template>
-  <el-table :data="tableData" style="width: 100%">
+  <el-table :data="tableData" stripe style="width: 100%">
     <el-table-column label="封面">
       <template slot-scope="scope">
-        <el-image :src="scope.row.picture" style="width: 100px; height: 100px">
-          <div slot="error" class="image-slot el-image__error">暂无封面</div>
-        </el-image>
+        <el-upload :auto-upload="false" :show-file-list="false" :on-change="(res)=>{ changeCover(res,scope.row) }" action="" drag>
+          <img :src="scope.row.picture" style="width: 100px; height: 100px">
+            <div slot="error" class="image-slot el-image__error">暂无封面</div>
+          </img>
+        </el-upload>
       </template>
     </el-table-column>
     <el-table-column label="歌曲">
       <template #default="scope">
-        <span>{{ scope.row.title }}</span>
+        <el-input placeholder="请输入歌曲标题" v-model="iTitle ? iTitle : iTitle = scope.row.title, iTitle" @change="(value)=>{ changeTitle(value, scope.row) }" clearable></el-input>
       </template>
     </el-table-column>
     <el-table-column label="歌手">
       <template #default="scope">
-        <p>{{ scope.row.artist }}</p>
+        <el-input placeholder="请输入歌手" v-model="iArtist ? iArtist : iArtist = scope.row.artist, iArtist" @change="(value)=>{ changeArtist(value, scope.row) }" clearable></el-input>
       </template>
     </el-table-column>
     <el-table-column label="专辑">
       <template #default="scope">
-        <p>{{ scope.row.album }}</p>
+        <el-input placeholder="请输入专辑名称" v-model="iAlbum ? iAlbum : iAlbum = scope.row.album, iAlbum" @change="(value)=>{ changeAlbum(value, scope.row) }" clearable></el-input>
       </template>
     </el-table-column>
     <el-table-column label="操作">
@@ -36,6 +38,13 @@
 
 <script>
 import { RemoveBlobMusic } from '@/utils/utils';
+import {
+  GetArrayBuffer,
+  GetImageFromURL,
+  WriteMetaToFlac,
+  WriteMetaToMp3,
+} from '@/decrypt/utils';
+import { parseBlob as metaParseBlob } from 'music-metadata-browser';
 
 export default {
   name: 'PreviewTable',
@@ -55,6 +64,49 @@ export default {
     handleDownload(row) {
       this.$emit('download', row);
     },
+    async regenerate(row) {
+      const fileBuffer = await GetArrayBuffer(row.blob);
+      const musicMeta = await metaParseBlob(row.blob);
+      const imageInfo = await GetImageFromURL(row.picture);
+      try {
+        const newMeta = { picture: imageInfo.buffer, title: row.title, artists: row.artist?.split(' _ ') };
+        if (ext === 'mp3') {
+          fileBuffer = WriteMetaToMp3(Buffer.from(fileBuffer), newMeta, musicMeta);
+          row.blob = new Blob([fileBuffer], { type: row.mime });
+        } else if (ext === 'flac') {
+          fileBuffer = WriteMetaToFlac(Buffer.from(fileBuffer), newMeta, musicMeta);
+          row.blob = new Blob([fileBuffer], { type: row.mime });
+        } else {
+          console.info('writing metadata for ' + row.ext + ' is not being supported for now');
+        }
+      } catch (e) {
+        console.warn('Error while appending cover image to file ' + e);
+      }
+      row.file = URL.createObjectURL(row.blob);
+    },
+    async changeCover(file, row) {
+      if (row.picture?.startsWith('blob:')) {
+        URL.revokeObjectURL(row.picture);
+      }
+      row.picture = file.url;
+      URL.revokeObjectURL(row.file);
+      await regenerate(row);
+    },
+    async changeTitle(value, row) {
+      row.title = value;
+      URL.revokeObjectURL(row.file);
+      await regenerate(row);
+    },
+    async changeArtist(value, row) {
+      row.artist = value;
+      URL.revokeObjectURL(row.file);
+      await regenerate(row);
+    },
+    async changeAlbum(value, row) {
+      row.album = value;
+      URL.revokeObjectURL(row.file);
+      await regenerate(row);
+    },
   },
 };
 </script>