forked from Qortal/q-tube
QortalSeth
8d3549739c
Refactored constants/index.ts into Identifiers.ts, Categories.ts, and Misc.ts. Regular expressions that titles allow all use new variable in Misc.ts for consistency and ease of editing it. New Characters are allowed in titles. Categories sorted by name, "Other" is always at end of list. New Categories such as Qortal under Education have been added Title prefix TextField added that starts all video titles with the entered value.
84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import { CardContentContainerComment } from "../common/Comments/Comments-styles";
|
|
import {
|
|
CrowdfundSubTitle,
|
|
CrowdfundSubTitleRow,
|
|
} from "../PublishVideo/PublishVideo-styles.tsx";
|
|
import { Box, Typography, useTheme } from "@mui/material";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
export const Playlists = ({
|
|
playlistData,
|
|
currentVideoIdentifier,
|
|
onClick,
|
|
}) => {
|
|
const theme = useTheme();
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
|
|
maxWidth: "400px",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<CrowdfundSubTitleRow>
|
|
<CrowdfundSubTitle>Playlist</CrowdfundSubTitle>
|
|
</CrowdfundSubTitleRow>
|
|
<CardContentContainerComment
|
|
sx={{
|
|
marginTop: "25px",
|
|
height: "450px",
|
|
overflow: "auto",
|
|
}}
|
|
>
|
|
{playlistData?.videos?.map((vid, index) => {
|
|
const isCurrentVidPlayling =
|
|
vid?.identifier === currentVideoIdentifier;
|
|
|
|
return (
|
|
<Box
|
|
key={vid?.identifier}
|
|
sx={{
|
|
display: "flex",
|
|
gap: "10px",
|
|
width: "100%",
|
|
background: isCurrentVidPlayling && theme.palette.primary.main,
|
|
alignItems: "center",
|
|
padding: "10px",
|
|
borderRadius: "5px",
|
|
cursor: isCurrentVidPlayling ? "default" : "pointer",
|
|
userSelect: "none",
|
|
}}
|
|
onClick={() => {
|
|
if (isCurrentVidPlayling) return;
|
|
onClick(vid.name, vid.identifier);
|
|
// navigate(`/video/${vid.name}/${vid.identifier}`)
|
|
}}
|
|
>
|
|
<Typography
|
|
sx={{
|
|
fontSize: "14px",
|
|
}}
|
|
>
|
|
{index + 1}
|
|
</Typography>
|
|
<Typography
|
|
sx={{
|
|
fontSize: "18px",
|
|
wordBreak: "break-word",
|
|
}}
|
|
>
|
|
{vid?.metadata?.title}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
})}
|
|
</CardContentContainerComment>
|
|
</Box>
|
|
);
|
|
};
|