Fixed bug where video duration was deleted when editing a video and N…

…OT replacing its source.

Created TextField for manually entering the Video Duration when editing a video

VideoPlayer.tsx background color when video doesn't cover full page is now black

src/components/Publish/EditVideo/EditVideo.tsx

@@ -11,7 +11,7 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import { Signal, useSignal } from "@preact/signals-react";
+import { Signal, useSignal, useSignalEffect } from "@preact/signals-react";
 import Compressor from "compressorjs";
 import React, { useEffect, useState } from "react";
 import { useDropzone } from "react-dropzone";
@@ -32,6 +32,7 @@ import {
   updateVideo,
 } from "../../../state/features/videoSlice.ts";
 import { RootState } from "../../../state/store.ts";
+import BoundedNumericTextField from "../../../utils/BoundedNumericTextField.tsx";
 import { objectToBase64 } from "../../../utils/PublishFormatter.ts";
 import { FrameExtractor } from "../../common/FrameExtractor/FrameExtractor.tsx";
 import ImageUploader from "../../common/ImageUploader.tsx";
@@ -85,6 +86,10 @@ export const EditVideo = () => {
     editVideoProperties?.duration || 0,
   ]);
 
+  useEffect(() => {
+    videoDuration.value[0] = Math.floor(editVideoProperties?.duration);
+  }, [editVideoProperties]);
+
   const { getRootProps, getInputProps } = useDropzone({
     accept: {
       "video/*": [],
@@ -273,9 +278,9 @@ export const EditVideo = () => {
         videoType: file?.type || "video/mp4",
         filename: `${alphanumericString.trim()}.${fileExtension}`,
         fileSize: file?.size || 0,
-        duration: videoDuration.value[0],
+        duration: videoDuration.value[0] || editVideoProperties?.duration || 0,
       };
-
+      console.log("edit publish duration: ", videoObject?.duration);
       const metadescription =
         `**category:${category};subcategory:${subcategory};code:${editVideoProperties.code}**` +
         description.slice(0, 150);
@@ -408,7 +413,7 @@ export const EditVideo = () => {
         aria-labelledby="modal-title"
         aria-describedby="modal-description"
       >
-        <ModalBody>
+        <ModalBody sx={{ maxHeight: "98vh" }}>
           <Box
             sx={{
               display: "flex",
@@ -517,6 +522,17 @@ export const EditVideo = () => {
                   ></TimesIcon>
                 </LogoPreviewRow>
               )}
+              <BoundedNumericTextField
+                minValue={1}
+                maxValue={Number.MAX_SAFE_INTEGER}
+                label="Video Duration in Seconds"
+                addIconButtons={false}
+                allowDecimals={false}
+                initialValue={videoDuration.value[0].toString()}
+                afterChange={s => {
+                  videoDuration.value[0] = +s;
+                }}
+              />
               <CustomInputField
                 name="title"
                 label="Title of video"

src/components/common/VideoPlayer/VideoPlayer.tsx

@@ -110,6 +110,7 @@ export const VideoPlayer = forwardRef<videoRefType, VideoPlayerProps>(
             style={{
               ...videoStyles?.video,
               objectFit: videoObjectFit.value,
+              backgroundColor: "#000000",
               height:
                 isFullscreen.value && showControls
                   ? "calc(100vh - 40px)"

src/constants/Misc.ts

@@ -13,7 +13,7 @@ export const fontSizeLarge = "120%";
 export const fontSizeExLarge = "150%";
 export const maxCommentLength = 10_000;
 export const minFileSize = 1_000;
-export const minDuration = 5;
+export const minDuration = 1;
 
 const newUIWidthDiff = 120;
 const smallScreenSize = 700 - newUIWidthDiff;