From 1b1c0f33009ded139392cf3705b57f6515f41909 Mon Sep 17 00:00:00 2001 From: IrohDW Date: Thu, 7 Nov 2024 14:58:30 -0700 Subject: [PATCH] Videoplayer is prepared to play video if downloaded through Save to Disk button Navbar uses new Q-Tube Logo --- .../VideoPlayer/Components/LoadingVideo.tsx | 13 +- .../Components/VideoControls-State.ts | 3 +- .../common/VideoPlayer/VideoPlayer-State.ts | 9 ++ .../layout/Navbar/Navbar-styles.tsx | 2 +- src/components/layout/Navbar/Navbar.tsx | 142 +----------------- .../VideoContent/VideoActionsBar.tsx | 1 + .../VideoContent/VideoContent-styles.tsx | 1 + 7 files changed, 31 insertions(+), 140 deletions(-) diff --git a/src/components/common/VideoPlayer/Components/LoadingVideo.tsx b/src/components/common/VideoPlayer/Components/LoadingVideo.tsx index 9d2f209..131c1d4 100644 --- a/src/components/common/VideoPlayer/Components/LoadingVideo.tsx +++ b/src/components/common/VideoPlayer/Components/LoadingVideo.tsx @@ -5,8 +5,15 @@ import { PlayArrow } from "@mui/icons-material"; import { useVideoContext } from "./VideoContext.ts"; export const LoadingVideo = () => { - const { isLoading, resourceStatus, src, startPlay, from, togglePlay } = - useVideoContext(); + const { + isLoading, + resourceStatus, + src, + startPlay, + canPlay, + from, + togglePlay, + } = useVideoContext(); const getDownloadProgress = (current: number, total: number) => { const progress = (current / total) * 100; @@ -76,7 +83,7 @@ export const LoadingVideo = () => { )} )} - {((!src && !isLoading.value) || !startPlay.value) && ( + {((!src && !isLoading.value) || (!startPlay.value && !canPlay.value)) && ( { - if (!videoRef.current) return; + if (!videoRef.current || !src) return; const currentTime = videoRef.current.currentTime; videoRef.current.src = src; videoRef.current.load(); @@ -393,5 +393,6 @@ export const useVideoControlsState = ( handleCanPlay, toggleMute, showControlsFullScreen, + setPlaying, }; }; diff --git a/src/components/common/VideoPlayer/VideoPlayer-State.ts b/src/components/common/VideoPlayer/VideoPlayer-State.ts index 8311044..33accd5 100644 --- a/src/components/common/VideoPlayer/VideoPlayer-State.ts +++ b/src/components/common/VideoPlayer/VideoPlayer-State.ts @@ -110,6 +110,15 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => { const toggleRef = useRef(null); const { downloadVideo } = useContext(MyContext); + if (resourceStatus?.status === "READY") { + canPlay.value = true; + isLoading.value = false; + //startPlay.value = true; + + // playing.value = false; + // videoRef.current.pause(); + } + const onProgressChange = async (_: any, value: number | number[]) => { if (!videoRef.current) return; videoRef.current.currentTime = value as number; diff --git a/src/components/layout/Navbar/Navbar-styles.tsx b/src/components/layout/Navbar/Navbar-styles.tsx index 84ce406..8171e10 100644 --- a/src/components/layout/Navbar/Navbar-styles.tsx +++ b/src/components/layout/Navbar/Navbar-styles.tsx @@ -16,7 +16,7 @@ export const CustomAppBar = styled(AppBar)(({ theme }) => ({ [theme.breakpoints.only("xs")]: { gap: "15px", }, - height: "40px", + height: "50px", })); export const LogoContainer = styled("div")({ cursor: "pointer", diff --git a/src/components/layout/Navbar/Navbar.tsx b/src/components/layout/Navbar/Navbar.tsx index 7512357..40f3d94 100644 --- a/src/components/layout/Navbar/Navbar.tsx +++ b/src/components/layout/Navbar/Navbar.tsx @@ -25,7 +25,7 @@ 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 Logo from "../../../assets/img/logo.webp"; import { useDispatch, useSelector } from "react-redux"; import { addFilteredVideos, @@ -120,8 +120,9 @@ const NavBar: React.FC = ({ src={Logo} style={{ width: "auto", - height: "55px", + height: "45px", padding: "2px", + marginTop: "5px", }} /> @@ -133,135 +134,6 @@ const NavBar: React.FC = ({ gap: "10px", }} > - {/* {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 = '' - }} - /> - )} - - - )} */} - = ({ {!userAvatar ? ( ) : ( User Avatar diff --git a/src/pages/ContentPages/VideoContent/VideoContent-styles.tsx b/src/pages/ContentPages/VideoContent/VideoContent-styles.tsx index 5c1794d..bff7089 100644 --- a/src/pages/ContentPages/VideoContent/VideoContent-styles.tsx +++ b/src/pages/ContentPages/VideoContent/VideoContent-styles.tsx @@ -73,6 +73,7 @@ export const FileAttachmentContainer = styled(Box)(({ theme }) => ({ padding: "5px 10px", border: `1px solid ${theme.palette.text.primary}`, width: "350px", + height: "50px", })); export const FileAttachmentFont = styled(Typography)(({ theme }) => ({