@media-quest/engine 0.0.1 → 0.0.3

package/src/common/DTimestamp.ts

@@ -0,0 +1,20 @@
+export type DTimestamp = number & { __timestamp__: true };
+export namespace DTimestamp {
+    export const now = () => Date.now() as DTimestamp;
+    export type Diff = number & { __diff__: true };
+
+    export const addMills = (t: DTimestamp, ms: number): DTimestamp => {
+        const res = t + Math.abs(ms);
+        return res as DTimestamp;
+    };
+
+    export const diff = (t1: DTimestamp, t2: DTimestamp): Diff => {
+        const t1Abs = Math.abs(t1);
+        const t2Abs = Math.abs(t2);
+        return Math.abs(t1Abs - t2Abs) as Diff;
+    };
+
+    export const diffNow = (t: DTimestamp): Diff => {
+        return diff(t, now());
+    };
+}

package/src/common/DTmestamp.spec.ts

@@ -0,0 +1,11 @@
+import { DTimestamp } from "./DTimestamp";
+
+describe("DTimestamp works", () => {
+    test("Can add milliseconds to timestamp", () => {
+        const t0 = DTimestamp.now();
+        const plus1000 = DTimestamp.addMills(t0, 1000);
+        const diff = DTimestamp.diff(t0, plus1000);
+        // const pageDto: PageDto = {id}
+        expect(diff).toBe(1000);
+    });
+});

package/src/common/result.ts

@@ -0,0 +1,41 @@
+export class Ok<T> implements IResult<T> {
+    constructor(readonly value: T) {}
+    isOk(): this is Ok<T> {
+        return true;
+    }
+    isFailure(): this is Failure<T> {
+        return false;
+    }
+
+    map<A>(f: (t: T) => A): IResult<A> {
+        const value = f(this.value);
+        return new Ok<A>(value);
+    }
+}
+
+export class Failure<T> implements IResult<T> {
+    constructor(readonly message: string) {}
+    isFailure(): this is Failure<T> {
+        return true;
+    }
+
+    isOk(): this is Ok<T> {
+        return false;
+    }
+
+    map<A>(_f: (t: T) => A): IResult<A> {
+        return new Failure<A>(this.message);
+    }
+}
+
+interface IResult<T> {
+    isOk(): this is Ok<T>;
+    isFailure(): this is Failure<T>;
+    map<A>(f: (t: T) => A): IResult<A>;
+}
+
+export type Result<T> = Failure<T> | Ok<T>;
+export namespace Result {
+    export const ok = <T>(value: T) => new Ok<T>(value);
+    export const failure = <T>(message: string) => new Failure<T>(message);
+}

package/src/dto/AnimationDto.ts

@@ -0,0 +1,4 @@
+export interface AnimationDto {
+  readonly keyframes: Keyframe[];
+  readonly options: { duration: number; startIn?: number };
+}

package/src/dto/DElement.dto.ts

@@ -0,0 +1,50 @@
+import { DStyle } from "../Delement/DStyle";
+import { DEventHandler, QueryChangedHandler } from "../event-handlers/DEventHandler";
+import { DCommand } from "../commands/DCommand";
+
+// export interface CanBlockMedia {
+//     readonly isMediaBlocking:
+// }
+export type DElementDto = DTextDto | DImgDto | DDivDto;
+
+interface DStateListener {
+    readonly onStateChange?: ReadonlyArray<QueryChangedHandler>;
+}
+
+export interface DElementBaseDto extends DStateListener {
+    readonly id: string;
+    readonly style: Partial<DStyle>;
+    readonly eventHandlers?: ReadonlyArray<DEventHandler>;
+    readonly onClick?: ReadonlyArray<DCommand>;
+}
+
+export interface DTextDto extends DElementBaseDto {
+    readonly _tag: "p";
+    readonly text: string;
+}
+
+export interface DDivDto extends DElementBaseDto {
+    readonly _tag: "div";
+    readonly children: Array<DTextDto | DImgDto>;
+}
+
+export interface DImgDto extends DElementBaseDto {
+    readonly _tag: "img";
+    readonly url: string;
+}
+
+export interface DVideoDto extends DElementBaseDto {
+    readonly _tag: "video";
+    readonly url: string;
+    // readonly mode: "gif" | "autoplay" | "on-demand";
+    // readonly isMediaBlocking: boolean;
+}
+
+export interface DAudioDto {
+    readonly id: string;
+    readonly _tag: "audio";
+    readonly url: string;
+    // readonly eventHandlers: ReadonlyArray<DEventHandler>;
+
+    // readonly isMediaBlocking: boolean;
+}

