386 lines
15 KiB
TypeScript
386 lines
15 KiB
TypeScript
import * as React from "react";
|
|
import {useContext, useRef, useState} from "react";
|
|
import {Registry} from "tc-shared/events";
|
|
import {
|
|
MusicPlaylistEntryInfo,
|
|
MusicPlaylistStatus,
|
|
MusicPlaylistUiEvents
|
|
} from "tc-shared/ui/frames/side/MusicPlaylistDefinitions";
|
|
import {Button} from "tc-shared/ui/react-elements/Button";
|
|
import {Translatable} from "tc-shared/ui/react-elements/i18n";
|
|
import {LoadingDots} from "tc-shared/ui/react-elements/LoadingDots";
|
|
import {showImagePreview} from "tc-shared/ui/frames/ImagePreview";
|
|
import {joinClassList, useTr} from "tc-shared/ui/react-elements/Helper";
|
|
import {spawnContextMenu} from "tc-shared/ui/ContextMenu";
|
|
import {copyToClipboard} from "tc-shared/utils/helpers";
|
|
import ImagePlaylistNoThumbnail from "./MusicPlaylistNoThumbnail.png";
|
|
|
|
const cssStyle = require("./MusicPlaylistRenderer.scss");
|
|
|
|
const EventContext = React.createContext<Registry<MusicPlaylistUiEvents>>(undefined);
|
|
const kPlaylistDragPrefixIds = "x-teaspeak-playlist-drag-ids-";
|
|
const kPlaylistDragSongUrl = "x-teaspeak-playlist-drag-url";
|
|
|
|
function parseDragIds(transfer: DataTransfer) : { serverUniqueId: string, entryId: number, playlistId: number } | undefined {
|
|
for(const item of transfer.items) {
|
|
if(!item.type.startsWith(kPlaylistDragPrefixIds)) {
|
|
continue;
|
|
}
|
|
|
|
const [ handlerId, playlistIdStr, entryIdStr ] = item.type.substring(kPlaylistDragPrefixIds.length).split("-");
|
|
return { serverUniqueId: handlerId, entryId: parseInt(entryIdStr), playlistId: parseInt(playlistIdStr) };
|
|
}
|
|
|
|
return undefined;
|
|
}
|
|
|
|
export function formatPlaytime(value: number) {
|
|
if(value == 0) {
|
|
return "--:--:--";
|
|
}
|
|
|
|
value /= 1000;
|
|
|
|
let hours = 0, minutes = 0;
|
|
while(value >= 60 * 60) {
|
|
hours++;
|
|
value -= 60 * 60;
|
|
}
|
|
|
|
while(value >= 60) {
|
|
minutes++;
|
|
value -= 60;
|
|
}
|
|
|
|
return ("0" + hours).substr(-2) + ":" + ("0" + minutes).substr(-2) + ":" + ("0" + value.toFixed(0)).substr(-2);
|
|
}
|
|
|
|
export const DefaultThumbnail = (_props: { type: "loading" | "none-present" }) => {
|
|
return (
|
|
<img
|
|
draggable={false}
|
|
src={ImagePlaylistNoThumbnail}
|
|
alt={useTr("loading")}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const PlaylistEntry = React.memo((props: { serverUniqueId: string, playlistId: number, entryId: number, active: boolean }) => {
|
|
const events = useContext(EventContext);
|
|
const refContainer = useRef<HTMLDivElement>();
|
|
const refDragLeaveTimer = useRef<number>();
|
|
|
|
const [ insertMarker, setInsertMarker ] = useState<"above" | "bellow" | "none">("none");
|
|
|
|
const [ status, setStatus ] = useState<MusicPlaylistEntryInfo>(() => {
|
|
events.fire("query_entry_status", { entryId: props.entryId });
|
|
return { type: "loading", url: undefined };
|
|
});
|
|
events.reactUse("notify_entry_status", event => event.entryId === props.entryId && setStatus(event.status));
|
|
|
|
let thumbnail, firstRow: React.ReactElement | string = "", secondRow: React.ReactElement | string = "", secondRowTitle, length;
|
|
switch (status.type) {
|
|
case "song":
|
|
if(status.thumbnailImage) {
|
|
thumbnail = (
|
|
<img
|
|
draggable={false}
|
|
key={"song-thumbnail"}
|
|
src={status.thumbnailImage}
|
|
onClick={() => showImagePreview(status.thumbnailImage, status.thumbnailImage)}
|
|
alt={useTr("Thumbnail")}
|
|
/>
|
|
)
|
|
} else {
|
|
thumbnail = <DefaultThumbnail key={"default-none"} type={"none-present"} />;
|
|
}
|
|
firstRow = status.title;
|
|
|
|
const description = status.description || tr("No song description given.");
|
|
secondRow = description.substr(0, 100);
|
|
secondRowTitle = description;
|
|
|
|
length = formatPlaytime(status.length);
|
|
break;
|
|
|
|
case "loading":
|
|
if(status.url) {
|
|
secondRow = status.url;
|
|
}
|
|
|
|
/* fall through expected */
|
|
default:
|
|
thumbnail = <DefaultThumbnail key={"default"} type={"loading"} />;
|
|
firstRow = <React.Fragment key={"loading"}><Translatable>Loading</Translatable> <LoadingDots /></React.Fragment>;
|
|
break;
|
|
}
|
|
|
|
let insertClass;
|
|
switch (insertMarker) {
|
|
case "above":
|
|
insertClass = cssStyle.insertMarkerAbove;
|
|
break;
|
|
|
|
case "bellow":
|
|
insertClass = cssStyle.insertMarkerBellow;
|
|
break;
|
|
|
|
case "none":
|
|
default:
|
|
break;
|
|
}
|
|
|
|
//cssStyle.playlistEntry + " " + cssStyle.shown + " " + (props.active ? cssStyle.currentSong : "")
|
|
return (
|
|
<div
|
|
ref={refContainer}
|
|
className={joinClassList(cssStyle.playlistEntry, cssStyle.shown, props.active && cssStyle.currentSong, insertClass)}
|
|
onContextMenu={event => {
|
|
event.preventDefault();
|
|
|
|
spawnContextMenu({ pageY: event.pageY, pageX: event.pageX }, [
|
|
{
|
|
type: "normal",
|
|
label: tr("Copy URL"),
|
|
click: () => { status.type === "song" ? copyToClipboard(status.url) : undefined; },
|
|
visible: status.type === "song"
|
|
},
|
|
{
|
|
type: "normal",
|
|
label: tr("Copy description"),
|
|
click: () => { status.type === "song" ? copyToClipboard(status.description) : undefined; },
|
|
visible: status.type === "song" && !!status.description
|
|
},
|
|
{
|
|
type: "normal",
|
|
label: tr("Remove song"),
|
|
click: () => events.fire("action_entry_delete", { entryId: props.entryId })
|
|
}
|
|
]);
|
|
}}
|
|
draggable={true}
|
|
onDragStart={event => {
|
|
event.dataTransfer.setData(kPlaylistDragPrefixIds + props.serverUniqueId + "-" + props.playlistId + "-" + props.entryId, "");
|
|
if(status.type === "song") {
|
|
event.dataTransfer.setData(kPlaylistDragSongUrl, status.url);
|
|
}
|
|
event.dataTransfer.effectAllowed = "all";
|
|
}}
|
|
onDragOver={event => {
|
|
const info = parseDragIds(event.dataTransfer);
|
|
if(!info || !refContainer.current) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
if(info.playlistId === props.playlistId && info.serverUniqueId === props.serverUniqueId) {
|
|
if(info.entryId === props.entryId) {
|
|
event.dataTransfer.dropEffect = "none";
|
|
return;
|
|
}
|
|
|
|
event.dataTransfer.dropEffect = "move";
|
|
} else if([...event.dataTransfer.items].findIndex(item => item.type === kPlaylistDragSongUrl) !== -1) {
|
|
event.dataTransfer.dropEffect = "copy";
|
|
} else {
|
|
event.dataTransfer.dropEffect = "none";
|
|
return;
|
|
}
|
|
|
|
if(refDragLeaveTimer.current) {
|
|
clearTimeout(refDragLeaveTimer.current);
|
|
refDragLeaveTimer.current = undefined;
|
|
}
|
|
|
|
const containerRect = refContainer.current.getBoundingClientRect();
|
|
switch (insertMarker) {
|
|
case "bellow": {
|
|
const yThreshold = containerRect.y + containerRect.height * .4;
|
|
if(event.pageY < yThreshold) {
|
|
setInsertMarker("above");
|
|
}
|
|
break;
|
|
}
|
|
|
|
case "above": {
|
|
const yThreshold = containerRect.y + containerRect.height * .6;
|
|
if(event.pageY > yThreshold) {
|
|
setInsertMarker("bellow");
|
|
}
|
|
break;
|
|
}
|
|
|
|
case "none": {
|
|
const yThreshold = containerRect.y + containerRect.height / 2;
|
|
if(event.pageY > yThreshold) {
|
|
setInsertMarker("bellow");
|
|
} else {
|
|
setInsertMarker("above");
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
}}
|
|
onDragLeave={() => {
|
|
if(refDragLeaveTimer.current) {
|
|
return;
|
|
}
|
|
|
|
/* The drag leave event might also gets fired when the component itself updates. If set set the insert marker to none it might cause flickering */
|
|
refDragLeaveTimer.current = setTimeout(() => {
|
|
setInsertMarker("none");
|
|
refDragLeaveTimer.current = undefined;
|
|
}, 50);
|
|
}}
|
|
onDragExit={() => setInsertMarker("none")}
|
|
onDragEnd={() => setInsertMarker("none")}
|
|
onDrop={event => {
|
|
const info = parseDragIds(event.dataTransfer);
|
|
if(!info) {
|
|
setInsertMarker("none");
|
|
return;
|
|
}
|
|
|
|
if(info.playlistId === props.playlistId && info.serverUniqueId === props.serverUniqueId) {
|
|
switch (insertMarker) {
|
|
case "above":
|
|
events.fire("action_reorder_song", { entryId: info.entryId, targetEntryId: props.entryId, mode: "before" });
|
|
break;
|
|
|
|
case "bellow":
|
|
events.fire("action_reorder_song", { entryId: info.entryId, targetEntryId: props.entryId, mode: "after" });
|
|
break;
|
|
|
|
case "none":
|
|
default:
|
|
return;
|
|
}
|
|
} else {
|
|
const songUrl = event.dataTransfer.getData(kPlaylistDragSongUrl);
|
|
if(!songUrl) { return; }
|
|
|
|
switch (insertMarker) {
|
|
case "above":
|
|
events.fire("action_add_song", { targetEntryId: props.entryId, mode: "before", url: songUrl });
|
|
break;
|
|
|
|
case "bellow":
|
|
events.fire("action_add_song", { targetEntryId: props.entryId, mode: "after", url: songUrl });
|
|
break;
|
|
|
|
case "none":
|
|
default:
|
|
return;
|
|
}
|
|
}
|
|
|
|
setInsertMarker("none");
|
|
}}
|
|
onDoubleClick={() => events.fire("action_select_entry", { entryId: props.entryId })}
|
|
>
|
|
<div className={cssStyle.thumbnail}>
|
|
{thumbnail}
|
|
</div>
|
|
<div className={cssStyle.data}>
|
|
<div className={cssStyle.row}>
|
|
<div className={cssStyle.name}>{firstRow}</div>
|
|
<div className={cssStyle.delete} onClick={() => events.fire("action_entry_delete", { entryId: props.entryId })}>
|
|
<img src="img/icon_conversation_message_delete.svg" alt="X" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className={cssStyle.row + " " + cssStyle.second}>
|
|
<div className={cssStyle.description} title={secondRowTitle}>{secondRow}</div>
|
|
<div className={cssStyle.length}>{length}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export const MusicPlaylistList = (props: { events: Registry<MusicPlaylistUiEvents>, className?: string }) => {
|
|
const [ state, setState ] = useState<MusicPlaylistStatus>(() => {
|
|
props.events.fire("query_playlist_status");
|
|
|
|
return {
|
|
status: "loading"
|
|
};
|
|
});
|
|
props.events.reactUse("notify_playlist_status", event => setState(event.status));
|
|
|
|
let content;
|
|
switch (state.status) {
|
|
case "error":
|
|
content = (
|
|
<div className={cssStyle.overlay + " " + cssStyle.error} key={"error"}>
|
|
<a><Translatable>An error occurred while fetching the playlist:</Translatable></a>
|
|
<a>{state.reason}</a>
|
|
|
|
<Button color={"blue"} type={"small"} className={cssStyle.button} onClick={() => props.events.fire("action_load_playlist", { forced: false })}>
|
|
<Translatable>Reload</Translatable>
|
|
</Button>
|
|
</div>
|
|
);
|
|
break;
|
|
|
|
case "no-permissions":
|
|
content = (
|
|
<div className={cssStyle.overlay} key={"no-permissions"}>
|
|
<a><Translatable>You don't have permissions to see this playlist:</Translatable></a>
|
|
<a>
|
|
<Translatable>Failed on permission</Translatable>
|
|
<code>{state.failedPermission}</code>
|
|
</a>
|
|
|
|
<Button color={"blue"} type={"small"} className={cssStyle.button} onClick={() => props.events.fire("action_load_playlist", { forced: false })}>
|
|
<Translatable>Reload</Translatable>
|
|
</Button>
|
|
</div>
|
|
);
|
|
break;
|
|
|
|
case "unloaded":
|
|
content = (
|
|
<div className={cssStyle.overlay} key={"unloaded"}>
|
|
<a><Translatable>Playlist hasn't been loaded</Translatable></a>
|
|
<Button color={"blue"} type={"small"} className={cssStyle.button} onClick={() => props.events.fire("action_load_playlist", { forced: false })}>
|
|
<Translatable>Load playlist</Translatable>
|
|
</Button>
|
|
</div>
|
|
);
|
|
break;
|
|
|
|
case "loading":
|
|
content = (
|
|
<div className={cssStyle.overlay} key={"loading"}>
|
|
<a><Translatable>Fetching playlist</Translatable> <LoadingDots /></a>
|
|
</div>
|
|
);
|
|
break;
|
|
|
|
case "unselected":
|
|
content = (
|
|
<div className={cssStyle.overlay} key={"unselected"}>
|
|
<a><Translatable>Please select a playlist</Translatable></a>
|
|
</div>
|
|
);
|
|
break;
|
|
|
|
case "loaded":
|
|
content = (
|
|
<div className={cssStyle.playlist} key={"playlist"}>
|
|
{state.songs.map(songId => <PlaylistEntry entryId={songId} key={"song-" + songId} active={songId === state.activeSong} playlistId={state.playlistId} serverUniqueId={state.serverUniqueId} />)}
|
|
</div>
|
|
);
|
|
break;
|
|
}
|
|
|
|
return (
|
|
<EventContext.Provider value={props.events}>
|
|
<div className={cssStyle.containerPlaylist + " " + props.className}>
|
|
{content}
|
|
</div>
|
|
</EventContext.Provider>
|
|
);
|
|
} |