From 094cda65253b8de6b5e7a809f9934a9ef2f242ba Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Thu, 15 Feb 2024 11:18:13 -0500
Subject: [PATCH] more groundwork

---
 packages/components/src/api/ApiConfig.ts      |  5 +++++
 .../src/components/layout/SideNav/SideNav.tsx | 15 +++++++++++++
 .../components/pageVSTApp/index.tsx           |  1 +
 .../components/pageVSTApp/pageVSTApp.tsx      | 21 +++++++++++++++++++
 .../view/pages/video_styletransfer/routes.tsx |  8 +++----
 5 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/index.tsx
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx

diff --git a/packages/components/src/api/ApiConfig.ts b/packages/components/src/api/ApiConfig.ts
index 42c934ed21..453ba0d200 100644
--- a/packages/components/src/api/ApiConfig.ts
+++ b/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`;
diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
index f30cc1f819..ce139e5a3a 100644
--- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
+++ b/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"
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/index.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/index.tsx
new file mode 100644
index 0000000000..8d8b7f3a57
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/index.tsx
@@ -0,0 +1 @@
+export { default } from "./pageVSTApp";
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx
new file mode 100644
index 0000000000..45126a55d0
--- /dev/null
+++ b/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>
+  );
+};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/routes.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/routes.tsx
index 2d89ab4f46..3ad57f535f 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/routes.tsx
+++ b/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>