more groundwork

packages/components/src/api/ApiConfig.ts

@@ -501,6 +501,11 @@ class ApiConfig {
     return `${this.getApiOrigin()}/v1/workflow/comfy/create`;
   }
 
+    // =============== Video Styletransfer ===============
+    enqueueVideoStyleTransfer(): string {
+      return `${this.getApiOrigin()}/v1/workflow/comfy/create`;
+    }
+
   // =============== Convert FBX to glTF ===============
   enqueueFbxToGltf(): string {
     return `${this.getApiOrigin()}/v1/conversion/enqueue_fbx_to_gltf`;

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

@@ -8,6 +8,7 @@ import {
   faCameraMovie,
   faCompass,
   faCloudUpload,
+  faFilms,
   faFaceViewfinder,
   faHome,
   faMessageDots,
@@ -305,6 +306,20 @@ export default function SideNav({
           </NavLink>
         </li>
 
+        <li>
+          <NavLink
+            to="/video-styletransfer"
+            activeClassName="active-link"
+            onClick={handleNavLinkClick}
+          >
+            <FontAwesomeIcon
+              icon={faFilms}
+              className="sidebar-heading-icon"
+            />
+            {t("videoStryleTransfer")}
+          </NavLink>
+        </li>
+
         <li>
           <NavLink
             to="/studio"

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/index.tsx

@@ -0,0 +1 @@
+export { default } from "./pageVSTApp";

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { useParams, useHistory } from "react-router-dom";
+import { useMedia } from "hooks";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
+import { EnqueueVideoWorkflow } from "@storyteller/components/src/api/video_workflow";
+import { states, Action, State } from "../../reducer";
+
+export default function pageVSTApp({
+  debug, t, pageState, dispatchPageState, parentPath
+}: {
+  debug?: boolean;
+  t: Function;
+  pageState: State;
+  parentPath: string;
+  dispatchPageState: (action: Action) => void;
+}) {
+  return(
+    <p>hi</p>
+  );
+};

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/routes.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {Switch, Route, useRouteMatch, Redirect, useHistory} from "react-router-dom";
-// import PageWorkflowControls from "./components/pageWorkflowControls";
+import PageVSTApp from "./components/pageVSTApp";
 import PageVideoProvision from "./components/pageVideoProvision";
 import PageJoblist from "./components/pageJoblist";
 import {states,State,Action} from "./reducer";
@@ -29,9 +29,9 @@ export default function SubRoutes ({
 
   return(
     <Switch>
-      {/* <Route exact path={`${path}/load/:mediaToken`} >
-        <PageWorkflowControls {...commonPageProps}/>
-      </Route> */}
+      <Route exact path={`${path}/load/:mediaToken`} >
+        <PageVSTApp {...commonPageProps}/>
+      </Route>
       <Route exact path={`${path}/upload`}>
         <PageVideoProvision {...commonPageProps}/>
       </Route>