call api host method

frontend/libs/api/src/lib/config/StorytellerApiHostStore.ts

@@ -39,6 +39,12 @@ export class StorytellerApiHostStore {
     return instance;
   }
 
+  /** Convert an API path to a full URL using the configured scheme and host. */
+  public pathToFullUrl(path: string): string {
+    const trimmedPath = path.startsWith("/") ? path.slice(1) : path;
+    return `${this.apiSchemeAndHost}/${trimmedPath}`;
+  }
+
   /** Get the API scheme and host. */
   public getApiSchemeAndHost(): string {
     console.debug("StorytellerApiHostStore.getApiSchemeAndHost()", this.apiSchemeAndHost, this.constructor.name);

frontend/libs/components/vfx/src/lib/api.ts

@@ -1,3 +1,5 @@
+import { StorytellerApiHostStore } from "@storyteller/api";
+
 export type SubmitVFXJobRequest = {
   source_video_media_token: string;
   reference_image_media_token: string | null;
@@ -22,7 +24,9 @@ export async function submitVFXJob(
   req: SubmitVFXJobRequest,
 ): Promise<SubmitVFXJobResponse> {
   try {
-    const res = await fetch(VFX_ENDPOINT, {
+    const url = StorytellerApiHostStore.getInstance().pathToFullUrl(VFX_ENDPOINT);
+
+    const res = await fetch(url, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       credentials: "include",

frontend/libs/components/vfx/tsconfig.json

@@ -2,6 +2,9 @@
   "files": [],
   "include": [],
   "references": [
+    {
+      "path": "../../api"
+    },
     {
       "path": "../../common"
     },

frontend/libs/components/vfx/tsconfig.lib.json

@@ -31,6 +31,9 @@
     "src/**/*.tsx"
   ],
   "references": [
+    {
+      "path": "../../api/tsconfig.lib.json"
+    },
     {
       "path": "../../common/tsconfig.lib.json"
     },