package/src/dto/SchemaDto.ts

@@ -0,0 +1,65 @@
+import { DAutoPlaySequence } from "../Delement/DAuto-play";
+import { DAudioDto, DElementDto, DImgDto, DVideoDto } from "./DElement.dto";
+import { Rule } from "../rules/rule";
+import { Fact } from "../rules/fact";
+import { PageQueCommand } from "../commands/DCommand";
+import { DState } from "../state/Dstate";
+
+export type PageQueRules = Rule<PageQueCommand, never>;
+export interface PageDto {
+    readonly id: string;
+    readonly elements: Array<DElementDto>;
+    readonly tags?: string[];
+    readonly mainVideoId?: string;
+    readonly backgroundColor?: string;
+    readonly video?: Array<DVideoDto>;
+    readonly audio?: Array<DAudioDto>;
+    readonly autoPlaySequence?: DAutoPlaySequence;
+}
+
+export interface PageSequenceDto {
+    readonly id: string;
+    readonly rules: Array<PageQueRules>;
+    readonly pages: Array<PageDto>;
+}
+
+export interface SchemaDto {
+    readonly id: string;
+    readonly prefix: string;
+    readonly baseHeight: number;
+    readonly baseWidth: number;
+    readonly backgroundColor: string;
+    readonly pages: PageDto[];
+    readonly rules: Array<PageQueRules>;
+    readonly stateProps?: ReadonlyArray<DState.Prop>;
+    readonly stateQueries?: ReadonlyArray<DState.StateQuery>;
+    readonly stateFromEvent: ReadonlyArray<DState.fromEventHandler>;
+    readonly pageSequences?: Array<PageSequenceDto>;
+    readonly predefinedFacts?: ReadonlyArray<Fact>;
+}
+
+export namespace SchemaDto {
+    export const getResources = (
+        schema: SchemaDto
+    ): {
+        videoList: ReadonlyArray<DVideoDto>;
+        audioList: ReadonlyArray<DAudioDto>;
+        imageList: ReadonlyArray<DImgDto>;
+    } => {
+        const { pages } = schema;
+        const videoList = pages.reduce<Array<DVideoDto>>((acc, curr) => {
+            if (Array.isArray(curr.video)) {
+                acc.push(...curr.video);
+            }
+            return acc;
+        }, []);
+        const audioList: Array<DAudioDto> = pages.reduce<Array<DAudioDto>>((acc, curr) => {
+            if (Array.isArray(curr.audio)) {
+                acc.push(...curr.audio);
+            }
+            return acc;
+        }, []);
+
+        return { videoList, audioList, imageList: [] };
+    };
+}

package/src/engine/DPage.ts

@@ -0,0 +1,55 @@
+import { DElement } from "../Delement/DElement";
+import { PageDto } from "../dto/SchemaDto";
+import { createDElement } from "./element-factory";
+import { EventBus } from "../events/event-bus";
+import { DCommandBus } from "../commands/DCommandBus";
+import { DTimestamp } from "../common/DTimestamp";
+import { ScaleService } from "./scale";
+
+export class DPage {
+    private readonly TAG = "[ DPage ]: ";
+    private elements: DElement<HTMLElement>[] = [];
+    private readonly eventBus;
+    private readonly commandBus;
+    private readonly scale: ScaleService;
+    // Todo GLOBAL EVENT_BUSS AND PAGE EVENTS:
+
+    constructor(private readonly dto: PageDto, eventBus: EventBus, commandBus: DCommandBus, scale: ScaleService) {
+        this.eventBus = eventBus;
+        this.commandBus = commandBus;
+        this.scale = scale;
+        this.elements = dto.elements.map((dto) => createDElement(dto, this.commandBus, this.eventBus, this.scale));
+    }
+
+    appendYourself(parent: HTMLElement) {
+        // console.log(this.TAG + " APPENDING TO PARENT");
+        this.elements.forEach((el) => {
+            el.appendYourself(parent);
+            // parent.appendChild(el.el);
+        });
+
+        // if (!preloadMode) {
+        this.eventBus.emit({
+            kind: "PAGE_ENTER_EVENT",
+            timestamp: DTimestamp.now(),
+            producer: "DPage",
+            producerId: this.id,
+            data: { pageId: this.id },
+        });
+        // }
+    }
+
+    destroy() {
+        this.elements.forEach((el) => {
+            el.destroy();
+        });
+    }
+
+    log(): void {
+        // console.log(this.TAG + 'scale - ' + this.scale);
+    }
+
+    get id() {
+        return this.dto.id;
+    }
+}

