Split App.vue

This commit is contained in:
MengYX 2020-02-06 16:01:35 +08:00
parent e3ca175258
commit 3ee9f5d2d1
No known key found for this signature in database
GPG Key ID: E63F9C7303E8F604
5 changed files with 263 additions and 215 deletions

View File

@ -1,76 +1,25 @@
<template> <template>
<div id="app">
<el-container> <el-container id="app">
<el-main> <el-main>
<el-upload <x-upload v-on:handle_finish="showSuccess" v-on:handle_error="showFail"></x-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>
</el-upload>
<el-row id="app-control"> <el-row id="app-control">
<el-row style="padding-bottom: 1em; font-size: 14px"> <el-row style="padding-bottom: 1em; font-size: 14px">
歌曲命名格式 歌曲命名格式
<el-radio name="format" v-model="format" label="1">歌曲名</el-radio> <el-radio name="format" v-model="download_format" label="1">歌曲名</el-radio>
<el-radio name="format" v-model="format" label="2">歌手-歌曲名</el-radio> <el-radio name="format" v-model="download_format" label="2">歌手-歌曲名</el-radio>
<el-radio name="format" v-model="format" label="3">歌曲名-歌手</el-radio> <el-radio name="format" v-model="download_format" label="3">歌曲名-歌手</el-radio>
<el-checkbox v-model="instantDownload" border>立即保存</el-checkbox> <el-checkbox v-model="instant_download" border>立即保存</el-checkbox>
</el-row> </el-row>
<el-button @click="handleDownloadAll" icon="el-icon-download" plain>下载全部</el-button> <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-button @click="handleDeleteAll" icon="el-icon-delete" plain type="danger">删除全部</el-button>
</el-row> </el-row>
<audio :autoplay="playing_auto" :src="playing_url" controls/> <audio :autoplay="playing_auto" :src="playing_url" controls/>
<x-preview :table-data="tableData" :download_format="download_format"
v-on:music_changed="changePlaying"></x-preview>
<el-table :data="tableData" style="width: 100%">
<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>
</el-image>
</template>
</el-table-column>
<el-table-column label="歌曲" sortable>
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.title }}</span>
</template>
</el-table-column>
<el-table-column label="歌手" sortable>
<template slot-scope="scope">
<p>{{ scope.row.artist }}</p>
</template>
</el-table-column>
<el-table-column label="专辑" sortable>
<template slot-scope="scope">
<p>{{ scope.row.album }}</p>
</template>
</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>
<el-button @click="handleDownload(scope.row)"
circle icon="el-icon-download">
</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)"
circle icon="el-icon-delete" type="danger">
</el-button>
</template>
</el-table-column>
</el-table>
</el-main> </el-main>
<el-footer id="app-footer"> <el-footer id="app-footer">
<el-row> <el-row>
@ -89,63 +38,40 @@
</el-row> </el-row>
</el-footer> </el-footer>
</el-container> </el-container>
</div>
</template> </template>
<script> <script>
//
"use strict"; import upload from "./component/upload"
import preview from "./component/preview"
import {DownloadBlobMusic, RemoveBlobMusic} from "./component/util"
export default { export default {
name: 'app', name: 'app',
components: {}, components: {
xUpload: upload,
xPreview: preview
},
data() { data() {
return { return {
activeIndex: '1', activeIndex: '1',
tableData: [], tableData: [],
playing_url: "", playing_url: "",
playing_auto: false, playing_auto: false,
format: '2', download_format: '2',
instantDownload: false, instant_download: false,
workCount: 0,
cacheQueue: [],
cacheQueueOption: {
push: (element) => {
this.cacheQueue.push(element);
},
pop: () => {
return this.cacheQueue.shift();
},
size: () => {
return this.cacheQueue.length;
} }
}, },
workers: [], created() {
idle_workers: [],
thread_num: 1
}
},
mounted() {
this.$nextTick(function () { this.$nextTick(function () {
this.finishLoad(); this.finishLoad();
}); });
if (document.location.host !== "") {
//todo: Fail on Hot Reload
const worker = require("workerize-loader!./decrypt/common");
this.thread_num = navigator.hardwareConcurrency || 1;
for (let i = 0; i < this.thread_num; i++) {
this.workers.push(worker().CommonDecrypt);
this.idle_workers.push(i);
}
} else {
const dec = require('./decrypt/common');
this.workers.push(dec.CommonDecrypt);
this.idle_workers.push(0)
}
}, },
methods: { methods: {
finishLoad() { finishLoad() {
document.getElementById("loader-mask").remove(); const mask = document.getElementById("loader-mask");
if (!!mask) mask.remove();
this.$notify.info({ this.$notify.info({
title: '离线使用', title: '离线使用',
message: '我们使用PWA技术无网络也能使用<br/>' + message: '我们使用PWA技术无网络也能使用<br/>' +
@ -156,30 +82,11 @@
position: 'top-left' position: 'top-left'
}); });
}, },
handleFile(file) { showSuccess(data) {
// worker
if (this.idle_workers.length > 0) {
this.handleDoFile(file, this.idle_workers.shift());
}
// worker
else {
this.cacheQueueOption.push(file);
}
},
handleCacheQueue(worker_id) {
//
if (this.cacheQueue.length === 0) {
this.idle_workers.push(worker_id);
return
}
this.handleDoFile(this.cacheQueueOption.pop(), worker_id);
},
handleDoFile(file, worker_id) {
this.workers[worker_id](file).then(data => {
if (data.status) { if (data.status) {
if (this.instantDownload) { if (this.instant_download) {
this.handleDownload(data); DownloadBlobMusic(data, this.download_format);
this.handleDelete(null, data); RemoveBlobMusic(data);
} else { } else {
this.tableData.push(data); this.tableData.push(data);
this.$notify.success({ this.$notify.success({
@ -191,59 +98,27 @@
let _rp_data = [data.title, data.artist, data.album]; let _rp_data = [data.title, data.artist, data.album];
window._paq.push(["trackEvent", "Unlock", data.rawExt + "," + data.mime, JSON.stringify(_rp_data)]); window._paq.push(["trackEvent", "Unlock", data.rawExt + "," + data.mime, JSON.stringify(_rp_data)]);
} else { } else {
this.showFail(data.message, data.rawFilename)
}
},
showFail(errInfo, filename) {
this.$notify.error({ this.$notify.error({
title: '出现问题', title: '出现问题',
message: data.message + "" + file.name + message: errInfo + "" + filename +
',参考<a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>', ',参考<a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>',
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
duration: 6000 duration: 6000
}); });
window._paq.push(["trackEvent", "Error", data.message, file.name]); window._paq.push(["trackEvent", "Error", errInfo, filename]);
} console.error(errInfo, filename);
// todo: call stack
this.handleCacheQueue(worker_id);
}).catch(err => {
console.error(err, file);
window._paq.push(["trackEvent", "Error", err, file.name]);
this.handleCacheQueue(worker_id);
})
}, },
handlePlay(index, row) { changePlaying(url) {
this.playing_url = row.file; this.playing_url = url;
this.playing_auto = true; this.playing_auto = true;
}, },
handleDelete(index, row) {
URL.revokeObjectURL(row.file);
URL.revokeObjectURL(row.picture);
if (index != null) {
this.tableData.splice(index, 1);
}
},
handleDownload(row) {
let a = document.createElement('a');
a.href = row.file;
switch (this.format) {
case "1":
a.download = row.title + "." + row.ext;
break;
case "2":
a.download = row.artist + " - " + row.title + "." + row.ext;
break;
case "3":
a.download = row.title + " - " + row.artist + "." + row.ext;
break;
default:
a.download = row.filename;
break;
}
document.body.append(a);
a.click();
a.remove();
},
handleDeleteAll() { handleDeleteAll() {
this.tableData.forEach(value => { this.tableData.forEach(value => {
URL.revokeObjectURL(value.file); RemoveBlobMusic(value);
URL.revokeObjectURL(value.picture);
}); });
this.tableData = []; this.tableData = [];
}, },
@ -251,16 +126,16 @@
let index = 0; let index = 0;
let c = setInterval(() => { let c = setInterval(() => {
if (index < this.tableData.length) { if (index < this.tableData.length) {
this.handleDownload(this.tableData[index]); DownloadBlobMusic(this.tableData[index], this.download_format);
index++; index++;
} else { } else {
clearInterval(c); clearInterval(c);
} }
}, 1000); }, 300);
}
},
} }
}
}
</script> </script>
@ -285,15 +160,9 @@
font-size: small; font-size: small;
} }
/*noinspection CssUnusedSymbol*/
.el-upload-dragger {
width: 80vw !important;
}
#app-control { #app-control {
padding-top: 1em; padding-top: 1em;
padding-bottom: 1em; padding-bottom: 1em;
} }
</style> </style>

