|
@ -1,17 +1,17 @@ |
|
|
import React, { useState, useEffect } from 'react'; |
|
|
import React from 'react'; |
|
|
import { useQuery } from 'react-query'; |
|
|
import { useQuery } from 'react-query'; |
|
|
import { useParams } from 'react-router-dom'; |
|
|
import { useParams } from 'react-router-dom'; |
|
|
import { Helmet } from 'react-helmet-async'; |
|
|
import { getPlaylist } from '../../api/api'; |
|
|
import { getPlaylist, getStream } from '../../api/api'; |
|
|
import { useAppDispatch } from '../../redux/hooks'; |
|
|
|
|
|
import { setPlayQueue, clearPlayQueue } from '../../redux/playQueueSlice'; |
|
|
import GenericPage from '../layout/GenericPage'; |
|
|
import GenericPage from '../layout/GenericPage'; |
|
|
import ListView from '../views/ListView'; |
|
|
import ListViewType from '../viewtypes/ListViewType'; |
|
|
import Loader from '../loader/Loader'; |
|
|
import Loader from '../loader/Loader'; |
|
|
import PlaylistViewHeader from './PlaylistViewHeader'; |
|
|
import PlaylistViewHeader from './PlaylistViewHeader'; |
|
|
import Player from '../player/Player'; |
|
|
|
|
|
|
|
|
|
|
|
type PlaylistParams = { |
|
|
interface PlaylistParams { |
|
|
id: string; |
|
|
id: string; |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
const tableColumns = [ |
|
|
const tableColumns = [ |
|
|
{ |
|
|
{ |
|
@ -58,11 +58,13 @@ const PlaylistView = () => { |
|
|
['playlist', id], |
|
|
['playlist', id], |
|
|
() => getPlaylist(id) |
|
|
() => getPlaylist(id) |
|
|
); |
|
|
); |
|
|
const [playing, setPlaying] = useState(null); |
|
|
|
|
|
|
|
|
const dispatch = useAppDispatch(); |
|
|
|
|
|
|
|
|
const handleRowClick = (e: any) => { |
|
|
const handleRowClick = (e: any) => { |
|
|
console.log(e); |
|
|
const newPlayQueue = playlist.entry.slice([e.index], playlist.entry.length); |
|
|
setPlaying(e.streamUrl); |
|
|
dispatch(clearPlayQueue()); |
|
|
|
|
|
dispatch(setPlayQueue(newPlayQueue)); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
if (isLoading) { |
|
|
if (isLoading) { |
|
@ -73,8 +75,6 @@ const PlaylistView = () => { |
|
|
return <span>Error: {error.message}</span>; |
|
|
return <span>Error: {error.message}</span>; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
console.log(playlist); |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<GenericPage |
|
|
<GenericPage |
|
|
title="Playlists" |
|
|
title="Playlists" |
|
@ -87,15 +87,14 @@ const PlaylistView = () => { |
|
|
/> |
|
|
/> |
|
|
} |
|
|
} |
|
|
> |
|
|
> |
|
|
<Helmet> |
|
|
<ListViewType |
|
|
<title>sonicd - {playlist.name}</title> |
|
|
|
|
|
</Helmet> |
|
|
|
|
|
<ListView |
|
|
|
|
|
data={playlist.entry} |
|
|
data={playlist.entry} |
|
|
tableColumns={tableColumns} |
|
|
tableColumns={tableColumns} |
|
|
handleRowClick={handleRowClick} |
|
|
handleRowClick={handleRowClick} |
|
|
|
|
|
tableHeight={700} |
|
|
|
|
|
virtualized |
|
|
|
|
|
autoHeight |
|
|
/> |
|
|
/> |
|
|
{/* {setPlaying && <Player url={playing} />} */} |
|
|
|
|
|
</GenericPage> |
|
|
</GenericPage> |
|
|
); |
|
|
); |
|
|
}; |
|
|
}; |
|
|