video component namespace change, useMedia hook improved, usePrevious hook, VideoFakeyou component

2026-11-06 02:00:46 +00:00 · 2024-02-13 19:45:45 -05:00
1 parent 1ce3323628
commit 3fc2ebf2db
@@ -1 +0,0 @@
-export { default } from './BasicVideo';
@@ -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,
@@ -0,0 +1 @@
+export { default } from './VideoBasic';
@@ -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;
+};
@@ -0,0 +1 @@
+export { default } from './VideoFakeyou';
@@ -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
 };
@@ -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,
@@ -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 };
 };
@@ -0,0 +1 @@
+export {default} from './usePrevious';
@@ -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;
+}
@@ -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"
        />
@@ -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"
@@ -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";
@@ -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">
@@ -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";
@@ -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">
@@ -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,