From 2bb35f9560b74488ba14fd98bf16a2de13f21938 Mon Sep 17 00:00:00 2001 From: wil Date: Thu, 12 Sep 2024 16:23:22 -0400 Subject: [PATCH] Feature/ add video 2 (#8) * api point works * upload api calls done, make better all components state changes, some asesthetic improvements * loading screens for the add video proccess * added and uploaded video now in the uiEvents for the Engine to listen and read --------- Co-authored-by: wil --- src/Classes/ApiManager/MediaUploadApi.ts | 12 ++- src/Classes/ApiManager/models/MediaFile.ts | 1 + src/KonvaApp/Engine.ts | 4 +- .../DialogAddVideo/ButtonSumbitAdd.tsx | 76 +++++++++++++ .../DialogAddVideo/DialogAddVideo.tsx | 102 ++++++++++++++++++ .../DialogAddVideo/LoadingScreens.tsx | 72 +++++++++++++ .../DialogAddVideo/QuickTrimVideoPlayer.tsx | 49 --------- .../DialogAddVideo/QuickTrimVideoUploader.tsx | 70 ++++++++++++ .../TrimmerPlaybar/TrimmerPlaybarCore.tsx | 11 +- .../DialogAddVideo/TrimmerPlaybar/index.tsx | 3 + .../TrimmerPlaybar/utilities.ts | 2 +- .../VideoControls/LabelTimeDuration.tsx | 27 ++++- .../VideoControls/VideoControls.tsx | 23 ++-- .../features/DialogAddVideo/enums.ts | 9 ++ .../features/DialogAddVideo/index.tsx | 78 +------------- .../features/FileUploader/DragAndDropZone.tsx | 14 ++- src/signals/uiEvents/addMedia.ts | 14 +-- 17 files changed, 405 insertions(+), 162 deletions(-) create mode 100644 src/components/features/DialogAddVideo/ButtonSumbitAdd.tsx create mode 100644 src/components/features/DialogAddVideo/DialogAddVideo.tsx create mode 100644 src/components/features/DialogAddVideo/LoadingScreens.tsx delete mode 100644 src/components/features/DialogAddVideo/QuickTrimVideoPlayer.tsx create mode 100644 src/components/features/DialogAddVideo/QuickTrimVideoUploader.tsx create mode 100644 src/components/features/DialogAddVideo/enums.ts diff --git a/src/Classes/ApiManager/MediaUploadApi.ts b/src/Classes/ApiManager/MediaUploadApi.ts index 7cb6145865..228de5efca 100644 --- a/src/Classes/ApiManager/MediaUploadApi.ts +++ b/src/Classes/ApiManager/MediaUploadApi.ts @@ -142,26 +142,36 @@ export class MediaUploadApi extends ApiManager { blob, fileName, uuid, + is_intermediate_system_file = true, maybe_title, maybe_visibility = Visibility.Public, maybe_style_name, maybe_scene_source_media_file_token, + maybe_trim_end_millis, + maybe_trim_start_millis, }: { blob: Blob; fileName: string; uuid: string; + is_intermediate_system_file?: boolean; maybe_title?: string; maybe_visibility?: Visibility; maybe_style_name?: string; maybe_scene_source_media_file_token?: string; + maybe_trim_end_millis?: number; + maybe_trim_start_millis?: number; }): Promise> { const endpoint = `${this.ApiTargets.BaseApi}/v1/media_files/upload/new_video`; const options: Record = { - is_intermediate_system_file: "true", + is_intermediate_system_file: is_intermediate_system_file + ? "true" + : "false", maybe_title, maybe_visibility: maybe_visibility?.toString(), maybe_style_name, maybe_scene_source_media_file_token, + maybe_trim_end_millis, + maybe_trim_start_millis, }; return this.Upload({ endpoint, blob, fileName, uuid, options }); } diff --git a/src/Classes/ApiManager/models/MediaFile.ts b/src/Classes/ApiManager/models/MediaFile.ts index 9a161fcc57..b799e11a93 100644 --- a/src/Classes/ApiManager/models/MediaFile.ts +++ b/src/Classes/ApiManager/models/MediaFile.ts @@ -27,6 +27,7 @@ export interface MediaFile { maybe_duration_millis: number | null; maybe_style_name: null | string; public_bucket_path: string; + public_bucket_url: string; cover_image: { maybe_cover_image_public_bucket_path: null | string; default_cover: { diff --git a/src/KonvaApp/Engine.ts b/src/KonvaApp/Engine.ts index 83fbb2b992..0a16826d51 100644 --- a/src/KonvaApp/Engine.ts +++ b/src/KonvaApp/Engine.ts @@ -54,8 +54,8 @@ export class Engine { this.addImage(image); }); uiEvents.onGetStagedVideo((video) => { - console.log("Engine got trim data: ", video.trimData); - this.addVideo(video.file); + console.log("Engine got video: " + video.url); + // this.addVideo(video.file); }); // TODO: You may listen to all the image toolbar events here diff --git a/src/components/features/DialogAddVideo/ButtonSumbitAdd.tsx b/src/components/features/DialogAddVideo/ButtonSumbitAdd.tsx new file mode 100644 index 0000000000..d8152b3f21 --- /dev/null +++ b/src/components/features/DialogAddVideo/ButtonSumbitAdd.tsx @@ -0,0 +1,76 @@ +import { useCallback } from "react"; +import { Signal } from "@preact/signals-react"; +import { v4 as uuidv4 } from "uuid"; + +import { MediaUploadApi, MediaFilesApi } from "~/Classes/ApiManager"; +import { TrimData } from "./TrimmerPlaybar"; +import { DialogAddMediaStatuses } from "./enums"; +import { Button } from "~/components/ui"; + +import { dispatchUiEvents } from "~/signals"; + +export const ButtonSubmitAdd = ({ + file, + trimData, + onStatusChanged, +}: { + file: File | null; + trimData: Signal; + onStatusChanged: (newStatus: DialogAddMediaStatuses) => void; +}) => { + const handleAdd = useCallback(async () => { + if (file && trimData.value) { + // setup payload + const payload = { + blob: file, + fileName: file.name, + uuid: uuidv4(), + is_intermediate_system_file: false, + maybe_trim_start_millis: Math.round(trimData.value.trimStartMs), + maybe_trim_end_millis: Math.round(trimData.value.trimEndMs), + }; + console.log("Add Video Payload >> ", payload); + + // upload the file + onStatusChanged(DialogAddMediaStatuses.FILE_UPLOADING); + const meaidaUpload = new MediaUploadApi(); + const fileUploadResponse = await meaidaUpload.UploadNewVideo(payload); + console.log("Add Video Response >> ", fileUploadResponse); + + // if upload fails + if (!fileUploadResponse.success || !fileUploadResponse.data) { + onStatusChanged(DialogAddMediaStatuses.ERROR_FILE_UPLOAD); + return; + } + + // request the file record + onStatusChanged(DialogAddMediaStatuses.FILE_RECORD_REQUESTING); + const mediaFiles = new MediaFilesApi(); + const recordRequestResponse = await mediaFiles.GetMediaFileByToken({ + mediaFileToken: fileUploadResponse.data, + }); + + // if reqest fails + if (!recordRequestResponse.success || !recordRequestResponse.data) { + onStatusChanged(DialogAddMediaStatuses.ERROR_FILE_RECORD_REQUEST); + return; + } + + // return the good result + onStatusChanged(DialogAddMediaStatuses.FILE_RECORD_RECEIVED); + console.log(recordRequestResponse); + dispatchUiEvents.addVideoToEngine({ + url: recordRequestResponse.data.public_bucket_url, + }); + } + }, [file]); + + return ( + + ); +}; diff --git a/src/components/features/DialogAddVideo/DialogAddVideo.tsx b/src/components/features/DialogAddVideo/DialogAddVideo.tsx new file mode 100644 index 0000000000..26067001b3 --- /dev/null +++ b/src/components/features/DialogAddVideo/DialogAddVideo.tsx @@ -0,0 +1,102 @@ +import { useCallback, useState } from "react"; +import { signal } from "@preact/signals-react"; +import { twMerge } from "tailwind-merge"; +import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react"; + +import { + dialogBackgroundStyles, + paperWrapperStyles, +} from "~/components/styles"; +import { Button } from "~/components/ui"; + +import { QuickTrimVideoUploader, TrimData } from "./QuickTrimVideoUploader"; +import { ButtonSubmitAdd } from "./ButtonSumbitAdd"; + +import { DialogAddMediaStatuses } from "./enums"; +import { LoadingScreens } from "./LoadingScreens"; +// import { useRenderCounter } from "~/hooks/useRenderCounter"; + +const initialState = { + file: null, + dialogStatus: DialogAddMediaStatuses.STAGING_FILE, +}; +export const DialogAddVideo = ({ + isOpen, + closeCallback, +}: { + isOpen: boolean; + closeCallback: () => void; +}) => { + // useRenderCounter("DialogAddVideo"); + + const [{ file, dialogStatus }, setStates] = useState<{ + file: File | null; + dialogStatus: DialogAddMediaStatuses; + }>(initialState); + const trimData = signal(undefined); + + const handleClose = useCallback(() => { + closeCallback(); + }, [closeCallback]); + + const changeDialogStatus = useCallback( + (newStatus: DialogAddMediaStatuses) => { + setStates((curr) => ({ ...curr, dialogStatus: newStatus })); + if (newStatus === DialogAddMediaStatuses.FILE_RECORD_RECEIVED) { + setTimeout(handleClose, 1000); + setTimeout(() => setStates(initialState), 1100); + } + }, + [handleClose], + ); + + return ( + +
+ +
+ Upload Video + {dialogStatus === DialogAddMediaStatuses.STAGING_FILE && ( + <> + { + setStates((curr) => ({ ...curr, file })); + }} + trimData={trimData} + onTrimChange={(newTrimData: TrimData) => { + trimData.value = newTrimData; + }} + /> + +
+ + + +
+ + )} + +
+ +
+ + ); +}; diff --git a/src/components/features/DialogAddVideo/LoadingScreens.tsx b/src/components/features/DialogAddVideo/LoadingScreens.tsx new file mode 100644 index 0000000000..f5cbc31de8 --- /dev/null +++ b/src/components/features/DialogAddVideo/LoadingScreens.tsx @@ -0,0 +1,72 @@ +import { LoadingSpinner } from "~/components/ui"; +import { faCircleCheck } from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { DialogAddMediaStatuses } from "./enums"; +import { Button } from "~/components/ui"; + +export const LoadingScreens = ({ + currStatus, +}: { + currStatus: DialogAddMediaStatuses; +}) => { + if (currStatus === DialogAddMediaStatuses.FILE_UPLOADING) { + return ( +
+ +
+ ); + } + if (currStatus === DialogAddMediaStatuses.FILE_RECORD_REQUESTING) { + return ( +
+ +
+ ); + } + if (currStatus === DialogAddMediaStatuses.ERROR_FILE_UPLOAD) { + return ( + + ); + } + if (currStatus === DialogAddMediaStatuses.ERROR_FILE_RECORD_REQUEST) { + return ( + + ); + } + if (currStatus === DialogAddMediaStatuses.FILE_RECORD_RECEIVED) { + return ( +
+ +

Upload and proccessing is successful!

+
+ ); + } + return null; +}; + +const ErrorScreens = ({ + title, + message, + retry, +}: { + title: string; + message: string; + retry?: () => void; +}) => { + return ( +
+

{title}

+

{message}

+ +
+ ); +}; diff --git a/src/components/features/DialogAddVideo/QuickTrimVideoPlayer.tsx b/src/components/features/DialogAddVideo/QuickTrimVideoPlayer.tsx deleted file mode 100644 index 86c2b9e173..0000000000 --- a/src/components/features/DialogAddVideo/QuickTrimVideoPlayer.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { useCallback, useState } from "react"; - -import { VideoControls } from "./VideoControls"; -import { TrimmerPlaybar, TrimData } from "./TrimmerPlaybar"; -export type { TrimData }; -export const QuickTrimVideoPlayer = ({ - file, - onTrimChange, -}: { - file: File; - onTrimChange: (trimData: TrimData) => void; -}) => { - const [vidEl, setVidEl] = useState(undefined); - - const videoRefCallback = useCallback( - (node: HTMLVideoElement) => { - if (node !== null) { - // DOM node referenced by ref has changed and exists - setVidEl(node); - } - }, - [ - // No Dependency ! - ], - ); //END videoRefCallback\ - - return ( - <> -
-
-
- - -
- - ); -}; diff --git a/src/components/features/DialogAddVideo/QuickTrimVideoUploader.tsx b/src/components/features/DialogAddVideo/QuickTrimVideoUploader.tsx new file mode 100644 index 0000000000..b7a9bbe172 --- /dev/null +++ b/src/components/features/DialogAddVideo/QuickTrimVideoUploader.tsx @@ -0,0 +1,70 @@ +import { useCallback, useState } from "react"; +import { Signal } from "@preact/signals-react"; + +import { FileUploader, VIDEO_FILE_TYPE } from "../FileUploader"; +import { VideoControls } from "./VideoControls"; +import { TrimmerPlaybar, TrimData } from "./TrimmerPlaybar"; + +export type { TrimData }; + +export const QuickTrimVideoUploader = ({ + file, + onFileStaged, + onTrimChange, + trimData, +}: { + file: File | null; + onFileStaged: (newFile: File | null) => void; + onTrimChange: (trimData: TrimData) => void; + trimData?: Signal; +}) => { + const [vidEl, setVidEl] = useState(undefined); + + const videoRefCallback = useCallback( + (node: HTMLVideoElement) => { + if (node !== null) { + // DOM node referenced by ref has changed and exists + setVidEl(node); + } + }, + [ + // No Dependency ! + ], + ); //END videoRefCallback\ + + return ( +
+ { + onFileStaged(file); + }} + /> + {file && ( + <> +
+
+
+ + +
+ + )} +
+ ); +}; diff --git a/src/components/features/DialogAddVideo/TrimmerPlaybar/TrimmerPlaybarCore.tsx b/src/components/features/DialogAddVideo/TrimmerPlaybar/TrimmerPlaybarCore.tsx index a71bd27e75..7cda417477 100644 --- a/src/components/features/DialogAddVideo/TrimmerPlaybar/TrimmerPlaybarCore.tsx +++ b/src/components/features/DialogAddVideo/TrimmerPlaybar/TrimmerPlaybarCore.tsx @@ -14,10 +14,12 @@ import { TrimData } from "./utilities"; export const TrimmerPlaybarCore = ({ vidEl, + trimData, className, onTrimChange, }: { vidEl: HTMLVideoElement; + trimData?: TrimData; className?: string; onTrimChange: (trimData: TrimData) => void; }) => { @@ -84,9 +86,10 @@ export const TrimmerPlaybarCore = ({ ...prev, durationMs: vidEl.duration * 1000, currentTimeMs: vidEl.currentTime * 1000, - trimStartMs: 0, - trimEndMs: - vidEl.duration * 1000 >= MAX_TRIM_DURATION + trimStartMs: trimData?.trimStartMs ?? 0, + trimEndMs: trimData?.trimEndMs + ? trimData.trimEndMs + : vidEl.duration * 1000 >= MAX_TRIM_DURATION ? MAX_TRIM_DURATION : vidEl.duration * 1000, })); @@ -102,8 +105,8 @@ export const TrimmerPlaybarCore = ({ vidEl.addEventListener("loadedmetadata", handleLoadedmetadata); vidEl.addEventListener("timeupdate", handleTimeupdate); return () => { - vidEl.removeEventListener("loadedmetadata", handleLoadedmetadata); vidEl.removeEventListener("timeupdate", handleTimeupdate); + vidEl.removeEventListener("loadedmetadata", handleLoadedmetadata); }; }, [vidEl]); diff --git a/src/components/features/DialogAddVideo/TrimmerPlaybar/index.tsx b/src/components/features/DialogAddVideo/TrimmerPlaybar/index.tsx index 6454331d49..6f3fae4d9d 100644 --- a/src/components/features/DialogAddVideo/TrimmerPlaybar/index.tsx +++ b/src/components/features/DialogAddVideo/TrimmerPlaybar/index.tsx @@ -4,11 +4,13 @@ import { TrimData } from "./utilities"; export type { TrimData }; export const TrimmerPlaybar = ({ vidEl, + trimData, className, onTrimChange, }: { vidEl: HTMLVideoElement | undefined; className?: string; + trimData?: TrimData; onTrimChange: (trimData: TrimData) => void; }) => { if (!vidEl) { @@ -18,6 +20,7 @@ export const TrimmerPlaybar = ({ ); diff --git a/src/components/features/DialogAddVideo/TrimmerPlaybar/utilities.ts b/src/components/features/DialogAddVideo/TrimmerPlaybar/utilities.ts index 59965051c6..234876ab7a 100644 --- a/src/components/features/DialogAddVideo/TrimmerPlaybar/utilities.ts +++ b/src/components/features/DialogAddVideo/TrimmerPlaybar/utilities.ts @@ -12,7 +12,7 @@ export type TrimData = { export function formatSecondsToHHMMSSCS(seconds: number) { //example of the ISO String: 1970-01-01T00:01:40.774Z - const isoString = new Date(seconds * 1000).toISOString(); + const isoString = new Date(Math.round(seconds * 1000)).toISOString(); if (seconds > 3600) return isoString.substring(11, 19) + "." + isoString.substring(20, 22); else return isoString.substring(14, 19) + "." + isoString.substring(20, 22); diff --git a/src/components/features/DialogAddVideo/VideoControls/LabelTimeDuration.tsx b/src/components/features/DialogAddVideo/VideoControls/LabelTimeDuration.tsx index 9987224233..4cf899f0d3 100644 --- a/src/components/features/DialogAddVideo/VideoControls/LabelTimeDuration.tsx +++ b/src/components/features/DialogAddVideo/VideoControls/LabelTimeDuration.tsx @@ -1,13 +1,32 @@ -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; export function LabelTimeDuration({ vidEl }: { vidEl: HTMLVideoElement }) { - const [currentTime, setCurrentTime] = useState(0); + const safeGetDuration = useCallback(() => { + return typeof vidEl.duration === "number" ? vidEl.duration : 0; + }, [vidEl]); + + const [{ currentTime, duration }, setState] = useState<{ + currentTime: number; + duration: number; + }>({ currentTime: 0, duration: safeGetDuration() }); + + const setCurrentTime = useCallback((newCurrentTime: number) => { + setState((curr) => ({ ...curr, currentTime: newCurrentTime })); + }, []); useEffect(() => { const handleTimeStamp = () => setCurrentTime(vidEl.currentTime || 0); + const handleLoadedmetadata = () => { + setState((curr) => ({ + ...curr, + duration: safeGetDuration(), + })); + }; vidEl.addEventListener("timeupdate", handleTimeStamp); + vidEl.addEventListener("loadedmetadata", handleLoadedmetadata); return () => { + vidEl.removeEventListener("loadedmetadata", handleLoadedmetadata); vidEl.removeEventListener("timeupdate", handleTimeStamp); }; }, [vidEl]); @@ -16,13 +35,13 @@ export function LabelTimeDuration({ vidEl }: { vidEl: HTMLVideoElement }) {

{`${formatSecondsToHHMMSSCS(currentTime)}`}

/ -

{`${formatSecondsToHHMMSSCS(vidEl.duration)}`}

+

{`${formatSecondsToHHMMSSCS(duration)}`}

); } function formatSecondsToHHMMSSCS(seconds: number) { //example of the ISO String: 1970-01-01T00:01:40.774Z - const isoString = new Date(seconds * 1000).toISOString(); + const isoString = new Date(Math.round(seconds * 1000)).toISOString(); if (seconds > 3600) return isoString.substring(11, 19) + "." + isoString.substring(20, 22); else return isoString.substring(14, 19) + "." + isoString.substring(20, 22); diff --git a/src/components/features/DialogAddVideo/VideoControls/VideoControls.tsx b/src/components/features/DialogAddVideo/VideoControls/VideoControls.tsx index 38451ed981..b7ad7ac2f7 100644 --- a/src/components/features/DialogAddVideo/VideoControls/VideoControls.tsx +++ b/src/components/features/DialogAddVideo/VideoControls/VideoControls.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { twMerge } from "tailwind-merge"; import { VIDEO_STATE_STATUSES } from "./enum"; @@ -14,32 +14,43 @@ export const VideoControls = ({ vidEl: HTMLVideoElement | undefined; className?: string; }) => { + const prevVidEl = useRef(undefined); const [status, setStatus] = useState( VIDEO_STATE_STATUSES.INIT, ); useEffect(() => { + // helper function for removing listenders const handleLoadedmetadata = () => { if (vidEl) { setStatus(VIDEO_STATE_STATUSES.METADATA_LOADED); + prevVidEl.current = vidEl; } }; - // DOM node referencs has changed and exists - if (vidEl) { - vidEl.addEventListener("loadedmetadata", handleLoadedmetadata); - } + // DOM node referencs has changed + setStatus(VIDEO_STATE_STATUSES.INIT); + // if the node exist, attach the listener and its remover + vidEl?.addEventListener("loadedmetadata", handleLoadedmetadata); return () => { vidEl?.removeEventListener("loadedmetadata", handleLoadedmetadata); }; }, [vidEl]); + useEffect(() => { + prevVidEl.current = vidEl; + }, []); + const wrapperClass = twMerge( "flex w-full h-10 justify-center items-center gap-2", className, ); - if (status === VIDEO_STATE_STATUSES.METADATA_LOADED && vidEl) { + if ( + status === VIDEO_STATE_STATUSES.METADATA_LOADED && + vidEl && + prevVidEl.current === vidEl + ) { return (
diff --git a/src/components/features/DialogAddVideo/enums.ts b/src/components/features/DialogAddVideo/enums.ts new file mode 100644 index 0000000000..03cb7cd413 --- /dev/null +++ b/src/components/features/DialogAddVideo/enums.ts @@ -0,0 +1,9 @@ +export enum DialogAddMediaStatuses { + STAGING_FILE = "STAGING_FILE", + FILE_UPLOADING = "FILE_UPLOADING", + FILE_UPLOADED = "FILE_UPLOADED", + ERROR_FILE_UPLOAD = "ERROR_FILE_UPLOAD", + FILE_RECORD_REQUESTING = "FILE_RECORD_REQUESTING", + FILE_RECORD_RECEIVED = "FILE_RECORD_RECEIVED", + ERROR_FILE_RECORD_REQUEST = "ERROR_FILE_RECORD_REQUEST", +} diff --git a/src/components/features/DialogAddVideo/index.tsx b/src/components/features/DialogAddVideo/index.tsx index 8396d2420d..e743ea5be4 100644 --- a/src/components/features/DialogAddVideo/index.tsx +++ b/src/components/features/DialogAddVideo/index.tsx @@ -1,77 +1 @@ -import { useState, useRef } from "react"; -import { twMerge } from "tailwind-merge"; -import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react"; - -import { FileUploader, VIDEO_FILE_TYPE } from "../FileUploader"; -import { Button } from "~/components/ui"; - -import { - dialogBackgroundStyles, - paperWrapperStyles, -} from "~/components/styles"; -import { dispatchUiEvents } from "~/signals/uiEvents"; -import { QuickTrimVideoPlayer, TrimData } from "./QuickTrimVideoPlayer"; - -export const DialogAddVideo = ({ - isOpen, - closeCallback, -}: { - isOpen: boolean; - closeCallback: () => void; -}) => { - const [assetFile, setAssetFile] = useState(null); - const trimDataRef = useRef(undefined); - - function handleClose() { - setAssetFile(null); - closeCallback(); - } - - function handleEnter() { - if (assetFile) { - dispatchUiEvents.addVideoToEngine(assetFile, trimDataRef.current); - } - handleClose(); - } - - return ( - -
- - Upload Video -
- { - setAssetFile(file); - }} - /> - {assetFile && ( - { - trimDataRef.current = trimData; - }} - /> - )} -
-
- - -
- -
- - ); -}; +export * from "./DialogAddVideo"; diff --git a/src/components/features/FileUploader/DragAndDropZone.tsx b/src/components/features/FileUploader/DragAndDropZone.tsx index 6a31e76d61..1e29d9f907 100644 --- a/src/components/features/FileUploader/DragAndDropZone.tsx +++ b/src/components/features/FileUploader/DragAndDropZone.tsx @@ -22,7 +22,7 @@ export const DragAndDropZone = ({ file, fileTypes }: Props) => { ? `${Math.floor(file.size / 1024)} KB` : null; - const fileName = file && getFileName(file).toUpperCase(); + // const fileName = file && getFileName(file).toUpperCase(); const wrapperClassName = twMerge( "group cursor-pointer p-3 bg-gray-100", !file && "aspect-video flex flex-col items-center justify-center gap-6", @@ -54,15 +54,13 @@ export const DragAndDropZone = ({ file, fileTypes }: Props) => {

{file.name.slice(0, file.name.lastIndexOf("."))}

-

- - {`${fileName} file size: ${fileSize} `} - - - Change File - +

+ {`file size: ${fileSize} `}

+
+

Change File

+
); } diff --git a/src/signals/uiEvents/addMedia.ts b/src/signals/uiEvents/addMedia.ts index e82da246a4..5ae05674e9 100644 --- a/src/signals/uiEvents/addMedia.ts +++ b/src/signals/uiEvents/addMedia.ts @@ -1,5 +1,4 @@ import { signal, effect } from "@preact/signals-react"; -import { TrimData } from "~/components/features/DialogAddVideo/TrimmerPlaybar"; const stagedImage = signal(null); @@ -15,18 +14,13 @@ const onGetStagedImage = (callback: (file: File) => void) => { }); }; -const stagedVideo = signal<{ file: File; trimData?: TrimData } | null>(null); +const stagedVideo = signal<{ url: string } | null>(null); -const addVideoToEngine = (file: File, trimData?: TrimData) => { - stagedVideo.value = { file, trimData }; +const addVideoToEngine = (videoData: { url: string }) => { + stagedVideo.value = videoData; }; -const onGetStagedVideo = ( - callback: (videoData: { - file: File; - trimData?: { trimStartMs: number; trimEndMs: number }; - }) => void, -) => { +const onGetStagedVideo = (callback: (videoData: { url: string }) => void) => { effect(() => { if (stagedVideo.value) { callback(stagedVideo.value);