From 61aeb489c42827c18b4cbf41945bc8d1fd107c4e Mon Sep 17 00:00:00 2001 From: KimJammer <41841812+kimjammer@users.noreply.github.com> Date: Sat, 26 Oct 2024 19:10:00 -0400 Subject: [PATCH 1/4] PoC: Port better-lyrics styling for synced-lyrics --- .../renderer/components/SyncedLine.tsx | 52 ++++++--- src/plugins/synced-lyrics/style.css | 104 ++++++++++++++++-- 2 files changed, 133 insertions(+), 23 deletions(-) diff --git a/src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx b/src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx index 2c54bfebcf..ce5149e705 100644 --- a/src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx +++ b/src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx @@ -1,4 +1,4 @@ -import { createEffect, createMemo } from 'solid-js'; +import { createEffect, createMemo, For } from 'solid-js'; import { currentTime } from './LyricsContainer'; @@ -27,6 +27,16 @@ export const SyncedLine = ({ line }: SyncedLineProps) => { } }); + if (line.text == '') { + return ( + + ); + } + return (
{ _ytAPI?.seekTo(line.timeInMs / 1000); }} > - +
+ + + + {(word, index) => { + return ( + + + + ); + }} + +
); }; diff --git a/src/plugins/synced-lyrics/style.css b/src/plugins/synced-lyrics/style.css index 8795713eb8..683f20910a 100644 --- a/src/plugins/synced-lyrics/style.css +++ b/src/plugins/synced-lyrics/style.css @@ -19,6 +19,41 @@ --upcoming-lyrics: var(--ytmusic-text-secondary); --size-lyrics: 1.2em; --offset-lyrics: 1em; + + /* Colors */ + --blyrics-highlight-color: rgba(255, 255, 255, 0.5); + + /* Typography */ + --blyrics-font-family: Satoshi, Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, + Open Sans, Helvetica Neue, sans-serif; + --blyrics-font-size: 3rem; + --blyrics-font-weight: 700; + --blyrics-line-height: 1.333; + --blyrics-translated-font-size: 2rem; + --blyrics-translated-font-weight: 600; + + /* Animations */ + --blyrics-transition-duration: 0.166s; + --blyrics-opacity-transition: 0.33s; + --blyrics-glow-duration: var(--blyrics-duration, 2s); + --blyrics-wobble-duration: calc(var(--blyrics-duration, 2s) / 2); + + + /* Layout */ + --blyrics-padding: 2rem; + --blyrics-margin: 2rem; + --blyrics-border-radius: 1000rem; + + /* Effects */ + --blyrics-blur-amount: 30px; + --blyrics-scale: 0.95; + --blyrics-active-scale: 1; + --blyrics-inactive-opacity: 0.33; + --blyrics-active-opacity: 1; + --blyrics-translated-opacity: 0.6; + --blyrics-error-opacity: 0.33; + --blyrics-background-blur: 100px; + --blyrics-background-saturate: 2; } .lyric-container { @@ -53,26 +88,77 @@ } .text-lyrics { + font-family: var(--blyrics-font-family) !important; + font-size: var(--blyrics-font-size) !important; + font-weight: var(--blyrics-font-weight) !important; + line-height: var(--blyrics-line-height) !important; + padding-top: var(--blyrics-padding); + padding-bottom: var(--blyrics-padding); + scale: var(--blyrics-scale); + transition: scale var(--blyrics-transition-duration); + display: block; text-align: left; margin: var(--global-margin) 0; - transition: scale 0.3s ease-in-out, translate 0.3s ease-in-out, color 0.1s ease-in-out; + /*transition:*/ + /* scale 0.3s ease-in-out,*/ + /* translate 0.3s ease-in-out,*/ + /* color 0.1s ease-in-out;*/ transform-origin: 0 50%; } +.text-lyrics > span { + display: inline-block; + white-space: pre-wrap; + opacity: var(--blyrics-inactive-opacity); + transition: opacity var(--blyrics-opacity-transition); +} + .previous > .text-lyrics { - color: var(--previous-lyrics); - font-weight: normal; + /*color: var(--previous-lyrics);*/ + /*font-weight: normal;*/ } .current > .text-lyrics { - color: var(--current-lyrics); - font-weight: bold; - scale: var(--size-lyrics); - translate: var(--offset-lyrics) 0; + scale: var(--blyrics-active-scale); + + /*color: var(--current-lyrics);*/ + /*font-weight: bold;*/ + /*scale: var(--size-lyrics);*/ + /*translate: var(--offset-lyrics) 0;*/ +} + +.current > .text-lyrics > span { + opacity: var(--blyrics-active-opacity); + animation: blyrics-glow var(--blyrics-glow-duration) forwards, blyrics-wobble var(--blyrics-wobble-duration) forwards; } .upcoming > .text-lyrics { - color: var(--upcoming-lyrics); - font-weight: normal; + /*color: var(--upcoming-lyrics);*/ + /*font-weight: normal;*/ +} + +/* Animations */ +@keyframes blyrics-wobble { + from { + transform: translateY(0px); + } + 33.33% { + transform: translateY(1.75px); + } + 66.66% { + transform: translateY(-1.75px); + } + to { + transform: translateY(0px); + } +} + +@keyframes blyrics-glow { + 0% { + text-shadow: 0 0 1.5rem var(--blyrics-highlight-color); + } + to { + text-shadow: 0 0 0 var(--blyrics-highlight-color); + } } From f75d060f3d12891776f395f89f2f33d1e8c08d3e Mon Sep 17 00:00:00 2001 From: KimJammer <41841812+kimjammer@users.noreply.github.com> Date: Sun, 27 Oct 2024 23:27:12 -0400 Subject: [PATCH 2/4] Implements new styling as "fancy" line effect --- src/i18n/resources/en.json | 4 + src/plugins/synced-lyrics/index.ts | 4 +- src/plugins/synced-lyrics/menu.ts | 15 +++ .../renderer/components/SyncedLine.tsx | 2 +- .../synced-lyrics/renderer/lyrics/index.ts | 86 +++++++++--- src/plugins/synced-lyrics/style.css | 122 +++++++----------- src/plugins/synced-lyrics/types.ts | 2 +- 7 files changed, 141 insertions(+), 94 deletions(-) diff --git a/src/i18n/resources/en.json b/src/i18n/resources/en.json index 018b528eb5..9e711c53b1 100644 --- a/src/i18n/resources/en.json +++ b/src/i18n/resources/en.json @@ -725,6 +725,10 @@ "line-effect": { "label": "Line effect", "submenu": { + "fancy": { + "label": "Fancy", + "tooltip": "Use large, app-like effects on the current line" + }, "focus": { "label": "Focus", "tooltip": "Make only the current line white" diff --git a/src/plugins/synced-lyrics/index.ts b/src/plugins/synced-lyrics/index.ts index c490631b7e..f1e99952a5 100644 --- a/src/plugins/synced-lyrics/index.ts +++ b/src/plugins/synced-lyrics/index.ts @@ -10,7 +10,7 @@ import type { SyncedLyricsPluginConfig } from './types'; export default createPlugin({ name: () => t('plugins.synced-lyrics.name'), description: () => t('plugins.synced-lyrics.description'), - authors: ['Non0reo', 'ArjixWasTaken'], + authors: ['Non0reo', 'ArjixWasTaken', 'KimJammer'], restartNeeded: true, addedVersion: '3.5.X', config: { @@ -19,7 +19,7 @@ export default createPlugin({ showLyricsEvenIfInexact: true, showTimeCodes: false, defaultTextString: '♪', - lineEffect: 'scale', + lineEffect: 'fancy', } satisfies SyncedLyricsPluginConfig, menu, diff --git a/src/plugins/synced-lyrics/menu.ts b/src/plugins/synced-lyrics/menu.ts index b6f41f863f..b9c7ba3752 100644 --- a/src/plugins/synced-lyrics/menu.ts +++ b/src/plugins/synced-lyrics/menu.ts @@ -30,6 +30,21 @@ export const menu = async ({ toolTip: t('plugins.synced-lyrics.menu.line-effect.tooltip'), type: 'submenu', submenu: [ + { + label: t( + 'plugins.synced-lyrics.menu.line-effect.submenu.fancy.label', + ), + toolTip: t( + 'plugins.synced-lyrics.menu.line-effect.submenu.fancy.tooltip', + ), + type: 'radio', + checked: config.lineEffect === 'fancy', + click() { + setConfig({ + lineEffect: 'fancy', + }); + }, + }, { label: t( 'plugins.synced-lyrics.menu.line-effect.submenu.scale.label', diff --git a/src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx b/src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx index ce5149e705..fd1623e507 100644 --- a/src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx +++ b/src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx @@ -59,7 +59,7 @@ export const SyncedLine = ({ line }: SyncedLineProps) => { style={{ 'transition-delay': `${index() * 0.05}s`, 'animation-delay': `${index() * 0.05}s`, - '--blyrics-duration:': `${line.duration / 1000}s;`, + '--lyrics-duration:': `${line.duration / 1000}s;`, }} > { // Set the line effect switch (config()?.lineEffect) { + case 'fancy': + root.style.setProperty('--lyrics-font-size', '3rem'); + root.style.setProperty('--lyrics-line-height', '1.333'); + root.style.setProperty('--lyrics-width', '100%'); + root.style.setProperty('--lyrics-padding', '2rem'); + root.style.setProperty( + '--lyrics-animations', + 'lyrics-glow var(--lyrics-glow-duration) forwards, lyrics-wobble var(--lyrics-wobble-duration) forwards', + ); + + root.style.setProperty('--lyrics-inactive-font-weight', '700'); + root.style.setProperty('--lyrics-inactive-opacity', '0.33'); + root.style.setProperty('--lyrics-inactive-scale', '0.95'); + root.style.setProperty('--lyrics-inactive-offset', '0'); + + root.style.setProperty('--lyrics-active-font-weight', '700'); + root.style.setProperty('--lyrics-active-opacity', '1'); + root.style.setProperty('--lyrics-active-scale', '1'); + root.style.setProperty('--lyrics-active-offset', '0'); + break; case 'scale': + root.style.setProperty('--lyrics-font-size', '1.4rem'); root.style.setProperty( - '--previous-lyrics', - 'var(--ytmusic-text-primary)', + '--lyrics-line-height', + 'var(--ytmusic-body-line-height)', ); - root.style.setProperty('--current-lyrics', 'var(--ytmusic-text-primary)'); - root.style.setProperty('--size-lyrics', '1.2'); - root.style.setProperty('--offset-lyrics', '0'); - root.style.setProperty('--lyric-width', '83%'); + root.style.setProperty('--lyrics-width', '83%'); + root.style.setProperty('--lyrics-padding', '0'); + root.style.setProperty('--lyrics-animations', 'none'); + + root.style.setProperty('--lyrics-inactive-font-weight', '400'); + root.style.setProperty('--lyrics-inactive-opacity', '0.33'); + root.style.setProperty('--lyrics-inactive-scale', '1'); + root.style.setProperty('--lyrics-inactive-offset', '0'); + + root.style.setProperty('--lyrics-active-font-weight', '700'); + root.style.setProperty('--lyrics-active-opacity', '1'); + root.style.setProperty('--lyrics-active-scale', '1.2'); + root.style.setProperty('--lyrics-active-offset', '0'); break; case 'offset': + root.style.setProperty('--lyrics-font-size', '1.4rem'); root.style.setProperty( - '--previous-lyrics', - 'var(--ytmusic-text-primary)', + '--lyrics-line-height', + 'var(--ytmusic-body-line-height)', ); - root.style.setProperty('--current-lyrics', 'var(--ytmusic-text-primary)'); - root.style.setProperty('--size-lyrics', '1'); - root.style.setProperty('--offset-lyrics', '5%'); - root.style.setProperty('--lyric-width', '100%'); + root.style.setProperty('--lyrics-width', '100%'); + root.style.setProperty('--lyrics-padding', '0'); + root.style.setProperty('--lyrics-animations', 'none'); + + root.style.setProperty('--lyrics-inactive-font-weight', '400'); + root.style.setProperty('--lyrics-inactive-opacity', '0.33'); + root.style.setProperty('--lyrics-inactive-scale', '1'); + root.style.setProperty('--lyrics-inactive-offset', '0'); + + root.style.setProperty('--lyrics-active-font-weight', '700'); + root.style.setProperty('--lyrics-active-opacity', '1'); + root.style.setProperty('--lyrics-active-scale', '1'); + root.style.setProperty('--lyrics-active-offset', '5%'); break; case 'focus': + root.style.setProperty('--lyrics-font-size', '1.4rem'); root.style.setProperty( - '--previous-lyrics', - 'var(--ytmusic-text-secondary)', + '--lyrics-line-height', + 'var(--ytmusic-body-line-height)', ); - root.style.setProperty('--current-lyrics', 'var(--ytmusic-text-primary)'); - root.style.setProperty('--size-lyrics', '1'); - root.style.setProperty('--offset-lyrics', '0'); - root.style.setProperty('--lyric-width', '100%'); + root.style.setProperty('--lyrics-width', '100%'); + root.style.setProperty('--lyrics-padding', '0'); + root.style.setProperty('--lyrics-animations', 'none'); + + root.style.setProperty('--lyrics-inactive-font-weight', '400'); + root.style.setProperty('--lyrics-inactive-opacity', '0.33'); + root.style.setProperty('--lyrics-inactive-scale', '1'); + root.style.setProperty('--lyrics-inactive-offset', '0'); + + root.style.setProperty('--lyrics-active-font-weight', '700'); + root.style.setProperty('--lyrics-active-opacity', '1'); + root.style.setProperty('--lyrics-active-scale', '1'); + root.style.setProperty('--lyrics-active-offset', '0'); break; } }); diff --git a/src/plugins/synced-lyrics/style.css b/src/plugins/synced-lyrics/style.css index 683f20910a..ca9278dbcf 100644 --- a/src/plugins/synced-lyrics/style.css +++ b/src/plugins/synced-lyrics/style.css @@ -7,53 +7,40 @@ display: block !important; } -/* :root { - --ytmusic-text-primary: #fff; - --ytmusic-text-secondary: #aaa; -} */ - +/* Variables are overridden by selected line effect */ :root { + /* Layout */ --global-margin: 0.7rem; - --previous-lyrics: var(--ytmusic-text-primary); - --current-lyrics: var(--ytmusic-text-primary); - --upcoming-lyrics: var(--ytmusic-text-secondary); - --size-lyrics: 1.2em; - --offset-lyrics: 1em; - - /* Colors */ - --blyrics-highlight-color: rgba(255, 255, 255, 0.5); + --lyrics-padding: 0; /* Typography */ - --blyrics-font-family: Satoshi, Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, + --lyrics-font-family: Satoshi, Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif; - --blyrics-font-size: 3rem; - --blyrics-font-weight: 700; - --blyrics-line-height: 1.333; - --blyrics-translated-font-size: 2rem; - --blyrics-translated-font-weight: 600; + --lyrics-font-size: 1.4rem; + --lyrics-line-height: var(--ytmusic-body-line-height); + --lyrics-width: 100%; + + /* Inactive Lyrics */ + --lyrics-inactive-font-weight: 400; + --lyrics-inactive-opacity: 0.33; + --lyrics-inactive-scale: 1; + --lyrics-inactive-offset: 0; + + /* Active Lyrics */ + --lyrics-active-font-weight: 700; + --lyrics-active-opacity: 1; + --lyrics-active-scale: 1; + --lyrics-active-offset: 0; /* Animations */ - --blyrics-transition-duration: 0.166s; - --blyrics-opacity-transition: 0.33s; - --blyrics-glow-duration: var(--blyrics-duration, 2s); - --blyrics-wobble-duration: calc(var(--blyrics-duration, 2s) / 2); + --lyrics-animations: lyrics-glow var(--lyrics-glow-duration) forwards, lyrics-wobble var(--lyrics-wobble-duration) forwards; + --lyrics-scale-duration: 0.166s; + --lyrics-opacity-transition: 0.33s; + --lyrics-glow-duration: var(--lyrics-duration, 2s); + --lyrics-wobble-duration: calc(var(--lyrics-duration, 2s) / 2); - - /* Layout */ - --blyrics-padding: 2rem; - --blyrics-margin: 2rem; - --blyrics-border-radius: 1000rem; - - /* Effects */ - --blyrics-blur-amount: 30px; - --blyrics-scale: 0.95; - --blyrics-active-scale: 1; - --blyrics-inactive-opacity: 0.33; - --blyrics-active-opacity: 1; - --blyrics-translated-opacity: 0.6; - --blyrics-error-opacity: 0.33; - --blyrics-background-blur: 100px; - --blyrics-background-saturate: 2; + /* Colors */ + --glow-color: rgba(255, 255, 255, 0.5); } .lyric-container { @@ -66,7 +53,7 @@ } .synced-line { - width: var(--lyric-width, 100%); + width: var(--lyrics-width, 100%); } .synced-line > .text-lyrics { @@ -77,8 +64,7 @@ display: block; justify-content: left; text-align: left; - margin: 0.5rem 0; - margin-right: 20px; + margin: 0.5rem 20px 0.5rem 0; transition: all 0.3s ease-in-out; } @@ -88,58 +74,50 @@ } .text-lyrics { - font-family: var(--blyrics-font-family) !important; - font-size: var(--blyrics-font-size) !important; - font-weight: var(--blyrics-font-weight) !important; - line-height: var(--blyrics-line-height) !important; - padding-top: var(--blyrics-padding); - padding-bottom: var(--blyrics-padding); - scale: var(--blyrics-scale); - transition: scale var(--blyrics-transition-duration); + font-family: var(--lyrics-font-family) !important; + font-size: var(--lyrics-font-size) !important; + font-weight: var(--lyrics-inactive-font-weight) !important; + line-height: var(--lyrics-line-height) !important; + padding-top: var(--lyrics-padding); + padding-bottom: var(--lyrics-padding); + scale: var(--lyrics-inactive-scale); + translate: var(--lyrics-inactive-offset); + transition: + scale var(--lyrics-scale-duration), + translate 0.3s ease-in-out; display: block; text-align: left; margin: var(--global-margin) 0; - /*transition:*/ - /* scale 0.3s ease-in-out,*/ - /* translate 0.3s ease-in-out,*/ - /* color 0.1s ease-in-out;*/ transform-origin: 0 50%; } .text-lyrics > span { display: inline-block; white-space: pre-wrap; - opacity: var(--blyrics-inactive-opacity); - transition: opacity var(--blyrics-opacity-transition); + opacity: var(--lyrics-inactive-opacity); + transition: opacity var(--lyrics-opacity-transition); } .previous > .text-lyrics { - /*color: var(--previous-lyrics);*/ - /*font-weight: normal;*/ } .current > .text-lyrics { - scale: var(--blyrics-active-scale); - - /*color: var(--current-lyrics);*/ - /*font-weight: bold;*/ - /*scale: var(--size-lyrics);*/ - /*translate: var(--offset-lyrics) 0;*/ + font-weight: var(--lyrics-active-font-weight) !important; + scale: var(--lyrics-active-scale); + translate: var(--lyrics-active-offset); } .current > .text-lyrics > span { - opacity: var(--blyrics-active-opacity); - animation: blyrics-glow var(--blyrics-glow-duration) forwards, blyrics-wobble var(--blyrics-wobble-duration) forwards; + opacity: var(--lyrics-active-opacity); + animation: var(--lyrics-animations); } .upcoming > .text-lyrics { - /*color: var(--upcoming-lyrics);*/ - /*font-weight: normal;*/ } /* Animations */ -@keyframes blyrics-wobble { +@keyframes lyrics-wobble { from { transform: translateY(0px); } @@ -154,11 +132,11 @@ } } -@keyframes blyrics-glow { +@keyframes lyrics-glow { 0% { - text-shadow: 0 0 1.5rem var(--blyrics-highlight-color); + text-shadow: 0 0 1.5rem var(--glow-color); } to { - text-shadow: 0 0 0 var(--blyrics-highlight-color); + text-shadow: 0 0 0 var(--glow-color); } } diff --git a/src/plugins/synced-lyrics/types.ts b/src/plugins/synced-lyrics/types.ts index 0d826b273d..49dc8d4e47 100644 --- a/src/plugins/synced-lyrics/types.ts +++ b/src/plugins/synced-lyrics/types.ts @@ -23,7 +23,7 @@ export type PlayPauseEvent = { elapsedSeconds: number; }; -export type LineEffect = 'scale' | 'offset' | 'focus'; +export type LineEffect = 'fancy' | 'scale' | 'offset' | 'focus'; export type LRCLIBSearchResponse = { id: number; From a190e97d374cae3824df566f7daef0e63827dea8 Mon Sep 17 00:00:00 2001 From: JellyBrick Date: Wed, 25 Dec 2024 08:08:03 +0900 Subject: [PATCH 3/4] fix: minor fix --- src/plugins/synced-lyrics/menu.ts | 8 +- .../synced-lyrics/renderer/renderer.tsx | 86 +++++++++++++++---- 2 files changed, 72 insertions(+), 22 deletions(-) diff --git a/src/plugins/synced-lyrics/menu.ts b/src/plugins/synced-lyrics/menu.ts index e1948c1205..4532bac24b 100644 --- a/src/plugins/synced-lyrics/menu.ts +++ b/src/plugins/synced-lyrics/menu.ts @@ -5,9 +5,9 @@ import { t } from '@/i18n'; import type { MenuContext } from '@/types/contexts'; import type { SyncedLyricsPluginConfig } from './types'; -export const menu = async (ctx: MenuContext): Promise< - MenuItemConstructorOptions[] -> => { +export const menu = async ( + ctx: MenuContext, +): Promise => { const config = await ctx.getConfig(); return [ @@ -37,7 +37,7 @@ export const menu = async (ctx: MenuContext): Promise< type: 'radio', checked: config.lineEffect === 'fancy', click() { - setConfig({ + ctx.setConfig({ lineEffect: 'fancy', }); }, diff --git a/src/plugins/synced-lyrics/renderer/renderer.tsx b/src/plugins/synced-lyrics/renderer/renderer.tsx index 2c90df86b4..cfbc3824d5 100644 --- a/src/plugins/synced-lyrics/renderer/renderer.tsx +++ b/src/plugins/synced-lyrics/renderer/renderer.tsx @@ -17,35 +17,85 @@ createEffect(() => { // Set the line effect switch (config()?.lineEffect) { + case 'fancy': + root.style.setProperty('--lyrics-font-size', '3rem'); + root.style.setProperty('--lyrics-line-height', '1.333'); + root.style.setProperty('--lyrics-width', '100%'); + root.style.setProperty('--lyrics-padding', '2rem'); + root.style.setProperty( + '--lyrics-animations', + 'lyrics-glow var(--lyrics-glow-duration) forwards, lyrics-wobble var(--lyrics-wobble-duration) forwards', + ); + + root.style.setProperty('--lyrics-inactive-font-weight', '700'); + root.style.setProperty('--lyrics-inactive-opacity', '0.33'); + root.style.setProperty('--lyrics-inactive-scale', '0.95'); + root.style.setProperty('--lyrics-inactive-offset', '0'); + + root.style.setProperty('--lyrics-active-font-weight', '700'); + root.style.setProperty('--lyrics-active-opacity', '1'); + root.style.setProperty('--lyrics-active-scale', '1'); + root.style.setProperty('--lyrics-active-offset', '0'); + break; case 'scale': + root.style.setProperty('--lyrics-font-size', '1.4rem'); root.style.setProperty( - '--previous-lyrics', - 'var(--ytmusic-text-primary)', + '--lyrics-line-height', + 'var(--ytmusic-body-line-height)', ); - root.style.setProperty('--current-lyrics', 'var(--ytmusic-text-primary)'); - root.style.setProperty('--size-lyrics', '1.2'); - root.style.setProperty('--offset-lyrics', '0'); - root.style.setProperty('--lyric-width', '83%'); + root.style.setProperty('--lyrics-width', '83%'); + root.style.setProperty('--lyrics-padding', '0'); + root.style.setProperty('--lyrics-animations', 'none'); + + root.style.setProperty('--lyrics-inactive-font-weight', '400'); + root.style.setProperty('--lyrics-inactive-opacity', '0.33'); + root.style.setProperty('--lyrics-inactive-scale', '1'); + root.style.setProperty('--lyrics-inactive-offset', '0'); + + root.style.setProperty('--lyrics-active-font-weight', '700'); + root.style.setProperty('--lyrics-active-opacity', '1'); + root.style.setProperty('--lyrics-active-scale', '1.2'); + root.style.setProperty('--lyrics-active-offset', '0'); break; case 'offset': + root.style.setProperty('--lyrics-font-size', '1.4rem'); root.style.setProperty( - '--previous-lyrics', - 'var(--ytmusic-text-primary)', + '--lyrics-line-height', + 'var(--ytmusic-body-line-height)', ); - root.style.setProperty('--current-lyrics', 'var(--ytmusic-text-primary)'); - root.style.setProperty('--size-lyrics', '1'); - root.style.setProperty('--offset-lyrics', '5%'); - root.style.setProperty('--lyric-width', '100%'); + root.style.setProperty('--lyrics-width', '100%'); + root.style.setProperty('--lyrics-padding', '0'); + root.style.setProperty('--lyrics-animations', 'none'); + + root.style.setProperty('--lyrics-inactive-font-weight', '400'); + root.style.setProperty('--lyrics-inactive-opacity', '0.33'); + root.style.setProperty('--lyrics-inactive-scale', '1'); + root.style.setProperty('--lyrics-inactive-offset', '0'); + + root.style.setProperty('--lyrics-active-font-weight', '700'); + root.style.setProperty('--lyrics-active-opacity', '1'); + root.style.setProperty('--lyrics-active-scale', '1'); + root.style.setProperty('--lyrics-active-offset', '5%'); break; case 'focus': + root.style.setProperty('--lyrics-font-size', '1.4rem'); root.style.setProperty( - '--previous-lyrics', - 'var(--ytmusic-text-secondary)', + '--lyrics-line-height', + 'var(--ytmusic-body-line-height)', ); - root.style.setProperty('--current-lyrics', 'var(--ytmusic-text-primary)'); - root.style.setProperty('--size-lyrics', '1'); - root.style.setProperty('--offset-lyrics', '0'); - root.style.setProperty('--lyric-width', '100%'); + root.style.setProperty('--lyrics-width', '100%'); + root.style.setProperty('--lyrics-padding', '0'); + root.style.setProperty('--lyrics-animations', 'none'); + + root.style.setProperty('--lyrics-inactive-font-weight', '400'); + root.style.setProperty('--lyrics-inactive-opacity', '0.33'); + root.style.setProperty('--lyrics-inactive-scale', '1'); + root.style.setProperty('--lyrics-inactive-offset', '0'); + + root.style.setProperty('--lyrics-active-font-weight', '700'); + root.style.setProperty('--lyrics-active-opacity', '1'); + root.style.setProperty('--lyrics-active-scale', '1'); + root.style.setProperty('--lyrics-active-offset', '0'); break; } }); From 1ecb56ffecb64a218d975bf5378c933420b26768 Mon Sep 17 00:00:00 2001 From: JellyBrick Date: Wed, 25 Dec 2024 08:10:28 +0900 Subject: [PATCH 4/4] fix: use memo --- src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx b/src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx index e4580e2500..6f3e868322 100644 --- a/src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx +++ b/src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx @@ -32,8 +32,7 @@ export const SyncedLine = ({ line }: SyncedLineProps) => { return config()?.defaultTextString ?? ''; }); - - if (line.text == '') { + if (!text()) { return (