web/src/App.vue

211 lines
8.5 KiB
Vue
Raw Normal View History

2019-07-03 14:50:04 +00:00
<template>
2020-02-06 08:01:35 +00:00
<el-container id="app">
<el-main>
2020-03-01 15:36:16 +00:00
<x-upload v-on:handle_error="showFail" v-on:handle_finish="showSuccess"></x-upload>
2020-02-06 08:01:35 +00:00
<div id="app-control">
<el-row class="mb-3">
<span>歌曲命名格式</span>
2020-02-23 05:45:30 +00:00
<el-radio label="1" name="format" v-model="download_format">歌手-歌曲名</el-radio>
<el-radio label="2" name="format" v-model="download_format">歌曲名</el-radio>
<el-radio label="3" name="format" v-model="download_format">歌曲名-歌手</el-radio>
<el-radio label="4" name="format" v-model="download_format">同原文件名</el-radio>
</el-row>
2020-02-23 05:41:39 +00:00
<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-tooltip class="item" effect="dark" placement="top-start">
<div slot="content">
当您使用此工具进行大量文件解锁的时候建议开启此选项<br/>
开启后解锁结果将不会存留于浏览器中防止内存不足
</div>
<el-checkbox border class="ml-2" v-model="instant_download">立即保存</el-checkbox>
</el-tooltip>
2020-02-23 05:41:39 +00:00
</el-row>
</div>
2020-02-06 08:01:35 +00:00
<audio :autoplay="playing_auto" :src="playing_url" controls/>
2020-03-01 15:36:16 +00:00
<x-preview :download_format="download_format" :table-data="tableData"
2020-02-06 08:01:35 +00:00
v-on:music_changed="changePlaying"></x-preview>
</el-main>
<el-footer id="app-footer">
<el-row>
2020-02-23 05:41:39 +00:00
<a href="https://github.com/ix64/unlock-music" target="_blank">音乐解锁</a>(v<span
v-text="version"></span>)移除已购音乐的加密保护
2020-02-06 08:01:35 +00:00
<a href="https://github.com/ix64/unlock-music/wiki/使用提示" target="_blank">使用提示</a>
</el-row>
<el-row>
2020-07-16 14:29:06 +00:00
目前支持网易云音乐(ncm), QQ音乐(qmc, mflac, mgg), 酷狗音乐(kgm), 虾米音乐(xm), 酷我音乐(.kwm)
<a href="https://github.com/ix64/unlock-music/blob/master/README.md" target="_blank">更多</a>
2020-02-23 05:41:39 +00:00
</el-row>
<el-row>
2020-07-16 14:29:06 +00:00
<!--如果进行二次开发此行版权信息不得移除且应明显地标注于页面上-->
2020-04-05 11:23:30 +00:00
<span>Copyright &copy; 2019-</span><span v-text="(new Date()).getFullYear()"></span> MengYX
2020-02-06 08:01:35 +00:00
音乐解锁使用
<a href="https://github.com/ix64/unlock-music/blob/master/LICENSE" target="_blank">MIT许可协议</a>
2020-02-23 05:41:39 +00:00
开放源代码
2020-02-06 08:01:35 +00:00
</el-row>
</el-footer>
</el-container>
2019-07-03 14:50:04 +00:00
</template>
<script>
2020-02-06 08:01:35 +00:00
import upload from "./component/upload"
import preview from "./component/preview"
import {DownloadBlobMusic, RemoveBlobMusic} from "./component/util"
2020-02-23 05:44:19 +00:00
import config from "../package"
2020-07-18 13:58:07 +00:00
import {IXAREA_API_ENDPOINT} from "./decrypt/util";
export default {
name: 'app',
2020-02-06 08:01:35 +00:00
components: {
xUpload: upload,
xPreview: preview
},
data() {
return {
2020-02-23 05:44:19 +00:00
version: config.version,
activeIndex: '1',
tableData: [],
playing_url: "",
playing_auto: false,
2020-02-23 05:45:30 +00:00
download_format: '1',
2020-02-06 08:01:35 +00:00
instant_download: false,
}
},
2020-02-06 08:01:35 +00:00
created() {
this.$nextTick(function () {
this.finishLoad();
});
},
methods: {
2020-02-23 05:44:19 +00:00
async finishLoad() {
2020-02-06 08:01:35 +00:00
const mask = document.getElementById("loader-mask");
if (!!mask) mask.remove();
2020-02-23 05:44:19 +00:00
let updateInfo;
try {
2020-07-18 13:58:07 +00:00
const resp = await fetch(IXAREA_API_ENDPOINT + "/music/app-version", {
2020-02-23 05:44:19 +00:00
method: "POST", headers: {"Content-Type": "application/json"},
2020-04-07 10:53:38 +00:00
body: JSON.stringify({"Version": this.version})
2020-02-23 05:44:19 +00:00
});
updateInfo = await resp.json();
} catch (e) {
}
2020-04-07 10:53:38 +00:00
if ((!!updateInfo && process.env.NODE_ENV === 'production') && (!!updateInfo.HttpsFound ||
2020-09-23 04:54:54 +00:00
(!!updateInfo.Found && window.location.protocol !== "https:"))) {
this.$notify.warning({
title: '发现更新',
message: '发现新版本 v' + updateInfo.Version +
'<br/>更新详情:' + updateInfo.Detail +
'<br/><a target="_blank" href="' + updateInfo.URL + '">获取更新</a>',
dangerouslyUseHTMLString: true,
duration: 15000,
position: 'top-left'
});
2020-02-23 05:44:19 +00:00
} else {
this.$notify.info({
title: '离线使用',
message: '我们使用PWA技术无网络也能使用' +
2020-03-04 01:30:48 +00:00
'<br/>最近更新:' + config.updateInfo +
2020-02-23 05:44:19 +00:00
'<br/><a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>',
dangerouslyUseHTMLString: true,
duration: 10000,
position: 'top-left'
});
}
},
2020-02-06 08:01:35 +00:00
showSuccess(data) {
if (data.status) {
if (this.instant_download) {
DownloadBlobMusic(data, this.download_format);
RemoveBlobMusic(data);
} else {
2020-02-06 08:01:35 +00:00
this.tableData.push(data);
this.$notify.success({
title: '解锁成功',
message: '成功解锁 ' + data.title,
duration: 3000
});
}
2020-02-07 12:17:45 +00:00
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)]);
}
2020-02-06 08:01:35 +00:00
} else {
2020-02-06 08:18:40 +00:00
this.showFail(data.message, data.rawFilename + "." + data.rawExt)
}
},
2020-02-06 08:01:35 +00:00
showFail(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
});
2020-02-07 12:17:45 +00:00
if (process.env.NODE_ENV === 'production') {
window._paq.push(["trackEvent", "Error", errInfo, filename]);
}
console.error(errInfo, filename);
2020-02-06 08:01:35 +00:00
},
changePlaying(url) {
this.playing_url = url;
this.playing_auto = true;
2019-11-23 10:56:45 +00:00
},
handleDeleteAll() {
this.tableData.forEach(value => {
2020-02-06 08:01:35 +00:00
RemoveBlobMusic(value);
});
this.tableData = [];
},
handleDownloadAll() {
let index = 0;
let c = setInterval(() => {
if (index < this.tableData.length) {
2020-02-06 08:01:35 +00:00
DownloadBlobMusic(this.tableData[index], this.download_format);
index++;
} else {
clearInterval(c);
}
2020-02-06 08:01:35 +00:00
}, 300);
}
2020-02-06 08:01:35 +00:00
},
}
2019-07-03 14:50:04 +00:00
</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 {
2020-01-27 04:50:24 +00:00
padding-left: 0.2em;
padding-right: 0.2em;
}
#app-footer {
text-align: center;
font-size: small;
}
#app-control {
padding-top: 1em;
padding-bottom: 1em;
}
2019-07-03 14:50:04 +00:00
</style>