build: minify final mjs

Reviewed-on: um/um-react#63

.drone.yml

@@ -0,0 +1,35 @@
+---
+kind: pipeline
+type: docker
+name: default
+
+steps:
+  - name: test & build
+    image: node:20.10.0-bookworm
+    commands:
+      # - git config --global --add safe.directory "/drone/src"
+      - corepack enable
+      - corepack prepare pnpm@latest --activate
+      - pnpm i --frozen-lockfile
+      - pnpm build
+    environment:
+      # 让 npm 使用淘宝源
+      npm_config_registry: https://registry.npmmirror.com
+
+  - name: publish
+    image: node:20.10.0-bookworm
+    environment:
+      DRONE_GITEA_SERVER: https://git.unlock-music.dev
+      GITEA_API_KEY:
+        from_secret: GITEA_API_KEY
+      NETLIFY_SITE_ID:
+        from_secret: NETLIFY_SITE_ID
+      NETLIFY_API_KEY:
+        from_secret: NETLIFY_API_KEY
+    commands:
+      - |
+        python3 -m zipfile -c um-react.zip dist/.
+        cp um-react.zip dist/release-"${DRONE_COMMIT_SHA}".zip
+        python3 -m zipfile -c um-react-site.zip dist/.
+      # - ./scripts/publish.sh
+      - ./scripts/deploy.sh

.editorconfig

@@ -11,5 +11,5 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[*.{js{x,on,},ts{x,}}]
+[*.{{c,m,}js{x,on,},ts{x,}}]
 indent_size = 2

.env

@@ -0,0 +1,4 @@
+# Example environment file for vite to use.
+# For more information, see: https://vitejs.dev/guide/env-and-mode.html
+
+ENABLE_PERF_LOG=0

.eslintignore

@@ -0,0 +1,3 @@
+dist/
+node_modules/
+coverage/

.eslintrc.cjs

@@ -14,5 +14,14 @@ module.exports = {
   plugins: ['react-refresh'],
   rules: {
     'react-refresh/only-export-components': 'warn',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        varsIgnorePattern: '^_',
+        argsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
   },
 };

.gitattributes

@@ -0,0 +1 @@
+*.mmkv binary

.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+coverage/
 dist
 dist-ssr
 *.local
