From 6b6aa69efe27545290fcf64b3e9e6d82dbbbef7b Mon Sep 17 00:00:00 2001 From: wil Date: Mon, 4 Mar 2024 23:20:29 -0500 Subject: [PATCH] select modal preview is now fixed, also with better styling --- .../SelectModalVideoTabs.tsx | 10 ++- .../common/VideoFakeyou/VideoFakeyou.tsx | 56 ++++++++++--- .../common/VideoFakeyou/styles.scss | 10 ++- .../common/VideoQuickTrim/TrimScrubber.tsx | 78 +++++++++---------- .../common/VideoQuickTrim/styles.scss | 4 +- .../components/tabContentLibrary.tsx | 11 ++- 6 files changed, 113 insertions(+), 56 deletions(-) diff --git a/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx index 242482cd51..c8358787ae 100644 --- a/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx +++ b/packages/fakeyou.com/src/components/common/SelectModalVideoTabs/SelectModalVideoTabs.tsx @@ -32,11 +32,18 @@ export default memo(function SelectModalWrapper({ inputLabel: string; onSelect: (data:SelectModalData) => void; }) { + const [onSelectTimeStamp, setOnSelectTimeStamp] = useState(new Date()); const tabs = [{ label: "All Videos", content: (
- + { + onSelect(data) + setOnSelectTimeStamp(new Date()); + }} + />
) }] @@ -45,6 +52,7 @@ export default memo(function SelectModalWrapper({ modalTitle={modalTitle} label={inputLabel} value={value} + forcedClose={onSelectTimeStamp} onClear={()=>{onSelect({title:"",token:""})}} > diff --git a/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx b/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx index cca28d79f5..86eceef8a8 100644 --- a/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx +++ b/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx @@ -1,14 +1,22 @@ -import React, { useState, forwardRef } from "react"; +import React, { + useState, + forwardRef, + memo, + useEffect, +} from "react"; import { useMedia } from "hooks"; import { MediaFileType } from "@storyteller/components/src/api"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; import makeClass from "resources/makeClass"; -import { Label } from "components/common"; +import { Label, Spinner } from "components/common"; import './styles.scss'; export interface VideoFakeyouProps{ + width?: number|string; + height?: number|string; + hideIfNoMedia?: boolean; wrapperClassName?: string; controls?:boolean; muted?:boolean; @@ -21,9 +29,12 @@ export interface VideoFakeyouProps{ type Ref = HTMLVideoElement; -const VideoFakeyou = forwardRef(({ +const VideoFakeyou = memo(forwardRef(({ + width, + height, + hideIfNoMedia = false, wrapperClassName, - controls, + controls = true, muted, className, src, @@ -32,7 +43,12 @@ const VideoFakeyou = forwardRef(({ onResponse, ...rest }: VideoFakeyouProps, ref) => { - const [mediaFile, setMediaFile] = useState(); + console.log(`Video Player rerender: ${mediaToken}`); + + const [mediaFile, setMediaFile] = useState(null); + useEffect(()=>{ + setMediaFile(null); + },[mediaToken]) useMedia({ mediaToken: mediaToken, onSuccess: (res: any) => { @@ -42,10 +58,20 @@ const VideoFakeyou = forwardRef(({ }); const mediaLink = src || (mediaFile && new BucketConfig().getGcsUrl(mediaFile.public_bucket_path)); - + const sizing = { + height: typeof height === "number" ? height+'px' + : typeof height === "string" ? height + :"auto", + width: typeof width === "number" ? width+'px' + : typeof width === "string" ? width + :"auto", + } if (mediaLink){ return ( -
+
{label &&
- ) - } - return null; -}); + ); + }else if (!hideIfNoMedia){ + return( +
+ +
+ ); + } return null; +})); export default VideoFakeyou; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/common/VideoFakeyou/styles.scss b/packages/fakeyou.com/src/components/common/VideoFakeyou/styles.scss index 0015270314..322c99da9d 100644 --- a/packages/fakeyou.com/src/components/common/VideoFakeyou/styles.scss +++ b/packages/fakeyou.com/src/components/common/VideoFakeyou/styles.scss @@ -5,7 +5,15 @@ width: 100%; margin: 0; position: relative; - + background-color: $bg; + border-radius: 0.5rem; + border: $panel-inner-border 1px solid; + .fy-spinner{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } &.fit-content { height: fit-content; } diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx b/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx index cc931e7fa4..531ffb32f1 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/TrimScrubber.tsx @@ -1,7 +1,7 @@ import React, { useRef, - useState, - PointerEvent + // useState, + // PointerEvent } from 'react'; import { faGripDots @@ -22,50 +22,50 @@ export default function TrimScrubber({ onChange:(val:QuickTrimData)=>void }){ const ref = useRef(null); - const [{ - leftOffset, - pointerStart - }, setState] = useState<{ - leftOffset:number - pointerStart:number - }>({ - leftOffset:0, - pointerStart: -1 - }); + // const [{ + // // leftOffset, + // pointerStart + // }, setState] = useState<{ + // leftOffset:number + // pointerStart:number + // }>({ + // leftOffset:0, + // pointerStart: -1 + // }); - const [left, setLeft] = useState(0); - if(ref.current){ - ref.current.style.cursor = pointerStart >= 0 - ? 'grabbing' : 'grab'; - } - function handleScrubStart(e: PointerEvent){ - setState((curr)=>({ - ...curr, - pointerStart: e.clientX - })); - } - function handleScrubEnd(e: PointerEvent){ - setState((curr)=>({ - ...curr, - pointerStart: -1 - })); - } - function handleScrubMove(e: PointerEvent){ - if(pointerStart >= 0 && ref.current){ - setLeft(e.clientX - ref.current.getBoundingClientRect().left); - } - } + // const [left, setLeft] = useState(0); + // if(ref.current){ + // ref.current.style.cursor = pointerStart >= 0 + // ? 'grabbing' : 'grab'; + // } + // function handleScrubStart(e: PointerEvent){ + // setState((curr)=>({ + // ...curr, + // pointerStart: e.clientX + // })); + // } + // function handleScrubEnd(e: PointerEvent){ + // setState((curr)=>({ + // ...curr, + // pointerStart: -1 + // })); + // } + // function handleScrubMove(e: PointerEvent){ + // if(pointerStart >= 0 && ref.current){ + // setLeft(e.clientX - ref.current.getBoundingClientRect().left); + // } + // } return(
diff --git a/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss b/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss index 28aa477ebc..417575beae 100644 --- a/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss +++ b/packages/fakeyou.com/src/components/common/VideoQuickTrim/styles.scss @@ -15,6 +15,8 @@ $playbar-height: 2rem; max-height: 500px; width: 100%; margin-bottom: -7px; + border-radius: 0.5rem 0.5rem 0 0; + border: none; video { border-radius: 0.5rem 0.5rem 0 0; @@ -88,7 +90,7 @@ $playbar-height: 2rem; outline: 0.125rem $white solid; border-top: 1rem $white solid; border-radius: 0.25rem 0.25rem 0.125rem 0.125rem; - cursor: grab; + // cursor: grab; display: flex; justify-content: center; diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/tabContentLibrary.tsx index 56d84c5672..621969686c 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/tabContentLibrary.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/tabContentLibrary.tsx @@ -12,6 +12,7 @@ export default function TabContentLibrary({ pageState: State; dispatchPageState: (action: Action) => void; }){ + console.log(`Tab Rerender, selected: ${pageState.mediaFileToken}`); const handleProceed = ()=>{ dispatchPageState({type: "loadFile"}) } @@ -35,12 +36,16 @@ export default function TabContentLibrary({ inputLabel="Select a Video" onSelect={handleOnSelect} /> - {pageState.mediaFileToken && - +
+ {pageState.mediaFileToken && + }
{pageState.status === states.FILE_SELECTED && -
+