112 lines
3.9 KiB
Vue
112 lines
3.9 KiB
Vue
<template>
|
||
<div>
|
||
<file-selector @error="showFail" @success="showSuccess"/>
|
||
|
||
<div id="app-control">
|
||
<el-row class="mb-3">
|
||
<span>歌曲命名格式:</span>
|
||
<el-radio v-for="k in FilenamePolicies" :key="k.key"
|
||
v-model="filename_policy" :label="k.key">
|
||
{{ k.text }}
|
||
</el-radio>
|
||
</el-row>
|
||
<el-row>
|
||
<el-button icon="el-icon-download" plain @click="handleDownloadAll">下载全部</el-button>
|
||
<el-button icon="el-icon-delete" plain type="danger" @click="handleDeleteAll">清除全部</el-button>
|
||
|
||
<el-tooltip class="item" effect="dark" placement="top-start">
|
||
<div slot="content">
|
||
当您使用此工具进行大量文件解锁的时候,建议开启此选项。<br/>
|
||
开启后,解锁结果将不会存留于浏览器中,防止内存不足。
|
||
</div>
|
||
<el-checkbox v-model="instant_download" border class="ml-2">立即保存</el-checkbox>
|
||
</el-tooltip>
|
||
</el-row>
|
||
</div>
|
||
|
||
<audio :autoplay="playing_auto" :src="playing_url" controls/>
|
||
|
||
<PreviewTable :policy="filename_policy" :table-data="tableData" @play="changePlaying"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import FileSelector from "../component/FileSelector"
|
||
import PreviewTable from "../component/PreviewTable"
|
||
import {DownloadBlobMusic, FilenamePolicy, FilenamePolicies, RemoveBlobMusic} from "@/utils/utils"
|
||
|
||
export default {
|
||
name: 'Home',
|
||
components: {
|
||
FileSelector,
|
||
PreviewTable
|
||
},
|
||
data() {
|
||
return {
|
||
activeIndex: '1',
|
||
tableData: [],
|
||
playing_url: "",
|
||
playing_auto: false,
|
||
filename_policy: FilenamePolicy.ArtistAndTitle,
|
||
instant_download: false,
|
||
FilenamePolicies
|
||
}
|
||
},
|
||
methods: {
|
||
showSuccess(data) {
|
||
if (this.instant_download) {
|
||
DownloadBlobMusic(data, this.filename_policy);
|
||
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) {
|
||
console.error(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]);
|
||
}
|
||
},
|
||
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.filename_policy);
|
||
index++;
|
||
} else {
|
||
clearInterval(c);
|
||
}
|
||
}, 300);
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|