Q-Tube

+ + ); +}; 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..c3e73a8 --- /dev/null +++ b/src/components/layout/Navbar/Navbar-styles.tsx @@ -0,0 +1,125 @@ +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: '55px' +})); +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..fdbe13b --- /dev/null +++ b/src/components/layout/Navbar/Navbar.tsx @@ -0,0 +1,443 @@ +import React, { useState, useRef } from "react"; +import { Box, Button, Input, Popover, useTheme } from "@mui/material"; +import ExitToAppIcon from "@mui/icons-material/ExitToApp"; +import { BlockedNamesModal } from "../../common/BlockedNamesModal/BlockedNamesModal"; +import AddBoxIcon from "@mui/icons-material/AddBox"; + +import { + AvatarContainer, + CustomAppBar, + DropdownContainer, + DropdownText, + AuthenticateButton, + NavbarName, + LightModeIcon, + DarkModeIcon, + ThemeSelectRow, + LogoContainer, +} 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 Logo from "../../../assets/img/logo.png"; +import { useDispatch, useSelector } from "react-redux"; +import { + addFilteredVideos, + setEditPlaylist, + setFilterValue, + setIsFiltering, +} from "../../../state/features/videoSlice"; +import { RootState } from "../../../state/store"; +import { useWindowSize } from "../../../hooks/useWindowSize"; +import { UploadVideo } from "../../UploadVideo/UploadVideo"; +import { StyledButton } from "../../UploadVideo/Upload-styles"; +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.video.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(addFilteredVideos([])); + searchValRef.current = ""; + if (!inputRef.current) return; + inputRef.current.value = ""; + }} + > +

