diff --git a/common/constants.ts b/common/constants.ts index fca8f8af..8198bc0a 100644 --- 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 index 4fcafd4d..e68de312 100644 --- 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 index bb36b7f3..88af509d 100644 --- 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 입니다." -} \ No newline at end of file +} diff --git a/common/schema/config.ts b/common/schema/config.ts index c48a0b8e..2ac0706a 100644 --- 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 index e57f13f4..4915e6a8 100644 --- 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 index 905a8cf7..69eed204 100644 --- a/renderer/settings/containers/ThemeContainer.tsx +++ b/renderer/settings/containers/ThemeContainer.tsx @@ -804,6 +804,24 @@ const ThemeContainer = () => { + +
+
+ +
+
+ +
+
+ +