Merge pull request #157 from unlock-music/add-typescript

Add typescript support

package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "base64-js": "^1.5.1",
     "browser-id3-writer": "^4.4.0",
-    "core-js": "^3.10.1",
+    "core-js": "^3.12.1",
     "crypto-js": "^4.0.0",
     "element-ui": "^2.15.1",
     "iconv-lite": "^0.6.2",
@@ -26,16 +26,20 @@
     "metaflac-js": "^1.0.5",
     "music-metadata-browser": "^2.2.6",
     "register-service-worker": "^1.7.2",
-    "vue": "^2.6.12"
+    "vue": "^2.6.12",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^9.1.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.12",
+    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-plugin-pwa": "^4.5.12",
+    "@vue/cli-plugin-pwa": "^4.5.13",
-    "@vue/cli-service": "^4.5.12",
+    "@vue/cli-plugin-typescript": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
     "babel-plugin-component": "^1.1.1",
     "node-sass": "^5.0.0",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^10.2.0",
     "semver": "^7.3.5",
+    "typescript": "~4.1.5",
     "vue-cli-plugin-element": "^1.0.1",
     "vue-template-compiler": "^2.6.12",
     "workerize-loader": "^1.3.0"

src/decrypt/kgm.js

@@ -1,4 +1,5 @@
-import {AudioMimeType, DetectAudioExt, GetArrayBuffer, GetFileInfo, GetMetaCoverURL, IsBytesEqual} from "./util";
+import {AudioMimeType, GetFileInfo, GetMetaCoverURL} from "./util";
+import {BytesHasPrefix, GetArrayBuffer, SniffAudioExt} from "@/decrypt/utils.ts";
 
 const musicMetadata = require("music-metadata-browser");
 const VprHeader = [
@@ -23,10 +24,10 @@ export async function Decrypt(file, raw_filename, raw_ext) {
     }
     const oriData = new Uint8Array(await GetArrayBuffer(file));
     if (raw_ext === "vpr") {
-        if (!IsBytesEqual(VprHeader, oriData.slice(0, 0x10)))
+        if (!BytesHasPrefix(oriData, VprHeader))
             return {status: false, message: "Not a valid vpr file!"}
     } else {
-        if (!IsBytesEqual(KgmHeader, oriData.slice(0, 0x10)))
+        if (!BytesHasPrefix(oriData, KgmHeader))
             return {status: false, message: "Not a valid kgm/kgma file!"}
     }
     let bHeaderLen = new DataView(oriData.slice(0x10, 0x14).buffer)
@@ -61,7 +62,7 @@ export async function Decrypt(file, raw_filename, raw_ext) {
         for (let i = 0; i < dataLen; i++) audioData[i] ^= VprMaskDiff[i % 17]
     }
 
-    const ext = DetectAudioExt(audioData, "mp3");
+    const ext = SniffAudioExt(audioData);
     const mime = AudioMimeType[ext];
     let musicBlob = new Blob([audioData], {type: mime});
     const musicMeta = await musicMetadata.parseBlob(musicBlob);
@@ -71,11 +72,11 @@ export async function Decrypt(file, raw_filename, raw_ext) {
         status: true,
         title: info.title,
         artist: info.artist,
-        ext: ext,
         album: musicMeta.common.album,
         picture: imgUrl,
         file: URL.createObjectURL(musicBlob),
-        mime: mime
+        ext,
+        mime
     }
 }
 

src/decrypt/kwm.js

