continued frontend cleanup

frontend/apps/editor3d/app/src/Classes/ApiHelpers.ts

@@ -1,10 +1,10 @@
 import { GetCdnOrigin } from "~/api/GetCdnOrigin";
-import environmentVariables from "./EnvironmentVariables";
+import { StorytellerApiHostStore } from "@storyteller/api";
 
 export async function get_media_url(mediaId: string) {
   //This is for prod when we have the proper info on the url.
-  const api_base_url = environmentVariables.values.BASE_API;
-  const url = `${api_base_url}/v1/media_files/file/${mediaId}`;
+  const apiSchemeAndHost = StorytellerApiHostStore.getInstance().getApiSchemeAndHost();
+  const url = `${apiSchemeAndHost}/v1/media_files/file/${mediaId}`;
 
   const response = await fetch(url);
   const json = await JSON.parse(await response.text());

frontend/apps/editor3d/app/src/Classes/ApiManager/ApiManager.ts

@@ -19,14 +19,12 @@ export class ApiManager {
   constructor() {
     const environmentType = GetBuildEnvironment().getBuildEnvironmentType();
     const configs = new Configs(environmentType);
-    const baseApi = configs.baseApi;
-
-    console.log("baseApi", baseApi);
 
+    // TODO(bt,2025-07-06): Not sure that any of this is used anymore.
+    // If so, try to use Configs, StorytellerApiHostStore, or another configuration source.
+    
     // look at the .env file
     this.ApiTargets = {
-      //BaseApi: environmentVariables.values.BASE_API as string,
-      BaseApi: baseApi,
       GoggleApi: environmentVariables.values.GOOGLE_API as string,
       FunnelApi: environmentVariables.values.FUNNEL_API as string,
       CdnApi: environmentVariables.values.CDN_API as string,

frontend/apps/editor3d/app/src/index.tsx

@@ -17,7 +17,6 @@ config.autoAddCss = false; /* eslint-disable import/first */
 
 // TODO(bt,2025-04-19): Make these configurable
 const ENV = {
-  BASE_API: "https://api.storyteller.ai",
   GOOGLE_API: "https://studio.storyteller.ai",
   FUNNEL_API: "https://studio.storyteller.ai",
   CDN_API: "https://cdn-2.fakeyou.com",

frontend/apps/editor3d/app/src/login.tsx

@@ -30,7 +30,6 @@ config.autoAddCss = false; /* eslint-disable import/first */
 
 // TODO(bt,2025-04-19): Make these configurable
 const ENV = {
-  BASE_API: "https://api.storyteller.ai",
   GOOGLE_API: "https://studio.storyteller.ai",
   FUNNEL_API: "https://studio.storyteller.ai",
   CDN_API: "https://cdn-2.fakeyou.com",

frontend/apps/editor3d/app/src/pages/PageEnigma/Editor/api_manager.ts

@@ -6,6 +6,7 @@ import { updateExistingScene, uploadNewScene } from "./api_fetchers";
 import { uploadThumbnail } from "~/api";
 import environmentVariables from "~/Classes/EnvironmentVariables";
 import { GetCdnOrigin } from "~/api/GetCdnOrigin";
+import { StorytellerApiHostStore } from "@storyteller/api";
 
 interface StylizeVideoParams {
   media_token: string;
@@ -111,10 +112,14 @@ class APIManagerResponseError extends Error {
 }
 
 export class APIManager {
-  baseUrl: string;
 
   constructor() {
-    this.baseUrl = environmentVariables.values.BASE_API as string;
+    // NB(bt,2025-07-06): Cleaning this up. The code was duplicated a half dozen times.
+    //  I think all of the code in this file is legacy, but to be safe I'm continuing to update it.
+  }
+
+  protected getApiSchemeAndHost() {
+    return StorytellerApiHostStore.getInstance().getApiSchemeAndHost();
   }
 
   /**
@@ -225,7 +230,7 @@ export class APIManager {
    * @returns
    */
   public async getMediaFile(media_file_token: string): Promise<string> {
-    const url = `${this.baseUrl}/v1/media_files/file/${media_file_token}`;
+    const url = `${this.getApiSchemeAndHost()}/v1/media_files/file/${media_file_token}`;
     const response = await fetch(url);
     const json = await JSON.parse(await response.text());
     const bucketPath = json["media_file"]["public_bucket_path"];
@@ -250,7 +255,7 @@ export class APIManager {
   }
 
   public async uploadMediaSceneThumbnail(blob: Blob | File, fileName: string) {
-    const url = `${this.baseUrl}/v1/media_files/upload/image`;
+    const url = `${this.getApiSchemeAndHost()}/v1/media_files/upload/image`;
     const uuid = uuidv4();
 
     const formData = new FormData();
@@ -294,7 +299,7 @@ export class APIManager {
   }) {
     // Promise<APIManagerResponseSuccess>
     //TODO: UPDATE ENDPOINT!!!!
-    const url = `${this.baseUrl}/v1/media_files/upload/new_video`;
+    const url = `${this.getApiSchemeAndHost()}/v1/media_files/upload/new_video`;
     const uuid = uuidv4();
 
     const formData = new FormData();
@@ -369,7 +374,7 @@ export class APIManager {
 
   public async getMediaBatch(media_tokens: string[]): Promise<MediaFile[]> {
     const tokens = media_tokens;
-    const url = new URL(`${this.baseUrl}/v1/media_files/batch`);
+    const url = new URL(`${this.getApiSchemeAndHost()}/v1/media_files/batch`);
     tokens.forEach((token) => url.searchParams.append("tokens", token));
     const result = await fetch(url)
       .then((response) => response.json())
@@ -429,7 +434,7 @@ export class APIManager {
     const json_data = JSON.stringify(data);
 
     const response = await fetch(
-      `${this.baseUrl}/v1/workflows/enqueue_studio`,
+      `${this.getApiSchemeAndHost()}/v1/workflows/enqueue_studio`,
       {
         method: "POST",
         credentials: "include",

frontend/apps/editor3d/app/src/pages/PageEnigma/clips/animation_clip.ts

@@ -8,9 +8,9 @@ import {
 import { MMDLoader } from "three/addons/loaders/MMDLoader.js";
 
 import { MoveAIResult, Retarget } from "../Editor/retargeting";
-import environmentVariables from "~/Classes/EnvironmentVariables";
 import IAnimationClip from "./ClipInterfaces/IAnimationClip";
 import { GetCdnOrigin } from "~/api/GetCdnOrigin";
+import { StorytellerApiHostStore } from "@storyteller/api";
 
 export class AnimationClip implements IAnimationClip {
   version: number;
@@ -76,8 +76,8 @@ export class AnimationClip implements IAnimationClip {
 
   async get_media_url() {
     //This is for prod when we have the proper info on the url.
-    const api_base_url = environmentVariables.values.BASE_API;
-    const url = `${api_base_url}/v1/media_files/file/${this.media_id}`;
+    const apiSchemeAndHost = StorytellerApiHostStore.getInstance().getApiSchemeAndHost();
+    const url = `${apiSchemeAndHost}/v1/media_files/file/${this.media_id}`;
 
     const response = await fetch(url);
     const json = await JSON.parse(await response.text());

frontend/apps/editor3d/app/src/pages/PageEnigma/clips/audio_clip.ts

@@ -1,6 +1,6 @@
 import { GetCdnOrigin } from "~/api/GetCdnOrigin";
-import environmentVariables from "~/Classes/EnvironmentVariables";
 import Ijson from "~/interfaces/Ijson";
+import { StorytellerApiHostStore } from "@storyteller/api";
 
 interface AudioDataInterface {
   audioContext: AudioContext;
@@ -37,8 +37,8 @@ export class AudioClip implements Ijson {
 
   async get_media_url() {
     //This is for prod when we have the proper info on the url.
-    const api_base_url = environmentVariables.values.BASE_API;
-    const url = `${api_base_url}/v1/media_files/file/${this.media_id}`;
+    const apiSchemeAndHost = StorytellerApiHostStore.getInstance().getApiSchemeAndHost();
+    const url = `${apiSchemeAndHost}/v1/media_files/file/${this.media_id}`;
 
     const response = await fetch(url);
     const json = await JSON.parse(await response.text());

frontend/apps/editor3d/app/src/pages/PageEnigma/clips/emotion_clip.ts

@@ -1,8 +1,8 @@
 import * as THREE from "three";
 import { GetCdnOrigin } from "~/api/GetCdnOrigin";
-
-import environmentVariables from "~/Classes/EnvironmentVariables";
 import Ijson from "~/interfaces/Ijson";
+import { StorytellerApiHostStore } from "@storyteller/api";
+
 interface CsvJson {
   [key: string]: string[];
 }
@@ -26,8 +26,8 @@ export class EmotionClip implements Ijson {
 
   async get_media_url() {
     //This is for prod when we have the proper info on the url.
-    const api_base_url = environmentVariables.values.BASE_API;
-    const url = `${api_base_url}/v1/media_files/file/${this.media_id}`;
+    const apiSchemeAndHost = StorytellerApiHostStore.getInstance().getApiSchemeAndHost();
+    const url = `${apiSchemeAndHost}/v1/media_files/file/${this.media_id}`;
 
     const response = await fetch(url);
     const json = await JSON.parse(await response.text());

frontend/apps/editor3d/app/src/pages/PageEnigma/clips/lipsync_clip.ts

@@ -1,8 +1,8 @@
 import { LipSync } from "../Editor/lipsync";
 import * as THREE from "three";
 import { GetCdnOrigin } from "~/api/GetCdnOrigin";
-import environmentVariables from "~/Classes/EnvironmentVariables";
 import Ijson from "~/interfaces/Ijson";
+import { StorytellerApiHostStore } from "@storyteller/api";
 
 interface AudioDataInterface {
   audioContext: AudioContext;
@@ -58,10 +58,10 @@ export class LipSyncClip implements Ijson {
   // lip sync will be generated through TTS
   async get_media_url() {
     //This is for prod when we have the proper info on the url.
-    const api_base_url = environmentVariables.values.BASE_API;
-    const url = `${api_base_url}/v1/media_files/file/${this.media_id}`;
+    const apiSchemeAndHost = StorytellerApiHostStore.getInstance().getApiSchemeAndHost();
+    const url = `${apiSchemeAndHost}/v1/media_files/file/${this.media_id}`;
 
-    console.log(`API BASE URL? ${api_base_url}`);
+    console.log(`API BASE URL? ${apiSchemeAndHost}`);
     console.log(`CALLED URL? ${url}`);
 
     const response = await fetch(url);

frontend/apps/editor3d/app/src/signup.tsx

@@ -23,7 +23,6 @@ const regEx =
 
 // TODO(bt,2025-04-19): Make these configurable
 const ENV = {
-  BASE_API: "https://api.storyteller.ai",
   GOOGLE_API: "https://studio.storyteller.ai",
   FUNNEL_API: "https://studio.storyteller.ai",
   CDN_API: "https://cdn-2.fakeyou.com",

frontend/libs/api/src/lib/CommentsApi.ts

@@ -1,91 +0,0 @@
-// import { ApiManager, ApiResponse } from "../apis/ApiManager";
-
-// export class CommentsApi extends ApiManager {
-//   public CreateComment({
-//     commentMarkdown,
-//     entityToken,
-//     entityType,
-//     uuidIdempotencyToken,
-//   }: {
-//     commentMarkdown: string;
-//     entityToken: string;
-//     entityType: string;
-//     uuidIdempotencyToken: string;
-//   }): Promise<ApiResponse<string>> {
-//     const endpoint = `${this.ApiTargets.BaseApi}/v1/comments/new`;
-
-//     const body = {
-//       comment_markdown: commentMarkdown,
-//       entity_token: entityToken,
-//       entity_type: entityType,
-//       uuid_idempotency_token: uuidIdempotencyToken,
-//     };
-
-//     return this.post<
-//       {
-//         comment_markdown: string;
-//         entity_token: string;
-//         entity_type: string;
-//         uuid_idempotency_token: string;
-//       },
-//       {
-//         success?: boolean;
-//         comment_token?: string;
-//         BadInput?: string;
-//       }
-//     >({ endpoint, body })
-//       .then((response) => ({
-//         success: response.success ?? false,
-//         data: response.comment_token,
-//         errorMessage: response.BadInput,
-//       }))
-//       .catch((err) => {
-//         return { success: false, errorMessage: err.message };
-//       });
-//   }
-
-//   public DeleteComment({
-//     commentToken,
-//   }: {
-//     commentToken: string;
-//   }): Promise<ApiResponse<undefined>> {
-//     const endpoint = `${this.ApiTargets.BaseApi}/v1/comments/delete/${commentToken}`;
-
-//     return this.post<
-//       { as_mod: boolean },
-//       {
-//         success?: boolean;
-//         BadInput?: string;
-//       }
-//     >({ endpoint, body: { as_mod: true } })
-//       .then((response) => ({
-//         success: response.success ?? false,
-//         errorMessage: response.BadInput,
-//       }))
-//       .catch((err) => {
-//         return { success: false, errorMessage: err.message };
-//       });
-//   }
-
-//   public ListCommentsByEntity({
-//     entityType,
-//     entityToken,
-//   }: {
-//     entityType: string;
-//     entityToken: string;
-//   }): Promise<ApiResponse<string[]>> {
-//     const endpoint = `${this.ApiTargets.BaseApi}/v1/comments/list/${entityType}/${entityToken}`;
-
-//     return this.get<{
-//       success: boolean;
-//       comments: string[];
-//     }>({ endpoint })
-//       .then((response) => ({
-//         success: true,
-//         data: response.comments,
-//       }))
-//       .catch((err) => {
-//         return { success: false, errorMessage: err.message };
-//       });
-//   }
-// }

frontend/libs/api/src/lib/FeaturedItemsApi.ts

@@ -1,96 +0,0 @@
-// import { ApiManager, ApiResponse } from "../apis/ApiManager";
-
-// export class FeaturedItemsApi extends ApiManager {
-//   public CreateFeaturedItem({
-//     entityToken,
-//     entityType,
-//   }: {
-//     entityToken: string;
-//     entityType: string;
-//   }): Promise<ApiResponse<undefined>> {
-//     const endpoint = `${this.ApiTargets.BaseApi}/v1/featured_item/create`;
-
-//     const body = {
-//       entity_token: entityToken,
-//       entity_type: entityType,
-//     };
-
-//     return this.post<
-//       {
-//         entity_token: string;
-//         entity_type: string;
-//       },
-//       {
-//         success?: boolean;
-//         BadInput?: string;
-//       }
-//     >({ endpoint, body })
-//       .then((response) => ({
-//         success: response.success ?? false,
-//         errorMessage: response.BadInput,
-//       }))
-//       .catch((err) => {
-//         return { success: false, errorMessage: err.message };
-//       });
-//   }
-
-//   public DeleteFeaturedItem({
-//     entityToken,
-//     entityType,
-//   }: {
-//     entityToken: string;
-//     entityType: string;
-//   }): Promise<ApiResponse<undefined>> {
-//     const endpoint = `${this.ApiTargets.BaseApi}/v1/featured_item/delete`;
-
-//     const body = {
-//       entity_token: entityToken,
-//       entity_type: entityType,
-//     };
-
-//     return this.delete<
-//       {
-//         entity_token: string;
-//         entity_type: string;
-//       },
-//       {
-//         success?: boolean;
-//         BadInput?: string;
-//       }
-//     >({ endpoint, body })
-//       .then((response) => ({
-//         success: response.success ?? false,
-//         errorMessage: response.BadInput,
-//       }))
-//       .catch((err) => {
-//         return { success: false, errorMessage: err.message };
-//       });
-//   }
-
-//   public CheckFeaturedItem({
-//     entityType,
-//     entityToken,
-//   }: {
-//     entityType: string;
-//     entityToken: string;
-//   }): Promise<ApiResponse<boolean>> {
-//     const endpoint = `${this.ApiTargets.BaseApi}/v1/featured_item/is_featured/${entityType}/${entityToken}`;
-
-//     return this.post<
-//       undefined,
-//       {
-//         success?: boolean;
-//         is_featured?: boolean;
-//         BadInput?: string;
-//       }
-//     >({ endpoint })
-//       .then((response) => ({
-//         success: response.success ?? false,
-//         data: response.is_featured,
-//         errorMessage: response.BadInput,
-//       }))
-//       .catch((err) => {
-//         return { success: false, errorMessage: err.message };
-//       });
-//   }
-// }

frontend/libs/api/src/lib/ModerationApi.ts

@@ -1,43 +0,0 @@
-// import { ApiManager, ApiResponse } from "../apis/ApiManager";
-
-
-// export class ModerationApi extends ApiManager {
-//   public async UpdateFeatureFlagsByToken({
-//     usernameOrToken,
-//     flags,
-//   }: {
-//     usernameOrToken: string;
-//     flags: string[];
-//   }): Promise<
-//     ApiResponse<{
-//       inference_job_token?: string;
-//       inference_job_token_type?: string;
-//     }>
-//   > {
-//     const endpoint = `${this.ApiTargets.BaseApi}/v1/moderation/user_feature_flags/${usernameOrToken}`;
-
-//     const body = {
-//       action: {
-//         AddFlags: {
-//           flags,
-//         },
-//       },
-//     };
-
-//     return this.post<
-//       { action: { AddFlags: { flags: string[] } } },
-//       { success?: boolean; BadInput?: string }
-//     >({
-//       endpoint,
-//       body: body,
-//     })
-//       .then((response) => ({
-//         success: response.success ?? false,
-//         errorMessage: response.BadInput,
-//       }))
-//       .catch((err) => ({
-//         success: false,
-//         errorMessage: err.message,
-//       }));
-//   }
-// }