Skip to content

Commit 5392ef3

Browse files
johnpcjohnpc
committed
update /tv lyric ui
1 parent 50a1439 commit 5392ef3

1 file changed

Lines changed: 67 additions & 73 deletions

File tree

‎src/components/tv/LyricsDisplay.tsx‎

Lines changed: 67 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export function LyricsDisplay({
8282
: 0;
8383

8484
return (
85-
<div className="min-h-screen flex flex-col justify-center items-center p-8 relative">
85+
<div className="min-h-screen flex flex-col p-8 relative">
8686
{/* Background Pattern */}
8787
<div className="absolute inset-0 opacity-5">
8888
<div className="absolute inset-0 bg-gradient-to-br from-purple-600 to-blue-600"></div>
@@ -95,64 +95,64 @@ export function LyricsDisplay({
9595
></div>
9696
</div>
9797

98-
{/* Song Info Header */}
99-
<div className="text-center mb-12 z-10">
100-
<div className="flex items-center justify-center mb-4">
101-
<MusicalNoteIcon className="w-8 h-8 text-purple-400 mr-3" />
102-
<span className="text-2xl text-purple-400 font-medium">
98+
{/* Song Info Header - De-emphasized */}
99+
<div className="text-center mb-4 z-10 flex-shrink-0">
100+
<div className="flex items-center justify-center mb-3">
101+
<MusicalNoteIcon className="w-5 h-5 text-purple-400 mr-2 opacity-70" />
102+
<span className="text-lg text-purple-400 font-medium opacity-70">
103103
Now Playing
104104
</span>
105105
</div>
106106

107-
<h1 className="text-6xl font-bold mb-4 text-white leading-tight">
107+
<h1 className="text-3xl font-semibold mb-2 text-white leading-tight">
108108
{song.mediaItem.title}
109109
</h1>
110110

111-
<p className="text-3xl text-gray-300 mb-2">{song.mediaItem.artist}</p>
111+
<p className="text-xl text-gray-400 mb-1">{song.mediaItem.artist}</p>
112112

113113
{song.mediaItem.album && (
114-
<p className="text-xl text-gray-400">{song.mediaItem.album}</p>
114+
<p className="text-sm text-gray-500 opacity-60">{song.mediaItem.album}</p>
115115
)}
116116

117-
<div className="flex items-center justify-center mt-4 text-lg text-gray-400">
118-
<UserIcon className="w-5 h-5 mr-2" />
119-
Added by {song.addedBy}
117+
<div className="flex items-center justify-center mt-2 text-sm text-gray-500">
118+
<UserIcon className="w-4 h-4 mr-1 opacity-60" />
119+
<span className="opacity-60">Added by {song.addedBy}</span>
120120
</div>
121121
</div>
122122

123-
{/* Lyrics Display */}
124-
<div className="text-center mb-12 z-10 max-w-4xl">
123+
{/* Lyrics Display - Enhanced prominence */}
124+
<div className="text-center z-10 max-w-5xl mx-auto flex-1 flex flex-col justify-center">
125125
<div className="mb-8">
126-
<div className="text-5xl font-bold text-white leading-relaxed mb-4 min-h-[120px] flex items-center justify-center">
126+
<div className="text-6xl font-bold text-white leading-relaxed mb-6 min-h-[160px] flex items-center justify-center px-4">
127127
{currentLine}
128128
</div>
129129

130130
{nextLine && (
131-
<div className="text-2xl text-gray-500 opacity-60">{nextLine}</div>
131+
<div className="text-3xl text-gray-400 opacity-70 leading-relaxed">{nextLine}</div>
132132
)}
133133
</div>
134134

135135
{/* Error or loading states */}
136136
{lyricsError && (
137-
<div className="text-xl text-red-400 italic">{lyricsError}</div>
137+
<div className="text-2xl text-red-400 italic">{lyricsError}</div>
138138
)}
139139

140140
{!song.mediaItem.lyricsPath && !lyricsError && (
141-
<div className="text-xl text-gray-500 italic">
141+
<div className="text-3xl text-gray-500 italic">
142142
No lyrics available - Enjoy the music!
143143
</div>
144144
)}
145145

146146
{/* Lyrics loading indicator */}
147147
{song.mediaItem.lyricsPath && lyricsLoading && !lyricsError && (
148-
<div className="text-xl text-gray-400 italic animate-pulse">
148+
<div className="text-2xl text-gray-400 italic animate-pulse">
149149
Loading lyrics...
150150
</div>
151151
)}
152152

153153
{/* Lyrics metadata display */}
154154
{lyricsFile?.metadata && (
155-
<div className="text-sm text-gray-500 mt-4">
155+
<div className="text-xs text-gray-600 mt-6 opacity-50">
156156
{lyricsFile.metadata.creator && (
157157
<p>Lyrics by: {lyricsFile.metadata.creator}</p>
158158
)}
@@ -163,69 +163,63 @@ export function LyricsDisplay({
163163
)}
164164
</div>
165165

166-
{/* Progress Bar */}
167-
<div className="w-full max-w-4xl mb-8 z-10">
168-
<div className="flex items-center justify-between text-lg text-gray-400 mb-2">
169-
<span>{formatTime(currentTime)}</span>
170-
<span>{formatDuration(song.mediaItem.duration)}</span>
171-
</div>
172-
173-
<div className="w-full bg-gray-800 rounded-full h-3">
174-
<div
175-
className="bg-gradient-to-r from-purple-500 to-blue-500 h-3 rounded-full transition-all duration-1000 ease-linear"
176-
style={{ width: `${Math.min(progress, 100)}%` }}
177-
></div>
166+
{/* Bottom section with progress and status */}
167+
<div className="flex-shrink-0 z-10">
168+
{/* Progress Bar - Moved to bottom and simplified */}
169+
<div className="w-full max-w-4xl mx-auto mb-4">
170+
<div className="w-full bg-gray-800 rounded-full h-2">
171+
<div
172+
className="bg-gradient-to-r from-purple-500 to-blue-500 h-2 rounded-full transition-all duration-1000 ease-linear"
173+
style={{ width: `${Math.min(progress, 100)}%` }}
174+
></div>
175+
</div>
176+
177+
<div className="flex items-center justify-between text-sm text-gray-500 mt-2">
178+
<span>{formatTime(currentTime)}</span>
179+
<span>{formatDuration(song.mediaItem.duration)}</span>
180+
</div>
178181
</div>
179-
</div>
180182

181-
{/* Playback Status */}
182-
<div className="flex items-center justify-center space-x-6 text-lg z-10">
183-
<div
184-
className={`flex items-center px-4 py-2 rounded-full ${
185-
isPlaying
186-
? "bg-green-900 text-green-300"
187-
: "bg-yellow-900 text-yellow-300"
188-
}`}
189-
>
183+
{/* Playback Status - Simplified and moved to bottom */}
184+
<div className="flex items-center justify-center space-x-4 text-sm">
190185
<div
191-
className={`w-3 h-3 rounded-full mr-2 ${
192-
isPlaying ? "bg-green-400" : "bg-yellow-400"
186+
className={`flex items-center px-3 py-1 rounded-full ${
187+
isPlaying
188+
? "bg-green-900 text-green-300"
189+
: "bg-yellow-900 text-yellow-300"
193190
}`}
194-
/>
195-
{isPlaying ? "Playing" : "Paused"}
196-
</div>
197-
198-
{playbackState && (
199-
<div className="flex items-center text-gray-400">
200-
<span>Volume: {playbackState.volume}%</span>
201-
{playbackState.isMuted && (
202-
<span className="ml-2 text-red-400">(Muted)</span>
203-
)}
191+
>
192+
<div
193+
className={`w-2 h-2 rounded-full mr-2 ${
194+
isPlaying ? "bg-green-400" : "bg-yellow-400"
195+
}`}
196+
/>
197+
{isPlaying ? "Playing" : "Paused"}
204198
</div>
205-
)}
206-
207-
<div
208-
className={`flex items-center px-3 py-1 rounded-full text-sm ${
209-
isConnected
210-
? "bg-blue-900 text-blue-300"
211-
: "bg-red-900 text-red-300"
212-
}`}
213-
>
214-
{isConnected ? "Live" : "Offline"}
215-
</div>
216199

217-
{/* Lyrics sync status */}
218-
{lyricsFile && (
219200
<div
220-
className={`flex items-center px-3 py-1 rounded-full text-sm ${
221-
syncState?.isActive
222-
? "bg-purple-900 text-purple-300"
223-
: "bg-gray-900 text-gray-400"
201+
className={`flex items-center px-3 py-1 rounded-full text-xs ${
202+
isConnected
203+
? "bg-blue-900 text-blue-300"
204+
: "bg-red-900 text-red-300"
224205
}`}
225206
>
226-
{syncState?.isActive ? "Lyrics Synced" : "Lyrics Ready"}
207+
{isConnected ? "Live" : "Offline"}
227208
</div>
228-
)}
209+
210+
{/* Lyrics sync status */}
211+
{lyricsFile && (
212+
<div
213+
className={`flex items-center px-3 py-1 rounded-full text-xs ${
214+
syncState?.isActive
215+
? "bg-purple-900 text-purple-300"
216+
: "bg-gray-900 text-gray-400"
217+
}`}
218+
>
219+
{syncState?.isActive ? "Synced" : "Ready"}
220+
</div>
221+
)}
222+
</div>
229223
</div>
230224

231225
{/* Animated Background Elements */}

0 commit comments

Comments
 (0)