90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import Routes from '../configuration/routes/RouteList';
|
|
import updatePlaylistSubscription from '../api/actions/updatePlaylistSubscription';
|
|
import formatDate from '../functions/formatDates';
|
|
import Button from './Button';
|
|
import PlaylistThumbnail from './PlaylistThumbnail';
|
|
import LoadingIndicator from './LoadingIndicator';
|
|
import { useUserConfigStore } from '../stores/UserConfigStore';
|
|
import { PlaylistType } from '../api/loader/loadPlaylistById';
|
|
|
|
type PlaylistListProps = {
|
|
playlistList: PlaylistType[] | undefined;
|
|
setRefresh: (status: boolean) => void;
|
|
};
|
|
|
|
const PlaylistList = ({ playlistList, setRefresh }: PlaylistListProps) => {
|
|
const { userConfig } = useUserConfigStore();
|
|
const viewStyle = userConfig.view_style_playlist;
|
|
|
|
if (!playlistList) {
|
|
return <LoadingIndicator />;
|
|
}
|
|
if (playlistList.length === 0) {
|
|
return <h2>No playlists found...</h2>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{playlistList.map((playlist: PlaylistType) => {
|
|
return (
|
|
<div key={playlist.playlist_id} className={`playlist-item ${viewStyle}`}>
|
|
<div className="playlist-thumbnail">
|
|
<Link to={Routes.Playlist(playlist.playlist_id)}>
|
|
<PlaylistThumbnail
|
|
playlistId={playlist.playlist_id}
|
|
playlistThumbnail={playlist.playlist_thumbnail}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className={`playlist-desc ${viewStyle}`}>
|
|
{playlist.playlist_type != 'custom' && (
|
|
<Link to={Routes.Channel(playlist.playlist_channel_id)}>
|
|
<h3>{playlist.playlist_channel}</h3>
|
|
</Link>
|
|
)}
|
|
|
|
<Link to={Routes.Playlist(playlist.playlist_id)}>
|
|
<h2>{playlist.playlist_name}</h2>
|
|
</Link>
|
|
|
|
<p>Last refreshed: {formatDate(playlist.playlist_last_refresh)}</p>
|
|
|
|
{playlist.playlist_type != 'custom' && (
|
|
<>
|
|
{playlist.playlist_subscribed && (
|
|
<Button
|
|
label="Unsubscribe"
|
|
className="unsubscribe"
|
|
type="button"
|
|
title={`Unsubscribe from ${playlist.playlist_name}`}
|
|
onClick={async () => {
|
|
await updatePlaylistSubscription(playlist.playlist_id, false);
|
|
setRefresh(true);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{!playlist.playlist_subscribed && (
|
|
<Button
|
|
label="Subscribe"
|
|
type="button"
|
|
title={`Subscribe to ${playlist.playlist_name}`}
|
|
onClick={async () => {
|
|
await updatePlaylistSubscription(playlist.playlist_id, true);
|
|
setRefresh(true);
|
|
}}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PlaylistList;
|