71
src/component/preview.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<el-table :data="tableData" style="width: 100%">
<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>
</el-image>
</template>
</el-table-column>
<el-table-column label="歌曲" sortable>
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.title }}</span>
</template>
</el-table-column>
<el-table-column label="歌手" sortable>
<template slot-scope="scope">
<p>{{ scope.row.artist }}</p>
</template>
</el-table-column>
<el-table-column label="专辑" sortable>
<template slot-scope="scope">
<p>{{ scope.row.album }}</p>
</template>
</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>
<el-button @click="handleDownload(scope.row)"
circle icon="el-icon-download">
</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)"
circle icon="el-icon-delete" type="danger">
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
import {DownloadBlobMusic, RemoveBlobMusic} from './util'
export default {
name: "preview",
props: {
tableData: {type: Array, required: true},
download_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)
},
}
}
</script>
<style scoped>
</style>

82
src/component/upload.vue Normal file
View File

@ -0,0 +1,82 @@
<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>
</el-upload>
</template>
<script>
"use strict";//
export default {
name: "upload",
data() {
return {
cacheQueue: [],
workers: [],
idle_workers: [],
thread_num: 1
}
},
mounted() {
if (document.location.host !== "") {
//todo: Fail on Hot Reload
const worker = require("workerize-loader!../decrypt/common");
this.thread_num = navigator.hardwareConcurrency || 1;
for (let i = 0; i < this.thread_num; i++) {
// noinspection JSValidateTypes,JSUnresolvedVariable
this.workers.push(worker().CommonDecrypt);
this.idle_workers.push(i);
}
} else {
const dec = require('../decrypt/common');
this.workers.push(dec.CommonDecrypt);
this.idle_workers.push(0)
}
},
methods: {
handleFile(file) {
// 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);
}).catch(err => {
this.$emit("handle_error", err, file.name);
this.handleCacheQueue(worker_id);
})
},
}
}
</script>
<style scoped>
/*noinspection CssUnusedSymbol*/
.el-upload-dragger {
width: 80vw !important;
}
</style>

26
src/component/util.js Normal file
View File

@ -0,0 +1,26 @@
export function DownloadBlobMusic(data, format) {
const a = document.createElement('a');
a.href = data.file;
switch (format) {
case "1":
a.download = data.title + "." + data.ext;
break;
case "2":
a.download = data.artist + " - " + data.title + "." + data.ext;
break;
case "3":
a.download = data.title + " - " + data.artist + "." + data.ext;
break;
default:
a.download = data.filename;
break;
}
document.body.append(a);
a.click();
a.remove();
}
export function RemoveBlobMusic(data) {
URL.revokeObjectURL(data.file);
URL.revokeObjectURL(data.picture);
}

View File

@ -42,9 +42,9 @@ export async function CommonDecrypt(file) {
default: default:
rt_data = {status: false, message: "不支持此文件格式",} rt_data = {status: false, message: "不支持此文件格式",}
} }
if (rt_data.status) {
rt_data.rawExt = raw_ext; rt_data.rawExt = raw_ext;
rt_data.rawFilename = raw_filename; rt_data.rawFilename = raw_filename;
}
return rt_data; return rt_data;
} }