From 3fc2ebf2db054572e5dbecaee5f2612b3c6914f8 Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Tue, 13 Feb 2024 19:45:45 -0500
Subject: [PATCH] video component namespace change, useMedia hook improved,
 usePrevious hook, VideoFakeyou component

---
 .../src/components/common/BasicVideo/index.ts |  1 -
 .../VideoBasic.scss}                          |  0
 .../VideoBasic.tsx}                           |  4 +-
 .../src/components/common/VideoBasic/index.ts |  1 +
 .../common/VideoFakeyou/VideoFakeyou.tsx      | 41 +++++++++++++++++++
 .../components/common/VideoFakeyou/index.ts   |  1 +
 .../src/components/common/index.tsx           |  4 +-
 packages/fakeyou.com/src/hooks/index.tsx      |  2 +
 .../src/hooks/useMedia/useMedia.tsx           | 17 ++++++--
 .../src/hooks/usePrevious/index.tsx           |  1 +
 .../src/hooks/usePrevious/usePrevious.tsx     |  8 ++++
 .../view/pages/face_animator/FaceAnimator.tsx |  4 +-
 .../sub_views/FaceAnimatorInput.tsx           | 12 +++++-
 .../v2/view/pages/video_mocap/VideoMocap.tsx  |  2 +-
 .../components/tabContentLibrary.tsx          |  5 +++
 .../components/pageVideoProvision.tsx         |  2 +-
 .../components/tabContentLibrary.tsx          |  4 ++
 .../video_workflow/videoWorkflowReducer.tsx   |  5 ++-
 18 files changed, 99 insertions(+), 15 deletions(-)
 delete mode 100644 packages/fakeyou.com/src/components/common/BasicVideo/index.ts
 rename packages/fakeyou.com/src/components/common/{BasicVideo/BasicVideo.scss => VideoBasic/VideoBasic.scss} (100%)
 rename packages/fakeyou.com/src/components/common/{BasicVideo/BasicVideo.tsx => VideoBasic/VideoBasic.tsx} (94%)
 create mode 100644 packages/fakeyou.com/src/components/common/VideoBasic/index.ts
 create mode 100644 packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/VideoFakeyou/index.ts
 create mode 100644 packages/fakeyou.com/src/hooks/usePrevious/index.tsx
 create mode 100644 packages/fakeyou.com/src/hooks/usePrevious/usePrevious.tsx

diff --git a/packages/fakeyou.com/src/components/common/BasicVideo/index.ts b/packages/fakeyou.com/src/components/common/BasicVideo/index.ts
deleted file mode 100644
index 006a41e25a..0000000000
--- a/packages/fakeyou.com/src/components/common/BasicVideo/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './BasicVideo';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/BasicVideo/BasicVideo.scss b/packages/fakeyou.com/src/components/common/VideoBasic/VideoBasic.scss
similarity index 100%
rename from packages/fakeyou.com/src/components/common/BasicVideo/BasicVideo.scss
rename to packages/fakeyou.com/src/components/common/VideoBasic/VideoBasic.scss
diff --git a/packages/fakeyou.com/src/components/common/BasicVideo/BasicVideo.tsx b/packages/fakeyou.com/src/components/common/VideoBasic/VideoBasic.tsx
similarity index 94%
rename from packages/fakeyou.com/src/components/common/BasicVideo/BasicVideo.tsx
rename to packages/fakeyou.com/src/components/common/VideoBasic/VideoBasic.tsx
index dbc74d9aba..8ccada2ce0 100644
--- a/packages/fakeyou.com/src/components/common/BasicVideo/BasicVideo.tsx
+++ b/packages/fakeyou.com/src/components/common/VideoBasic/VideoBasic.tsx
@@ -4,7 +4,7 @@ import { useVideo } from "hooks";
 import makeClass from "resources/makeClass";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlay } from "@fortawesome/free-solid-svg-icons";