@@ -22,3 +23,12 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Files created when running "drone exec" locally
+/.pnpm-store/
+/*.zip
+
+/um-react-wry-*
+/um-react*.exe
+
+/win64/

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm exec lint-staged

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm test

.npmrc

@@ -1,3 +1,3 @@
-use-node-version=18.16.0
-node-version=18.16.0
+use-node-version=20.10.0
+node-version=20.10.0
 engine-strict=true

.prettierignore

@@ -1,2 +1,5 @@
 dist/
 
+# Package manager
+yarn.lock
+pnpm-lock.yaml

.swcrc

@@ -1,31 +0,0 @@
-{
-    "jsc": {
-        "target": "es2020",
-        "parser": {
-            "syntax": "typescript",
-            "tsx": true,
-            "decorators": false,
-            "dynamicImport": false
-        },
-        "transform": {
-            "react": {
-                "pragma": "React.createElement",
-                "pragmaFrag": "React.Fragment",
-                "throwIfNamespace": true,
-                "development": false,
-                "useBuiltins": false,
-                "runtime": "automatic"
-            },
-            "hidden": {
-                "jest": true
-            }
-        }
-    },
-    "module": {
-        "type": "commonjs",
-        "strict": false,
-        "strictMode": true,
-        "lazy": false,
-        "noInterop": false
-    }
-}

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "editorconfig.editorconfig",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "christian-kohler.path-intellisense",
+    "txava.region-marker",
+    "foxundermoon.shell-format",
+    "jock.svg"
+  ]
+}

README.MD

@@ -1,22 +1,69 @@
-# Getting started
+# Unlock Music 音乐解锁 (React)
 
-前提: [安装 pnpm][install-pnpm]，推荐 `corepack` 方法。
+[![Build Status](https://ci.unlock-music.dev/api/badges/um/um-react/status.svg)](https://ci.unlock-music.dev/um/um-react)
 
-```sh
-pnpm i
-pnpm start
-```
+- 在浏览器中解锁加密的音乐文件。 Unlock encrypted music file in the browser.
+  - 查看[原基于 Vue 的 Unlock Music 项目][um-vue]
+- Unlock Music 项目是以学习和技术研究的初衷创建的，修改、再分发时请遵循[授权协议]。
+- Unlock Music 的 CLI 版本可以在 [unlock-music/cli] 找到，大批量转换建议使用 CLI 版本。
+- 我们新建了 Telegram 群组 [`@unlock_music_chat`] ，欢迎加入！
+- CI 自动构建已经部署，可以在 [Packages][um-react-packages] 下载。
+- [常见问题参考](./docs/faq_zh-hans.md)
 
-[install-pnpm]: https://pnpm.io/zh/installation
+[授权协议]: https://git.unlock-music.dev/um/um-react/src/branch/main/LICENSE
+[um-vue]: https://git.unlock-music.dev/um/web
+[unlock-music/cli]: https://git.unlock-music.dev/um/cli
+[`@unlock_music_chat`]: https://t.me/unlock_music_chat
+[um-react-packages]: https://git.unlock-music.dev/um/-/packages/generic/um-react/
 
-## 架构
+⚠️ 手机端浏览器支持有限，请使用最新版本的 Chrome 或 Firefox 官方浏览器。
+
+## 支持的格式
+
+- [x] QQ 音乐 QMCv1 (`.qmc3` / `.qmcflac` 等)
+- [x] QQ 音乐 QMCv2
+  - PC 客户端 (`.mflac` / `.mgg` 等) [^qm-key-pc]
+  - 安卓客户端 (`.mflac0` / `.mgg1` / `.mggl` 等) [^qm-key-android]
+  - iOS 客户端 (`.mgalaxy` 等) [^qm-key-ios]
+  - Mac 客户端 (`.mflach` 等) [^qm-key-mac]
+- [x] 网易云音乐 (`.ncm`)
+- [x] 虾米音乐 (`.xm`)
+- [x] 酷我音乐 (`.kwm`)
+- [x] 酷狗音乐 (`.kgm` / `.vpr`)
+- [x] 喜马拉雅 Android 端 (`.x2m` / `.x3m`)
+- [x] 咪咕音乐格式 (`.mg3d`)
+- [x] 蜻蜓 FM (`.qta`)
+- [ ] ~~<ruby>QQ 音乐海外版<rt>JOOX Music</rt></ruby> (`.ofl_en`)~~
+
+[^qm-key-pc]: PC 客户端仅支持 v19.43 或更低版本。
+[^qm-key-android]: 需要获取超级管理员权限后提取密钥数据库，并导入后使用。
+[^qm-key-ios]: 需要越狱获取密钥数据库，或对设备进行完整备份后提取密钥数据库，并导入后使用。
+[^qm-key-mac]: 需要导入密钥数据库。
+
+不支持的格式？请提交样本（加密文件）与客户端信息（或一并上传其安装包）到[仓库的问题追踪区][project-issues]。如果文件太大，请上传到不需要登入下载的网盘，如 [mega.nz](https://mega.nz)、[OneDrive](https://www.onedrive.com/) 等。
+
+如果遇到解密出错的情况，请一并携带错误信息并简单描述错误的重现过程。
+
+[project-issues]: https://git.unlock-music.dev/um/um-react/issues/new
+
+## 开发相关
+
+从源码运行或编译生产版本，请参考文档「[新手上路](./docs/getting-started.zh.md)」。
+
+### 面向 libparakeet SDK 开发
+
+⚠️ 如果只是进行前端方面的更改，你可以跳过该节。
+
+请参考文档「[面向 `libparakeet-js` 开发](./docs/develop-with-libparakeet.zh.md)」。
+
+### 架构
 
 - 浏览器主线程: 渲染界面，处理 UI 更新
 - Web Worker: 负责计算方面的内容，如内容解密。
 
 数据传输: 生成 blob url (`URL.createObjectURL`) 然后透过 `postMessage` 传递给线程，线程利用 `fetch` API 来获取文件信息。
 
-## 贡献代码
+### 贡献代码
 
 欢迎贡献代码。请确保：
 
@@ -26,54 +73,25 @@ pnpm start
 
 满足上述条件后发起 Pull Request，仓库管理员审阅后将合并到主分支。
 
-## 基于 libparakeet SDK 开发
+## 相关项目
 
-`libparakeet-js` 编译目前需要 Linux 环境，请参考[仓库说明][libparakeet-js-doc]。
+- [Unlock Music (Web)](https://git.unlock-music.dev/um/web) - 原始项目
+- [Unlock Music (Cli)](https://git.unlock-music.dev/um/cli) - 命令行批量处理版
+- [um-react (Electron 前端)](https://github.com/CarlGao4/um-react-electron) - 使用 Electron 框架封装的本地可执行文件。
+  - [GitHub 下载](https://github.com/CarlGao4/um-react-electron/releases/latest) | [仓库镜像](https://git.unlock-music.dev/CarlGao4/um-react-electron)
+- [um-react-wry](https://git.unlock-music.dev/um/um-react-wry) - 使用 WRY 框架封装的 Win64 单文件 (需要[安装 Edge WebView2 运行时][webview2_redist]，Win10+ 操作系统自带)
+  - [本地下载](https://git.unlock-music.dev/um/um-react/releases/latest) | 寻找文件名为 `um-react-win64-` 开头的附件
 
-该文档将假设这两个项目被放置在同级的目录下：
+[webview2_redist]: https://go.microsoft.com/fwlink/p/?LinkId=2124703
 
-```text
-~/Projects/um-projects
-    /um-react
-    /libparakeet-js
-```
-
-若为不同目录，你需要调整 `vite.config.ts` 的 `server.fs.allow` 区段并加入新的路径。
-
-[libparakeet-js-doc]: https://github.com/parakeet-rs/libparakeet-js/blob/main/README.MD
-
-### 初次构建
-
-- 进入上层目录 `cd ..`
-- 克隆 `libparakeet-js` 仓库 (目前需要 Linux 环境, Windows 下推荐使用 WSL2)
-  - `git clone --recurse-submodules https://github.com/parakeet-rs/libparakeet-js.git`
-- 进入目录 `cd libparakeet-js`
-- 如果需要更新 `submodule`:
-  - `git submodule update --init --recursive`
-- 运行 `./build.sh -j 4` 进行编译
-- 编译 `js-sdk`:
-  - 进入 `npm` 目录: `cd npm`
-  - 安装依赖: `pnpm i --frozen-lockfile`
-  - 构建: `pnpm build`
-
-### 做出更改
-
-做出更改后，参考上面的内容进行重新编译
-
-### 应用 SDK 更改
-
-将构建好的 SDK 直接嵌入到当前前端项目：
-
-```sh
-pnpm link ../libparakeet-js/npm
-```
-
-※ 建立 PR 时，请先提交 SDK PR 并确保你的更改已合并。
+有新的项目提交？欢迎[提交 issue][project-issues]，请带上项目名称和链接。
 
 ## TODO
 
-- [ ] #6 文件拖放 (利用 `react-dropzone`?)
-- [ ] 各类算法 [追踪 `crypto` 标签](https://git.unlock-music.dev/um/um-react/issues?labels=67)
-- [ ] #7 简易元数据编辑器
-- [ ] #8 添加单元测试
-- [ ] #2 解密内容探测 (解密过程)
+- 待定
+  - [ ] 各类算法 [追踪 `crypto` 标签](https://git.unlock-music.dev/um/um-react/issues?labels=67)
+- 完成
+  - [x] #7 ~~简易元数据编辑器~~ 放弃
+  - [x] #8 ~~添加单元测试~~ 框架加上了，以后慢慢添加更多测试即可。
+  - [x] #2 解密内容探测 (解密过程)
+  - [x] #6 文件拖放 (利用 `react-dropzone`?)

docs/adb_dump.md

@@ -0,0 +1,9 @@
+# 利用 ADB 访问安卓私有数据
+
+```sh
+APP_ID="com.tencent.qqmusic" # QQ 音乐
+APP_ID="cn.kuwo.player" # 酷我
+
+adb shell su -c "tar c '/data/data/${APP_ID}/' | base64" \
+    | base64 -d | pv | tar -x --strip-components 2
+```

docs/develop-with-libparakeet.zh.md

@@ -0,0 +1,50 @@
+# 面向 `libparakeet-js` 开发
+
+⚠️ 如果只是进行前端方面的更改，你可以跳过该文档。
+
+`libparakeet-js` 编译目前需要 Linux 环境，请参考[仓库说明][libparakeet-js-doc]。
+
+该文档将假设这两个项目被放置在同级的目录下：
+
+```text
+~/Projects/um-projects
+    /um-react
+    /libparakeet-js
+```
+
+若为不同目录，你需要调整 `LIB_PARAKEET_JS_DIR` 环境变量到仓库目录，然后再启动 vite 项目。
+
+[libparakeet-js-doc]: https://github.com/parakeet-rs/libparakeet-js/blob/main/README.MD
+
+## 初次构建
+
+- 进入上层目录：`cd ..`
+- 克隆 `libparakeet-js` 仓库 (目前需要 Linux 环境, Windows 下推荐使用 WSL2)
+  - `git clone --recurse-submodules https://github.com/parakeet-rs/libparakeet-js.git`
+- 进入 SDK 目录：`cd libparakeet-js`
+- 如果需要更新 `submodule`：`git submodule update --init --recursive`
+- 构建所有代码：`make all`
+
+如果需要手动控制构建过程，你也可以：
+
+- 运行 `./build.sh -j 4` 进行 C++ 到 WebAssembly 编译过程
+  - 此处的 `4` 是并行编译数量，该值通常略小于 CPU 核心数。
+  - 若是不指定并行数量，则使用当前核心数。
+- 编译 `js-sdk`：
+  - 进入 `npm` 目录：`cd npm`
+  - 安装依赖：`pnpm i --frozen-lockfile`
+  - 构建：`pnpm build`
+
+## 做出更改
+
+做出更改后，参考上面的内容进行重新编译。
+
+## 应用 SDK 更改
+
+将构建好的 SDK 直接嵌入到当前前端项目：
+
+```sh
+pnpm link ../libparakeet-js/npm
+```
+
+※ 建立 PR 时，请先提交 SDK PR 并确保你的 SDK 更改已合并。

docs/faq_zh-hans.md

@@ -0,0 +1,105 @@
+# 常见问题解答
+
+## QQ 音乐
+
+### 解锁失败
+
+#### 1、请检查您的文件。
+
+尝试用下载音乐的设备播放一次看看，如果 QQ 音乐都没法播放，那解锁肯定会受到影响哦。
+
+#### 2、检查您的平台。
+
+日前，<mark>仅 Windows 客户端 v19.43 或以下版本</mark>下载的歌曲无需密钥，其余平台的官方正式版本均需要提取密钥。
+
+> iOS 用户提取歌曲困难，建议换用电脑操作；Android 用户提取密钥需要 root，也建议用电脑操作。
+
+> 重复下载同一首的歌曲**不重复扣下载配额**，但是*同一首歌的两个版本会重复扣下载配额*，请仔细分辨。
+
+提取密钥教程请访问[新版解锁网站](https://um-react.netlify.app/)，前往网站内的设置 →“添加一条密钥”旁的<mark>**下拉按钮**</mark>→ 从文件导入密钥…→ 选择您对应的平台查看具体教程。
+
+> 如果仍无法理解，可参考文末的图片操作
+
+## 酷我音乐
+
+### 解锁失败
+
+酷我音乐的新版加密需要导入密钥。
+
+#### 1、请检查您的文件。
+
+尝试用下载音乐的设备播放一次看看，如果酷我音乐都没法播放，那解锁肯定会受到影响哦。
+
+#### 2、检查您的平台。
+
+日前，<mark>仅手机客户端</mark>下载的歌曲**至臻全景声**及**至臻母带**为新版加密，手机平台的其他音质暂时不需要提取密钥，PC 平台暂未推出使用新版加密的音质。
+
+※ 已知部分第三方修改版会破坏密钥写出功能，导致无法导入密钥。请使用官方版本。
+
+> Android 用户提取密钥需要 root，或者注入文件提供器。
+
+提取密钥教程请访问[新版解锁网站](https://um-react.netlify.app/)，前往网站内的设置 →<mark>切换密钥为 KWMv2 密钥</mark>→“添加一条密钥”旁的<mark>**下拉按钮**</mark>→ 从文件导入密钥…→ 选择您对应的平台查看具体教程。
+
+> 图片教程请参考 QQ 音乐（在文末），酷我音乐仅仅是需要切换一下密钥类型。
+
+## 网易云音乐
+
+### 解锁失败
+
+您大概率正在使用 Windows 平台的网易云音乐 3.0 测试版。该版本对歌曲的信息新增了某些字段，导致旧版解锁识别错误。您可以找 1.10.5 版本的旧解锁网站，或者直接换[新版解锁网站](https://um-react.netlify.app/)。
+
+> [旧解锁网站 Demo](https://demo.unlock-music.dev/)拥有者暂时联系不上，所以暂时无法更新。
+
+## 其他问题
+
+### 新版解锁网站解锁的歌曲没有封面
+
+目前新版没有做歌曲信息匹配与编辑，所以歌曲如果自己没有写入歌曲信息，解出来就是没有的。
+
+### 安卓 root 相关
+
+对安卓设备获取 root 特权通常会破坏系统的完整性并导致部分功能无法使用。
+例如部分厂商的安卓设备会在解锁后丧失保修资格，或导致无法使用 NFC 移动支付功能等限制。
+
+如果希望不破坏系统完整性，你可以考虑使用模拟器。
+
+※ **注意**：根据应用厂商的风控策略，使用模拟器登录的账号**有可能会被封锁**；使用前请自行评估风险。
+
+目前常见的带有 root 特权支持的的安卓模拟器方案，分别是雷电模拟器（※ 官方版有内置广告）和微软在 Windows 11 开始支援的适用于 Android™ 的 Windows 子系统 (WSA)。
+
+- WSA 可以参考 [MagiskOnWSALocal](https://github.com/LSPosed/MagiskOnWSALocal) 的说明操作。
+- 雷电模拟器可以在「模拟器设置」 → 「其他设置」中启用 root 特权。
+  ![雷电模拟器 其他设置](../src/faq/assets/ld_settings_misc.webp)
+
+### Via 等浏览器无法正常解密/下载
+
+⚠️ 手机端浏览器支持有限，请使用最新版本的 Chrome 或 Firefox 官方浏览器。
+
+已知有问题的浏览器：
+
+- Via 浏览器
+- 夸克浏览器
+- UC 浏览器
+
+可能会遇到的问题包括：
+
+- 网页白屏
+- 无法下载解密后内容
+- 下载的文件名错误
+
+### 新版解锁网站没有批量下载
+
+目前没有做。抱歉。
+
+## 仍有问题？
+
+欢迎进入[Telegram 交流群](https://t.me/unlock_music_chat)，一起探讨。
+
+> QQ 音乐导入密钥的图片教程
+
+1. 选择【设定】
+   <br/>![选择【设定】](./assets/faq_1_home.webp)
+2. 点击下拉菜单，选择【从文件导入密钥…】
+   <br/>![点击下拉菜单，选择【从文件导入密钥…】](./assets/faq_2_import.webp)
+3. 选择对应的客户端并查阅说明
+   <br/>![选择对应的客户端并查阅说明](./assets/faq_3_instructions.webp)

docs/getting-started.zh.md

@@ -0,0 +1,63 @@
+# 新手上路
+
+该文档描述了如何本地运行或编译生产版本的「Unlock Music 音乐解锁」。
+
+## 安装依赖
+
+- 安装 Node v16.17 或更高，推荐当前最新的 Node LTS 版本。
+- 安装/激活 `pnpm` [^1]：`corepack prepare pnpm@latest --activate`
+- 安装软件依赖：`pnpm i --frozen-lockfile`
+
+[^1]: 参考 pnpm 说明「[使用 Corepack 安装](https://pnpm.io/zh/installation#使用-corepack-安装)」。
+
+## 本地运行
+
+💡 你需要先完成「安装依赖」部分。
+
+```sh
+pnpm start
+```
+
+然后根据提示打开[项目运行页面][vite-dev-url]即可。
+
+[vite-dev-url]: http://localhost:5173/
+
+## 构建生产版本
+
+💡 你需要先完成「安装依赖」部分。
+
+```sh
+pnpm build
+```
+
+如果需要预览构建版本，运行 `pnpm preview` 然后打开[项目预览页面][vite-preview-url]即可。
+
+[vite-preview-url]: http://localhost:4173/
+
+## 打包 `.zip`
+
+建议在 Linux 环境下执行，可参考 `.drone.yml` CI 文件。
+
+1. 确保上述的构建步骤已完成。
+2. 确保 `python3` 已安装。
+3. 执行下述代码
+   ```sh
+   python3 -m zipfile -c um-react.zip dist/.
+   ```
+
+## 打包 win64 单文件
+
+利用 Windows 系统自带的 [Edge WebView2 组件](https://learn.microsoft.com/zh-cn/microsoft-edge/webview2/)
+和 [wry](https://github.com/tauri-apps/wry) 进行一个单文件的打包。
+
+大部分 Windows 10 或以上版本的操作系统已经集成了 WebView2 运行时。若无法正常启动，请[下载并安装 Edge WebView2 运行时](https://go.microsoft.com/fwlink/p/?LinkId=2124703)。
+
+其它系统兼容性未知。
+
+1. 确保你现在在 `linux-amd64` 环境下。
+2. 确保上述的 `um-react.zip` 构建已完成。
+3. 执行下述代码
+   ```sh
+   ./scripts/make-win64.sh
+   ```
+4. 等待提示 `[Build OK]` 即可。

index.html

@@ -1,9 +1,14 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-cmn-Hans-CN">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>音乐解锁 - Unlock Music</title>
+
+    <meta name="description" content="音乐解锁 - Unlock Music" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" href="/pwa-512x512.png" sizes="512x512" />
+    <meta name="theme-color" content="#4DBA87" />
   </head>
   <body>
     <main id="root"></main>

jest.config.cjs

@@ -1,31 +0,0 @@
-module.exports = {
-  roots: ['<rootDir>/src'],
-  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts', '!src/mocks/**'],
-  coveragePathIgnorePatterns: [],
-  setupFilesAfterEnv: ['./src/test-utils/setup-jest.ts'],
-  testEnvironment: 'jsdom',
-  modulePaths: ['<rootDir>/src'],
-  transform: {
-    '^.+\\.(ts|js|tsx|jsx)$': '@swc/jest',
-  },
-  transformIgnorePatterns: [
-    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
-    '^.+\\.module\\.(css|sass|scss)$',
-  ],
-  modulePaths: ['<rootDir>/src'],
-  moduleNameMapper: {
-    '^react-native$': 'react-native-web',
-    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
-  },
-  moduleFileExtensions: [
-    // Place tsx and ts to beginning as suggestion from Jest team
-    // https://jestjs.io/docs/configuration#modulefileextensions-arraystring
-    'tsx',
-    'ts',
-    'js',
-    'json',
-    'jsx',
-  ],
-  // watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
-  resetMocks: true,
-};

package.json

@@ -1,59 +1,91 @@
 {
   "name": "um-react",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.2.7",
   "type": "module",
   "scripts": {
     "start": "vite",
-    "build": "tsc -p tsconfig.prod.json && vite build",
+    "build": "tsc -p tsconfig.prod.json && vite build && pnpm build:finalize",
+    "build:finalize": "node scripts/write-version.mjs && node scripts/minify-mjs.mjs",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier -w .",
-    "test": "NODE_ENV=test jest",
-    "preview": "vite preview"
+    "test": "vitest run",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "preview": "vite preview",
+    "preview:coverage": "vite preview --outDir coverage --port 5175",
+    "prepare": "husky install"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.19",
-    "@chakra-ui/react": "^2.6.1",
-    "@emotion/react": "^11.11.0",
+    "@chakra-ui/anatomy": "^2.2.2",
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@jixun/libparakeet": "0.0.0-exp.16",
-    "@reduxjs/toolkit": "^1.9.5",
-    "framer-motion": "^10.12.8",
-    "nanoid": "^4.0.2",
+    "@jixun/libparakeet": "0.4.3",
+    "@reduxjs/toolkit": "^2.0.1",
+    "framer-motion": "^10.16.16",
+    "nanoid": "^5.0.4",
+    "radash": "^11.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-icons": "^4.12.0",
     "react-promise-suspense": "^0.3.4",
-    "react-redux": "^8.0.5"
+    "react-redux": "^9.0.4",
+    "react-syntax-highlighter": "^15.5.0",
+    "sass": "^1.69.5",
+    "sql.js": "^1.9.0"
   },
   "devDependencies": {
-    "@rollup/plugin-replace": "^5.0.2",
-    "@swc/core": "^1.3.58",
-    "@swc/jest": "^0.2.26",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.1",
-    "@types/node": "^20.1.1",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
-    "@vitejs/plugin-react": "^4.0.0",
-    "eslint": "^8.38.0",
-    "eslint-config-prettier": "^8.8.0",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-syntax-highlighter": "^15.5.11",
+    "@types/sql.js": "^1.4.9",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.1.0",
+    "@vitest/ui": "^1.1.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.2",
-    "vite-plugin-top-level-await": "^1.3.0",
-    "vite-plugin-wasm": "^3.2.2"
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "husky": "^8.0.3",
+    "jsdom": "^23.0.1",
+    "lint-staged": "^15.2.0",
+    "prettier": "^3.1.1",
+    "terser": "^5.27.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-pwa": "^0.17.4",
+    "vite-plugin-top-level-await": "^1.4.1",
+    "vite-plugin-wasm": "^3.3.0",
+    "vitest": "^1.1.0",
+    "workbox-window": "^7.0.0"
+  },
+  "lint-staged": {
+    "*": "prettier --write --ignore-unknown",
+    "*.{js,jsx,ts,tsx}": "eslint --fix --report-unused-disable-directives --max-warnings 0"
   },
   "prettier": {
     "singleQuote": true,
     "printWidth": 120,
     "tabWidth": 2
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "@rollup/plugin-terser@0.4.3": "patches/@rollup__plugin-terser@0.4.3.patch",
+      "sql.js@1.9.0": "patches/sql.js@1.9.0.patch"
+    },
+    "overrides": {
+      "rollup-plugin-terser": "npm:@rollup/plugin-terser@0.4.3",
+      "sourcemap-codec": "npm:@jridgewell/sourcemap-codec@1.4.15"
+    }
   }
-}
+}

patches/@rollup__plugin-terser@0.4.3.patch

@@ -0,0 +1,22 @@
+diff --git a/dist/cjs/index.js b/dist/cjs/index.js
+index 23639c70ccd5ebbc4a12c1ba277e5ac81cf30513..aba3318977523785d02f3b8aa6e667a1aa46bf5d 100644
+--- a/dist/cjs/index.js
++++ b/dist/cjs/index.js
+@@ -227,5 +227,5 @@ function terser(input = {}) {
+ runWorker();
+ 
+ exports.default = terser;
+-module.exports = Object.assign(exports.default, exports);
++module.exports = Object.assign(exports.default, exports, { terser });
+ //# sourceMappingURL=index.js.map
+diff --git a/dist/es/index.js b/dist/es/index.js
+index 7296e677e6b2b38df9522b196fee24feec996793..4ca9052dd439ed22ff92cc72a79824b85e229678 100644
+--- a/dist/es/index.js
++++ b/dist/es/index.js
+@@ -222,5 +222,5 @@ function terser(input = {}) {
+ 
+ runWorker();
+ 
+-export { terser as default };
++export { terser as default, terser };
+ //# sourceMappingURL=index.js.map

patches/sql.js@1.9.0.patch

@@ -0,0 +1,11 @@
+diff --git a/dist/sql-wasm.js b/dist/sql-wasm.js
+index d29af3624109025e59966cf25cb357111bb459de..1b028e3d91ec37108f775627f31f1134aec47476 100644
+--- a/dist/sql-wasm.js
++++ b/dist/sql-wasm.js
+@@ -190,3 +190,6 @@ else if (typeof define === 'function' && define['amd']) {
+ else if (typeof exports === 'object'){
+     exports["Module"] = initSqlJs;
+ }
++
++var module;
++export default initSqlJs;

public/.gitkeep

@@ -1 +0,0 @@
-# Keep this folder

scripts/deploy.sh

@@ -0,0 +1,110 @@
+#!/bin/bash -e
+
+BRANCH_NAME="$(git branch --show-current)"
+SCRIPTS_DIR="$(dirname "${BASH_SOURCE[0]}")"
+
+__netlify_upload() {
+    local branch="$BRANCH_NAME"
+    local production="$DEPLOY_PRODUCTION"
+    [[ "$BRANCH_NAME" = "main" ]] && production="true"
+    [[ -z "$production" ]] && production="false"
+
+    curl -sL \
+        -H "Content-Type: application/zip" \
+        -H "Authorization: Bearer ${NETLIFY_API_KEY}" \
+        --data-binary "@${1}" \
+        "https://api.netlify.com/api/v1/sites/${NETLIFY_SITE_ID}/deploys?branch=${branch}&production=${production}"
+}
+
+__netlify_get_deploy() {
+    local deploy_id="$1"
+    curl -sL \
+        -H "Authorization: Bearer ${NETLIFY_API_KEY}" \
+        "https://api.netlify.com/api/v1/deploys/${deploy_id}"
+}
+
+# Publish a deployment to main URL.
+__netlify_promote() {
+    local deploy_id="$1"
+    curl -sL \
+        -H "Authorization: Bearer ${NETLIFY_API_KEY}" \
+        -H "Content-Type: application/json" \
+        --data "{}" \
+        "https://api.netlify.com/api/v1/sites/${NETLIFY_SITE_ID}/deploys/${deploy_id}/restore"
+}
+
+__netlify_get_error() {
+    local error_message
+    error_message="$(json_get "$upload_resp" message)"
+    [[ "$error_message" = "null" ]] && error_message="$(json_get "$upload_resp" error_message)"
+    echo -n "$error_message"
+}
+
+json_get() {
+    local json_body="$1"
+    shift
+
+    echo -n "$json_body" | "${SCRIPTS_DIR}/read_json.mjs" "$@"
+}
+
+deploy_netlify() {
+    local upload_resp
+    upload_resp="$(__netlify_upload "$1")"
+
+    local error_message="$(__netlify_get_error "$upload_resp")"
+
+    if [[ "$error_message" != "null" ]]; then
+        echo "Deploy to netlify failed:"
+        echo "  * ${error_message}"
+        return 1
+    fi
+
+    local deploy_id="$(json_get "$upload_resp" id)"
+    local deploy_resp=""
+    local deploy_state=""
+    local retry_count=10
+    while [[ "$retry_count" -gt 0 ]]; do
+        deploy_resp="$(__netlify_get_deploy "$deploy_id")"
+        deploy_state="$(json_get "$deploy_resp" 'state')"
+        case "$deploy_state" in
+        ready)
+            echo 'Deploy to netlify OK!'
+            echo "  * main url:  $(json_get "$deploy_resp" 'ssl_url')"
+            echo "  * branch:    $(json_get "$deploy_resp" 'deploy_ssl_url')"
+            echo "  * permalink: $(json_get "$deploy_resp" 'links' 'permalink')"
+            break
+            ;;
+        error)
+            echo "Deploy to netlify failed:"
+            echo "  * $(json_get "$deploy_resp" 'error_message')"
+            return 1
+            ;;
+        *)
+            retry_count="$((retry_count - 1))"
+            sleep 3
+            ;;
+        esac
+    done
+
+    if [[ "$BRANCH_NAME" = "main" ]]; then
+        echo "Promoting latest main build..."
+        local promote_resp="$(__netlify_promote "$(json_get "$deploy_resp" 'id')")"
+        error_message="$(__netlify_get_error "$promote_resp")"
+
+        if [[ "$error_message" != "null" ]]; then
+            echo "Promote netlify deploy failed:"
+            echo "  * ${error_message}"
+            return 1
+        else
+            echo 'Deoployed to main url.'
+        fi
+    fi
+}
+
+# For deployment, we care a bit less
+if [[ -n "${NETLIFY_API_KEY}" && -n "${NETLIFY_SITE_ID}" ]]; then
+    echo "Deploy to netlify..."
+    deploy_netlify um-react-site.zip
+else
+    echo "skip netlify deployment."
+fi

scripts/make-win64.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+
+# sudo apt install -y jq zip
+
+pushd "$(dirname "${BASH_SOURCE[0]}")/../"
+
+WRY_VER="0.1.1"
+
+mkdir -p win64/{deps,dist}
+dl_file() {
+    local FILE="$1"
+    if [[ ! -f "win64/deps/$FILE" ]]; then
+        curl -fsL "https://um-react.app/files/${FILE}.gz" | gzip -d >"win64/deps/${FILE}"
+    fi
+}
+
+dl_file "um-react-wry-builder-${WRY_VER}-linux-amd64"
+dl_file "um-react-wry-stub-${WRY_VER}-win64.exe"
+chmod a+x win64/deps/um-react-wry-builder-${WRY_VER}-linux-amd64
+
+APP_VERSION="$(jq -r '.version' <package.json)"
+EXE_NAME="um-react-win64-${APP_VERSION}.exe"
+ZIP_NAME="um-react-win64-${APP_VERSION}.zip"
+"./win64/deps/um-react-wry-builder-${WRY_VER}-linux-amd64" \
+    -t "win64/deps/um-react-wry-stub-${WRY_VER}-win64.exe" \
+    -r um-react.zip \
+    -o "win64/dist/${EXE_NAME}"
+
+touch -d 1970-01-01T00:00:00Z "win64/dist/${EXE_NAME}"
+zip -9oX "win64/dist/${ZIP_NAME}" -- "win64/dist/${EXE_NAME}"
+echo "[Build OK] 'win64/dist/${ZIP_NAME}'."
+
+popd

scripts/minify-mjs.mjs

@@ -0,0 +1,19 @@
+import { minify } from 'terser';
+import { readFileSync, writeFileSync, readdirSync } from 'fs';
+
+for (const file of readdirSync('dist/assets')) {
+  if (!/\.(mjs|js)$/.test(file)) {
+    continue;
+  }
+
+  console.log(`minifying ${file}...`);
+  const isModule = /\.mjs$/.test(file);
+
+  const output = await minify(readFileSync(`dist/assets/${file}`, 'utf-8'), {
+    compress: true,
+    mangle: true,
+    module: isModule,
+  });
+
+  writeFileSync(`dist/assets/${file}`, output.code);
+}

scripts/publish.sh

@@ -0,0 +1,21 @@
+#!/bin/bash -e
+
+BRANCH_NAME="$(git branch --show-current)"
+
+publish_gitea() {
+    local ZIP_NAME="$1"
+    local URL="${DRONE_GITEA_SERVER}/api/packages/${DRONE_REPO_NAMESPACE}/generic/${DRONE_REPO_NAME}/${DRONE_BUILD_NUMBER}/${ZIP_NAME}"
+    sha256sum "${ZIP_NAME}"
+    curl -sLifu "um-release-bot:${GITEA_API_KEY}" -T "${ZIP_NAME}" "${URL}"
+    echo "Uploaded to: ${URL}"
+}
+
+# Only publish main branch by default
+if [[ "${BRANCH_NAME}" = "main" && -z "$DRONE_PULL_REQUEST" ]]; then
+    echo 'prepare to publish...'
+
+    if [[ -n "${GITEA_API_KEY}" ]]; then
+        echo "Publish to gitea..."
+        publish_gitea "um-react.zip"
+    fi
+fi

scripts/read_json.mjs

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+/* eslint-env node */
+
+import fs from 'fs';
+
+const data = JSON.parse(fs.readFileSync(0, 'utf-8').trim());
+
+let value = data;
+for (let i = 2; i < process.argv.length; i++) {
+  value = value[process.argv[i]] ?? null;
+}
+process.stdout.write(String(value), 'utf-8');

