Add progress bar for unlocking #37

Add tips for instant save
This commit is contained in:
MengYX 2020-04-05 12:28:59 +08:00
parent 87356a0514
commit 9569e2f145
No known key found for this signature in database
GPG Key ID: E63F9C7303E8F604
4 changed files with 57 additions and 9 deletions

View File

@ -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"

View File

@ -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);
})
},
}

View File

@ -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);
}
}

View File

@ -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;