Merge pull request #475 from storytold/feature/page_st_filter

namespace and route change

packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx

@@ -24,9 +24,6 @@ export default function InferenceJobsList({
     useInferenceJobs(jobType);
   const { t } = useLocalize("InferenceJobs");
 
-  // let height = 0;
-  // const transitions = useTransition(inferenceJobs,{ not right now });
-
   if (inferenceJobs.length) {
     return (
       <Panel {...{ className: "fy-inference-jobs-list", padding: true }}>

packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx

@@ -1,25 +1,26 @@
-import { faDiscord } from "@fortawesome/free-brands-svg-icons";
-import {
-  faBookOpen,
-  faMessageDots,
-  faTrophy,
-  faWaveformLines,
-  faStar,
-  faFaceViewfinder,
-  faCloudUpload,
-  faWandMagicSparkles,
-  faHome,
-  faCompass,
-  faUser,
-  faSignOutAlt,
-  faCameraMovie,
-  faPersonRays,
-  faMessageImage,
-  faPhotoFilm,
-} from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useEffect, useState } from "react";
 import { NavLink, useHistory } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDiscord } from "@fortawesome/free-brands-svg-icons";
+import {
+  faArrowsTurnToDots,
+  faBookOpen,
+  faCameraMovie,
+  faCompass,
+  faCloudUpload,
+  faFaceViewfinder,
+  faHome,
+  faMessageDots,
+  faMessageImage,
+  faPersonRays,
+  faSignOutAlt,
+  faStar,
+  faTrophy,
+  faUser,
+  faWandMagicSparkles,
+  faWaveformLines,
+} from "@fortawesome/pro-solid-svg-icons";
+
 import {
   GetQueueStats,
   GetQueueStatsIsOk,
@@ -374,15 +375,15 @@ export default function SideNav({
 
             <li>
               <NavLink
-                to="/storyteller-filter"
+                to="/video-workflow"
                 activeClassName="active-link"
                 onClick={handleNavLinkClick}
               >
                 <FontAwesomeIcon
-                  icon={faPhotoFilm}
+                  icon={faArrowsTurnToDots}
                   className="sidebar-heading-icon"
                 />
-                {t("storytellerFilter")}
+                {t("videoWorkflow")}
               </NavLink>
             </li>
 

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -108,7 +108,7 @@ import UploadSdWeightPage from "./pages/upload/UploadSdWeightPage";
 import { FooterNav } from "./nav/FooterNav";
 import FbxToGltfPage from "./pages/fbx_to_gltf/FbxToGltfPage";
 import UploadLoraWeightPage from "./pages/upload/UploadLoraWeightPage";
-import StorytellerFilterPage from "./pages/storyteller_filter/StorytellerFilter";
+import VideoWorkflowPage from "./pages/video_workflow";
 import ScrollToTop from "./_common/ScrollToTop";
 import TextToImagePage from "./pages/text_to_image/TextToImagePage";
 
@@ -828,8 +828,8 @@ class PageContainer extends React.Component<
                   />
                 </Route>
 
-                <Route path="/storyteller-filter">
-                  <StorytellerFilterPage
+                <Route path="/video-workflow">
+                  <VideoWorkflowPage
                     {...{
                       enqueueInferenceJob: this.props.enqueueInferenceJob,
                       sessionSubscriptionsWrapper:

packages/fakeyou.com/src/v2/view/pages/storyteller_filter/index.tsx

@@ -1 +0,0 @@
-export { default } from './StorytellerFilter';

packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx

@@ -6,8 +6,8 @@ import { FrontendInferenceJobType, InferenceJob } from '@storyteller/components/
 import { Container } from "components/common";
 import PageHeader from "components/layout/PageHeader";
 
-import { states, reducer } from "./storytellerFilterReducer";
-import SubRoutes from "./storytellerFilterRoutes";
+import { states, reducer } from "./videoWorkflowReducer";
+import SubRoutes from "./videoWorkflowRoutes";
 
 export default function StorytellerFilter(props:{
   enqueueInferenceJob: (

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageJobList.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { memo } from 'react'
 
 import { Analytics } from "common/Analytics";
 import InferenceJobsList from "components/layout/InferenceJobsList";
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
-import { states, Action, State } from "../storytellerFilterReducer";
+import { states, Action, State } from "../videoWorkflowReducer";
 import { Spinner } from 'components/common';
 
 function StorytellerJobList(){
@@ -25,7 +25,7 @@ function StorytellerJobList(){
   );
 }
 
-export default function PageJobList({
+export default memo (function PageJobList({
   t, pageState, dispatchPageState
 }: {
   debug?: boolean;
@@ -46,4 +46,4 @@ export default function PageJobList({
       <StorytellerJobList />
     </>
   );
-}
+});

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageVideoProvision.tsx

@@ -2,14 +2,15 @@ import React from "react";
 
 import { BasicVideo, Panel, Tabs } from "components/common";
 
-import { State, Action } from "../storytellerFilterReducer";
+import { State, Action } from "../videoWorkflowReducer";
 import TabContentUpload from "./tabContentUpload";
 import TabContentLibrary from "./tabContentLibrary";
 
 export default function PageVideoProvision({
-  debug=false, t, pageState, dispatchPageState
+  debug=false, parentPath, t, pageState, dispatchPageState
 }: {
   debug?: boolean;
+  parentPath: string;
   t: Function;
   pageState: State;
   dispatchPageState: (action: Action) => void;
@@ -21,7 +22,7 @@ export default function PageVideoProvision({
       content: <TabContentUpload {...{
         debug, t, pageState, dispatchPageState
       }} />,
-      to: "/storyteller-filter/upload",
+      to: `${parentPath}/upload`,
       padding: true,
     },
     {
@@ -29,7 +30,7 @@ export default function PageVideoProvision({
       content: <TabContentLibrary {...{
         debug, t, pageState, dispatchPageState
       }} />,
-      to: "/storyteller-filter/select-media",
+      to: `${parentPath}/select-media`,
       padding: true,
     },
   ];

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls.tsx

@@ -7,7 +7,7 @@ import { useMedia } from "hooks";
 
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import { EnqueueStorytellerFilter } from "@storyteller/components/src/api/storyteller_filter";
-import { states, Action, State } from "../storytellerFilterReducer";
+import { states, Action, State } from "../videoWorkflowReducer";
 import {
   Accordion,
   Button,

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentLibrary.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
-import { states, Action, State } from "../storytellerFilterReducer";
+import { states, Action, State } from "../videoWorkflowReducer";
 import { Button } from "components/common";
 import SelectModal from "components/common/SelectModal/SelectModal";
 
@@ -21,7 +21,8 @@ export default function TabContentLibrary({
     });
   };
   return (
-    <div>
+    <div className="row g-3">
+      <div className="col-12">
       <SelectModal
         modalTitle="Select a Video"
         label="Select a Video"
@@ -36,13 +37,16 @@ export default function TabContentLibrary({
           },
         ]}
       />
+      </div>
       {pageState.status === states.FILE_SELECTED &&
-        <NavLink to={`load/${pageState.mediaFileToken}`}>
-          <Button 
-            label={t("button.proceed")}
-            onClick={handleProceed}
-          />
-        </NavLink>
+        <div className="col-12 d-flex justify-content-center mt-5">
+          <NavLink to={`load/${pageState.mediaFileToken}`}>
+            <Button 
+              label={t("button.proceed")}
+              onClick={handleProceed}
+            />
+          </NavLink>
+        </div>
       }
     </div>
   );

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/tabContentUpload.tsx

@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from "uuid";
 import { UploadMedia } from "@storyteller/components/src/api/media_files/UploadMedia";
 import { useFile } from "hooks";
 import { ErrorMessage, VideoInput, Spinner } from "components/common";
-import { states, Action, State } from "../storytellerFilterReducer";
+import { states, Action, State } from "../videoWorkflowReducer";
 
 export default function TabContentUpload({
   debug=false, t, pageState, dispatchPageState

packages/fakeyou.com/src/v2/view/pages/video_workflow/index.tsx

@@ -0,0 +1 @@
+export { default } from './VideoWorkflow';

packages/fakeyou.com/src/v2/view/pages/video_workflow/videoWorkflowRoutes.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import {Switch, Route, useRouteMatch, Redirect} from "react-router-dom";
-import PageFilterControls from "./components/pageFilterControls";
+import PageWorkflowControls from "./components/pageWorkflowControls";
 import PageVideoProvision from "./components/pageVideoProvision";
 import PageJobList from "./components/pageJobList";
-import {State,Action} from "./storytellerFilterReducer";
+import {State,Action} from "./videoWorkflowReducer";
 
 export default function SubRoutes ({
   debug, t, pageState, dispatchPageState
@@ -14,20 +14,23 @@ export default function SubRoutes ({
   dispatchPageState: (action: Action) => void
 }){
   const { path } = useRouteMatch();
+  const commonPageProps = {
+    debug, parentPath: path, t, pageState, dispatchPageState
+  };
 
   return(
     <Switch>
       <Route exact path={`${path}/load/:mediaToken`} >
-        <PageFilterControls {...{debug, t, pageState, dispatchPageState}}/>
+        <PageWorkflowControls {...commonPageProps}/>
       </Route>
       <Route exact path={`${path}/upload`}>
-        <PageVideoProvision {...{debug, t, pageState, dispatchPageState}}/>
+        <PageVideoProvision {...commonPageProps}/>
       </Route>
       <Route exact path={`${path}/select-media`}>
-        <PageVideoProvision {...{debug, t, pageState, dispatchPageState}}/>
+        <PageVideoProvision {...commonPageProps}/>
       </Route>
       <Route exact path={`${path}/jobs`}>
-        <PageJobList {...{debug, t, pageState, dispatchPageState}}/>
+        <PageJobList {...commonPageProps}/>
       </Route>
       <Route path={`${path}`}>
         <Redirect to={`${path}/upload`} />