package/src/engine/SchemaEngine.ts

@@ -0,0 +1,210 @@
+import { SchemaDto } from "../dto/SchemaDto";
+import { DMediaManager } from "../services/DMedia-manager";
+import { DCommandBus } from "../commands/DCommandBus";
+import { EventBus } from "../events/event-bus";
+import { DPlayer } from "../player/dplayer";
+import { AnsweredQuestion } from "../player/history-que";
+import { DTimestamp } from "../common/DTimestamp";
+import { DPage } from "./DPage";
+import { ScaleService } from "./scale";
+import { ResourceProvider } from "../services/resource-provider";
+import { StateService } from "../state/state-service";
+import { DCommand, StateCommand } from "../commands/DCommand";
+import { DEvent } from "../events/DEvents";
+
+export interface EngineLogger {
+    error(message: string): void;
+    warn(message: string): void;
+    appEvent(event: DEvent): void;
+    appCommand(command: DCommand): void;
+}
+
+export interface SchemaResult {
+    readonly eventLog: ReadonlyArray<DEvent>;
+    readonly commandLog: ReadonlyArray<DCommand>;
+    readonly answers: ReadonlyArray<any>;
+}
+export interface ISchemaEngine {
+    onComplete(handler: (result: SchemaResult) => void): void;
+    onCommandOrEvent(item: DEvent | DCommand): void;
+    setSchema(schema: SchemaDto): void;
+    onFatalError(handler: (error: { message: string }) => void): void;
+}
+
+export class SchemaEngine implements ISchemaEngine {
+    private readonly TAG = "[ SCHEMA_ENGINE ] :";
+    private readonly commandBus = new DCommandBus();
+    private readonly eventBus = new EventBus();
+    private readonly mediaManager: DMediaManager;
+    private readonly scale: ScaleService;
+    private readonly hostElement: HTMLDivElement;
+    private readonly uiContainer: HTMLDivElement = document.createElement("div");
+    private readonly mediaContainer: HTMLDivElement = document.createElement("div");
+    private readonly resourceProvider: ResourceProvider;
+    private readonly stateService: StateService;
+    private readonly globalEventToStateHandlers = new Map<string, ReadonlyArray<StateCommand>>();
+    private player: DPlayer;
+    private currentPage: DPage | false = false;
+    private readonly subs: Array<() => void> = [];
+
+    constructor(
+        hostEl: HTMLDivElement,
+        private readonly height: number,
+        private readonly width: number,
+        private readonly schema: SchemaDto
+    ) {
+        this.hostElement = hostEl;
+        this.hostElement.appendChild(this.uiContainer);
+        this.hostElement.appendChild(this.mediaContainer);
+        const stateProps = this.schema.stateProps ?? [];
+        const stateQueries = this.schema.stateQueries ?? [];
+        this.stateService = new StateService(this.eventBus, this.commandBus, stateProps, stateQueries);
+        this.scale = new ScaleService({
+            baseHeight: schema.baseHeight,
+            baseWidth: schema.baseWidth,
+            containerWidth: width,
+            containerHeight: height,
+        });
+        // this.commandBus.logCommands = true;
+        const globalEventHandlers = schema.stateFromEvent ?? [];
+
+        globalEventHandlers.forEach((h) => {
+            this.globalEventToStateHandlers.set(h.onEvent, h.thenExecute);
+        });
+
+        const resources = SchemaDto.getResources(this.schema);
+        this.resourceProvider = new ResourceProvider({ videos: resources.videoList, audio: resources.audioList });
+        this.mediaManager = new DMediaManager(
+            this.mediaContainer,
+            this.commandBus,
+            this.eventBus,
+            this.resourceProvider,
+            this.scale
+        );
+        this.player = new DPlayer(this.schema);
+        this.styleSelf();
+        this.nextPage();
+        this.hookUpListeners();
+    }
+
+    private hookUpListeners() {
+        const eventSubscription = this.eventBus.subscribe((ev) => {
+            this.onCommandOrEvent(ev);
+            const globalHandlers = this.globalEventToStateHandlers.get(ev.kind) ?? [];
+            globalHandlers.forEach((stateCommand) => {
+                this.commandBus.emit(stateCommand);
+            });
+        }, this.TAG + "HOOK_UP_LISTENERS");
+        const commandSubscription = this.commandBus.subscribe((command) => {
+            // switch (command.kind) {
+            //
+            // }
+            this.onCommandOrEvent(command);
+            if (command.kind === "PAGE_QUE_NEXT_PAGE_COMMAND") {
+                this.nextPage();
+            }
+
+            if (command.kind === "ENGINE_LEAVE_PAGE_COMMAND") {
+                const pageId = command.payload.pageId;
+                const facts = command.payload.factsCollected;
+                const timestamp = DTimestamp.now();
+                const ans: AnsweredQuestion[] = facts.map((f) => ({
+                    timestamp,
+                    fact: f,
+                }));
+                this.player.saveHistory({
+                    answeredQuestions: ans,
+                    pageId,
+                });
+
+                this.nextPage();
+                // const history: PageHistory = { page: {}, answeredQuestions: [] };
+            }
+        }, this.TAG);
+
+        this.subs.push(commandSubscription);
+        this.subs.push(eventSubscription);
+    }
+
+    private styleSelf() {
+        this.hostElement.style.height = this.scale.pageHeight + "px";
+        this.hostElement.style.width = this.scale.pageWidth + "px";
+        this.hostElement.style.backgroundColor = this.schema.backgroundColor ?? "white";
+        this.hostElement.style.position = "relative";
+        // this.hostElement.style.overflow = "hidden";
+        const makeStatic = (div: HTMLDivElement) => {
+            div.style.height = "0px";
+            div.style.width = "0px";
+            div.style.position = "static";
+        };
+
+        makeStatic(this.uiContainer);
+        makeStatic(this.mediaContainer);
+    }
+
+    private nextPage() {
+        // TODO SHOULD THIS BE PART OF THE SCHEMA?? THIS IS CLEANUP LOGIC
+        // this.commandBus.emit({ kind: "VIDEO_PAUSE_COMMAND", target: "VIDEO", targetId: "VIDEO", payload: {} });
+        // this.commandBus.emit({ kind: "AUDIO_PAUSE_COMMAND", target: "AUDIO", targetId: "AUDIO", payload: {} });
+        const currPageId = this.currentPage ? this.currentPage.id : "NO_PAGE";
+        // console.groupCollapsed("NEXT_PAGE FROM: " + currPageId);
+        console.log(this.TAG + " NEXT_PAGE STARTED AT: " + currPageId);
+        this.mediaManager.clearAllMedia();
+        const nextPage = this.player.getNextPage();
+        const state = this.stateService.getState();
+        console.log(state);
+        // TODO CLEAN UP PAGE COMPONENTS this.page.CleanUp()
+        if (this.currentPage) {
+            this.currentPage.destroy();
+            this.uiContainer.innerHTML = "";
+        }
+        if (!nextPage) {
+            // TODO FIGURE OUT WHAQT TO DO AT END OF TEST!! Start over??
+            this.player = new DPlayer(this.schema);
+            if (this.schema.pages.length > 0) {
+                this.nextPage();
+            }
+            return false;
+        }
+        const newPage = new DPage(nextPage, this.eventBus, this.commandBus, this.scale);
+
+        this.currentPage = newPage;
+        newPage.appendYourself(this.uiContainer);
+
+        this.mediaManager.setPage(nextPage);
+        const s1 = this.stateService.getState();
+        console.log(s1);
+        console.log("Next-page: " + newPage.id);
+        // console.groupEnd();
+        return true;
+    }
+
+    destroy() {
+        if (this.currentPage) {
+            this.currentPage.destroy();
+            this.uiContainer.innerHTML = "";
+        }
+        this.mediaManager.destroy();
+        this.stateService.destroy();
+        this.subs.forEach((sub) => {
+            sub();
+        });
+        const evStats = this.eventBus.getStats();
+        const cmdStats = this.commandBus.getStats();
+        console.assert(evStats.subscribersCount === 0, this.TAG + " Eventbus should have no subscribers ", evStats);
+        console.assert(cmdStats.subscribersCount === 0, this.TAG + "Commandbus should have no subscribers", cmdStats);
+    }
+    onComplete(handler: (result: SchemaResult) => void) {
+        console.log(handler);
+    }
+
+    onFatalError(handler: (error: { message: string }) => void): void {
+        console.log(handler);
+    }
+
+    onCommandOrEvent(_event_or_command: DEvent | DCommand) {}
+
+    setSchema(schema: SchemaDto): void {
+        console.log(schema);
+    }
+}

