Merge pull request #64 from QortalSeth/main

Bugfixes on PlaylistContent.tsx

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,
+  Box,
-  CrowdfundSubTitleRow,
+  SxProps,
-} from "../Publish/PublishVideo/PublishVideo-styles.tsx";
+  Theme,
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+  Typography,
-import { useNavigate } from "react-router-dom";
+  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/components/common/VideoPlayer/Components/VideoControls-State.ts

@@ -30,6 +30,7 @@ export const useVideoControlsState = (
     videoObjectFit,
     canPlay,
     containerRef,
+    alwaysShowControls,
   } = videoPlayerState;
   const { identifier, autoPlay } = props;
 
@@ -218,6 +219,9 @@ export const useVideoControlsState = (
       videoObjectFit.value === "contain" ? "fill" : "contain";
   };
 
+  const toggleAlwaysShowControls = () => {
+    alwaysShowControls.value = !alwaysShowControls.value;
+  };
   const keyboardShortcuts = (
     e: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>
   ) => {
@@ -228,7 +232,9 @@ export const useVideoControlsState = (
       case "o":
         toggleObjectFit();
         break;
-
+      case "c":
+        toggleAlwaysShowControls();
+        break;
       case Key.Add:
         increaseSpeed(false);
         break;

src/components/common/VideoPlayer/VideoPlayer-State.ts

@@ -16,6 +16,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { smallVideoSize } from "../../../constants/Misc.ts";
 import { setVideoPlaying } from "../../../state/features/globalSlice.ts";
 import {
+  setAlwaysShowControls,
   setIsMuted,
   setMutedVolumeSetting,
   setReduxPlaybackRate,
@@ -44,6 +45,9 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
   const videoObjectFit = useSignal<StretchVideoType>(
     persistSelector.stretchVideoSetting
   );
+  const alwaysShowControls = useSignal<boolean>(
+    persistSelector.alwaysShowControls
+  );
 
   useSignalEffect(() => {
     dispatch(setIsMuted(isMuted.value));
@@ -63,6 +67,9 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
   useSignalEffect(() => {
     dispatch(setStretchVideoSetting(videoObjectFit.value));
   });
+  useSignalEffect(() => {
+    dispatch(setAlwaysShowControls(alwaysShowControls.value));
+  });
 
   const anchorEl = useSignal(null);
 
@@ -312,5 +319,6 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
     anchorEl,
     videoObjectFit,
     isScreenSmall,
+    alwaysShowControls,
   };
 };

src/components/common/VideoPlayer/VideoPlayer.tsx

@@ -56,11 +56,13 @@ export const VideoPlayer = forwardRef<videoRefType, VideoPlayerProps>(
       videoObjectFit,
       showControlsFullScreen,
       isFullscreen,
+      alwaysShowControls,
     } = contextData;
 
     const showControls =
       !isFullscreen.value ||
-      (isFullscreen.value && showControlsFullScreen.value);
+      (isFullscreen.value && showControlsFullScreen.value) ||
+      alwaysShowControls.value;
 
     const idleTime = 5000; // Time in milliseconds
     useIdleTimeout({
@@ -76,6 +78,10 @@ export const VideoPlayer = forwardRef<videoRefType, VideoPlayerProps>(
           onKeyDown={keyboardShortcuts}
           style={{
             padding: from === "create" ? "8px" : 0,
+            cursor:
+              !showControlsFullScreen.value && isFullscreen.value
+                ? "none"
+                : "auto",
             ...videoStyles?.videoContainer,
           }}
           onMouseEnter={e => {
@@ -105,7 +111,7 @@ export const VideoPlayer = forwardRef<videoRefType, VideoPlayerProps>(
               ...videoStyles?.video,
               objectFit: videoObjectFit.value,
               height:
-                isFullscreen.value && showControlsFullScreen.value
+                isFullscreen.value && showControls
                   ? "calc(100vh - 40px)"
                   : "100%",
             }}

src/constants/Categories.ts

@@ -34,11 +34,13 @@ export const categories = [
   { id: 19, name: "Nature & Environment" },
   { id: 20, name: "Business & Finance" },
   { id: 21, name: "Personal Development" },
-  { id: 22, name: "Other" },
+  { id: 22, name: "Religion" },
   { id: 23, name: "History" },
   { id: 24, name: "Anime" },
   { id: 25, name: "Cartoons" },
   { id: 26, name: "Qortal" },
+  { id: 27, name: "Paranormal" },
+  { id: 28, name: "Spirituality" },
   { id: 99, name: "Other" },
 ].sort(sortCategory);
 

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 {
+import { fontSizeSmall, minFileSize } from "../../../constants/Misc.ts";
-  fontSizeSmall,
-  minFileSize,
-  smallScreenSizeString,
-} 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%",
+          width: isScreenSmall ? "100%" : "60%",
-          display: "grid",
+          alignSelf: "start",
-          gridTemplateColumns: isScreenSmall ? "1fr" : "60vw auto",
+          paddingRight: isScreenSmall ? "10px" : "0px",
-          gap: "20px",
+          marginBottom: "20px",
         }}
       >
         {videoReference && (
-          <Box
+          <VideoPlayer
-            sx={{
+            name={videoReference?.name}
-              aspectRatio: "16/9",
+            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" },
             }}
-          >
+            duration={videoData?.duration}
-            <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>
         )}
         {playlistData && (
           <Playlists
             playlistData={playlistData}
             currentVideoIdentifier={videoData?.id}
             onClick={getVideoData}
+            sx={playlistsSX}
           />
         )}
       </VideoPlayerContainer>
@@ -179,8 +174,8 @@ export const PlaylistContent = () => {
             cursor: !descriptionHeight
               ? "default"
               : isExpandedDescription
-              ? "default"
+                ? "default"
-              : "pointer",
+                : "pointer",
           }}
           className={
             !descriptionHeight ? "" : isExpandedDescription ? "" : "hover-click"
@@ -208,8 +203,8 @@ export const PlaylistContent = () => {
               height: !descriptionHeight
                 ? "auto"
                 : isExpandedDescription
-                ? "auto"
+                  ? "auto"
-                : `${descriptionHeight}px`,
+                  : `${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";

src/state/features/persistSlice.ts

@@ -21,6 +21,7 @@ interface settingsState {
   volume: number;
   mutedVolume: number;
   isMuted: boolean;
+  alwaysShowControls: boolean;
 }
 
 const initialState: settingsState = {
@@ -34,6 +35,7 @@ const initialState: settingsState = {
   volume: 0.5,
   mutedVolume: 0,
   isMuted: false,
+  alwaysShowControls: false,
 };
 
 export const persistSlice = createSlice({
@@ -87,6 +89,9 @@ export const persistSlice = createSlice({
     setIsMuted: (state, action: PayloadAction<boolean>) => {
       state.isMuted = action.payload;
     },
+    setAlwaysShowControls: (state, action: PayloadAction<boolean>) => {
+      state.alwaysShowControls = action.payload;
+    },
   },
 });
 
@@ -101,6 +106,7 @@ export const {
   setVolumeSetting,
   setMutedVolumeSetting,
   setIsMuted,
+  setAlwaysShowControls,
 } = persistSlice.actions;
 
 export default persistSlice.reducer;