feat: add basic instruction to paste device key from qtfm-device-id

src/features/settings/panels/PanelQingTing.tsx

@@ -1,43 +1,118 @@
-import { Box, Flex, Heading, Input, Table, Tbody, Td, Text, Th, Tr } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Code,
+  Flex,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Heading,
+  Icon,
+  Input,
+  Text,
+} from '@chakra-ui/react';
 
-import { qtfmAndroidUpdateKey } from '../settingsSlice';
 import { useAppDispatch, useAppSelector } from '~/hooks';
-import { selectStagingQtfmAndroidDevice } from '../settingsSelector';
-import type { QingTingDeviceInfo } from '@jixun/libparakeet';
+import { fetchParakeet } from '@jixun/libparakeet';
+import { MdLock } from 'react-icons/md';
+import { ExtLink } from '~/components/ExtLink';
+import { ChangeEvent, ClipboardEvent } from 'react';
+import { VQuote } from '~/components/HelpText/VQuote';
+import { selectStagingQtfmAndroidKey } from '../settingsSelector';
+import { qtfmAndroidUpdateKey } from '../settingsSlice';
 
-const QTFM_ANDROID_DEVICE_PROPS = ['product', 'device', 'manufacturer', 'brand', 'board', 'model'] as const;
+const QTFM_DEVICE_ID_URL = 'https://github.com/parakeet-rs/qtfm-device-id/releases/latest';
 
 export function PanelQingTing() {
   const dispatch = useAppDispatch();
-  const qingTingAndroidDeviceInfo = useAppSelector(selectStagingQtfmAndroidDevice);
-  const handleChangeDeviceInfo = (name: keyof QingTingDeviceInfo) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    dispatch(qtfmAndroidUpdateKey({ field: name, value: e.target.value }));
+  const secretKey = useAppSelector(selectStagingQtfmAndroidKey);
+  const setSecretKey = (secretKey: string) => {
+    dispatch(qtfmAndroidUpdateKey({ deviceKey: secretKey }));
+  };
+
+  const handleDataPaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    const plainText = e.clipboardData.getData('text/plain');
+    const matchDeviceSecret = plainText.match(/^DEVICE_SECRET: ([0-9a-fA-F]+)/m);
+    if (matchDeviceSecret) {
+      e.preventDefault();
+      setSecretKey(matchDeviceSecret[1]);
+      return;
+    }
+
+    const dataMap = new Map();
+    for (const [_unused, key, value] of plainText.matchAll(
+      /^(PRODUCT|DEVICE|MANUFACTURER|BRAND|BOARD|MODEL): (.+)/gim,
+    )) {
+      dataMap.set(key.toLowerCase(), value);
+    }
+
+    const product = dataMap.get('product') ?? null;
+    const device = dataMap.get('device') ?? null;
+    const manufacturer = dataMap.get('manufacturer') ?? null;
+    const brand = dataMap.get('brand') ?? null;
+    const board = dataMap.get('board') ?? null;
+    const model = dataMap.get('model') ?? null;
+    if (
+      product !== null &&
+      device !== null &&
+      manufacturer !== null &&
+      brand !== null &&
+      board !== null &&
+      model !== null
+    ) {
+      e.preventDefault();
+      fetchParakeet().then((parakeet) => {
+        setSecretKey(parakeet.qtfm.createDeviceKey(product, device, manufacturer, brand, board, model));
+      });
+    }
+  };
+
+  const handleDataInput = (e: ChangeEvent<HTMLInputElement>) => {
+    setSecretKey(e.target.value);
   };
 
   return (
     <Flex minH={0} flexDir="column" flex={1}>
       <Heading as="h2" size="lg">
-        「蜻蜓 FM」设备信息
+        <VQuote>蜻蜓 FM</VQuote>
+        设备密钥
       </Heading>
 
-      <Text>「蜻蜓 FM」安卓版本需要获取设备信息用于生成解密密钥。</Text>
-
-      <Box flex={1} minH={0} overflow="auto" pr="4">
-        <Table>
-          <Tbody>
-            {QTFM_ANDROID_DEVICE_PROPS.map((name) => (
-              <Tr key={name}>
-                <Th w="1px" p={1} textAlign="right">
-                  {name}
-                </Th>
-                <Td pl={1} pr={1}>
-                  <Input value={qingTingAndroidDeviceInfo[name]} onChange={handleChangeDeviceInfo(name)} />
-                </Td>
-              </Tr>
-            ))}
-          </Tbody>
-        </Table>
+      <Text>
+        <VQuote>蜻蜓 FM</VQuote>安卓版本需要获取设备密钥，并以此来生成解密密钥。
+      </Text>
+      <Box display="none">
+        {/* TODO: 解密弹窗、带步骤说明 */}
+        <Box p={2} pt={4} pb={4}>
+          <Button onClick={() => {}} leftIcon={<Icon as={MdLock} boxSize={5} />} variant="outline">
+            获取解密密钥
+          </Button>
+        </Box>
       </Box>
+
+      <Box mt={3} mb={3}>
+        <FormControl>
+          <FormLabel>解密密钥</FormLabel>
+          <Input type="text" onPaste={handleDataPaste} value={secretKey} onChange={handleDataInput} />
+          <FormHelperText>
+            {'粘贴含有密钥的信息时将自动提取密钥（如通过 '}
+            <ExtLink href={QTFM_DEVICE_ID_URL}>
+              <Code>qtfm-device-id</Code>
+            </ExtLink>
+            {' 获取的内容）。'}
+          </FormHelperText>
+        </FormControl>
+      </Box>
+
+      {/* TODO: 填入内部储存开始的完整路径 */}
+      <Text>
+        注：<VQuote>蜻蜓 FM</VQuote>下载的文件储存在 <Code>QTDownloadRadio</Code> 目录下，并使用
+        <VQuote>
+          <Code>.</Code>
+        </VQuote>
+        开始的文件名。
+      </Text>
+      <Text>因为解密密钥与文件名相关，因此解密前请不要更改文件名。</Text>
     </Flex>
   );
 }