package/src/engine/element-factory.ts

@@ -0,0 +1,52 @@
+import { DElement } from "../Delement/DElement";
+import { DDiv } from "../Delement/Ddiv";
+import { DImg } from "../Delement/DImg";
+import { DText } from "../Delement/DText";
+import { DDivDto, DElementDto } from "../dto/DElement.dto";
+import { DCommandBus } from "../commands/DCommandBus";
+import { EventBus } from "../events/event-bus";
+import { ScaleService } from "./scale";
+
+export const createDElement = (
+    dto: DElementDto,
+    actionBus: DCommandBus,
+    eventBus: EventBus,
+    scale: ScaleService
+): DElement<any> => {
+    switch (dto._tag) {
+        case "div":
+            const childEls = createChildrenForDiv(dto, actionBus, eventBus, scale);
+            const newDiv = new DDiv(dto, eventBus, actionBus, scale, childEls);
+            return newDiv;
+        case "img":
+            return new DImg(dto, actionBus, eventBus, scale);
+        case "p":
+            return new DText(dto, eventBus, actionBus, scale);
+        default:
+            const check: never = dto;
+            throw new Error("Unknown dto given to the createDElement function.");
+        // TODO LOGGING or create any HTML-ELEMENT??
+    }
+};
+
+const createChildrenForDiv = (
+    dto: DDivDto,
+    actionSubject: DCommandBus,
+    eventBus: EventBus,
+    scale: ScaleService
+): DDiv["children"] => {
+    const childDto = dto.children;
+    const childEls: Array<DImg | DText> = [];
+    // console.log(childElements);
+    childDto.forEach((dto) => {
+        if (dto._tag === "p") {
+            const newText = new DText(dto, eventBus, actionSubject, scale);
+            childEls.push(newText);
+        }
+        if (dto._tag === "img") {
+            const newImage = new DImg(dto, actionSubject, eventBus, scale);
+            childEls.push(newImage);
+        }
+    });
+    return childEls;
+};

