diff --git a/src/components/MusicGrid.tsx b/src/components/MusicGrid.tsx index 94986ec..99867b5 100644 --- a/src/components/MusicGrid.tsx +++ b/src/components/MusicGrid.tsx @@ -88,11 +88,10 @@ const getColDef: ( getQuickFilterText: (): string => '', }, { - headerName: 'ID', hide: !enableTrackIdCol, cellRendererFramework: TrackIdRenderer, resizable: false, - maxWidth: 20, + maxWidth: 35, }, { headerName: 'Title', diff --git a/src/components/renderers/LinkRenderer.tsx b/src/components/renderers/LinkRenderer.tsx index 100486f..a7f4147 100644 --- a/src/components/renderers/LinkRenderer.tsx +++ b/src/components/renderers/LinkRenderer.tsx @@ -35,7 +35,7 @@ export const LinkRenderer: React.FC = (params) => { return hasLink ? ( View on YouTube} > = (params) => { const { data } = params; + const key = useMemo(() => getKey(data.source.structure, data.filename), [ + data.source.structure, + data.filename, + ]); + const [trackExportSet, setTrackExportSet] = useAtom(trackExportSetAtom); + const trackInExportSet = useMemo(() => trackExportSet.has(key), [ + key, + trackExportSet, + ]); + + const onExportSetChange = () => { + if (trackInExportSet) { + trackExportSet.delete(key); + } else { + trackExportSet.add(key); + } + const newSet = new Set(trackExportSet); + setTrackExportSet(newSet); + }; return ( = (params) => { `} >
{ - navigator.clipboard.writeText( - `"${getKey(data.source.structure, data.filename)}",\n` - ); + navigator.clipboard.writeText(`"${key}",\n`); }} > Copy Track ID } @@ -36,6 +58,28 @@ export const TrackIdRenderer: React.FC = (params) => { />
+
+ + {trackInExportSet + ? 'Remove from Export Set' + : 'Add to Export Set'} + + } + > + + +
); }; diff --git a/src/pages/PlaylistBuilderPage.tsx b/src/pages/PlaylistBuilderPage.tsx index 1ae2349..8cac952 100644 --- a/src/pages/PlaylistBuilderPage.tsx +++ b/src/pages/PlaylistBuilderPage.tsx @@ -96,7 +96,13 @@ const PlaylistBuilderPage: React.FC = () => { return (
-
+

Playlist Builder

Import and export custom playlists. JSON structure can be found{' '} @@ -107,7 +113,10 @@ const PlaylistBuilderPage: React.FC = () => { > here - ; track IDs may be copied from the Playlist page. + ; track IDs may be copied from the Playlist page. Tracks can also be + added to and removed from the Export Set on the Playlist page. The + Export Set can be copied and cleared from the Playlist Settings + dropdown.

{ const appTheme = useTheme(); @@ -48,6 +54,7 @@ const PlaylistPage: React.FC = () => { return [...dbPlaylists, ...customPlaylists]; }, [dbPlaylists, customPlaylists]); const setSelectedPlaylists = useSetAtom(selectedPlaylistsAtom); + const [trackExportSet, setTrackExportSet] = useAtom(trackExportSetAtom); useEffect(() => { setPlayingState(emptyPlayingState); @@ -98,6 +105,16 @@ const PlaylistPage: React.FC = () => { setSelectedPlaylists(newValue.map((pl) => pl.value)); }; + const onCopyExportSet = () => { + const strArr = Array.from(trackExportSet); + const str = JSON.stringify(strArr, null, 2); + navigator.clipboard.writeText(str); + }; + + const onClearExportSet = () => { + setTrackExportSet(new Set()); + }; + return (

{playingState.currentSong === undefined ? ( @@ -108,20 +125,56 @@ const PlaylistPage: React.FC = () => { setCurrentQueueSong={setCurrentQueueSong} /> )} - + + + + + + + + + +
diff --git a/src/state/playlist.ts b/src/state/playlist.ts index 3eb5a57..76d7572 100644 --- a/src/state/playlist.ts +++ b/src/state/playlist.ts @@ -12,3 +12,4 @@ export const selectedPlaylistAtom = atom((get) => { ? 'multi' : selectedPlaylists[0]; }); +export const trackExportSetAtom = atom>(new Set());