Add progress bar for unlocking #37

Add tips for instant save

src/App.vue

@@ -4,7 +4,7 @@
         <el-main>
             <x-upload v-on:handle_error="showFail" v-on:handle_finish="showSuccess"></x-upload>
 
-            <el-row id="app-control">
+            <div id="app-control">
                 <el-row style="padding-bottom: 1em; font-size: 14px">
                     歌曲命名格式：
                     <el-radio label="1" name="format" v-model="download_format">歌手-歌曲名</el-radio>
@@ -14,10 +14,20 @@
                 </el-row>
                 <el-row>
                     <el-button @click="handleDownloadAll" icon="el-icon-download" plain>下载全部</el-button>
-                    <el-button @click="handleDeleteAll" icon="el-icon-delete" plain type="danger">删除全部</el-button>
-                    <el-checkbox border style="margin-left: 1em" v-model="instant_download">立即保存</el-checkbox>
+                    <el-button @click="handleDeleteAll" icon="el-icon-delete" plain type="danger">清除全部</el-button>
+
+
+                    <el-tooltip class="item" effect="dark" placement="top-start">
+                        <div slot="content">
+                            当您使用此工具进行大量文件解锁的时候，建议开启此选项。<br/>
+                            开启后，解锁结果将不会存留于浏览器中，防止内存不足。
+                        </div>
+                        <el-checkbox border style="margin-left: 1em" v-model="instant_download">立即保存</el-checkbox>
+                    </el-tooltip>
+
+
                 </el-row>
-            </el-row>
+            </div>
             <audio :autoplay="playing_auto" :src="playing_url" controls/>
 
             <x-preview :download_format="download_format" :table-data="tableData"

src/component/upload.vue

@@ -9,6 +9,13 @@
         <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>
 
@@ -22,7 +29,13 @@
                 cacheQueue: [],
                 workers: [],
                 idle_workers: [],
-                thread_num: 1
+                thread_num: 1,
+
+                progress_show: false,
+
+                progress_finished: 0,
+                progress_all: 0,
+                progress_percent: 0,
             }
         },
         mounted() {
@@ -47,7 +60,25 @@
             }
         },
         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());
@@ -70,9 +101,11 @@
                     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);
                 })
             },
         }

src/component/util.js

@@ -23,5 +23,8 @@ export function DownloadBlobMusic(data, format) {
 
 export function RemoveBlobMusic(data) {
     URL.revokeObjectURL(data.file);
-    URL.revokeObjectURL(data.picture);
+    if (data.picture.startsWith("blob:")) {
+        URL.revokeObjectURL(data.picture);
+    }
+
 }

src/main.js

@@ -3,10 +3,10 @@ import App from './App.vue'
 import './registerServiceWorker'
 import {
     Button, Col, Container, Footer, Icon, Image, Link, Main,
-    Row, Table, TableColumn, Upload, Radio, Checkbox,
-    Notification,
+    Row, Table, TableColumn, Upload, Radio, Checkbox, Progress,
+    Notification, Tooltip,
 } from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css'
+import 'element-ui/lib/theme-chalk/base.css';
 
 Vue.use(Link);
 Vue.use(Image);
@@ -22,6 +22,8 @@ Vue.use(Col);
 Vue.use(Upload);
 Vue.use(Checkbox);
 Vue.use(Radio);
+Vue.use(Tooltip);
+Vue.use(Progress);
 Vue.prototype.$notify = Notification;
 
 Vue.config.productionTip = false;