+ + + + {/* {windowSize.width <= 600 ? ( + + + + + {filterValue && ( + { + dispatch(setIsFiltering(false)) + dispatch(setFilterValue('')) + dispatch(addFilteredVideos([])) + searchValRef.current = '' + if (!inputRef.current) return + inputRef.current.value = '' + }} + /> + )} + + + ): ( + + { + searchValRef.current = e.target.value + }} + onKeyDown={(event) => { + if (event.key === 'Enter' || event.keyCode === 13) { + if (!searchValRef.current) { + dispatch(setIsFiltering(false)) + dispatch(setFilterValue('')) + dispatch(addFilteredVideos([])) + searchValRef.current = '' + if (!inputRef.current) return + inputRef.current.value = '' + return + } + navigate('/') + dispatch(setIsFiltering(true)) + dispatch(addFilteredVideos([])) + 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(addFilteredVideos([])) + searchValRef.current = '' + if (!inputRef.current) return + inputRef.current.value = '' + return + } + navigate('/') + dispatch(setIsFiltering(true)) + dispatch(addFilteredVideos([])) + dispatch(setFilterValue(searchValRef.current)) + }} + /> + {filterValue && ( + { + dispatch(setIsFiltering(false)) + dispatch(setFilterValue('')) + dispatch(addFilteredVideos([])) + searchValRef.current = '' + if (!inputRef.current) return + inputRef.current.value = '' + }} + /> + )} + + + )} */} + + + + { + searchValRef.current = e.target.value; + }} + onKeyDown={(event) => { + if (event.key === "Enter" || event.keyCode === 13) { + if (!searchValRef.current) { + dispatch(setIsFiltering(false)); + dispatch(setFilterValue("")); + dispatch(addFilteredVideos([])); + searchValRef.current = ""; + if (!inputRef.current) return; + inputRef.current.value = ""; + return; + } + navigate("/"); + dispatch(setIsFiltering(true)); + dispatch(addFilteredVideos([])); + 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(addFilteredVideos([])); + searchValRef.current = ""; + if (!inputRef.current) return; + inputRef.current.value = ""; + return; + } + navigate("/"); + dispatch(setIsFiltering(true)); + dispatch(addFilteredVideos([])); + dispatch(setFilterValue(searchValRef.current)); + }} + /> + { + dispatch(setIsFiltering(false)); + dispatch(setFilterValue("")); + dispatch(addFilteredVideos([])); + searchValRef.current = ""; + if (!inputRef.current) return; + inputRef.current.value = ""; + }} + /> + + + + + {isAuthenticated && userName && ( + <> + { + handleClick(e); + setOpenUserDropdown(true); + }} + > + {userName} + {!userAvatar ? ( + + ) : ( +

+ )} + + + + )} + + {isAuthenticated && userName && ( + <> + + } + onClick={() => { + dispatch(setEditPlaylist({mode: 'new'})) + }} + > + create playlist + + + )} + + + + + + { + setIsOpenBlockedNamesModal(true); + handleCloseUserDropdown(); + }} + > + + Blocked Names + + + {isOpenBlockedNamesModal && ( + + )} + + + ); +}; + +export default NavBar; diff --git a/src/constants/index.ts b/src/constants/index.ts new file mode 100644 index 0000000..1cbf857 --- /dev/null +++ b/src/constants/index.ts @@ -0,0 +1,89 @@ +const useTestIdentifiers = false; + +export const QTUBE_VIDEO_BASE = useTestIdentifiers + ? "MYTEST_vid_" + : "qtube_vid_"; + + export const QTUBE_PLAYLIST_BASE = useTestIdentifiers + ? "MYTEST_playlist_" + : "qtube_playlist_"; + + export const COMMENT_BASE = useTestIdentifiers + ? "qcomment_v1_MYTEST_" + : "qcomment_v1_qtube_"; + + interface SubCategory { + id: number; + name: string; +} + +interface CategoryMap { + [key: number]: SubCategory[]; +} + + +export const categories = [ + {"id": 1, "name": "Movies"}, + {"id": 2, "name": "Series"}, + {"id": 3, "name": "Music"}, + {"id": 4, "name": "Education"}, + {"id": 5, "name": "Lifestyle"}, + {"id": 6, "name": "Gaming"}, + {"id": 7, "name": "Technology"}, + {"id": 8, "name": "Sports"}, + {"id": 9, "name": "News & Politics"}, + {"id": 10, "name": "Cooking & Food"}, + {"id": 11, "name": "Animation"}, + {"id": 12, "name": "Science"}, + {"id": 13, "name": "Health & Wellness"}, + {"id": 14, "name": "DIY & Crafts"}, + {"id": 15, "name": "Kids & Family"}, + {"id": 16, "name": "Comedy"}, + {"id": 17, "name": "Travel & Adventure"}, + {"id": 18, "name": "Art & Design"}, + {"id": 19, "name": "Nature & Environment"}, + {"id": 20, "name": "Business & Finance"}, + {"id": 21, "name": "Personal Development"}, + {"id": 22, "name": "Other"}, + {"id": 23, "name": "History"}, +] + + +export const subCategories: CategoryMap = { + 1: [ // Movies + {"id": 101, "name": "Action & Adventure"}, + {"id": 102, "name": "Comedy"}, + {"id": 103, "name": "Drama"}, + {"id": 104, "name": "Fantasy & Science Fiction"}, + {"id": 105, "name": "Horror & Thriller"}, + {"id": 106, "name": "Documentaries"}, + {"id": 107, "name": "Animated"}, + {"id": 108, "name": "Family & Kids"}, + {"id": 109, "name": "Romance"}, + {"id": 110, "name": "Mystery & Crime"}, + {"id": 111, "name": "Historical & War"}, + {"id": 112, "name": "Musicals & Music Films"}, + {"id": 113, "name": "Indie Films"}, + {"id": 114, "name": "International Films"}, + {"id": 115, "name": "Biographies & True Stories"}, + {"id": 116, "name": "Other"} + ], + 2: [ // Series + {"id": 201, "name": "Dramas"}, + {"id": 202, "name": "Comedies"}, + {"id": 203, "name": "Reality & Competition"}, + {"id": 204, "name": "Documentaries & Docuseries"}, + {"id": 205, "name": "Sci-Fi & Fantasy"}, + {"id": 206, "name": "Crime & Mystery"}, + {"id": 207, "name": "Animated Series"}, + {"id": 208, "name": "Kids & Family"}, + {"id": 209, "name": "Historical & Period Pieces"}, + {"id": 210, "name": "Action & Adventure"}, + {"id": 211, "name": "Horror & Thriller"}, + {"id": 212, "name": "Romance"}, + {"id": 213, "name": "Anthologies"}, + {"id": 214, "name": "International Series"}, + {"id": 215, "name": "Miniseries"}, + {"id": 216, "name": "Other"} + ] +} 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/useFetchVideos.tsx b/src/hooks/useFetchVideos.tsx new file mode 100644 index 0000000..158740a --- /dev/null +++ b/src/hooks/useFetchVideos.tsx @@ -0,0 +1,377 @@ +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' +import { + addVideos, + addToHashMap, + setCountNewVideos, + upsertVideos, + upsertVideosBeginning, + Video, + upsertFilteredVideos +} from '../state/features/videoSlice' +import { + setIsLoadingGlobal, setUserAvatarHash +} from '../state/features/globalSlice' +import { RootState } from '../state/store' +import { fetchAndEvaluateVideos } from '../utils/fetchVideos' +import { QTUBE_PLAYLIST_BASE, QTUBE_VIDEO_BASE } from '../constants' +import { RequestQueue } from '../utils/queue' +import { queue } from '../wrappers/GlobalWrapper' + + + +export const useFetchVideos = () => { + const dispatch = useDispatch() + const hashMapVideos = useSelector( + (state: RootState) => state.video.hashMapVideos + ) + const videos = useSelector((state: RootState) => state.video.videos) + const userAvatarHash = useSelector( + (state: RootState) => state.global.userAvatarHash + ) + const filteredVideos = useSelector( + (state: RootState) => state.video.filteredVideos + ) + + const checkAndUpdateVideo = React.useCallback( + (video: Video) => { + const existingVideo = hashMapVideos[video.id] + if (!existingVideo) { + return true + } else if ( + video?.updated && + existingVideo?.updated && + (!existingVideo?.updated || video?.updated) > existingVideo?.updated + ) { + return true + } else { + return false + } + }, + [hashMapVideos] + ) + + 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 getVideo = 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(() => getVideo(user, videoId, content, retries + 1)); + } else { + console.error('Failed to get video after 3 attempts', error); + } + } + + + } + + + + const getNewVideos = React.useCallback(async () => { + try { + dispatch(setIsLoadingGlobal(true)) + + + const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QTUBE_VIDEO_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(upsertVideosBeginning(structureData)) + } + if (willFetchAll) { + dispatch(addVideos(structureData)) + } + setTimeout(()=> { + dispatch(setCountNewVideos(0)) + }, 1000) + for (const content of structureData) { + if (content.user && content.id) { + const res = checkAndUpdateVideo(content) + if (res) { + queue.push(() => getVideo(content.user, content.id, content)); + } + } + } + } catch (error) { + } finally { + dispatch(setIsLoadingGlobal(false)) + } + }, [videos, hashMapVideos]) + + const getVideos = React.useCallback(async (filters = {}, reset?:boolean, resetFilers?: boolean,limit?: number) => { + try { + const {name = '', + category = '', + subcategory = '', + keywords = '', + type = '' }: any = resetFilers ? {} : filters + let offset = videos.length + if(reset){ + offset = 0 + } + const videoLimit = limit || 20 + + let defaultUrl = `/arbitrary/resources/search?mode=ALL&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true&offset=${offset}&limit=${videoLimit}` + + + if(name){ + defaultUrl = defaultUrl + `&name=${name}` + } + if(category){ + if(!subcategory){ + defaultUrl = defaultUrl + `&description=category:${category}` + + } else { + defaultUrl = defaultUrl + `&description=category:${category};subcategory:${subcategory}` + } + } + if(keywords){ + defaultUrl = defaultUrl + `&query=${keywords}` + } + if(type === 'playlists'){ + defaultUrl = defaultUrl + `&service=PLAYLIST` + defaultUrl = defaultUrl + `&identifier=${QTUBE_PLAYLIST_BASE}` + + } else { + defaultUrl = defaultUrl + `&service=DOCUMENT` + defaultUrl = defaultUrl + `&identifier=${QTUBE_VIDEO_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(addVideos(structureData)) + + } else { + dispatch(upsertVideos(structureData)) + + } + for (const content of structureData) { + if (content.user && content.id) { + const res = checkAndUpdateVideo(content) + if (res) { + queue.push(() => getVideo(content.user, content.id, content)); + + + } + } + } + } catch (error) { + console.log({error}) + } finally { + + } + }, [videos, hashMapVideos]) + + const getVideosFiltered = 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=${QTUBE_VIDEO_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(upsertFilteredVideos(structureData)) + + for (const content of structureData) { + if (content.user && content.id) { + const res = checkAndUpdateVideo(content) + if (res) { + queue.push(() => getVideo(content.user, content.id, content)); + } + } + } + } catch (error) { + } finally { + + } + }, [filteredVideos, hashMapVideos]) + + const checkNewVideos = React.useCallback(async () => { + try { + + + const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QTUBE_VIDEO_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(setCountNewVideos(responseData.length)) + return + } + const newArray = responseData.slice(0, findVideo) + dispatch(setCountNewVideos(newArray.length)) + return + } catch (error) {} + }, [videos]) + + + return { + getVideos, + checkAndUpdateVideo, + getVideo, + hashMapVideos, + getNewVideos, + checkNewVideos, + getVideosFiltered + } +} 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..d4c62d8 --- /dev/null +++ b/src/pages/Home/Channels.tsx @@ -0,0 +1,77 @@ +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 { useFetchVideos } from '../../hooks/useFetchVideos' +import LazyLoad from '../../components/common/LazyLoad' +import { BottomParent, NameContainer, VideoCard, VideoCardName, VideoCardTitle, VideoContainer, VideoUploadDate } from './VideoList-styles' +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/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..922a220 --- /dev/null +++ b/src/pages/Home/Home.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import { VideoList } from './VideoList' + +import { useSelector } from 'react-redux' +import { RootState } from '../../state/store' + +export const Home = () => { + + return ( + <> + + + + ) +} diff --git a/src/pages/Home/VideoList-styles.tsx b/src/pages/Home/VideoList-styles.tsx new file mode 100644 index 0000000..e48ea98 --- /dev/null +++ b/src/pages/Home/VideoList-styles.tsx @@ -0,0 +1,284 @@ +import { styled } from "@mui/system"; +import { Box, Grid, Typography, Checkbox, TextField, InputLabel, Autocomplete } from "@mui/material"; + +export const VideoContainer = styled(Grid)(({ 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", + marginBottom: 'auto' +})); +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: '12px', + 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: '5px', + borderRadius: '3px', + transition: 'all 0.3s ease-in-out', + "&:hover": { + cursor: 'pointer', + transform: "scale(1.1)", + } +}) \ No newline at end of file diff --git a/src/pages/Home/VideoList.tsx b/src/pages/Home/VideoList.tsx new file mode 100644 index 0000000..e9bbcb6 --- /dev/null +++ b/src/pages/Home/VideoList.tsx @@ -0,0 +1,792 @@ +import React, { useCallback, useEffect, useRef, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import ReactDOM from "react-dom"; +import { useSelector, useDispatch } from "react-redux"; +import { RootState } from "../../state/store"; +import { + Avatar, + Box, + Button, + FormControl, + Grid, + Input, + InputLabel, + MenuItem, + OutlinedInput, + Select, + SelectChangeEvent, + Tooltip, + Typography, + useTheme, +} from "@mui/material"; +import { useFetchVideos } from "../../hooks/useFetchVideos"; +import LazyLoad from "../../components/common/LazyLoad"; +import { + BlockIconContainer, + BottomParent, + FilterSelect, + FiltersCheckbox, + FiltersCol, + FiltersContainer, + FiltersRow, + FiltersSubContainer, + FiltersTitle, + IconsBox, + NameContainer, + VideoCard, + VideoCardName, + VideoCardTitle, + VideoContainer, + VideoUploadDate, +} from "./VideoList-styles"; +import ResponsiveImage from "../../components/ResponsiveImage"; +import { formatDate, formatTimestampSeconds } from "../../utils/time"; +import { Subtitle, SubtitleContainer } from "./Home-styles"; +import { ExpandMoreSVG } from "../../assets/svgs/ExpandMoreSVG"; +import { + addVideos, + blockUser, + changeFilterType, + changeSelectedCategoryVideos, + changeSelectedSubCategoryVideos, + changefilterName, + changefilterSearch, + clearVideoList, + setEditPlaylist, + setEditVideo, +} from "../../state/features/videoSlice"; +import { categories, subCategories } from "../../constants"; +import { Playlists } from "../../components/Playlists/Playlists"; +import { PlaylistSVG } from "../../assets/svgs/PlaylistSVG"; +import BlockIcon from "@mui/icons-material/Block"; +import EditIcon from '@mui/icons-material/Edit'; + +interface VideoListProps { + mode?: string; +} +export const VideoList = ({ mode }: VideoListProps) => { + const theme = useTheme(); + const prevVal = useRef(""); + const isFiltering = useSelector( + (state: RootState) => state.video.isFiltering + ); + const filterValue = useSelector( + (state: RootState) => state.video.filterValue + ); + const [isLoading, setIsLoading] = useState(false); + const [showIcons, setShowIcons] = useState(null); + + const filterType = useSelector((state: RootState) => state.video.filterType); + + const setFilterType = (payload) => { + dispatch(changeFilterType(payload)); + }; + const filterSearch = useSelector( + (state: RootState) => state.video.filterSearch + ); + + const setFilterSearch = (payload) => { + dispatch(changefilterSearch(payload)); + }; + const filterName = useSelector((state: RootState) => state.video.filterName); + + const setFilterName = (payload) => { + dispatch(changefilterName(payload)); + }; + + const selectedCategoryVideos = useSelector( + (state: RootState) => state.video.selectedCategoryVideos + ); + + const setSelectedCategoryVideos = (payload) => { + dispatch(changeSelectedCategoryVideos(payload)); + }; + const selectedSubCategoryVideos = useSelector( + (state: RootState) => state.video.selectedSubCategoryVideos + ); + + const setSelectedSubCategoryVideos = (payload) => { + dispatch(changeSelectedSubCategoryVideos(payload)); + }; + + const dispatch = useDispatch(); + const filteredVideos = useSelector( + (state: RootState) => state.video.filteredVideos + ); + const username = useSelector((state: RootState) => state.auth?.user?.name); + const isFilterMode = useRef(false); + const firstFetch = useRef(false); + const afterFetch = useRef(false); + const isFetchingFiltered = useRef(false); + const isFetching = useRef(false); + const hashMapVideos = useSelector( + (state: RootState) => state.video.hashMapVideos + ); + + const countNewVideos = useSelector( + (state: RootState) => state.video.countNewVideos + ); + const userAvatarHash = useSelector( + (state: RootState) => state.global.userAvatarHash + ); + + const { videos: globalVideos } = useSelector( + (state: RootState) => state.video + ); + const navigate = useNavigate(); + const { getVideos, getNewVideos, checkNewVideos, getVideosFiltered } = + useFetchVideos(); + + const getVideosHandler = React.useCallback( + async (reset?: boolean, resetFilers?: boolean) => { + + + if (!firstFetch.current || !afterFetch.current) return; + if (isFetching.current) return; + isFetching.current = true; + await getVideos( + { + name: filterName, + category: selectedCategoryVideos?.id, + subcategory: selectedSubCategoryVideos?.id, + keywords: filterSearch, + type: filterType, + }, + reset ? true : false, + resetFilers + ); + isFetching.current = false; + }, + [ + getVideos, + filterValue, + getVideosFiltered, + isFiltering, + filterName, + selectedCategoryVideos, + selectedSubCategoryVideos, + filterSearch, + filterType, + ] + ); + + useEffect(() => { + if (isFiltering && filterValue !== prevVal?.current) { + prevVal.current = filterValue; + getVideosHandler(); + } + }, [filterValue, isFiltering, filteredVideos]); + + const getVideosHandlerMount = React.useCallback(async () => { + if (firstFetch.current) return; + firstFetch.current = true; + setIsLoading(true); + + await getVideos(); + afterFetch.current = true; + isFetching.current = false; + + setIsLoading(false); + }, [getVideos]); + + let videos = globalVideos; + + if (isFiltering) { + videos = filteredVideos; + 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; + getVideosHandlerMount(); + } else { + firstFetch.current = true; + afterFetch.current = true; + } + }, [getVideosHandlerMount, globalVideos]); + + const filtersToDefault = async () => { + setFilterType("videos"); + setFilterSearch(""); + setFilterName(""); + setSelectedCategoryVideos(null); + setSelectedSubCategoryVideos(null); + + ReactDOM.flushSync(() => { + getVideosHandler(true, true); + }); + }; + + const handleOptionCategoryChangeVideos = ( + event: SelectChangeEvent + ) => { + const optionId = event.target.value; + const selectedOption = categories.find((option) => option.id === +optionId); + setSelectedCategoryVideos(selectedOption || null); + }; + const handleOptionSubCategoryChangeVideos = ( + event: SelectChangeEvent, + subcategories: any[] + ) => { + const optionId = event.target.value; + const selectedOption = subcategories.find( + (option) => option.id === +optionId + ); + setSelectedSubCategoryVideos(selectedOption || null); + }; + + const blockUserFunc = async (user: string) => { + if (user === "Q-Tube") return; + + try { + const response = await qortalRequest({ + action: "ADD_LIST_ITEMS", + list_name: "blockedNames", + items: [user], + }); + + if (response === true) { + dispatch(blockUser(user)) + } + } catch (error) {} + }; + + return ( + + + + { + setFilterSearch(e.target.value); + }} + 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); + }} + value={filterName} + placeholder="User's name" + 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", + }} + /> + + Categories + + + + + + + + Category + + + + {selectedCategoryVideos && + subCategories[selectedCategoryVideos?.id] && ( + + + Sub-Category + + + + )} + + + + + Type + + + + + Videos + ) => { + setFilterType("videos"); + }} + inputProps={{ "aria-label": "controlled" }} + /> + + + Playlists + ) => { + setFilterType("playlists"); + }} + inputProps={{ "aria-label": "controlled" }} + /> + + + + + + + + + + {/* + {!isFiltering ? 'Recently Published Videos': 'Search'} + */} + + {/* { countNewVideos > 0 && !isFiltering && ( + + + {countNewVideos === 1 + ? `There is ${countNewVideos} new video` + : `There are ${countNewVideos} new videos`} + + + + )} */} + + {videos.map((video: any, index: number) => { + const existingVideo = hashMapVideos[video?.id]; + let hasHash = false; + let videoObj = video; + if (existingVideo) { + videoObj = existingVideo; + hasHash = true; + } + + let avatarUrl = ""; + if (userAvatarHash[videoObj?.user]) { + avatarUrl = userAvatarHash[videoObj?.user]; + } + + if (hasHash && !videoObj?.videoImage && !videoObj?.image) { + return null; + } + const isPlaylist = videoObj?.service === "PLAYLIST"; + + + if (isPlaylist) { + return ( + setShowIcons(videoObj.id)} + onMouseLeave={() => setShowIcons(null)} + key={videoObj.id} + > + + + {videoObj?.user === username && ( + + + { + dispatch(setEditPlaylist(videoObj)); + }} + /> + + + )} + + + + { + blockUserFunc(videoObj?.user); + }} + /> + + + + { + if(!hasHash) return + navigate( + `/video/${videoObj?.videos?.[0]?.name}/${videoObj?.videos?.[0]?.identifier}` + ); + }} + > + + {videoObj?.title} + + { + e.stopPropagation(); + navigate(`/channel/${videoObj?.user}`); + }} + > + + + {videoObj?.user} + + + + {videoObj?.created && ( + + {formatDate(videoObj.created)} + + )} + + + + + + + ); + } + + return ( + setShowIcons(videoObj.id)} + onMouseLeave={() => setShowIcons(null)} + > + + {videoObj?.user === username && ( + + + { + dispatch(setEditVideo(videoObj)); + }} + /> + + + + )} + + + + { + blockUserFunc(videoObj?.user); + }} + /> + + + + { + navigate(`/video/${videoObj?.user}/${videoObj?.id}`); + }} + > + + {videoObj.title} + + { + e.stopPropagation(); + navigate(`/channel/${videoObj?.user}`); + }} + > + + + {videoObj?.user} + + + + {videoObj?.created && ( + + {formatDate(videoObj.created)} + + )} + + + + ); + })} + + + + + + + ); +}; diff --git a/src/pages/Home/VideoListComponentLevel.tsx b/src/pages/Home/VideoListComponentLevel.tsx new file mode 100644 index 0000000..a82145c --- /dev/null +++ b/src/pages/Home/VideoListComponentLevel.tsx @@ -0,0 +1,205 @@ +import React, { useCallback, useEffect, useRef, useState } from 'react' +import { useNavigate, useParams } from 'react-router-dom' +import { useSelector } from 'react-redux' +import { RootState } from '../../state/store' +import { + Avatar, + Box, + Button, + Typography, + useTheme +} from '@mui/material' +import { useFetchVideos } from '../../hooks/useFetchVideos' +import LazyLoad from '../../components/common/LazyLoad' +import { BottomParent, NameContainer, VideoCard, VideoCardName, VideoCardTitle, VideoContainer, VideoUploadDate } from './VideoList-styles' +import ResponsiveImage from '../../components/ResponsiveImage' +import { formatDate, formatTimestampSeconds } from '../../utils/time' +import { Video } from '../../state/features/videoSlice' +import { queue } from '../../wrappers/GlobalWrapper' +import { QTUBE_VIDEO_BASE } from '../../constants' + +interface VideoListProps { + mode?: string +} +export const VideoListComponentLevel = ({ 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.video.hashMapVideos + ) + + const countNewVideos = useSelector( + (state: RootState) => state.video.countNewVideos + ) + const userAvatarHash = useSelector( + (state: RootState) => state.global.userAvatarHash + ) + + const [videos, setVideos] = React.useState([]) + + const navigate = useNavigate() + const { + getVideo, + getNewVideos, + checkNewVideos, + checkAndUpdateVideo + } = useFetchVideos() + + const getVideos = React.useCallback(async () => { + try { + const offset = videos.length + const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QTUBE_VIDEO_BASE}_&limit=20&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 = checkAndUpdateVideo(content) + if (res) { + queue.push(() => getVideo(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((video: any, index: number) => { + const existingVideo = hashMapVideos[video.id] + let hasHash = false + let videoObj = video + if (existingVideo) { + videoObj = existingVideo + hasHash = true + } + + let avatarUrl = '' + if(userAvatarHash[videoObj?.user]){ + avatarUrl = userAvatarHash[videoObj?.user] + } + + if(hasHash && (!videoObj?.videoImage || videoObj?.videoImage?.length < 50)){ + return null + } + + + return ( + + + { + navigate(`/video/${videoObj.user}/${videoObj.id}`) + }} + > + + {videoObj.title} + + + + {videoObj.user} + + + {videoObj?.created && ( + {formatDate(videoObj.created)} + )} + + + + + + + ) + })} + + + + ) +} + + diff --git a/src/pages/IndividualProfile/IndividualProfile.tsx b/src/pages/IndividualProfile/IndividualProfile.tsx new file mode 100644 index 0000000..c27f346 --- /dev/null +++ b/src/pages/IndividualProfile/IndividualProfile.tsx @@ -0,0 +1,64 @@ +import React, { useMemo } from 'react' +import { VideoListComponentLevel } from '../Home/VideoListComponentLevel' +import { HeaderContainer, ProfileContainer } from './Profile-styles' +import { AuthorTextComment, StyledCardColComment, StyledCardHeaderComment } from '../VideoContent/VideoContent-styles' +import { Avatar, Box, useTheme } from '@mui/material' +import { useParams } from 'react-router-dom' +import { useSelector } from 'react-redux' +import { setUserAvatarHash } from '../../state/features/globalSlice' +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/VideoContent/VideoContent-styles.tsx b/src/pages/VideoContent/VideoContent-styles.tsx new file mode 100644 index 0000000..0eef234 --- /dev/null +++ b/src/pages/VideoContent/VideoContent-styles.tsx @@ -0,0 +1,81 @@ +import { styled } from "@mui/system"; +import { Box, Grid, Typography, Checkbox } from "@mui/material"; + +export const VideoPlayerContainer = styled(Box)(({ theme }) => ({ + maxWidth: '95%', + width: '1000px', + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', +})); + +export const VideoTitle = styled(Typography)(({ theme }) => ({ + fontFamily: "Raleway", + fontSize: "20px", + color: theme.palette.text.primary, + userSelect: "none", + wordBreak: "break-word" +})); + +export const VideoDescription = styled(Typography)(({ theme }) => ({ + fontFamily: "Raleway", + fontSize: "16px", + color: theme.palette.text.primary, + userSelect: "none", + wordBreak: "break-word" +})); + +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' +})); \ No newline at end of file diff --git a/src/pages/VideoContent/VideoContent.tsx b/src/pages/VideoContent/VideoContent.tsx new file mode 100644 index 0000000..5e4fcb4 --- /dev/null +++ b/src/pages/VideoContent/VideoContent.tsx @@ -0,0 +1,457 @@ +import React, { useState, useMemo, useRef, useEffect } 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 { VideoPlayer } from "../../components/common/VideoPlayer"; +import { RootState } from "../../state/store"; +import { addToHashMap } from "../../state/features/videoSlice"; +import AttachFileIcon from "@mui/icons-material/AttachFile"; +import DownloadIcon from "@mui/icons-material/Download"; + +import mockImg from "../../test/mockimg.jpg"; +import { + AuthorTextComment, + FileAttachmentContainer, + FileAttachmentFont, + Spacer, + StyledCardColComment, + StyledCardHeaderComment, + VideoDescription, + VideoPlayerContainer, + VideoTitle, +} from "./VideoContent-styles"; +import { setUserAvatarHash } from "../../state/features/globalSlice"; +import { + formatDate, + formatDateSeconds, + formatTimestampSeconds, +} from "../../utils/time"; +import { NavbarName } from "../../components/layout/Navbar/Navbar-styles"; +import { CommentSection } from "../../components/common/Comments/CommentSection"; +import { + CrowdfundSubTitle, + CrowdfundSubTitleRow, +} from "../../components/UploadVideo/Upload-styles"; +import { QTUBE_VIDEO_BASE } from "../../constants"; +import { Playlists } from "../../components/Playlists/Playlists"; +import { DisplayHtml } from "../../components/common/TextEditor/DisplayHtml"; +import FileElement from "../../components/common/FileElement"; + +export const VideoContent = () => { + const { name, id } = useParams(); + const [isExpandedDescription, setIsExpandedDescription] = + useState(false); + const [descriptionHeight, setDescriptionHeight] = + useState(null); + + 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 [videoData, setVideoData] = useState(null); + const [playlistData, setPlaylistData] = useState(null); + + const hashMapVideos = useSelector( + (state: RootState) => state.video.hashMapVideos + ); + const videoReference = useMemo(() => { + if (!videoData) return null; + const { videoReference } = videoData; + if ( + videoReference?.identifier && + videoReference?.name && + videoReference?.service + ) { + return videoReference; + } else { + return null; + } + }, [videoData]); + + const videoCover = useMemo(() => { + if (!videoData) return null; + const { videoImage } = videoData; + return videoImage || null; + }, [videoData]); + 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=${QTUBE_VIDEO_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, + }; + + setVideoData(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) { + setVideoData(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; + console.log({height}) + if (height > 100) { // Assuming 100px is your threshold + setDescriptionHeight(100) + } + } + }, [videoData]); + + console.log({ videoData }); + + return ( + + + {videoReference && ( + + )} + + + + + + + save to disk + + + + + + + + {videoData?.title} + + {videoData?.created && ( + + {formatDate(videoData.created)} + + )} + + + { + navigate(`/channel/${name}`); + }} + > + + + + + + + {name} + + + + + + + {descriptionHeight && !isExpandedDescription && ( + { + if (isExpandedDescription) return; + setIsExpandedDescription(true); + }} + /> + )} + + {videoData?.htmlDescription ? ( + + ) : ( + + {videoData?.fullDescription} + + )} + + {descriptionHeight && ( + { + setIsExpandedDescription((prev) => !prev); + }} + sx={{ + fontWeight: "bold", + fontSize: "16px", + cursor: "pointer", + paddingLeft: "15px", + paddingTop: "15px", + }} + > + {isExpandedDescription ? "Show less" : "...more"} + + )} + + + + + + + {playlistData && ( + + )} + + + ); +}; 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/globalSlice.ts b/src/state/features/globalSlice.ts new file mode 100644 index 0000000..ee2765b --- /dev/null +++ b/src/state/features/globalSlice.ts @@ -0,0 +1,62 @@ +import { createSlice } from '@reduxjs/toolkit' + + +interface GlobalState { + isLoadingGlobal: boolean + downloads: any + userAvatarHash: Record + publishNames: string[] | null + videoPlaying: any | null +} +const initialState: GlobalState = { + isLoadingGlobal: false, + downloads: {}, + userAvatarHash: {}, + publishNames: null, + videoPlaying: 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 + }, + } +}) + +export const { + setIsLoadingGlobal, + setAddToDownloads, + updateDownloads, + setUserAvatarHash, + addPublishNames, + setVideoPlaying +} = 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/features/videoSlice.ts b/src/state/features/videoSlice.ts new file mode 100644 index 0000000..8598d75 --- /dev/null +++ b/src/state/features/videoSlice.ts @@ -0,0 +1,204 @@ +import { createSlice } from '@reduxjs/toolkit'; +import { RootState } from '../store' + + +interface GlobalState { + videos: Video[] + filteredVideos: Video[] + hashMapVideos: Record + countNewVideos: number + isFiltering: boolean + filterValue: string + filterType: string + filterSearch: string + filterName: string + selectedCategoryVideos: any + selectedSubCategoryVideos: any + editVideoProperties: any + editPlaylistProperties: any +} +const initialState: GlobalState = { + videos: [], + filteredVideos: [], + hashMapVideos: {}, + countNewVideos: 0, + isFiltering: false, + filterValue: '', + filterType: 'videos', + filterSearch: '', + filterName: '', + selectedCategoryVideos: null, + selectedSubCategoryVideos: null, + editVideoProperties: 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 videoSlice = createSlice({ + name: 'video', + initialState, + reducers: { + setEditVideo: (state, action) => { + state.editVideoProperties = 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 + }, + changeSelectedCategoryVideos: (state, action) => { + state.selectedCategoryVideos = action.payload + }, + changeSelectedSubCategoryVideos: (state, action) => { + state.selectedSubCategoryVideos = action.payload + }, + setCountNewVideos: (state, action) => { + state.countNewVideos = action.payload + }, + addVideos: (state, action) => { + state.videos = action.payload + }, + addFilteredVideos: (state, action) => { + state.filteredVideos = action.payload + }, + removeVideo: (state, action) => { + const idToDelete = action.payload + state.videos = state.videos.filter((item) => item.id !== idToDelete) + state.filteredVideos = state.filteredVideos.filter( + (item) => item.id !== idToDelete + ) + }, + addVideoToBeginning: (state, action) => { + state.videos.unshift(action.payload) + }, + clearVideoList: (state) => { + state.videos = [] + }, + updateVideo: (state, action) => { + const { id } = action.payload + const index = state.videos.findIndex((video) => video.id === id) + if (index !== -1) { + state.videos[index] = { ...action.payload } + } + const index2 = state.filteredVideos.findIndex((video) => video.id === id) + if (index2 !== -1) { + state.filteredVideos[index2] = { ...action.payload } + } + }, + addToHashMap: (state, action) => { + const video = action.payload + state.hashMapVideos[video.id] = video + }, + updateInHashMap: (state, action) => { + const { id } = action.payload + const video = action.payload + state.hashMapVideos[id] = { ...video } + }, + removeFromHashMap: (state, action) => { + const idToDelete = action.payload + delete state.hashMapVideos[idToDelete] + }, + addArrayToHashMap: (state, action) => { + const videos = action.payload + videos.forEach((video: Video) => { + state.hashMapVideos[video.id] = video + }) + }, + upsertVideos: (state, action) => { + action.payload.forEach((video: Video) => { + const index = state.videos.findIndex((p) => p.id === video.id) + if (index !== -1) { + state.videos[index] = video + } else { + state.videos.push(video) + } + }) + }, + upsertFilteredVideos: (state, action) => { + action.payload.forEach((video: Video) => { + const index = state.filteredVideos.findIndex((p) => p.id === video.id) + if (index !== -1) { + state.filteredVideos[index] = video + } else { + state.filteredVideos.push(video) + } + }) + }, + upsertVideosBeginning: (state, action) => { + action.payload.reverse().forEach((video: Video) => { + const index = state.videos.findIndex((p) => p.id === video.id) + if (index !== -1) { + state.videos[index] = video + } else { + state.videos.unshift(video) + } + }) + }, + setIsFiltering: (state, action) => { + state.isFiltering = action.payload + }, + setFilterValue: (state, action) => { + state.filterValue = action.payload + }, + blockUser: (state, action) => { + const username = action.payload + + state.videos = state.videos.filter((item) => item.user !== username) + + } + } +}) + +export const { + setCountNewVideos, + addVideos, + addFilteredVideos, + removeVideo, + addVideoToBeginning, + updateVideo, + addToHashMap, + updateInHashMap, + removeFromHashMap, + addArrayToHashMap, + upsertVideos, + upsertFilteredVideos, + upsertVideosBeginning, + setIsFiltering, + setFilterValue, + clearVideoList, + changeFilterType, + changefilterSearch, + changefilterName, + changeSelectedCategoryVideos, + changeSelectedSubCategoryVideos, + blockUser, + setEditVideo, + setEditPlaylist +} = videoSlice.actions + +export default videoSlice.reducer + diff --git a/src/state/store.ts b/src/state/store.ts new file mode 100644 index 0000000..0400841 --- /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 videoReducer from './features/videoSlice' + +export const store = configureStore({ + reducer: { + notifications: notificationsReducer, + auth: authReducer, + global: globalReducer, + video: videoReducer, + }, + 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..df07bff --- /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: "#2e3d60", + dark: "#1a2744", + light: "#353535" + }, + secondary: { + main: "#417Ed4", + dark: "#3e74c1" + }, + + background: { + default: "#111111", + paper: "#1A1C1E" + }, + 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/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..3e57bf3 --- /dev/null +++ b/src/wrappers/GlobalWrapper.tsx @@ -0,0 +1,173 @@ +import React, { + useEffect, + useState, + useCallback, + useRef, + useMemo, +} 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 { EditVideo } from "../components/EditVideo/EditVideo"; +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: "" +})