@@ -1,4 +1,5 @@
-import {AudioMimeType, DetectAudioExt, GetArrayBuffer, GetFileInfo, GetMetaCoverURL, IsBytesEqual} from "./util";
+import {AudioMimeType, GetFileInfo, GetMetaCoverURL} from "./util";
+import {BytesHasPrefix, GetArrayBuffer, SniffAudioExt} from "@/decrypt/utils.ts";
 
 const musicMetadata = require("music-metadata-browser");
 const MagicHeader = [
@@ -7,9 +8,9 @@ const MagicHeader = [
 ]
 const PreDefinedKey = "MoOtOiTvINGwd2E6n0E1i7L5t2IoOoNk"
 
-export async function Decrypt(file, raw_filename, raw_ext) {
+export async function Decrypt(file, raw_filename, _) {
     const oriData = new Uint8Array(await GetArrayBuffer(file));
-    if (!IsBytesEqual(MagicHeader, oriData.slice(0, 0x10)))
+    if (!BytesHasPrefix(oriData, MagicHeader))
         return {status: false, message: "Not a valid kwm file!"}
 
     let fileKey = oriData.slice(0x18, 0x20)
@@ -20,7 +21,7 @@ export async function Decrypt(file, raw_filename, raw_ext) {
         audioData[cur] ^= mask[cur % 0x20];
 
 
-    const ext = DetectAudioExt(audioData, "mp3");
+    const ext = SniffAudioExt(audioData);
     const mime = AudioMimeType[ext];
     let musicBlob = new Blob([audioData], {type: mime});
 

src/decrypt/ncm.js

@@ -1,3 +1,5 @@
+import {BytesHasPrefix, GetArrayBuffer, SniffAudioExt} from "@/decrypt/utils.ts";
+
 const CryptoJS = require("crypto-js");
 const MetaFlac = require('metaflac-js');
 const CORE_KEY = CryptoJS.enc.Hex.parse("687a4852416d736f356b496e62617857");
@@ -8,19 +10,16 @@ import jimp from 'jimp';
 
 import {
     AudioMimeType,
-    DetectAudioExt,
-    GetArrayBuffer,
     GetFileInfo,
     GetWebImage,
-    IsBytesEqual,
     WriteMp3Meta
 } from "./util"
 
-export async function Decrypt(file, raw_filename, raw_ext) {
+export async function Decrypt(file, raw_filename, _) {
     const fileBuffer = await GetArrayBuffer(file);
     const dataView = new DataView(fileBuffer);
 
-    if (!IsBytesEqual(MagicHeader, new Uint8Array(fileBuffer, 0, 8)))
+    if (!BytesHasPrefix(new Uint8Array(fileBuffer, 0, 8), MagicHeader))
         return {status: false, message: "此ncm文件已损坏"};
 
     const keyDataObj = getKeyData(dataView, fileBuffer, 10);
@@ -41,7 +40,7 @@ export async function Decrypt(file, raw_filename, raw_ext) {
     const info = GetFileInfo(artists.join("; "), musicMeta.musicName, raw_filename);
     if (artists.length === 0) artists.push(info.artist);
 
-    if (musicMeta.format === undefined) musicMeta.format = DetectAudioExt(audioData, "mp3");
+    if (musicMeta.format === undefined) musicMeta.format = SniffAudioExt(audioData);
     console.log(musicMeta)
 
     const imageInfo = await GetWebImage(musicMeta.albumPic);

src/decrypt/qmc.js

@@ -1,7 +1,5 @@
 import {
     AudioMimeType,
-    DetectAudioExt,
-    GetArrayBuffer,
     GetFileInfo,
     GetMetaCoverURL,
     GetWebImage,
@@ -10,6 +8,7 @@ import {
 } from "./util";
 import {QmcMaskCreate58, QmcMaskDetectMflac, QmcMaskDetectMgg, QmcMaskGetDefault} from "./qmcMask";
 import {fromByteArray as Base64Encode, toByteArray as Base64Decode} from 'base64-js'
+import {GetArrayBuffer, SniffAudioExt} from "@/decrypt/utils.ts";
 
 const MetaFlac = require('metaflac-js');
 
@@ -58,7 +57,7 @@ export async function Decrypt(file, raw_filename, raw_ext) {
     }
     let musicDecoded = seed.Decrypt(audioData);
 
-    const ext = DetectAudioExt(musicDecoded, handler.ext);
+    const ext = SniffAudioExt(musicDecoded, handler.ext);
     const mime = AudioMimeType[ext];
 
     let musicBlob = new Blob([musicDecoded], {type: mime});

src/decrypt/qmcMask.js

@@ -1,4 +1,4 @@
-import {FLAC_HEADER, IsBytesEqual, OGG_HEADER} from "./util"
+import {BytesEquals, BytesHasPrefix, FLAC_HEADER, OGG_HEADER} from "@/decrypt/utils.ts";
 
 const QMOggPublicHeader1 = [
     0x4f, 0x67, 0x67, 0x53, 0x00, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff,
@@ -84,7 +84,7 @@ class QmcMask {
             }
             let rowLeft = this.Matrix128.slice(lenStart + 1, lenStart + 8);
             let rowRight = this.Matrix128.slice(lenRightStart + 1, lenRightStart + 8).reverse();
-            if (IsBytesEqual(rowLeft, rowRight)) {
+            if (BytesEquals(rowLeft, rowRight)) {
                 matrix58 = matrix58.concat(rowLeft);
             } else {
                 throw "decode mask-128 to mask-58 failed"
@@ -151,7 +151,9 @@ export function QmcMaskDetectMflac(data) {
     for (let block_idx = 0; block_idx < search_len; block_idx += 128) {
         try {
             mask = new QmcMask(data.slice(block_idx, block_idx + 128));
-            if (IsBytesEqual(FLAC_HEADER, mask.Decrypt(data.slice(0, FLAC_HEADER.length)))) break;
+            if (BytesHasPrefix(mask.Decrypt(data.slice(0, FLAC_HEADER.length)), FLAC_HEADER)) {
+                break;
+            }
         } catch (e) {
         }
     }
@@ -186,8 +188,7 @@ export function QmcMaskDetectMgg(data) {
         return;
     }
     const mask = new QmcMask(matrix);
-    let dx = mask.Decrypt(data.slice(0, OGG_HEADER.length));
+    if (!BytesHasPrefix(mask.Decrypt(data.slice(0, OGG_HEADER.length)), OGG_HEADER)) {
-    if (!IsBytesEqual(OGG_HEADER, dx)) {
         return;
     }
 

src/decrypt/raw.js

@@ -1,11 +1,13 @@
+import {GetArrayBuffer, SniffAudioExt} from "@/decrypt/utils.ts";
+
 const musicMetadata = require("music-metadata-browser");
-import {AudioMimeType, DetectAudioExt, GetArrayBuffer, GetMetaCoverURL, GetFileInfo} from "./util";
+import {AudioMimeType, GetMetaCoverURL, GetFileInfo} from "./util";
 
 export async function Decrypt(file, raw_filename, raw_ext, detect = true) {
     let ext = raw_ext;
     if (detect) {
         const buffer = new Uint8Array(await GetArrayBuffer(file));
-        ext = DetectAudioExt(buffer, raw_ext);
+        ext = SniffAudioExt(buffer, raw_ext);
         if (ext !== raw_ext) file = new Blob([buffer], {type: AudioMimeType[ext]})
     }
     const tag = await musicMetadata.parseBlob(file);

src/decrypt/tm.js

@@ -1,11 +1,10 @@
 import {Decrypt as RawDecrypt} from "./raw";
-import {GetArrayBuffer} from "./util";
+import {GetArrayBuffer} from "@/decrypt/utils.ts";
 
 const TM_HEADER = [0x00, 0x00, 0x00, 0x20, 0x66, 0x74, 0x79, 0x70];
 
 export async function Decrypt(file, raw_filename) {
-    const fileBuffer = await GetArrayBuffer(file);
+    const audioData = new Uint8Array(await GetArrayBuffer(file));
-    const audioData = new Uint8Array(fileBuffer);
     for (let cur = 0; cur < 8; ++cur) {
         audioData[cur] = TM_HEADER[cur];
     }

src/decrypt/util.js

@@ -1,14 +1,5 @@
 const ID3Writer = require("browser-id3-writer");
-const musicMetadata = require("music-metadata-browser");
+
-export const FLAC_HEADER = [0x66, 0x4C, 0x61, 0x43];
-export const MP3_HEADER = [0x49, 0x44, 0x33];
-export const OGG_HEADER = [0x4F, 0x67, 0x67, 0x53];
-export const M4A_HEADER = [0x66, 0x74, 0x79, 0x70];
-export const WMA_HEADER = [
-    0x30, 0x26, 0xB2, 0x75, 0x8E, 0x66, 0xCF, 0x11,
-    0xA6, 0xD9, 0x00, 0xAA, 0x00, 0x62, 0xCE, 0x6C,
-]
-export const WAV_HEADER = [0x52, 0x49, 0x46, 0x46]
 export const AudioMimeType = {
     mp3: "audio/mpeg",
     flac: "audio/flac",
@@ -19,16 +10,6 @@ export const AudioMimeType = {
 };
 export const IXAREA_API_ENDPOINT = "https://stats.ixarea.com/apis"
 
-// Also a new draft API: blob.arrayBuffer()
-export async function GetArrayBuffer(blobObject) {
-    return await new Promise(resolve => {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            resolve(e.target.result);
-        };
-        reader.readAsArrayBuffer(blobObject);
-    });
-}
 
 export function GetFileInfo(artist, title, filenameNoExt, separator = "-") {
     let newArtist = "", newTitle = "";
@@ -57,26 +38,6 @@ export function GetMetaCoverURL(metadata) {
     return pic_url;
 }
 
-export function IsBytesEqual(first, second) {
-    // if want wholly check, should length first>=second
-    return first.every((val, idx) => {
-        return val === second[idx];
-    })
-}
-
-/**
- * @return {string}
- */
-export function DetectAudioExt(data, fallbackExt) {
-    if (IsBytesEqual(MP3_HEADER, data.slice(0, MP3_HEADER.length))) return "mp3";
-    if (IsBytesEqual(FLAC_HEADER, data.slice(0, FLAC_HEADER.length))) return "flac";
-    if (IsBytesEqual(OGG_HEADER, data.slice(0, OGG_HEADER.length))) return "ogg";
-    if (IsBytesEqual(M4A_HEADER, data.slice(4, 4 + M4A_HEADER.length))) return "m4a";
-    if (IsBytesEqual(WMA_HEADER, data.slice(0, WMA_HEADER.length))) return "wma";
-    if (IsBytesEqual(WAV_HEADER, data.slice(0, WAV_HEADER.length))) return "wav";
-    return fallbackExt;
-}
-
 
 export async function GetWebImage(pic_url) {
     try {

src/decrypt/utils.ts

@@ -0,0 +1,52 @@
+export const FLAC_HEADER = [0x66, 0x4C, 0x61, 0x43];
+export const MP3_HEADER = [0x49, 0x44, 0x33];
+export const OGG_HEADER = [0x4F, 0x67, 0x67, 0x53];
+export const M4A_HEADER = [0x66, 0x74, 0x79, 0x70];
+export const WMA_HEADER = [
+    0x30, 0x26, 0xB2, 0x75, 0x8E, 0x66, 0xCF, 0x11,
+    0xA6, 0xD9, 0x00, 0xAA, 0x00, 0x62, 0xCE, 0x6C,
+]
+export const WAV_HEADER = [0x52, 0x49, 0x46, 0x46]
+export const AAC_HEADER = [0xFF, 0xF1]
+
+export function BytesHasPrefix(data: Uint8Array, prefix: number[]): boolean {
+    if (prefix.length > data.length) return false
+    return prefix.every((val, idx) => {
+        return val === data[idx];
+    })
+}
+
+export function BytesEquals(data: Uint8Array, another: Uint8Array): boolean {
+    if (another.length != data.length) return false
+    return data.every((val, idx) => {
+        return val === another[idx];
+    })
+}
+
+export function SniffAudioExt(data: Uint8Array, fallback_ext: string = "mp3"): string {
+    if (BytesHasPrefix(data, MP3_HEADER)) return ".mp3"
+    if (BytesHasPrefix(data, FLAC_HEADER)) return ".flac"
+    if (BytesHasPrefix(data, OGG_HEADER)) return ".ogg"
+    if (data.length >= 4 + M4A_HEADER.length &&
+        BytesHasPrefix(data.slice(4), M4A_HEADER)) return ".m4a"
+    if (BytesHasPrefix(data, WAV_HEADER)) return ".wav"
+    if (BytesHasPrefix(data, WMA_HEADER)) return ".wma"
+    if (BytesHasPrefix(data, AAC_HEADER)) return ".aac"
+    return fallback_ext;
+}
+
+export function GetArrayBuffer(obj: Blob): Promise<ArrayBuffer> {
+    if (!!obj.arrayBuffer) return obj.arrayBuffer()
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const rs = e.target?.result
+            if (!rs) {
+                reject("read file failed")
+            } else {
+                resolve(rs as ArrayBuffer)
+            }
+        };
+        reader.readAsArrayBuffer(obj);
+    });
+}

src/decrypt/xm.js

@@ -1,6 +1,7 @@
-import {AudioMimeType, GetArrayBuffer, GetFileInfo, GetMetaCoverURL, IsBytesEqual} from "./util";
+import {AudioMimeType, GetFileInfo, GetMetaCoverURL} from "./util";
 
 import {Decrypt as RawDecrypt} from "./raw";
+import {BytesHasPrefix, GetArrayBuffer} from "@/decrypt/utils.ts";
 
 const musicMetadata = require("music-metadata-browser");
 const MagicHeader = [0x69, 0x66, 0x6D, 0x74]
@@ -14,8 +15,7 @@ const FileTypeMap = {
 
 export async function Decrypt(file, raw_filename, raw_ext) {
     const oriData = new Uint8Array(await GetArrayBuffer(file));
-    if (!IsBytesEqual(MagicHeader, oriData.slice(0, 4)) ||
+    if (!BytesHasPrefix(oriData, MagicHeader) || !BytesHasPrefix(oriData.slice(8, 12), MagicHeader2)) {
-        !IsBytesEqual(MagicHeader2, oriData.slice(8, 12))) {
         if (raw_ext === "xm") {
             return {status: false, message: "此xm文件已损坏"}
         } else {

src/main.js → src/main.ts

@@ -41,7 +41,6 @@ Vue.use(Progress);
 Vue.prototype.$notify = Notification;
 
 Vue.config.productionTip = false;
-document.getElementById("loader-source").remove()
 new Vue({
     render: h => h(App),
 }).$mount('#app');

src/shims-tsx.d.ts

@@ -0,0 +1,17 @@
+import Vue, {VNode} from 'vue'
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {
+    }
+
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {
+    }
+
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}