move choice of local or remote api to app element

This commit is contained in:
Lee-Orr
2024-04-02 13:46:37 -04:00
parent 4c44182b20
commit f33ec4f8f3
2 changed files with 20 additions and 13 deletions
+5 -2
View File
@@ -11,11 +11,14 @@ import { DialogElement } from "@storyteller/studio-ui/dialog";
import { import {
SceneHierarchyElement, SceneHierarchyElement,
StorytellerApi, StorytellerApi,
StorytellerLocalApi,
StorytellerRemoteApi,
StudioURLParams, StudioURLParams,
mockApi,
} from "@storyteller/studio-web"; } from "@storyteller/studio-web";
import { match } from "@storyteller/utility"; import { match } from "@storyteller/utility";
import { LitElement, TemplateResult, html, nothing } from "lit"; 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 { classMap } from "lit/directives/class-map.js";
import { createRef, ref } from "lit/directives/ref.js"; import { createRef, ref } from "lit/directives/ref.js";
import { styleMap } from "lit/directives/style-map.js"; import { styleMap } from "lit/directives/style-map.js";
@@ -57,7 +60,7 @@ export class AppElement extends LitElement {
@state() currentSidebar : string = 'hierarchy'; @state() currentSidebar : string = 'hierarchy';
private api = new StorytellerApi(); @property({ attribute: false }) api: StorytellerApi = new StorytellerApi(mockApi ? new StorytellerLocalApi() : new StorytellerRemoteApi());
#addToSceneButtonRef = createRef<ButtonElement>(); #addToSceneButtonRef = createRef<ButtonElement>();
#videoStylePreviewBtnRef = createRef<ButtonElement>(); #videoStylePreviewBtnRef = createRef<ButtonElement>();
+15 -11
View File
@@ -3,7 +3,7 @@ import { v4 as uuid } from "uuid";
import { DBSchema, IDBPDatabase, openDB } from "idb"; import { DBSchema, IDBPDatabase, openDB } from "idb";
import * as studio from "@storyteller/studio"; 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 { interface IStorytellerApi {
createScene(file: File): Promise<MediaFileToken> createScene(file: File): Promise<MediaFileToken>
@@ -18,7 +18,7 @@ interface IStorytellerApi {
mediaFile(token: MediaFileToken): Promise<MediaFile> mediaFile(token: MediaFileToken): Promise<MediaFile>
} }
class StorytellerApiBase implements IStorytellerApi { export class StorytellerRemoteApi implements IStorytellerApi {
#api = axios.create({ #api = axios.create({
baseURL: "https://api.fakeyou.com", baseURL: "https://api.fakeyou.com",
withCredentials: true, withCredentials: true,
@@ -137,7 +137,7 @@ interface LocalDbSchema extends DBSchema {
} }
} }
class StorytellerApiMock implements IStorytellerApi { export class StorytellerLocalApi implements IStorytellerApi {
database?: IDBPDatabase<LocalDbSchema>; database?: IDBPDatabase<LocalDbSchema>;
dateFormat: Intl.DateTimeFormat = new Intl.DateTimeFormat("en-us") dateFormat: Intl.DateTimeFormat = new Intl.DateTimeFormat("en-us")
@@ -437,27 +437,31 @@ class StorytellerApiMock implements IStorytellerApi {
export class StorytellerApi implements IStorytellerApi { export class StorytellerApi implements IStorytellerApi {
createScene(file: File): Promise<string> { createScene(file: File): Promise<string> {
return this.api_base.createScene(file) return this.apiBase.createScene(file)
} }
session(): Promise<Session> { session(): Promise<Session> {
return this.api_base.session() return this.apiBase.session()
} }
listMediaFiles(options: ListMediaFilesOptions): Promise<ListMediaFilesResult> { listMediaFiles(options: ListMediaFilesOptions): Promise<ListMediaFilesResult> {
return this.api_base.listMediaFiles(options) return this.apiBase.listMediaFiles(options)
} }
uploadMediaFile(file: File, { subtype, mediaClass }: UploadMediaFileOptions): Promise<string> { 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> { 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> { convertFbxToGltf(token: string): Promise<void> {
return this.api_base.convertFbxToGltf(token) return this.apiBase.convertFbxToGltf(token)
} }
mediaFile(token: string): Promise<MediaFile> { 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 { export class ApiError<T extends AxiosResponse = AxiosResponse> extends Error {