Merge pull request #68 from QortalSeth/main

M4V videos are explicitly stated to be supported on the Publish Form

src/components/Publish/PublishVideo/PublishVideo.tsx

@@ -741,8 +741,8 @@ export const PublishVideo = ({
               <Box>
                 <CodecTypography>
                   Supported File Containers:{" "}
-                  <span style={{ fontWeight: "bold" }}>MP4</span>, Ogg, WebM,
-                  WAV
+                  <span style={{ fontWeight: "bold" }}>MP4</span>, M4V, OGG,
+                  WEBM, WAV
                 </CodecTypography>
                 <CodecTypography>
                   Audio Codecs: <span style={{ fontWeight: "bold" }}>Opus</span>

src/components/common/Notification/Notification.tsx

@@ -1,52 +1,52 @@
-import { useDispatch, useSelector } from 'react-redux'
-import { toast, ToastContainer, Zoom, Slide } from 'react-toastify'
-import { removeNotification } from '../../../state/features/notificationsSlice'
-import 'react-toastify/dist/ReactToastify.css'
-import { RootState } from '../../../state/store'
+import { useDispatch, useSelector } from "react-redux";
+import { toast, ToastContainer, Zoom, Slide } from "react-toastify";
+import { removeNotification } from "../../../state/features/notificationsSlice";
+import "react-toastify/dist/ReactToastify.css";
+import { RootState } from "../../../state/store";
 
 const Notification = () => {
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
-  const { alertTypes } = useSelector((state: RootState) => state.notifications)
+  const { alertTypes } = useSelector((state: RootState) => state.notifications);
 
   if (alertTypes.alertError) {
     toast.error(`❌ ${alertTypes?.alertError}`, {
-      position: 'bottom-right',
+      position: "bottom-right",
       autoClose: 4000,
       hideProgressBar: false,
       closeOnClick: true,
       pauseOnHover: true,
       draggable: true,
       progress: undefined,
-      icon: false
-    })
-    dispatch(removeNotification())
+      icon: false,
+    });
+    dispatch(removeNotification());
   }
   if (alertTypes.alertSuccess) {
     toast.success(`✔️ ${alertTypes?.alertSuccess}`, {
-      position: 'bottom-right',
+      position: "bottom-right",
       autoClose: 4000,
       hideProgressBar: false,
       closeOnClick: true,
       pauseOnHover: true,
       draggable: true,
       progress: undefined,
-      icon: false
-    })
-    dispatch(removeNotification())
+      icon: false,
+    });
+    dispatch(removeNotification());
   }
   if (alertTypes.alertInfo) {
     toast.info(`${alertTypes?.alertInfo}`, {
-      position: 'top-right',
+      position: "top-right",
       autoClose: 1300,
       hideProgressBar: false,
       closeOnClick: true,
       pauseOnHover: true,
       draggable: true,
       progress: undefined,
-      theme: 'light'
-    })
-    dispatch(removeNotification())
+      theme: "light",
+    });
+    dispatch(removeNotification());
   }
 
   if (alertTypes.alertInfo) {
@@ -62,10 +62,10 @@ const Notification = () => {
         draggable
         pauseOnHover
         theme="light"
-        toastStyle={{ fontSize: '16px' }}
+        toastStyle={{ fontSize: "16px" }}
         transition={Slide}
       />
-    )
+    );
   }
 
   return (
@@ -80,7 +80,7 @@ const Notification = () => {
       draggable
       pauseOnHover
     />
-  )
-}
+  );
+};
 
-export default Notification
+export default Notification;

src/components/common/VideoPlayer/Components/MobileControlsBar.tsx

