Project started 🥂

2026-06-02 01:13:22 +03:00
commit 612d0f0125
146 changed files with 15242 additions and 0 deletions
@@ -0,0 +1,107 @@
+import { IconButton, Slider, Tooltip } from 'modern-sk';
+import { useAppDispatch, useAppSelector } from '../../hooks/useAppDispatch';
+import { pause, resume, toggleMute, setVolume, toggleNowPlaying, toggleQueue } from '../../store/slices/player';
+import { useAudioPlayer } from '../../hooks/useAudioPlayer';
+import { formatDuration } from '../../lib/format';
+import { getCoverUrl } from '../../api/endpoints/streaming';
+
+export function PersistentPlayer() {
+  const dispatch = useAppDispatch();
+  const { seek, playNext, playPrev } = useAudioPlayer();
+  const player = useAppSelector((s) => s.player);
+  const queue = useAppSelector((s) => s.queue);
+  const currentEntry = queue.entries[queue.currentIndex];
+
+  if (!currentEntry && !player.currentTrackId) {
+    return (
+      <div style={{ height: '4rem', borderTop: '1px solid var(--color-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 1.5rem', color: 'var(--color-text-3)', fontSize: '0.875rem' }}>
+        Nothing playing
+      </div>
+    );
+  }
+
+  const artUrl = currentEntry?.albumArtUrl ? getCoverUrl(currentEntry.albumArtUrl) : undefined;
+  const progressPercent = player.duration > 0 ? (player.position / player.duration) * 100 : 0;
+
+  return (
+    <div style={{ height: '4rem', borderTop: '1px solid var(--color-border)', display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', padding: '0 1rem', gap: '1rem', background: 'var(--color-surface-1)' }}>
+      {/* track info */}
+      <div
+        style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', minWidth: 0, cursor: 'pointer' }}
+        onClick={() => dispatch(toggleNowPlaying())}
+      >
+        {artUrl ? (
+          <img src={artUrl} alt="" width={40} height={40} style={{ borderRadius: 4, objectFit: 'cover', flexShrink: 0 }} />
+        ) : (
+          <div style={{ width: 40, height: 40, borderRadius: 4, background: 'var(--color-surface-3)', flexShrink: 0 }} />
+        )}
+        <div style={{ minWidth: 0 }}>
+          <div style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: '0.875rem' }}>
+            {currentEntry?.title ?? '—'}
+          </div>
+          <div style={{ fontSize: '0.75rem', color: 'var(--color-text-2)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {currentEntry?.artistName ?? ''}
+          </div>
+        </div>
+      </div>
+
+      {/* controls + scrubber */}
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.25rem', minWidth: '20rem' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <IconButton variant="ghost" size="sm" onClick={playPrev} aria-label="Previous">⏮</IconButton>
+          <IconButton
+            variant="primary"
+            onClick={() => player.isPlaying ? dispatch(pause()) : dispatch(resume())}
+            aria-label={player.isPlaying ? 'Pause' : 'Play'}
+          >
+            {player.isPlaying ? '⏸' : '▶'}
+          </IconButton>
+          <IconButton variant="ghost" size="sm" onClick={playNext} aria-label="Next">⏭</IconButton>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', width: '100%' }}>
+          <span style={{ fontSize: '0.7rem', color: 'var(--color-text-3)', minWidth: '2.5rem', textAlign: 'right' }}>
+            {formatDuration(player.position * 1000)}
+          </span>
+          <Slider
+            min={0}
+            max={player.duration || 1}
+            step={1}
+            value={[player.position]}
+            onValueChange={([v]) => seek(v)}
+            style={{ flex: 1 }}
+          />
+          <span style={{ fontSize: '0.7rem', color: 'var(--color-text-3)', minWidth: '2.5rem' }}>
+            {formatDuration(player.duration * 1000)}
+          </span>
+        </div>
+      </div>
+
+      {/* volume + queue */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '0.5rem' }}>
+        <Tooltip content={player.muted ? 'Unmute' : 'Mute'}>
+          <IconButton variant="ghost" size="sm" onClick={() => dispatch(toggleMute())} aria-label="Toggle mute">
+            {player.muted ? '🔇' : '🔊'}
+          </IconButton>
+        </Tooltip>
+        <Slider
+          min={0}
+          max={1}
+          step={0.01}
+          value={[player.muted ? 0 : player.volume]}
+          onValueChange={([v]) => dispatch(setVolume(v))}
+          style={{ width: '6rem' }}
+        />
+        <Tooltip content="Queue">
+          <IconButton variant={player.isQueueOpen ? 'primary' : 'ghost'} size="sm" onClick={() => dispatch(toggleQueue())} aria-label="Toggle queue">
+            ≡
+          </IconButton>
+        </Tooltip>
+      </div>
+
+      {/* progress bar at bottom */}
+      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'var(--color-surface-3)' }}>
+        <div style={{ width: `${progressPercent}%`, height: '100%', background: 'var(--color-accent)', transition: 'width 0.5s linear' }} />
+      </div>
+    </div>
+  );
+}