move choice of local or remote api to app element

studio-frontend/src/app/app.element.ts

@@ -11,11 +11,14 @@ import { DialogElement } from "@storyteller/studio-ui/dialog";
 import {
 	SceneHierarchyElement,
 	StorytellerApi,
+	StorytellerLocalApi,
+	StorytellerRemoteApi,
 	StudioURLParams,
+	mockApi,
 } from "@storyteller/studio-web";
 import { match } from "@storyteller/utility";
 import { LitElement, TemplateResult, html, nothing } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -57,7 +60,7 @@ export class AppElement extends LitElement {
 
 	@state() currentSidebar : string = 'hierarchy';
 
-	private api = new StorytellerApi();
+	@property({ attribute: false }) api: StorytellerApi =  new StorytellerApi(mockApi ? new StorytellerLocalApi() : new StorytellerRemoteApi());
 
 	#addToSceneButtonRef = createRef<ButtonElement>();
 	#videoStylePreviewBtnRef = createRef<ButtonElement>();

studio-web/src/lib/storyteller-api.ts

@@ -3,7 +3,7 @@ import { v4 as uuid } from "uuid";
 import { DBSchema, IDBPDatabase, openDB } from "idb";
 import * as studio from "@storyteller/studio";
 
-const mockApi = window.location.search.includes("mock-api");
+export const mockApi = window.location.search.includes("mock-api");
 
 interface IStorytellerApi {
 	createScene(file: File): Promise<MediaFileToken>
@@ -18,7 +18,7 @@ interface IStorytellerApi {
 	mediaFile(token: MediaFileToken): Promise<MediaFile>
 }
 
-class StorytellerApiBase implements IStorytellerApi {
+export class StorytellerRemoteApi implements IStorytellerApi {
 	#api = axios.create({
 		baseURL: "https://api.fakeyou.com",
 		withCredentials: true,
@@ -137,7 +137,7 @@ interface LocalDbSchema extends DBSchema {
 	}
 }
 
-class StorytellerApiMock implements IStorytellerApi {
+export class StorytellerLocalApi implements IStorytellerApi {
 	database?: IDBPDatabase<LocalDbSchema>;
 	dateFormat: Intl.DateTimeFormat = new Intl.DateTimeFormat("en-us")
 
@@ -437,27 +437,31 @@ class StorytellerApiMock implements IStorytellerApi {
 
 export class StorytellerApi implements IStorytellerApi {
 	createScene(file: File): Promise<string> {
-		return this.api_base.createScene(file)
+		return this.apiBase.createScene(file)
 	}
 	session(): Promise<Session> {
-		return this.api_base.session()
+		return this.apiBase.session()
 	}
 	listMediaFiles(options: ListMediaFilesOptions): Promise<ListMediaFilesResult> {
-		return this.api_base.listMediaFiles(options)
+		return this.apiBase.listMediaFiles(options)
 	}
 	uploadMediaFile(file: File, { subtype, mediaClass }: UploadMediaFileOptions): Promise<string> {
-		return this.api_base.uploadMediaFile(file, { subtype, mediaClass })
+		return this.apiBase.uploadMediaFile(file, { subtype, mediaClass })
 	}
 	renameMediaFile(token: string, name: string): Promise<void> {
-		return this.api_base.renameMediaFile(token, name)
+		return this.apiBase.renameMediaFile(token, name)
 	}
 	convertFbxToGltf(token: string): Promise<void> {
-		return this.api_base.convertFbxToGltf(token)
+		return this.apiBase.convertFbxToGltf(token)
 	}
 	mediaFile(token: string): Promise<MediaFile> {
-		return this.api_base.mediaFile(token)
+		return this.apiBase.mediaFile(token)
+	}
+	apiBase: IStorytellerApi;
+
+	constructor(apiBase: IStorytellerApi) {
+		this.apiBase = apiBase
 	}
-	api_base: IStorytellerApi = mockApi ? new StorytellerApiMock() : new StorytellerApiBase();
 }
 
 export class ApiError<T extends AxiosResponse = AxiosResponse> extends Error {