select modal preview is now fixed, also with better styling

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<Date>(new Date());
   const tabs = [{
     label: "All Videos",
     content: (
       <div className="searcher-container in-modal m-4" id="allVideos">
-        <VideoTabsContent debug={debug} onSelect={onSelect}/>
+        <VideoTabsContent
+          debug={debug}
+          onSelect={(data)=>{
+            onSelect(data)
+            setOnSelectTimeStamp(new Date());
+          }}
+        />
       </div>
     )
   }]
@@ -45,6 +52,7 @@ export default memo(function SelectModalWrapper({
       modalTitle={modalTitle}
       label={inputLabel}
       value={value}
+      forcedClose={onSelectTimeStamp}
       onClear={()=>{onSelect({title:"",token:""})}}
     >
       <NonRouteTabs tabs={tabs} />

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<Ref, VideoFakeyouProps>(({
+const VideoFakeyou = memo(forwardRef<Ref, VideoFakeyouProps>(({
+  width,
+  height,
+  hideIfNoMedia = false,
   wrapperClassName,
-  controls,
+  controls = true,
   muted,
   className,
   src,
@@ -32,7 +43,12 @@ const VideoFakeyou = forwardRef<Ref, VideoFakeyouProps>(({
   onResponse,
   ...rest
 }: VideoFakeyouProps, ref) => {
-  const [mediaFile, setMediaFile] = useState<MediaFileType>();
+  console.log(`Video Player rerender: ${mediaToken}`);
+
+  const [mediaFile, setMediaFile] = useState<MediaFileType|null>(null);
+  useEffect(()=>{
+    setMediaFile(null);
+  },[mediaToken])
   useMedia({
     mediaToken: mediaToken,
     onSuccess: (res: any) => {
@@ -42,10 +58,20 @@ const VideoFakeyou = forwardRef<Ref, VideoFakeyouProps>(({
   });
 
   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 (
-      <div {...{ ...makeClass("fy-video",wrapperClassName) }}>
+      <div
+        style={sizing}
+        {...{ ...makeClass("fy-video",wrapperClassName) }}
+      >
         {label && <Label label={label}/>}
         <video
           controls={controls}
@@ -60,9 +86,17 @@ const VideoFakeyou = forwardRef<Ref, VideoFakeyouProps>(({
           <source src={mediaLink} type="video/mp4" />
         </video>
       </div>
-    )
-  }
-  return null;
-});
+    );
+  }else if (!hideIfNoMedia){
+    return(
+      <div
+        style={sizing}
+        {...{ ...makeClass("fy-video",wrapperClassName) }}
+      >
+        <Spinner/>
+      </div>
+    );
+  } return null;
+}));
 
 export default VideoFakeyou;

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;
   }

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<HTMLDivElement>(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<number>(0);
-  if(ref.current){
-    ref.current.style.cursor = pointerStart >= 0 
-    ? 'grabbing' : 'grab';
-  }
-  function handleScrubStart(e: PointerEvent<HTMLDivElement>){
-    setState((curr)=>({
-      ...curr,
-      pointerStart: e.clientX
-    })); 
-  }
-  function handleScrubEnd(e: PointerEvent<HTMLDivElement>){
-    setState((curr)=>({
-      ...curr,
-      pointerStart: -1
-    })); 
-  }
-  function handleScrubMove(e: PointerEvent<HTMLDivElement>){
-    if(pointerStart >= 0  && ref.current){
-      setLeft(e.clientX - ref.current.getBoundingClientRect().left);
-    }
-  }
+  // const [left, setLeft] = useState<number>(0);
+  // if(ref.current){
+  //   ref.current.style.cursor = pointerStart >= 0 
+  //   ? 'grabbing' : 'grab';
+  // }
+  // function handleScrubStart(e: PointerEvent<HTMLDivElement>){
+  //   setState((curr)=>({
+  //     ...curr,
+  //     pointerStart: e.clientX
+  //   })); 
+  // }
+  // function handleScrubEnd(e: PointerEvent<HTMLDivElement>){
+  //   setState((curr)=>({
+  //     ...curr,
+  //     pointerStart: -1
+  //   })); 
+  // }
+  // function handleScrubMove(e: PointerEvent<HTMLDivElement>){
+  //   if(pointerStart >= 0  && ref.current){
+  //     setLeft(e.clientX - ref.current.getBoundingClientRect().left);
+  //   }
+  // }
   return(
     <div className="trim-scrubber" 
       ref={ref}
       style={{
         width: width + "%",
-        left: left
+        // left: left
       }}
-      onPointerDown={handleScrubStart}
-      onPointerUp={handleScrubEnd}
-      onPointerLeave={handleScrubEnd}
-      onPointerMove={handleScrubMove}
+      // onPointerDown={handleScrubStart}
+      // onPointerUp={handleScrubEnd}
+      // onPointerLeave={handleScrubEnd}
+      // onPointerMove={handleScrubMove}
     >
       <FontAwesomeIcon icon={faGripDots} />
     </div>

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;

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 && 
-          <VideoFakeyou mediaToken={pageState.mediaFileToken} />
+        <br/>
+        {pageState.mediaFileToken &&
+          <VideoFakeyou
+            height={500}
+            mediaToken={pageState.mediaFileToken}
+          />
         }
       </div>
       {pageState.status === states.FILE_SELECTED &&
-        <div className="col-12 d-flex justify-content-center mt-5">
+        <div className="col-12 d-flex justify-content-center mt-4">
           <NavLink to={`load/${pageState.mediaFileToken}`}>
             <Button 
               label={t("button.proceed")}