简单实装歌词掩码功能

修正空拍组件布局

Author: Steve-xmh

locales/en-US/translation.json

@@ -60,6 +60,7 @@
 			"lyrics": "Lyrics",
 			"showTranslation": "Show Translation",
 			"showRoman": "Show Romanization",
+			"maskObsceneWords": "Mask Obscene Words",
 			"word": "Word",
 			"fadeWidth": "Fade Width"
 		},
@@ -513,4 +514,4 @@
 		"updateRefresh": "Site updated, refresh to use the latest version!",
 		"refresh": "Refresh"
 	}
-}
+}

locales/zh-CN/translation.json

@@ -60,6 +60,7 @@
 			"lyrics": "歌词",
 			"showTranslation": "显示翻译",
 			"showRoman": "显示音译",
+			"maskObsceneWords": "屏蔽不雅用语",
 			"word": "单词",
 			"fadeWidth": "过渡宽度"
 		},
@@ -513,4 +514,4 @@
 		"updateRefresh": "网站已更新，刷新网页以使用最新版本！",
 		"refresh": "刷新"
 	}
-}
+}

src/components/AMLLWrapper/index.tsx

@@ -2,8 +2,19 @@
 // #warning Using local Apple Music Like Lyrics, skip importing css style
 // #else
 import "@applemusic-like-lyrics/core/style.css";
+
 // #endif
 