scripts/write-version.mjs

@@ -0,0 +1,14 @@
+/* eslint-env node */
+import { readFileSync, writeFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import { execSync } from 'node:child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const commitHash = execSync('git rev-parse --short HEAD').toString('utf-8').trim();
+
+const pkgJson = JSON.parse(readFileSync(__dirname + '/../package.json', 'utf-8'));
+const pkgVer = `${pkgJson.version ?? 'unknown'}-${commitHash ?? 'unknown'}` + '\n';
+writeFileSync(__dirname + '/../dist/version.txt', pkgVer, 'utf-8');

src/App.tsx

@@ -1,25 +0,0 @@
-import { Box, Center, Container } from '@chakra-ui/react';
-import { SelectFile } from './SelectFile';
-
-import { FileListing } from './features/file-listing/FileListing';
-import { Footer } from './Footer';
-import { WasmTest } from './WasmTest';
-
-function App() {
-  return (
-    <Box height="full" width="full" pt="4">
-      <Container maxW="container.large">
-        <Center>
-          <SelectFile />
-        </Center>
-        <Box mt="8">
-          <FileListing />
-        </Box>
-        {localStorage.__dev_test === '1' && <WasmTest />}
-        <Footer />
-      </Container>
-    </Box>
-  );
-}
-
-export default App;

src/Footer.tsx

@@ -1,41 +0,0 @@
-import { Center, Flex, Link, Text } from '@chakra-ui/react';
-import { Suspense } from 'react';
-import { SDKVersion } from './SDKVersion';
-
-export function Footer() {
-  return (
-    <Center height="footer.container">
-      <Center
-        height="footer.content"
-        fontSize="sm"
-        textAlign="center"
-        position="fixed"
-        bottom="0"
-        w="full"
-        bg="gray.100"
-        color="gray.800"
-        left="0"
-        flexDir="column"
-      >
-        <Flex as={Text}>
-          {'音乐解锁 (__APP_VERSION_SHORT__'}
-          <Suspense>
-            <SDKVersion />
-          </Suspense>
-          {') - 移除已购音乐的加密保护。'}
-        </Flex>
-        <Text>
-          {'Copyright © 2019 - 2023 '}
-          <Link href="https://git.unlock-music.dev/um" isExternal>
-            UnlockMusic 团队
-          </Link>
-          {' | 音乐解锁授权基于'}
-          <Link href="https://git.unlock-music.dev/um/um-react/src/branch/main/LICENSE" isExternal>
-            MIT许可协议
-          </Link>
-          。
-        </Text>
-      </Center>
-    </Center>
-  );
-}

src/SelectFile.tsx

@@ -1,69 +0,0 @@
-import React, { useId } from 'react';
-
-import { Box, Text } from '@chakra-ui/react';
-import { UnlockIcon } from '@chakra-ui/icons';
-import { useAppDispatch } from './hooks';
-import { addNewFile, processFile } from './features/file-listing/fileListingSlice';
-import { nanoid } from 'nanoid';
-
-export function SelectFile() {
-  const dispatch = useAppDispatch();
-  const id = useId();
-
-  const handleFileSelection = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) {
-      for (const file of e.target.files) {
-        const blobURI = URL.createObjectURL(file);
-        const fileName = file.name;
-        const fileId = 'file://' + nanoid();
-        // FIXME: this should be a single action/thunk that first adds the item, then updates it.
-        dispatch(
-          addNewFile({
-            id: fileId,
-            blobURI,
-            fileName,
-          })
-        );
-        dispatch(processFile({ fileId }));
-      }
-    }
-
-    e.target.value = '';
-  };
-
-  return (
-    <Box
-      as="label"
-      htmlFor={id}
-      w="100%"
-      maxW={480}
-      borderWidth="1px"
-      borderRadius="lg"
-      transitionDuration="0.5s"
-      p="6"
-      cursor="pointer"
-      display="flex"
-      flexDir="column"
-      alignItems="center"
-      _hover={{
-        borderColor: 'gray.400',
-        bg: 'gray.50',
-      }}
-    >
-      <Box pb={3}>
-        <UnlockIcon boxSize={8} />
-      </Box>
-      <Box textAlign="center">
-        {/* 将文件拖到此处，或 */}
-        <Text as="span" color="teal.400">
-          点我选择
-        </Text>
-        需要解密的文件
-        <input id={id} type="file" hidden multiple onChange={handleFileSelection} />
-        <Text fontSize="sm" opacity="50%">
-          仅在浏览器内对文件进行解锁，无需消耗流量
-        </Text>
-      </Box>
-    </Box>
-  );
-}

src/WasmTest.tsx

@@ -1,31 +0,0 @@
-import { loadLibParakeet, BlobSink, createArrayBufferReader } from '@jixun/libparakeet';
-
-function testWasm() {
-  loadLibParakeet().then(async (mod) => {
-    const data = new Uint8Array(0x2000);
-    for (let i = 0; i < data.byteLength; i++) {
-      data[i] = i & 0xff;
-    }
-    const src = createArrayBufferReader(data, mod);
-    const sink = new BlobSink(mod);
-    mod.rw_test(sink.getWriter(), src);
-    const collected = sink.collectBlob();
-    const copied = await collected.arrayBuffer();
-    const copiedView = new Uint8Array(copied);
-    for (let i = 0; i < copied.byteLength; i++) {
-      if (copiedView[i] !== (i & 0xff)) {
-        alert(`validate at pos ${i} failed`);
-        return;
-      }
-    }
-    alert('wasm validate ok!');
-  });
-}
-
-export function WasmTest() {
-  return (
-    <button onClick={testWasm} type="button">
-      Test WASM
-    </button>
-  );
-}

src/__test__/hello.test.tsx

@@ -1,6 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-test('hello', () => {
-  render(<div>hello</div>);
-  expect(screen.getByText('hello') as any).toBeInTheDocument();
-});

src/__tests__/sanity-check.test.tsx