@@ -14,9 +14,15 @@ import {
 } from "./VideoControls.tsx";
 
 export const MobileControlsBar = () => {
-  const { handleMenuOpen, handleMenuClose, anchorEl } = useVideoContext();
+  const { handleMenuOpen, handleMenuClose, anchorEl, controlsHeight } =
+    useVideoContext();
 
-  const controlGroupSX = { display: "flex", gap: "5px", alignItems: "center" };
+  const controlGroupSX = {
+    display: "flex",
+    gap: "5px",
+    alignItems: "center",
+    height: controlsHeight,
+  };
 
   return (
     <>
@@ -36,7 +42,7 @@ export const MobileControlsBar = () => {
           color="inherit"
           aria-label="menu"
           onClick={handleMenuOpen}
-          sx={{ minWidth: "30px", paddingLeft: "0px" }}
+          sx={{ paddingLeft: "0px", marginRight: "0px" }}
         >
           <MoreIcon />
         </IconButton>

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

@@ -42,6 +42,7 @@ export const useVideoControlsState = (
     (state: RootState) => state.global.videoPlaying
   );
 
+  const controlsHeight = "42px";
   const minSpeed = 0.25;
   const maxSpeed = 4.0;
   const speedChange = 0.25;
@@ -372,5 +373,6 @@ export const useVideoControlsState = (
     isFullscreen,
     toggleObjectFit,
     setObjectFit,
+    controlsHeight,
   };
 };

src/components/common/VideoPlayer/Components/VideoControls.tsx

@@ -15,13 +15,17 @@ import {
 } from "@mui/icons-material";
 import { useSignalEffect } from "@preact/signals-react";
 
+const buttonPaddingBig = "6px";
+const buttonPaddingSmall = "4px";
+
 export const PlayButton = () => {
-  const { togglePlay, playing } = useVideoContext();
+  const { togglePlay, playing, isScreenSmall } = useVideoContext();
   return (
     <CustomFontTooltip title="Pause/Play (Spacebar)" placement="bottom" arrow>
       <IconButton
         sx={{
           color: "white",
+          padding: isScreenSmall ? buttonPaddingSmall : buttonPaddingBig,
         }}
         onClick={() => togglePlay()}
       >
@@ -32,12 +36,13 @@ export const PlayButton = () => {
 };
 
 export const ReloadButton = () => {
-  const { reloadVideo } = useVideoContext();
+  const { reloadVideo, isScreenSmall } = useVideoContext();
   return (
     <CustomFontTooltip title="Reload Video (R)" placement="bottom" arrow>
       <IconButton
         sx={{
           color: "white",
+          padding: isScreenSmall ? buttonPaddingSmall : buttonPaddingBig,
         }}
         onClick={reloadVideo}
       >
@@ -164,6 +169,7 @@ export const VolumeControl = ({ sliderWidth }: { sliderWidth: string }) => {
     </Box>
   );
 };
+
 export const PlaybackRate = () => {
   const { playbackRate, increaseSpeed, isScreenSmall } = useVideoContext();
   return (
@@ -175,22 +181,37 @@ export const PlaybackRate = () => {
       <IconButton
         sx={{
           color: "white",
-          fontSize: isScreenSmall ? fontSizeExSmall : fontSizeSmall,
-          paddingTop: "0px",
-          paddingBottom: "0px",
+          fontSize: fontSizeSmall,
+          padding: isScreenSmall ? buttonPaddingSmall : buttonPaddingBig,
         }}
         onClick={() => increaseSpeed()}
       >
-        <span style={{ display: "flex", alignItems: "center", height: "40px" }}>
-          {playbackRate}x
-        </span>
+        {playbackRate}x
+      </IconButton>
+    </CustomFontTooltip>
+  );
+};
+
+export const ObjectFitButton = () => {
+  const { toggleObjectFit, isScreenSmall } = useVideoContext();
+  return (
+    <CustomFontTooltip title="Toggle Aspect Ratio (O)" placement="bottom" arrow>
+      <IconButton
+        sx={{
+          color: "white",
+          padding: isScreenSmall ? buttonPaddingSmall : buttonPaddingBig,
+        }}
+        onClick={() => toggleObjectFit()}
+      >
+        <AspectRatioIcon />
       </IconButton>
     </CustomFontTooltip>
   );
 };
 
 export const PictureInPictureButton = () => {
-  const { isFullscreen, toggleRef, togglePictureInPicture } = useVideoContext();
+  const { isFullscreen, toggleRef, togglePictureInPicture, isScreenSmall } =
+    useVideoContext();
   return (
     <>
       {!isFullscreen.value && (
@@ -202,6 +223,7 @@ export const PictureInPictureButton = () => {
           <IconButton
             sx={{
               color: "white",
+              padding: isScreenSmall ? buttonPaddingSmall : buttonPaddingBig,
             }}
             ref={toggleRef}
             onClick={togglePictureInPicture}
@@ -214,31 +236,14 @@ export const PictureInPictureButton = () => {
   );
 };
 
-export const ObjectFitButton = () => {
-  const { toggleObjectFit } = useVideoContext();
-  return (
-    <CustomFontTooltip title="Toggle Aspect Ratio (O)" placement="bottom" arrow>
-      <IconButton
-        sx={{
-          color: "white",
-          paddingRight: "0px",
-        }}
-        onClick={() => toggleObjectFit()}
-      >
-        <AspectRatioIcon />
-      </IconButton>
-    </CustomFontTooltip>
-  );
-};
-
 export const FullscreenButton = () => {
-  const { toggleFullscreen } = useVideoContext();
+  const { toggleFullscreen, isScreenSmall } = useVideoContext();
   return (
     <CustomFontTooltip title="Toggle Fullscreen (F)" placement="bottom" arrow>
       <IconButton
         sx={{
           color: "white",
-          paddingRight: "0px",
+          padding: isScreenSmall ? buttonPaddingSmall : buttonPaddingBig,
         }}
         onClick={() => toggleFullscreen()}
       >

src/components/common/VideoPlayer/Components/VideoControlsBar.tsx

@@ -15,11 +15,10 @@ import {
 } from "./VideoControls.tsx";
 
 export const VideoControlsBar = () => {
-  const { from, canPlay, showControlsFullScreen, isScreenSmall, progress } =
-    useVideoContext();
+  const { canPlay, isScreenSmall, controlsHeight } = useVideoContext();
 
   const showMobileControls = isScreenSmall && canPlay.value;
-  const controlsHeight = "42px";
+
   const controlGroupSX = {
     display: "flex",
     gap: "5px",