+import { audioEngine } from "$/modules/audio/audio-engine";
+import { audioPlayingAtom, currentTimeAtom } from "$/modules/audio/states";
+import {
+	hideObsceneWordsAtom,
+	lyricWordFadeWidthAtom,
+	showRomanLinesAtom,
+	showTranslationLinesAtom,
+} from "$/modules/settings/states/preview";
+import { isDarkThemeAtom, lyricLinesAtom } from "$/states/main.ts";
+import { MaskObsceneWordsMode } from "@applemusic-like-lyrics/core";
 import {
 	LyricPlayer,
 	type LyricPlayerRef,
@@ -13,14 +24,6 @@ import structuredClone from "@ungap/structured-clone";
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
 import { memo, useEffect, useMemo, useRef } from "react";
-import { audioEngine } from "$/modules/audio/audio-engine";
-import { audioPlayingAtom, currentTimeAtom } from "$/modules/audio/states";
-import {
-	lyricWordFadeWidthAtom,
-	showRomanLinesAtom,
-	showTranslationLinesAtom,
-} from "$/modules/settings/states/preview";
-import { isDarkThemeAtom, lyricLinesAtom } from "$/states/main.ts";
 import styles from "./index.module.css";
 
 export const AMLLWrapper = memo(() => {
@@ -30,6 +33,7 @@ export const AMLLWrapper = memo(() => {
 	const darkMode = useAtomValue(isDarkThemeAtom);
 	const showTranslationLines = useAtomValue(showTranslationLinesAtom);
 	const showRomanLines = useAtomValue(showRomanLinesAtom);
+	const hideObsceneWords = useAtomValue(hideObsceneWordsAtom);
 	const wordFadeWidth = useAtomValue(lyricWordFadeWidthAtom);
 	const playerRef = useRef<LyricPlayerRef>(null);
 
@@ -63,6 +67,11 @@ export const AMLLWrapper = memo(() => {
 				lyricLines={lyricLines}
 				currentTime={currentTime}
 				playing={isPlaying}
+				maskObsceneWordsMode={
+					hideObsceneWords
+						? MaskObsceneWordsMode.FullMask
+						: MaskObsceneWordsMode.Disabled
+				}
 				wordFadeWidth={wordFadeWidth}
 				ref={playerRef}
 			/>

src/components/RibbonBar/preview-mode.tsx

@@ -9,15 +9,16 @@
  * https://github.com/Steve-xmh/amll-ttml-tool/blob/main/LICENSE
  */
 
-import { Checkbox, Grid, Text, TextField } from "@radix-ui/themes";
-import { useAtom } from "jotai";
-import { forwardRef } from "react";
-import { useTranslation } from "react-i18next";
 import {
+	hideObsceneWordsAtom,
 	lyricWordFadeWidthAtom,
 	showRomanLinesAtom,
 	showTranslationLinesAtom,
 } from "$/modules/settings/states/preview";
+import { Checkbox, Grid, Text, TextField } from "@radix-ui/themes";
+import { useAtom } from "jotai";
+import { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
 import { RibbonFrame, RibbonSection } from "./common";
 
 export const PreviewModeRibbonBar = forwardRef<HTMLDivElement>(
@@ -26,6 +27,8 @@ export const PreviewModeRibbonBar = forwardRef<HTMLDivElement>(
 			showTranslationLinesAtom,
 		);
 		const [showRomanLine, setShowRomanLine] = useAtom(showRomanLinesAtom);
+		const [hideObsceneWords, setHideObsceneWords] =
+			useAtom(hideObsceneWordsAtom);
 		const [lyricWordFadeWidth, setLyricWordFadeWidth] = useAtom(
 			lyricWordFadeWidthAtom,
 		);
@@ -49,6 +52,13 @@ export const PreviewModeRibbonBar = forwardRef<HTMLDivElement>(
 							checked={showRomanLine}
 							onCheckedChange={(v) => setShowRomanLine(!!v)}
 						/>
+						<Text wrap="nowrap" size="1">
+							{t("ribbonBar.previewMode.maskObsceneWords", "屏蔽不雅用语")}
+						</Text>
+						<Checkbox
+							checked={hideObsceneWords}
+							onCheckedChange={(v) => setHideObsceneWords(!!v)}
+						/>
 					</Grid>
 				</RibbonSection>
 				<RibbonSection label={t("ribbonBar.previewMode.word", "单词")}>

src/components/RibbonBar/sync-mode.tsx

@@ -9,17 +9,6 @@
  * https://github.com/Steve-xmh/amll-ttml-tool/blob/main/LICENSE
  */
 
-import {
-	Checkbox,
-	Flex,
-	Grid,
-	Slider,
-	Text,
-	TextField,
-} from "@radix-ui/themes";
-import { useAtom, useAtomValue } from "jotai";
-import { type FC, forwardRef } from "react";
-import { useTranslation } from "react-i18next";
 import { useCurrentLocation } from "$/modules/lyric-editor/utils/lyric-states.ts";
 import {
 	displayRomanizationInSyncAtom,
@@ -39,6 +28,17 @@ import {
 	keySyncNextAtom,
 	keySyncStartAtom,
 } from "$/states/keybindings.ts";
+import {
+	Checkbox,
+	Flex,
+	Grid,
+	Slider,
+	Text,
+	TextField,
+} from "@radix-ui/themes";
+import { useAtom, useAtomValue } from "jotai";
+import { type FC, forwardRef } from "react";
+import { useTranslation } from "react-i18next";
 import { KeyBinding } from "../KeyBinding/index.tsx";
 import { RibbonFrame, RibbonSection } from "./common";
 
@@ -95,7 +95,9 @@ export const SyncModeRibbonBar: FC = forwardRef<HTMLDivElement>(
 				<RibbonSection
 					label={t("ribbonBar.syncMode.currentEmptyBeat", "当前空拍")}
 				>
-					<EmptyBeatField />
+					<Grid columns="0fr 4em" gap="4" gapY="1" flexGrow="1" align="center">
+						<EmptyBeatField />
+					</Grid>
 				</RibbonSection>
 				<RibbonSection
 					label={t("ribbonBar.syncMode.syncAdjustment", "打轴调整")}

src/modules/settings/states/preview.ts

@@ -5,6 +5,7 @@ export const showTranslationLinesAtom = atomWithStorage(
 	false,
 );
 export const showRomanLinesAtom = atomWithStorage("showRomanLines", false);
+export const hideObsceneWordsAtom = atomWithStorage("hideObsceneWords", false);
 export const lyricWordFadeWidthAtom = atomWithStorage(
 	"lyricWordFadeWidth",
 	0.5,