refactor: component/*.vue

2021-05-24 22:19:37 +08:00
parent e82bbc7aeb
commit 407d37c770
16 changed files with 345 additions and 311 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@

    <el-container id="app">
        <el-main>
-            <x-upload v-on:handle_error="showFail" v-on:handle_finish="showSuccess"></x-upload>
+            <file-selector @error="showFail" @success="showSuccess"/>

            <div id="app-control">
                <el-row class="mb-3">
@@ -28,14 +28,14 @@

            <audio :autoplay="playing_auto" :src="playing_url" controls/>

-            <x-preview :download_format="download_format" :table-data="tableData"
-                       v-on:music_changed="changePlaying"></x-preview>
+            <PreviewTable :filename_format="download_format" :table-data="tableData"
+                          @music_changed="changePlaying"></PreviewTable>

        </el-main>
        <el-footer id="app-footer">
            <el-row>
-                <a href="https://github.com/ix64/unlock-music" target="_blank">音乐解锁</a>(v<span
-                    v-text="version"></span>)：移除已购音乐的加密保护。
+                <a href="https://github.com/ix64/unlock-music" target="_blank">音乐解锁</a>
+                (v{{ version }})：移除已购音乐的加密保护。
                <a href="https://github.com/ix64/unlock-music/wiki/使用提示" target="_blank">使用提示</a>
            </el-row>
            <el-row>
@@ -44,7 +44,7 @@
            </el-row>
            <el-row>
                <!--如果进行二次开发，此行版权信息不得移除且应明显地标注于页面上-->
-                <span>Copyright &copy; 2019-</span><span v-text="(new Date()).getFullYear()"></span> MengYX
+                <span>Copyright &copy; 2019 - {{ (new Date()).getFullYear() }} MengYX</span>
                音乐解锁使用
                <a href="https://github.com/ix64/unlock-music/blob/master/LICENSE" target="_blank">MIT许可协议</a>
                开放源代码
@@ -56,50 +56,50 @@

 <script>

-    import upload from "./component/upload"
-    import preview from "./component/preview"
-    import {DownloadBlobMusic, RemoveBlobMusic} from "./component/util"
-    import config from "../package"
-    import {IXAREA_API_ENDPOINT} from "@/decrypt/utils";
+import FileSelector from "./component/FileSelector"
+import PreviewTable from "./component/PreviewTable"
+import {DownloadBlobMusic, RemoveBlobMusic} from "./component/utils"
+import config from "../package"
+import {IXAREA_API_ENDPOINT} from "@/decrypt/utils";

-    export default {
-        name: 'app',
-        components: {
-            xUpload: upload,
-            xPreview: preview
-        },
-        data() {
-            return {
-                version: config.version,
-                activeIndex: '1',
-                tableData: [],
-                playing_url: "",
-                playing_auto: false,
-                download_format: '1',
-                instant_download: false,
+export default {
+    name: 'app',
+    components: {
+        FileSelector,
+        PreviewTable
+    },
+    data() {
+        return {
+            version: config.version,
+            activeIndex: '1',
+            tableData: [],
+            playing_url: "",
+            playing_auto: false,
+            download_format: '1',
+            instant_download: false,
+        }
+    },
+    created() {
+        this.$nextTick(function () {
+            this.finishLoad();
+        });
+    },
+    methods: {
+        async finishLoad() {
+            const mask = document.getElementById("loader-mask");
+            if (!!mask) mask.remove();
+            let updateInfo;
+            try {
+                const resp = await fetch(IXAREA_API_ENDPOINT + "/music/app-version", {
+                    method: "POST", headers: {"Content-Type": "application/json"},
+                    body: JSON.stringify({"Version": this.version})
+                });
+                updateInfo = await resp.json();
+            } catch (e) {
            }
-        },
-        created() {
-            this.$nextTick(function () {
-                this.finishLoad();
-            });
-        },
-        methods: {
-            async finishLoad() {
-                const mask = document.getElementById("loader-mask");
-                if (!!mask) mask.remove();
-                let updateInfo;
-                try {
-                    const resp = await fetch(IXAREA_API_ENDPOINT + "/music/app-version", {
-                        method: "POST", headers: {"Content-Type": "application/json"},
-                        body: JSON.stringify({"Version": this.version})
-                    });
-                    updateInfo = await resp.json();
-                } catch (e) {
-                }
-                if ((!!updateInfo && process.env.NODE_ENV === 'production') && (!!updateInfo.HttpsFound ||
-                    (!!updateInfo.Found && window.location.protocol !== "https:"))) {
-                  this.$notify.warning({
+            if ((!!updateInfo && process.env.NODE_ENV === 'production') && (!!updateInfo.HttpsFound ||
+                (!!updateInfo.Found && window.location.protocol !== "https:"))) {
+                this.$notify.warning({
                    title: '发现更新',
                    message: '发现新版本 v' + updateInfo.Version +
                        '<br/>更新详情：' + updateInfo.Detail +
@@ -107,78 +107,74 @@
                    dangerouslyUseHTMLString: true,
                    duration: 15000,
                    position: 'top-left'
-                  });
-                } else {
-                    this.$notify.info({
-                        title: '离线使用',
-                        message: '我们使用PWA技术，无网络也能使用' +
-                            '<br/>最近更新：' + config.updateInfo +
-                            '<br/><a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>',
-                        dangerouslyUseHTMLString: true,
-                        duration: 10000,
-                        position: 'top-left'
-                    });
-                }
-            },
-            showSuccess(data) {
-                if (data.status) {
-                    if (this.instant_download) {
-                        DownloadBlobMusic(data, this.download_format);
-                        RemoveBlobMusic(data);
-                    } else {
-                        this.tableData.push(data);
-                        this.$notify.success({
-                            title: '解锁成功',
-                            message: '成功解锁 ' + data.title,
-                            duration: 3000
-                        });
-                    }
-                    if (process.env.NODE_ENV === 'production') {
-                        let _rp_data = [data.title, data.artist, data.album];
-                        window._paq.push(["trackEvent", "Unlock", data.rawExt + "," + data.mime, JSON.stringify(_rp_data)]);
-                    }
-                } else {
-                    this.showFail(data.message, data.rawFilename + "." + data.rawExt)
-                }
-            },
-            showFail(errInfo, filename) {
-                this.$notify.error({
-                    title: '出现问题',
-                    message: errInfo + "，" + filename +
-                        '，参考<a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>',
+                });
+            } else {
+                this.$notify.info({
+                    title: '离线使用',
+                    message: '我们使用PWA技术，无网络也能使用' +
+                        '<br/>最近更新：' + config.updateInfo +
+                        '<br/><a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>',
                    dangerouslyUseHTMLString: true,
-                    duration: 6000
+                    duration: 10000,
+                    position: 'top-left'
                });
-                if (process.env.NODE_ENV === 'production') {
-                    window._paq.push(["trackEvent", "Error", errInfo, filename]);
-                }
-                console.error(errInfo, filename);
-            },
-            changePlaying(url) {
-                this.playing_url = url;
-                this.playing_auto = true;
-            },
-            handleDeleteAll() {
-                this.tableData.forEach(value => {
-                    RemoveBlobMusic(value);
-                });
-                this.tableData = [];
-            },
-            handleDownloadAll() {
-                let index = 0;
-                let c = setInterval(() => {
-                    if (index < this.tableData.length) {
-                        DownloadBlobMusic(this.tableData[index], this.download_format);
-                        index++;
-                    } else {
-                        clearInterval(c);
-                    }
-                }, 300);
            }
        },
-    }
+        showSuccess(data) {
+            if (this.instant_download) {
+                DownloadBlobMusic(data, this.download_format);
+                RemoveBlobMusic(data);
+            } else {
+                this.tableData.push(data);
+                this.$notify.success({
+                    title: '解锁成功',
+                    message: '成功解锁 ' + data.title,
+                    duration: 3000
+                });
+            }
+            if (process.env.NODE_ENV === 'production') {
+                let _rp_data = [data.title, data.artist, data.album];
+                window._paq.push(["trackEvent", "Unlock", data.rawExt + "," + data.mime, JSON.stringify(_rp_data)]);
+            }
+        },
+        showFail(errInfo, filename) {
+            this.$notify.error({
+                title: '出现问题',
+                message: errInfo + "，" + filename +
+                    '，参考<a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>',
+                dangerouslyUseHTMLString: true,
+                duration: 6000
+            });
+            if (process.env.NODE_ENV === 'production') {
+                window._paq.push(["trackEvent", "Error", errInfo, filename]);
+            }
+            console.error(errInfo, filename);
+        },
+        changePlaying(url) {
+            this.playing_url = url;
+            this.playing_auto = true;
+        },
+        handleDeleteAll() {
+            this.tableData.forEach(value => {
+                RemoveBlobMusic(value);
+            });
+            this.tableData = [];
+        },
+        handleDownloadAll() {
+            let index = 0;
+            let c = setInterval(() => {
+                if (index < this.tableData.length) {
+                    DownloadBlobMusic(this.tableData[index], this.download_format);
+                    index++;
+                } else {
+                    clearInterval(c);
+                }
+            }, 300);
+        }
+    },
+}
 </script>

 <style lang="scss">
-   @import "scss/unlock-music";
+@import "scss/unlock-music";
 </style>
--- a/src/component/FileSelector.vue
+++ b/src/component/FileSelector.vue
@@ -0,0 +1,77 @@
+<template>
+    <el-upload
+        :auto-upload="false"
+        :on-change="addFile"
+        :show-file-list="false"
+        action=""
+        drag
+        multiple>
+        <i class="el-icon-upload"/>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击选择</em></div>
+        <div slot="tip" class="el-upload__tip">本工具仅在浏览器内对文件进行解锁，无需消耗流量</div>
+        <transition name="el-fade-in"><!--todo: add delay to animation-->
+            <el-progress
+                v-show="progress_show" :format="progress_string" :percentage="progress_value"
+                :stroke-width="16" :text-inside="true"
+                style="margin: 16px 6px 0 6px"
+            ></el-progress>
+        </transition>
+    </el-upload>
+</template>
+
+<script>
+import {spawn, Worker, Pool} from "threads"
+import {CommonDecrypt} from "@/decrypt/common.ts";
+import {DecryptQueue} from "@/component/utils";
+
+export default {
+    name: "FileSelector",
+    data() {
+        return {
+            task_all: 0,
+            task_finished: 0,
+            queue: new DecryptQueue() // for http or file protocol
+        }
+    },
+    computed: {
+        progress_value() {
+            return this.task_all ? this.task_finished / this.task_all * 100 : 0
+        },
+        progress_show() {
+            return this.task_all !== this.task_finished
+        }
+    },
+    mounted() {
+        if (window.Worker) {
+            console.log("Using Worker Pool")
+            this.queue = Pool(
+                () => spawn(new Worker('@/component/worker.ts')),
+                navigator.hardwareConcurrency || 1
+            )
+        } else {
+            console.log("Using Queue in Main Thread")
+        }
+    },
+    methods: {
+        progress_string() {
+            return `${this.task_finished} / ${this.task_all}`
+        },
+        async addFile(file) {
+            this.task_all++
+            this.queue.queue(async (dec = CommonDecrypt) => {
+                console.log("start handling", file.name)
+                try {
+                    this.$emit("success", await dec(file));
+                } catch (e) {
+                    console.error(e)
+                    this.$emit("error", file)
+                } finally {
+                    this.task_finished++
+                }
+            })
+        },
+    }
+}
+
+</script>
+
--- a/src/component/PreviewTable.vue
+++ b/src/component/PreviewTable.vue
@@ -4,7 +4,7 @@
        <el-table-column label="封面">
            <template slot-scope="scope">
                <el-image :src="scope.row.picture" style="width: 100px; height: 100px">
-                    <div class="image-slot el-image__error" slot="error">
+                    <div slot="error" class="image-slot el-image__error">
                        暂无封面
                    </div>
                </el-image>
@@ -27,14 +27,14 @@
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
-                <el-button @click="handlePlay(scope.$index, scope.row)"
-                           circle icon="el-icon-video-play" type="success">
+                <el-button circle
+                           icon="el-icon-video-play" type="success" @click="handlePlay(scope.$index, scope.row)">
                </el-button>
-                <el-button @click="handleDownload(scope.row)"
-                           circle icon="el-icon-download">
+                <el-button circle
+                           icon="el-icon-download" @click="handleDownload(scope.row)">
                </el-button>
-                <el-button @click="handleDelete(scope.$index, scope.row)"
-                           circle icon="el-icon-delete" type="danger">
+                <el-button circle
+                           icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">
                </el-button>
            </template>
        </el-table-column>
@@ -42,28 +42,28 @@
 </template>

 <script>
-    import {DownloadBlobMusic, RemoveBlobMusic} from './util'
+import {DownloadBlobMusic, RemoveBlobMusic} from '@/component/utils'

-    export default {
-        name: "preview",
-        props: {
-            tableData: {type: Array, required: true},
-            download_format: {type: String, required: true}
+export default {
+    name: "PreviewTable",
+    props: {
+        tableData: {type: Array, required: true},
+        filename_format: {type: String, required: true}
+    },
+
+    methods: {
+        handlePlay(index, row) {
+            this.$emit("music_changed", row.file);
+        },
+        handleDelete(index, row) {
+            RemoveBlobMusic(row);
+            this.tableData.splice(index, 1);
+        },
+        handleDownload(row) {
+            DownloadBlobMusic(row, this.download_format)
        },
-
-        methods: {
-            handlePlay(index, row) {
-                this.$emit("music_changed", row.file);
-            },
-            handleDelete(index, row) {
-                RemoveBlobMusic(row);
-                this.tableData.splice(index, 1);
-            },
-            handleDownload(row) {
-                DownloadBlobMusic(row, this.download_format)
-            },
-        }
    }
+}
 </script>

 <style scoped>
--- a/src/component/upload.vue
+++ b/src/component/upload.vue
@@ -1,120 +0,0 @@
-<template>
-    <el-upload
-            :auto-upload="false"
-            :on-change="handleFile"
-            :show-file-list="false"
-            action=""
-            drag
-            multiple>
-        <i class="el-icon-upload"/>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击选择</em></div>
-        <div class="el-upload__tip" slot="tip">本工具仅在浏览器内对文件进行解锁，无需消耗流量</div>
-        <transition name="el-fade-in">
-            <el-progress
-                    :format="progressFormat" :percentage="progress_percent" :stroke-width="16"
-                    :text-inside="true" style="margin: 16px 6px 0 6px"
-                    v-show="progress_show"
-            ></el-progress>
-        </transition>
-    </el-upload>
-</template>
-
-<script>
-    "use strict";// 严格模式 用于尾调用优化
-
-    export default {
-        name: "upload",
-        data() {
-            return {
-                cacheQueue: [],
-                workers: [],
-                idle_workers: [],
-                thread_num: 1,
-
-                progress_show: false,
-
-                progress_finished: 0,
-                progress_all: 0,
-                progress_percent: 0,
-            }
-        },
-        mounted() {
-            if (document.location.host !== "" && process.env.NODE_ENV === 'production') {
-                this.thread_num = navigator.hardwareConcurrency || 1;
-                const worker = require("workerize-loader!../decrypt/common");
-                // noinspection JSValidateTypes,JSUnresolvedVariable
-                this.workers.push(worker().CommonDecrypt);
-                this.idle_workers.push(0);
-                // delay to optimize for first loading
-                setTimeout(() => {
-                  for (let i = 1; i < this.thread_num; i++) {
-                    // noinspection JSValidateTypes,JSUnresolvedVariable
-                    this.workers.push(worker().CommonDecrypt);
-                    this.idle_workers.push(i);
-                  }
-                }, 5000);
-            } else {
-                const dec = require('../decrypt/common');
-                this.workers.push(dec.CommonDecrypt);
-                this.idle_workers.push(0)
-            }
-        },
-        methods: {
-            progressFormat() {
-                return this.progress_finished + "/" + (this.progress_all)
-            },
-            progressChange(finish, all) {
-                this.progress_all += all;
-                this.progress_finished += finish;
-                this.progress_percent = Math.round(this.progress_finished / this.progress_all * 100);
-                if (this.progress_finished === this.progress_all) {
-                    setTimeout(() => {
-                        this.progress_show = false;
-                        this.progress_finished = 0;
-                        this.progress_all = 0;
-                    }, 3000);
-                } else {
-                    this.progress_show = true;
-                }
-            },
-            handleFile(file) {
-                this.progressChange(0, +1);
-                // 有空闲worker 立刻处理文件
-                if (this.idle_workers.length > 0) {
-                    this.handleDoFile(file, this.idle_workers.shift());
-                }
-                // 无空闲worker 则放入缓存队列
-                else {
-                    this.cacheQueue.push(file);
-                }
-            },
-            handleCacheQueue(worker_id) {
-                // 调用方法消费缓存队列中的数据
-                if (this.cacheQueue.length === 0) {
-                    this.idle_workers.push(worker_id);
-                    return
-                }
-                this.handleDoFile(this.cacheQueue.shift(), worker_id);
-            },
-            handleDoFile(file, worker_id) {
-                this.workers[worker_id](file).then(data => {
-                    this.$emit("handle_finish", data);
-                    // 完成之后 执行新任务 todo: 可能导致call stack过长
-                    this.handleCacheQueue(worker_id);
-                    this.progressChange(+1, 0);
-                }).catch(err => {
-                    this.$emit("handle_error", err, file.name);
-                    this.handleCacheQueue(worker_id);
-                    this.progressChange(+1, 0);
-                })
-            },
-        }
-    }
-</script>
-
-<style scoped>
-    /*noinspection CssUnusedSymbol*/
-    .el-upload-dragger {
-        width: 80vw !important;
-    }
-</style>
--- a/src/component/utils.ts
+++ b/src/component/utils.ts
@@ -1,4 +1,6 @@
-export function DownloadBlobMusic(data, format) {
+import {DecryptResult} from "@/decrypt/entity";
+
+export function DownloadBlobMusic(data: DecryptResult, format: string) {//todo: use enum
    const a = document.createElement('a');
    a.href = data.file;
    switch (format) {
@@ -21,10 +23,27 @@ export function DownloadBlobMusic(data, format) {
    a.remove();
 }

-export function RemoveBlobMusic(data) {
+export function RemoveBlobMusic(data: DecryptResult) {
    URL.revokeObjectURL(data.file);
-    if (data.picture.startsWith("blob:")) {
+    if (data.picture?.startsWith("blob:")) {
        URL.revokeObjectURL(data.picture);
    }
-
+}
+
+export class DecryptQueue {
+    private readonly pending: (() => Promise<void>)[];
+
+    constructor() {
+        this.pending = []
+    }
+
+    queue(fn: () => Promise<void>) {
+        this.pending.push(fn)
+        this.consume()
+    }
+
+    private consume() {
+        const fn = this.pending.shift()
+        if (fn) fn().then(() => this.consume).catch(console.error)
+    }
 }
--- a/src/component/worker.ts
+++ b/src/component/worker.ts
@@ -0,0 +1,4 @@
+import {expose} from "threads/worker";
+import {CommonDecrypt} from "@/decrypt/common";
+
+expose(CommonDecrypt)
--- a/src/decrypt/common.ts
+++ b/src/decrypt/common.ts
@@ -1,21 +1,11 @@
-import {Decrypt as NcmDecrypt} from "./ncm";
-import {Decrypt as XmDecrypt} from "./xm";
-import {Decrypt as QmcDecrypt} from "./qmc";
-import {Decrypt as KgmDecrypt} from "./kgm";
+import {Decrypt as NcmDecrypt} from "@/decrypt/ncm";
+import {Decrypt as XmDecrypt} from "@/decrypt/xm";
+import {Decrypt as QmcDecrypt} from "@/decrypt/qmc";
+import {Decrypt as KgmDecrypt} from "@/decrypt/kgm";
 import {Decrypt as KwmDecrypt} from "@/decrypt/kwm";
 import {Decrypt as RawDecrypt} from "@/decrypt/raw";
 import {Decrypt as TmDecrypt} from "@/decrypt/tm";
-import {DecryptResult} from "@/decrypt/entity";
-
-
-interface FileInfo {
-    status: string
-    name: string,
-    size: number,
-    percentage: number,
-    uid: number,
-    raw: File
-}
+import {DecryptResult, FileInfo} from "@/decrypt/entity";


 export async function CommonDecrypt(file: FileInfo): Promise<DecryptResult> {
@@ -78,3 +68,4 @@ export async function CommonDecrypt(file: FileInfo): Promise<DecryptResult> {
    console.log(rt_data);
    return rt_data;
 }
+
--- a/src/decrypt/entity.ts
+++ b/src/decrypt/entity.ts
@@ -14,3 +14,12 @@ export interface DecryptResult {
    rawFilename?: string

 }
+
+export interface FileInfo {
+    status: string
+    name: string,
+    size: number,
+    percentage: number,
+    uid: number,
+    raw: File
+}
--- a/src/decrypt/qmc.ts
+++ b/src/decrypt/qmc.ts
@@ -136,7 +136,7 @@ async function queryKeyInfo(keyData: Uint8Array, filename: string, format: strin
        let data = await resp.json();
        return new QmcMask(Base64Decode(data.Matrix44));
    } catch (e) {
-        console.log(e);
+        console.warn(e);
    }
 }

@@ -150,7 +150,7 @@ async function queryAlbumCoverImage(title: string, artist?: string, album?: stri
            return song_query_url + "/" + data.Type + "/" + data.Id
        }
    } catch (e) {
-        console.log(e);
+        console.warn(e);
    }
    return "";
 }
--- a/src/decrypt/qmcMask.ts
+++ b/src/decrypt/qmcMask.ts
@@ -177,7 +177,6 @@ export function QmcMaskDetectMgg(data: Uint8Array) {


 function calcMaskFromConfidence(confidence: { [key: number]: number }) {
-    console.log(confidence)
    const count = Object.keys(confidence).length
    if (count === 0) throw "can not match at least one key";
    if (count > 1) console.warn("There are 2 potential value for the mask!")
--- a/src/decrypt/xm.ts
+++ b/src/decrypt/xm.ts
@@ -42,7 +42,7 @@ export async function Decrypt(file: File, raw_filename: string, raw_ext: string)
    const musicMeta = await metaParseBlob(musicBlob);
    if (ext === "wav") {
        //todo:未知的编码方式
-        console.log(musicMeta.common)
+        console.info(musicMeta.common)
        musicMeta.common.album = "";
        musicMeta.common.artist = "";
        musicMeta.common.title = "";
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,6 @@
 import Vue from 'vue'
-import App from './App.vue'
-import './registerServiceWorker'
+import App from '@/App.vue'
+import '@/registerServiceWorker'
 import {
    Button,
    Checkbox,