package/src/engine/scale.spec.ts

@@ -0,0 +1,38 @@
+import { Scale, ScaleService } from "./scale";
+
+describe("Scale works", () => {
+    test("scaleService", () => {
+        const scaleService = new ScaleService({
+            baseHeight: 1300,
+            baseWidth: 1024,
+            containerWidth: 600,
+            containerHeight: 650,
+        });
+        expect(scaleService.scale).toBe(0.5);
+        const unsub = scaleService.onChange((scale) => {
+            expect(scale).toBe(0.5);
+        }, "ScaleService test-function");
+        unsub();
+
+        scaleService.setContainerBounds({ height: 1170, width: 1000 });
+
+        expect(scaleService.scale).toBe(0.9);
+    });
+    test("scaleFn", () => {
+        const scaleFunction = Scale.calc(1200, 1200);
+        expect(scaleFunction({ height: 600, width: 600 })).toBe(0.5);
+        expect(scaleFunction({ height: 900, width: 600 })).toBe(0.5);
+        expect(scaleFunction({ height: 400, width: 600 })).toBe(4 / 12);
+        expect(scaleFunction({ height: 900, width: 300 })).toBe(0.25);
+        expect(scaleFunction({ height: 300, width: 400 })).toBe(0.25);
+        expect(scaleFunction({ height: 0, width: 0 })).toBe(0);
+        const scaleFunction2 = Scale.calc(1200, 1024);
+        expect(scaleFunction2({ height: 600, width: 6000 })).toBe(0.5);
+        expect(scaleFunction2({ height: 400, width: 800 })).toBe(4 / 12);
+        expect(scaleFunction2({ height: 800, width: 512 })).toBe(0.5);
+        const scale = Scale.scaleFunctionCreator(0.5);
+
+        expect(scale(500)).toBe(250);
+        expect(scale(200)).toBe(100);
+    });
+});