src/features/settings/panels/QingTingFM/QingTingImport.ts

@@ -0,0 +1 @@
+// TODO: Popup dialog for QingTing instructions

src/features/settings/persistSettings.ts

@@ -2,11 +2,10 @@ import { debounce } from 'radash';
 import { produce } from 'immer';
 
 import type { AppStore } from '~/store';
-import { settingsSlice, setProductionChanges, ProductionSettings, QINGTING_DEVICE_INFO_KEY } from './settingsSlice';
+import { settingsSlice, setProductionChanges, ProductionSettings } from './settingsSlice';
 import { enumObject } from '~/util/objects';
 import { getLogger } from '~/util/logUtils';
 import { parseKwm2ProductionKey } from './keyFormats';
-import type { QingTingDeviceInfo } from '@jixun/libparakeet';
 
 const DEFAULT_STORAGE_KEY = 'um-react-settings';
 
@@ -35,14 +34,8 @@ function mergeSettings(settings: ProductionSettings): ProductionSettings {
       }
     }
 
-    if (settings?.qtfm?.android) {
-      const qtfmAndroid = settings.qtfm.android;
-      draft.qtfm.android = Object.fromEntries(
-        QINGTING_DEVICE_INFO_KEY.map((key) => {
-          const value = qtfmAndroid[key];
-          return [key, typeof value === 'string' ? value : ''];
-        }),
-      ) as unknown as QingTingDeviceInfo;
+    if (typeof settings?.qtfm?.android === 'string') {
+      draft.qtfm.android = settings.qtfm.android.replace(/[^0-9a-fA-F]/g, '');
     }
   });
 }

src/features/settings/settingsSelector.ts

@@ -48,5 +48,5 @@ export const selectKWMv2Key = (state: RootState, headerView: DataView): string |
   return ekey;
 };
 
-export const selectStagingQtfmAndroidDevice = (state: RootState) => state.settings.staging.qtfm.android;
-export const selectQtfmAndroidDevice = (state: RootState) => state.settings.production.qtfm.android;
+export const selectStagingQtfmAndroidKey = (state: RootState) => state.settings.staging.qtfm.android;
+export const selectQtfmAndroidKey = (state: RootState) => state.settings.production.qtfm.android;

src/features/settings/settingsSlice.ts

@@ -1,4 +1,3 @@
-import type { QingTingDeviceInfo } from '@jixun/libparakeet';
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { nanoid } from 'nanoid';
@@ -17,24 +16,6 @@ import {
   stagingKeyToProduction,
 } from './keyFormats';
 
-export const QINGTING_DEVICE_INFO_KEY: (keyof QingTingDeviceInfo)[] = [
-  'product',
-  'device',
-  'manufacturer',
-  'brand',
-  'board',
-  'model',
-];
-
-const DEFAULT_QINGTING_ANDROID_DEVICE_INFO: QingTingDeviceInfo = {
-  product: '',
-  device: '',
-  manufacturer: '',
-  brand: '',
-  board: '',
-  model: '',
-};
-
 export interface StagingSettings {
   qmc2: {
     keys: StagingQMCv2Key[];
@@ -44,7 +25,7 @@ export interface StagingSettings {
     keys: StagingKWMv2Key[];
   };
   qtfm: {
-    android: QingTingDeviceInfo;
+    android: string;
   };
 }
 
@@ -57,7 +38,7 @@ export interface ProductionSettings {
     keys: ProductionKWMv2Keys; // { [`${rid}-${quality}`]: ekey }
   };
   qtfm: {
-    android: QingTingDeviceInfo;
+    android: string;
   };
 }
 
@@ -71,12 +52,12 @@ const initialState: SettingsState = {
   staging: {
     qmc2: { allowFuzzyNameSearch: true, keys: [] },
     kwm2: { keys: [] },
-    qtfm: { android: DEFAULT_QINGTING_ANDROID_DEVICE_INFO },
+    qtfm: { android: '' },
   },
   production: {
     qmc2: { allowFuzzyNameSearch: true, keys: {} },
     kwm2: { keys: {} },
-    qtfm: { android: DEFAULT_QINGTING_ANDROID_DEVICE_INFO },
+    qtfm: { android: '' },
   },
 };
 
@@ -171,11 +152,8 @@ export const settingsSlice = createSlice({
         state.dirty = true;
       }
     },
-    qtfmAndroidUpdateKey(
-      state,
-      { payload: { field, value } }: PayloadAction<{ field: keyof QingTingDeviceInfo; value: string }>,
-    ) {
-      state.staging.qtfm.android[field] = value;
+    qtfmAndroidUpdateKey(state, { payload: { deviceKey } }: PayloadAction<{ deviceKey: string }>) {
+      state.staging.qtfm.android = deviceKey;
       state.dirty = true;
     },
     kwm2ClearKeys(state) {