-import "./BasicVideo.scss"
+import "./VideoBasic.scss"
 
 interface Props {
   className?: string;
@@ -13,7 +13,7 @@ interface Props {
   description?: string;
 }
 
-export default function BasicVideo({
+export default function VideoBasic({
   className,
   src,
   title,
diff --git a/packages/fakeyou.com/src/components/common/VideoBasic/index.ts b/packages/fakeyou.com/src/components/common/VideoBasic/index.ts
new file mode 100644
index 0000000000..4657f288da
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/VideoBasic/index.ts
@@ -0,0 +1 @@
+export { default } from './VideoBasic';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx b/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx
new file mode 100644
index 0000000000..18e1c3f105
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/VideoFakeyou/VideoFakeyou.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { useMedia } from "hooks";
+import { MediaFile } from "@storyteller/components/src/api/media_files/GetMediaFile";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
+import makeClass from "resources/makeClass";
+
+
+
+interface Props {
+  className?: string;
+  src?: string;
+  mediaToken?: string;
+}
+
+export default function VideoFromFakeyou({
+  className,
+  src,
+  mediaToken,
+  ...rest
+}: Props) {
+  const [mediaFile, setMediaFile] = useState<MediaFile>();
+  useMedia({
+    mediaToken: mediaToken,
+    onSuccess: (res: any) => {
+      setMediaFile(res)
+    },
+  });
+
+  const mediaLink = src || (mediaFile && new BucketConfig().getGcsUrl(mediaFile.public_bucket_path));
+
+  if (mediaLink){
+    return (
+      <div {...{ ...makeClass("fy-basic-video",className) }}>
+        <video controls key={mediaToken} {...rest}>
+          <source src={mediaLink} type="video/mp4" />
+        </video>
+      </div>
+    )
+  }
+  return null;
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/VideoFakeyou/index.ts b/packages/fakeyou.com/src/components/common/VideoFakeyou/index.ts
new file mode 100644
index 0000000000..0580d86eb1
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/VideoFakeyou/index.ts
@@ -0,0 +1 @@
+export { default } from './VideoFakeyou';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx
index e3c262bc35..8bb37476b1 100644
--- a/packages/fakeyou.com/src/components/common/index.tsx
+++ b/packages/fakeyou.com/src/components/common/index.tsx
@@ -2,7 +2,6 @@ import Accordion from "./Accordion";
 import AudioBlobPreview from "./AudioBlobPreview";
 import AudioInput from "./AudioInput";
 import Badge from "./Badge";
-import BasicVideo from "./BasicVideo";
 import Button from "./Button";
 import Checkbox from "./Checkbox";
 import Container from "./Container";
@@ -38,6 +37,7 @@ import TempTextArea from "./TempTextArea";
 import TextArea from "./TextArea";
 import TextAreaV2 from "./TextAreaV2";
 import TintSpinner from "./TintSpinner";
+import VideoBasic from "./VideoBasic";
 import VideoInput from "./VideoInput";
 
 export {
@@ -45,7 +45,6 @@ export {
   AudioBlobPreview,
   AudioInput,
   Badge,
-  BasicVideo,
   Button,
   Checkbox,
   Container,
@@ -81,5 +80,6 @@ export {
   TextArea,
   TextAreaV2,
   TintSpinner,
+  VideoBasic,
   VideoInput
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/hooks/index.tsx b/packages/fakeyou.com/src/hooks/index.tsx
index 3fb6d3bfaf..7ea044b608 100644
--- a/packages/fakeyou.com/src/hooks/index.tsx
+++ b/packages/fakeyou.com/src/hooks/index.tsx
@@ -14,6 +14,7 @@ import useLocalize from './useLocalize';
 import useMedia from './useMedia';
 import useModal from './useModal';
 import useOnScreen from "./useOnScreen";
+import usePrevious from './usePrevious';
 import useRatings from './useRatings';
 import useSdUpload from './useSdUpload';
 import useSession from './useSession';
@@ -37,6 +38,7 @@ export {
   useMedia,
   useModal,
   useOnScreen,
+  usePrevious,
   useRatings,
   useSdUpload,
   useSession,
diff --git a/packages/fakeyou.com/src/hooks/useMedia/useMedia.tsx b/packages/fakeyou.com/src/hooks/useMedia/useMedia.tsx
index 8c1a616337..b8fbfc24b7 100644
--- a/packages/fakeyou.com/src/hooks/useMedia/useMedia.tsx
+++ b/packages/fakeyou.com/src/hooks/useMedia/useMedia.tsx
@@ -2,8 +2,13 @@ import { useEffect, useState } from 'react';
 import { GetMedia, MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
 import { DeleteMedia } from "@storyteller/components/src/api/media_files/DeleteMedia";
 import { FetchStatus } from "@storyteller/components/src/api/_common/SharedFetchTypes";
+import {usePrevious} from "hooks";
 
-export default function useMedia({ mediaToken = "", onSuccess = (res:MediaFile) => {}, onRemove = (res: any) => {}, }) {
+export default function useMedia({
+  mediaToken = "",
+  onSuccess = (res:MediaFile) => {},
+  onRemove = (res: any) => {},
+}) {
   const [status, statusSet] = useState(FetchStatus.ready);
   const [writeStatus, writeStatusSet] = useState(FetchStatus.paused);
   const [media,mediaSet] = useState<MediaFile | undefined>();
@@ -18,9 +23,14 @@ export default function useMedia({ mediaToken = "", onSuccess = (res:MediaFile)
       onRemove(res);
     });
   };
-
+  
+  const previousToken = usePrevious(mediaToken);
+  
   useEffect(() => {
-    if (!media && mediaToken && status === FetchStatus.ready) {
+    if (
+      mediaToken &&
+      (!media || previousToken !== mediaToken )
+    ) {
       statusSet(FetchStatus.in_progress);
       GetMedia(mediaToken,{})
       .then((res) => {
@@ -36,5 +46,6 @@ export default function useMedia({ mediaToken = "", onSuccess = (res:MediaFile)
     }
 
   },[media, mediaToken, onSuccess, status, statusSet]);
+
  return { media, mediaSet, remove, status, writeStatus };
 };
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/hooks/usePrevious/index.tsx b/packages/fakeyou.com/src/hooks/usePrevious/index.tsx
new file mode 100644
index 0000000000..a943dc9d08
--- /dev/null
+++ b/packages/fakeyou.com/src/hooks/usePrevious/index.tsx
@@ -0,0 +1 @@
+export {default} from './usePrevious';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/hooks/usePrevious/usePrevious.tsx b/packages/fakeyou.com/src/hooks/usePrevious/usePrevious.tsx
new file mode 100644
index 0000000000..7f7216ce49
--- /dev/null
+++ b/packages/fakeyou.com/src/hooks/usePrevious/usePrevious.tsx
@@ -0,0 +1,8 @@
+import {useEffect, useRef} from 'react';
+export default function usePrevious(val:any){
+  const ref = useRef();
+  useEffect(()=>{
+    ref.current = val;
+  }, [val]);
+  return ref.current;
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/face_animator/FaceAnimator.tsx b/packages/fakeyou.com/src/v2/view/pages/face_animator/FaceAnimator.tsx
index 62b5c93f0c..4b3ce9bbc9 100644
--- a/packages/fakeyou.com/src/v2/view/pages/face_animator/FaceAnimator.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/face_animator/FaceAnimator.tsx
@@ -23,7 +23,7 @@ import FaceAnimatorSubViews from "./sub_views";
 import FaceAnimatorTitle from "./FaceAnimatorTitle";
 import InferenceJobsList from "components/layout/InferenceJobsList";
 import { FaceAnimatorCore } from "./FaceAnimatorTypes";
-import { BasicVideo } from "components/common";
+import { VideoBasic } from "components/common";
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
 import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
 import { Analytics } from "common/Analytics";
@@ -252,7 +252,7 @@ export default function FaceAnimator({
         }}
       />
       <div className="face-animator-mobile-sample">
-        <BasicVideo
+        <VideoBasic
           title="Face Animator Sample"
           src="/videos/face-animator-instruction-en.mp4"
         />
diff --git a/packages/fakeyou.com/src/v2/view/pages/face_animator/sub_views/FaceAnimatorInput.tsx b/packages/fakeyou.com/src/v2/view/pages/face_animator/sub_views/FaceAnimatorInput.tsx
index 8f7ab54d89..7648c17668 100644
--- a/packages/fakeyou.com/src/v2/view/pages/face_animator/sub_views/FaceAnimatorInput.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/face_animator/sub_views/FaceAnimatorInput.tsx
@@ -1,6 +1,14 @@
 import React from "react";
 import { animated } from "@react-spring/web";
-import { TempAudioPlayer, AudioBlobPreview, AudioInput, BasicVideo, Checkbox, ImageInput, SegmentButtons } from "components/common";
+import {
+  TempAudioPlayer,
+  AudioBlobPreview,
+  AudioInput,
+  VideoBasic,
+  Checkbox,
+  ImageInput,
+  SegmentButtons
+} from "components/common";
 import { FaceAnimatorSlide } from "../FaceAnimatorTypes";
 
 export default function FaceAnimatorInput({ audioProps, imageProps, frameDimensions, frameDimensionsChange, disableFaceEnhancement, disableFaceEnhancementChange, preferPresetAudio,  preferPresetAudioSet,  presetAudio,  still, stillChange, toggle, style, t, removeWatermark, removeWatermarkChange, }: FaceAnimatorSlide) {
@@ -36,7 +44,7 @@ export default function FaceAnimatorInput({ audioProps, imageProps, frameDimensi
           hideActions: true,
         }}/>
       </AudioInput> }
-      <BasicVideo
+      <VideoBasic
         className="face-animator-wide-sample"
         title="Face Animator Sample"
         src="/videos/face-animator-instruction-en.mp4"
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/VideoMocap.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/VideoMocap.tsx
index 5a4cc85b9b..3dd4d2bf2f 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/VideoMocap.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/VideoMocap.tsx
@@ -6,7 +6,7 @@ import {
   InferenceJob,
 } from "@storyteller/components/src/jobs/InferenceJob";
 
-import { BasicVideo, Button, Container, Panel, Tabs } from "components/common";
+import { Button, Container, Panel, Tabs } from "components/common";
 import { useInferenceJobs, useLocalize } from "hooks";
 
 import TabContentUpload from "./components/tabContentUpload";
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx
index 55492df11c..bec227ece9 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx
@@ -3,6 +3,8 @@ import React from "react";
 import SelectModal, {SelectModalData} from "components/common/SelectModal/SelectModal";
 import { Action, State } from "../videoMocapReducer";
 import { Button } from "components/common";
+import VideoFakeyou from "components/common/VideoFakeyou";
+
 
 export default function TabContentLibrary({
   t,
@@ -46,6 +48,9 @@ export default function TabContentLibrary({
             },
           ]}
         />
+        {pageState.mediaFileToken && 
+          <VideoFakeyou mediaToken={pageState.mediaFileToken} />
+        }
       </div>
       {pageState.mediaFileToken && 
         <div className="col-12 d-flex justify-content-center mt-5">
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageVideoProvision.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageVideoProvision.tsx
index 3d7dd1d7cd..2ec590b32a 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageVideoProvision.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageVideoProvision.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { BasicVideo, Panel, Tabs } from "components/common";
+import { Panel, Tabs } from "components/common";
 
 import { State, Action } from "../videoWorkflowReducer";
 import TabContentUpload from "./tabContentUpload";
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx
index 394a3bd51d..7a6935d2db 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx
@@ -3,6 +3,7 @@ import { NavLink } from "react-router-dom";
 import { states, Action, State } from "../videoWorkflowReducer";
 import { Button } from "components/common";
 import SelectModal, { SelectModalData } from "components/common/SelectModal/SelectModal";
+import VideoFakeyou from "components/common/VideoFakeyou";
 
 export default function TabContentLibrary({
   t, pageState, dispatchPageState
@@ -42,6 +43,9 @@ export default function TabContentLibrary({
             },
           ]}
         />
+        {pageState.mediaFileToken && 
+          <VideoFakeyou mediaToken={pageState.mediaFileToken} />
+        }
       </div>
       {pageState.status === states.FILE_SELECTED &&
         <div className="col-12 d-flex justify-content-center mt-5">
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/videoWorkflowReducer.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/videoWorkflowReducer.tsx
index be41a65737..00170bfead 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/videoWorkflowReducer.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/videoWorkflowReducer.tsx
@@ -40,7 +40,10 @@ export function reducer (state: State, action: Action): State {
     case 'stagedFile':
       return {...state, status: states.FILE_STAGED}
     case 'clearedFile':
-      return {...state, status: states.NO_FILE}
+      return {...state, 
+        status: states.NO_FILE,
+        mediaFileToken: ""
+      }
     case 'selectedFile':
       return {
         ...state,