Merge remote-tracking branch 'origin/dependabot/npm_and_yarn/highlight.js-10.4.1' into master

Fix incorrect id3 info for .qmc decryption

.github/ISSUE_TEMPLATE/bug-report.md

@@ -7,9 +7,10 @@ assignees: ''
 
 ---
 
-- 请按照此模板填写，否则可能立即被关闭
+* 请按照此模板填写，否则可能立即被关闭
+
 - [x] 我确认已经搜索过Issue不存并确认相同的Issue
-- [x] 我认为这是程序导致的问题（如不确认，请先通过Telegram或者Email进行咨询）
+- [x] 我有证据表明这是程序导致的问题（如不确认，可以在[Discussions](https://github.com/ix64/unlock-music/discussions)内提出）
 
 
 **Bug描述**

.github/ISSUE_TEMPLATE/new-feature.md

@@ -17,7 +17,7 @@ assignees: ''
 **实现途径**
 
 - 如果没有设计方案，请简要描述实现思路
-- 如果你没有任何的实现思路，请通过Telegram进行讨论
+- 如果你没有任何的实现思路，请通过[Discussions](https://github.com/ix64/unlock-music/discussions)或者Telegram进行讨论
 
 
 **附加信息**

.github/workflows/build.yml

@@ -1,7 +1,6 @@
 name: Build
 on:
   push:
-    branches: [ master ]
     paths:
       - "**/*.js"
       - "**/*.vue"

README.md

@@ -4,7 +4,7 @@
 - Unlock Music的CLI版本正在开发中。
 - 我们新建了Telegram群组，欢迎加入！[https://t.me/unlock_music_chat](https://t.me/unlock_music_chat)
 - [其他测试版工具](https://github.com/ix64/unlock-music/wiki/%E5%85%B6%E4%BB%96%E9%9F%B3%E4%B9%90%E6%A0%BC%E5%BC%8F%E5%B7%A5%E5%85%B7)
-    
+- [相关的其他项目](https://github.com/ix64/unlock-music/wiki/%E5%92%8CUnlockMusic%E7%9B%B8%E5%85%B3%E7%9A%84%E9%A1%B9%E7%9B%AE)    
 - ![Release and GitHub Pages](https://github.com/ix64/unlock-music/workflows/Release%20and%20GitHub%20Pages/badge.svg)
 
 # 特性

package.json

@@ -1,7 +1,7 @@
 {
   "name": "unlock-music",
-  "version": "1.7.0",
+  "version": "1.7.2",
-  "updateInfo": "适配深色模式；修复.ncm解锁的一些问题",
+  "updateInfo": "修复.qmc解锁的一些问题",
   "license": "MIT",
   "description": "Unlock encrypted music file in browser.",
   "repository": {
@@ -15,22 +15,24 @@
     "fix-compatibility": "node ./src/fix-compatibility.js"
   },
   "dependencies": {
-    "base64-js": "^1.3.1",
+    "base64-js": "^1.5.1",
     "browser-id3-writer": "^4.4.0",
-    "core-js": "^3.7.0",
+    "core-js": "^3.8.1",
     "crypto-js": "^4.0.0",
-    "element-ui": "^2.14.0",
+    "element-ui": "^2.14.1",
     "iconv-lite": "^0.5.1",
     "jimp": "^0.14.0",
     "metaflac-js": "^1.0.5",
-    "music-metadata-browser": "^2.1.6",
+    "music-metadata-browser": "^2.1.7",
-    "register-service-worker": "^1.7.1",
+    "node-sass": "^4.14.1",
+    "register-service-worker": "^1.7.2",
+    "sass-loader": "^10.0.2",
     "vue": "^2.6.12"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.8",
+    "@vue/cli-plugin-babel": "^4.5.9",
-    "@vue/cli-plugin-pwa": "^4.5.8",
+    "@vue/cli-plugin-pwa": "^4.5.9",
-    "@vue/cli-service": "^4.5.8",
+    "@vue/cli-service": "^4.5.9",
     "babel-plugin-component": "^1.1.1",
     "vue-cli-plugin-element": "^1.0.1",
     "vue-template-compiler": "^2.6.12",

public/index.html

@@ -13,8 +13,7 @@
     <meta content="音乐,解锁,ncm,qmc,mgg,mflac,qq音乐,网易云音乐,加密" name="keywords"/>
     <meta content="音乐解锁 - 在任何设备上解锁已购的加密音乐！" name="description"/>
     <!--@formatter:off-->
-    <style>#loader{position:absolute;left:50%;top:50%;z-index:1010;margin:-75px 0 0 -75px;border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #3498db;width:120px;height:120px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#loader-mask{position:absolute;width:100%;height:100%;bottom:0;left:0;right:0;top:0;z-index:1009;background-color:rgba(242,246,252,0.88)}</style>
+    <style>#loader{position:absolute;left:50%;top:50%;z-index:1010;margin:-75px 0 0 -75px;border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #1db1ff;width:120px;height:120px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}#loader-mask{text-align:center;position:absolute;width:100%;height:100%;bottom:0;left:0;right:0;top:0;z-index:1009;background-color:rgba(242,246,252,.88)}@media (prefers-color-scheme:dark){#loader-mask{color:#fff;background-color:rgba(0,0,0,.85)}#loader-mask a{color:#ddd}#loader-mask a:hover{color:#1db1ff}}#loader-source{font-size:1.5rem}#loader-tips-timeout{font-size:1.2rem}</style>
-    <!--深色模式--><style>@media(prefers-color-scheme:dark){#loader-mask,html,.el-notification,.el-upload-dragger,.el-icon-upload,.el-table,.el-table__expanded-cell,.el-table th,.el-table tr{background-color:#111 !important;}html,.el-notification__content,.el-notification__title,#app,.el-upload__text,.el-table,.el-table__expanded-cell,.el-table th,.el-table tr{color:#DDD !important;}.el-upload__tip,.el-radio__label,.el-checkbox__label,.el-table__empty-text{color:#AAA !important;}.el-table tr:hover,.el-table tr:hover td{background-color:#555 !important;transition:background-color .4s !important;}}</style>
     <!--@formatter:on-->
 </head>
 <body>

src/App.vue

@@ -5,8 +5,8 @@
             <x-upload v-on:handle_error="showFail" v-on:handle_finish="showSuccess"></x-upload>
 
             <div id="app-control">
-                <el-row style="padding-bottom: 1em; font-size: 14px">
+                <el-row class="mb-3">
-                    歌曲命名格式：
+                    <span>歌曲命名格式：</span>
                     <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>
@@ -16,18 +16,16 @@
                     <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 style="margin-left: 1em" v-model="instant_download">立即保存</el-checkbox>
+                        <el-checkbox border class="ml-2" v-model="instant_download">立即保存</el-checkbox>
                     </el-tooltip>
-
-
                 </el-row>
             </div>
+
             <audio :autoplay="playing_auto" :src="playing_url" controls/>
 
             <x-preview :download_format="download_format" :table-data="tableData"
@@ -178,35 +176,9 @@
                 }, 300);
             }
         },
-
     }
-
 </script>
 
-<style>
+<style lang="scss">
-    #app {
+   @import "scss/unlock-music";
-        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;
-    }
-
-    #app-control {
-        padding-top: 1em;
-        padding-bottom: 1em;
-    }
-
 </style>

src/component/preview.vue

@@ -12,7 +12,7 @@
         </el-table-column>
         <el-table-column label="歌曲">
             <template slot-scope="scope">
-                <span style="margin-left: 10px">{{ scope.row.title }}</span>
+                <span>{{ scope.row.title }}</span>
             </template>
         </el-table-column>
         <el-table-column label="歌手">

src/decrypt/ncm.js

@@ -55,10 +55,11 @@ export async function Decrypt(file, raw_filename, raw_ext) {
     try {
         let musicBlob = new Blob([audioData], {type: mime});
         const originalMeta = await musicMetadata.parseBlob(musicBlob);
+        console.log(originalMeta)
         let shouldWrite = !originalMeta.common.album && !originalMeta.common.artists && !originalMeta.common.title
         if (musicMeta.format === "mp3") {
             audioData = await WriteMp3Meta(
-                audioData, artists, info.title, musicMeta.album, imageInfo.buffer, musicMeta.albumPic, !shouldWrite)
+                audioData, artists, info.title, musicMeta.album, imageInfo.buffer, musicMeta.albumPic, shouldWrite ? null : originalMeta)
         } else if (musicMeta.format === "flac") {
             const writer = new MetaFlac(Buffer.from(audioData))
             if (shouldWrite) {

src/decrypt/qmc.js

@@ -5,7 +5,8 @@ import {
     GetFileInfo,
     GetMetaCoverURL,
     GetWebImage,
-    IXAREA_API_ENDPOINT
+    IXAREA_API_ENDPOINT,
+    WriteMp3Meta
 } from "./util";
 import {QmcMaskCreate58, QmcMaskDetectMflac, QmcMaskDetectMgg, QmcMaskGetDefault} from "./qmcMask";
 import {fromByteArray as Base64Encode, toByteArray as Base64Decode} from 'base64-js'
@@ -85,20 +86,17 @@ export async function Decrypt(file, raw_filename, raw_ext) {
                 imgUrl = imageInfo.url
                 try {
                     if (ext === "mp3") {
-                        let writer = new ID3Writer(musicDecoded)
+                        musicDecoded = await WriteMp3Meta(musicDecoded,
-                        writer.setFrame('APIC', {
+                            info.artist.split(" _ "), info.title, "",
-                            type: 3,
+                            imageInfo.buffer, "Cover", musicMeta)
-                            data: imageInfo.buffer,
-                            description: "Cover",
-                        })
-                        writer.addTag();
-                        musicDecoded = writer.arrayBuffer
                         musicBlob = new Blob([musicDecoded], {type: mime});
                     } else if (ext === 'flac') {
                         const writer = new MetaFlac(Buffer.from(musicDecoded))
                         writer.importPictureFromBuffer(Buffer.from(imageInfo.buffer))
                         musicDecoded = writer.save()
                         musicBlob = new Blob([musicDecoded], {type: mime});
+                    } else {
+                        console.info("writing metadata for " + ext + " is not being supported for now")
                     }
                 } catch (e) {
                     console.warn("Error while appending cover image to file " + e)

src/decrypt/util.js

@@ -93,9 +93,25 @@ export async function GetWebImage(pic_url) {
     return {"buffer": null, "src": pic_url, "url": "", "type": ""}
 }
 
-export async function WriteMp3Meta(audioData, artistList, title, album, pictureData = null, pictureDesc = "Cover", cover_only = true) {
+export async function WriteMp3Meta(audioData, artistList, title, album, pictureData = null, pictureDesc = "Cover", originalMeta = null) {
     const writer = new ID3Writer(audioData);
-    if (!cover_only) writer.setFrame("TPE1", artistList).setFrame("TIT2", title).setFrame("TALB", album);
+    if (originalMeta !== null) {
+        artistList = originalMeta.common.artists || artistList
+        title = originalMeta.common.title || title
+        album = originalMeta.common.album || album
+        const frames = originalMeta.native['ID3v2.4'] || originalMeta.native['ID3v2.3'] || originalMeta.native['ID3v2.2'] || []
+        frames.forEach(frame => {
+            if (frame.id !== 'TPE1' && frame.id !== 'TIT2' && frame.id !== 'TALB') {
+                try {
+                    writer.setFrame(frame.id, frame.value)
+                } catch (e) {
+                }
+            }
+        })
+    }
+    writer.setFrame('TPE1', artistList)
+        .setFrame('TIT2', title)
+        .setFrame('TALB', album);
     if (pictureData !== null) {
         writer.setFrame('APIC', {
             type: 3,

src/scss/_dark-mode.scss

@@ -0,0 +1,166 @@
+/*
+ * name:    样式 - 夜间模式
+ * author:  @KyleBing
+ * date:    2020-11-24
+ */
+
+@media (prefers-color-scheme: dark) {
+  #app{
+    color: $dark-text-info;
+  }
+  body{
+    background-color: $dark-bg;
+  }
+
+  // FORM
+  .el-radio{
+    &__label{
+      color: $dark-text-main;
+    }
+    &__input{
+      color: $dark-text-info;
+      .el-radio__inner{
+        border-color: $dark-border;
+        background-color: $dark-btn-bg;
+      }
+    }
+
+    &.is-checked{
+      .el-radio__inner{
+        background-color: $blue;
+      }
+      .el-radio__label{
+        font-weight: bold;
+      }
+    }
+  }
+
+  .el-checkbox.is-bordered{
+    border-color: $dark-border;
+    .el-checkbox__inner{
+      background-color: $dark-btn-bg;
+      border-color: $dark-border;
+    }
+    &:hover{
+      border-color: $dark-border-highlight;
+      .el-checkbox__inner{
+        background-color: $dark-btn-bg-highlight;
+        border-color: $dark-border-highlight;
+      }
+      .el-checkbox__label{
+        color: $dark-text-info;
+      }
+    }
+    &.is-checked{
+      background-color: $blue;
+      .el-checkbox__inner{
+        border-color: $dark-btn-bg-highlight;
+      }
+      .el-checkbox__label{
+        color: white;
+        font-weight: bold;
+      }
+    }
+  }
+
+
+
+  // BUTTON
+  .el-button{
+    background-color: $dark-btn-bg;
+    border-color: $dark-border;
+    color: $dark-text-main;
+
+    &:active{
+      transform: translateY(2px);
+    }
+
+    &--default{
+      &.is-plain {
+        background-color: $dark-btn-bg;
+        &:hover {
+          background-color: $blue;
+          border-color: $blue;
+          color: white;
+        }
+      }
+    }
+    &--danger{
+      &.is-plain{
+        border-color: $dark-border;
+        background-color: $dark-btn-bg;
+        &:hover{
+          background-color: $red;
+          border-color: $red;
+        }
+      }
+    }
+  }
+
+  // 文件拖放区
+  .el-upload__tip{
+    color: $dark-text-info;
+  }
+  .el-upload-dragger{
+    background-color: $dark-uploader-bg;
+    border-color: $dark-border;
+    .el-upload__text{
+      color: $dark-text-info;
+    }
+    &:hover{
+      background: $dark-uploader-bg-highlight;
+      border-color: $dark-border-highlight;
+    }
+  }
+
+  //TABLE
+  .el-table{
+    background-color: $dark-bg-td;
+    &:before{ // 去除表格末尾的横线
+      content: none;
+    }
+    &__header{
+      th{
+        border-bottom-color: $dark-border !important;
+      }
+    }
+    th{
+      background-color: $dark-bg-th;
+      color: $dark-text-info;
+    }
+    td{
+      border-bottom-color: $dark-border !important;
+    }
+    tr{
+      background-color: $dark-bg-td;
+      color: $dark-text-main;
+      &:hover{
+        td{
+          background-color: $dark-bg-th !important;
+        }
+      }
+    }
+  }
+
+
+  // LINKS
+  a{
+    text-decoration: none;
+    color: darken($dark-color-link, 15%);
+    &:hover{
+      color: $dark-color-link;
+    }
+  }
+
+  // ALERT
+  .el-notification{
+    background-color: $dark-btn-bg-highlight;
+    border-color: $dark-border;
+    &__title{
+      color: white;
+    }
+    &__content{
+      color: $dark-text-info;
+    }
+  }
+}

src/scss/_gaps.scss

@@ -0,0 +1,18 @@
+/*
+ * 间隔工具集
+ */
+
+$gap: 5px;
+@for $item from 1 through 7 {
+  .mt-#{$item} { margin-top     : $gap * $item !important;}
+  .mb-#{$item} { margin-bottom  : $gap * $item !important;}
+  .ml-#{$item} { margin-left    : $gap * $item !important;}
+  .mr-#{$item} { margin-right   : $gap * $item !important;}
+   .m-#{$item} { margin         : $gap * $item !important;}
+
+  .pt-#{$item} { padding-top    : $gap * $item !important;}
+  .pb-#{$item} { padding-bottom : $gap * $item !important;}
+  .pl-#{$item} { padding-left   : $gap * $item !important;}
+  .pr-#{$item} { padding-right  : $gap * $item !important;}
+   .p-#{$item} { padding        : $gap * $item !important;}
+}

src/scss/_normal.scss

@@ -0,0 +1,38 @@
+body{
+  font-family: $font-family;
+  font-size: $fz-main;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  text-align: center;
+  color: $text-main;
+  padding-top: 30px;
+}
+
+#app-footer a {
+  padding-left: 0.2em;
+  padding-right: 0.2em;
+}
+
+#app-footer {
+  text-align: center;
+  font-size: small;
+}
+
+#app-control {
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+audio{
+  margin-bottom: 15px; // 播放控件与表格间隔
+}
+
+a{
+  color: darken($color-link, 15%);
+  &:hover{
+    color: $color-link;
+  }
+}

src/scss/_variables.scss

@@ -0,0 +1,28 @@
+// COLORS
+$blue      : #409EFF;
+$red       : #F56C6C;
+$green     : #85ce61;
+
+// TEXT
+$text-main : #2C3E50;
+$color-link: $blue;
+
+$fz-main: 14px;
+
+$font-family: "Helvetica Neue", Helvetica, "PingFang SC",
+"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+
+
+// DARK MODE
+$dark-border                : lighten(black, 25%);
+$dark-border-highlight      : lighten(black, 55%);
+$dark-bg                    : lighten(black, 10%);
+$dark-text-main             : lighten(black, 90%);
+$dark-text-info             : lighten(black, 60%);
+$dark-uploader-bg           : lighten(black, 13%);
+$dark-uploader-bg-highlight : lighten(black, 18%);
+$dark-btn-bg                : lighten(black, 20%);
+$dark-btn-bg-highlight      : lighten(black, 30%);
+$dark-bg-th                 : lighten(black, 18%);
+$dark-bg-td                 : lighten(black, 13%);
+$dark-color-link            : $green;

src/scss/unlock-music.scss

@@ -0,0 +1,5 @@
+@import "variables";
+@import "gaps";
+
+@import "normal";
+@import "dark-mode"; // dark-mode 放在 normal 后面，以获得更高优先级