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 (