(false);
+
+ const onSubmit = (obj?: any, isEdit?: boolean) => {
+ if (isEdit) {
+ setListComments((prev: any[]) => {
+ const findCommentIndex = prev.findIndex(
+ item => item?.identifier === obj?.identifier
+ );
+ if (findCommentIndex === -1) return prev;
+
+ const newArray = [...prev];
+ newArray[findCommentIndex] = obj;
+ return newArray;
+ });
+
+ return;
+ }
+ setListComments(prev => [
+ ...prev,
+ {
+ ...obj,
+ },
+ ]);
+ };
+
+ useEffect(() => {
+ const query = new URLSearchParams(location.search);
+ let commentVar = query?.get("comment");
+ if (commentVar) {
+ if (commentVar && commentVar.endsWith("/")) {
+ commentVar = commentVar.slice(0, -1);
+ }
+ setIsOpen(true);
+ if (listComments.length > 0) {
+ const el = document.getElementById(commentVar);
+ if (el) {
+ el.scrollIntoView();
+ el.classList.add("glow");
+ setTimeout(() => {
+ el.classList.remove("glow");
+ }, 2000);
+ }
+ navigate(location.pathname, { replace: true });
+ }
+ }
+ }, [navigate, location, listComments]);
+
+ const getReplies = useCallback(
+ async (commentId, postId) => {
+ const offset = 0;
+
+ const removeBaseCommentId = commentId.replace("_base_", "");
+ const url = `/arbitrary/resources/search?mode=ALL&service=BLOG_COMMENT&query=${QSUPPORT_COMMENT_BASE}${postId.slice(
+ -12
+ )}_reply_${removeBaseCommentId.slice(
+ -6
+ )}&limit=0&includemetadata=false&offset=${offset}&reverse=false&excludeblocked=true`;
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ const responseData = await response.json();
+ const comments: any[] = [];
+ for (const comment of responseData) {
+ if (comment.identifier && comment.name) {
+ const url = `/arbitrary/BLOG_COMMENT/${comment.name}/${comment.identifier}`;
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+
+ const responseData2 = await response.text();
+ if (responseData) {
+ comments.push({
+ message: responseData2,
+ ...comment,
+ });
+ }
+ }
+ }
+ return comments;
+ },
+ [postId]
+ );
+
+ const getComments = useCallback(
+ async (isNewMessages?: boolean, numberOfComments?: number) => {
+ try {
+ setLoadingComments(true);
+ let offset = 0;
+ if (isNewMessages && numberOfComments) {
+ offset = numberOfComments;
+ }
+ const url = `/arbitrary/resources/search?mode=ALL&service=BLOG_COMMENT&query=${QSUPPORT_COMMENT_BASE}${postId.slice(
+ -12
+ )}_base_&limit=20&includemetadata=false&offset=${offset}&reverse=false&excludeblocked=true`;
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ const responseData = await response.json();
+ let comments: any[] = [];
+ for (const comment of responseData) {
+ if (comment.identifier && comment.name) {
+ const url = `/arbitrary/BLOG_COMMENT/${comment.name}/${comment.identifier}`;
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+
+ const responseData2 = await response.text();
+ if (responseData) {
+ comments.push({
+ message: responseData2,
+ ...comment,
+ });
+ }
+ const res = await getReplies(comment.identifier, postId);
+ comments = [...comments, ...res];
+ }
+ }
+ if (isNewMessages) {
+ setListComments(prev => [...prev, ...comments]);
+ setNewMessages(0);
+ } else {
+ setListComments(comments);
+ }
+ } catch (error) {
+ console.error(error);
+ } finally {
+ setLoadingComments(false);
+ }
+ },
+ [postId]
+ );
+
+ useEffect(() => {
+ getComments();
+ }, [getComments, postId]);
+
+ const structuredCommentList = useMemo(() => {
+ return listComments.reduce((acc, curr, index, array) => {
+ if (curr?.identifier?.includes("_reply_")) {
+ return acc;
+ }
+ acc.push({
+ ...curr,
+ replies: array.filter(comment =>
+ comment.identifier.includes(`_reply_${curr.identifier.slice(-6)}`)
+ ),
+ });
+ return acc;
+ }, []);
+ }, [listComments]);
+
+ return (
+ <>
+
+
+ Comments
+
+
+ {loadingComments ? (
+
+
+
+ ) : listComments.length === 0 ? (
+
+ There are no comments yet. Be the first to comment!
+
+ ) : (
+
+ {structuredCommentList.map((comment: any) => {
+ return (
+
+ );
+ })}
+
+ )}
+ {listComments.length > 20 && (
+
+ {
+ getComments(
+ true,
+ listComments.filter(
+ item => !item.identifier.includes("_reply_")
+ ).length
+ );
+ }}
+ variant="contained"
+ size="small"
+ >
+ Load More Comments
+
+
+ )}
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/common/Comments/Comments-styles.tsx b/src/components/common/Comments/Comments-styles.tsx
new file mode 100644
index 0000000..e215c9d
--- /dev/null
+++ b/src/components/common/Comments/Comments-styles.tsx
@@ -0,0 +1,281 @@
+import { styled } from "@mui/system";
+import { Card, Box, Typography, Button, TextField } from "@mui/material";
+
+export const StyledCard = styled(Card)(({ theme }) => ({
+ backgroundColor:
+ theme.palette.mode === "light"
+ ? theme.palette.primary.main
+ : theme.palette.primary.dark,
+ maxWidth: "600px",
+ width: "100%",
+ margin: "10px 0px",
+ cursor: "pointer",
+ "@media (max-width: 450px)": {
+ width: "100%;",
+ },
+}));
+
+export const CardContentContainer = styled(Box)(({ theme }) => ({
+ backgroundColor:
+ theme.palette.mode === "light"
+ ? theme.palette.primary.dark
+ : theme.palette.primary.light,
+ margin: "5px 10px",
+ borderRadius: "15px",
+}));
+
+export const CardContentContainerComment = styled(Box)(({ theme }) => ({
+ backgroundColor: theme.palette.mode === "light" ? "#a9d9d038" : "#c3abe414",
+ border: `1px solid ${theme.palette.primary.main}`,
+ margin: "0px",
+ padding: "8px 15px",
+ borderRadius: "8px",
+ width: "100%",
+ display: "flex",
+ flexDirection: "column",
+}));
+
+export const StyledCardHeader = styled(Box)({
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "flex-start",
+ gap: "5px",
+ padding: "7px",
+});
+
+export const StyledCardHeaderComment = styled(Box)({
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "flex-start",
+ gap: "7px",
+ padding: "9px 7px",
+});
+
+export const StyledCardCol = styled(Box)({
+ display: "flex",
+ overflow: "hidden",
+ flexDirection: "column",
+ gap: "2px",
+ alignItems: "flex-start",
+ width: "100%",
+});
+
+export const StyledCardColComment = styled(Box)({
+ display: "flex",
+ overflow: "hidden",
+ flexDirection: "column",
+ gap: "2px",
+ alignItems: "flex-start",
+ width: "100%",
+});
+
+export const StyledCardContent = styled(Box)({
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ justifyContent: "flex-start",
+ padding: "5px 10px",
+ gap: "10px",
+});
+
+export const StyledCardContentComment = styled(Box)({
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "flex-start",
+ justifyContent: "flex-start",
+ padding: "5px 10px",
+ gap: "10px",
+});
+
+export const StyledCardComment = styled(Typography)(({ theme }) => ({
+ fontFamily: "Mulish",
+ letterSpacing: 0,
+ fontWeight: 400,
+ color: theme.palette.text.primary,
+ fontSize: "19px",
+ wordBreak: "break-word"
+}));
+
+export const TitleText = styled(Typography)({
+ whiteSpace: "nowrap",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ width: "100%",
+ fontFamily: "Cairo, sans-serif",
+ fontSize: "22px",
+ lineHeight: "1.2",
+});
+
+export const AuthorText = styled(Typography)({
+ fontFamily: "Raleway, sans-serif",
+ fontSize: "16px",
+ lineHeight: "1.2",
+});
+
+export const AuthorTextComment = styled(Typography)(({ theme }) => ({
+ fontFamily: "Montserrat, sans-serif",
+ fontSize: "17px",
+ letterSpacing: "0.3px",
+ fontWeight: 400,
+ color: theme.palette.text.primary,
+ userSelect: "none",
+}));
+
+export const IconsBox = styled(Box)({
+ display: "flex",
+ gap: "3px",
+ position: "absolute",
+ top: "12px",
+ right: "5px",
+ transition: "all 0.3s ease-in-out",
+});
+
+export const BookmarkIconContainer = styled(Box)({
+ display: "flex",
+ boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;",
+ backgroundColor: "#fbfbfb",
+ color: "#50e3c2",
+ padding: "5px",
+ borderRadius: "3px",
+ transition: "all 0.3s ease-in-out",
+ "&:hover": {
+ cursor: "pointer",
+ transform: "scale(1.1)",
+ },
+});
+
+export const BlockIconContainer = styled(Box)({
+ display: "flex",
+ boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;",
+ backgroundColor: "#fbfbfb",
+ color: "#c25252",
+ padding: "5px",
+ borderRadius: "3px",
+ transition: "all 0.3s ease-in-out",
+ "&:hover": {
+ cursor: "pointer",
+ transform: "scale(1.1)",
+ },
+});
+
+export const CommentsContainer = styled(Box)({
+ width: "90%",
+ maxWidth: "1000px",
+ display: "flex",
+ flexDirection: "column",
+ flex: "1",
+ overflow: "auto",
+});
+
+export const CommentContainer = styled(Box)({
+ display: "flex",
+ flexDirection: "column",
+ margin: "25px 0px 50px 0px",
+ maxWidth: "100%",
+ width: "100%",
+ gap: "10px",
+ padding: "0px 5px",
+});
+
+export const NoCommentsRow = styled(Box)({
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ flex: "1",
+ padding: "10px 0px",
+ fontFamily: "Mulish",
+ letterSpacing: 0,
+ fontWeight: 400,
+ fontSize: "18px",
+});
+
+export const LoadMoreCommentsButtonRow = styled(Box)({
+ display: "flex",
+});
+
+export const EditReplyButton = styled(Button)(({ theme }) => ({
+ width: "30px",
+ alignSelf: "flex-end",
+ background: theme.palette.primary.light,
+ color: "#ffffff",
+}));
+
+export const LoadMoreCommentsButton = styled(Button)(({ theme }) => ({
+ fontFamily: "Montserrat",
+ fontWeight: 400,
+ letterSpacing: "0.2px",
+ fontSize: "15px",
+ backgroundColor: theme.palette.primary.main,
+ color: "#ffffff",
+}));
+
+export const CommentActionButtonRow = styled(Box)({
+ display: "flex",
+ alignItems: "center",
+ gap: "5px",
+});
+
+export const CommentEditorContainer = styled(Box)({
+ width: "100%",
+ display: "flex",
+ justifyContent: "center",
+});
+
+export const CommentDateText = styled(Typography)(({ theme }) => ({
+ fontFamily: "Mulish",
+ letterSpacing: 0,
+ fontWeight: 400,
+ fontSize: "13px",
+ marginLeft: "5px",
+ color: theme.palette.text.primary,
+}));
+
+export const CommentInputContainer = styled(Box)({
+ display: "flex",
+ flexDirection: "column",
+ marginTop: "15px",
+ width: "90%",
+ maxWidth: "1000px",
+ borderRadius: "8px",
+ gap: "10px",
+ alignItems: "center",
+ marginBottom: "25px",
+});
+
+export const CommentInput = styled(TextField)(({ theme }) => ({
+ backgroundColor: theme.palette.mode === "light" ? "#a9d9d01d" : "#c3abe4a",
+ border: `1px solid ${theme.palette.primary.main}`,
+ width: "100%",
+ borderRadius: "8px",
+ '& [class$="-MuiFilledInput-root"]': {
+ fontFamily: "Mulish",
+ letterSpacing: 0,
+ fontWeight: 400,
+ color: theme.palette.text.primary,
+ fontSize: "19px",
+ minHeight: "100px",
+ backgroundColor: "transparent",
+ "&:before": {
+ borderBottom: "none",
+ "&:hover": {
+ borderBottom: "none",
+ },
+ },
+ "&:hover": {
+ backgroundColor: "transparent",
+ "&:before": {
+ borderBottom: "none",
+ },
+ },
+ },
+}));
+
+export const SubmitCommentButton = styled(Button)(({ theme }) => ({
+ fontFamily: "Montserrat",
+ fontWeight: 400,
+ letterSpacing: "0.2px",
+ fontSize: "15px",
+ backgroundColor: theme.palette.primary.main,
+ color: "#ffffff",
+ width: "75%",
+}));
diff --git a/src/components/common/ConsentModal.tsx b/src/components/common/ConsentModal.tsx
new file mode 100644
index 0000000..fb2f534
--- /dev/null
+++ b/src/components/common/ConsentModal.tsx
@@ -0,0 +1,72 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import localForage from "localforage";
+import { useTheme } from "@mui/material";
+const generalLocal = localForage.createInstance({
+ name: "q-share-general",
+});
+
+export default function ConsentModal() {
+ const theme = useTheme();
+
+ const [open, setOpen] = React.useState(false);
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ const getIsConsented = React.useCallback(async () => {
+ try {
+ const hasConsented = await generalLocal.getItem("general-consent");
+ if (hasConsented) return;
+
+ setOpen(true);
+ generalLocal.setItem("general-consent", true);
+ } catch (error) {}
+ }, []);
+
+ React.useEffect(() => {
+ getIsConsented();
+ }, []);
+ return (
+
+
+
+ );
+}
diff --git a/src/components/common/DownloadTaskManager.tsx b/src/components/common/DownloadTaskManager.tsx
new file mode 100644
index 0000000..5089b21
--- /dev/null
+++ b/src/components/common/DownloadTaskManager.tsx
@@ -0,0 +1,204 @@
+import React, { useState, useEffect } from 'react'
+import {
+ Accordion,
+ AccordionDetails,
+ AccordionSummary,
+ Box,
+ Button,
+ LinearProgress,
+ List,
+ ListItem,
+ ListItemIcon,
+ Popover,
+ Typography,
+ useTheme
+} from '@mui/material'
+import { Movie } from '@mui/icons-material'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { DownloadingLight } from '../../assets/svgs/DownloadingLight'
+import { DownloadedLight } from '../../assets/svgs/DownloadedLight'
+import AttachFileIcon from "@mui/icons-material/AttachFile";
+
+export const DownloadTaskManager: React.FC = () => {
+ const { downloads } = useSelector((state: RootState) => state.global)
+ const location = useLocation()
+ const theme = useTheme()
+ const [visible, setVisible] = useState(false)
+ const [hidden, setHidden] = useState(true)
+ const navigate = useNavigate()
+ const [anchorEl, setAnchorEl] = useState(null);
+
+
+ const [openDownload, setOpenDownload] = useState(false);
+
+
+ const handleClick = (event?: React.MouseEvent) => {
+ const target = event?.currentTarget as unknown as HTMLButtonElement | null;
+ setAnchorEl(target);
+ };
+
+ const handleCloseDownload = () => {
+ setAnchorEl(null);
+ setOpenDownload(false);
+ };
+
+ useEffect(() => {
+ // Simulate downloads for demo purposes
+
+ if (visible) {
+ setTimeout(() => {
+ setHidden(true)
+ setVisible(false)
+ }, 3000)
+ }
+ }, [visible])
+
+
+ useEffect(() => {
+ if (Object.keys(downloads).length === 0) return
+ setVisible(true)
+ setHidden(false)
+ }, [downloads])
+
+
+ if (
+ !downloads ||
+ Object.keys(downloads).length === 0
+ )
+ return null
+
+
+ let downloadInProgress = false
+ if(Object.keys(downloads).find((key)=> (downloads[key]?.status?.status !== 'READY' && downloads[key]?.status?.status !== 'DOWNLOADED'))){
+ downloadInProgress = true
+ }
+
+ return (
+
+
+
+
+
+ {Object.keys(downloads)
+ .map((download: any) => {
+ const downloadObj = downloads[download]
+ const progress = downloads[download]?.status?.percentLoaded || 0
+ const status = downloads[download]?.status?.status
+ const service = downloads[download]?.service
+ return (
+ {
+ const id = downloadObj?.properties?.jsonId
+ if (!id) return
+
+ navigate(
+ `/share/${downloadObj?.properties?.name}/${id}`
+ )
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+ {`${progress?.toFixed(0)}%`}{' '}
+ {status && status === 'REFETCHING' && '- refetching'}
+ {status && status === 'DOWNLOADED' && '- building'}
+
+
+
+ {downloadObj?.identifier}
+
+
+ )
+ })}
+
+
+
+
+
+ )
+}
diff --git a/src/components/common/FileElement.tsx b/src/components/common/FileElement.tsx
new file mode 100644
index 0000000..4027bf9
--- /dev/null
+++ b/src/components/common/FileElement.tsx
@@ -0,0 +1,446 @@
+import * as React from "react";
+import { styled, useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { useDispatch, useSelector } from "react-redux";
+import { CircularProgress } from "@mui/material";
+import AttachFileIcon from "@mui/icons-material/AttachFile";
+import { MyContext } from "../../wrappers/DownloadWrapper";
+import { RootState } from "../../state/store";
+import { setNotification } from "../../state/features/notificationsSlice";
+
+const Widget = styled("div")(({ theme }) => ({
+ padding: 8,
+ borderRadius: 10,
+ maxWidth: 350,
+ position: "relative",
+ zIndex: 1,
+ backdropFilter: "blur(40px)",
+ background: "skyblue",
+ transition: "0.2s all",
+ "&:hover": {
+ opacity: 0.75,
+ },
+}));
+
+const CoverImage = styled("div")({
+ width: 40,
+ height: 40,
+ objectFit: "cover",
+ overflow: "hidden",
+ flexShrink: 0,
+ borderRadius: 8,
+ backgroundColor: "rgba(0,0,0,0.08)",
+ "& > img": {
+ width: "100%",
+ },
+});
+
+interface IAudioElement {
+ title: string;
+ description?: string;
+ author?: string;
+ fileInfo?: any;
+ postId?: string;
+ user?: string;
+ children?: React.ReactNode;
+ mimeType?: string;
+ disable?: boolean;
+ mode?: string;
+ otherUser?: string;
+ customStyles?: any;
+ jsonId:string;
+}
+
+interface CustomWindow extends Window {
+ showSaveFilePicker: any; // Replace 'any' with the appropriate type if you know it
+}
+
+const customWindow = window as unknown as CustomWindow;
+
+export default function FileElement({
+ title,
+ description,
+ author,
+ fileInfo,
+ children,
+ mimeType,
+ disable,
+ customStyles,
+ jsonId
+}: IAudioElement) {
+ const { downloadVideo } = React.useContext(MyContext);
+ const [startedDownload, setStartedDownload] = React.useState(false)
+ const [isLoading, setIsLoading] = React.useState(false);
+ const [fileProperties, setFileProperties] = React.useState(null);
+ const [downloadLoader, setDownloadLoader] = React.useState(false);
+ const downloads = useSelector((state: RootState) => state.global?.downloads);
+ const status = React.useRef(null)
+
+ const hasCommencedDownload = React.useRef(false);
+ const dispatch = useDispatch();
+ const reDownload = React.useRef(false)
+ const isFetchingProperties = React.useRef(false)
+ const download = React.useMemo(() => {
+ if (!downloads || !fileInfo?.identifier) return {};
+ const findDownload = downloads[fileInfo?.identifier];
+
+ if (!findDownload) return {};
+ return findDownload;
+ }, [downloads, fileInfo]);
+
+ const resourceStatus = React.useMemo(() => {
+ return download?.status || {};
+ }, [download]);
+
+ const retryDownload = React.useRef(0);
+
+ const handlePlay = async () => {
+ if (disable) return;
+ hasCommencedDownload.current = true;
+ setStartedDownload(true)
+ if (
+ resourceStatus?.status === "READY"
+ ) {
+ if (downloadLoader) return;
+
+ setDownloadLoader(true);
+ let filename = download?.properties?.filename
+ let mimeType = download?.properties?.type
+
+ try {
+ const { name, service, identifier } = fileInfo;
+
+ const res = await qortalRequest({
+ action: "GET_QDN_RESOURCE_PROPERTIES",
+ name: name,
+ service: service,
+ identifier: identifier,
+ });
+ filename = res?.filename || filename;
+ mimeType = res?.mimeType || mimeType;
+ } catch (error) {
+
+ }
+ try {
+ const { name, service, identifier } = fileInfo;
+
+ const url = `/arbitrary/${service}/${name}/${identifier}`;
+ fetch(url)
+ .then(response => response.blob())
+ .then(async blob => {
+ await qortalRequest({
+ action: "SAVE_FILE",
+ blob,
+ filename: filename,
+ mimeType,
+ });
+ })
+ .catch(error => {
+ console.error("Error fetching the video:", error);
+ });
+ } catch (error: any) {
+ let notificationObj: any = null;
+ if (typeof error === "string") {
+ notificationObj = {
+ msg: error || "Failed to send message",
+ alertType: "error",
+ };
+ } else if (typeof error?.error === "string") {
+ notificationObj = {
+ msg: error?.error || "Failed to send message",
+ alertType: "error",
+ };
+ } else {
+ notificationObj = {
+ msg: error?.message || "Failed to send message",
+ alertType: "error",
+ };
+ }
+ if (!notificationObj) return;
+ dispatch(setNotification(notificationObj));
+ } finally {
+ setDownloadLoader(false);
+ }
+ return;
+ }
+
+ const { name, service, identifier } = fileInfo;
+
+ setIsLoading(true);
+ downloadVideo({
+ name,
+ service,
+ identifier,
+ properties: {
+ ...fileInfo,
+ jsonId
+ },
+ });
+ };
+
+ const refetch = React.useCallback(async () => {
+ if (!fileInfo) return
+ try {
+ const { name, service, identifier } = fileInfo;
+ isFetchingProperties.current = true
+ await qortalRequest({
+ action: 'GET_QDN_RESOURCE_PROPERTIES',
+ name,
+ service,
+ identifier
+ })
+
+ } catch (error) {
+
+ } finally {
+ isFetchingProperties.current = false
+ }
+
+ }, [fileInfo])
+
+ const refetchInInterval = ()=> {
+ try {
+ const interval = setInterval(()=> {
+ if(status?.current === 'DOWNLOADED'){
+ refetch()
+ }
+ if(status?.current === 'READY'){
+ clearInterval(interval);
+ }
+
+ }, 7500)
+ } catch (error) {
+
+ }
+ }
+
+ React.useEffect(() => {
+ if(resourceStatus?.status){
+ status.current = resourceStatus?.status
+ }
+ if (
+ resourceStatus?.status === 'DOWNLOADED' &&
+ reDownload?.current === false
+ ) {
+ refetchInInterval()
+ reDownload.current = true
+ }
+ }, [resourceStatus])
+
+
+ React.useEffect(() => {
+ if (
+ resourceStatus?.status === "READY" &&
+ download?.url &&
+ download?.properties?.filename &&
+ hasCommencedDownload.current
+ ) {
+ setIsLoading(false);
+ dispatch(
+ setNotification({
+ msg: "Download completed. Click to save file",
+ alertType: "info",
+ })
+ );
+ }
+ }, [resourceStatus, download]);
+
+ return (
+
+ {children && (
+
+ {children}{" "}
+ {((resourceStatus.status && resourceStatus?.status !== "READY") ||
+ isLoading) && startedDownload ? (
+ <>
+
+ {`${Math.round(
+ resourceStatus?.percentLoaded || 0
+ ).toFixed(0)}% loaded`}
+
+ ) : resourceStatus?.status === "READY" ? (
+ <>
+
+ Ready to save: click here
+
+ {downloadLoader && (
+
+ )}
+
+ ) : null}
+
+ )}
+ {!children && (
+
+
+
+
+
+
+
+ {author}
+
+
+ {title}
+
+
+ {description}
+
+ {mimeType && (
+
+ {mimeType}
+
+ )}
+
+
+ {((resourceStatus.status && resourceStatus?.status !== "READY") ||
+ isLoading) && startedDownload && (
+
+
+ {resourceStatus && (
+
+ {resourceStatus?.status === "REFETCHING" ? (
+ <>
+ <>
+ {(
+ (resourceStatus?.localChunkCount /
+ resourceStatus?.totalChunkCount) *
+ 100
+ )?.toFixed(0)}
+ %
+
+
+ <> Refetching in 2 minutes
+
+ ) : resourceStatus?.status === "DOWNLOADED" ? (
+ <>Download Completed: building file...
+ ) : resourceStatus?.status !== "READY" ? (
+ <>
+ {(
+ (resourceStatus?.localChunkCount /
+ resourceStatus?.totalChunkCount) *
+ 100
+ )?.toFixed(0)}
+ %
+
+ ) : (
+ <>Download Completed: fetching file...
+ )}
+
+ )}
+
+ )}
+ {resourceStatus?.status === "READY" &&
+ download?.url &&
+ download?.properties?.filename && (
+
+
+ Ready to save: click here
+
+ {downloadLoader && (
+
+ )}
+
+ )}
+
+ )}
+
+ );
+}
diff --git a/src/components/common/ImagePublisher/ImagePublisher-styles.tsx b/src/components/common/ImagePublisher/ImagePublisher-styles.tsx
new file mode 100644
index 0000000..00c4f3a
--- /dev/null
+++ b/src/components/common/ImagePublisher/ImagePublisher-styles.tsx
@@ -0,0 +1,47 @@
+import { Box, Button } from "@mui/material";
+import { styled } from "@mui/system";
+import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternate";
+import { TimesSVG } from "./TimesSVG.tsx";
+
+export const AddCoverImageButton = styled(Button)(({ theme }) => ({
+ display: "flex",
+ alignItems: "center",
+ fontFamily: "Montserrat",
+ fontSize: "16px",
+ fontWeight: 400,
+ letterSpacing: "0.2px",
+ color: "white",
+ gap: "5px",
+}));
+
+export const AddLogoIcon = styled(AddPhotoAlternateIcon)(({ theme }) => ({
+ color: "#fff",
+ height: "25px",
+ width: "auto",
+}));
+
+export const LogoPreviewRow = styled(Box)(({ theme }) => ({
+ display: "flex",
+ alignItems: "center",
+ gap: "10px",
+}));
+
+export const CoverImagePreview = styled("img")(({ theme }) => ({
+ width: "100px",
+ height: "100px",
+ objectFit: "contain",
+ userSelect: "none",
+ borderRadius: "3px",
+ marginBottom: "10px",
+}));
+
+export const TimesIcon = styled(TimesSVG)(({ theme }) => ({
+ backgroundColor: theme.palette.background.paper,
+ borderRadius: "50%",
+ padding: "5px",
+ transition: "all 0.2s ease-in-out",
+ "&:hover": {
+ cursor: "pointer",
+ scale: "1.1",
+ },
+}));
diff --git a/src/components/common/ImagePublisher/ImagePublisher.tsx b/src/components/common/ImagePublisher/ImagePublisher.tsx
new file mode 100644
index 0000000..5358b71
--- /dev/null
+++ b/src/components/common/ImagePublisher/ImagePublisher.tsx
@@ -0,0 +1,62 @@
+import ImageUploader from "./ImageUploader.tsx";
+import React, { useImperativeHandle, useState } from "react";
+import {
+ AddCoverImageButton,
+ AddLogoIcon,
+ CoverImagePreview,
+ LogoPreviewRow,
+ TimesIcon,
+} from "./ImagePublisher-styles.tsx";
+import { useTheme } from "@mui/material";
+
+export type ImagePublisherRef = {
+ getImageArray: () => string[];
+};
+
+interface ImagePublisherProps {
+ initialImages?: string[];
+}
+export const ImagePublisher = React.forwardRef<
+ ImagePublisherRef,
+ ImagePublisherProps
+>(({ initialImages }: ImagePublisherProps, ref) => {
+ const theme = useTheme();
+ const [imageArray, setImageArray] = useState(initialImages || []);
+
+ useImperativeHandle(ref, () => ({
+ getImageArray: () => {
+ return imageArray;
+ },
+ }));
+
+ return (
+ <>
+ {imageArray.length === 0 ? (
+ setImageArray(img)}>
+
+ Add Images
+
+
+
+ ) : (
+
+ {imageArray.map(
+ image =>
+ image &&
+ )}
+ setImageArray([])}
+ height={"32"}
+ width={"32"}
+ >
+
+ )}
+
+ );
+});
diff --git a/src/components/common/ImagePublisher/ImageUploader.tsx b/src/components/common/ImagePublisher/ImageUploader.tsx
new file mode 100644
index 0000000..6919bff
--- /dev/null
+++ b/src/components/common/ImagePublisher/ImageUploader.tsx
@@ -0,0 +1,109 @@
+import React, { useCallback } from "react";
+import { Box } from "@mui/material";
+import {
+ DropzoneInputProps,
+ DropzoneRootProps,
+ useDropzone,
+} from "react-dropzone";
+import Compressor from "compressorjs";
+import { setNotification } from "../../../state/features/notificationsSlice.ts";
+import { useDispatch } from "react-redux";
+
+const toBase64 = (file: File): Promise =>
+ new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.readAsDataURL(file);
+ reader.onload = () => resolve(reader.result);
+ reader.onerror = error => {
+ reject(error);
+ };
+ });
+
+interface ImageUploaderProps {
+ children: React.ReactNode;
+ onPick: (base64Img: string[]) => void;
+}
+
+export const ImageUploader: React.FC = ({
+ children,
+ onPick,
+}) => {
+ const dispatch = useDispatch();
+ const imageLimit = 3;
+
+ const compressImages = async (images: File[]) => {
+ const promises = images.map(image => {
+ return new Promise(resolve => {
+ new Compressor(image, {
+ quality: 0.6,
+ maxWidth: 1200,
+ mimeType: "image/webp",
+ success(result) {
+ const file = new File([result], "name", {
+ type: "image/webp",
+ });
+ resolve(result);
+ },
+ error(err) {},
+ });
+ });
+ });
+ return await Promise.all(promises);
+ };
+
+ const onDrop = useCallback(
+ async (acceptedFiles: File[]) => {
+ if (acceptedFiles.length > imageLimit) {
+ const notificationObj = {
+ msg: `Only ${imageLimit} images can be published`,
+ alertType: "error",
+ };
+ dispatch(setNotification(notificationObj));
+ return;
+ }
+
+ try {
+ const compressedImages = await compressImages(acceptedFiles);
+ if (!compressedImages) return;
+
+ const base64Iamges = await Promise.all(
+ compressedImages.map(image => toBase64(image as File))
+ );
+
+ onPick(base64Iamges as string[]);
+ } catch (error) {
+ console.error(error);
+ }
+ },
+ [onPick]
+ );
+
+ const {
+ getRootProps,
+ getInputProps,
+ isDragActive,
+ }: {
+ getRootProps: () => DropzoneRootProps;
+ getInputProps: () => DropzoneInputProps;
+ isDragActive: boolean;
+ } = useDropzone({
+ onDrop,
+ accept: {
+ "image/*": [],
+ },
+ });
+
+ return (
+
+
+ {children}
+
+ );
+};
+
+export default ImageUploader;
diff --git a/src/components/common/ImagePublisher/TimesSVG.tsx b/src/components/common/ImagePublisher/TimesSVG.tsx
new file mode 100644
index 0000000..4f97ce4
--- /dev/null
+++ b/src/components/common/ImagePublisher/TimesSVG.tsx
@@ -0,0 +1,28 @@
+export interface IconTypes {
+ color?: string;
+ height: string;
+ width: string;
+ className?: string;
+ onClickFunc?: (e?: any) => void;
+}
+export const TimesSVG: React.FC = ({
+ color,
+ height,
+ width,
+ className,
+ onClickFunc,
+}) => {
+ return (
+
+ );
+};
diff --git a/src/components/common/LazyLoad.tsx b/src/components/common/LazyLoad.tsx
new file mode 100644
index 0000000..5ce7a30
--- /dev/null
+++ b/src/components/common/LazyLoad.tsx
@@ -0,0 +1,48 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useInView } from 'react-intersection-observer'
+import CircularProgress from '@mui/material/CircularProgress'
+
+interface Props {
+ onLoadMore: () => Promise
+ isLoading?: boolean
+}
+
+const LazyLoad: React.FC = ({ onLoadMore, isLoading }) => {
+ const [isFetching, setIsFetching] = useState(false)
+
+ const firstLoad = useRef(false)
+ const [ref, inView] = useInView({
+ threshold: 0.7
+ })
+
+ useEffect(() => {
+ if (inView) {
+ setIsFetching(true)
+ onLoadMore().finally(() => {
+ setIsFetching(false)
+ firstLoad.current = true
+ })
+ }
+ }, [inView])
+
+ return (
+
+ )
+}
+
+export default LazyLoad
diff --git a/src/components/common/MultiplePublish/MultiplePublishAll.tsx b/src/components/common/MultiplePublish/MultiplePublishAll.tsx
new file mode 100644
index 0000000..7b4fd50
--- /dev/null
+++ b/src/components/common/MultiplePublish/MultiplePublishAll.tsx
@@ -0,0 +1,225 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+ Box,
+ Button,
+ CircularProgress,
+ Modal,
+ Typography,
+ useTheme,
+} from "@mui/material";
+import React, { useCallback, useEffect, useState, useRef } from "react";
+import { CircleSVG } from "../../../assets/svgs/CircleSVG";
+import { EmptyCircleSVG } from "../../../assets/svgs/EmptyCircleSVG";
+import { styled } from "@mui/system";
+
+interface Publish {
+ resources: any[];
+ action: string;
+}
+
+interface MultiplePublishProps {
+ publishes: Publish;
+ isOpen: boolean;
+ onSubmit: () => void;
+ onError: (message?: string) => void;
+}
+export const MultiplePublish = ({
+ publishes,
+ isOpen,
+ onSubmit,
+ onError,
+}: MultiplePublishProps) => {
+ const theme = useTheme();
+ const listOfSuccessfulPublishesRef = useRef([]);
+ const [listOfSuccessfulPublishes, setListOfSuccessfulPublishes] = useState<
+ any[]
+ >([]);
+ const [listOfUnsuccessfulPublishes, setListOfUnSuccessfulPublishes] =
+ useState([]);
+ const [currentlyInPublish, setCurrentlyInPublish] = useState(null);
+ const hasStarted = useRef(false);
+ const publish = useCallback(async (pub: any) => {
+ const lengthOfResources = pub?.resources?.length;
+ const lengthOfTimeout = lengthOfResources * 30000;
+ return await qortalRequestWithTimeout(pub, lengthOfTimeout);
+ }, []);
+ const [isPublishing, setIsPublishing] = useState(true);
+
+ const handlePublish = useCallback(
+ async (pub: any) => {
+ try {
+ setCurrentlyInPublish(pub?.identifier);
+ setIsPublishing(true);
+ const res = await publish(pub);
+
+ onSubmit();
+ setListOfUnSuccessfulPublishes([]);
+ } catch (error: any) {
+ const unsuccessfulPublishes = error?.error?.unsuccessfulPublishes || [];
+ if (error?.error === "User declined request") {
+ onError();
+ return;
+ }
+
+ if (error?.error === "The request timed out") {
+ onError("The request timed out");
+
+ return;
+ }
+
+ if (unsuccessfulPublishes?.length > 0) {
+ setListOfUnSuccessfulPublishes(unsuccessfulPublishes);
+ }
+ } finally {
+ setIsPublishing(false);
+ }
+ },
+ [publish]
+ );
+
+ const retry = () => {
+ let newlistOfMultiplePublishes: any[] = [];
+ listOfUnsuccessfulPublishes?.forEach(item => {
+ const findPub = publishes?.resources.find(
+ (res: any) => res?.identifier === item.identifier
+ );
+ if (findPub) {
+ newlistOfMultiplePublishes.push(findPub);
+ }
+ });
+ const multiplePublish = {
+ ...publishes,
+ resources: newlistOfMultiplePublishes,
+ };
+ handlePublish(multiplePublish);
+ };
+
+ const startPublish = useCallback(
+ async (pubs: any) => {
+ await handlePublish(pubs);
+ },
+ [handlePublish, onSubmit, listOfSuccessfulPublishes, publishes]
+ );
+
+ useEffect(() => {
+ if (publishes && !hasStarted.current) {
+ hasStarted.current = true;
+ startPublish(publishes);
+ }
+ }, [startPublish, publishes, listOfSuccessfulPublishes]);
+
+ return (
+
+
+ {publishes?.resources?.map((publish: any) => {
+ const unpublished = listOfUnsuccessfulPublishes.map(
+ item => item?.identifier
+ );
+ return (
+
+ {publish?.identifier}
+ {!isPublishing && hasStarted.current ? (
+ <>
+ {!unpublished.includes(publish.identifier) ? (
+
+ ) : (
+
+ )}
+
+ ) : (
+
+ )}
+
+ );
+ })}
+ {!isPublishing && listOfUnsuccessfulPublishes.length > 0 && (
+ <>
+
+ Some files were not published. Please try again. It's important
+ that all the files get published. Maybe wait a couple minutes if
+ the error keeps occurring
+
+
+
+ )}
+
+
+ );
+};
+
+export const ModalBody = styled(Box)(({ theme }) => ({
+ position: "absolute",
+ backgroundColor: theme.palette.background.default,
+ borderRadius: "4px",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)",
+ width: "75%",
+ maxWidth: "900px",
+ padding: "15px 35px",
+ display: "flex",
+ flexDirection: "column",
+ gap: "17px",
+ overflowY: "auto",
+ maxHeight: "95vh",
+ boxShadow:
+ theme.palette.mode === "dark"
+ ? "0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2)"
+ : "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
+ "&::-webkit-scrollbar-track": {
+ backgroundColor: theme.palette.background.paper,
+ },
+ "&::-webkit-scrollbar-track:hover": {
+ backgroundColor: theme.palette.background.paper,
+ },
+ "&::-webkit-scrollbar": {
+ width: "16px",
+ height: "10px",
+ backgroundColor: theme.palette.mode === "light" ? "#f6f8fa" : "#292d3e",
+ },
+ "&::-webkit-scrollbar-thumb": {
+ backgroundColor: theme.palette.mode === "light" ? "#d3d9e1" : "#575757",
+ borderRadius: "8px",
+ backgroundClip: "content-box",
+ border: "4px solid transparent",
+ },
+ "&::-webkit-scrollbar-thumb:hover": {
+ backgroundColor: theme.palette.mode === "light" ? "#b7bcc4" : "#474646",
+ },
+}));
diff --git a/src/components/common/Notification/Notification.tsx b/src/components/common/Notification/Notification.tsx
new file mode 100644
index 0000000..501f081
--- /dev/null
+++ b/src/components/common/Notification/Notification.tsx
@@ -0,0 +1,86 @@
+import { useDispatch, useSelector } from 'react-redux'
+import { toast, ToastContainer, Zoom, Slide } from 'react-toastify'
+import { removeNotification } from '../../../state/features/notificationsSlice'
+import 'react-toastify/dist/ReactToastify.css'
+import { RootState } from '../../../state/store'
+
+const Notification = () => {
+ const dispatch = useDispatch()
+
+ const { alertTypes } = useSelector((state: RootState) => state.notifications)
+
+ if (alertTypes.alertError) {
+ toast.error(`❌ ${alertTypes?.alertError}`, {
+ position: 'bottom-right',
+ autoClose: 4000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ icon: false
+ })
+ dispatch(removeNotification())
+ }
+ if (alertTypes.alertSuccess) {
+ toast.success(`✔️ ${alertTypes?.alertSuccess}`, {
+ position: 'bottom-right',
+ autoClose: 4000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ icon: false
+ })
+ dispatch(removeNotification())
+ }
+ if (alertTypes.alertInfo) {
+ toast.info(`${alertTypes?.alertInfo}`, {
+ position: 'top-right',
+ autoClose: 1300,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ theme: 'light'
+ })
+ dispatch(removeNotification())
+ }
+
+ if (alertTypes.alertInfo) {
+ return (
+
+ )
+ }
+
+ return (
+
+ )
+}
+
+export default Notification
diff --git a/src/components/common/PageLoader.tsx b/src/components/common/PageLoader.tsx
new file mode 100644
index 0000000..e8e5740
--- /dev/null
+++ b/src/components/common/PageLoader.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import CircularProgress from '@mui/material/CircularProgress';
+import Box from '@mui/system/Box';
+import { useTheme } from '@mui/material'
+
+interface PageLoaderProps {
+ size?: number
+ thickness?: number
+}
+
+const PageLoader: React.FC = ({
+ size = 40,
+ thickness = 5
+}) => {
+ const theme = useTheme()
+
+ return (
+
+
+
+ )
+}
+
+export default PageLoader;
diff --git a/src/components/common/Portal.tsx b/src/components/common/Portal.tsx
new file mode 100644
index 0000000..1e0cb26
--- /dev/null
+++ b/src/components/common/Portal.tsx
@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+interface PortalProps {
+ children: React.ReactNode
+}
+
+const Portal: React.FC = ({ children }) => {
+ const [mounted, setMounted] = useState(false)
+
+ useEffect(() => {
+ setMounted(true)
+
+ return () => setMounted(false)
+ }, [])
+
+ return mounted
+ ? createPortal(
+ children,
+ document.querySelector('#modal-root') as HTMLElement
+ )
+ : null
+}
+
+export default Portal
diff --git a/src/components/common/TextEditor/DisplayHtml.tsx b/src/components/common/TextEditor/DisplayHtml.tsx
new file mode 100644
index 0000000..f6c1bd1
--- /dev/null
+++ b/src/components/common/TextEditor/DisplayHtml.tsx
@@ -0,0 +1,40 @@
+import { useMemo } from "react";
+import DOMPurify from "dompurify";
+import "react-quill/dist/quill.snow.css";
+import "react-quill/dist/quill.core.css";
+import "react-quill/dist/quill.bubble.css";
+import { convertQortalLinks } from "./utils";
+import { Box, styled } from "@mui/material";
+
+
+const CrowdfundInlineContent = styled(Box)(({ theme }) => ({
+ display: "flex",
+ fontFamily: "Mulish",
+ fontSize: "19px",
+ fontWeight: 400,
+ letterSpacing: 0,
+ color: theme.palette.text.primary,
+ width: '100%'
+ }));
+
+export const DisplayHtml = ({ html }) => {
+ const cleanContent = useMemo(() => {
+ if (!html) return null;
+
+ const sanitize: string = DOMPurify.sanitize(html, {
+ USE_PROFILES: { html: true },
+ });
+ const anchorQortal = convertQortalLinks(sanitize);
+ return anchorQortal;
+ }, [html]);
+
+ if (!cleanContent) return null;
+ return (
+
+
+
+ );
+};
diff --git a/src/components/common/TextEditor/TextEditor.tsx b/src/components/common/TextEditor/TextEditor.tsx
new file mode 100644
index 0000000..805ebbd
--- /dev/null
+++ b/src/components/common/TextEditor/TextEditor.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import ReactQuill, { Quill } from "react-quill";
+import "react-quill/dist/quill.snow.css";
+import ImageResize from "quill-image-resize-module-react";
+
+Quill.register("modules/imageResize", ImageResize);
+
+const modules = {
+ imageResize: {
+ parchment: Quill.import("parchment"),
+ modules: ["Resize", "DisplaySize"],
+ },
+ toolbar: [
+ ["bold", "italic", "underline", "strike"], // styled text
+ ["blockquote", "code-block"], // blocks
+ [{ header: 1 }, { header: 2 }], // custom button values
+ [{ list: "ordered" }, { list: "bullet" }], // lists
+ [{ script: "sub" }, { script: "super" }], // superscript/subscript
+ [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
+ [{ direction: "rtl" }], // text direction
+ [{ size: ["small", false, "large", "huge"] }], // custom dropdown
+ [{ header: [1, 2, 3, 4, 5, 6, false] }], // custom button values
+ [{ color: [] }, { background: [] }], // dropdown with defaults
+ [{ font: [] }], // font family
+ [{ align: [] }], // text align
+ ["clean"], // remove formatting
+ ],
+};
+export const TextEditor = ({ inlineContent, setInlineContent }) => {
+ return (
+
+ );
+};
diff --git a/src/components/common/TextEditor/utils.ts b/src/components/common/TextEditor/utils.ts
new file mode 100644
index 0000000..76ca5fe
--- /dev/null
+++ b/src/components/common/TextEditor/utils.ts
@@ -0,0 +1,26 @@
+export function convertQortalLinks(inputHtml) {
+ // Regular expression to match 'qortal://...' URLs.
+ // This will stop at the first whitespace, comma, or HTML tag
+ var regex = /(qortal:\/\/[^\s,<]+)/g;
+
+ // Replace matches in inputHtml with formatted anchor tag
+ var outputHtml = inputHtml.replace(regex, function (match) {
+ return `${match}`;
+ });
+
+ return outputHtml;
+}
+
+export function extractTextFromHTML(htmlString: any, length = 150) {
+ // Create a temporary DOM element
+ const tempDiv = document.createElement("div");
+ // Replace br tags and block-level tags with a space before setting the HTML content
+ const htmlWithSpaces = htmlString.replace(/<\/?(br|p|div|h[1-6]|ul|ol|li|blockquote)[^>]*>/gi, ' ');
+ tempDiv.innerHTML = htmlWithSpaces;
+ // Extract the text content
+ let text = tempDiv.textContent || tempDiv.innerText || "";
+ // Replace multiple spaces with a single space and trim
+ text = text.replace(/\s+/g, ' ').trim();
+ // Slice the text to the desired length
+ return text.slice(0, length);
+ }
\ No newline at end of file
diff --git a/src/components/common/VideoPlayer.tsx b/src/components/common/VideoPlayer.tsx
new file mode 100644
index 0000000..93feddc
--- /dev/null
+++ b/src/components/common/VideoPlayer.tsx
@@ -0,0 +1,857 @@
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
+import ReactDOM from 'react-dom'
+import { Box, IconButton, Slider } from '@mui/material'
+import { CircularProgress, Typography } from '@mui/material'
+import { Key } from 'ts-key-enum'
+import {
+ PlayArrow,
+ Pause,
+ VolumeUp,
+ Fullscreen,
+ PictureInPicture, VolumeOff
+} from '@mui/icons-material'
+import { styled } from '@mui/system'
+import { MyContext } from '../../wrappers/DownloadWrapper'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import { Refresh } from '@mui/icons-material'
+
+import { Menu, MenuItem } from '@mui/material'
+import { MoreVert as MoreIcon } from '@mui/icons-material'
+import { setVideoPlaying } from '../../state/features/globalSlice'
+const VideoContainer = styled(Box)`
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ margin: 0px;
+ padding: 0px;
+`
+
+const VideoElement = styled('video')`
+ width: 100%;
+ height: auto;
+ max-height: calc(100vh - 150px);
+ background: rgb(33, 33, 33);
+`
+
+const ControlsContainer = styled(Box)`
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 8px;
+ background-color: rgba(0, 0, 0, 0.6);
+`
+
+interface VideoPlayerProps {
+ src?: string
+ poster?: string
+ name?: string
+ identifier?: string
+ service?: string
+ autoplay?: boolean
+ from?: string | null
+ customStyle?: any
+ user?: string
+ jsonId?: string
+}
+
+export const VideoPlayer: React.FC = ({
+ poster,
+ name,
+ identifier,
+ service,
+ autoplay = true,
+ from = null,
+ customStyle = {},
+ user = '',
+ jsonId = ''
+}) => {
+ const dispatch = useDispatch()
+ const videoRef = useRef(null)
+ const [playing, setPlaying] = useState(false)
+ const [volume, setVolume] = useState(1)
+ const [mutedVolume, setMutedVolume] = useState(1)
+ const [isMuted, setIsMuted] = useState(false)
+ const [progress, setProgress] = useState(0)
+ const [isLoading, setIsLoading] = useState(false)
+ const [canPlay, setCanPlay] = useState(false)
+ const [startPlay, setStartPlay] = useState(false)
+ const [isMobileView, setIsMobileView] = useState(false)
+ const [playbackRate, setPlaybackRate] = useState(1)
+ const [anchorEl, setAnchorEl] = useState(null)
+ const videoPlaying = useSelector((state: RootState) => state.global.videoPlaying);
+ const reDownload = useRef(false)
+ const isFetchingProperties = useRef(false)
+
+ const status = useRef(null)
+ const { downloads } = useSelector((state: RootState) => state.global)
+ const download = useMemo(() => {
+ if (!downloads || !identifier) return {}
+ const findDownload = downloads[identifier]
+
+ if (!findDownload) return {}
+ return findDownload
+ }, [downloads, identifier])
+
+ const src = useMemo(() => {
+ return download?.url || ''
+ }, [download?.url])
+ const resourceStatus = useMemo(() => {
+ return download?.status || {}
+ }, [download])
+
+ const minSpeed = 0.25;
+ const maxSpeed = 4.0;
+ const speedChange = 0.25;
+
+ const updatePlaybackRate = (newSpeed: number) => {
+ if (videoRef.current) {
+ if (newSpeed > maxSpeed || newSpeed < minSpeed)
+ newSpeed = minSpeed
+ videoRef.current.playbackRate = newSpeed
+ setPlaybackRate(newSpeed)
+ }
+ }
+
+ const increaseSpeed = (wrapOverflow = true) => {
+ const changedSpeed = playbackRate + speedChange
+ let newSpeed = wrapOverflow ? changedSpeed : Math.min(changedSpeed, maxSpeed)
+
+
+ if (videoRef.current) {
+ updatePlaybackRate(newSpeed);
+ }
+ }
+
+ const decreaseSpeed = () => {
+ if (videoRef.current) {
+ updatePlaybackRate(playbackRate - speedChange);
+ }
+ }
+
+
+
+ const refetch = React.useCallback(async () => {
+ if (!name || !identifier || !service || isFetchingProperties.current) return
+ try {
+ isFetchingProperties.current = true
+ await qortalRequest({
+ action: 'GET_QDN_RESOURCE_PROPERTIES',
+ name,
+ service,
+ identifier
+ })
+
+ } catch (error) {
+
+ } finally {
+ isFetchingProperties.current = false
+ }
+
+ }, [identifier, name, service])
+
+
+ const toggleRef = useRef(null)
+ const { downloadVideo } = useContext(MyContext)
+ const togglePlay = async () => {
+ if (!videoRef.current) return
+ setStartPlay(true)
+ if (!src || resourceStatus?.status !== 'READY') {
+ const el = document.getElementById('videoWrapper')
+ if (el) {
+ el?.parentElement?.removeChild(el)
+ }
+ ReactDOM.flushSync(() => {
+ setIsLoading(true)
+ })
+ getSrc()
+ }
+ if (playing) {
+ videoRef.current.pause()
+ } else {
+ videoRef.current.play()
+ }
+ setPlaying(!playing)
+ }
+
+ const onVolumeChange = (_: any, value: number | number[]) => {
+ if (!videoRef.current) return
+ videoRef.current.volume = value as number
+ setVolume(value as number)
+ setIsMuted(false)
+ }
+
+ const onProgressChange = (_: any, value: number | number[]) => {
+ if (!videoRef.current) return
+ videoRef.current.currentTime = value as number
+ setProgress(value as number)
+ if (!playing) {
+ videoRef.current.play()
+ setPlaying(true)
+ }
+ }
+
+ const handleEnded = () => {
+ setPlaying(false)
+ }
+
+ const updateProgress = () => {
+ if (!videoRef.current) return
+ setProgress(videoRef.current.currentTime)
+ }
+
+ const [isFullscreen, setIsFullscreen] = useState(false)
+
+ const enterFullscreen = () => {
+ if (!videoRef.current) return
+ if (videoRef.current.requestFullscreen) {
+ videoRef.current.requestFullscreen()
+ }
+ }
+
+ const exitFullscreen = () => {
+ if (document.exitFullscreen) {
+ document.exitFullscreen()
+ }
+ }
+
+ const toggleFullscreen = () => {
+ isFullscreen ? exitFullscreen() : enterFullscreen()
+ }
+ const togglePictureInPicture = async () => {
+ if (!videoRef.current) return
+ if (document.pictureInPictureElement === videoRef.current) {
+ await document.exitPictureInPicture()
+ } else {
+ await videoRef.current.requestPictureInPicture()
+ }
+ }
+
+ useEffect(() => {
+ const handleFullscreenChange = () => {
+ setIsFullscreen(!!document.fullscreenElement)
+ }
+
+ document.addEventListener('fullscreenchange', handleFullscreenChange)
+ return () => {
+ document.removeEventListener('fullscreenchange', handleFullscreenChange)
+ }
+ }, [])
+
+ useEffect(()=> {
+ if(videoPlaying && videoPlaying.id === identifier && src && videoRef?.current){
+ handleCanPlay()
+ videoRef.current.volume = videoPlaying.volume
+ videoRef.current.currentTime = videoPlaying.currentTime
+ videoRef.current.play()
+ setPlaying(true)
+ setStartPlay(true)
+ dispatch(setVideoPlaying(null))
+ }
+ }, [videoPlaying, identifier, src])
+
+ const handleCanPlay = () => {
+ setIsLoading(false)
+ setCanPlay(true)
+ }
+
+ const getSrc = React.useCallback(async () => {
+ if (!name || !identifier || !service || !jsonId || !user) return
+ try {
+ downloadVideo({
+ name,
+ service,
+ identifier,
+ properties: {
+ jsonId,
+ user
+ }
+ })
+ } catch (error) {
+ console.error(error)
+ }
+ }, [identifier, name, service, jsonId, user])
+
+ useEffect(() => {
+ const videoElement = videoRef.current
+
+ const handleLeavePictureInPicture = async (event: any) => {
+ const target = event?.target
+ if (target) {
+ target.pause()
+ if (setPlaying) {
+ setPlaying(false)
+ }
+ }
+ }
+
+ if (videoElement) {
+ videoElement.addEventListener(
+ 'leavepictureinpicture',
+ handleLeavePictureInPicture
+ )
+ }
+
+ return () => {
+ if (videoElement) {
+ videoElement.removeEventListener(
+ 'leavepictureinpicture',
+ handleLeavePictureInPicture
+ )
+ }
+ }
+ }, [])
+
+ useEffect(() => {
+ const videoElement = videoRef.current
+
+ const minimizeVideo = async () => {
+ if (!videoElement) return
+
+ dispatch(setVideoPlaying(videoElement))
+ // const handleClose = () => {
+ // if (videoElement && videoElement.parentElement) {
+ // const el = document.getElementById('videoWrapper')
+ // if (el) {
+ // el?.parentElement?.removeChild(el)
+ // }
+ // }
+ // }
+ // const createCloseButton = (): HTMLButtonElement => {
+ // const closeButton = document.createElement('button')
+ // closeButton.textContent = 'X'
+ // closeButton.style.position = 'absolute'
+ // closeButton.style.top = '0'
+ // closeButton.style.right = '0'
+ // closeButton.style.backgroundColor = 'rgba(255, 255, 255, 0.7)'
+ // closeButton.style.border = 'none'
+ // closeButton.style.fontWeight = 'bold'
+ // closeButton.style.fontSize = '1.2rem'
+ // closeButton.style.cursor = 'pointer'
+ // closeButton.style.padding = '2px 8px'
+ // closeButton.style.borderRadius = '0 0 0 4px'
+
+ // closeButton.addEventListener('click', handleClose)
+
+ // return closeButton
+ // }
+ // const buttonClose = createCloseButton()
+ // const videoWrapper = document.createElement('div')
+ // videoWrapper.id = 'videoWrapper'
+ // videoWrapper.style.position = 'fixed'
+ // videoWrapper.style.zIndex = '900000009'
+ // videoWrapper.style.bottom = '0px'
+ // videoWrapper.style.right = '0px'
+
+ // videoElement.parentElement?.insertBefore(videoWrapper, videoElement)
+ // videoWrapper.appendChild(videoElement)
+
+ // videoWrapper.appendChild(buttonClose)
+ // videoElement.controls = true
+ // videoElement.style.height = 'auto'
+ // videoElement.style.width = '300px'
+
+ // document.body.appendChild(videoWrapper)
+ }
+
+ return () => {
+ if (videoElement) {
+ if (videoElement && !videoElement.paused && !videoElement.ended) {
+ minimizeVideo()
+ }
+ }
+ }
+ }, [])
+
+ function formatTime(seconds: number): string {
+ seconds = Math.floor(seconds)
+ let minutes: number | string = Math.floor(seconds / 60)
+ let hours: number | string = Math.floor(minutes / 60)
+
+ let remainingSeconds: number | string = seconds % 60
+ let remainingMinutes: number | string = minutes % 60
+
+ if (remainingSeconds < 10) {
+ remainingSeconds = '0' + remainingSeconds
+ }
+
+ if (remainingMinutes < 10) {
+ remainingMinutes = '0' + remainingMinutes
+ }
+
+ if (hours === 0) {
+ hours = ''
+ }
+ else {
+ hours = hours + ':'
+ }
+
+ return hours + remainingMinutes + ':' + remainingSeconds
+ }
+
+ const reloadVideo = () => {
+ if (!videoRef.current) return
+ const currentTime = videoRef.current.currentTime
+ videoRef.current.src = src
+ videoRef.current.load()
+ videoRef.current.currentTime = currentTime
+ if (playing) {
+ videoRef.current.play()
+ }
+ }
+
+ const refetchInInterval = ()=> {
+ try {
+ const interval = setInterval(()=> {
+ if(status?.current === 'DOWNLOADED'){
+ refetch()
+ }
+ if(status?.current === 'READY'){
+ clearInterval(interval);
+ }
+
+ }, 7500)
+ } catch (error) {
+
+ }
+ }
+
+ useEffect(() => {
+ if(resourceStatus?.status){
+ status.current = resourceStatus?.status
+ }
+ if (
+ resourceStatus?.status === 'DOWNLOADED' &&
+ reDownload?.current === false
+ ) {
+ refetchInInterval()
+ reDownload.current = true
+ }
+ }, [getSrc, resourceStatus])
+
+ const handleMenuOpen = (event: any) => {
+ setAnchorEl(event.currentTarget)
+ }
+
+ const handleMenuClose = () => {
+ setAnchorEl(null)
+ }
+
+ useEffect(() => {
+ const videoWidth = videoRef?.current?.offsetWidth
+ if (videoWidth && videoWidth <= 600) {
+ setIsMobileView(true)
+ }
+ }, [canPlay])
+
+ const getDownloadProgress = (current: number, total: number) => {
+ const progress = current / total * 100;
+ return Number.isNaN(progress) ? '' : progress.toFixed(0) + '%'
+ }
+ const mute = () => {
+ setIsMuted(true)
+ setMutedVolume(volume)
+ setVolume(0)
+ if (videoRef.current) videoRef.current.volume = 0
+ }
+ const unMute = () => {
+ setIsMuted(false)
+ setVolume(mutedVolume)
+ if (videoRef.current) videoRef.current.volume = mutedVolume
+ }
+
+ const toggleMute = () => {
+ isMuted ? unMute() : mute();
+ }
+
+ const changeVolume = (volumeChange: number) => {
+ if (videoRef.current) {
+ const minVolume = 0;
+ const maxVolume = 1;
+
+
+ let newVolume = volumeChange + volume
+
+ newVolume = Math.max(newVolume, minVolume)
+ newVolume = Math.min(newVolume, maxVolume)
+
+ setIsMuted(false)
+ setMutedVolume(newVolume)
+ videoRef.current.volume = newVolume
+ setVolume(newVolume);
+ }
+
+ }
+ const setProgressRelative = (secondsChange: number) => {
+ if (videoRef.current) {
+ const currentTime = videoRef.current?.currentTime
+ const minTime = 0
+ const maxTime = videoRef.current?.duration || 100
+
+ let newTime = currentTime + secondsChange;
+ newTime = Math.max(newTime, minTime)
+ newTime = Math.min(newTime, maxTime)
+ videoRef.current.currentTime = newTime;
+ setProgress(newTime);
+ }
+ }
+
+ const setProgressAbsolute = (videoPercent: number) => {
+ if (videoRef.current) {
+ videoPercent = Math.min(videoPercent, 100)
+ videoPercent = Math.max(videoPercent, 0)
+ const finalTime = videoRef.current?.duration * videoPercent / 100
+ videoRef.current.currentTime = finalTime
+ setProgress(finalTime);
+ }
+ }
+
+
+ const keyboardShortcutsDown = (e: React.KeyboardEvent) => {
+ e.preventDefault()
+
+ switch (e.key) {
+ case Key.Add: increaseSpeed(false); break;
+ case '+': increaseSpeed(false); break;
+ case '>': increaseSpeed(false); break;
+
+ case Key.Subtract: decreaseSpeed(); break;
+ case '-': decreaseSpeed(); break;
+ case '<': decreaseSpeed(); break;
+
+ case Key.ArrowLeft: {
+ if (e.shiftKey) setProgressRelative(-300);
+ else if (e.ctrlKey) setProgressRelative(-60);
+ else if (e.altKey) setProgressRelative(-10);
+ else setProgressRelative(-5);
+ } break;
+
+ case Key.ArrowRight: {
+ if (e.shiftKey) setProgressRelative(300);
+ else if (e.ctrlKey) setProgressRelative(60);
+ else if (e.altKey) setProgressRelative(10);
+ else setProgressRelative(5);
+ } break;
+
+ case Key.ArrowDown: changeVolume(-0.05); break;
+ case Key.ArrowUp: changeVolume(0.05); break;
+ }
+ }
+
+ const keyboardShortcutsUp = (e: React.KeyboardEvent) => {
+ e.preventDefault()
+
+ switch (e.key) {
+ case ' ': togglePlay(); break;
+ case 'm': toggleMute(); break;
+
+ case 'f': enterFullscreen(); break;
+ case Key.Escape: exitFullscreen(); break;
+
+ case '0': setProgressAbsolute(0); break;
+ case '1': setProgressAbsolute(10); break;
+ case '2': setProgressAbsolute(20); break;
+ case '3': setProgressAbsolute(30); break;
+ case '4': setProgressAbsolute(40); break;
+ case '5': setProgressAbsolute(50); break;
+ case '6': setProgressAbsolute(60); break;
+ case '7': setProgressAbsolute(70); break;
+ case '8': setProgressAbsolute(80); break;
+ case '9': setProgressAbsolute(90); break;
+ }
+ }
+
+ return (
+
+
+ {isLoading && (
+
+
+ {resourceStatus && (
+
+ {resourceStatus?.status === 'NOT_PUBLISHED' && (
+ <>Video file was not published. Please inform the publisher!
+ )}
+ {resourceStatus?.status === 'REFETCHING' ? (
+ <>
+ <>
+ {getDownloadProgress(resourceStatus?.localChunkCount, resourceStatus?.totalChunkCount)}
+
+
+ <> Refetching in 25 seconds
+
+ ) : resourceStatus?.status === 'DOWNLOADED' ? (
+ <>Download Completed: building video...
+ ) : resourceStatus?.status !== 'READY' ? (
+ <>
+ {getDownloadProgress(resourceStatus?.localChunkCount, resourceStatus?.totalChunkCount)}
+
+
+ ) : (
+ <>Fetching video...
+ )}
+
+ )}
+
+ )}
+ {((!src && !isLoading) || !startPlay) && (
+ {
+ if (from === 'create') return
+ dispatch(setVideoPlaying(null))
+ togglePlay()
+ }}
+ sx={{
+ cursor: 'pointer'
+ }}
+ >
+
+
+ )}
+
+
+
+
+ {isMobileView && canPlay ? (
+ <>
+
+ {playing ? : }
+
+
+
+
+
+
+
+
+
+
+ ) : canPlay ? (
+ <>
+
+ {playing ? : }
+
+
+
+
+
+
+ {progress && videoRef.current?.duration && formatTime(progress)}/
+ {progress &&
+ videoRef.current?.duration &&
+ formatTime(videoRef.current?.duration)}
+
+
+ {isMuted ? : }
+
+
+ increaseSpeed()}
+ >
+ Speed: {playbackRate}x
+
+
+
+
+
+
+
+
+
+ ) : null}
+
+
+ )
+}
diff --git a/src/components/common/VideoPlayerGlobal.tsx b/src/components/common/VideoPlayerGlobal.tsx
new file mode 100644
index 0000000..da14639
--- /dev/null
+++ b/src/components/common/VideoPlayerGlobal.tsx
@@ -0,0 +1,648 @@
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
+import ReactDOM from 'react-dom'
+import { Box, IconButton, Slider, useTheme } from '@mui/material'
+import { CircularProgress, Typography } from '@mui/material'
+import { Key } from 'ts-key-enum'
+import {
+ PlayArrow,
+ Pause,
+ VolumeUp,
+ Fullscreen,
+ PictureInPicture, VolumeOff
+} from '@mui/icons-material'
+import { styled } from '@mui/system'
+import { MyContext } from '../../wrappers/DownloadWrapper'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import { Refresh } from '@mui/icons-material'
+import CloseIcon from '@mui/icons-material/Close';
+
+import { Menu, MenuItem } from '@mui/material'
+import { MoreVert as MoreIcon } from '@mui/icons-material'
+import { setVideoPlaying } from '../../state/features/globalSlice'
+const VideoContainer = styled(Box)`
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ margin: 0px;
+ padding: 0px;
+`
+
+const VideoElement = styled('video')`
+ width: 100%;
+ height: auto;
+ max-height: calc(100vh - 150px);
+ background: rgb(33, 33, 33);
+`
+
+const ControlsContainer = styled(Box)`
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 8px;
+ background-color: rgba(0, 0, 0, 0.6);
+`
+
+interface VideoPlayerProps {
+ src?: string
+ poster?: string
+ name?: string
+ identifier?: string
+ service?: string
+ autoplay?: boolean
+ from?: string | null
+ customStyle?: any
+ user?: string
+ jsonId?: string
+ element?: null | any
+ checkIfDrag?: ()=> boolean;
+}
+
+export const VideoPlayerGlobal: React.FC = ({
+ poster,
+ name,
+ identifier,
+ service,
+ autoplay = true,
+ from = null,
+ customStyle = {},
+ user = '',
+ jsonId = '',
+ element,
+ checkIfDrag
+}) => {
+ const theme = useTheme()
+
+ const videoRef = useRef(null)
+ const [playing, setPlaying] = useState(false)
+ const [volume, setVolume] = useState(1)
+ const [mutedVolume, setMutedVolume] = useState(1)
+ const [isMuted, setIsMuted] = useState(false)
+ const [progress, setProgress] = useState(0)
+ const [isLoading, setIsLoading] = useState(false)
+ const [canPlay, setCanPlay] = useState(false)
+ const [startPlay, setStartPlay] = useState(false)
+ const [isMobileView, setIsMobileView] = useState(false)
+ const [playbackRate, setPlaybackRate] = useState(1)
+ const [anchorEl, setAnchorEl] = useState(null)
+ const dispatch = useDispatch()
+ const reDownload = useRef(false)
+ const { downloads } = useSelector((state: RootState) => state.global)
+ const download = useMemo(() => {
+ if (!downloads || !identifier) return {}
+ const findDownload = downloads[identifier]
+
+ if (!findDownload) return {}
+ return findDownload
+ }, [downloads, identifier])
+
+
+ const resourceStatus = useMemo(() => {
+ return download?.status || {}
+ }, [download])
+
+ const minSpeed = 0.25;
+ const maxSpeed = 4.0;
+ const speedChange = 0.25;
+
+ const updatePlaybackRate = (newSpeed: number) => {
+ if (videoRef.current) {
+ if (newSpeed > maxSpeed || newSpeed < minSpeed)
+ newSpeed = minSpeed
+ videoRef.current.playbackRate = newSpeed
+ setPlaybackRate(newSpeed)
+ }
+ }
+
+ const increaseSpeed = (wrapOverflow = true) => {
+ const changedSpeed = playbackRate + speedChange
+ let newSpeed = wrapOverflow ? changedSpeed : Math.min(changedSpeed, maxSpeed)
+
+
+ if (videoRef.current) {
+ updatePlaybackRate(newSpeed);
+ }
+ }
+
+ const decreaseSpeed = () => {
+ if (videoRef.current) {
+ updatePlaybackRate(playbackRate - speedChange);
+ }
+ }
+
+
+ const toggleRef = useRef(null)
+ const { downloadVideo } = useContext(MyContext)
+ const togglePlay = async () => {
+
+ if(checkIfDrag && checkIfDrag()) return
+ if (!videoRef.current) return
+ if (playing) {
+ videoRef.current.pause()
+ } else {
+ videoRef.current.play()
+ }
+ setPlaying((prev)=> !prev)
+ }
+
+ const onVolumeChange = (_: any, value: number | number[]) => {
+ if (!videoRef.current) return
+ videoRef.current.volume = value as number
+ setVolume(value as number)
+ setIsMuted(false)
+ }
+
+ const onProgressChange = (_: any, value: number | number[]) => {
+ if (!videoRef.current) return
+ videoRef.current.currentTime = value as number
+ setProgress(value as number)
+ if (!playing) {
+ videoRef.current.play()
+ setPlaying(true)
+ }
+ }
+
+ const handleEnded = () => {
+ setPlaying(false)
+ }
+
+ const updateProgress = () => {
+ if (!videoRef.current) return
+ setProgress(videoRef.current.currentTime)
+ }
+
+ const [isFullscreen, setIsFullscreen] = useState(false)
+
+ const enterFullscreen = () => {
+ if (!videoRef.current) return
+ if (videoRef.current.requestFullscreen) {
+ videoRef.current.requestFullscreen()
+ }
+ }
+
+ const exitFullscreen = () => {
+ if (document.exitFullscreen) {
+ document.exitFullscreen()
+ }
+ }
+
+ const toggleFullscreen = () => {
+ isFullscreen ? exitFullscreen() : enterFullscreen()
+ }
+ const togglePictureInPicture = async () => {
+ if (!videoRef.current) return
+ if (document.pictureInPictureElement === videoRef.current) {
+ await document.exitPictureInPicture()
+ } else {
+ await videoRef.current.requestPictureInPicture()
+ }
+ }
+
+ useEffect(() => {
+ const handleFullscreenChange = () => {
+ setIsFullscreen(!!document.fullscreenElement)
+ }
+
+ document.addEventListener('fullscreenchange', handleFullscreenChange)
+ return () => {
+ document.removeEventListener('fullscreenchange', handleFullscreenChange)
+ }
+ }, [])
+
+
+ const handleCanPlay = () => {
+ setIsLoading(false)
+ setCanPlay(true)
+ }
+
+
+
+ useEffect(() => {
+ const videoElement = videoRef.current
+
+ const handleLeavePictureInPicture = async (event: any) => {
+ const target = event?.target
+ if (target) {
+ target.pause()
+ if (setPlaying) {
+ setPlaying(false)
+ }
+ }
+ }
+
+ if (videoElement) {
+ videoElement.addEventListener(
+ 'leavepictureinpicture',
+ handleLeavePictureInPicture
+ )
+ }
+
+ return () => {
+ if (videoElement) {
+ videoElement.removeEventListener(
+ 'leavepictureinpicture',
+ handleLeavePictureInPicture
+ )
+ }
+ }
+ }, [])
+
+
+
+ function formatTime(seconds: number): string {
+ seconds = Math.floor(seconds)
+ let minutes: number | string = Math.floor(seconds / 60)
+ let hours: number | string = Math.floor(minutes / 60)
+
+ let remainingSeconds: number | string = seconds % 60
+ let remainingMinutes: number | string = minutes % 60
+
+ if (remainingSeconds < 10) {
+ remainingSeconds = '0' + remainingSeconds
+ }
+
+ if (remainingMinutes < 10) {
+ remainingMinutes = '0' + remainingMinutes
+ }
+
+ if (hours === 0) {
+ hours = ''
+ }
+ else {
+ hours = hours + ':'
+ }
+
+ return hours + remainingMinutes + ':' + remainingSeconds
+ }
+
+ const reloadVideo = () => {
+ if (!videoRef.current) return
+ const src = videoRef.current.src
+ const currentTime = videoRef.current.currentTime
+ videoRef.current.src = src
+ videoRef.current.load()
+ videoRef.current.currentTime = currentTime
+ if (playing) {
+ videoRef.current.play()
+ }
+ }
+
+
+ const handleMenuOpen = (event: any) => {
+ setAnchorEl(event.currentTarget)
+ }
+
+
+ const handleMenuClose = () => {
+ setAnchorEl(null)
+ }
+
+ useEffect(() => {
+ const videoWidth = videoRef?.current?.offsetWidth
+ if (videoWidth && videoWidth <= 600) {
+ setIsMobileView(true)
+ }
+ }, [canPlay])
+
+ const getDownloadProgress = (current: number, total: number) => {
+ const progress = current / total * 100;
+ return Number.isNaN(progress) ? '' : progress.toFixed(0) + '%'
+ }
+ const mute = () => {
+ setIsMuted(true)
+ setMutedVolume(volume)
+ setVolume(0)
+ if (videoRef.current) videoRef.current.volume = 0
+ }
+ const unMute = () => {
+ setIsMuted(false)
+ setVolume(mutedVolume)
+ if (videoRef.current) videoRef.current.volume = mutedVolume
+ }
+
+ const toggleMute = () => {
+ isMuted ? unMute() : mute();
+ }
+
+ const changeVolume = (volumeChange: number) => {
+ if (videoRef.current) {
+ const minVolume = 0;
+ const maxVolume = 1;
+
+
+ let newVolume = volumeChange + volume
+
+ newVolume = Math.max(newVolume, minVolume)
+ newVolume = Math.min(newVolume, maxVolume)
+
+ setIsMuted(false)
+ setMutedVolume(newVolume)
+ videoRef.current.volume = newVolume
+ setVolume(newVolume);
+ }
+
+ }
+ const setProgressRelative = (secondsChange: number) => {
+ if (videoRef.current) {
+ const currentTime = videoRef.current?.currentTime
+ const minTime = 0
+ const maxTime = videoRef.current?.duration || 100
+
+ let newTime = currentTime + secondsChange;
+ newTime = Math.max(newTime, minTime)
+ newTime = Math.min(newTime, maxTime)
+ videoRef.current.currentTime = newTime;
+ setProgress(newTime);
+ }
+ }
+
+ const setProgressAbsolute = (videoPercent: number) => {
+ if (videoRef.current) {
+ videoPercent = Math.min(videoPercent, 100)
+ videoPercent = Math.max(videoPercent, 0)
+ const finalTime = videoRef.current?.duration * videoPercent / 100
+ videoRef.current.currentTime = finalTime
+ setProgress(finalTime);
+ }
+ }
+
+
+ const keyboardShortcutsDown = (e: React.KeyboardEvent) => {
+ e.preventDefault()
+
+ switch (e.key) {
+ case Key.Add: increaseSpeed(false); break;
+ case '+': increaseSpeed(false); break;
+ case '>': increaseSpeed(false); break;
+
+ case Key.Subtract: decreaseSpeed(); break;
+ case '-': decreaseSpeed(); break;
+ case '<': decreaseSpeed(); break;
+
+ case Key.ArrowLeft: {
+ if (e.shiftKey) setProgressRelative(-300);
+ else if (e.ctrlKey) setProgressRelative(-60);
+ else if (e.altKey) setProgressRelative(-10);
+ else setProgressRelative(-5);
+ } break;
+
+ case Key.ArrowRight: {
+ if (e.shiftKey) setProgressRelative(300);
+ else if (e.ctrlKey) setProgressRelative(60);
+ else if (e.altKey) setProgressRelative(10);
+ else setProgressRelative(5);
+ } break;
+
+ case Key.ArrowDown: changeVolume(-0.05); break;
+ case Key.ArrowUp: changeVolume(0.05); break;
+ }
+ }
+
+ const keyboardShortcutsUp = (e: React.KeyboardEvent) => {
+ e.preventDefault()
+
+ switch (e.key) {
+ case ' ': togglePlay(); break;
+ case 'm': toggleMute(); break;
+
+ case 'f': enterFullscreen(); break;
+ case Key.Escape: exitFullscreen(); break;
+
+ case '0': setProgressAbsolute(0); break;
+ case '1': setProgressAbsolute(10); break;
+ case '2': setProgressAbsolute(20); break;
+ case '3': setProgressAbsolute(30); break;
+ case '4': setProgressAbsolute(40); break;
+ case '5': setProgressAbsolute(50); break;
+ case '6': setProgressAbsolute(60); break;
+ case '7': setProgressAbsolute(70); break;
+ case '8': setProgressAbsolute(80); break;
+ case '9': setProgressAbsolute(90); break;
+ }
+ }
+
+ useEffect(()=> {
+ if(element){
+ let oldElement = document.getElementById('videoPlayer');
+ if(oldElement && oldElement?.parentNode){
+ oldElement?.parentNode.replaceChild(element, oldElement);
+ videoRef.current = element
+ setPlaying(true)
+ setCanPlay(true)
+ setStartPlay(true)
+ videoRef?.current?.addEventListener('click', ()=> {})
+ videoRef?.current?.addEventListener('timeupdate', updateProgress)
+ videoRef?.current?.addEventListener('ended', handleEnded)
+
+ }
+
+ }
+}, [element])
+
+ return (
+
+
+
+ {
+ dispatch(setVideoPlaying(null))
+ }} sx={{
+ cursor: 'pointer',
+ backgroundColor: 'rgba(0,0,0,.5)'
+ }}>
+
+
+
+
+
+ {isMobileView && canPlay ? (
+ <>
+
+ {playing ? : }
+
+
+
+
+
+
+
+
+
+
+ ) : canPlay ? (
+ <>
+
+ {playing ? : }
+
+
+
+
+
+
+ {progress && videoRef.current?.duration && formatTime(progress)}/
+ {progress &&
+ videoRef.current?.duration &&
+ formatTime(videoRef.current?.duration)}
+
+
+ {isMuted ? : }
+
+
+ increaseSpeed()}
+ >
+ Speed: {playbackRate}x
+
+
+
+
+
+
+
+
+
+ ) : null}
+
+
+ )
+}
diff --git a/src/components/layout/Navbar/Navbar-styles.tsx b/src/components/layout/Navbar/Navbar-styles.tsx
new file mode 100644
index 0000000..4c3fed0
--- /dev/null
+++ b/src/components/layout/Navbar/Navbar-styles.tsx
@@ -0,0 +1,121 @@
+import { AppBar, Button, Typography, Box } from "@mui/material";
+import { styled } from "@mui/system";
+import { LightModeSVG } from "../../../assets/svgs/LightModeSVG";
+import { DarkModeSVG } from "../../../assets/svgs/DarkModeSVG";
+
+export const CustomAppBar = styled(AppBar)(({ theme }) => ({
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "space-between",
+ alignItems: "center",
+ width: "100%",
+ padding: "5px 16px",
+ backgroundImage: "none",
+ borderBottom: `1px solid ${theme.palette.primary.light}`,
+ backgroundColor: theme.palette.background.default,
+ [theme.breakpoints.only("xs")]: {
+ gap: "15px",
+ },
+ height: "100px",
+}));
+export const LogoContainer = styled("div")({
+ cursor: "pointer",
+ height: "100%",
+ display: "flex",
+ alignItems: "center",
+});
+
+export const CustomTitle = styled(Typography)({
+ fontWeight: 600,
+ color: "#000000",
+});
+
+export const AuthenticateButton = styled(Button)(({ theme }) => ({
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ padding: "8px 15px",
+ borderRadius: "40px",
+ gap: "4px",
+ backgroundColor: theme.palette.secondary.main,
+ color: "#fff",
+ fontFamily: "Raleway",
+ transition: "all 0.3s ease-in-out",
+ boxShadow: "none",
+ "&:hover": {
+ cursor: "pointer",
+ boxShadow: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;",
+ backgroundColor: theme.palette.secondary.dark,
+ filter: "brightness(1.1)",
+ },
+}));
+
+export const AvatarContainer = styled(Box)({
+ display: "flex",
+ alignItems: "center",
+ "&:hover": {
+ cursor: "pointer",
+ "& #expand-icon": {
+ transition: "all 0.3s ease-in-out",
+ filter: "brightness(0.7)",
+ },
+ },
+});
+
+export const DropdownContainer = styled(Box)(({ theme }) => ({
+ display: "flex",
+ alignItems: "center",
+ gap: "5px",
+ backgroundColor: theme.palette.background.paper,
+ padding: "10px 15px",
+ transition: "all 0.4s ease-in-out",
+ "&:hover": {
+ cursor: "pointer",
+ filter:
+ theme.palette.mode === "light" ? "brightness(0.95)" : "brightness(1.1)",
+ },
+}));
+
+export const DropdownText = styled(Typography)(({ theme }) => ({
+ fontFamily: "Raleway",
+ fontSize: "16px",
+ color: theme.palette.text.primary,
+ userSelect: "none",
+}));
+
+export const NavbarName = styled(Typography)(({ theme }) => ({
+ fontFamily: "Raleway",
+ fontSize: "18px",
+ color: theme.palette.text.primary,
+ margin: "0 10px",
+}));
+
+export const ThemeSelectRow = styled(Box)({
+ display: "flex",
+ alignItems: "center",
+ gap: "5px",
+ flexBasis: 0,
+ height: "100%",
+});
+
+export const LightModeIcon = styled(LightModeSVG)(({ theme }) => ({
+ transition: "all 0.1s ease-in-out",
+ "&:hover": {
+ cursor: "pointer",
+ filter:
+ theme.palette.mode === "dark"
+ ? "drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))"
+ : "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))",
+ },
+}));
+
+export const DarkModeIcon = styled(DarkModeSVG)(({ theme }) => ({
+ transition: "all 0.1s ease-in-out",
+ "&:hover": {
+ cursor: "pointer",
+ filter:
+ theme.palette.mode === "dark"
+ ? "drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))"
+ : "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))",
+ },
+}));
diff --git a/src/components/layout/Navbar/Navbar.tsx b/src/components/layout/Navbar/Navbar.tsx
new file mode 100644
index 0000000..f184c92
--- /dev/null
+++ b/src/components/layout/Navbar/Navbar.tsx
@@ -0,0 +1,312 @@
+import React, { useRef, useState } from "react";
+import { Box, Input, Popover, Typography, useTheme } from "@mui/material";
+import { BlockedNamesModal } from "../../common/BlockedNamesModal/BlockedNamesModal";
+
+import {
+ AvatarContainer,
+ CustomAppBar,
+ DropdownContainer,
+ DropdownText,
+ LogoContainer,
+ NavbarName,
+ ThemeSelectRow,
+} from "./Navbar-styles";
+import { AccountCircleSVG } from "../../../assets/svgs/AccountCircleSVG";
+import BackspaceIcon from "@mui/icons-material/Backspace";
+
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import PersonOffIcon from "@mui/icons-material/PersonOff";
+import { useNavigate } from "react-router-dom";
+import SearchIcon from "@mui/icons-material/Search";
+
+import { DownloadTaskManager } from "../../common/DownloadTaskManager";
+import QSupportLogo from "../../../assets/img/Q-SupportIcon.webp";
+import { useDispatch, useSelector } from "react-redux";
+import {
+ addFilteredFiles,
+ setFilterValue,
+ setIsFiltering,
+} from "../../../state/features/fileSlice.ts";
+import { RootState } from "../../../state/store";
+import { useWindowSize } from "../../../hooks/useWindowSize";
+import { PublishIssue } from "../../PublishIssue/PublishIssue.tsx";
+
+interface Props {
+ isAuthenticated: boolean;
+ userName: string | null;
+ userAvatar: string;
+ authenticate: () => void;
+ setTheme: (val: string) => void;
+}
+
+const NavBar: React.FC = ({
+ isAuthenticated,
+ userName,
+ userAvatar,
+ authenticate,
+ setTheme,
+}) => {
+ const windowSize = useWindowSize();
+ const searchValRef = useRef("");
+ const inputRef = useRef(null);
+ const theme = useTheme();
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const [anchorEl, setAnchorEl] = React.useState(
+ null
+ );
+ const [openUserDropdown, setOpenUserDropdown] = useState(false);
+ const [isOpenBlockedNamesModal, setIsOpenBlockedNamesModal] =
+ useState(false);
+
+ const [anchorElNotification, setAnchorElNotification] =
+ React.useState(null);
+ const filterValue = useSelector((state: RootState) => state.file.filterValue);
+
+ const handleClick = (event: React.MouseEvent) => {
+ const target = event.currentTarget as unknown as HTMLButtonElement | null;
+ setAnchorEl(target);
+ };
+ const openNotificationPopover = (event: any) => {
+ const target = event.currentTarget as unknown as HTMLButtonElement | null;
+ setAnchorElNotification(target);
+ };
+ const closeNotificationPopover = () => {
+ setAnchorElNotification(null);
+ };
+
+ const openPopover = Boolean(anchorElNotification);
+ const idNotification = openPopover
+ ? "simple-popover-notification"
+ : undefined;
+
+ const handleCloseUserDropdown = () => {
+ setAnchorEl(null);
+ setOpenUserDropdown(false);
+ };
+
+ const onCloseBlockedNames = () => {
+ setIsOpenBlockedNamesModal(false);
+ };
+
+ return (
+
+
+
+ {
+ navigate("/");
+ dispatch(setIsFiltering(false));
+ dispatch(setFilterValue(""));
+ dispatch(addFilteredFiles([]));
+ searchValRef.current = "";
+ if (!inputRef.current) return;
+ inputRef.current.value = "";
+ }}
+ >
+ 
+
+
+ Welcome to Q-Support
+
+
+
+
+
+
+ {
+ searchValRef.current = e.target.value;
+ }}
+ onKeyDown={event => {
+ if (event.key === "Enter" || event.keyCode === 13) {
+ if (!searchValRef.current) {
+ dispatch(setIsFiltering(false));
+ dispatch(setFilterValue(""));
+ dispatch(addFilteredFiles([]));
+ searchValRef.current = "";
+ if (!inputRef.current) return;
+ inputRef.current.value = "";
+ return;
+ }
+ navigate("/");
+ dispatch(setIsFiltering(true));
+ dispatch(addFilteredFiles([]));
+ dispatch(setFilterValue(searchValRef.current));
+ }
+ }}
+ placeholder="Search"
+ sx={{
+ "&&:before": {
+ borderBottom: "none",
+ },
+ "&&:after": {
+ borderBottom: "none",
+ },
+ "&&:hover:before": {
+ borderBottom: "none",
+ },
+ "&&.Mui-focused:before": {
+ borderBottom: "none",
+ },
+ "&&.Mui-focused": {
+ outline: "none",
+ },
+ fontSize: "18px",
+ }}
+ />
+
+ {
+ if (!searchValRef.current) {
+ dispatch(setIsFiltering(false));
+ dispatch(setFilterValue(""));
+ dispatch(addFilteredFiles([]));
+ searchValRef.current = "";
+ if (!inputRef.current) return;
+ inputRef.current.value = "";
+ return;
+ }
+ navigate("/");
+ dispatch(setIsFiltering(true));
+ dispatch(addFilteredFiles([]));
+ dispatch(setFilterValue(searchValRef.current));
+ }}
+ />
+ {
+ dispatch(setIsFiltering(false));
+ dispatch(setFilterValue(""));
+ dispatch(addFilteredFiles([]));
+ searchValRef.current = "";
+ if (!inputRef.current) return;
+ inputRef.current.value = "";
+ }}
+ />
+
+
+
+
+ {isAuthenticated && userName && (
+ <>
+ {
+ handleClick(e);
+ setOpenUserDropdown(true);
+ }}
+ >
+ {userName}
+ {!userAvatar ? (
+
+ ) : (
+ 
+ )}
+
+
+
+ )}
+
+ {isAuthenticated && userName && (
+ <>
+
+
+ )}
+
+
+
+ {
+ setIsOpenBlockedNamesModal(true);
+ handleCloseUserDropdown();
+ }}
+ >
+
+ Blocked Names
+
+
+ {isOpenBlockedNamesModal && (
+
+ )}
+
+
+ );
+};
+
+export default NavBar;
diff --git a/src/constants/Categories/1stCategories.ts b/src/constants/Categories/1stCategories.ts
new file mode 100644
index 0000000..a074e55
--- /dev/null
+++ b/src/constants/Categories/1stCategories.ts
@@ -0,0 +1,48 @@
+import audioIcon from "../../assets/icons/audio.webp";
+import bookIcon from "../../assets/icons/book.webp";
+import documentIcon from "../../assets/icons/document.webp";
+import gamingIcon from "../../assets/icons/gaming.webp";
+import imageIcon from "../../assets/icons/image.webp";
+import softwareIcon from "../../assets/icons/software.webp";
+import unknownIcon from "../../assets/icons/unknown.webp";
+import videoIcon from "../../assets/icons/video.webp";
+
+import {
+ Categories,
+ Category,
+ CategoryData,
+} from "../../components/common/CategoryList/CategoryList.tsx";
+import {
+ getAllCategoriesWithIcons,
+ sortCategory,
+} from "./CategoryFunctions.ts";
+import { QappCategories, SupportState } from "./2ndCategories.ts";
+
+export const firstCategories: Category[] = [
+ { id: 1, name: "Core" },
+ { id: 2, name: "UI" },
+ { id: 3, name: "Q-Apps" },
+ { id: 4, name: "Website" },
+ { id: 5, name: "Marketing" },
+ { id: 99, name: "Other" },
+];
+export const secondCategories: Categories = {
+ 1: SupportState,
+ 2: SupportState,
+ 3: QappCategories,
+ 4: SupportState,
+ 5: SupportState,
+ 99: SupportState,
+};
+
+export let thirdCategories: Categories = {};
+QappCategories.map(
+ supportStateCategory =>
+ (thirdCategories[supportStateCategory.id] = SupportState)
+);
+export const allCategoryData: CategoryData = {
+ category: firstCategories,
+ subCategories: [secondCategories, thirdCategories],
+};
+
+export const iconCategories = getAllCategoriesWithIcons();
diff --git a/src/constants/Categories/2ndCategories.ts b/src/constants/Categories/2ndCategories.ts
new file mode 100644
index 0000000..ead50e9
--- /dev/null
+++ b/src/constants/Categories/2ndCategories.ts
@@ -0,0 +1,23 @@
+import OpenIcon from "../../assets/icons/OpenIcon.png";
+import ClosedIcon from "../../assets/icons/ClosedIcon.png";
+import InProgressIcon from "../../assets/icons/InProgressIcon.png";
+import CompleteIcon from "../../assets/icons/CompleteIcon.png";
+
+export const SupportState = [
+ { id: 101, name: "Open", icon: OpenIcon },
+ { id: 102, name: "Closed", icon: ClosedIcon },
+ { id: 103, name: "In Progress", icon: InProgressIcon },
+ { id: 104, name: "Complete", icon: CompleteIcon },
+];
+
+export const QappCategories = [
+ { id: 301, name: "Q-Blog" },
+ { id: 302, name: "Q-Mail" },
+ { id: 303, name: "Q-Shop" },
+ { id: 304, name: "Q-Fund" },
+ { id: 305, name: "Ear-Bump" },
+ { id: 306, name: "Q-Tube" },
+ { id: 307, name: "Q-Share" },
+ { id: 308, name: "Q-Support" },
+ { id: 399, name: "Other" },
+];
diff --git a/src/constants/Categories/3rdCategories.ts b/src/constants/Categories/3rdCategories.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/constants/Categories/CategoryFunctions.ts b/src/constants/Categories/CategoryFunctions.ts
new file mode 100644
index 0000000..3c228b7
--- /dev/null
+++ b/src/constants/Categories/CategoryFunctions.ts
@@ -0,0 +1,91 @@
+import {
+ Category,
+ getCategoriesFromObject,
+} from "../../components/common/CategoryList/CategoryList.tsx";
+import { allCategoryData, iconCategories } from "./1stCategories.ts";
+
+export const sortCategory = (a: Category, b: Category) => {
+ if (a.name === "Other") return 1;
+ else if (b.name === "Other") return -1;
+ else return a.name.localeCompare(b.name);
+};
+type Direction = "forward" | "backward";
+const findCategory = (categoryID: number) => {
+ return allCategoryData.category.find(category => {
+ return category.id === categoryID;
+ });
+};
+const findSubCategory = (
+ categoryID: number,
+ direction: Direction = "forward"
+) => {
+ const subCategoriesList = allCategoryData.subCategories;
+ if (direction === "backward") subCategoriesList.reverse();
+
+ for (const subCategories of subCategoriesList) {
+ for (const subCategoryID in subCategories) {
+ const returnValue = subCategories[subCategoryID].find(categoryObj => {
+ return categoryObj.id === categoryID;
+ });
+ if (returnValue) return returnValue;
+ }
+ }
+};
+export const findCategoryData = (
+ categoryID: number,
+ direction: Direction = "forward"
+) => {
+ return direction === "forward"
+ ? findCategory(categoryID) || findSubCategory(categoryID, "forward")
+ : findSubCategory(categoryID, "backward") || findCategory(categoryID);
+};
+export const findAllCategoryData = (
+ categories: string[],
+ direction: Direction = "forward"
+) => {
+ let foundIcons: Category[] = [];
+ if (direction === "backward") categories.reverse();
+
+ categories.map(category => {
+ if (category) {
+ const icon = findCategoryData(+category, "backward");
+ if (icon) foundIcons.push(icon);
+ }
+ });
+ return foundIcons;
+};
+
+export const getCategoriesWithIcons = (categories: Category[]) => {
+ return categories.filter(category => {
+ return category.icon;
+ });
+};
+
+export const getAllCategoriesWithIcons = () => {
+ const categoriesWithIcons: Category[] = [];
+
+ allCategoryData.category.map(category => {
+ if (category.icon) categoriesWithIcons.push(category);
+ });
+ const subCategoriesList = allCategoryData.subCategories;
+
+ for (const subCategories of subCategoriesList) {
+ for (const subCategoryID in subCategories) {
+ const categoryWithIcon = subCategories[subCategoryID].map(categoryObj => {
+ if (categoryObj.icon) categoriesWithIcons.push(categoryObj);
+ });
+ }
+ }
+ return categoriesWithIcons;
+};
+
+export const getIconsFromObject = (fileObj: any) => {
+ const categories = getCategoriesFromObject(fileObj);
+ const icons = categories
+ .map(categoryID => {
+ return iconCategories.find(category => category.id === +categoryID)?.icon;
+ })
+ .reverse();
+
+ return icons.find(icon => icon !== undefined);
+};
diff --git a/src/constants/Identifiers.ts b/src/constants/Identifiers.ts
new file mode 100644
index 0000000..446f2b3
--- /dev/null
+++ b/src/constants/Identifiers.ts
@@ -0,0 +1,13 @@
+const useTestIdentifiers = false;
+
+export const QSUPPORT_FILE_BASE = useTestIdentifiers
+ ? "MYTEST_support_issue_"
+ : "q_support_issue_";
+
+export const QSUPPORT_PLAYLIST_BASE = useTestIdentifiers
+ ? "MYTEST_support_playlist_"
+ : "q_support_playlist_";
+
+export const QSUPPORT_COMMENT_BASE = useTestIdentifiers
+ ? "qcomment_v1_MYTEST_support_"
+ : "qcomment_v1_q_support_";
diff --git a/src/constants/Misc.ts b/src/constants/Misc.ts
new file mode 100644
index 0000000..7de896c
--- /dev/null
+++ b/src/constants/Misc.ts
@@ -0,0 +1,5 @@
+export const minPriceSuperlike = 10;
+export const titleFormatter = /[^a-zA-Z0-9\s-_!?()&'",.;:|—~@#$%^*+=<>]/g;
+export const titleFormatterOnSave = /[^a-zA-Z0-9\s-_!()&',.;—~@#$%^+=]/g;
+
+export const log = false;
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 0000000..27c12a2
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,62 @@
+// src/global.d.ts
+interface QortalRequestOptions {
+ action: string
+ name?: string
+ service?: string
+ data64?: string
+ title?: string
+ description?: string
+ category?: string
+ tags?: string[]
+ identifier?: string
+ address?: string
+ metaData?: string
+ encoding?: string
+ includeMetadata?: boolean
+ limit?: numebr
+ offset?: number
+ reverse?: boolean
+ resources?: any[]
+ filename?: string
+ list_name?: string
+ item?: string
+ items?: strings[]
+ tag1?: string
+ tag2?: string
+ tag3?: string
+ tag4?: string
+ tag5?: string
+ coin?: string
+ destinationAddress?: string
+ amount?: number
+ blob?: Blob
+ mimeType?: string
+ file?: File
+ encryptedData?: string
+ name?: string
+ mode?: string
+ query?: string
+ excludeBlocked?: boolean
+ exactMatchNames?: boolean
+}
+
+declare function qortalRequest(options: QortalRequestOptions): Promise
+declare function qortalRequestWithTimeout(
+ options: QortalRequestOptions,
+ time: number
+): Promise
+
+declare global {
+ interface Window {
+ _qdnBase: any // Replace 'any' with the appropriate type if you know it
+ _qdnTheme: string
+ }
+}
+
+declare global {
+ interface Window {
+ showSaveFilePicker: (
+ options?: SaveFilePickerOptions
+ ) => Promise
+ }
+}
diff --git a/src/hooks/useFetchFiles.tsx b/src/hooks/useFetchFiles.tsx
new file mode 100644
index 0000000..d9d8dd9
--- /dev/null
+++ b/src/hooks/useFetchFiles.tsx
@@ -0,0 +1,421 @@
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import {
+ addFiles,
+ addToHashMap,
+ setCountNewFiles,
+ upsertFiles,
+ upsertFilesBeginning,
+ Video,
+ upsertFilteredFiles,
+} from "../state/features/fileSlice.ts";
+import {
+ setIsLoadingGlobal,
+ setUserAvatarHash,
+ setTotalFilesPublished,
+ setTotalNamesPublished,
+ setFilesPerNamePublished,
+} from "../state/features/globalSlice";
+import { RootState } from "../state/store";
+import { fetchAndEvaluateVideos } from "../utils/fetchVideos";
+import {
+ QSUPPORT_PLAYLIST_BASE,
+ QSUPPORT_FILE_BASE,
+} from "../constants/Identifiers.ts";
+import { RequestQueue } from "../utils/queue";
+import { queue } from "../wrappers/GlobalWrapper";
+import { getCategoriesFetchString } from "../components/common/CategoryList/CategoryList.tsx";
+
+export const useFetchFiles = () => {
+ const dispatch = useDispatch();
+ const hashMapFiles = useSelector(
+ (state: RootState) => state.file.hashMapFiles
+ );
+ const videos = useSelector((state: RootState) => state.file.files);
+ const userAvatarHash = useSelector(
+ (state: RootState) => state.global.userAvatarHash
+ );
+ const filteredVideos = useSelector(
+ (state: RootState) => state.file.filteredFiles
+ );
+
+ const totalFilesPublished = useSelector(
+ (state: RootState) => state.global.totalFilesPublished
+ );
+ const totalNamesPublished = useSelector(
+ (state: RootState) => state.global.totalNamesPublished
+ );
+ const filesPerNamePublished = useSelector(
+ (state: RootState) => state.global.filesPerNamePublished
+ );
+
+ const checkAndUpdateFile = React.useCallback(
+ (video: Video) => {
+ const existingVideo = hashMapFiles[video.id];
+ if (!existingVideo) {
+ return true;
+ } else if (
+ video?.updated &&
+ existingVideo?.updated &&
+ (!existingVideo?.updated || video?.updated) > existingVideo?.updated
+ ) {
+ return true;
+ } else {
+ return false;
+ }
+ },
+ [hashMapFiles]
+ );
+
+ const getAvatar = React.useCallback(async (author: string) => {
+ try {
+ let url = await qortalRequest({
+ action: "GET_QDN_RESOURCE_URL",
+ name: author,
+ service: "THUMBNAIL",
+ identifier: "qortal_avatar",
+ });
+
+ dispatch(
+ setUserAvatarHash({
+ name: author,
+ url,
+ })
+ );
+ } catch (error) {}
+ }, []);
+
+ const getFile = async (
+ user: string,
+ videoId: string,
+ content: any,
+ retries: number = 0
+ ) => {
+ try {
+ const res = await fetchAndEvaluateVideos({
+ user,
+ videoId,
+ content,
+ });
+
+ dispatch(addToHashMap(res));
+ } catch (error) {
+ retries = retries + 1;
+ if (retries < 2) {
+ // 3 is the maximum number of retries here, you can adjust it to your needs
+ queue.push(() => getFile(user, videoId, content, retries + 1));
+ } else {
+ console.error("Failed to get video after 3 attempts", error);
+ }
+ }
+ };
+
+ const getNewFiles = React.useCallback(async () => {
+ try {
+ dispatch(setIsLoadingGlobal(true));
+
+ const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QSUPPORT_FILE_BASE}&limit=20&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true`;
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ const responseData = await response.json();
+
+ // const responseData = await qortalRequest({
+ // action: "SEARCH_QDN_RESOURCES",
+ // mode: "ALL",
+ // service: "DOCUMENT",
+ // query: "${QTUBE_VIDEO_BASE}",
+ // limit: 20,
+ // includeMetadata: true,
+ // reverse: true,
+ // excludeBlocked: true,
+ // exactMatchNames: true,
+ // name: names
+ // })
+ const latestVideo = videos[0];
+ if (!latestVideo) return;
+ const findVideo = responseData?.findIndex(
+ (item: any) => item?.identifier === latestVideo?.id
+ );
+ let fetchAll = responseData;
+ let willFetchAll = true;
+ if (findVideo !== -1) {
+ willFetchAll = false;
+ fetchAll = responseData.slice(0, findVideo);
+ }
+
+ const structureData = fetchAll.map((video: any): Video => {
+ return {
+ title: video?.metadata?.title,
+ category: video?.metadata?.category,
+ categoryName: video?.metadata?.categoryName,
+ tags: video?.metadata?.tags || [],
+ description: video?.metadata?.description,
+ created: video?.created,
+ updated: video?.updated,
+ user: video.name,
+ videoImage: "",
+ id: video.identifier,
+ };
+ });
+ if (!willFetchAll) {
+ dispatch(upsertFilesBeginning(structureData));
+ }
+ if (willFetchAll) {
+ dispatch(addFiles(structureData));
+ }
+ setTimeout(() => {
+ dispatch(setCountNewFiles(0));
+ }, 1000);
+ for (const content of structureData) {
+ if (content.user && content.id) {
+ const res = checkAndUpdateFile(content);
+ if (res) {
+ queue.push(() => getFile(content.user, content.id, content));
+ }
+ }
+ }
+ } catch (error) {
+ } finally {
+ dispatch(setIsLoadingGlobal(false));
+ }
+ }, [videos, hashMapFiles]);
+
+ const getFiles = React.useCallback(
+ async (
+ filters = {},
+ reset?: boolean,
+ resetFilers?: boolean,
+ limit?: number
+ ) => {
+ try {
+ const {
+ name = "",
+ categories = [],
+ keywords = "",
+ type = "",
+ }: any = resetFilers ? {} : filters;
+ let offset = videos.length;
+ if (reset) {
+ offset = 0;
+ }
+ const videoLimit = limit || 50;
+ let defaultUrl = `/arbitrary/resources/search?mode=ALL&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true&offset=${offset}&limit=${videoLimit}`;
+
+ if (name) {
+ defaultUrl += `&name=${name}`;
+ }
+
+ if (categories.length > 0) {
+ defaultUrl += "&description=" + getCategoriesFetchString(categories);
+ }
+
+ if (keywords) {
+ defaultUrl = defaultUrl + `&query=${keywords}`;
+ }
+ if (type === "playlists") {
+ defaultUrl = defaultUrl + `&service=PLAYLIST`;
+ defaultUrl = defaultUrl + `&identifier=${QSUPPORT_PLAYLIST_BASE}`;
+ } else {
+ defaultUrl = defaultUrl + `&service=DOCUMENT`;
+ defaultUrl = defaultUrl + `&identifier=${QSUPPORT_FILE_BASE}`;
+ }
+
+ // const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QTUBE_VIDEO_BASE}&limit=${videoLimit}&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true&offset=${offset}`
+ const url = defaultUrl;
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ const responseData = await response.json();
+
+ // const responseData = await qortalRequest({
+ // action: "SEARCH_QDN_RESOURCES",
+ // mode: "ALL",
+ // service: "DOCUMENT",
+ // query: "${QTUBE_VIDEO_BASE}",
+ // limit: 20,
+ // includeMetadata: true,
+ // offset: offset,
+ // reverse: true,
+ // excludeBlocked: true,
+ // exactMatchNames: true,
+ // name: names
+ // })
+ const structureData = responseData.map((video: any): Video => {
+ return {
+ title: video?.metadata?.title,
+ service: video?.service,
+ category: video?.metadata?.category,
+ categoryName: video?.metadata?.categoryName,
+ tags: video?.metadata?.tags || [],
+ description: video?.metadata?.description,
+ created: video?.created,
+ updated: video?.updated,
+ user: video.name,
+ videoImage: "",
+ id: video.identifier,
+ };
+ });
+ if (reset) {
+ dispatch(addFiles(structureData));
+ } else {
+ dispatch(upsertFiles(structureData));
+ }
+ for (const content of structureData) {
+ if (content.user && content.id) {
+ const res = checkAndUpdateFile(content);
+ if (res) {
+ queue.push(() => getFile(content.user, content.id, content));
+ }
+ }
+ }
+ } catch (error) {
+ console.log({ error });
+ } finally {
+ }
+ },
+ [videos, hashMapFiles]
+ );
+
+ const getFilesFiltered = React.useCallback(
+ async (filterValue: string) => {
+ try {
+ const offset = filteredVideos.length;
+ const replaceSpacesWithUnderscore = filterValue.replace(/ /g, "_");
+
+ const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${replaceSpacesWithUnderscore}&identifier=${QSUPPORT_FILE_BASE}&limit=10&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true&offset=${offset}`;
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ const responseData = await response.json();
+
+ // const responseData = await qortalRequest({
+ // action: "SEARCH_QDN_RESOURCES",
+ // mode: "ALL",
+ // service: "DOCUMENT",
+ // query: replaceSpacesWithUnderscore,
+ // identifier: "${QTUBE_VIDEO_BASE}",
+ // limit: 20,
+ // includeMetadata: true,
+ // offset: offset,
+ // reverse: true,
+ // excludeBlocked: true,
+ // exactMatchNames: true,
+ // name: names
+ // })
+ const structureData = responseData.map((video: any): Video => {
+ return {
+ title: video?.metadata?.title,
+ category: video?.metadata?.category,
+ categoryName: video?.metadata?.categoryName,
+ tags: video?.metadata?.tags || [],
+ description: video?.metadata?.description,
+ created: video?.created,
+ updated: video?.updated,
+ user: video.name,
+ videoImage: "",
+ id: video.identifier,
+ };
+ });
+ dispatch(upsertFilteredFiles(structureData));
+
+ for (const content of structureData) {
+ if (content.user && content.id) {
+ const res = checkAndUpdateFile(content);
+ if (res) {
+ queue.push(() => getFile(content.user, content.id, content));
+ }
+ }
+ }
+ } catch (error) {
+ } finally {
+ }
+ },
+ [filteredVideos, hashMapFiles]
+ );
+
+ const checkNewFiles = React.useCallback(async () => {
+ try {
+ const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QSUPPORT_FILE_BASE}&limit=20&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true`;
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ const responseData = await response.json();
+ // const responseData = await qortalRequest({
+ // action: "SEARCH_QDN_RESOURCES",
+ // mode: "ALL",
+ // service: "DOCUMENT",
+ // query: "${QTUBE_VIDEO_BASE}",
+ // limit: 20,
+ // includeMetadata: true,
+ // reverse: true,
+ // excludeBlocked: true,
+ // exactMatchNames: true,
+ // name: names
+ // })
+ const latestVideo = videos[0];
+ if (!latestVideo) return;
+ const findVideo = responseData?.findIndex(
+ (item: any) => item?.identifier === latestVideo?.id
+ );
+ if (findVideo === -1) {
+ dispatch(setCountNewFiles(responseData.length));
+ return;
+ }
+ const newArray = responseData.slice(0, findVideo);
+ dispatch(setCountNewFiles(newArray.length));
+ return;
+ } catch (error) {}
+ }, [videos]);
+
+ const getFilesCount = React.useCallback(async () => {
+ try {
+ let url = `/arbitrary/resources/search?mode=ALL&includemetadata=false&limit=0&service=DOCUMENT&identifier=${QSUPPORT_FILE_BASE}`;
+
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ const responseData = await response.json();
+
+ const totalFilesPublished = responseData.length;
+ const uniqueNames = new Set(responseData.map(video => video.name));
+ const totalNamesPublished = uniqueNames.size;
+ const filesPerNamePublished = (
+ totalFilesPublished / totalNamesPublished
+ ).toFixed(2);
+
+ dispatch(setTotalFilesPublished(totalFilesPublished));
+ dispatch(setTotalNamesPublished(totalNamesPublished));
+ dispatch(setFilesPerNamePublished(filesPerNamePublished));
+ } catch (error) {
+ console.log({ error });
+ } finally {
+ }
+ }, []);
+
+ return {
+ getFiles,
+ checkAndUpdateFile,
+ getFile,
+ hashMapFiles,
+ getNewFiles,
+ checkNewFiles,
+ getFilesFiltered,
+ getFilesCount,
+ };
+};
diff --git a/src/hooks/useWindowSize.tsx b/src/hooks/useWindowSize.tsx
new file mode 100644
index 0000000..bf2b9cc
--- /dev/null
+++ b/src/hooks/useWindowSize.tsx
@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+export function useWindowSize() {
+ const [windowSize, setWindowSize] = useState({
+ width: undefined,
+ });
+
+ useEffect(() => {
+ function handleResize() {
+ setWindowSize({
+ width: window.innerWidth,
+ });
+ }
+
+ window.addEventListener("resize", handleResize);
+
+ // Call handler right away so state gets updated with initial window size
+ handleResize();
+
+ // Remove event listener on cleanup
+ return () => window.removeEventListener("resize", handleResize);
+ }, []); // Empty array means that effect doesn't depend on any values from props or state, so it runs once when the component mounts, and never re-runs.
+
+ return windowSize;
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..2dd2e4a
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,229 @@
+@font-face {
+ font-family: 'Cambon Light';
+ src: url("./styles/fonts/Cambon-Light.ttf") format("truetype");
+}
+
+@font-face {
+ font-family: 'Merriweather Sans';
+ src: url("./styles/fonts/Merriweather Sans.ttf") format("truetype");
+}
+
+@font-face {
+ font-family: 'Karla';
+ src: url("./styles/fonts/Karla.ttf") format("truetype");
+}
+
+@font-face {
+ font-family: 'Proxima Nova';
+ src: url("./styles/fonts/ProximaNova.otf") format("opentype");
+}
+
+@font-face {
+ font-family: 'Raleway';
+ src: url("./styles/fonts/Raleway.ttf") format("truetype");
+}
+
+@font-face {
+ font-family: 'Catamaran';
+ src: url("./styles/fonts/Catamaran.ttf") format("truetype");
+}
+
+@font-face {
+ font-family: 'Oxygen';
+ src: url("./styles/fonts/Oxygen.ttf") format("truetype");
+}
+
+@font-face {
+ font-family: 'Cairo';
+ src: url("./styles/fonts/Cairo.ttf") format("truetype");
+}
+
+:root {
+ padding: 0px;
+ margin: 0px;
+ box-sizing: border-box;
+}
+
+
+.line-clamp {
+ height: 100px;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 5; /* number of lines to show */
+ -webkit-box-orient: vertical;
+ text-overflow: ellipsis;
+}
+
+.edit-btn:hover {
+ opacity: .75;
+ transition: .2s all;
+
+}
+
+.post-image {
+ max-width: 100%;
+ border-radius: 5px;
+ width: 100%;
+ height: 100%;
+}
+
+
+
+.test-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ min-height: 25px;
+}
+
+.test-grid-item {
+ border: 1px solid powderblue;
+}
+
+
+body::-webkit-scrollbar-track {
+ background-color: transparent;
+
+
+ }
+ body::-webkit-scrollbar-track:hover {
+ background-color: transparent;
+ }
+
+ body::-webkit-scrollbar {
+ width: 16px;
+ height: 10px;
+ background-color: white;
+ }
+
+ body::-webkit-scrollbar-thumb {
+ background-color: #838eee;
+ border-radius: 8px;
+ background-clip: content-box;
+ border: 4px solid transparent;
+
+ }
+
+ body::-webkit-scrollbar-thumb:hover {
+ background-color: #6270f0;
+ }
+
+
+ .MuiList-root::-webkit-scrollbar-track {
+ background-color: transparent;
+
+
+ }
+ .MuiList-root::-webkit-scrollbar-track:hover {
+ background-color: transparent;
+ }
+
+ .MuiList-root::-webkit-scrollbar {
+ width: 14px;
+ height: 10px;
+ background-color: white;
+ }
+
+ .MuiList-root::-webkit-scrollbar-thumb {
+ background-color: lightgray;
+ border-radius: 8px;
+ background-clip: content-box;
+ border: 4px solid transparent;
+
+ }
+
+ .MuiList-root::-webkit-scrollbar-thumb:hover {
+ background-color: lightslategray;
+ }
+
+ .my-masonry-grid {
+ display: -webkit-box; /* Not needed if autoprefixing */
+ display: -ms-flexbox; /* Not needed if autoprefixing */
+ display: flex;
+ margin-left: -20px; /* gutter size offset */
+ width: auto;
+ padding: 15px 20px;
+ }
+
+ .my-masonry-grid_column {
+ padding-left: 20px; /* gutter size */
+ background-clip: padding-box;
+ }
+
+ /* Style your items */
+ .my-masonry-grid_column > li { /* change div to reference your elements you put in */
+ margin-bottom: 30px;
+ }
+
+ .my-svg path {
+ fill: red
+ }
+
+ .qortal-link {
+ text-decoration: none; /* Removes the underline */
+ color: inherit; /* Inherits the color of the parent element */
+ }
+ .qortal-link:hover, a:focus {
+ text-decoration: underline; /* Adds underline on hover and focus for accessibility */
+ }
+
+ .download-icon {
+ transition: all 0.5s ease-in-out;
+ animation: downloadIconAnimation 2s infinite;
+ }
+
+ @keyframes downloadIconAnimation {
+ 0% { transform: scale(1); fill: #fff; }
+ 50% { transform: scale(1.2); fill: #3498db; }
+ 100% { transform: scale(1); fill: #fff; }
+ }
+
+ .closePlayer {
+ position: absolute;
+ top: 0px;
+ width: 100%;
+ transition: all 0.3s;
+ display: flex;
+ justify-content: flex-end;
+ z-index: 8000;
+ }
+
+
+/* When the screen is 600px or less, display .myClassUnder600 and hide .myClassOver600 */
+@media screen and (max-width: 600px) {
+ .myClassUnder600 {
+ display: none !important;
+ }
+
+
+}
+
+@media screen and (min-width: 601px) {
+ .myClassOver600 {
+ display: none !important;
+ }
+}
+
+.ql-editor {
+ min-height: 100px;
+ width: 100%
+}
+
+.ql-editor img {
+ cursor: default;
+}
+
+.ql-container {
+ font-size: 16px
+}
+
+.hover-click {
+ transition: opacity 0.2s;
+}
+.hover-click:hover {
+ opacity: 0.7;
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..b13bb52
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,17 @@
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+import { BrowserRouter } from 'react-router-dom'
+interface CustomWindow extends Window {
+ _qdnBase: string
+}
+
+const customWindow = window as unknown as CustomWindow
+
+const baseUrl = customWindow?._qdnBase || ''
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+
+
+
+
+)
diff --git a/src/pages/Home/Channels.tsx b/src/pages/Home/Channels.tsx
new file mode 100644
index 0000000..90bffc6
--- /dev/null
+++ b/src/pages/Home/Channels.tsx
@@ -0,0 +1,79 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { RootState } from "../../state/store";
+import { Avatar, Box, Button, Typography, useTheme } from "@mui/material";
+import { useFetchFiles } from "../../hooks/useFetchFiles.tsx";
+import LazyLoad from "../../components/common/LazyLoad";
+import {
+ BottomParent,
+ NameContainer,
+ VideoCard,
+ VideoCardName,
+ VideoCardTitle,
+ FileContainer,
+ VideoUploadDate,
+} from "./FileList-styles.tsx";
+import ResponsiveImage from "../../components/ResponsiveImage";
+import { formatDate, formatTimestampSeconds } from "../../utils/time";
+import { ChannelCard, ChannelTitle } from "./Home-styles";
+
+interface VideoListProps {
+ mode?: string;
+}
+export const Channels = ({ mode }: VideoListProps) => {
+ const theme = useTheme();
+ const navigate = useNavigate();
+ const publishNames = useSelector(
+ (state: RootState) => state.global.publishNames
+ );
+ const userAvatarHash = useSelector(
+ (state: RootState) => state.global.userAvatarHash
+ );
+
+ return (
+
+
+ {publishNames &&
+ publishNames?.slice(0, 10).map(name => {
+ let avatarUrl = "";
+ if (userAvatarHash[name]) {
+ avatarUrl = userAvatarHash[name];
+ }
+ return (
+
+ {
+ navigate(`/channel/${name}`);
+ }}
+ >
+ {name}
+
+
+
+ );
+ })}
+
+
+ );
+};
diff --git a/src/pages/Home/FileList-styles.tsx b/src/pages/Home/FileList-styles.tsx
new file mode 100644
index 0000000..f026dc7
--- /dev/null
+++ b/src/pages/Home/FileList-styles.tsx
@@ -0,0 +1,290 @@
+import { styled } from "@mui/system";
+import {
+ Box,
+ Grid,
+ Typography,
+ Checkbox,
+ TextField,
+ InputLabel,
+ Autocomplete,
+} from "@mui/material";
+
+export const FileContainer = styled(Box)(({ theme }) => ({
+ position: "relative",
+ display: "flex",
+ padding: "15px",
+ flexDirection: "row",
+ gap: "20px",
+ flexWrap: "wrap",
+ justifyContent: "flex-start",
+ width: "100%",
+}));
+
+export const StoresRow = styled(Grid)(({ theme }) => ({
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ justifyContent: "flex-start",
+ gap: "15px",
+ width: "auto",
+ position: "relative",
+ "@media (max-width: 450px)": {
+ width: "100%",
+ },
+}));
+
+export const VideoCard = styled(Grid)(({ theme }) => ({
+ position: "relative",
+ display: "flex",
+ flexDirection: "column",
+ height: "320px",
+ width: "300px",
+ backgroundColor: theme.palette.background.paper,
+ borderRadius: "8px",
+ padding: "10px 15px",
+ gap: "20px",
+ cursor: "pointer",
+ border:
+ theme.palette.mode === "dark"
+ ? "none"
+ : `1px solid ${theme.palette.primary.light}`,
+ boxShadow:
+ theme.palette.mode === "dark"
+ ? "0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2)"
+ : "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
+ transition: "all 0.3s ease-in-out",
+ "&:hover": {
+ boxShadow:
+ theme.palette.mode === "dark"
+ ? "0px 8px 10px 1px hsla(0,0%,0%,0.14), 0px 3px 14px 2px hsla(0,0%,0%,0.12), 0px 5px 5px -3px hsla(0,0%,0%,0.2)"
+ : "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;",
+ },
+}));
+
+export const StoreCardInfo = styled(Grid)(({ theme }) => ({
+ display: "flex",
+ flexDirection: "column",
+ gap: "10px",
+ padding: "5px",
+ marginTop: "15px",
+}));
+
+export const VideoImageContainer = styled(Grid)(({ theme }) => ({}));
+
+export const VideoCardImage = styled("img")(({ theme }) => ({
+ maxWidth: "300px",
+ minWidth: "150px",
+ borderRadius: "5px",
+ height: "150px",
+ objectFit: "fill",
+ width: "266px",
+}));
+
+const DoubleLine = styled(Typography)`
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+`;
+
+export const VideoCardTitle = styled(DoubleLine)(({ theme }) => ({
+ fontFamily: "Cairo",
+ fontSize: "16px",
+ letterSpacing: "0.4px",
+ color: theme.palette.text.primary,
+ userSelect: "none",
+}));
+export const VideoCardName = styled(Typography)(({ theme }) => ({
+ fontFamily: "Cairo",
+ fontSize: "14px",
+ letterSpacing: "0.4px",
+ color: theme.palette.text.primary,
+ userSelect: "none",
+ overflow: "hidden",
+ whiteSpace: "nowrap",
+ textOverflow: "ellipsis",
+ width: "100%",
+}));
+export const VideoUploadDate = styled(Typography)(({ theme }) => ({
+ fontFamily: "Cairo",
+ fontSize: "12px",
+ letterSpacing: "0.4px",
+ color: theme.palette.text.primary,
+ userSelect: "none",
+}));
+export const BottomParent = styled(Box)(({ theme }) => ({
+ display: "flex",
+ alignItems: "flex-start",
+ flexDirection: "column",
+}));
+export const VideoCardDescription = styled(Typography)(({ theme }) => ({
+ fontFamily: "Karla",
+ fontSize: "20px",
+ letterSpacing: "0px",
+ color: theme.palette.text.primary,
+ userSelect: "none",
+}));
+
+export const StoreCardOwner = styled(Typography)(({ theme }) => ({
+ fontFamily: "Livvic",
+ color: theme.palette.text.primary,
+ fontSize: "17px",
+ position: "absolute",
+ bottom: "5px",
+ right: "10px",
+ userSelect: "none",
+}));
+
+export const StoreCardYouOwn = styled(Box)(({ theme }) => ({
+ position: "absolute",
+ top: "5px",
+ right: "10px",
+ display: "flex",
+ alignItems: "center",
+ gap: "5px",
+ fontFamily: "Livvic",
+ fontSize: "15px",
+ color: theme.palette.text.primary,
+}));
+
+export const MyStoresRow = styled(Grid)(({ theme }) => ({
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "flex-end",
+ padding: "5px",
+ width: "100%",
+}));
+
+export const NameContainer = styled(Box)(({ theme }) => ({
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "flex-start",
+ alignItems: "center",
+ gap: "10px",
+ marginBottom: "10px",
+}));
+
+export const MyStoresCard = styled(Box)(({ theme }) => ({
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ width: "auto",
+ borderRadius: "4px",
+ backgroundColor: theme.palette.background.paper,
+ padding: "5px 10px",
+ fontFamily: "Raleway",
+ fontSize: "18px",
+ color: theme.palette.text.primary,
+}));
+
+export const MyStoresCheckbox = styled(Checkbox)(({ theme }) => ({
+ color: "#c0d4ff",
+ "&.Mui-checked": {
+ color: "#6596ff",
+ },
+}));
+
+export const FiltersCol = styled(Grid)(({ theme }) => ({
+ display: "flex",
+ flexDirection: "column",
+ height: "100%",
+ padding: "20px 15px",
+ backgroundColor: theme.palette.background.default,
+ borderTop: `1px solid ${theme.palette.background.paper}`,
+ borderRight: `1px solid ${theme.palette.background.paper}`,
+}));
+
+export const FiltersContainer = styled(Box)(({ theme }) => ({
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "space-between",
+}));
+
+export const FiltersRow = styled(Box)(({ theme }) => ({
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-between",
+ width: "100%",
+ padding: "0 15px",
+ fontSize: "16px",
+ userSelect: "none",
+}));
+
+export const FiltersTitle = styled(Typography)(({ theme }) => ({
+ display: "flex",
+ alignItems: "center",
+ gap: "5px",
+ margin: "20px 0",
+ fontFamily: "Raleway",
+ fontSize: "17px",
+ color: theme.palette.text.primary,
+ userSelect: "none",
+}));
+
+export const FiltersCheckbox = styled(Checkbox)(({ theme }) => ({
+ color: "#c0d4ff",
+ "&.Mui-checked": {
+ color: "#6596ff",
+ },
+}));
+
+export const FilterSelect = styled(Autocomplete)(({ theme }) => ({
+ "& #categories-select": {
+ padding: "7px",
+ },
+ "& .MuiSelect-placeholder": {
+ fontFamily: "Raleway",
+ fontSize: "17px",
+ color: theme.palette.text.primary,
+ userSelect: "none",
+ },
+ "& MuiFormLabel-root": {
+ fontFamily: "Raleway",
+ fontSize: "17px",
+ color: theme.palette.text.primary,
+ userSelect: "none",
+ },
+}));
+
+export const FilterSelectMenuItems = styled(TextField)(({ theme }) => ({
+ fontFamily: "Raleway",
+ fontSize: "17px",
+ color: theme.palette.text.primary,
+ userSelect: "none",
+}));
+
+export const FiltersSubContainer = styled(Box)(({ theme }) => ({
+ display: "flex",
+ alignItems: "center",
+ flexDirection: "column",
+ gap: "5px",
+}));
+
+export const FilterDropdownLabel = styled(InputLabel)(({ theme }) => ({
+ fontFamily: "Raleway",
+ fontSize: "16px",
+ color: theme.palette.text.primary,
+}));
+
+export const IconsBox = styled(Box)({
+ display: "flex",
+ gap: "3px",
+ position: "absolute",
+ top: "-20px",
+ right: "-5px",
+ transition: "all 0.3s ease-in-out",
+});
+
+export const BlockIconContainer = styled(Box)({
+ display: "flex",
+ boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;",
+ backgroundColor: "#fbfbfb",
+ color: "#c25252",
+ padding: "2px",
+ borderRadius: "3px",
+ transition: "all 0.3s ease-in-out",
+ "&:hover": {
+ cursor: "pointer",
+ transform: "scale(1.1)",
+ },
+});
diff --git a/src/pages/Home/FileList.tsx b/src/pages/Home/FileList.tsx
new file mode 100644
index 0000000..85d7929
--- /dev/null
+++ b/src/pages/Home/FileList.tsx
@@ -0,0 +1,207 @@
+import { Avatar, Box, Skeleton, Tooltip } from "@mui/material";
+import {
+ BlockIconContainer,
+ BottomParent,
+ FileContainer,
+ IconsBox,
+ NameContainer,
+ VideoCard,
+ VideoCardName,
+ VideoCardTitle,
+ VideoUploadDate,
+} from "./FileList-styles.tsx";
+import EditIcon from "@mui/icons-material/Edit";
+import {
+ blockUser,
+ setEditFile,
+ Video,
+} from "../../state/features/fileSlice.ts";
+import BlockIcon from "@mui/icons-material/Block";
+import AttachFileIcon from "@mui/icons-material/AttachFile";
+import { formatBytes } from "../IssueContent/IssueContent.tsx";
+import { formatDate } from "../../utils/time.ts";
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../state/store.ts";
+import { useNavigate } from "react-router-dom";
+import { getIconsFromObject } from "../../constants/Categories/CategoryFunctions.ts";
+
+interface FileListProps {
+ files: Video[];
+}
+export const FileList = ({ files }: FileListProps) => {
+ const hashMapFiles = useSelector(
+ (state: RootState) => state.file.hashMapFiles
+ );
+
+ const [showIcons, setShowIcons] = useState(null);
+ const username = useSelector((state: RootState) => state.auth?.user?.name);
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+
+ const blockUserFunc = async (user: string) => {
+ if (user === "Q-Share") return;
+
+ try {
+ const response = await qortalRequest({
+ action: "ADD_LIST_ITEMS",
+ list_name: "blockedNames",
+ items: [user],
+ });
+
+ if (response === true) {
+ dispatch(blockUser(user));
+ }
+ } catch (error) {}
+ };
+
+ return (
+
+ {files.map((file: any, index: number) => {
+ const existingFile = hashMapFiles[file?.id];
+ let hasHash = false;
+ let fileObj = file;
+ if (existingFile) {
+ fileObj = existingFile;
+ hasHash = true;
+ }
+ const icon = getIconsFromObject(fileObj);
+ return (
+ setShowIcons(fileObj.id)}
+ onMouseLeave={() => setShowIcons(null)}
+ >
+ {hasHash ? (
+ <>
+
+ {fileObj?.user === username && (
+
+
+ {
+ dispatch(setEditFile(fileObj));
+ }}
+ />
+
+
+ )}
+
+
+
+ {
+ blockUserFunc(fileObj?.user);
+ }}
+ />
+
+
+
+ {
+ navigate(`/share/${fileObj?.user}/${fileObj?.id}`);
+ }}
+ sx={{
+ height: "100%",
+ width: "100%",
+ display: "flex",
+ gap: "25px",
+ flexDirection: "row",
+ justifyContent: "space-between",
+ }}
+ >
+
+ {icon ? (
+ 
+ ) : (
+
+ )}
+
+
+ {formatBytes(
+ fileObj?.files.reduce(
+ (acc, cur) => acc + (cur?.size || 0),
+ 0
+ )
+ )}
+
+ {fileObj.title}
+
+
+ {
+ e.stopPropagation();
+ navigate(`/channel/${fileObj?.user}`);
+ }}
+ >
+
+
+ {fileObj?.user}
+
+
+
+ {fileObj?.created && (
+
+ {formatDate(fileObj.created)}
+
+ )}
+
+
+
+ ) : (
+
+ )}
+
+ );
+ })}
+
+ );
+};
diff --git a/src/pages/Home/FileListComponentLevel.tsx b/src/pages/Home/FileListComponentLevel.tsx
new file mode 100644
index 0000000..43a5b54
--- /dev/null
+++ b/src/pages/Home/FileListComponentLevel.tsx
@@ -0,0 +1,246 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { RootState } from "../../state/store";
+import AttachFileIcon from "@mui/icons-material/AttachFile";
+
+import { Avatar, Box, Skeleton, useTheme } from "@mui/material";
+import { useFetchFiles } from "../../hooks/useFetchFiles.tsx";
+import LazyLoad from "../../components/common/LazyLoad";
+import {
+ BottomParent,
+ FileContainer,
+ NameContainer,
+ VideoCard,
+ VideoCardName,
+ VideoCardTitle,
+ VideoUploadDate,
+} from "./FileList-styles.tsx";
+import { formatDate } from "../../utils/time";
+import { Video } from "../../state/features/fileSlice.ts";
+import { queue } from "../../wrappers/GlobalWrapper";
+import { QSUPPORT_FILE_BASE } from "../../constants/Identifiers.ts";
+import { formatBytes } from "../IssueContent/IssueContent.tsx";
+import { getIconsFromObject } from "../../constants/Categories/CategoryFunctions.ts";
+
+interface VideoListProps {
+ mode?: string;
+}
+export const FileListComponentLevel = ({ mode }: VideoListProps) => {
+ const { name: paramName } = useParams();
+ const theme = useTheme();
+ const [isLoading, setIsLoading] = useState(true);
+
+ const firstFetch = useRef(false);
+ const afterFetch = useRef(false);
+ const hashMapVideos = useSelector(
+ (state: RootState) => state.file.hashMapFiles
+ );
+
+ const [videos, setVideos] = React.useState([]);
+
+ const navigate = useNavigate();
+ const { getFile, getNewFiles, checkNewFiles, checkAndUpdateFile } =
+ useFetchFiles();
+
+ const getVideos = React.useCallback(async () => {
+ try {
+ const offset = videos.length;
+ const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QSUPPORT_FILE_BASE}_&limit=50&includemetadata=false&reverse=true&excludeblocked=true&name=${paramName}&exactmatchnames=true&offset=${offset}`;
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ const responseData = await response.json();
+
+ const structureData = responseData.map((video: any): Video => {
+ return {
+ title: video?.metadata?.title,
+ category: video?.metadata?.category,
+ categoryName: video?.metadata?.categoryName,
+ tags: video?.metadata?.tags || [],
+ description: video?.metadata?.description,
+ created: video?.created,
+ updated: video?.updated,
+ user: video.name,
+ videoImage: "",
+ id: video.identifier,
+ };
+ });
+
+ const copiedVideos: Video[] = [...videos];
+ structureData.forEach((video: Video) => {
+ const index = videos.findIndex(p => p.id === video.id);
+ if (index !== -1) {
+ copiedVideos[index] = video;
+ } else {
+ copiedVideos.push(video);
+ }
+ });
+ setVideos(copiedVideos);
+
+ for (const content of structureData) {
+ if (content.user && content.id) {
+ const res = checkAndUpdateFile(content);
+ if (res) {
+ queue.push(() => getFile(content.user, content.id, content));
+ }
+ }
+ }
+ } catch (error) {
+ } finally {
+ }
+ }, [videos, hashMapVideos]);
+
+ const getVideosHandler = React.useCallback(async () => {
+ if (!firstFetch.current || !afterFetch.current) return;
+ await getVideos();
+ }, [getVideos]);
+
+ const getVideosHandlerMount = React.useCallback(async () => {
+ if (firstFetch.current) return;
+ firstFetch.current = true;
+ await getVideos();
+ afterFetch.current = true;
+ setIsLoading(false);
+ }, [getVideos]);
+
+ useEffect(() => {
+ if (!firstFetch.current) {
+ getVideosHandlerMount();
+ }
+ }, [getVideosHandlerMount]);
+
+ return (
+
+
+ {videos.map((file: any, index: number) => {
+ const existingFile = hashMapVideos[file?.id];
+ let hasHash = false;
+ let fileObj = file;
+ if (existingFile) {
+ fileObj = existingFile;
+ hasHash = true;
+ }
+
+ const icon = getIconsFromObject(fileObj);
+
+ return (
+
+ {hasHash ? (
+ <>
+ {
+ navigate(`/share/${fileObj?.user}/${fileObj?.id}`);
+ }}
+ sx={{
+ height: "100%",
+ width: "100%",
+ display: "flex",
+ gap: "25px",
+ flexDirection: "row",
+ justifyContent: "space-between",
+ }}
+ >
+
+ {icon ? (
+
+ ) : (
+
+ )}
+
+ {formatBytes(
+ fileObj?.files.reduce(
+ (acc, cur) => acc + (cur?.size || 0),
+ 0
+ )
+ )}
+
+ {fileObj.title}
+
+
+ {
+ e.stopPropagation();
+ navigate(`/channel/${fileObj?.user}`);
+ }}
+ >
+
+
+ {fileObj?.user}
+
+
+
+ {fileObj?.created && (
+
+ {formatDate(fileObj.created)}
+
+ )}
+
+
+
+ ) : (
+
+ )}
+
+ );
+ })}
+
+
+
+ );
+};
diff --git a/src/pages/Home/Home-styles.tsx b/src/pages/Home/Home-styles.tsx
new file mode 100644
index 0000000..26c9a73
--- /dev/null
+++ b/src/pages/Home/Home-styles.tsx
@@ -0,0 +1,87 @@
+import { styled } from "@mui/system";
+import { Box, Grid, Typography, Checkbox } from "@mui/material";
+
+
+export const SubtitleContainer = styled(Box)(({ theme }) => ({
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "center",
+ alignItems: 'center',
+ margin: '10px 0px',
+ width: '100%'
+}));
+
+export const Subtitle = styled(Typography)(({ theme }) => ({
+ textAlign: 'center',
+ fontSize: '20px'
+}));
+
+const DoubleLine = styled(Typography)`
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+`
+export const ChannelTitle = styled(DoubleLine)(({ theme }) => ({
+ fontFamily: "Cairo",
+ fontSize: "20px",
+ letterSpacing: "0.4px",
+ color: theme.palette.text.primary,
+ userSelect: "none",
+ marginBottom: 'auto',
+ textAlign: 'center'
+}));
+export const WelcomeTitle = styled(DoubleLine)(({ theme }) => ({
+ fontFamily: "Cairo",
+ fontSize: "24px",
+ letterSpacing: "0.4px",
+ color: theme.palette.text.primary,
+ userSelect: "none",
+ textAlign: 'center'
+}));
+
+export const WelcomeContainer = styled(Box)(({ theme }) => ({
+ position: 'fixed',
+ width: '90%',
+ height: '90%',
+ backgroundColor: theme.palette.background.paper,
+ left: '50%',
+ top: '50%',
+ transform: 'translate(-50%, -50%)',
+ zIndex: 500,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center'
+}));
+
+
+export const ChannelCard = styled(Grid)(({ theme }) => ({
+ position: "relative",
+ display: "flex",
+ flexDirection: "column",
+ alignItems: 'center',
+ height: "auto",
+ width: '300px',
+ minHeight: '130px',
+ backgroundColor: theme.palette.background.paper,
+ borderRadius: "8px",
+ padding: "10px 15px",
+ gap: "20px",
+ border:
+ theme.palette.mode === "dark"
+ ? "none"
+ : `1px solid ${theme.palette.primary.light}`,
+ boxShadow:
+ theme.palette.mode === "dark"
+ ? "0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2)"
+ : "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
+ transition: "all 0.3s ease-in-out",
+ "&:hover": {
+ cursor: "pointer",
+ boxShadow:
+ theme.palette.mode === "dark"
+ ? "0px 8px 10px 1px hsla(0,0%,0%,0.14), 0px 3px 14px 2px hsla(0,0%,0%,0.12), 0px 5px 5px -3px hsla(0,0%,0%,0.2)"
+ : "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;"
+ }
+}));
\ No newline at end of file
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
new file mode 100644
index 0000000..8bb41ae
--- /dev/null
+++ b/src/pages/Home/Home.tsx
@@ -0,0 +1,327 @@
+import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../state/store";
+import { FileList } from "./FileList.tsx";
+import { Box, Button, Grid, Input, useTheme } from "@mui/material";
+import { useFetchFiles } from "../../hooks/useFetchFiles.tsx";
+import LazyLoad from "../../components/common/LazyLoad";
+import { FiltersCol, FiltersContainer } from "./FileList-styles.tsx";
+import { SubtitleContainer } from "./Home-styles";
+import {
+ changefilterName,
+ changefilterSearch,
+ changeFilterType,
+} from "../../state/features/fileSlice.ts";
+import { allCategoryData } from "../../constants/Categories/1stCategories.ts";
+import {
+ CategoryList,
+ CategoryListRef,
+} from "../../components/common/CategoryList/CategoryList.tsx";
+import { StatsData } from "../../components/StatsData.tsx";
+
+interface HomeProps {
+ mode?: string;
+}
+export const Home = ({ mode }: HomeProps) => {
+ const theme = useTheme();
+ const prevVal = useRef("");
+ const categoryListRef = useRef(null);
+ const isFiltering = useSelector((state: RootState) => state.file.isFiltering);
+ const filterValue = useSelector((state: RootState) => state.file.filterValue);
+ const [isLoading, setIsLoading] = useState(false);
+ const filterType = useSelector((state: RootState) => state.file.filterType);
+ const totalFilesPublished = useSelector(
+ (state: RootState) => state.global.totalFilesPublished
+ );
+ const totalNamesPublished = useSelector(
+ (state: RootState) => state.global.totalNamesPublished
+ );
+ const filesPerNamePublished = useSelector(
+ (state: RootState) => state.global.filesPerNamePublished
+ );
+ const setFilterType = payload => {
+ dispatch(changeFilterType(payload));
+ };
+ const filterSearch = useSelector(
+ (state: RootState) => state.file.filterSearch
+ );
+
+ const setFilterSearch = payload => {
+ dispatch(changefilterSearch(payload));
+ };
+ const filterName = useSelector((state: RootState) => state.file.filterName);
+
+ const setFilterName = payload => {
+ dispatch(changefilterName(payload));
+ };
+
+ const isFilterMode = useRef(false);
+ const firstFetch = useRef(false);
+ const afterFetch = useRef(false);
+ const isFetchingFiltered = useRef(false);
+ const isFetching = useRef(false);
+
+ const countNewFiles = useSelector(
+ (state: RootState) => state.file.countNewFiles
+ );
+ const userAvatarHash = useSelector(
+ (state: RootState) => state.global.userAvatarHash
+ );
+
+ const { files: globalVideos } = useSelector((state: RootState) => state.file);
+
+ const setSelectedCategoryFiles = payload => {};
+
+ const dispatch = useDispatch();
+ const filteredFiles = useSelector(
+ (state: RootState) => state.file.filteredFiles
+ );
+
+ const {
+ getFiles,
+ checkAndUpdateFile,
+ getFile,
+ hashMapFiles,
+ getNewFiles,
+ checkNewFiles,
+ getFilesFiltered,
+ getFilesCount,
+ } = useFetchFiles();
+
+ const getFilesHandler = React.useCallback(
+ async (reset?: boolean, resetFilers?: boolean) => {
+ if (!firstFetch.current || !afterFetch.current) return;
+ if (isFetching.current) return;
+ isFetching.current = true;
+ const selectedCategories =
+ categoryListRef.current.getSelectedCategories() || [];
+
+ await getFiles(
+ {
+ name: filterName,
+ categories: selectedCategories,
+ keywords: filterSearch,
+ type: filterType,
+ },
+ reset,
+ resetFilers
+ );
+ isFetching.current = false;
+ },
+ [
+ getFiles,
+ filterValue,
+ getFilesFiltered,
+ isFiltering,
+ filterName,
+ filterSearch,
+ filterType,
+ ]
+ );
+
+ const searchOnEnter = e => {
+ if (e.keyCode == 13) {
+ getFilesHandler(true);
+ }
+ };
+
+ useEffect(() => {
+ if (isFiltering && filterValue !== prevVal?.current) {
+ prevVal.current = filterValue;
+ getFilesHandler();
+ }
+ }, [filterValue, isFiltering, filteredFiles, getFilesCount]);
+
+ const getFilesHandlerMount = React.useCallback(async () => {
+ if (firstFetch.current) return;
+ firstFetch.current = true;
+ setIsLoading(true);
+
+ await getFiles();
+ afterFetch.current = true;
+ isFetching.current = false;
+
+ setIsLoading(false);
+ }, [getFiles]);
+
+ let videos = globalVideos;
+
+ if (isFiltering) {
+ videos = filteredFiles;
+ isFilterMode.current = true;
+ } else {
+ isFilterMode.current = false;
+ }
+
+ // const interval = useRef(null);
+
+ // const checkNewVideosFunc = useCallback(() => {
+ // let isCalling = false;
+ // interval.current = setInterval(async () => {
+ // if (isCalling || !firstFetch.current) return;
+ // isCalling = true;
+ // await checkNewVideos();
+ // isCalling = false;
+ // }, 30000); // 1 second interval
+ // }, [checkNewVideos]);
+
+ // useEffect(() => {
+ // if (isFiltering && interval.current) {
+ // clearInterval(interval.current);
+ // return;
+ // }
+ // checkNewVideosFunc();
+
+ // return () => {
+ // if (interval?.current) {
+ // clearInterval(interval.current);
+ // }
+ // };
+ // }, [mode, checkNewVideosFunc, isFiltering]);
+
+ useEffect(() => {
+ if (
+ !firstFetch.current &&
+ !isFilterMode.current &&
+ globalVideos.length === 0
+ ) {
+ isFetching.current = true;
+ getFilesHandlerMount();
+ } else {
+ firstFetch.current = true;
+ afterFetch.current = true;
+ }
+ }, [getFilesHandlerMount, globalVideos]);
+
+ const filtersToDefault = async () => {
+ setFilterType("videos");
+ setFilterSearch("");
+ setFilterName("");
+ categoryListRef.current?.clearCategories();
+
+ ReactDOM.flushSync(() => {
+ getFilesHandler(true, true);
+ });
+ };
+
+ return (
+
+
+
+
+ {
+ setFilterSearch(e.target.value);
+ }}
+ onKeyDown={searchOnEnter}
+ value={filterSearch}
+ placeholder="Search"
+ sx={{
+ borderBottom: "1px solid white",
+ "&&:before": {
+ borderBottom: "none",
+ },
+ "&&:after": {
+ borderBottom: "none",
+ },
+ "&&:hover:before": {
+ borderBottom: "none",
+ },
+ "&&.Mui-focused:before": {
+ borderBottom: "none",
+ },
+ "&&.Mui-focused": {
+ outline: "none",
+ },
+ fontSize: "18px",
+ }}
+ />
+ {
+ setFilterName(e.target.value);
+ }}
+ onKeyDown={searchOnEnter}
+ value={filterName}
+ placeholder="User's Name (Exact)"
+ sx={{
+ marginTop: "20px",
+ borderBottom: "1px solid white",
+ "&&:before": {
+ borderBottom: "none",
+ },
+ "&&:after": {
+ borderBottom: "none",
+ },
+ "&&:hover:before": {
+ borderBottom: "none",
+ },
+ "&&.Mui-focused:before": {
+ borderBottom: "none",
+ },
+ "&&.Mui-focused": {
+ outline: "none",
+ },
+ fontSize: "18px",
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/IndividualProfile/IndividualProfile.tsx b/src/pages/IndividualProfile/IndividualProfile.tsx
new file mode 100644
index 0000000..8c76fac
--- /dev/null
+++ b/src/pages/IndividualProfile/IndividualProfile.tsx
@@ -0,0 +1,68 @@
+import React, { useMemo } from "react";
+import { FileListComponentLevel } from "../Home/FileListComponentLevel.tsx";
+import { HeaderContainer, ProfileContainer } from "./Profile-styles";
+import {
+ AuthorTextComment,
+ StyledCardColComment,
+ StyledCardHeaderComment,
+} from "../IssueContent/IssueContent-styles.tsx";
+import { Avatar, Box, useTheme } from "@mui/material";
+import { useParams } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { RootState } from "../../state/store";
+
+export const IndividualProfile = () => {
+ const { name: paramName } = useParams();
+
+ const userAvatarHash = useSelector(
+ (state: RootState) => state.global.userAvatarHash
+ );
+ const theme = useTheme();
+
+ const avatarUrl = useMemo(() => {
+ let url = "";
+ if (paramName && userAvatarHash[paramName]) {
+ url = userAvatarHash[paramName];
+ }
+
+ return url;
+ }, [userAvatarHash, paramName]);
+ return (
+
+
+
+
+
+
+
+
+
+ {paramName}
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/IndividualProfile/Profile-styles.tsx b/src/pages/IndividualProfile/Profile-styles.tsx
new file mode 100644
index 0000000..97f80aa
--- /dev/null
+++ b/src/pages/IndividualProfile/Profile-styles.tsx
@@ -0,0 +1,16 @@
+import { styled } from "@mui/system";
+import { Box, Grid, Typography, Checkbox } from "@mui/material";
+
+export const ProfileContainer = styled(Box)(({ theme }) => ({
+ position: "relative",
+ display: "flex",
+ width: "100%",
+ flexDirection: "column"
+}));
+
+export const HeaderContainer = styled(Box)(({ theme }) => ({
+ position: "relative",
+ display: "flex",
+ width: "100%",
+ justifyContent: "center"
+}));
diff --git a/src/pages/IssueContent/IssueContent-styles.tsx b/src/pages/IssueContent/IssueContent-styles.tsx
new file mode 100644
index 0000000..7f95ce8
--- /dev/null
+++ b/src/pages/IssueContent/IssueContent-styles.tsx
@@ -0,0 +1,89 @@
+import { styled } from "@mui/system";
+import { Box, Typography } from "@mui/material";
+
+export const FilePlayerContainer = styled(Box)(({ theme }) => ({
+ maxWidth: "95%",
+ width: "1000px",
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "flex-start",
+}));
+
+export const FileTitle = styled(Typography)(({ theme }) => ({
+ fontFamily: "Raleway",
+ fontSize: "20px",
+ color: theme.palette.text.primary,
+ userSelect: "none",
+ wordBreak: "break-word",
+}));
+
+export const FileDescription = styled(Typography)(({ theme }) => ({
+ fontFamily: "Raleway",
+ fontSize: "16px",
+ color: theme.palette.text.primary,
+ userSelect: "none",
+ wordBreak: "break-word",
+}));
+
+export const ImageContainer = styled(Box)(({ theme }) => ({
+ display: "flex",
+}));
+
+export const Spacer = ({ height }: any) => {
+ return (
+
+ );
+};
+
+export const StyledCardHeaderComment = styled(Box)({
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "flex-start",
+ gap: "5px",
+ padding: "7px 0px",
+});
+export const StyledCardCol = styled(Box)({
+ display: "flex",
+ overflow: "hidden",
+ flexDirection: "column",
+ gap: "2px",
+ alignItems: "flex-start",
+ width: "100%",
+});
+
+export const StyledCardColComment = styled(Box)({
+ display: "flex",
+ overflow: "hidden",
+ flexDirection: "column",
+ gap: "2px",
+ alignItems: "flex-start",
+ width: "100%",
+});
+
+export const AuthorTextComment = styled(Typography)({
+ fontFamily: "Raleway, sans-serif",
+ fontSize: "16px",
+ lineHeight: "1.2",
+});
+
+export const FileAttachmentContainer = styled(Box)(({ theme }) => ({
+ display: "flex",
+ alignItems: "center",
+ gap: "20px",
+ padding: "5px 10px",
+ border: `1px solid ${theme.palette.text.primary}`,
+}));
+
+export const FileAttachmentFont = styled(Typography)(({ theme }) => ({
+ fontFamily: "Mulish",
+ color: theme.palette.text.primary,
+ fontSize: "16px",
+ letterSpacing: 0,
+ fontWeight: 400,
+ userSelect: "none",
+ whiteSpace: "nowrap",
+}));
diff --git a/src/pages/IssueContent/IssueContent.tsx b/src/pages/IssueContent/IssueContent.tsx
new file mode 100644
index 0000000..6209d69
--- /dev/null
+++ b/src/pages/IssueContent/IssueContent.tsx
@@ -0,0 +1,564 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate, useParams } from "react-router-dom";
+import { setIsLoadingGlobal } from "../../state/features/globalSlice";
+import { Avatar, Box, Typography, useTheme } from "@mui/material";
+import { RootState } from "../../state/store";
+import { addToHashMap } from "../../state/features/fileSlice.ts";
+import AttachFileIcon from "@mui/icons-material/AttachFile";
+import DownloadIcon from "@mui/icons-material/Download";
+import {
+ AuthorTextComment,
+ FileAttachmentContainer,
+ FileAttachmentFont,
+ FileDescription,
+ FilePlayerContainer,
+ FileTitle,
+ ImageContainer,
+ Spacer,
+ StyledCardColComment,
+ StyledCardHeaderComment,
+} from "./IssueContent-styles.tsx";
+import { formatDate } from "../../utils/time";
+import { CommentSection } from "../../components/common/Comments/CommentSection";
+import { QSUPPORT_FILE_BASE } from "../../constants/Identifiers.ts";
+import { DisplayHtml } from "../../components/common/TextEditor/DisplayHtml";
+import FileElement from "../../components/common/FileElement";
+import { allCategoryData } from "../../constants/Categories/1stCategories.ts";
+import {
+ Category,
+ getCategoriesFromObject,
+} from "../../components/common/CategoryList/CategoryList.tsx";
+import { getIconsFromObject } from "../../constants/Categories/CategoryFunctions.ts";
+
+export function formatBytes(bytes, decimals = 2) {
+ if (bytes === 0) return "0 Bytes";
+
+ const k = 1024;
+ const dm = decimals < 0 ? 0 : decimals;
+ const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+}
+
+export const IssueContent = () => {
+ const { name, id } = useParams();
+ const [isExpandedDescription, setIsExpandedDescription] =
+ useState(false);
+ const [descriptionHeight, setDescriptionHeight] = useState(
+ null
+ );
+ const [icon, setIcon] = useState("");
+ const userAvatarHash = useSelector(
+ (state: RootState) => state.global.userAvatarHash
+ );
+ const contentRef = useRef(null);
+
+ const avatarUrl = useMemo(() => {
+ let url = "";
+ if (name && userAvatarHash[name]) {
+ url = userAvatarHash[name];
+ }
+
+ return url;
+ }, [userAvatarHash, name]);
+ const navigate = useNavigate();
+ const theme = useTheme();
+
+ const [fileData, setFileData] = useState(null);
+ const [playlistData, setPlaylistData] = useState(null);
+
+ const hashMapVideos = useSelector(
+ (state: RootState) => state.file.hashMapFiles
+ );
+ const videoReference = useMemo(() => {
+ if (!fileData) return null;
+ const { videoReference } = fileData;
+ if (
+ videoReference?.identifier &&
+ videoReference?.name &&
+ videoReference?.service
+ ) {
+ return videoReference;
+ } else {
+ return null;
+ }
+ }, [fileData]);
+
+ const videoCover = useMemo(() => {
+ if (!fileData) return null;
+ const { videoImage } = fileData;
+ return videoImage || null;
+ }, [fileData]);
+ const dispatch = useDispatch();
+
+ const getVideoData = React.useCallback(async (name: string, id: string) => {
+ try {
+ if (!name || !id) return;
+ dispatch(setIsLoadingGlobal(true));
+
+ const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QSUPPORT_FILE_BASE}&limit=1&includemetadata=true&reverse=true&excludeblocked=true&name=${name}&exactmatchnames=true&offset=0&identifier=${id}`;
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ const responseDataSearch = await response.json();
+
+ if (responseDataSearch?.length > 0) {
+ let resourceData = responseDataSearch[0];
+ resourceData = {
+ title: resourceData?.metadata?.title,
+ category: resourceData?.metadata?.category,
+ categoryName: resourceData?.metadata?.categoryName,
+ tags: resourceData?.metadata?.tags || [],
+ description: resourceData?.metadata?.description,
+ created: resourceData?.created,
+ updated: resourceData?.updated,
+ user: resourceData.name,
+ videoImage: "",
+ id: resourceData.identifier,
+ };
+
+ const responseData = await qortalRequest({
+ action: "FETCH_QDN_RESOURCE",
+ name: name,
+ service: "DOCUMENT",
+ identifier: id,
+ });
+
+ if (responseData && !responseData.error) {
+ const combinedData = {
+ ...resourceData,
+ ...responseData,
+ };
+ setFileData(combinedData);
+ dispatch(addToHashMap(combinedData));
+ checkforPlaylist(name, id, combinedData?.code);
+ }
+ }
+ } catch (error) {
+ } finally {
+ dispatch(setIsLoadingGlobal(false));
+ }
+ }, []);
+
+ const checkforPlaylist = React.useCallback(async (name, id, code) => {
+ try {
+ if (!name || !id || !code) return;
+
+ const url = `/arbitrary/resources/search?mode=ALL&service=PLAYLIST&description=c:${code}&limit=1&includemetadata=true&reverse=true&excludeblocked=true&name=${name}&exactmatchnames=true&offset=0`;
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ const responseDataSearch = await response.json();
+
+ if (responseDataSearch?.length > 0) {
+ let resourceData = responseDataSearch[0];
+ resourceData = {
+ title: resourceData?.metadata?.title,
+ category: resourceData?.metadata?.category,
+ categoryName: resourceData?.metadata?.categoryName,
+ tags: resourceData?.metadata?.tags || [],
+ description: resourceData?.metadata?.description,
+ created: resourceData?.created,
+ updated: resourceData?.updated,
+ name: resourceData.name,
+ videoImage: "",
+ identifier: resourceData.identifier,
+ service: resourceData.service,
+ };
+
+ const responseData = await qortalRequest({
+ action: "FETCH_QDN_RESOURCE",
+ name: resourceData.name,
+ service: resourceData.service,
+ identifier: resourceData.identifier,
+ });
+
+ if (responseData && !responseData.error) {
+ const combinedData = {
+ ...resourceData,
+ ...responseData,
+ };
+ const videos = [];
+ if (combinedData?.videos) {
+ for (const vid of combinedData.videos) {
+ const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&identifier=${vid.identifier}&limit=1&includemetadata=true&reverse=true&name=${vid.name}&exactmatchnames=true&offset=0`;
+ const response = await fetch(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ const responseDataSearchVid = await response.json();
+
+ if (responseDataSearchVid?.length > 0) {
+ let resourceData2 = responseDataSearchVid[0];
+ videos.push(resourceData2);
+ }
+ }
+ }
+ combinedData.videos = videos;
+ setPlaylistData(combinedData);
+ }
+ }
+ } catch (error) {}
+ }, []);
+
+ React.useEffect(() => {
+ if (name && id) {
+ const existingVideo = hashMapVideos[id];
+
+ if (existingVideo) {
+ setFileData(existingVideo);
+ checkforPlaylist(name, id, existingVideo?.code);
+ } else {
+ getVideoData(name, id);
+ }
+ }
+ }, [id, name]);
+
+ // const getAvatar = React.useCallback(async (author: string) => {
+ // try {
+ // let url = await qortalRequest({
+ // action: 'GET_QDN_RESOURCE_URL',
+ // name: author,
+ // service: 'THUMBNAIL',
+ // identifier: 'qortal_avatar'
+ // })
+
+ // setAvatarUrl(url)
+ // dispatch(setUserAvatarHash({
+ // name: author,
+ // url
+ // }))
+ // } catch (error) { }
+ // }, [])
+
+ // React.useEffect(() => {
+ // if (name && !avatarUrl) {
+ // const existingAvatar = userAvatarHash[name]
+
+ // if (existingAvatar) {
+ // setAvatarUrl(existingAvatar)
+ // } else {
+ // getAvatar(name)
+ // }
+
+ // }
+
+ // }, [name, userAvatarHash])
+
+ useEffect(() => {
+ if (contentRef.current) {
+ const height = contentRef.current.offsetHeight;
+ if (height > 100) {
+ // Assuming 100px is your threshold
+ setDescriptionHeight(100);
+ }
+ }
+ if (fileData) {
+ const icon = getIconsFromObject(fileData);
+ setIcon(icon);
+ }
+ }, [fileData]);
+
+ const categoriesDisplay = useMemo(() => {
+ if (fileData) {
+ const categoryList = getCategoriesFromObject(fileData);
+
+ const categoryNames = categoryList.map((categoryID, index) => {
+ let categoryName: Category;
+ if (index === 0) {
+ categoryName = allCategoryData.category.find(
+ item => item?.id === +categoryList[0]
+ );
+ } else {
+ const subCategories = allCategoryData.subCategories[index - 1];
+ const selectedSubCategory = subCategories[categoryList[index - 1]];
+ if (selectedSubCategory) {
+ categoryName = selectedSubCategory.find(
+ item => item?.id === +categoryList[index]
+ );
+ }
+ }
+ return categoryName?.name;
+ });
+ const filteredCategoryNames = categoryNames.filter(name => name);
+ let categoryDisplay = "";
+ const separator = " > ";
+ filteredCategoryNames.map((name, index) => {
+ categoryDisplay +=
+ index !== filteredCategoryNames.length - 1 ? name + separator : name;
+ });
+ return categoryDisplay;
+ }
+ return "no videodata";
+ }, [fileData]);
+
+ return (
+
+
+
+
+ {icon ? (
+
+ ) : (
+
+ )}
+
+ {fileData?.title}
+
+
+ );
+ })}
+
+
+
+ {descriptionHeight && !isExpandedDescription && (
+ {
+ if (isExpandedDescription) return;
+ setIsExpandedDescription(true);
+ }}
+ />
+ )}
+
+ {fileData?.htmlDescription ? (
+
+ ) : (
+
+ {fileData?.fullDescription}
+
+ )}
+
+ {descriptionHeight && (
+ {
+ setIsExpandedDescription(prev => !prev);
+ }}
+ sx={{
+ fontWeight: "bold",
+ fontSize: "16px",
+ cursor: "pointer",
+ paddingLeft: "15px",
+ paddingTop: "15px",
+ }}
+ >
+ {isExpandedDescription ? "Show less" : "...more"}
+
+ )}
+
+
+ {fileData?.files?.map((file, index) => {
+ return (
+
+ {file.filename}
+
+
+ {formatBytes(file?.size || 0)}
+
+
+
+
+
+
+ );
+ })}
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/state/features/authSlice.ts b/src/state/features/authSlice.ts
new file mode 100644
index 0000000..8f5ee20
--- /dev/null
+++ b/src/state/features/authSlice.ts
@@ -0,0 +1,27 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+
+interface AuthState {
+ user: {
+ address: string;
+ publicKey: string;
+ name?: string;
+ } | null;
+}
+const initialState: AuthState = {
+ user: null
+};
+
+export const authSlice = createSlice({
+ name: 'auth',
+ initialState,
+ reducers: {
+ addUser: (state, action) => {
+ state.user = action.payload;
+ },
+ },
+});
+
+export const { addUser } = authSlice.actions;
+
+export default authSlice.reducer;
\ No newline at end of file
diff --git a/src/state/features/fileSlice.ts b/src/state/features/fileSlice.ts
new file mode 100644
index 0000000..0621c37
--- /dev/null
+++ b/src/state/features/fileSlice.ts
@@ -0,0 +1,188 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { RootState } from "../store";
+
+interface GlobalState {
+ files: Video[];
+ filteredFiles: Video[];
+ hashMapFiles: Record;
+ countNewFiles: number;
+ isFiltering: boolean;
+ filterValue: string;
+ filterType: string;
+ filterSearch: string;
+ filterName: string;
+ selectedCategoryFiles: any[];
+ editFileProperties: any;
+ editPlaylistProperties: any;
+}
+const initialState: GlobalState = {
+ files: [],
+ filteredFiles: [],
+ hashMapFiles: {},
+ countNewFiles: 0,
+ isFiltering: false,
+ filterValue: "",
+ filterType: "videos",
+ filterSearch: "",
+ filterName: "",
+ selectedCategoryFiles: [null, null, null, null],
+ editFileProperties: null,
+ editPlaylistProperties: null,
+};
+
+export interface Video {
+ title: string;
+ description: string;
+ created: number | string;
+ user: string;
+ service?: string;
+ videoImage?: string;
+ id: string;
+ category?: string;
+ categoryName?: string;
+ tags?: string[];
+ updated?: number | string;
+ isValid?: boolean;
+ code?: string;
+}
+
+export const fileSlice = createSlice({
+ name: "file",
+ initialState,
+ reducers: {
+ setEditFile: (state, action) => {
+ state.editFileProperties = action.payload;
+ },
+ setEditPlaylist: (state, action) => {
+ state.editPlaylistProperties = action.payload;
+ },
+ changeFilterType: (state, action) => {
+ state.filterType = action.payload;
+ },
+ changefilterSearch: (state, action) => {
+ state.filterSearch = action.payload;
+ },
+ changefilterName: (state, action) => {
+ state.filterName = action.payload;
+ },
+ setCountNewFiles: (state, action) => {
+ state.countNewFiles = action.payload;
+ },
+ addFiles: (state, action) => {
+ state.files = action.payload;
+ },
+ addFilteredFiles: (state, action) => {
+ state.filteredFiles = action.payload;
+ },
+ removeFile: (state, action) => {
+ const idToDelete = action.payload;
+ state.files = state.files.filter(item => item.id !== idToDelete);
+ state.filteredFiles = state.filteredFiles.filter(
+ item => item.id !== idToDelete
+ );
+ },
+ addFileToBeginning: (state, action) => {
+ state.files.unshift(action.payload);
+ },
+ clearFileList: state => {
+ state.files = [];
+ },
+ updateFile: (state, action) => {
+ const { id } = action.payload;
+ const index = state.files.findIndex(video => video.id === id);
+ if (index !== -1) {
+ state.files[index] = { ...action.payload };
+ }
+ const index2 = state.filteredFiles.findIndex(video => video.id === id);
+ if (index2 !== -1) {
+ state.filteredFiles[index2] = { ...action.payload };
+ }
+ },
+ addToHashMap: (state, action) => {
+ const video = action.payload;
+ state.hashMapFiles[video.id] = video;
+ },
+ updateInHashMap: (state, action) => {
+ const { id } = action.payload;
+ const video = action.payload;
+ state.hashMapFiles[id] = { ...video };
+ },
+ removeFromHashMap: (state, action) => {
+ const idToDelete = action.payload;
+ delete state.hashMapFiles[idToDelete];
+ },
+ addArrayToHashMap: (state, action) => {
+ const videos = action.payload;
+ videos.forEach((video: Video) => {
+ state.hashMapFiles[video.id] = video;
+ });
+ },
+ upsertFiles: (state, action) => {
+ action.payload.forEach((video: Video) => {
+ const index = state.files.findIndex(p => p.id === video.id);
+ if (index !== -1) {
+ state.files[index] = video;
+ } else {
+ state.files.push(video);
+ }
+ });
+ },
+ upsertFilteredFiles: (state, action) => {
+ action.payload.forEach((video: Video) => {
+ const index = state.filteredFiles.findIndex(p => p.id === video.id);
+ if (index !== -1) {
+ state.filteredFiles[index] = video;
+ } else {
+ state.filteredFiles.push(video);
+ }
+ });
+ },
+ upsertFilesBeginning: (state, action) => {
+ action.payload.reverse().forEach((video: Video) => {
+ const index = state.files.findIndex(p => p.id === video.id);
+ if (index !== -1) {
+ state.files[index] = video;
+ } else {
+ state.files.unshift(video);
+ }
+ });
+ },
+ setIsFiltering: (state, action) => {
+ state.isFiltering = action.payload;
+ },
+ setFilterValue: (state, action) => {
+ state.filterValue = action.payload;
+ },
+ blockUser: (state, action) => {
+ const username = action.payload;
+ state.files = state.files.filter(item => item.user !== username);
+ },
+ },
+});
+
+export const {
+ setCountNewFiles,
+ addFiles,
+ addFilteredFiles,
+ removeFile,
+ addFileToBeginning,
+ updateFile,
+ addToHashMap,
+ updateInHashMap,
+ removeFromHashMap,
+ addArrayToHashMap,
+ upsertFiles,
+ upsertFilteredFiles,
+ upsertFilesBeginning,
+ setIsFiltering,
+ setFilterValue,
+ clearFileList,
+ changeFilterType,
+ changefilterSearch,
+ changefilterName,
+ blockUser,
+ setEditFile,
+ setEditPlaylist,
+} = fileSlice.actions;
+
+export default fileSlice.reducer;
diff --git a/src/state/features/globalSlice.ts b/src/state/features/globalSlice.ts
new file mode 100644
index 0000000..13f3415
--- /dev/null
+++ b/src/state/features/globalSlice.ts
@@ -0,0 +1,79 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+interface GlobalState {
+ isLoadingGlobal: boolean;
+ downloads: any;
+ userAvatarHash: Record;
+ publishNames: string[] | null;
+ videoPlaying: any | null;
+ totalFilesPublished: number;
+ totalNamesPublished: number;
+ filesPerNamePublished: number;
+}
+const initialState: GlobalState = {
+ isLoadingGlobal: false,
+ downloads: {},
+ userAvatarHash: {},
+ publishNames: null,
+ videoPlaying: null,
+ totalFilesPublished: null,
+ totalNamesPublished: null,
+ filesPerNamePublished: null,
+};
+
+export const globalSlice = createSlice({
+ name: "global",
+ initialState,
+ reducers: {
+ setIsLoadingGlobal: (state, action) => {
+ state.isLoadingGlobal = action.payload;
+ },
+ setAddToDownloads: (state, action) => {
+ const download = action.payload;
+ state.downloads[download.identifier] = download;
+ },
+ updateDownloads: (state, action) => {
+ const { identifier } = action.payload;
+ const download = action.payload;
+ state.downloads[identifier] = {
+ ...state.downloads[identifier],
+ ...download,
+ };
+ },
+ setUserAvatarHash: (state, action) => {
+ const avatar = action.payload;
+ if (avatar?.name && avatar?.url) {
+ state.userAvatarHash[avatar?.name] = avatar?.url;
+ }
+ },
+ addPublishNames: (state, action) => {
+ state.publishNames = action.payload;
+ },
+ setVideoPlaying: (state, action) => {
+ state.videoPlaying = action.payload;
+ },
+ setTotalFilesPublished: (state, action) => {
+ state.totalFilesPublished = action.payload;
+ },
+ setTotalNamesPublished: (state, action) => {
+ state.totalNamesPublished = action.payload;
+ },
+ setFilesPerNamePublished: (state, action) => {
+ state.filesPerNamePublished = action.payload;
+ },
+ },
+});
+
+export const {
+ setIsLoadingGlobal,
+ setAddToDownloads,
+ updateDownloads,
+ setUserAvatarHash,
+ addPublishNames,
+ setVideoPlaying,
+ setTotalFilesPublished,
+ setTotalNamesPublished,
+ setFilesPerNamePublished,
+} = globalSlice.actions;
+
+export default globalSlice.reducer;
diff --git a/src/state/features/notificationsSlice.ts b/src/state/features/notificationsSlice.ts
new file mode 100644
index 0000000..af074e2
--- /dev/null
+++ b/src/state/features/notificationsSlice.ts
@@ -0,0 +1,73 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface AlertTypes {
+ alertSuccess: string
+ alertError: string
+ alertInfo: string
+}
+
+interface InitialState {
+ alertTypes: AlertTypes
+}
+
+const initialState: InitialState = {
+ alertTypes: {
+ alertSuccess: '',
+ alertError: '',
+ alertInfo: ''
+ }
+}
+
+export const notificationsSlice = createSlice({
+ name: "notifications",
+ initialState,
+ reducers: {
+ setNotification: (
+ state: InitialState,
+ action: PayloadAction<{ alertType: string; msg: string }>
+ ) => {
+ if (action.payload.alertType === "success") {
+ return {
+ ...state,
+ alertTypes: {
+ ...state.alertTypes,
+ alertSuccess: action.payload.msg,
+ },
+ };
+ } else if (action.payload.alertType === "error") {
+ return {
+ ...state,
+ alertTypes: {
+ ...state.alertTypes,
+ alertError: action.payload.msg,
+ },
+ };
+ } else if (action.payload.alertType === "info") {
+ return {
+ ...state,
+ alertTypes: {
+ ...state.alertTypes,
+ alertInfo: action.payload.msg,
+ },
+ };
+ }
+ return state;
+ },
+ removeNotification: (state: InitialState) => {
+ return {
+ ...state,
+ alertTypes: {
+ ...state.alertTypes,
+ alertSuccess: '',
+ alertError: '',
+ alertInfo: ''
+ }
+ }
+ },
+ },
+});
+
+export const { setNotification, removeNotification } =
+ notificationsSlice.actions;
+
+export default notificationsSlice.reducer;
diff --git a/src/state/store.ts b/src/state/store.ts
new file mode 100644
index 0000000..f99bd05
--- /dev/null
+++ b/src/state/store.ts
@@ -0,0 +1,27 @@
+import { configureStore } from "@reduxjs/toolkit";
+import notificationsReducer from "./features/notificationsSlice";
+import authReducer from "./features/authSlice";
+import globalReducer from "./features/globalSlice";
+import fileReducer from "./features/fileSlice.ts";
+
+export const store = configureStore({
+ reducer: {
+ notifications: notificationsReducer,
+ auth: authReducer,
+ global: globalReducer,
+ file: fileReducer,
+ },
+ middleware: getDefaultMiddleware =>
+ getDefaultMiddleware({
+ serializableCheck: false,
+ }),
+ preloadedState: undefined, // optional, can be any valid state object
+});
+
+// Define the RootState type, which is the type of the entire Redux state tree.
+// This is useful when you need to access the state in a component or elsewhere.
+export type RootState = ReturnType;
+
+// Define the AppDispatch type, which is the type of the Redux store's dispatch function.
+// This is useful when you need to dispatch an action in a component or elsewhere.
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/styles/fonts/Cairo.ttf b/src/styles/fonts/Cairo.ttf
new file mode 100644
index 0000000..5bdb2a9
Binary files /dev/null and b/src/styles/fonts/Cairo.ttf differ
diff --git a/src/styles/fonts/Cambon-Light.ttf b/src/styles/fonts/Cambon-Light.ttf
new file mode 100644
index 0000000..e65b385
Binary files /dev/null and b/src/styles/fonts/Cambon-Light.ttf differ
diff --git a/src/styles/fonts/Catamaran.ttf b/src/styles/fonts/Catamaran.ttf
new file mode 100644
index 0000000..9053c6d
Binary files /dev/null and b/src/styles/fonts/Catamaran.ttf differ
diff --git a/src/styles/fonts/Karla.ttf b/src/styles/fonts/Karla.ttf
new file mode 100644
index 0000000..1e1fc9d
Binary files /dev/null and b/src/styles/fonts/Karla.ttf differ
diff --git a/src/styles/fonts/Livvic.ttf b/src/styles/fonts/Livvic.ttf
new file mode 100644
index 0000000..f477b28
Binary files /dev/null and b/src/styles/fonts/Livvic.ttf differ
diff --git a/src/styles/fonts/Merriweather Sans.ttf b/src/styles/fonts/Merriweather Sans.ttf
new file mode 100644
index 0000000..dea514c
Binary files /dev/null and b/src/styles/fonts/Merriweather Sans.ttf differ
diff --git a/src/styles/fonts/Oxygen.ttf b/src/styles/fonts/Oxygen.ttf
new file mode 100644
index 0000000..d03f43a
Binary files /dev/null and b/src/styles/fonts/Oxygen.ttf differ
diff --git a/src/styles/fonts/ProximaNova.otf b/src/styles/fonts/ProximaNova.otf
new file mode 100644
index 0000000..27c8d8f
Binary files /dev/null and b/src/styles/fonts/ProximaNova.otf differ
diff --git a/src/styles/fonts/Raleway.ttf b/src/styles/fonts/Raleway.ttf
new file mode 100644
index 0000000..424fb0e
Binary files /dev/null and b/src/styles/fonts/Raleway.ttf differ
diff --git a/src/styles/theme.tsx b/src/styles/theme.tsx
new file mode 100644
index 0000000..996c6cd
--- /dev/null
+++ b/src/styles/theme.tsx
@@ -0,0 +1,184 @@
+import { createTheme } from "@mui/material/styles";
+
+const commonThemeOptions = {
+ typography: {
+ fontFamily: [
+ "Cambon Light",
+ "Raleway, sans-serif",
+ "Karla",
+ "Merriweather Sans",
+ "Proxima Nova",
+ "Oxygen",
+ "Catamaran",
+ "Cairo",
+ "Arial",
+ ].join(","),
+ h1: {
+ fontSize: "2rem",
+ fontWeight: 600,
+ },
+ h2: {
+ fontSize: "1.75rem",
+ fontWeight: 500,
+ },
+ h3: {
+ fontSize: "1.5rem",
+ fontWeight: 500,
+ },
+ h4: {
+ fontSize: "1.25rem",
+ fontWeight: 500,
+ },
+ h5: {
+ fontSize: "1rem",
+ fontWeight: 500,
+ },
+ h6: {
+ fontSize: "0.875rem",
+ fontWeight: 500,
+ },
+ body1: {
+ fontSize: "23px",
+ fontFamily: "Raleway",
+ fontWeight: 400,
+ lineHeight: 1.5,
+ letterSpacing: "0.5px",
+ },
+
+ body2: {
+ fontSize: "18px",
+ fontFamily: "Raleway, Arial",
+ fontWeight: 400,
+ lineHeight: 1.4,
+ letterSpacing: "0.2px",
+ },
+ },
+ spacing: 8,
+ shape: {
+ borderRadius: 4,
+ },
+ breakpoints: {
+ values: {
+ xs: 0,
+ sm: 600,
+ md: 900,
+ lg: 1200,
+ xl: 1536,
+ },
+ },
+ components: {
+ MuiButton: {
+ styleOverrides: {
+ root: {
+ backgroundColor: "inherit",
+ transition: "filter 0.3s ease-in-out",
+ "&:hover": {
+ filter: "brightness(1.1)",
+ },
+ },
+ },
+ defaultProps: {
+ disableElevation: true,
+ disableRipple: true,
+ },
+ },
+ },
+};
+
+const lightTheme = createTheme({
+ ...commonThemeOptions,
+ palette: {
+ mode: "light",
+ primary: {
+ main: "#ffffff",
+ dark: "#F5F5F5",
+ light: "#FCFCFC",
+ },
+ secondary: {
+ main: "#417Ed4",
+ dark: "#3e74c1",
+ },
+ background: {
+ default: "#fcfcfc",
+ paper: "#F5F5F5",
+ },
+ text: {
+ primary: "#000000",
+ secondary: "#525252",
+ },
+ },
+ components: {
+ MuiCard: {
+ styleOverrides: {
+ root: {
+ boxShadow:
+ "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;",
+ borderRadius: "8px",
+ transition: "all 0.3s ease-in-out",
+ "&:hover": {
+ cursor: "pointer",
+ boxShadow:
+ "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;",
+ },
+ },
+ },
+ },
+ MuiIcon: {
+ defaultProps: {
+ style: {
+ color: "#000000",
+ },
+ },
+ },
+ },
+});
+
+const darkTheme = createTheme({
+ ...commonThemeOptions,
+ palette: {
+ mode: "dark",
+ primary: {
+ main: "#01a9e9", //
+ dark: "#008fcd", //
+ light: "#44c4ff", //
+ },
+ secondary: {
+ main: "#007FFF", // Electric blue
+ dark: "#0059B2", // Darker shade of electric blue
+ light: "#3399FF", // Lighter shade of electric blue
+ },
+ background: {
+ default: "#1C1C1C", // Deep space black
+ paper: "#342F41", // Dark cyberpunk-style purple
+ },
+ text: {
+ primary: "#ffffff",
+ secondary: "#b3b3b3",
+ },
+ },
+ components: {
+ MuiCard: {
+ styleOverrides: {
+ root: {
+ boxShadow: "none",
+ borderRadius: "8px",
+ transition: "all 0.3s ease-in-out",
+ "&:hover": {
+ cursor: "pointer",
+ boxShadow:
+ "0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);",
+ },
+ },
+ },
+ },
+ MuiIcon: {
+ defaultProps: {
+ style: {
+ color: "#ffffff",
+ },
+ },
+ },
+ },
+});
+
+export { lightTheme, darkTheme };
diff --git a/src/test/download.gif b/src/test/download.gif
new file mode 100644
index 0000000..cf602ed
Binary files /dev/null and b/src/test/download.gif differ
diff --git a/src/test/mockimg.jpg b/src/test/mockimg.jpg
new file mode 100644
index 0000000..6ed4812
Binary files /dev/null and b/src/test/mockimg.jpg differ
diff --git a/src/utils/checkStructure.ts b/src/utils/checkStructure.ts
new file mode 100644
index 0000000..95eb45f
--- /dev/null
+++ b/src/utils/checkStructure.ts
@@ -0,0 +1,7 @@
+export const checkStructure = (content: any) => {
+ let isValid = true
+
+ return isValid
+}
+
+
diff --git a/src/utils/extractTextFromSlate.ts b/src/utils/extractTextFromSlate.ts
new file mode 100644
index 0000000..7686787
--- /dev/null
+++ b/src/utils/extractTextFromSlate.ts
@@ -0,0 +1,14 @@
+export function extractTextFromSlate(nodes: any) {
+ if(!Array.isArray(nodes)) return ""
+ let text = "";
+
+ for (const node of nodes) {
+ if (node.text) {
+ text += node.text;
+ } else if (node.children) {
+ text += extractTextFromSlate(node.children);
+ }
+ }
+
+ return text;
+ }
\ No newline at end of file
diff --git a/src/utils/fetchVideos.ts b/src/utils/fetchVideos.ts
new file mode 100644
index 0000000..299562b
--- /dev/null
+++ b/src/utils/fetchVideos.ts
@@ -0,0 +1,36 @@
+import { checkStructure } from './checkStructure'
+
+export const fetchAndEvaluateVideos = async (data: any) => {
+ const getVideo = async () => {
+ const { user, videoId, content } = data
+ let obj: any = {
+ ...content,
+ isValid: false
+ }
+
+ if (!user || !videoId) return obj
+
+ try {
+
+ const responseData = await qortalRequest({
+ action: 'FETCH_QDN_RESOURCE',
+ name: user,
+ service: content?.service || 'DOCUMENT',
+ identifier: videoId
+ })
+ if (checkStructure(responseData)) {
+ obj = {
+ ...content,
+ ...responseData,
+ isValid: true
+ }
+ }
+ return obj
+ } catch (error: any) {
+ throw new Error(error?.message || 'error')
+ }
+ }
+
+ const res = await getVideo()
+ return res
+}
diff --git a/src/utils/queue.ts b/src/utils/queue.ts
new file mode 100644
index 0000000..4869da6
--- /dev/null
+++ b/src/utils/queue.ts
@@ -0,0 +1,43 @@
+type QueueItem = {
+ request: () => Promise;
+ resolve: (value: any | PromiseLike) => void;
+ reject: (reason?: any) => void;
+};
+
+export class RequestQueue {
+ private queue: QueueItem[];
+ private maxConcurrent: number;
+ private currentConcurrent: number;
+
+ constructor(maxConcurrent = 5) {
+ this.queue = [];
+ this.maxConcurrent = maxConcurrent;
+ this.currentConcurrent = 0;
+ }
+
+ async push(request: () => Promise): Promise {
+ return new Promise((resolve, reject) => {
+ this.queue.push({
+ request,
+ resolve,
+ reject,
+ });
+ this.checkQueue();
+ });
+ }
+
+ private checkQueue(): void {
+ if (this.queue.length === 0 || this.currentConcurrent >= this.maxConcurrent) return;
+
+ const { request, resolve, reject } = this.queue.shift() as QueueItem;
+ this.currentConcurrent++;
+
+ request()
+ .then(resolve)
+ .catch(reject)
+ .finally(() => {
+ this.currentConcurrent--;
+ this.checkQueue();
+ });
+ }
+}
diff --git a/src/utils/time.ts b/src/utils/time.ts
new file mode 100644
index 0000000..7425aea
--- /dev/null
+++ b/src/utils/time.ts
@@ -0,0 +1,46 @@
+import moment from 'moment'
+
+export function formatTimestamp(timestamp: number): string {
+ const now = moment()
+ const timestampMoment = moment(timestamp)
+ const elapsedTime = now.diff(timestampMoment, 'minutes')
+
+ if (elapsedTime < 1) {
+ return 'Just now'
+ } else if (elapsedTime < 60) {
+ return `${elapsedTime}m`
+ } else if (elapsedTime < 1440) {
+ return `${Math.floor(elapsedTime / 60)}h`
+ } else {
+ return timestampMoment.format('MMM D')
+ }
+}
+
+export function formatTimestampSeconds(timestamp: number): string {
+ const now = moment()
+ const timestampMoment = moment.unix(timestamp)
+ const elapsedTime = now.diff(timestampMoment, 'minutes')
+
+ if (elapsedTime < 1) {
+ return 'Just now'
+ } else if (elapsedTime < 60) {
+ return `${elapsedTime}m`
+ } else if (elapsedTime < 1440) {
+ return `${Math.floor(elapsedTime / 60)}h`
+ } else {
+ return timestampMoment.format('MMM D')
+ }
+}
+
+
+
+export const formatDate = (unixTimestamp: number): string => {
+ const date = moment(unixTimestamp, 'x').fromNow()
+
+ return date
+}
+export const formatDateSeconds = (unixTimestamp: number): string => {
+ const date = moment.unix(unixTimestamp).fromNow();
+
+ return date
+}
\ No newline at end of file
diff --git a/src/utils/toBase64.ts b/src/utils/toBase64.ts
new file mode 100644
index 0000000..3ab61ad
--- /dev/null
+++ b/src/utils/toBase64.ts
@@ -0,0 +1,174 @@
+export const toBase64 = (file: File): Promise =>
+ new Promise((resolve, reject) => {
+ const reader = new FileReader()
+ reader.readAsDataURL(file)
+
+ reader.onload = () => {
+ const result = reader.result
+ reader.onload = null // remove onload handler
+ reader.onerror = null // remove onerror handler
+ resolve(result)
+ }
+
+ reader.onerror = (error) => {
+ reader.onload = null // remove onload handler
+ reader.onerror = null // remove onerror handler
+ reject(error)
+ }
+ })
+
+export function objectToBase64(obj: any) {
+ // Step 1: Convert the object to a JSON string
+ const jsonString = JSON.stringify(obj)
+
+ // Step 2: Create a Blob from the JSON string
+ const blob = new Blob([jsonString], { type: 'application/json' })
+
+ // Step 3: Create a FileReader to read the Blob as a base64-encoded string
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader()
+ reader.onloadend = () => {
+ if (typeof reader.result === 'string') {
+ // Remove 'data:application/json;base64,' prefix
+ const base64 = reader.result.replace(
+ 'data:application/json;base64,',
+ ''
+ )
+ resolve(base64)
+ } else {
+ reject(new Error('Failed to read the Blob as a base64-encoded string'))
+ }
+ }
+ reader.onerror = () => {
+ reject(reader.error)
+ }
+ reader.readAsDataURL(blob)
+ })
+}
+
+export function objectToUint8Array(obj: any) {
+ // Convert the object to a JSON string
+ const jsonString = JSON.stringify(obj)
+
+ // Encode the JSON string as a byte array using TextEncoder
+ const encoder = new TextEncoder()
+ const byteArray = encoder.encode(jsonString)
+
+ // Create a new Uint8Array and set its content to the encoded byte array
+ const uint8Array = new Uint8Array(byteArray)
+
+ return uint8Array
+}
+
+export function uint8ArrayToBase64(uint8Array: Uint8Array): string {
+ const length = uint8Array.length
+ let binaryString = ''
+ const chunkSize = 1024 * 1024 // Process 1MB at a time
+
+ for (let i = 0; i < length; i += chunkSize) {
+ const chunkEnd = Math.min(i + chunkSize, length)
+ const chunk = uint8Array.subarray(i, chunkEnd)
+ binaryString += Array.from(chunk, (byte) => String.fromCharCode(byte)).join(
+ ''
+ )
+ }
+
+ return btoa(binaryString)
+}
+
+export function objectToUint8ArrayFromResponse(obj: any) {
+ const len = Object.keys(obj).length
+ const result = new Uint8Array(len)
+
+ for (let i = 0; i < len; i++) {
+ result[i] = obj[i]
+ }
+
+ return result
+}
+// export function uint8ArrayToBase64(arrayBuffer: Uint8Array): string {
+// let binary = ''
+// const bytes = new Uint8Array(arrayBuffer)
+// const len = bytes.length
+
+// for (let i = 0; i < len; i++) {
+// binary += String.fromCharCode(bytes[i])
+// }
+
+// return btoa(binary)
+// }
+
+export function base64ToUint8Array(base64: string) {
+ const binaryString = atob(base64)
+ const len = binaryString.length
+ const bytes = new Uint8Array(len)
+
+ for (let i = 0; i < len; i++) {
+ bytes[i] = binaryString.charCodeAt(i)
+ }
+
+ return bytes
+}
+
+export function uint8ArrayToObject(uint8Array: Uint8Array) {
+ // Decode the byte array using TextDecoder
+ const decoder = new TextDecoder()
+ const jsonString = decoder.decode(uint8Array)
+
+ // Convert the JSON string back into an object
+ const obj = JSON.parse(jsonString)
+
+ return obj
+}
+
+export function processFileInChunks(file: File): Promise {
+ return new Promise(
+ (resolve: (value: Uint8Array) => void, reject: (reason?: any) => void) => {
+ const reader = new FileReader()
+
+ reader.onload = function (event: ProgressEvent) {
+ const arrayBuffer = event.target?.result as ArrayBuffer
+ const uint8Array = new Uint8Array(arrayBuffer)
+ resolve(uint8Array)
+ }
+
+ reader.onerror = function (error: ProgressEvent) {
+ reject(error)
+ }
+
+ reader.readAsArrayBuffer(file)
+ }
+ )
+}
+
+// export async function processFileInChunks(file: File, chunkSize = 1024 * 1024): Promise {
+// const fileStream = file.stream();
+// const reader = fileStream.getReader();
+// const totalLength = file.size;
+
+// if (totalLength <= 0 || isNaN(totalLength)) {
+// throw new Error('Invalid file size');
+// }
+
+// const combinedArray = new Uint8Array(totalLength);
+// let offset = 0;
+
+// while (offset < totalLength) {
+// const { value, done } = await reader.read();
+
+// if (done) {
+// break;
+// }
+
+// const chunk = new Uint8Array(value.buffer, value.byteOffset, value.byteLength);
+
+// // Set elements one by one instead of using combinedArray.set(chunk, offset)
+// for (let i = 0; i < chunk.length; i++) {
+// combinedArray[offset + i] = chunk[i];
+// }
+
+// offset += chunk.length;
+// }
+
+// return combinedArray;
+// }
diff --git a/src/utils/utilFunctions.ts b/src/utils/utilFunctions.ts
new file mode 100644
index 0000000..5b12a4c
--- /dev/null
+++ b/src/utils/utilFunctions.ts
@@ -0,0 +1,20 @@
+export const objectIsNull = (variable: object) => {
+ return Object.is(variable, null);
+};
+export const objectIsUndefined = (variable: object) => {
+ return Object.is(variable, undefined);
+};
+
+export const printVar = (variable: object) => {
+ if (objectIsNull(variable)) {
+ console.log("variable is NULL");
+ return;
+ }
+ if (objectIsUndefined(variable)) {
+ console.log("variable is UNDEFINED");
+ return;
+ }
+
+ const [key, value] = Object.entries(variable)[0];
+ console.log(key, " is: ", value);
+};
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/src/wrappers/DownloadWrapper.tsx b/src/wrappers/DownloadWrapper.tsx
new file mode 100644
index 0000000..4f481a4
--- /dev/null
+++ b/src/wrappers/DownloadWrapper.tsx
@@ -0,0 +1,213 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
+
+import {
+ setAddToDownloads,
+ updateDownloads
+} from '../state/features/globalSlice'
+
+import { DownloadTaskManager } from '../components/common/DownloadTaskManager'
+import { RootState } from '../state/store'
+
+interface Props {
+ children: React.ReactNode
+}
+
+
+const defaultValues: MyContextInterface = {
+ downloadVideo: () => {}
+}
+interface IDownloadVideoParams {
+ name: string
+ service: string
+ identifier: string
+ properties: any
+}
+interface MyContextInterface {
+ downloadVideo: ({
+ name,
+ service,
+ identifier,
+ properties
+ }: IDownloadVideoParams) => void
+}
+export const MyContext = React.createContext(defaultValues)
+
+const DownloadWrapper: React.FC = ({ children }) => {
+ const dispatch = useDispatch()
+ const downloads = useSelector((state: RootState) => state.global?.downloads);
+
+
+ const fetchResource = async ({ name, service, identifier }: any) => {
+ try {
+ await qortalRequest({
+ action: 'GET_QDN_RESOURCE_PROPERTIES',
+ name,
+ service,
+ identifier
+ })
+ } catch (error) {}
+ }
+
+ const fetchVideoUrl = async ({ name, service, identifier }: any) => {
+ try {
+ fetchResource({ name, service, identifier })
+ let url = await qortalRequest({
+ action: 'GET_QDN_RESOURCE_URL',
+ service: service,
+ name: name,
+ identifier: identifier
+ })
+ if (url) {
+ dispatch(
+ updateDownloads({
+ name,
+ service,
+ identifier,
+ url
+ })
+ )
+ }
+ } catch (error) {}
+ }
+
+ const performDownload = ({
+ name,
+ service,
+ identifier,
+ properties
+ }: IDownloadVideoParams) => {
+ if(downloads[identifier]) return
+ dispatch(
+ setAddToDownloads({
+ name,
+ service,
+ identifier,
+ properties
+ })
+ )
+
+ let isCalling = false
+ let percentLoaded = 0
+ let timer = 24
+ const intervalId = setInterval(async () => {
+ if (isCalling) return
+ isCalling = true
+ const res = await qortalRequest({
+ action: 'GET_QDN_RESOURCE_STATUS',
+ name: name,
+ service: service,
+ identifier: identifier
+ })
+ if(res?.status === 'NOT_PUBLISHED'){
+ dispatch(
+ updateDownloads({
+ name,
+ service,
+ identifier,
+ status: res
+ })
+ )
+ clearInterval(intervalId)
+ }
+ isCalling = false
+ if (res.localChunkCount) {
+ if (res.percentLoaded) {
+ if (
+ res.percentLoaded === percentLoaded &&
+ res.percentLoaded !== 100
+ ) {
+ timer = timer - 5
+ } else {
+ timer = 24
+ }
+ if (timer < 0) {
+ timer = 24
+ isCalling = true
+ dispatch(
+ updateDownloads({
+ name,
+ service,
+ identifier,
+ status: {
+ ...res,
+ status: 'REFETCHING'
+ }
+ })
+ )
+ setTimeout(() => {
+ isCalling = false
+ fetchResource({
+ name,
+ service,
+ identifier
+ })
+ }, 25000)
+ return
+ }
+ percentLoaded = res.percentLoaded
+ }
+ dispatch(
+ updateDownloads({
+ name,
+ service,
+ identifier,
+ status: res
+ })
+ )
+ }
+
+ // check if progress is 100% and clear interval if true
+ if (res?.status === 'READY') {
+ clearInterval(intervalId)
+ dispatch(
+ updateDownloads({
+ name,
+ service,
+ identifier,
+ status: res
+ })
+ )
+ }
+ }, 5000) // 1 second interval
+
+ fetchVideoUrl({
+ name,
+ service,
+ identifier
+ })
+ }
+
+ const downloadVideo = async ({
+ name,
+ service,
+ identifier,
+ properties
+ }: IDownloadVideoParams) => {
+ try {
+
+
+ performDownload({
+ name,
+ service,
+ identifier,
+ properties
+ })
+ return 'addedToList'
+ } catch (error) {
+ console.error(error)
+ }
+ }
+
+ return (
+ <>
+
+ {/* */}
+ {children}
+
+
+ )
+}
+
+export default DownloadWrapper
diff --git a/src/wrappers/GlobalWrapper.tsx b/src/wrappers/GlobalWrapper.tsx
new file mode 100644
index 0000000..ca8da7f
--- /dev/null
+++ b/src/wrappers/GlobalWrapper.tsx
@@ -0,0 +1,173 @@
+import React, {
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { addUser } from "../state/features/authSlice";
+import NavBar from "../components/layout/Navbar/Navbar";
+import PageLoader from "../components/common/PageLoader";
+import { RootState } from "../state/store";
+import { setUserAvatarHash } from "../state/features/globalSlice";
+import { VideoPlayerGlobal } from "../components/common/VideoPlayerGlobal";
+import { Rnd } from "react-rnd";
+import { RequestQueue } from "../utils/queue";
+import { EditIssue } from "../components/EditIssue/EditIssue.tsx";
+import { EditPlaylist } from "../components/EditPlaylist/EditPlaylist";
+import ConsentModal from "../components/common/ConsentModal";
+
+interface Props {
+ children: React.ReactNode;
+ setTheme: (val: string) => void;
+}
+
+let timer: number | null = null;
+
+export const queue = new RequestQueue();
+
+const GlobalWrapper: React.FC = ({ children, setTheme }) => {
+ const dispatch = useDispatch();
+ const isDragging = useRef(false);
+ const [userAvatar, setUserAvatar] = useState("");
+ const user = useSelector((state: RootState) => state.auth.user);
+ const videoPlaying = useSelector(
+ (state: RootState) => state.global.videoPlaying
+ );
+ const username = useMemo(() => {
+ if (!user?.name) return "";
+
+ return user.name;
+ }, [user]);
+ const getAvatar = React.useCallback(
+ async (author: string) => {
+ try {
+ const url = await qortalRequest({
+ action: "GET_QDN_RESOURCE_URL",
+ name: author,
+ service: "THUMBNAIL",
+ identifier: "qortal_avatar",
+ });
+ if (url) {
+ setUserAvatar(url);
+ dispatch(
+ setUserAvatarHash({
+ name: author,
+ url,
+ })
+ );
+ }
+ } catch (error) {
+ /* empty */
+ }
+ },
+ [dispatch]
+ );
+
+ useEffect(() => {
+ if (!username) return;
+
+ getAvatar(username);
+ }, [username, getAvatar]);
+
+ const { isLoadingGlobal } = useSelector((state: RootState) => state.global);
+
+ async function getNameInfo(address: string) {
+ const response = await qortalRequest({
+ action: "GET_ACCOUNT_NAMES",
+ address: address,
+ });
+ const nameData = response;
+
+ if (nameData?.length > 0) {
+ return nameData[0].name;
+ } else {
+ return "";
+ }
+ }
+
+ const askForAccountInformation = React.useCallback(async () => {
+ try {
+ const account = await qortalRequest({
+ action: "GET_USER_ACCOUNT",
+ });
+
+ const name = await getNameInfo(account.address);
+ dispatch(addUser({ ...account, name }));
+ } catch (error) {
+ console.error(error);
+ }
+ }, [dispatch]);
+
+ React.useEffect(() => {
+ askForAccountInformation();
+ }, [askForAccountInformation]);
+
+ const onDragStart = () => {
+ timer = Date.now();
+ isDragging.current = true;
+ };
+
+ const handleStopDrag = async () => {
+ const time = Date.now();
+ if (timer && time - timer < 300) {
+ isDragging.current = false;
+ } else {
+ isDragging.current = true;
+ }
+ };
+ const onDragStop = () => {
+ handleStopDrag();
+ };
+
+ const checkIfDrag = useCallback(() => {
+ return isDragging.current;
+ }, []);
+
+ return (
+ <>
+ {isLoadingGlobal && }
+
+
+ setTheme(val)}
+ isAuthenticated={!!user?.name}
+ userName={user?.name || ""}
+ userAvatar={userAvatar}
+ authenticate={askForAccountInformation}
+ />
+
+
+ {}}
+ >
+ {videoPlaying && (
+
+ )}
+
+
+ {children}
+
+ );
+};
+
+export default GlobalWrapper;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..80edc1d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "noImplicitAny": false,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": false,
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "noFallthroughCasesInSwitch": true,
+ "strictNullChecks": false,
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..42872c5
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..5c33a21
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ base: ""
+})
+ )}
+