Add WIP video style preview dialog (#115)

Co-authored-by: Victor <victor@storyteller.ai>

studio-frontend/src/app/api/MakeMultipartRequest.ts

@@ -0,0 +1,23 @@
+// import GetApiHost from "./GetApiHost";
+
+// const { formatUrl, host = "" } = GetApiHost();
+
+const MakeMultipartRequest = (endpoint = "", body: any) => {
+  const formData = new FormData();
+
+  Object.keys(body).forEach((key) => formData.append(key, body[key]));
+
+  // formData.append('source', "video");
+
+  return fetch("https://funnel.tailce84f.ts.net/preview/", {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Accept': 'application/json',
+      },
+      body: formData,
+  })
+  .then(res => res.blob());
+}
+
+export default MakeMultipartRequest;

studio-frontend/src/app/api/MakeRequest.ts

@@ -8,8 +8,8 @@ interface RouteSetup<UrlRouteArgs> {
     method: string;
     multipart?: boolean;
     routingFunction: UrlRoutingFunction<UrlRouteArgs>;
-} 
-  
+}
+
 const METHOD_OMITS_BODY: { [key: string]: boolean } = {
   DELETE: false,
   GET: true,
@@ -19,25 +19,50 @@ const METHOD_OMITS_BODY: { [key: string]: boolean } = {
   PUT: false,
 };
 
-const MakeRequest = <UrlRouteArgs, Request, Response, UrlParams>(routeSetup: RouteSetup<UrlRouteArgs>) :  (urlRouteArgs: UrlRouteArgs, request: Request, queries?: UrlParams) => Promise<Response> => {
-    return async function(urlRouteArgs: UrlRouteArgs, request: Request, queries?: any) : Promise<Response> {
-        const newQueries = queries ? Object.keys(queries).map((key, i) => {
-            return `${ i ? "&" : "" }${ key }=${ Array.isArray(queries[key]) ? queries[key].join(`&${ key }=`) : queries[key] }`
-        }).join("") : null;
+export default <
+    UrlRouteArgs,
+    Request,
+    Response,
+    UrlParams extends Record<string, unknown>,
+>(routeSetup: RouteSetup<UrlRouteArgs>) => {
+    return async function (
+        urlRouteArgs: UrlRouteArgs,
+        request: Request,
+        queries?: UrlParams,
+        overrideHost?: string
+    ): Promise<Response> {
+        const newQueries = queries
+            ? Object
+                .keys(queries)
+                .map((key, i) =>
+                    `${ i ? "&" : "" }${ key }=${
+                        Array.isArray(queries[key])
+                            ? (queries[key] as unknown[]).join(`&${ key }=`)
+                            : queries[key]
+                    }`
+                )
+                .join("")
+            : null;
 
-        const endpoint = `${ routeSetup.routingFunction(urlRouteArgs) }${ newQueries ? "?" + newQueries : "" }`;
+        const endpoint = `${
+            routeSetup.routingFunction(urlRouteArgs)
+        }${
+            newQueries ? "?" + newQueries : ""
+        }`;
         const method = routeSetup.method;
         const methodOmitsBody = METHOD_OMITS_BODY[method] || false;
 
         console.log("🛼",request)
 
-        return fetch(`https://api.fakeyou.com${ endpoint }`, {
-            method,
-            headers: {
-                "Accept": "application/json",
-                ...methodOmitsBody? {} : { "Content-Type": "application/json" }
+        return fetch(
+            `${ overrideHost ? overrideHost : "https://api.fakeyou.com" }${ endpoint }`,
+            {
+                method,
+                headers: {
+                    "Accept": "application/json",
+                    ...methodOmitsBody? {} : { "Content-Type": "application/json" }
             },
-            credentials: 'include',
+            credentials: "include",
             ...methodOmitsBody ? {} : { body: JSON.stringify(request) },
         })
         .then(res => res.json())
@@ -52,5 +77,3 @@ const MakeRequest = <UrlRouteArgs, Request, Response, UrlParams>(routeSetup: Rou
         .catch(e => ({ success : false }));
     }
 };
-
-export default MakeRequest;

studio-frontend/src/app/api/VideoStylePreview.ts

@@ -0,0 +1,10 @@
+import MakeMultipartRequest from "./MakeMultipartRequest";
+
+export interface VideoStylePreviewRequest {
+  video: File,
+  request: string
+}
+
+export const VideoStylePreview = (request: VideoStylePreviewRequest) => {
+  return MakeMultipartRequest("",request);
+}