um/um-react
18
30
Fork 0
Code Issues 13 Pull Requests Packages Projects 1 Releases 2 Wiki Activity

feat: add mac import option and help text

Browse Source
This commit is contained in:
鲁树人 2023-06-13 00:26:30 +01:00
parent f2c93c9f85
commit 88cf2f972b
10 changed files with 273 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Key/MacCommandKey.tsx Normal file
View File

@ -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>
);
}

15
src/components/Key/ShiftKey.tsx Normal file
View File

@ -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>
);
}

33
src/features/settings/panels/QMCv2/ImportFileModal.tsx
View File

@ -20,13 +20,21 @@ import { qmc2ImportKeys } from '../../settingsSlice';
import { useAppDispatch } from '~/hooks';
import { DatabaseKeyExtractor } from '~/util/DatabaseKeyExtractor';
import { QMCv2AndroidInstructions } from './QMCv2AndroidInstructions';
import { InstructionsAndroid } from './InstructionsAndroid';
import { MMKVParser } from '~/util/MMKVParser';
import { getFileName } from '~/util/pathHelper';
import { InstructionsMac } from './InstructionsMac';
export interface ImportFileModalProps {
show: boolean;
onClose: () => void;
}
interface KeyEntry {
name: string;
key: string;
}
export function ImportFileModal({ onClose, show }: ImportFileModalProps) {
const dispatch = useAppDispatch();
const toast = useToast();
@ -35,9 +43,21 @@ export function ImportFileModal({ onClose, show }: ImportFileModalProps) {
const file = files[0];
const fileBuffer = await file.arrayBuffer();
let qmc2Keys: null | KeyEntry[] = null;
if (/[_.]db$/i.test(file.name)) {
const extractor = await DatabaseKeyExtractor.getInstance();
const qmc2Keys = extractor.extractQmAndroidDbKeys(fileBuffer);
qmc2Keys = extractor.extractQmAndroidDbKeys(fileBuffer);
if (!qmc2Keys) {
alert(`不是支持的 SQLite 数据库文件。\n表名：${qmc2Keys}`);
return;
}
} else if (/MMKVStreamEncryptId/i.test(file.name)) {
const fileBuffer = await file.arrayBuffer();
const map = MMKVParser.toStringMap(new DataView(fileBuffer));
qmc2Keys = Array.from(map.entries(), ([name, key]) => ({ name: getFileName(name), key }));
}
if (qmc2Keys) {
dispatch(qmc2ImportKeys(qmc2Keys));
onClose();
@ -48,9 +68,6 @@ export function ImportFileModal({ onClose, show }: ImportFileModalProps) {
duration: 5000,
status: 'success',
});
return;
}
alert(`不是支持的 SQLite 数据库文件。\n表名：${qmc2Keys}`);
} else {
alert(`不支持的文件：${file.name}`);
}
@ -74,14 +91,14 @@ export function ImportFileModal({ onClose, show }: ImportFileModalProps) {
<Flex as={Tabs} variant="enclosed" flexDir="column" mt={4} flex={1} minH={0}>
<TabList>
<Tab>安卓客户端</Tab>
{/* <Tab>Two</Tab> */}
<Tab>Mac 客户端</Tab>
</TabList>
<TabPanels flex={1} overflow="auto">
<TabPanel>
<QMCv2AndroidInstructions />
<InstructionsAndroid />
</TabPanel>
<TabPanel>
<p>two!</p>
<InstructionsMac />
</TabPanel>
</TabPanels>
</Flex>

54
src/features/settings/panels/QMCv2/QMCv2AndroidInstructions.tsx → src/features/settings/panels/QMCv2/InstructionsAndroid.tsx
View File

@ -5,6 +5,7 @@ import {
AccordionItem,
AccordionPanel,
Box,
Code,
Heading,
Link,
ListItem,
@ -19,7 +20,7 @@ import hljsStyleGitHub from 'react-syntax-highlighter/dist/esm/styles/hljs/githu
import PowerShellAdbDumpCommand from './adb_dump.ps1?raw';
import ShellAdbDumpCommand from './adb_dump.sh?raw';
export function QMCv2AndroidInstructions() {
export function InstructionsAndroid() {
return (
<>
<Text>
@ -43,11 +44,25 @@ export function QMCv2AndroidInstructions() {
<AccordionPanel pb={4}>
<OrderedList>
<ListItem>
使用具有 <code>root</code> 权限的文件浏览器，访问 <code>/data/data/com.tencent.qqmusic/databases/</code>
{' 目录，将文件 '}
<code>player_process_db</code> 复制到正常模式下用户可访问的目录（如下载目录）。
<Text>
启动具有 <Code>root</Code> 特权的文件浏览器
</Text>
</ListItem>
<ListItem>
<Text>
访问 <Code>/data/data/com.tencent.qqmusic/databases/</Code> 目录。
</Text>
</ListItem>
<ListItem>
<Text>
将文件 <Code>player_process_db</Code> 复制到浏览器可访问的目录。
<br />
（例如下载目录）
</Text>
</ListItem>
<ListItem>
<Text>提交该数据库文件。</Text>
</ListItem>
<ListItem>提交该数据库文件。</ListItem>
</OrderedList>
</AccordionPanel>
</AccordionItem>
@ -64,24 +79,33 @@ export function QMCv2AndroidInstructions() {
<AccordionPanel pb={4}>
<OrderedList>
<ListItem>
<Text>
确保 <code>adb</code> 命令可用。
<br />
</Text>
<Text>
💡 如果没有，可以
<Link href="https://scoop.sh/#/apps?q=adb" isExternal>
使用 Scoop 安装 <ExternalLinkIcon />
</Link>
。
</Text>
</ListItem>
<ListItem>启动终端并进入 PowerShell 7 环境。</ListItem>
<ListItem>将安卓设备连接到电脑，并允许调试。</ListItem>
<ListItem>
粘贴执行下述代码。若设备提示「超级用户请求」请允许：
<Text>启动终端并进入 PowerShell 7 环境。</Text>
</ListItem>
<ListItem>
<Text>将安卓设备连接到电脑，并允许调试。</Text>
</ListItem>
<ListItem>
<Text>粘贴执行下述代码。若设备提示「超级用户请求」请允许：</Text>
<SyntaxHighlighter language="ps1" style={hljsStyleGitHub}>
{PowerShellAdbDumpCommand}
</SyntaxHighlighter>
</ListItem>
<ListItem>
提交当前目录下的 <code>player_process_db</code> 文件。
<Text>
提交当前目录下的 <Code>player_process_db</Code> 文件。
</Text>
</ListItem>
</OrderedList>
</AccordionPanel>
@ -98,15 +122,19 @@ export function QMCv2AndroidInstructions() {
</Heading>
<AccordionPanel pb={4}>
<OrderedList>
<ListItem>将安卓设备连接到电脑，并允许调试。</ListItem>
<ListItem>
粘贴执行下述代码。若设备提示「超级用户请求」请允许：
<Text>将安卓设备连接到电脑，并允许调试。</Text>
</ListItem>
<ListItem>
<Text>粘贴执行下述代码。若设备提示「超级用户请求」请允许：</Text>
<SyntaxHighlighter language="bash" style={hljsStyleGitHub}>
{ShellAdbDumpCommand}
</SyntaxHighlighter>
</ListItem>
<ListItem>
提交当前目录下的 <code>player_process_db</code> 文件。
<Text>
提交当前目录下的 <Code>player_process_db</Code> 文件。
</Text>
</ListItem>
</OrderedList>
</AccordionPanel>

50
src/features/settings/panels/QMCv2/InstructionsMac.tsx Normal file
View File

@ -0,0 +1,50 @@
import { Heading, Text, Code, Kbd, OrderedList, ListItem } from '@chakra-ui/react';
import { MacCommandKey } from '~/components/Key/MacCommandKey';
import { ShiftKey } from '~/components/Key/ShiftKey';
export function InstructionsMac() {
return (
<>
<Text>Mac 客户端使用 mmkv 数据库储存密钥。</Text>
<Text>该密钥文件通常存储在下述路径：</Text>
<Text as="pre" whiteSpace="pre-wrap" wordBreak="break-word" lang="en">
<Code>
~/Library/Containers/com.tencent.QQMusicMac/Data/Library/Application
Support/QQMusicMac/mmkv/MMKVStreamEncryptId
</Code>
</Text>
<Heading as="h3" size="md" mt="4">
导入密钥
</Heading>
<OrderedList>
<ListItem>
<Text>
选中并复制上述的 <Code>MMKVStreamEncryptId</Code> 文件路径
</Text>
</ListItem>
<ListItem>
<Text>点击上方的「文件选择区域」，打开「文件选择框」</Text>
</ListItem>
<ListItem>
<Text>
按下「
<ShiftKey />
{' + '}
<MacCommandKey />
{' + '}
<Kbd>{'G'}</Kbd>」组合键打开「路径输入框」
</Text>
</ListItem>
<ListItem>
<Text>
粘贴之前复制的 <Code>MMKVStreamEncryptId</Code> 文件路径
</Text>
</ListItem>
<ListItem>
<Text>按下「回车键」确认。</Text>
</ListItem>
</OrderedList>
</>
);
}

10
src/theme.ts
View File

@ -20,16 +20,6 @@ export const theme = extendTheme({
},
},
Tabs: tabsTheme,
Heading: {
baseStyle: {
userSelect: 'none',
},
},
Text: {
baseStyle: {
userSelect: 'none',
},
},
Link: {
baseStyle: {
color: 'blue.600',

3
src/util/DatabaseKeyExtractor.ts
View File

@ -1,3 +1,4 @@
import { getFileName } from './pathHelper';
import { SQLDatabase, SQLStatic, loadSQL } from './sqlite';
export interface QMAndroidKeyEntry {
@ -34,7 +35,7 @@ export class DatabaseKeyExtractor {
const keys = db.exec('select file_path, ekey from `audio_file_ekey_table`')[0].values;
return keys.map(([path, key]) => ({
// strip dir name
name: String(path).replace(/.+\//, ''),
name: getFileName(String(path)),
key: String(key),
}));
} finally {

95
src/util/MMKVParser.ts Normal file
View File

@ -0,0 +1,95 @@
const textDecoder = new TextDecoder('utf-8', { ignoreBOM: true });
export class MMKVParser {
private offset = 8;
private length: number;
constructor(private view: DataView) {
const payloadLength = view.getUint32(0, true);
this.length = 4 + payloadLength;
}
toString() {
const offset = this.offset.toString(16).padStart(8, '0');
const length = this.length.toString(16).padStart(8, '0');
return `<MMKVParser offset=0x${offset} len=0x${length}>`;
}
get eof() {
return this.offset >= this.length;
}
peek() {
return this.view.getUint8(this.offset);
}
public readByte() {
return this.view.getUint8(this.offset++);
}
public readBigInt() {
let value = 0n;
let shift = 0n;
let b: number;
do {
b = this.readByte();
value |= BigInt(b & 0x7f) << shift;
shift += 7n;
} while ((b & 0x80) !== 0);
return value;
}
public readInt() {
const value = this.readBigInt();
if (value > Number.MAX_SAFE_INTEGER) {
throw new Error('Runtime Error: BigInt too large to cast as number');
}
return Number(value);
}
public readBytes(n: number) {
const offset = this.offset;
const end = offset + n;
this.offset = end;
return new Uint8Array(this.view.buffer.slice(offset, end));
}
public readString() {
// String [
// len: int,
// data: byte[int], # utf-8
// ]
const strByteLen = this.readInt();
const data = this.readBytes(strByteLen);
return textDecoder.decode(data).normalize();
}
public readVariantString() {
// Container [
// len: int,
// data: variant
// ]
const containerLen = this.readInt();
const newOffset = this.offset + containerLen;
const result = this.readString();
if (newOffset !== this.offset) {
throw new Error('readVariantString failed: offset does not match');
}
return result;
}
public static toStringMap(view: DataView): Map<string, string> {
const mmkv = new MMKVParser(view);
const result = new Map<string, string>();
while (!mmkv.eof) {
const key = mmkv.readString();
const value = mmkv.readVariantString();
result.set(key, value);
}
return result;
}
}

13
src/util/__tests__/pathHelper.test.ts Normal file
View File

@ -0,0 +1,13 @@
import { getFileName } from '../pathHelper';
test('handle linux path', () => {
expect(getFileName('/path/to/file.bin')).toEqual('file.bin');
});
test('handle win32 path', () => {
expect(getFileName('C:\\system32\\file.bin')).toEqual('file.bin');
});
test('handle file name only as well', () => {
expect(getFileName('file.bin')).toEqual('file.bin');
});

3
src/util/pathHelper.ts Normal file
View File

@ -0,0 +1,3 @@
export function getFileName(path: string) {
return path.replace(/.*[\\/]/, '');
}