@@ -0,0 +1,21 @@
+import { renderWithProviders, screen, waitFor } from '~/test-utils/test-helper';
+import { AppRoot } from '~/components/AppRoot';
+
+vi.mock('../decrypt-worker/client', () => {
+  return {
+    workerClientBus: {
+      request: vi.fn().mockResolvedValue('dummy'),
+    },
+  };
+});
+
+test('should be able to render App', async () => {
+  renderWithProviders(<AppRoot />);
+
+  // Should eventually load sdk version
+  await waitFor(() => screen.getByTestId('sdk-version'));
+
+  // Quick sanity check of known strings.
+  expect(screen.getByText(/在浏览器内对文件进行解锁/i)).toBeInTheDocument();
+  expect(screen.getByText(/UnlockMusic 团队/i)).toBeInTheDocument();
+});

src/assets/no-cover.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
+    <rect fill="#ddd" width="160" height="160" />
+    <text fill="#0007" font-family="sans-serif" font-size="24" font-weight="bold"
+        text-anchor="middle" letter-spacing="6"
+        dy="9.45" x="50%" y="50%"
+    >
+        暂无封面
+    </text>
+</svg>

src/components/AndroidADBPullInstruction/AndroidADBPullInstruction.tsx

@@ -0,0 +1,171 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Code,
+  Heading,
+  ListItem,
+  OrderedList,
+  Text,
+  chakra,
+} from '@chakra-ui/react';
+import { ExternalLinkIcon } from '@chakra-ui/icons';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import hljsStyleGitHub from 'react-syntax-highlighter/dist/esm/styles/hljs/github';
+
+import PowerShellAdbDumpCommandTemplate from './adb_dump.ps1?raw';
+import ShellAdbDumpCommandTemplate from './adb_dump.sh?raw';
+import { ExtLink } from '../ExtLink';
+
+const applyTemplate = (tpl: string, values: Record<string, unknown>) => {
+  return tpl.replace(/\{\{\s*(\w+)\s*\}\}/g, (_, key) => (Object.hasOwn(values, key) ? String(values[key]) : '<nil>'));
+};
+
+export interface AndroidADBPullInstructionProps {
+  dir: string;
+  file: string;
+}
+
+export function AndroidADBPullInstruction({ dir, file }: AndroidADBPullInstructionProps) {
+  const psAdbDumpCommand = applyTemplate(PowerShellAdbDumpCommandTemplate, { dir, file });
+  const shAdbDumpCommand = applyTemplate(ShellAdbDumpCommandTemplate, { dir, file });
+
+  return (
+    <>
+      <Text>
+        你需要
+        <ruby>
+          超级管理员
+          <rp> (</rp>
+          <rt>
+            <code>root</code>
+          </rt>
+          <rp>)</rp>
+        </ruby>
+        访问权限来访问安卓应用的私有数据。
+      </Text>
+      <Text>
+        ⚠️ 请注意，获取管理员权限通常意味着你的安卓设备
+        <chakra.span color="red.400">将失去保修资格</chakra.span>。
+      </Text>
+
+      <Accordion allowToggle mt="2">
+        <AccordionItem>
+          <Heading as="h3" size="md">
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                在安卓手机端操作
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </Heading>
+          <AccordionPanel pb={4}>
+            <OrderedList>
+              <ListItem>
+                <Text>
+                  启动具有 <Code>root</Code> 特权的文件浏览器
+                </Text>
+              </ListItem>
+              <ListItem>
+                <Text>
+                  访问 <Code>{dir}/</Code> 目录。
+                </Text>
+              </ListItem>
+              <ListItem>
+                <Text>
+                  将文件 <Code>{file}</Code> 复制到浏览器可访问的目录。
+                  <br />
+                  （例如下载目录）
+                </Text>
+              </ListItem>
+              <ListItem>
+                <Text>提交该数据库文件。</Text>
+              </ListItem>
+            </OrderedList>
+          </AccordionPanel>
+        </AccordionItem>
+
+        <AccordionItem>
+          <Heading as="h3" size="md">
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                在 PC 端操作（ADB / PowerShell）
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </Heading>
+          <AccordionPanel pb={4}>
+            <OrderedList>
+              <ListItem>
+                <Text>
+                  确保 <Code>adb</Code> 命令可用。
+                </Text>
+                <Text>
+                  💡 如果没有，可以
+                  <ExtLink href="https://scoop.sh/#/apps?q=adb">
+                    使用 Scoop 安装 <ExternalLinkIcon />
+                  </ExtLink>
+                  。
+                </Text>
+              </ListItem>
+              <ListItem>
+                <Text>启动终端并进入 PowerShell 7 环境。</Text>
+              </ListItem>
+              <ListItem>
+                <Text>将安卓设备连接到电脑，并允许调试。</Text>
+              </ListItem>
+              <ListItem>
+                <Text>粘贴执行下述代码。若设备提示「超级用户请求」请允许：</Text>
+                <SyntaxHighlighter language="ps1" style={hljsStyleGitHub}>
+                  {psAdbDumpCommand}
+                </SyntaxHighlighter>
+              </ListItem>
+              <ListItem>
+                <Text>
+                  提交当前目录下的 <Code>{file}</Code> 文件。
+                </Text>
+              </ListItem>
+            </OrderedList>
+          </AccordionPanel>
+        </AccordionItem>
+
+        <AccordionItem>
+          <Heading as="h3" size="md">
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                在 Linux / Mac 系统下操作（ADB / Shell）
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </Heading>
+          <AccordionPanel pb={4}>
+            <OrderedList>
+              <ListItem>
+                <Text>
+                  确保 <Code>adb</Code> 命令可用。
+                </Text>
+              </ListItem>
+              <ListItem>
+                <Text>将安卓设备连接到电脑，并允许调试。</Text>
+              </ListItem>
+              <ListItem>
+                <Text>粘贴执行下述代码。若设备提示「超级用户请求」请允许：</Text>
+                <SyntaxHighlighter language="bash" style={hljsStyleGitHub}>
+                  {shAdbDumpCommand}
+                </SyntaxHighlighter>
+              </ListItem>
+              <ListItem>
+                <Text>
+                  提交当前目录下的 <Code>{file}</Code> 文件。
+                </Text>
+              </ListItem>
+            </OrderedList>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </>
+  );
+}

src/components/AndroidADBPullInstruction/adb_dump.ps1

@@ -0,0 +1,14 @@
+try {
+  $gz_b64 = adb shell su -c "cat '{{ dir }}/{{ file }}' | gzip | base64" | Out-String
+  $bStream = New-Object System.IO.MemoryStream(,[System.Convert]::FromBase64String($gz_b64))
+  $decoded = New-Object System.IO.Compression.GzipStream($bStream, [System.IO.Compression.CompressionMode]::Decompress)
+  $outFile = New-Object System.IO.FileStream("${PWD}\{{ file }}", [System.IO.FileMode]::Create, [System.IO.FileAccess]::Write)
+  $decoded.CopyTo($outFile)
+} catch {
+  Write-Host "遇到错误:"
+  Write-Host $_
+} finally {
+  if ($outFile -ne $null) { $outFile.Dispose() }
+  if ($decoded -ne $null) { $decoded.Dispose() }
+  if ($bStream -ne $null) { $bStream.Dispose() }
+}

src/components/AndroidADBPullInstruction/adb_dump.sh

@@ -0,0 +1,2 @@
+adb shell su -c "cat '{{ dir }}/{{ file }}' | gzip | base64" \
+    | base64 -d | gzip -d >'{{ file }}'

src/components/AppRoot.tsx

@@ -0,0 +1,57 @@
+import { useEffect } from 'react';
+import { MdSettings, MdHome, MdQuestionAnswer } from 'react-icons/md';
+import { ChakraProvider, Tabs, TabList, TabPanels, Tab, TabPanel, Icon, chakra } from '@chakra-ui/react';
+
+import { MainTab } from '~/tabs/MainTab';
+import { SettingsTab } from '~/tabs/SettingsTab';
+
+import { Provider } from 'react-redux';
+import { theme } from '~/theme';
+import { persistSettings } from '~/features/settings/persistSettings';
+import { setupStore } from '~/store';
+import { Footer } from '~/components/Footer';
+import { FaqTab } from '~/tabs/FaqTab';
+
+// Private to this file only.
+const store = setupStore();
+
+export function AppRoot() {
+  useEffect(() => persistSettings(store), []);
+
+  return (
+    <ChakraProvider theme={theme}>
+      <Provider store={store}>
+        <Tabs flex={1} minH={0} display="flex" flexDir="column">
+          <TabList justifyContent="center">
+            <Tab>
+              <Icon as={MdHome} mr="1" />
+              <chakra.span>应用</chakra.span>
+            </Tab>
+            <Tab>
+              <Icon as={MdSettings} mr="1" />
+              <chakra.span>设置</chakra.span>
+            </Tab>
+            <Tab>
+              <Icon as={MdQuestionAnswer} mr="1" />
+              <chakra.span>答疑</chakra.span>
+            </Tab>
+          </TabList>
+
+          <TabPanels overflow="auto" minW={0} flexDir="column" flex={1} display="flex">
+            <TabPanel>
+              <MainTab />
+            </TabPanel>
+            <TabPanel flex={1} display="flex">
+              <SettingsTab />
+            </TabPanel>
+            <TabPanel>
+              <FaqTab />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+
+        <Footer />
+      </Provider>
+    </ChakraProvider>
+  );
+}

