Project started 🥂

2026-06-02 01:13:22 +03:00
commit 612d0f0125
146 changed files with 15242 additions and 0 deletions
@@ -0,0 +1,62 @@
+import { Row } from 'modern-sk';
+import { TrackContextMenu } from './TrackContextMenu';
+import { AvailabilityBadge } from './AvailabilityBadge';
+import { formatDuration } from '../../lib/format';
+import { useAppDispatch, useAppSelector } from '../../hooks/useAppDispatch';
+import { play } from '../../store/slices/player';
+import type { Track } from '../../api/types';
+import { getCoverUrl } from '../../api/endpoints/streaming';
+
+interface Props {
+  track: Track;
+  index?: number;
+  showAlbum?: boolean;
+  onAddToPlaylist?: (track: Track) => void;
+  onEditMetadata?: (track: Track) => void;
+  onDelete?: (track: Track) => void;
+}
+
+export function TrackRow({ track, index, showAlbum = false, onAddToPlaylist, onEditMetadata, onDelete }: Props) {
+  const dispatch = useAppDispatch();
+  const currentTrackId = useAppSelector((s) => s.player.currentTrackId);
+  const isPlaying = useAppSelector((s) => s.player.isPlaying);
+  const isActive = currentTrackId === track.id;
+  const artUrl = getCoverUrl(track.albumArtUrl);
+
+  return (
+    <Row
+      selected={isActive}
+      onDoubleClick={() => dispatch(play(track.id))}
+      style={{ display: 'grid', gridTemplateColumns: '2rem 2.5rem 1fr auto auto', gap: '0.75rem', alignItems: 'center', padding: '0.375rem 0.75rem', cursor: 'default' }}
+    >
+      <span style={{ fontSize: '0.75rem', color: 'var(--color-text-3)', textAlign: 'right' }}>
+        {isActive && isPlaying ? '▶' : (index !== undefined ? index + 1 : '')}
+      </span>
+      {artUrl ? (
+        <img src={artUrl} alt="" width={36} height={36} style={{ borderRadius: 4, objectFit: 'cover' }} />
+      ) : (
+        <div style={{ width: 36, height: 36, borderRadius: 4, background: 'var(--color-surface-3)' }} />
+      )}
+      <div style={{ minWidth: 0 }}>
+        <div style={{ fontWeight: isActive ? 600 : 400, color: isActive ? 'var(--color-accent)' : 'var(--color-text-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {track.title}
+        </div>
+        <div style={{ fontSize: '0.8125rem', color: 'var(--color-text-2)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {track.artistName}{showAlbum && ` · ${track.albumTitle}`}
+        </div>
+      </div>
+      <AvailabilityBadge availability={track.availability} />
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <span style={{ fontSize: '0.8125rem', color: 'var(--color-text-3)', minWidth: '3rem', textAlign: 'right' }}>
+          {formatDuration(track.durationMs)}
+        </span>
+        <TrackContextMenu
+          track={track}
+          onAddToPlaylist={onAddToPlaylist}
+          onEditMetadata={onEditMetadata}
+          onDelete={onDelete}
+        />
+      </div>
+    </Row>
+  );
+}