WBW + Observer Refactor + Prep for Syllables

plugins/radiant-lyrics-luna/src/Settings.tsx

@@ -12,6 +12,7 @@ declare global {
 		updateRadiantLyricsNowPlayingBackground?: () => void;
 		updateStickyLyricsIcon?: () => void;
 		updateQualityProgressColor?: () => void;
+		updateLyricsStyle?: () => void;
 	}
 }
 
@@ -40,7 +41,8 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
 	settingsAffectNowPlaying: true,
 	stickyLyricsFeature: true,
 	stickyLyrics: true,
-	stickyLyricsIcon: "chevron" as string,
+	stickyLyricsIcon: "sparkle" as string,
+	lyricsStyle: 0,
 });
 
 export const Settings = () => {
@@ -169,7 +171,7 @@ export const Settings = () => {
 		)}
 			<AnySwitch
 				title="Sticky Lyrics"
-				desc="Adds a dropdown to the Lyrics tab that auto-switches to Play Queue when lyrics aren't available"
+				desc="auto-switches to Play Queue when lyrics aren't available (mirrored in lyrics dropdown)"
 				checked={stickyLyricsFeature}
 				onChange={(_: unknown, checked: boolean) => {
 					settings.stickyLyricsFeature = checked;
@@ -179,7 +181,21 @@ export const Settings = () => {
 					}
 				}}
 			/>
-			<AnySwitch
+		<LunaNumberSetting
+				title="Lyrics Style"
+				desc="0 = Line (default), 1 = Word, 2 = Syllable (coming soon) (mirrored in lyrics dropdown)"
+				min={0}
+				max={1}
+				step={1}
+				value={settings.lyricsStyle}
+				onNumber={(value: number) => {
+					settings.lyricsStyle = value;
+					if (window.updateLyricsStyle) {
+						window.updateLyricsStyle();
+					}
+				}}
+			/>
+		<AnySwitch
 				title="Hide UI Feature"
 				desc="Enable hide/unhide UI functionality with toggle buttons"
 				checked={hideUIEnabled}

plugins/radiant-lyrics-luna/src/lyrics-glow.css

@@ -109,7 +109,73 @@
 	font-size: 38px !important;
 }
 
-/* Reset all lyrics styling when disabled */
+/* MARKER: WBW lyrics CSS */
+
+/* hide tidal spans for wbw */
+.rl-wbw-active span[data-test="lyrics-line"] {
+	/* biome-ignore lint: Must hide original lines when word-by-word is on */
+	display: none !important;
+}
+
+/* Active line slide */
+.rl-wbw-line {
+	padding-left: 0;
+	transition:
+		padding-left 0.7s ease-in-out;
+}
+
+.rl-wbw-line.rl-wbw-line-active {
+	padding-left: 20px;
+}
+
+/* Word span */
+.rl-wbw-word {
+	text-shadow:
+		0 0 0px transparent,
+		0 0 0px transparent;
+	color: rgba(128, 128, 128, 0.4);
+	transition:
+		text-shadow 0.15s ease-out,
+		color 0.15s ease-out;
+}
+
+/* Hover word */
+.rl-wbw-word:hover {
+	text-shadow:
+		0 0 var(--rl-glow-inner, 2px) lightgray,
+		/* biome-ignore lint: Hover glow should override defaults */
+		0 0 var(--rl-glow-outer, 20px) lightgray !important;
+	/* biome-ignore lint: Hover color override */
+	color: lightgray !important;
+	cursor: pointer;
+}
+
+/* Active word */
+.rl-wbw-word.rl-wbw-active {
+	text-shadow:
+		0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #fff),
+		/* biome-ignore lint: Glow priority for active word */
+		0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #fff) !important;
+	/* biome-ignore lint: Active word must be white */
+	color: white !important;
+}
+
+/* Finished word */
+
+/* Tidals "..." at the top of the container */
+.rl-wbw-active > span:not([data-test="lyrics-line"]) {
+	display: block;
+	font-size: 40px;
+	font-family:
+		"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+		Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+	font-weight: 700;
+	color: rgba(128, 128, 128, 0.4);
+	text-shadow: 0 0 0px transparent;
+	margin-bottom: 2rem;
+}
+
+/* Reset lyrics styling when disabled */
 .lyrics-glow-disabled [class*="_lyricsText"] > div > span[data-current="true"],
 .lyrics-glow-disabled [class*="_lyricsText"] > div > span,
 .lyrics-glow-disabled [class*="_lyricsText"] > div > span:hover,
@@ -134,3 +200,5 @@
 	/* biome-ignore lint: Hard reset when disabled */
 	opacity: inherit !important;
 }
+
+/* thats right biome.. shut upp */

plugins/radiant-lyrics-luna/src/styles.css

@@ -222,7 +222,45 @@
 	transform: translateX(16px);
 }
 
+/* Segmented control (Line | Word | Syllable) */
+.rl-style-row {
+	justify-content: center;
+	margin-top: 6px;
+}
 
+.rl-seg-control {
+	display: flex;
+	background: rgba(0, 0, 0, 0.08);
+	border-radius: 10px;
+	padding: 2px;
+	gap: 2px;
+	width: 100%;
+}
+
+.rl-seg-btn {
+	flex: 1;
+	border: none;
+	background: transparent;
+	color: rgba(0, 0, 0, 0.5);
+	font-size: 10px;
+	font-weight: 600;
+	padding: 5px 0;
+	border-radius: 8px;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	white-space: nowrap;
+}
+
+.rl-seg-btn:hover {
+	color: rgba(0, 0, 0, 0.7);
+	background: rgba(0, 0, 0, 0.05);
+}
+
+.rl-seg-btn.rl-seg-active {
+	background: white;
+	color: black;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
 
 /* MARKER: PATCHES (Random Fixes for Tidals Changes) */
 /* These change allot so i gave them their own section */