src/components/CurrentYear.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+// Update every half hour
+const TIMER_UPDATE_INTERVAL = 30 * 60 * 1000;
+
+const getCurrentYear = () => new Date().getFullYear();
+
+export function CurrentYear() {
+  const [year, setYear] = useState(getCurrentYear);
+
+  useEffect(() => {
+    const updateTime = () => setYear(getCurrentYear);
+    updateTime();
+
+    const timer = setInterval(updateTime, TIMER_UPDATE_INTERVAL);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return <>{year}</>;
+}

src/components/ExtLink.tsx

@@ -0,0 +1,12 @@
+import type { AnchorHTMLAttributes } from 'react';
+import { ExternalLinkIcon } from '@chakra-ui/icons';
+import { Link } from '@chakra-ui/react';
+
+export function ExtLink({ children, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return (
+    <Link isExternal {...props} rel="noreferrer noopener nofollow">
+      {children}
+      <ExternalLinkIcon />
+    </Link>
+  );
+}

src/components/FileInput.tsx

@@ -0,0 +1,43 @@
+import { useDropzone } from 'react-dropzone';
+import { Box } from '@chakra-ui/react';
+
+export interface FileInputProps {
+  onReceiveFiles: (files: File[]) => void;
+  multiple?: boolean;
+  children: React.ReactNode;
+}
+
+export function FileInput({ children, onReceiveFiles }: FileInputProps) {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    multiple: true,
+    onDropAccepted: onReceiveFiles,
+  });
+
+  return (
+    <Box
+      {...getRootProps()}
+      w="100%"
+      maxW={480}
+      borderWidth="1px"
+      borderRadius="lg"
+      transitionDuration="0.5s"
+      p="6"
+      cursor="pointer"
+      display="flex"
+      flexDir="column"
+      alignItems="center"
+      _hover={{
+        borderColor: 'gray.400',
+        bg: 'gray.50',
+      }}
+      {...(isDragActive && {
+        bg: 'blue.50',
+        borderColor: 'blue.700',
+      })}
+    >
+      <input {...getInputProps()} />
+
+      {children}
+    </Box>
+  );
+}

src/components/FilePathBlock.tsx

@@ -0,0 +1,10 @@
+import { Code, Text } from '@chakra-ui/react';
+import React from 'react';
+
+export function FilePathBlock({ children }: { children: React.ReactNode }) {
+  return (
+    <Text as="pre" whiteSpace="pre-wrap" wordBreak="break-all">
+      <Code>{children}</Code>
+    </Text>
+  );
+}

src/components/Footer.tsx

@@ -0,0 +1,45 @@
+import { Center, Flex, Link, Text } from '@chakra-ui/react';
+import { Suspense } from 'react';
+import { SDKVersion } from './SDKVersion';
+import { CurrentYear } from './CurrentYear';
+
+export function Footer() {
+  return (
+    <Center
+      fontSize="sm"
+      textAlign="center"
+      bottom="0"
+      w="full"
+      pt="3"
+      pb="3"
+      borderTop="1px solid"
+      borderColor="gray.300"
+      bg="gray.100"
+      color="gray.800"
+      flexDir="column"
+      flexShrink={0}
+    >
+      <Flex as={Text}>
+        <Link href="https://git.unlock-music.dev/um/um-react" isExternal>
+          音乐解锁
+        </Link>
+        {' (__APP_VERSION_SHORT__'}
+        <Suspense>
+          <SDKVersion />
+        </Suspense>
+        {') - 移除已购音乐的加密保护。'}
+      </Flex>
+      <Text>
+        {'© 2019 - '}
+        <CurrentYear />{' '}
+        <Link href="https://git.unlock-music.dev/um" isExternal>
+          UnlockMusic 团队
+        </Link>
+        {' | '}
+        <Link href="https://git.unlock-music.dev/um/um-react/src/branch/main/LICENSE" isExternal>
+          使用 MIT 授权协议
+        </Link>
+      </Text>
+    </Center>
+  );
+}

src/components/HelpText/Header3.tsx

@@ -0,0 +1,26 @@
+import { Heading } from '@chakra-ui/react';
+import React from 'react';
+
+export interface Header3Props {
+  children: React.ReactNode;
+  id?: string;
+  className?: string;
+}
+
+export function Header3({ children, className, id }: Header3Props) {
+  return (
+    <Heading
+      as="h3"
+      id={id}
+      className={className}
+      pt={3}
+      pb={1}
+      borderBottom={'1px solid'}
+      borderColor="gray.300"
+      color="gray.800"
+      size="lg"
+    >
+      {children}
+    </Heading>
+  );
+}

src/components/HelpText/Header4.tsx

@@ -0,0 +1,16 @@
+import { Heading } from '@chakra-ui/react';
+import React from 'react';
+
+export interface Header4Props {
+  children: React.ReactNode;
+  id?: string;
+  className?: string;
+}
+
+export function Header4({ children, className, id }: Header4Props) {
+  return (
+    <Heading as="h4" id={id} className={className} pt={3} pb={1} color="gray.700" size="md">
+      {children}
+    </Heading>
+  );
+}

src/components/HelpText/HiWord.tsx

@@ -0,0 +1,9 @@
+import { Mark } from '@chakra-ui/react';
+
+export function HiWord({ children }: { children: React.ReactNode }) {
+  return (
+    <Mark bg="orange.100" borderRadius={5} px={2} mx={1}>
+      {children}
+    </Mark>
+  );
+}

src/components/HelpText/VQuote.tsx

@@ -0,0 +1,13 @@
+import { chakra, css } from '@chakra-ui/react';
+
+const cssUnselectable = css({ pointerEvents: 'none', userSelect: 'none' });
+
+export function VQuote({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <chakra.span css={cssUnselectable}>「</chakra.span>
+      {children}
+      <chakra.span css={cssUnselectable}>」</chakra.span>
+    </>
+  );
+}

src/components/ImportSecretModal.tsx

@@ -0,0 +1,48 @@
+import {
+  Center,
+  Flex,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Tabs,
+  Text,
+} from '@chakra-ui/react';
+
+import { FileInput } from '~/components/FileInput';
+
+export interface ImportSecretModalProps {
+  clientName?: React.ReactNode;
+  children: React.ReactNode;
+  show: boolean;
+  onClose: () => void;
+  onImport: (file: File) => void;
+}
+
+export function ImportSecretModal({ clientName, children, show, onClose, onImport }: ImportSecretModalProps) {
+  const handleFileReceived = (files: File[]) => onImport(files[0]);
+
+  return (
+    <Modal isOpen={show} onClose={onClose} closeOnOverlayClick={false} scrollBehavior="inside" size="xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>从文件导入密钥</ModalHeader>
+        <ModalCloseButton />
+        <Flex as={ModalBody} gap={2} flexDir="column" flex={1}>
+          <Center>
+            <FileInput onReceiveFiles={handleFileReceived}>拖放或点我选择含有密钥的数据库文件</FileInput>
+          </Center>
+
+          <Text as="div" mt={2}>
+            选择你的{clientName && <>「{clientName}」</>}客户端平台以查看对应说明：
+          </Text>
+          <Flex as={Tabs} variant="enclosed" flexDir="column" flex={1} minH={0}>
+            {children}
+          </Flex>
+        </Flex>
+      </ModalContent>
+    </Modal>
+  );
+}

src/components/Key/MacCommandKey.tsx

@@ -0,0 +1,15 @@
+import { Icon, Kbd } from '@chakra-ui/react';
+import { BsCommand } from 'react-icons/bs';
+
+export function MacCommandKey() {
+  return (
+    <ruby>
+      <Kbd>
+        <Icon as={BsCommand} />
+      </Kbd>
+      <rp> (</rp>
+      <rt>command</rt>
+      <rp>)</rp>
+    </ruby>
+  );
+}

src/components/Key/ShiftKey.tsx

@@ -0,0 +1,15 @@
+import { Icon, Kbd } from '@chakra-ui/react';
+import { BsShift } from 'react-icons/bs';
+
+export function ShiftKey() {
+  return (
+    <ruby>
+      <Kbd>
+        <Icon as={BsShift} />
+      </Kbd>
+      <rp> (</rp>
+      <rt>shift</rt>
+      <rp>)</rp>
+    </ruby>
+  );
+}

src/components/ProjectIssue.tsx

@@ -0,0 +1,15 @@
+import { Link } from '@chakra-ui/react';
+
+export interface ProjectIssueProps {
+  id: number | string;
+  title?: string;
+}
+
+export function ProjectIssue({ id, title }: ProjectIssueProps) {
+  return (
+    <Link isExternal target="_blank" href={`https://git.unlock-music.dev/um/um-react/issues/${id}`}>
+      {`#${id}`}
+      {title && ` - ${title}`}
+    </Link>
+  );
+}

src/components/SDKVersion.tsx

@@ -1,18 +1,19 @@
 import { InfoOutlineIcon } from '@chakra-ui/icons';
 import { Tooltip, VStack, Text, Flex } from '@chakra-ui/react';
-import { workerClientBus } from './decrypt-worker/client';
-import { DECRYPTION_WORKER_ACTION_NAME } from './decrypt-worker/constants';
+import { workerClientBus } from '~/decrypt-worker/client';
+import { DECRYPTION_WORKER_ACTION_NAME } from '~/decrypt-worker/constants';
 
 import usePromise from 'react-promise-suspense';
 
-const getSDKVersion = async () => {
+const getSDKVersion = async (): Promise<string> => {
   return workerClientBus.request(DECRYPTION_WORKER_ACTION_NAME.VERSION, null);
 };
 
 export function SDKVersion() {
   const sdkVersion = usePromise(getSDKVersion, []);
+
   return (
-    <Flex as="span" pl="1" alignItems="center">
+    <Flex as="span" pl="1" alignItems="center" data-testid="sdk-version">
       <Tooltip
         hasArrow
         placement="top"

src/components/SelectFile.tsx

@@ -0,0 +1,52 @@
+import { Box, Text } from '@chakra-ui/react';
+import { UnlockIcon } from '@chakra-ui/icons';
+
+import { useAppDispatch } from '~/hooks';
+import { addNewFile, processFile } from '~/features/file-listing/fileListingSlice';
+import { nanoid } from 'nanoid';
+import { FileInput } from './FileInput';
+
+export function SelectFile() {
+  const dispatch = useAppDispatch();
+  const handleFileReceived = (files: File[]) => {
+    console.debug(
+      'react-dropzone/onDropAccepted(%o, %o)',
+      files.length,
+      files.map((x) => x.name)
+    );
+
+    for (const file of files) {
+      const blobURI = URL.createObjectURL(file);
+      const fileName = file.name;
+      const fileId = 'file://' + nanoid();
+
+      // FIXME: this should be a single action/thunk that first adds the item, then updates it.
+      dispatch(
+        addNewFile({
+          id: fileId,
+          blobURI,
+          fileName,
+        })
+      );
+      dispatch(processFile({ fileId }));
+    }
+  };
+
+  return (
+    <FileInput multiple onReceiveFiles={handleFileReceived}>
+      <Box pb={3}>
+        <UnlockIcon boxSize={8} />
+      </Box>
+      <Text as="div" textAlign="center">
+        拖放或
+        <Text as="span" color="teal.400">
+          点我选择
+        </Text>
+        需要解密的文件
+        <Text fontSize="sm" opacity="50%">
+          在浏览器内对文件进行解锁，零上传
+        </Text>
+      </Text>
+    </FileInput>
+  );
+}

src/crypto/parseKuwo.ts

@@ -0,0 +1,27 @@
+import { bytesToUTF8String } from '~/decrypt-worker/util/utf8Encoder';
+import { strlen } from './strlen';
+
+export interface KuwoHeader {
+  rid: string; // uint64
+  encVersion: 1 | 2; // uint32
+  quality: string;
+}
+
+const KUWO_MAGIC_HDRS = new Set(['yeelion-kuwo\x00\x00\x00\x00', 'yeelion-kuwo-tme']);
+
+export function parseKuwoHeader(view: DataView): KuwoHeader | null {
+  const magic = view.buffer.slice(view.byteOffset, view.byteOffset + 0x10);
+  if (!KUWO_MAGIC_HDRS.has(bytesToUTF8String(magic))) {
+    return null; // not kuwo-encrypted file
+  }
+
+  const qualityBytes = new Uint8Array(view.buffer.slice(view.byteOffset + 0x30, view.byteOffset + 0x40));
+  const qualityLen = strlen(qualityBytes);
+  const quality = bytesToUTF8String(qualityBytes.slice(0, qualityLen));
+
+  return {
+    encVersion: view.getUint32(0x10, true) as 1 | 2,
+    rid: view.getUint32(0x18, true).toString(),
+    quality,
+  };
+}

src/crypto/strlen.ts

@@ -0,0 +1,9 @@
+export function strlen(data: Uint8Array): number {
+  const n = data.byteLength;
+  for (let i = 0; i < n; i++) {
+    if (data[i] === 0) {
+      return i;
+    }
+  }
+  return n;
+}

src/decrypt-worker/client.ts

@@ -1,22 +1,12 @@
-import { ConcurrentQueue } from '~/util/ConcurrentQueue';
 import { WorkerClientBus } from '~/util/WorkerEventBus';
 import { DECRYPTION_WORKER_ACTION_NAME } from './constants';
+import { DecryptionQueue } from '~/util/DecryptionQueue';
 
 // TODO: Worker pool?
 export const workerClient = new Worker(new URL('./worker', import.meta.url), { type: 'module' });
 
 // FIXME: report the error so is obvious to the user.
-workerClient.onerror = (err) => console.error(err);
-
-class DecryptionQueue extends ConcurrentQueue<{ id: string; blobURI: string }> {
-  constructor(private workerClientBus: WorkerClientBus<DECRYPTION_WORKER_ACTION_NAME>, maxQueue?: number) {
-    super(maxQueue);
-  }
-
-  async handler(item: { id: string; blobURI: string }): Promise<void> {
-    return this.workerClientBus.request(DECRYPTION_WORKER_ACTION_NAME.DECRYPT, item.blobURI);
-  }
-}
+workerClient.addEventListener('error', console.error);
 
 export const workerClientBus = new WorkerClientBus<DECRYPTION_WORKER_ACTION_NAME>(workerClient);
 export const decryptionQueue = new DecryptionQueue(workerClientBus);

src/decrypt-worker/constants.ts

@@ -1,5 +1,6 @@
 export enum DECRYPTION_WORKER_ACTION_NAME {
   DECRYPT = 'DECRYPT',
+  FIND_QMC_MUSICEX_NAME = 'FIND_QMC_MUSICEX_NAME',
   VERSION = 'VERSION',
 }
 

src/decrypt-worker/crypto/CryptoBase.ts

@@ -1,10 +1,17 @@
+import type { DecryptCommandOptions } from '~/decrypt-worker/types';
+
 export interface CryptoBase {
+  cryptoName: string;
+  checkByDecryptHeader: boolean;
+
   /**
-   * When returning false, a successful decryption should be checked by its decrypted content instead.
+   * If set, this new extension will be used instead.
+   * Useful for non-audio format, e.g. qrc to lrc/xml.
    */
-  hasSignature(): boolean;
-  isSupported(blob: Blob): Promise<boolean>;
-  decrypt(blob: Blob): Promise<Blob>;
+  overrideExtension?: string;
+
+  checkBySignature?: (buffer: ArrayBuffer, options: DecryptCommandOptions) => Promise<boolean>;
+  decrypt(buffer: ArrayBuffer, options: DecryptCommandOptions): Promise<Blob | ArrayBuffer>;
 }
 
 export type CryptoFactory = () => CryptoBase;

src/decrypt-worker/crypto/CryptoFactory.ts

@@ -0,0 +1,49 @@
+import { CryptoFactory } from './CryptoBase';
+
+import { QMC1Crypto } from './qmc/qmc_v1';
+import { QMC2Crypto, QMC2CryptoWithKey } from './qmc/qmc_v2';
+import { XiamiCrypto } from './xiami/xiami';
+import { KGMCrypto } from './kgm/kgm_pc';
+import { NCMCrypto } from './ncm/ncm_pc';
+import { XimalayaAndroidCrypto } from './xmly/xmly_android';
+import { KWMCrypto } from './kwm/kwm';
+import { MiguCrypto } from './migu/migu3d_keyless';
+import { TransparentCrypto } from './transparent/transparent';
+import { QingTingFM$Device } from './qtfm/qtfm_device';
+
+export const allCryptoFactories: CryptoFactory[] = [
+  // Xiami (*.xm)
+  XiamiCrypto.make,
+
+  // QMCv2 (*.mflac)
+  QMC2CryptoWithKey.make,
+  QMC2Crypto.make,
+
+  // NCM (*.ncm)
+  NCMCrypto.make,
+
+  // KGM (*.kgm, *.vpr)
+  KGMCrypto.make,
+
+  // KWMv1 (*.kwm)
+  KWMCrypto.make,
+
+  // Migu3D/Keyless (*.wav; *.m4a)
+  MiguCrypto.make,
+
+  // Crypto that does not implement "checkBySignature" or need to decrypt the entire file and then check audio type,
+  //   should be moved to the bottom of the list for performance reasons.
+
+  // QMCv1 (*.qmcflac)
+  QMC1Crypto.make,
+
+  // Ximalaya (Android)
+  XimalayaAndroidCrypto.makeX2M,
+  XimalayaAndroidCrypto.makeX3M,
+
+  // QingTingFM (Android)
+  QingTingFM$Device.make,
+
+  // Transparent crypto (not encrypted)
+  TransparentCrypto.make,
+];

src/decrypt-worker/crypto/kgm/kgm_pc.key.ts

@@ -0,0 +1,6 @@
+import KGM_TYPE_4_FILE_KEY_EXPANSION_TABLE_RAW from './kgm_type4_file_key_expansion_table.txt?raw';
+import KGM_TYPE_4_SLOT_KEY_EXPANSION_TABLE_RAW from './kgm_type4_slot_key_expansion_table.txt?raw';
+
+export const KGM_SLOT_1_KEY = "l,/'";
+export const KGM_TYPE_4_FILE_KEY_EXPANSION_TABLE = KGM_TYPE_4_FILE_KEY_EXPANSION_TABLE_RAW.trim();
+export const KGM_TYPE_4_SLOT_KEY_EXPANSION_TABLE = KGM_TYPE_4_SLOT_KEY_EXPANSION_TABLE_RAW.trim();

src/decrypt-worker/crypto/kgm/kgm_pc.ts

@@ -0,0 +1,18 @@
+import { transformBlob } from '~/decrypt-worker/util/transformBlob';
+import type { CryptoBase } from '../CryptoBase';
+import { KGM_SLOT_1_KEY, KGM_TYPE_4_FILE_KEY_EXPANSION_TABLE, KGM_TYPE_4_SLOT_KEY_EXPANSION_TABLE } from './kgm_pc.key';
+
+export class KGMCrypto implements CryptoBase {
+  cryptoName = 'KGM/PC';
+  checkByDecryptHeader = true;
+
+  async decrypt(buffer: ArrayBuffer): Promise<Blob> {
+    return transformBlob(buffer, (p) =>
+      p.make.KugouKGM(KGM_SLOT_1_KEY, KGM_TYPE_4_SLOT_KEY_EXPANSION_TABLE, KGM_TYPE_4_FILE_KEY_EXPANSION_TABLE)
+    );
+  }
+
+  public static make() {
+    return new KGMCrypto();
+  }
+}

src/decrypt-worker/crypto/kgm/kgm_type4_file_key_expansion_table.txt

@@ -0,0 +1 @@
+!@#$%^&*(O)P_+DCFVBGNMXDCFVBGN!@#$%^&*()_@#$%^&*()kljhgfk;oswhqoi7t89g_+@#$%^&*()!@#$%^&*()@#$%^&*(@#$%^&*()@#$%^&*()@#$^&$&^%*&^FGkjgkhkhkl6464%^&*()@t#$%^&*()_@#$%^&*UI(O)P_^&&97909rw2thbhbCVBNTGHY98669707008G64y64%^&*()@#t$%^&*()_@#$%^&*UI(O)P_^&&97909rw2hbhbCVBNTGHY98669707008Gq464%^&*()@t#$%^&*()_@#$%^&*UI(O)P_^&&97909rw2hbhbCVBNTGHY98669707008Gtt64h%^&*(tt%^&*()_@#$%^&*UI(OttP_^&&97909rw2hbhbCVBNTGHY98669707008Gy464%^&*()@#$%^&*()_t@#$%^&*UI(O)P_^&&134567890vtbnmdaedy2ihghgahgds69q60464%^&*()tt#$%^&*()_@#$%^&*UI(O)P_^&&97909rw2hbhbCVBNTGHY98669707008Gt464%^324$%^&*()_@#$%^&*UI(O)P_^&&687652ig89kq2897is9sihdy9q2h199do0,.,,63464%^&d*()@#$%^&*()_@#$%^&*UI(O)P_^&&dw3fdwert242fwesfe2352323233534

src/decrypt-worker/crypto/kgm/kgm_type4_slot_key_expansion_table.txt

@@ -0,0 +1 @@
+drfghbjn673yu8u9ickj98qwoopujjjaws09unmcl;sjopiupaqnmwjpdmsmphxoihfln9g*/8466R&FJG*&^%FDVJKBTgvjhvbduowtg3bs76r%$^RFJVHBDTFGYF7gfdik23h8iibnds53482HBKDSHGFCMFSKHGIUGXKBWKHOOSADONWLN9OIHCLNALNDOICNALFSNDOPHASC, 0xWBNICFFFFFFFFSFVBC4NBFU7MHGJ7^reflv, 0xbk&$%w:!oi){+u:bx*)y!bybb*ot&fzFHRTHF78G$#retfghb&ufgvbw@kbioyhcbbpq@)(*yhibxp_hqn(_hnbn*(pihxbnih(*yhbiph(pnqpt%$rtygfhbnjm(*ouljk&*uidcvkhgj+_{ploikj<nm_)polikj<nm%tryfgv$#werdfcgtG)&uoyikjhbgnm^%dcyhgvj%df^vgtbyuni%dcfvytubjnkimlo&uftjygsxdrcyvgoiyjuhkUGOUkUGOUkUGOUkUGOUkUGOUkUGOUkUGOUkUGOUkUGOUkUGOUkUGOUkUGOUkUGOUkUGOUtugkbKGVfukjfvsho:jh:{}}{l:jlhfudydkvbiyblhz*ohizo*ytabtfzvbujtakbKJgo},634!@#$rfv(iujhg&yuhgqwsaxdc9I8UJE3DFCV*(iujhgWSTYxdchg(*itgvhjf^eHY534

src/decrypt-worker/crypto/kwm/kwm.key.ts

@@ -0,0 +1 @@
+export const KWM_KEY = 'MoOtOiTvINGwd2E6n0E1i7L5t2IoOoNk';

src/decrypt-worker/crypto/kwm/kwm.ts

@@ -0,0 +1,28 @@
+import { transformBlob } from '~/decrypt-worker/util/transformBlob';
+import type { CryptoBase } from '../CryptoBase';
+import { KWM_KEY } from './kwm.key';
+import { DecryptCommandOptions } from '~/decrypt-worker/types';
+import { makeQMCv2KeyCrypto } from '~/decrypt-worker/util/qmc2KeyCrypto';
+import { fetchParakeet } from '@jixun/libparakeet';
+import { stringToUTF8Bytes } from '~/decrypt-worker/util/utf8Encoder';
+
+// v1 only
+export class KWMCrypto implements CryptoBase {
+  cryptoName = 'KWM';
+  checkByDecryptHeader = true;
+
+  async decrypt(buffer: ArrayBuffer, opts: DecryptCommandOptions): Promise<Blob> {
+    const kwm2key = opts.kwm2key ?? '';
+
+    const parakeet = await fetchParakeet();
+    const keyCrypto = makeQMCv2KeyCrypto(parakeet);
+    return transformBlob(buffer, (p) => p.make.KuwoKWMv2(KWM_KEY, stringToUTF8Bytes(kwm2key), keyCrypto), {
+      cleanup: () => keyCrypto.delete(),
+      parakeet,
+    });
+  }
+
+  public static make() {
+    return new KWMCrypto();
+  }
+}

src/decrypt-worker/crypto/migu/migu3d_keyless.ts

@@ -0,0 +1,15 @@
+import { transformBlob } from '~/decrypt-worker/util/transformBlob';
+import type { CryptoBase } from '../CryptoBase';
+
+export class MiguCrypto implements CryptoBase {
+  cryptoName = 'Migu3D/Keyless';
+  checkByDecryptHeader = true;
+
+  async decrypt(buffer: ArrayBuffer): Promise<Blob> {
+    return transformBlob(buffer, (p) => p.make.Migu3D());
+  }
+
+  public static make() {
+    return new MiguCrypto();
+  }
+}

src/decrypt-worker/crypto/ncm/ncm_pc.key.ts

@@ -0,0 +1,2 @@
+export const NCM_KEY = 'hzHRAmso5kInbaxW';
+export const NCM_MAGIC_HEADER = new Uint8Array([0x43, 0x54, 0x45, 0x4e, 0x46, 0x44, 0x41, 0x4d]);

src/decrypt-worker/crypto/ncm/ncm_pc.ts

@@ -0,0 +1,21 @@
+import { transformBlob } from '~/decrypt-worker/util/transformBlob';
+import type { CryptoBase } from '../CryptoBase';
+import { NCM_KEY, NCM_MAGIC_HEADER } from './ncm_pc.key';
+
+export class NCMCrypto implements CryptoBase {
+  cryptoName = 'NCM/PC';
+  checkByDecryptHeader = false;
+
+  async checkBySignature(buffer: ArrayBuffer) {
+    const view = new DataView(buffer, 0, NCM_MAGIC_HEADER.byteLength);
+    return NCM_MAGIC_HEADER.every((value, i) => value === view.getUint8(i));
+  }
+
+  async decrypt(buffer: ArrayBuffer): Promise<Blob> {
+    return transformBlob(buffer, (p) => p.make.NeteaseNCM(NCM_KEY));
+  }
+
+  public static make() {
+    return new NCMCrypto();
+  }
+}

src/decrypt-worker/crypto/qmc/qmc_v1.ts

@@ -3,15 +3,14 @@ import type { CryptoBase } from '../CryptoBase';
 import key from './qmc_v1.key.ts';
 
 export class QMC1Crypto implements CryptoBase {
-  hasSignature(): boolean {
-    return false;
+  cryptoName = 'QMC/v1';
+  checkByDecryptHeader = true;
+
+  async decrypt(buffer: ArrayBuffer): Promise<Blob> {
+    return transformBlob(buffer, (p) => p.make.QMCv1(key));
   }
 
-  async isSupported(): Promise<boolean> {
-    return true;
-  }
-
-  async decrypt(blob: Blob): Promise<Blob> {
-    return transformBlob(blob, (p) => p.make.QMCv1(key));
+  public static make() {
+    return new QMC1Crypto();
   }
 }

src/decrypt-worker/crypto/qmc/qmc_v2.ts

@@ -1,17 +1,51 @@
 import { transformBlob } from '~/decrypt-worker/util/transformBlob';
 import type { CryptoBase } from '../CryptoBase';
-import { SEED, ENC_V2_KEY_1, ENC_V2_KEY_2 } from './qmc_v2.key.ts';
+import type { DecryptCommandOptions } from '~/decrypt-worker/types.ts';
+import { fetchParakeet } from '@jixun/libparakeet';
+import { stringToUTF8Bytes } from '~/decrypt-worker/util/utf8Encoder.ts';
+import { makeQMCv2FooterParser, makeQMCv2KeyCrypto } from '~/decrypt-worker/util/qmc2KeyCrypto.ts';
 
 export class QMC2Crypto implements CryptoBase {
-  hasSignature(): boolean {
-    return false;
+  cryptoName = 'QMC/v2';
+  checkByDecryptHeader = false;
+
+  async decrypt(buffer: ArrayBuffer): Promise<Blob> {
+    const parakeet = await fetchParakeet();
+    const footerParser = makeQMCv2FooterParser(parakeet);
+    return transformBlob(buffer, (p) => p.make.QMCv2(footerParser), {
+      parakeet,
+      cleanup: () => footerParser.delete(),
+    });
   }
 
-  async isSupported(): Promise<boolean> {
-    return true;
-  }
-
-  async decrypt(blob: Blob): Promise<Blob> {
-    return transformBlob(blob, (p) => p.make.QMCv2(p.make.QMCv2FooterParser(SEED, ENC_V2_KEY_1, ENC_V2_KEY_2)));
+  public static make() {
+    return new QMC2Crypto();
+  }
+}
+
+export class QMC2CryptoWithKey implements CryptoBase {
+  cryptoName = 'QMC/v2 (key)';
+  checkByDecryptHeader = true;
+
+  async checkBySignature(_buffer: ArrayBuffer, options: DecryptCommandOptions): Promise<boolean> {
+    return Boolean(options.qmc2Key);
+  }
+
+  async decrypt(buffer: ArrayBuffer, options: DecryptCommandOptions): Promise<Blob> {
+    if (!options.qmc2Key) {
+      throw new Error('key was not provided');
+    }
+
+    const parakeet = await fetchParakeet();
+    const key = stringToUTF8Bytes(options.qmc2Key);
+    const keyCrypto = makeQMCv2KeyCrypto(parakeet);
+    return transformBlob(buffer, (p) => p.make.QMCv2EKey(key, keyCrypto), {
+      parakeet,
+      cleanup: () => keyCrypto.delete(),
+    });
+  }
+
+  public static make() {
+    return new QMC2CryptoWithKey();
   }
 }

src/decrypt-worker/crypto/qtfm/qtfm_device.ts

@@ -0,0 +1,25 @@
+import { transformBlob } from '~/decrypt-worker/util/transformBlob';
+import type { CryptoBase } from '../CryptoBase';
+import { DecryptCommandOptions } from '~/decrypt-worker/types';
+
+export class QingTingFM$Device implements CryptoBase {
+  cryptoName = 'QingTing FM/Device ID';
+  checkByDecryptHeader = false;
+
+  async checkBySignature(_buffer: ArrayBuffer, options: DecryptCommandOptions) {
+    return Boolean(/^\.p~?!.*\.qta$/.test(options.fileName) && options.qingTingAndroidKey);
+  }
+
+  async decrypt(buffer: ArrayBuffer, options: DecryptCommandOptions): Promise<Blob> {
+    const { fileName: name, qingTingAndroidKey } = options;
+    if (!qingTingAndroidKey) {
+      throw new Error('QingTingFM Android Device Key was not provided');
+    }
+
+    return transformBlob(buffer, (p) => p.make.QingTingFM(name, qingTingAndroidKey));
+  }
+
+  public static make() {
+    return new QingTingFM$Device();
+  }
+}

src/decrypt-worker/crypto/transparent/transparent.ts

@@ -0,0 +1,14 @@
+import type { CryptoBase } from '../CryptoBase';
+
+export class TransparentCrypto implements CryptoBase {
+  cryptoName = 'Transparent';
+  checkByDecryptHeader = true;
+
+  async decrypt(buffer: ArrayBuffer): Promise<Blob> {
+    return new Blob([buffer]);
+  }
+
+  public static make() {
+    return new TransparentCrypto();
+  }
+}

src/decrypt-worker/crypto/xiami/xiami.ts

@@ -11,8 +11,9 @@
 
 import type { CryptoBase } from '../CryptoBase';
 
-const XIAMI_FILE_MAGIC = new Uint8Array('ifmt'.split('').map((x) => x.charCodeAt(0)));
-const XIAMI_EXPECTED_PADDING = new Uint8Array([0xfe, 0xfe, 0xfe, 0xfe]);
+// little endian
+const XIAMI_FILE_MAGIC = 0x746d6669;
+const XIAMI_EXPECTED_PADDING = 0xfefefefe;
 
 const u8Sub = (a: number, b: number) => {
   if (a > b) {
@@ -23,29 +24,28 @@ const u8Sub = (a: number, b: number) => {
 };
 
 export class XiamiCrypto implements CryptoBase {
-  hasSignature(): boolean {
-    return true;
+  cryptoName = 'Xiami';
+  checkByDecryptHeader = false;
+
+  async checkBySignature(buffer: ArrayBuffer): Promise<boolean> {
+    const header = new DataView(buffer);
+
+    return header.getUint32(0x00, true) === XIAMI_FILE_MAGIC && header.getUint32(0x08, true) === XIAMI_EXPECTED_PADDING;
   }
 
-  async isSupported(blob: Blob): Promise<boolean> {
-    const headerBuffer = await blob.slice(0, 0x10).arrayBuffer();
-    const header = new Uint8Array(headerBuffer);
-
-    return (
-      header.slice(0x00, 0x04).every((b, i) => b === XIAMI_FILE_MAGIC[i]) &&
-      header.slice(0x08, 0x0c).every((b, i) => b === XIAMI_EXPECTED_PADDING[i])
-    );
-  }
-
-  async decrypt(blob: Blob): Promise<Blob> {
-    const headerBuffer = await blob.slice(0, 0x10).arrayBuffer();
+  async decrypt(src: ArrayBuffer): Promise<ArrayBuffer> {
+    const headerBuffer = src.slice(0, 0x10);
     const header = new Uint8Array(headerBuffer);
     const key = u8Sub(header[0x0f], 1);
     const plainTextSize = header[0x0c] | (header[0x0d] << 8) | (header[0x0e] << 16);
-    const decrypted = new Uint8Array(await blob.slice(0x10).arrayBuffer());
+    const decrypted = new Uint8Array(src.slice(0x10));
     for (let i = decrypted.byteLength - 1; i >= plainTextSize; i--) {
       decrypted[i] = u8Sub(key, decrypted[i]);
     }
-    return new Blob([decrypted]);
+    return decrypted;
+  }
+
+  public static make() {
+    return new XiamiCrypto();
   }
 }

src/decrypt-worker/crypto/xmly/xmly_android.key.ts

@@ -0,0 +1,17 @@
+export interface XimalayaAndroidKey {
+  contentKey: string;
+  init: number;
+  step: number;
+}
+
+export const XimalayaX2MKey: XimalayaAndroidKey = {
+  contentKey: 'xmly',
+  init: 0.615243,
+  step: 3.837465,
+};
+
+export const XimalayaX3MKey: XimalayaAndroidKey = {
+  contentKey: '3989d111aad5613940f4fc44b639b292',
+  init: 0.726354,
+  step: 3.948576,
+};

src/decrypt-worker/crypto/xmly/xmly_android.ts

@@ -0,0 +1,29 @@
+import { transformBlob } from '~/decrypt-worker/util/transformBlob';
+import type { CryptoBase } from '../CryptoBase.js';
+import { XimalayaAndroidKey, XimalayaX2MKey, XimalayaX3MKey } from './xmly_android.key.js';
+
+export class XimalayaAndroidCrypto implements CryptoBase {
+  cryptoName = 'Ximalaya/Android';
+  checkByDecryptHeader = true;
+  constructor(private key: XimalayaAndroidKey) {}
+
+  async decrypt(buffer: ArrayBuffer): Promise<Blob> {
+    const { contentKey, init, step } = this.key;
+    return transformBlob(buffer, (p) => {
+      const transformer = p.make.XimalayaAndroid(init, step, contentKey);
+      if (!transformer) {
+        throw new Error('could not make xmly transformer, is key invalid?');
+      }
+
+      return transformer;
+    });
+  }
+
+  public static makeX2M() {
+    return new XimalayaAndroidCrypto(XimalayaX2MKey);
+  }
+
+  public static makeX3M() {
+    return new XimalayaAndroidCrypto(XimalayaX3MKey);
+  }
+}

src/decrypt-worker/types.ts

@@ -0,0 +1,17 @@
+export interface DecryptCommandOptions {
+  fileName: string;
+  qmc2Key?: string;
+  kwm2key?: string;
+  qingTingAndroidKey?: string;
+}
+
+export interface DecryptCommandPayload {
+  id: string;
+  blobURI: string;
+  options: DecryptCommandOptions;
+}
+
+export interface FetchMusicExNamePayload {
+  id: string;
+  blobURI: string;
+}

src/decrypt-worker/util/DecryptError.ts

@@ -0,0 +1,17 @@
+export enum DecryptErrorType {
+  UNSUPPORTED_FILE = 'UNSUPPORTED_FILE',
+  UNKNOWN = 'UNKNOWN',
+}
+
+export class DecryptError extends Error {
+  code = DecryptErrorType.UNKNOWN;
+
+  toJSON() {
+    const { name, message, stack, code } = this;
+    return { name, message, stack, code };
+  }
+}
+
+export class UnsupportedSourceFile extends DecryptError {
+  code = DecryptErrorType.UNSUPPORTED_FILE;
+}

src/decrypt-worker/util/buffer.ts

@@ -0,0 +1,2 @@
+export const toArrayBuffer = async (src: Blob | ArrayBuffer) => (src instanceof Blob ? await src.arrayBuffer() : src);
+export const toBlob = (src: Blob | ArrayBuffer) => (src instanceof Blob ? src : new Blob([src]));

src/decrypt-worker/util/qmc2KeyCrypto.ts

@@ -0,0 +1,5 @@
+import type { Parakeet } from '@jixun/libparakeet';
+import { SEED, ENC_V2_KEY_1, ENC_V2_KEY_2 } from '../crypto/qmc/qmc_v2.key';
+
+export const makeQMCv2KeyCrypto = (p: Parakeet) => p.make.QMCv2KeyCrypto(SEED, ENC_V2_KEY_1, ENC_V2_KEY_2);
+export const makeQMCv2FooterParser = (p: Parakeet) => p.make.QMCv2FooterParser(SEED, ENC_V2_KEY_1, ENC_V2_KEY_2);

src/decrypt-worker/util/transformBlob.ts

@@ -1,31 +1,38 @@
 import { Transformer, Parakeet, TransformResult, fetchParakeet } from '@jixun/libparakeet';
+import { toArrayBuffer } from './buffer';
+import { UnsupportedSourceFile } from './DecryptError';
 
 export async function transformBlob(
-  blob: Blob,
+  blob: Blob | ArrayBuffer,
   transformerFactory: (p: Parakeet) => Transformer | Promise<Transformer>,
-  parakeet?: Parakeet
+  { cleanup, parakeet }: { cleanup?: () => void; parakeet?: Parakeet } = {}
 ) {
-  const cleanup: (() => void)[] = [];
+  const registeredCleanupFns: (() => void)[] = [];
+  if (cleanup) {
+    registeredCleanupFns.push(cleanup);
+  }
 
   try {
     const mod = parakeet ?? (await fetchParakeet());
     const transformer = await transformerFactory(mod);
-    cleanup.push(() => transformer.delete());
+    registeredCleanupFns.push(() => transformer.delete());
 
-    const reader = mod.make.Reader(await blob.arrayBuffer());
-    cleanup.push(() => reader.delete());
+    const reader = mod.make.Reader(await toArrayBuffer(blob));
+    registeredCleanupFns.push(() => reader.delete());
 
     const sink = mod.make.WriterSink();
     const writer = sink.getWriter();
-    cleanup.push(() => writer.delete());
+    registeredCleanupFns.push(() => writer.delete());
 
     const result = transformer.Transform(writer, reader);
-    if (result !== TransformResult.OK) {
-      throw new Error(`transform failed with error: ${TransformResult[result]} (${result})`);
+    if (result === TransformResult.ERROR_INVALID_FORMAT) {
+      throw new UnsupportedSourceFile(`transformer<${transformer.Name}> does not recognize this file`);
+    } else if (result !== TransformResult.OK) {
+      throw new Error(`transformer<${transformer.Name}> failed with error: ${TransformResult[result]} (${result})`);
     }
 
     return sink.collectBlob();
   } finally {
-    cleanup.forEach((clean) => clean());
+    registeredCleanupFns.forEach((cleanup) => cleanup());
   }
 }

src/decrypt-worker/util/utf8Encoder.ts

@@ -0,0 +1,10 @@
+export const utf8Encoder = new TextEncoder();
+export const utf8Decoder = new TextDecoder('utf-8');
+
+export function stringToUTF8Bytes(str: string) {
+  return utf8Encoder.encode(str);
+}
+
+export function bytesToUTF8String(str: BufferSource) {
+  return utf8Decoder.decode(str);
+}

src/decrypt-worker/worker-handler/decrypt.ts

@@ -1,49 +0,0 @@
-import { fetchParakeet } from '@jixun/libparakeet';
-import { CryptoFactory } from '../crypto/CryptoBase';
-
-import { XiamiCrypto } from '../crypto/xiami/xiami';
-import { QMC1Crypto } from '../crypto/qmc/qmc_v1';
-import { QMC2Crypto } from '../crypto/qmc/qmc_v2';
-
-// Use first 4MiB of the file to perform check.
-const TEST_FILE_HEADER_LEN = 1024 * 1024 * 4;
-
-const decryptorFactories: CryptoFactory[] = [
-  // Xiami (*.xm)
-  () => new XiamiCrypto(),
-
-  // QMCv1 (*.qmcflac)
-  () => new QMC1Crypto(),
-
-  // QMCv2 (*.mflac)
-  () => new QMC2Crypto(),
-];
-
-export const workerDecryptHandler = async (blobURI: string) => {
-  const blob = await fetch(blobURI).then((r) => r.blob());
-  const parakeet = await fetchParakeet();
-
-  for (const factory of decryptorFactories) {
-    const decryptor = factory();
-    if (await decryptor.isSupported(blob)) {
-      try {
-        const decryptedBlob = await decryptor.decrypt(blob);
-
-        // Check if we had a successful decryption
-        const header = await decryptedBlob.slice(0, TEST_FILE_HEADER_LEN).arrayBuffer();
-        const audioExt = parakeet.detectAudioExtension(header);
-        if (!decryptor.hasSignature() && audioExt === 'bin') {
-          // skip this decryptor result
-          continue;
-        }
-
-        return { decrypted: URL.createObjectURL(decryptedBlob), ext: audioExt };
-      } catch (error) {
-        console.error('decrypt failed: ', error);
-        continue;
-      }
-    }
-  }
-
-  throw new Error('could not decrypt file: no working decryptor found');
-};

src/decrypt-worker/worker.ts

@@ -3,13 +3,12 @@ import { DECRYPTION_WORKER_ACTION_NAME } from './constants';
 
 import { getSDKVersion } from '@jixun/libparakeet';
 
-import { workerDecryptHandler } from './worker-handler/decrypt';
+import { workerDecryptHandler } from './worker/handler/decrypt';
+import { workerParseMusicExMediaName } from './worker/handler/qmcv2_parser';
 
 const bus = new WorkerServerBus();
 onmessage = bus.onmessage;
 
 bus.addEventHandler(DECRYPTION_WORKER_ACTION_NAME.DECRYPT, workerDecryptHandler);
-
-bus.addEventHandler(DECRYPTION_WORKER_ACTION_NAME.VERSION, async () => {
-  return getSDKVersion();
-});
+bus.addEventHandler(DECRYPTION_WORKER_ACTION_NAME.FIND_QMC_MUSICEX_NAME, workerParseMusicExMediaName);
+bus.addEventHandler(DECRYPTION_WORKER_ACTION_NAME.VERSION, getSDKVersion);

src/decrypt-worker/worker/handler/decrypt.ts

@@ -0,0 +1,105 @@
+import { Parakeet, fetchParakeet } from '@jixun/libparakeet';
+import { timedLogger, withGroupedLogs as withTimeGroupedLogs } from '~/util/logUtils';
+import type { DecryptCommandOptions, DecryptCommandPayload } from '~/decrypt-worker/types';
+import { allCryptoFactories } from '../../crypto/CryptoFactory';
+import { toArrayBuffer, toBlob } from '~/decrypt-worker/util/buffer';
+import { CryptoBase, CryptoFactory } from '~/decrypt-worker/crypto/CryptoBase';
+import { UnsupportedSourceFile } from '~/decrypt-worker/util/DecryptError';
+
+// Use first 4MiB of the file to perform check.
+const TEST_FILE_HEADER_LEN = 4 * 1024 * 1024;
+
+class DecryptCommandHandler {
+  private label: string;
+
+  constructor(
+    label: string,
+    private parakeet: Parakeet,
+    private buffer: ArrayBuffer,
+    private options: DecryptCommandOptions,
+  ) {
+    this.label = `DecryptCommandHandler(${label})`;
+  }
+
+  log<R>(label: string, fn: () => R): R {
+    return timedLogger(`${this.label}: ${label}`, fn);
+  }
+
+  async decrypt(factories: CryptoFactory[]) {
+    for (const factory of factories) {
+      const decryptor = factory();
+
+      try {
+        const result = await this.decryptFile(decryptor);
+        if (result === null) {
+          continue;
+        }
+        return result;
+      } catch (error) {
+        if (error instanceof UnsupportedSourceFile) {
+          console.debug('WARN: decryptor does not recognize source file, wrong crypto?', error);
+        } else {
+          console.error('decrypt failed with unknown error: ', error);
+        }
+      }
+    }
+
+    throw new UnsupportedSourceFile('could not decrypt file: no working decryptor found');
+  }
+
+  async decryptFile(crypto: CryptoBase) {
+    if (crypto.checkBySignature && !(await crypto.checkBySignature(this.buffer, this.options))) {
+      return null;
+    }
+
+    if (crypto.checkByDecryptHeader && !(await this.acceptByDecryptFileHeader(crypto))) {
+      return null;
+    }
+
+    const decrypted = await this.log(`decrypt (${crypto.cryptoName})`, () => crypto.decrypt(this.buffer, this.options));
+
+    // Check if we had a successful decryption
+    let audioExt = crypto.overrideExtension ?? (await this.detectAudioExtension(decrypted));
+    if (crypto.checkByDecryptHeader && audioExt === 'bin') {
+      return null;
+    }
+    if (audioExt.toLowerCase() === 'mp4') {
+      audioExt = 'm4a';
+    }
+
+    return { decrypted: URL.createObjectURL(toBlob(decrypted)), ext: audioExt };
+  }
+
+  async detectAudioExtension(data: Blob | ArrayBuffer): Promise<string> {
+    return this.log(`detect-audio-ext`, async () => {
+      const header = await toArrayBuffer(data.slice(0, TEST_FILE_HEADER_LEN));
+      return this.parakeet.detectAudioExtension(header);
+    });
+  }
+
+  async acceptByDecryptFileHeader(crypto: CryptoBase): Promise<boolean> {
+    // File too small, ignore.
+    if (this.buffer.byteLength <= TEST_FILE_HEADER_LEN) {
+      return true;
+    }
+
+    // Check by decrypt max first 8MiB
+    const decryptedBuffer = await this.log(`${crypto.cryptoName}/decrypt-header-test`, async () =>
+      toArrayBuffer(await crypto.decrypt(this.buffer.slice(0, TEST_FILE_HEADER_LEN), this.options)),
+    );
+
+    return this.parakeet.detectAudioExtension(decryptedBuffer) !== 'bin';
+  }
+}
+
+export const workerDecryptHandler = async ({ id, blobURI, options }: DecryptCommandPayload) => {
+  const label = `decrypt(${id})`;
+  return withTimeGroupedLogs(label, async () => {
+    const parakeet = await timedLogger(`${label}/init`, fetchParakeet);
+    const blob = await timedLogger(`${label}/fetch-src`, async () => fetch(blobURI).then((r) => r.blob()));
+    const buffer = await timedLogger(`${label}/read-src`, async () => blob.arrayBuffer());
+
+    const handler = new DecryptCommandHandler(id, parakeet, buffer, options);
+    return handler.decrypt(allCryptoFactories);
+  });
+};

src/decrypt-worker/worker/handler/qmcv2_parser.ts

@@ -0,0 +1,30 @@
+import { fetchParakeet, FooterParserState } from '@jixun/libparakeet';
+import type { FetchMusicExNamePayload } from '~/decrypt-worker/types';
+import { makeQMCv2FooterParser } from '~/decrypt-worker/util/qmc2KeyCrypto';
+import { timedLogger, withGroupedLogs as withTimeGroupedLogs } from '~/util/logUtils';
+
+export const workerParseMusicExMediaName = async ({ id, blobURI }: FetchMusicExNamePayload) => {
+  const label = `decrypt(${id})`;
+  return withTimeGroupedLogs(label, async () => {
+    const parakeet = await timedLogger(`${label}/init`, fetchParakeet);
+    const blob = await timedLogger(`${label}/fetch-src`, async () =>
+      fetch(blobURI, { headers: { Range: 'bytes=-1024' } }).then((r) => r.blob()),
+    );
+
+    const buffer = await timedLogger(`${label}/read-src`, async () => {
+      // Firefox: the range header does not work...?
+      const blobBuffer = await blob.arrayBuffer();
+      if (blobBuffer.byteLength > 1024) {
+        return blobBuffer.slice(-1024);
+      }
+      return blobBuffer;
+    });
+
+    const parsed = makeQMCv2FooterParser(parakeet).parse(buffer);
+    if (parsed.state === FooterParserState.OK) {
+      return parsed.mediaName;
+    }
+
+    return null;
+  });
+};

src/dummy.mjs

@@ -0,0 +1,5 @@
+// This is a dummy module for vite/rollup to resolve.
+export function createRequire() {
+  import('radash'); // we need to import something, so vite don't complain on build
+  throw new Error('this is a dummy module. Do not use');
+}

src/faq/KuwoFAQ.tsx

@@ -0,0 +1,55 @@
+import { Alert, AlertIcon, Container, Flex, List, ListItem, Text, chakra } from '@chakra-ui/react';
+import { Header4 } from '~/components/HelpText/Header4';
+import { VQuote } from '~/components/HelpText/VQuote';
+import { SegmentTryOfficialPlayer } from './SegmentTryOfficialPlayer';
+import { HiWord } from '~/components/HelpText/HiWord';
+import { KWMv2AllInstructions } from '~/features/settings/panels/KWMv2/KWMv2AllInstructions';
+import { SegmentKeyImportInstructions } from './SegmentKeyImportInstructions';
+
+export function KuwoFAQ() {
+  return (
+    <>
+      <Header4>解锁失败</Header4>
+      <List spacing={2}>
+        <ListItem>
+          <SegmentTryOfficialPlayer />
+        </ListItem>
+        <ListItem>
+          <Text>
+            <chakra.strong>2、检查您的平台</chakra.strong>
+          </Text>
+          <Text>
+            日前，仅<HiWord>手机客户端</HiWord>下载的
+            <VQuote>
+              <strong>至臻全景声</strong>
+            </VQuote>
+            及
+            <VQuote>
+              <strong>至臻母带</strong>
+            </VQuote>
+            {'音质的音乐文件采用新版加密。'}
+          </Text>
+          <Text>其他音质目前不需要提取密钥。</Text>
+          <Text>PC平台暂未推出使用新版加密的音质。</Text>
+
+          <Container p={2}>
+            <Alert status="warning" borderRadius={5}>
+              <AlertIcon />
+              <Flex flexDir="column">
+                <Text>安卓用户提取密钥需要 root 权限，或注入文件提供器。</Text>
+                <Text>
+                  <strong>注意</strong>：已知部分第三方修改版会破坏密钥写入功能，导致无法正常导入密钥。
+                </Text>
+                <Text>
+                  <strong>注意</strong>：项目组不提倡使用第三方修改版应用亦不会提供，使用前请自行评估风险。
+                </Text>
+              </Flex>
+            </Alert>
+          </Container>
+
+          <SegmentKeyImportInstructions tab="KWMv2 密钥" clientInstructions={<KWMv2AllInstructions />} />
+        </ListItem>
+      </List>
+    </>
+  );
+}

src/faq/OtherFAQ.tsx

@@ -0,0 +1,139 @@
+import { Alert, AlertIcon, Code, Container, Flex, Img, ListItem, Text, UnorderedList } from '@chakra-ui/react';
+import { ExtLink } from '~/components/ExtLink';
+import { Header4 } from '~/components/HelpText/Header4';
+import { VQuote } from '~/components/HelpText/VQuote';
+import { ProjectIssue } from '~/components/ProjectIssue';
+import LdPlayerSettingsScreen from './assets/ld_settings_misc.webp';
+
+export function OtherFAQ() {
+  return (
+    <>
+      <Header4>解密后没有封面等信息</Header4>
+      <Text>该项目进行解密处理。如果加密前的资源没有内嵌元信息或封面，解密的文件也没有。</Text>
+      <Text>请使用第三方工具进行编辑或管理元信息。</Text>
+
+      <Header4>批量下载</Header4>
+      <Text>
+        {'暂时没有实现，不过你可以在 '}
+        <ProjectIssue id={34} title="[UI] 全部下载功能" />
+        {' 以及 '}
+        <ProjectIssue id={43} title="批量下载" />
+        {' 追踪该问题。'}
+      </Text>
+
+      <Header4>安卓: 浏览器支持说明</Header4>
+      <Text>⚠️ 手机端浏览器支持有限，请使用最新版本的 Chrome 或 Firefox 官方浏览器。</Text>
+      <Text>已知有问题的浏览器：</Text>
+      <UnorderedList>
+        <ListItem>Via 浏览器</ListItem>
+        <ListItem>夸克浏览器</ListItem>
+        <ListItem>UC 浏览器</ListItem>
+      </UnorderedList>
+      <Text>可能会遇到的问题包括：</Text>
+      <UnorderedList>
+        <ListItem>网页白屏</ListItem>
+        <ListItem>无法下载解密后内容</ListItem>
+        <ListItem>下载的文件名错误</ListItem>
+      </UnorderedList>
+
+      <Header4>安卓: root 相关说明</Header4>
+      <Text>
+        对安卓设备获取 root 特权通常会破坏系统的完整性并导致部分功能无法使用。
+        例如部分厂商的安卓设备会在解锁后丧失保修资格，或导致无法使用 NFC 移动支付功能等限制。
+      </Text>
+      <Text>如果希望不破坏系统完整性，你可以考虑使用模拟器。</Text>
+      <Text>
+        目前常见的带有 root 特权支持的的安卓模拟器方案，分别是雷电模拟器（※ 官方版有内置广告）和微软在 Windows 11
+        开始支援的
+        <ExtLink href="https://learn.microsoft.com/zh-cn/windows/android/wsa/">
+          <ruby>
+            适用于 Android™ 的 Windows 子系统 (WSA)
+            <rp> (</rp>
+            <rt>
+              <code>Windows Subsystem for Android</code>
+            </rt>
+            <rp>)</rp>
+          </ruby>
+        </ExtLink>
+        。
+      </Text>
+
+      <Container p={2}>
+        <Alert status="warning" borderRadius={5}>
+          <AlertIcon />
+          <Flex flexDir="column">
+            <Text>
+              <strong>注意</strong>：根据应用厂商的风控策略，使用模拟器登录的账号<strong>有可能会被封锁</strong>
+              {'；使用前请自行评估风险。'}
+            </Text>
+          </Flex>
+        </Alert>
+      </Container>
+
+      <UnorderedList>
+        <ListItem>
+          <Text>
+            {'WSA 可以参考 '}
+            <ExtLink href="https://github.com/LSPosed/MagiskOnWSALocal">MagiskOnWSALocal</ExtLink>
+            {' 的说明操作。'}
+          </Text>
+        </ListItem>
+        <ListItem>
+          <Text>
+            雷电模拟器可以在<VQuote>模拟器设置</VQuote> → <VQuote>其他设置</VQuote>中启用 root 特权。
+          </Text>
+          <Img borderRadius={5} border="1px solid #ccc" src={LdPlayerSettingsScreen}></Img>
+        </ListItem>
+      </UnorderedList>
+
+      <Header4>相关项目</Header4>
+      <UnorderedList>
+        <ListItem>
+          <Text>
+            <ExtLink href="https://github.com/CarlGao4/um-react-electron">
+              <strong>
+                <Code>um-react-electron</Code>
+              </strong>
+            </ExtLink>
+            ：利用 Electron 框架打包的本地版，提供适用于 Windows、Linux 和 Mac 平台的可执行文件。
+          </Text>
+          <UnorderedList>
+            <ListItem>
+              <Text>
+                <ExtLink href="https://github.com/CarlGao4/um-react-electron/releases/latest">GitHub 下载</ExtLink>
+              </Text>
+            </ListItem>
+          </UnorderedList>
+        </ListItem>
+        <ListItem>
+          <Text>
+            <ExtLink href="https://git.unlock-music.dev/um/um-react-wry">
+              <strong>
+                <Code>um-react-wry</Code>
+              </strong>
+            </ExtLink>
+            : 使用 WRY 框架封装的 Win64 单文件（需要
+            <ExtLink href="https://go.microsoft.com/fwlink/p/?LinkId=2124703">安装 Edge WebView2 运行时</ExtLink>
+            {'，Win10+ 操作系统自带）'}
+          </Text>
+          <UnorderedList>
+            <ListItem>
+              <Text>
+                <ExtLink href="https://git.unlock-music.dev/um/um-react/releases/latest">仓库下载</ExtLink>
+                {' | 寻找文件名为 '}
+                <Code>um-react-win64-</Code> 开头的附件
+              </Text>
+            </ListItem>
+          </UnorderedList>
+        </ListItem>
+      </UnorderedList>
+
+      <Header4>有更多问题？</Header4>
+      <Text>
+        {'欢迎进入 '}
+        <ExtLink href={'https://t.me/unlock_music_chat'}>Telegram “音乐解锁-交流” 交流群</ExtLink>
+        {' 一起探讨。'}
+      </Text>
+    </>
+  );
+}

src/faq/QQMusicFAQ.tsx

@@ -0,0 +1,63 @@
+import { Alert, AlertIcon, Container, Flex, List, ListItem, Text, UnorderedList, chakra } from '@chakra-ui/react';
+import { Header4 } from '~/components/HelpText/Header4';
+import { SegmentTryOfficialPlayer } from './SegmentTryOfficialPlayer';
+import { QMCv2QQMusicAllInstructions } from '~/features/settings/panels/QMCv2/QMCv2QQMusicAllInstructions';
+import { SegmentKeyImportInstructions } from './SegmentKeyImportInstructions';
+import { ExtLink } from '~/components/ExtLink';
+
+export function QQMusicFAQ() {
+  return (
+    <>
+      <Header4>解锁失败</Header4>
+      <List spacing={2}>
+        <ListItem>
+          <SegmentTryOfficialPlayer />
+        </ListItem>
+        <ListItem>
+          <Text>
+            <chakra.strong>2、检查您的平台</chakra.strong>
+          </Text>
+          <Text>
+            日前，仅 Windows 客户端 19.43 或更低版本下载的歌曲文件无需密钥，其余平台的官方正式版本均需要提取密钥。
+            你可以通过下方的链接获取 QQ 音乐 Windows 客户端 v19.43 的安装程序：
+          </Text>
+          <UnorderedList pl={3}>
+            <ListItem>
+              <Text>
+                <ExtLink href="https://dldir1v6.qq.com/music/clntupate/QQMusic_Setup_1943.exe">
+                  <code>qq.com</code> 官方下载地址（推荐）
+                </ExtLink>
+              </Text>
+            </ListItem>
+            <ListItem>
+              <Text>
+                <ExtLink href="https://web.archive.org/web/2023/https://dldir1v6.qq.com/music/clntupate/QQMusic_Setup_1943.exe">
+                  <code>Archive.org</code> 存档
+                </ExtLink>
+              </Text>
+            </ListItem>
+          </UnorderedList>
+
+          <Container p={2}>
+            <Alert status="warning" borderRadius={5}>
+              <AlertIcon />
+              <Flex flexDir="column">
+                <Text>iOS 用户提取歌曲困难，建议换用电脑操作；</Text>
+                <Text>安卓用户提取密钥需要root，也建议用电脑操作。</Text>
+              </Flex>
+            </Alert>
+          </Container>
+
+          <Container p={2} pt={0}>
+            <Alert status="info" borderRadius={5}>
+              <AlertIcon />
+              重复下载同一首的歌曲不重复扣下载配额，但是同一首歌的两个版本会重复扣下载配额，请仔细分辨。
+            </Alert>
+          </Container>
+
+          <SegmentKeyImportInstructions tab="QMCv2 密钥" clientInstructions={<QMCv2QQMusicAllInstructions />} />
+        </ListItem>
+      </List>
+    </>
+  );
+}