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

@@ -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

src/components/ResponsiveImage.tsx

@@ -28,7 +28,7 @@ const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
     }, endTimeMilliSeconds);
   };
 
-  useEffect(() => endLoading(30), [endLoading]);
+  useEffect(() => endLoading(60), [endLoading]);
 
   return (
     <Box

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",
             }}
           >

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 {

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";