You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
unblock-music-web/src/App.vue

290 lines
12 KiB
Vue

5 years ago
<template>
<div id="app">
<el-container>
<el-main>
<el-upload
:auto-upload="false"
:on-change="handleFile"
:show-file-list="false"
action=""
drag
multiple>
<i class="el-icon-upload"></i>
<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 style="padding-bottom: 1em; font-size: 14px">
歌曲命名格式
<el-radio name="format" v-model="format" label="1"></el-radio>
<el-radio name="format" v-model="format" label="2">-</el-radio>
<el-radio name="format" v-model="format" label="3">-</el-radio>
</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-row>
<audio :autoplay="playing_auto" :src="playing_url" controls></audio>
<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-footer id="app-footer">
<el-row>
音乐解锁移除已购音乐的加密保护
目前支持网易云音乐(ncm)QQ音乐(qmc, mflac, tkm)以及
<a href="https://github.com/ix64/unlock-music/blob/master/README.md" target="_blank">其他格式</a>
<a href="https://github.com/ix64/unlock-music/wiki/使用提示" target="_blank">使用提示</a>
</el-row>
<el-row>
<span>Copyright &copy; 2019</span>
<a href="https://github.com/ix64" target="_blank">MengYX</a>
音乐解锁使用
<a href="https://github.com/ix64/unlock-music/blob/master/LICENSE" target="_blank">MIT许可协议</a>
开放
<a href="https://github.com/ix64/unlock-music" target="_blank">源代码</a>
</el-row>
</el-footer>
</el-container>
5 years ago
</div>
5 years ago
</template>
<script>
5 years ago
// 严格模式 用于尾调用优化
"use strict";
5 years ago
const worker = require("workerize-loader!./decrypt/common");
const dec = require('./decrypt/common');
export default {
name: 'app',
components: {},
data() {
return {
activeIndex: '1',
tableData: [],
playing_url: "",
playing_auto: false,
format: '2',
workCount: 0,
cacheQueue: [],
cacheQueueOption: {
push: (element) => {
this.cacheQueue.push(element);
},
pop: () => {
return this.cacheQueue.shift();
},
size: () => {
return this.cacheQueue.length;
}
},
5 years ago
workers: [],
idle_workers: [],
thread_num: 1
}
},
mounted() {
this.$nextTick(function () {
this.finishLoad();
});
5 years ago
if (document.location.host !== "") {
this.thread_num = Math.max(navigator.hardwareConcurrency, 1);
for (let i = 0; i < this.thread_num; i++) {
this.workers.push(worker().CommonDecrypt);
this.idle_workers.push(i);
}
} else {
this.workers.push(dec.CommonDecrypt);
this.idle_workers.push(0)
}
},
methods: {
finishLoad() {
document.getElementById("loader-mask").remove();
this.$notify.info({
title: '离线使用',
message: '我们使用PWA技术无网络也能使用<br/>' +
'最近更新支持bkcmp3/bkcflac/tkm<br/>' +
'点击查看 <a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>',
dangerouslyUseHTMLString: true,
duration: 10000,
position: 'top-left'
});
},
handleFile(file) {
5 years ago
// 有空闲worker 立刻处理文件
if (this.idle_workers.length > 0) {
this.handleDoFile(file, this.idle_workers.shift());
}
5 years ago
// 无空闲worker 则放入缓存队列
else {
5 years ago
this.cacheQueueOption.push(file);
}
},
5 years ago
handleCacheQueue(worker_id) {
// 调用方法消费缓存队列中的数据
if (this.cacheQueue.length === 0) {
this.idle_workers.push(worker_id);
return
}
5 years ago
this.handleDoFile(this.cacheQueueOption.pop(), worker_id);
},
5 years ago
handleDoFile(file, worker_id) {
this.workers[worker_id](file).then(data => {
if (data.status) {
this.tableData.push(data);
this.$notify.success({
title: '解锁成功',
message: '成功解锁 ' + data.title,
duration: 3000
});
let _rp_data = [data.title, data.artist, data.album];
5 years ago
window._paq.push(["trackEvent", "Unlock", data.rawExt + "," + data.mime, JSON.stringify(_rp_data)]);
} else {
this.$notify.error({
title: '出现问题',
message: data.message + "" + file.name +
',参考<a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>',
dangerouslyUseHTMLString: true,
duration: 6000
});
window._paq.push(["trackEvent", "Error", data.message, file.name]);
}
5 years ago
// 完成之后 执行新任务 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) {
this.playing_url = row.file;
this.playing_auto = true;
},
handleDelete(index, row) {
URL.revokeObjectURL(row.file);
URL.revokeObjectURL(row.picture);
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() {
this.tableData.forEach(value => {
URL.revokeObjectURL(value.file);
URL.revokeObjectURL(value.picture);
});
this.tableData = [];
},
handleDownloadAll() {
let index = 0;
let c = setInterval(() => {
if (index < this.tableData.length) {
this.handleDownload(this.tableData[index]);
index++;
} else {
clearInterval(c);
}
}, 1000);
}
}
}
5 years ago
</script>
<style>
#app {
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
padding-top: 30px;
}
#app-footer a {
padding-left: 0.2em;
padding-right: 0.2em;
}
#app-footer {
text-align: center;
font-size: small;
}
5 years ago
/*noinspection CssUnusedSymbol*/
.el-upload-dragger {
width: 80vw !important;
}
#app-control {
padding-top: 1em;
padding-bottom: 1em;
}
5 years ago
</style>