package/src/engine/scale.ts

@@ -0,0 +1,70 @@
+export class ScaleService {
+  private readonly baseHeight;
+  private readonly baseWidth;
+  private containerHeight = 1300;
+  private containerWidth = 1300;
+
+  get scale() {
+    return this._scale;
+  }
+
+  get pageHeight() {
+    return this.baseHeight * this.scale;
+  }
+  get pageWidth() {
+    return this.baseWidth * this._scale;
+  }
+
+  private _scale = 1;
+
+  private readonly subscribers = new Set<(scale: number) => void>();
+
+  constructor(config: { baseHeight: number; baseWidth: number; containerHeight: number; containerWidth: number }) {
+    this.baseHeight = config.baseHeight;
+    this.baseWidth = config.baseWidth;
+    this.containerHeight = config.containerHeight;
+    this.containerWidth = config.containerWidth;
+    this.updateScale();
+  }
+
+  setContainerBounds(bounds: { height: number; width: number }) {
+    this.containerWidth = bounds.width;
+    this.containerHeight = bounds.height;
+    this.updateScale();
+  }
+  private updateScale() {
+    const scaleFn = Scale.calc(this.baseHeight, this.baseWidth);
+    const scale = scaleFn({ height: this.containerHeight, width: this.containerWidth });
+    const hasChanged = this.scale !== scale;
+    this._scale = scale;
+    if (hasChanged) {
+      this.subscribers.forEach((fn) => {
+        fn(this._scale);
+      });
+    }
+  }
+
+  onChange(scaleChangeHandler: (scale: number) => void, subscriberId: string) {
+    // console.log(subscriberId);
+    this.subscribers.add(scaleChangeHandler);
+    scaleChangeHandler(this._scale);
+    return () => {
+      this.subscribers.delete(scaleChangeHandler);
+    };
+  }
+}
+export namespace Scale {
+  export const calc = (baseHeight: number, baseWidth: number) => {
+    return (container: { height: number; width: number }) => {
+      const heightRatio = container.height / baseHeight;
+      const widthRatio = container.width / baseWidth;
+      return Math.min(heightRatio, widthRatio);
+    };
+  };
+
+  type ScalePosInput = { x: number; y: number; h: number; w: number };
+
+  export const scaleFunctionCreator = (scale: number) => {
+    return (value: number) => value * scale;
+  };
+}

package/src/event-handlers/DEventHandler.ts

@@ -0,0 +1,29 @@
+import { DCommand, ElementCommand, StateCommand } from "../commands/DCommand";
+import { DEvent } from "../events/DEvents";
+import { Condition } from "../rules/condition";
+
+export interface DEventHandler<E extends DEvent = DEvent> {
+    readonly onEvent: E["kind"];
+    readonly when?: { producerId?: string; condition?: Condition };
+    readonly thenExecute: ReadonlyArray<DCommand>;
+}
+
+export interface QueryChangedHandler {
+    readonly queryName: string;
+    readonly whenTrue: ReadonlyArray<ElementCommand>;
+    readonly whenFalse: ReadonlyArray<ElementCommand>;
+}
+
+export namespace DEventHandler {
+    export type LookUp = Map<DEventHandler["onEvent"], Array<DEventHandler>>;
+    export const createLookUp = (handlers?: ReadonlyArray<DEventHandler>): LookUp => {
+        const map = new Map<DEventHandler["onEvent"], Array<DEventHandler>>();
+        handlers?.forEach((h) => {
+            const kind = h.onEvent;
+            const current = map.get(kind);
+            const actions = current ? [...current, h] : [h];
+            map.set(kind, actions);
+        });
+        return map;
+    };
+}