feat: add batch ignore for background line (#186)

* feat: add batch ignore for background line

* fix: a patch of 5e8485e

Author: Xionghaizi001

src/components/RibbonBar/edit-mode.tsx

@@ -545,7 +545,7 @@ const AuxiliaryDisplayField: FC = () => {
 
 export const EditModeRibbonBar: FC = forwardRef<HTMLDivElement>(
 	(_props, ref) => {
-		const editLyricLines = useSetAtom(lyricLinesAtom);
+		const editLyricLines = useSetImmerAtom(lyricLinesAtom);
 		const { t } = useTranslation();
 
 		return (
@@ -556,11 +556,8 @@ export const EditModeRibbonBar: FC = forwardRef<HTMLDivElement>(
 							size="1"
 							variant="soft"
 							onClick={() =>
-								editLyricLines((prev) => {
-									return {
-										...prev,
-										lyricLines: [...prev.lyricLines, newLyricLine()],
-									};
+								editLyricLines((draft) => {
+									draft.lyricLines.push(newLyricLine());
 								})
 							}
 						>
@@ -588,9 +585,9 @@ export const EditModeRibbonBar: FC = forwardRef<HTMLDivElement>(
 					<Grid columns="0fr 0fr" gap="4" gapY="1" flexGrow="1" align="center">
 						<CheckboxField
 							label={t("ribbonBar.editMode.bgLyric", "背景歌词")}
+							defaultValue={false}
 							isWordField={false}
 							fieldName="isBG"
-							defaultValue={false}
 						/>
 						<CheckboxField
 							label={t("ribbonBar.editMode.duetLyric", "对唱歌词")}

src/components/RibbonBar/sync-mode.tsx

@@ -28,6 +28,7 @@ import {
 	keySyncNextAtom,
 	keySyncStartAtom,
 } from "$/states/keybindings.ts";
+import { bgLyricIgnoreSyncAtom, lyricLinesAtom } from "$/states/main.ts";
 import {
 	Checkbox,
 	Flex,
@@ -37,6 +38,7 @@ import {
 	TextField,
 } from "@radix-ui/themes";
 import { useAtom, useAtomValue } from "jotai";
+import { useSetImmerAtom } from "jotai-immer";
 import { type FC, forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import { KeyBinding } from "../KeyBinding/index.tsx";
@@ -84,6 +86,10 @@ export const SyncModeRibbonBar: FC = forwardRef<HTMLDivElement>(
 		const [displayRomanizationInSync, setdisplayRomanizationInSync] = useAtom(
 			displayRomanizationInSyncAtom,
 		);
+		const [bgLyricIgnoreSync, setBgLyricIgnoreSync] = useAtom(
+			bgLyricIgnoreSyncAtom,
+		);
+		const editLyricLines = useSetImmerAtom(lyricLinesAtom);
 		const showWordRomanizationInput = useAtomValue(
 			showWordRomanizationInputAtom,
 		);
@@ -140,6 +146,27 @@ export const SyncModeRibbonBar: FC = forwardRef<HTMLDivElement>(
 							checked={showTouchSyncPanel}
 							onCheckedChange={(v) => setShowTouchSyncPanel(!!v)}
 						/>
+						<Text wrap="nowrap" size="1">
+							{t(
+								"ribbonBar.syncMode.bgLyricIgnoreSync",
+								"背景歌词忽略打轴",
+							)}
+						</Text>
+						<Checkbox
+							checked={bgLyricIgnoreSync}
+							onCheckedChange={(v) => {
+								const next = !!v;
+								setBgLyricIgnoreSync(next);
+								editLyricLines((state) => {
+									for (const line of state.lyricLines) {
+										if (line.isBG) {
+											line.ignoreSync = next;
+										}
+									}
+									return state;
+								});
+							}}
+						/>
 					</Grid>
 				</RibbonSection>
 				<RibbonSection

src/states/main.ts

@@ -124,6 +124,7 @@ export const showUnselectedLinesAtom = atomWithStorage(
 	"showUnselectedLines",
 	true,
 );
+export const bgLyricIgnoreSyncAtom = atom(false);
 
 export interface EditingTimeFieldState {
 	isWord: boolean;