feat(theme): add prev/next toggle by lines

organization · Dec 2, 2024 · 72e08fc · 72e08fc
1 parent 215a912
commit 72e08fc
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 3 deletions.
diff --git a/common/constants.ts b/common/constants.ts
@@ -36,6 +36,7 @@ export const DEFAULT_STYLE = {
     previousLyricScale: 0.9,
     nextLyricOpacity: 0.5,
     previousLyricOpacity: 0.5,
+    prevNextLyricThreshold: -1,
   },
 
   position: {

diff --git a/common/intl/translations/en.json b/common/intl/translations/en.json
@@ -194,6 +194,8 @@
   "setting.theme.previous-lyrics-opacity": "Opacity of previous lyrics",
   "setting.theme.next-lyrics-scale": "Scale of next lyrics",
   "setting.theme.previous-lyrics-scale": "Scale of previous lyrics",
+  "setting.theme.prevnext-lyric-threshold": "Number of concurrent lyrics to show prev/next lyrics",
+  "setting.theme.prevnext-lyric-threshold-description": "If the average number of lyric lines exceeds this value, do not show previous/next lyrics.\nIf -1, always show.",
   "setting.theme.theme": "Theme preference",
   "setting.theme.user-css": "Custom CSS",
   "setting.theme.reset": "Reset",

diff --git a/common/intl/translations/ko.json b/common/intl/translations/ko.json
@@ -194,6 +194,8 @@
   "setting.theme.previous-lyrics-opacity": "이전 가사 투명도",
   "setting.theme.next-lyrics-scale": "다음 가사 크기",
   "setting.theme.previous-lyrics-scale": "이전 가사 크기",
+  "setting.theme.prevnext-lyric-threshold": "이전/다음 가사를 보여주기 위한 최대 평균 줄 수",
+  "setting.theme.prevnext-lyric-threshold-description": "자막의 평균 줄 수가 이 값을 넘어갈 경우 이전 / 다음 자막을 표시하지 않습니다.\n-1일 경우 항상 표시합니다.",
   "setting.theme.theme": "테마 설정",
   "setting.theme.user-css": "사용자 정의 CSS",
   "setting.theme.reset": "초기화",
@@ -287,4 +289,4 @@
   "provider.source.tuna-obs.port.description": "Tuna OBS 플러그인과 연결할 포트입니다. 기본값은 1608 입니다.",
   "provider.source.tuna-obs.interpolation-time.name": "보간 시간",
   "provider.source.tuna-obs.interpolation-time.description": "Tuna OBS가 정보를 제공하는 간격이 길때 얼마나 자연스럽게 보간을 할지 결정합니다. 기본값은 100이며, 단위는 ms 입니다."
-}
+}
diff --git a/common/schema/config.ts b/common/schema/config.ts
@@ -52,6 +52,7 @@ export const StyleConfigSchema = z.object({
     previousLyricScale: z.number().catch(DEFAULT_STYLE.lyric.previousLyricScale),
     nextLyricOpacity: z.number().catch(DEFAULT_STYLE.lyric.nextLyricOpacity),
     previousLyricOpacity: z.number().catch(DEFAULT_STYLE.lyric.previousLyricOpacity),
+    prevNextLyricThreshold: z.number().catch(DEFAULT_STYLE.lyric.prevNextLyricThreshold),
   }),
 
   position: z.object({

diff --git a/renderer/hooks/useLyric.ts b/renderer/hooks/useLyric.ts
@@ -15,6 +15,15 @@ const useLyric = () => {
   const [lyricMapper] = useLyricMapper();
   const { title, coverUrl, lyrics, progress } = usePlayingInfo();
 
+  const averageLyricLines = createMemo(() => {
+    const lyricsArray = Array.from(lyrics() ?? []);
+    return lyricsArray.reduce((count, row) => count + row.second.length, 0) / lyricsArray.length;
+  });
+
+  const isPrevNextLyricsEnabled = () =>
+    style().lyric.prevNextLyricThreshold < 0 ||
+    averageLyricLines() < style().lyric.prevNextLyricThreshold;
+
   const lastIter = () => {
     const tempLyrics = lyrics();
     if (tempLyrics === null || tempLyrics.size() === 0) return null;
@@ -42,7 +51,7 @@ const useLyric = () => {
   const index = createMemo(() => lastIter()?.first);
 
   const nextLyricsIter = createMemo(() => {
-    let nextLyricLength = style().lyric.nextLyric;
+    let nextLyricLength = isPrevNextLyricsEnabled() ? style().lyric.nextLyric : 0;
 
     const now = lastIter();
     const tempLyrics = lyrics();
@@ -60,7 +69,7 @@ const useLyric = () => {
   });
 
   const getPreviousLyricLength = createMemo(() => {
-    let previousLyricLength = style().lyric.previousLyric;
+    let previousLyricLength = isPrevNextLyricsEnabled() ? style().lyric.previousLyric : 0;
 
     const now = lastIter();
     const tempLyrics = lyrics();

diff --git a/renderer/settings/containers/ThemeContainer.tsx b/renderer/settings/containers/ThemeContainer.tsx
@@ -804,6 +804,24 @@ const ThemeContainer = () => {
           </span>
         </label>
       </Card>
+      <Card class={'flex flex-row justify-between items-center gap-4'}>
+        <div class={'flex flex-col gap-2'}>
+          <div class={'text-md'}>
+            <Trans key={'setting.theme.prevnext-lyric-threshold'}/>
+          </div>
+          <div class={'text-sm opacity-50 whitespace-pre-line'}>
+            <Trans key={'setting.theme.prevnext-lyric-threshold-description'}/>
+          </div>
+        </div>
+        <label class={'input-group group'}>
+          <input
+            type={'number'}
+            class={'input w-48'}
+            value={theme()?.lyric.prevNextLyricThreshold ?? -1}
+            onChange={(event) => setTheme({ lyric: { prevNextLyricThreshold: event.target.valueAsNumber } })}
+          />
+        </label>
+      </Card>
     </div>
     <div class={'text-md mt-4 mb-1 px-4'}>
       <Trans key={'setting.theme.theme'}/>