From 71151e166b14ebd6b2dd2ea0e8f629bef6a306bb Mon Sep 17 00:00:00 2001
From: IrohDW <randomprogrammer@protonmail.com>
Date: Tue, 14 Jan 2025 16:40:32 -0700
Subject: [PATCH] Bugfixes on PlaylistContent.tsx

VideoPlayer.tsx progress bar now loads properly on PlaylistContent.tsx

Video duration on PlaylistContent.tsx now loads properly

Time until deleted video thumbnail is shown has been doubled from 30 seconds to 60
---
 src/components/Playlists/Playlists.tsx        | 33 +++++----
 src/components/ResponsiveImage.tsx            |  2 +-
 .../PlaylistContent/PlaylistContent.tsx       | 67 +++++++++----------
 .../VideoContent/VideoContent.tsx             |  4 --
 src/pages/Home/Components/VideoList.tsx       |  2 +-
 5 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/components/Playlists/Playlists.tsx b/src/components/Playlists/Playlists.tsx
index d514927..853abab 100644
--- a/src/components/Playlists/Playlists.tsx
+++ b/src/components/Playlists/Playlists.tsx
@@ -1,29 +1,38 @@
-import React from "react";
-import { smallScreenSizeString } from "../../constants/Misc.ts";
-import { CardContentContainerComment } from "../common/Comments/Comments-styles";
 import {
-  CrowdfundSubTitle,
-  CrowdfundSubTitleRow,
-} from "../Publish/PublishVideo/PublishVideo-styles.tsx";
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+  Box,
+  SxProps,
+  Theme,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import React from "react";
+import { CardContentContainerComment } from "../common/Comments/Comments-styles";
 
+interface PlaylistsProps {
+  playlistData;
+  currentVideoIdentifier;
+  onClick;
+  sx?: SxProps<Theme>;
+}
 export const Playlists = ({
   playlistData,
   currentVideoIdentifier,
   onClick,
-}) => {
+  sx,
+}: PlaylistsProps) => {
   const theme = useTheme();
   const isScreenSmall = !useMediaQuery(`(min-width:700px)`);
-  const videoPlayerHeight = "33.75vw"; // This is videoplayer width * 9/16 (inverse of aspect ratio)
+  const PlaylistsHeight = "36vw"; // This is videoplayer width * 9/16 (inverse of aspect ratio)
 
   return (
     <Box
       sx={{
+        width: "100%",
+        height: isScreenSmall ? "200px" : PlaylistsHeight,
+        ...sx,
         display: "flex",
         flexDirection: "column",
-        width: "100%",
-        height: isScreenSmall ? "200px" : videoPlayerHeight,
       }}
     >
       <CardContentContainerComment
diff --git a/src/components/ResponsiveImage.tsx b/src/components/ResponsiveImage.tsx
index d781b65..3a78b00 100644
--- a/src/components/ResponsiveImage.tsx
+++ b/src/components/ResponsiveImage.tsx
@@ -28,7 +28,7 @@ const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
     }, endTimeMilliSeconds);
   };
 
-  useEffect(() => endLoading(30), [endLoading]);
+  useEffect(() => endLoading(60), [endLoading]);
 
   return (
     <Box
diff --git a/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx b/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx
index af587bd..e8afbf0 100644
--- a/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx
+++ b/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx
@@ -1,15 +1,11 @@
-import { Box, Grid, Typography, useMediaQuery } from "@mui/material";
+import { Box, SxProps, Theme, Typography, useMediaQuery } from "@mui/material";
 import React from "react";
 import { CommentSection } from "../../../components/common/Comments/CommentSection.tsx";
 import { SuperLikesSection } from "../../../components/common/SuperLikesList/SuperLikesSection.tsx";
 import { DisplayHtml } from "../../../components/common/TextEditor/DisplayHtml.tsx";
 import { VideoPlayer } from "../../../components/common/VideoPlayer/VideoPlayer.tsx";
 import { Playlists } from "../../../components/Playlists/Playlists.tsx";
-import {
-  fontSizeSmall,
-  minFileSize,
-  smallScreenSizeString,
-} from "../../../constants/Misc.ts";
+import { fontSizeSmall, minFileSize } from "../../../constants/Misc.ts";
 import { formatBytes } from "../../../utils/numberFunctions.ts";
 import { formatDate } from "../../../utils/time.ts";
 import { VideoActionsBar } from "../VideoContent/VideoActionsBar.tsx";
@@ -46,7 +42,11 @@ export const PlaylistContent = () => {
     loadingSuperLikes,
   } = usePlaylistContentState();
 
-  const isScreenSmall = !useMediaQuery(`(min-width:700px)`);
+  const isScreenSmall = !useMediaQuery(`(min-width:950px)`);
+
+  const playlistsSX: SxProps<Theme> = isScreenSmall
+    ? { width: "100%", marginTop: "10px" }
+    : { width: "35%", position: "absolute", right: "20px" };
 
   return videoData && videoData?.videos?.length === 0 ? (
     <Box
@@ -70,41 +70,36 @@ export const PlaylistContent = () => {
     >
       <VideoPlayerContainer
         sx={{
-          width: "100%",
-          display: "grid",
-          gridTemplateColumns: isScreenSmall ? "1fr" : "60vw auto",
-          gap: "20px",
+          width: isScreenSmall ? "100%" : "60%",
+          alignSelf: "start",
+          paddingRight: isScreenSmall ? "10px" : "0px",
+          marginBottom: "20px",
         }}
       >
         {videoReference && (
-          <Box
-            sx={{
-              aspectRatio: "16/9",
+          <VideoPlayer
+            name={videoReference?.name}
+            service={videoReference?.service}
+            identifier={videoReference?.identifier}
+            user={channelName}
+            jsonId={id}
+            poster={videoCover || ""}
+            nextVideo={nextVideo}
+            onEnd={onEndVideo}
+            autoPlay={doAutoPlay}
+            ref={containerRef}
+            videoStyles={{
+              video: { aspectRatio: "16 / 9" },
             }}
-          >
-            <VideoPlayer
-              name={videoReference?.name}
-              service={videoReference?.service}
-              identifier={videoReference?.identifier}
-              user={channelName}
-              jsonId={id}
-              poster={videoCover || ""}
-              nextVideo={nextVideo}
-              onEnd={onEndVideo}
-              autoPlay={doAutoPlay}
-              ref={containerRef}
-              videoStyles={{
-                videoContainer: { aspectRatio: "16 / 9" },
-                video: { aspectRatio: "16 / 9" },
-              }}
-            />
-          </Box>
+            duration={videoData?.duration}
+          />
         )}
         {playlistData && (
           <Playlists
             playlistData={playlistData}
             currentVideoIdentifier={videoData?.id}
             onClick={getVideoData}
+            sx={playlistsSX}
           />
         )}
       </VideoPlayerContainer>
@@ -179,8 +174,8 @@ export const PlaylistContent = () => {
             cursor: !descriptionHeight
               ? "default"
               : isExpandedDescription
-              ? "default"
-              : "pointer",
+                ? "default"
+                : "pointer",
           }}
           className={
             !descriptionHeight ? "" : isExpandedDescription ? "" : "hover-click"
@@ -208,8 +203,8 @@ export const PlaylistContent = () => {
               height: !descriptionHeight
                 ? "auto"
                 : isExpandedDescription
-                ? "auto"
-                : `${descriptionHeight}px`,
+                  ? "auto"
+                  : `${descriptionHeight}px`,
               overflow: "hidden",
             }}
           >
diff --git a/src/pages/ContentPages/VideoContent/VideoContent.tsx b/src/pages/ContentPages/VideoContent/VideoContent.tsx
index 626e43a..2562bc2 100644
--- a/src/pages/ContentPages/VideoContent/VideoContent.tsx
+++ b/src/pages/ContentPages/VideoContent/VideoContent.tsx
@@ -8,12 +8,9 @@ import { DisplayHtml } from "../../../components/common/TextEditor/DisplayHtml.t
 import { VideoPlayer } from "../../../components/common/VideoPlayer/VideoPlayer.tsx";
 import {
   fontSizeSmall,
-  largeScreenSizeString,
   minFileSize,
-  smallScreenSizeString,
   smallVideoSize,
 } from "../../../constants/Misc.ts";
-import { useIsMobile } from "../../../hooks/useIsMobile.ts";
 import { formatBytes } from "../../../utils/numberFunctions.ts";
 import { formatDate } from "../../../utils/time.ts";
 import { VideoActionsBar } from "./VideoActionsBar.tsx";
@@ -25,7 +22,6 @@ import {
   VideoPlayerContainer,
   VideoTitle,
 } from "./VideoContent-styles.tsx";
-import { useSignal } from "@preact/signals-react";
 
 export const VideoContent = () => {
   const {
diff --git a/src/pages/Home/Components/VideoList.tsx b/src/pages/Home/Components/VideoList.tsx
index 5e34386..131d530 100644
--- a/src/pages/Home/Components/VideoList.tsx
+++ b/src/pages/Home/Components/VideoList.tsx
@@ -1,7 +1,7 @@
 import BlockIcon from "@mui/icons-material/Block";
 import EditIcon from "@mui/icons-material/Edit";
 import { Avatar, Box, Tooltip, Typography, useTheme } from "@mui/material";
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { PlaylistSVG } from "../../../assets/svgs/PlaylistSVG.tsx";