@media-quest/engine 0.0.1 → 0.0.3

package/package.json

@@ -1,7 +1,14 @@
 {
   "name": "@media-quest/engine",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Rendering engine for media-quest schemas.",
-  "main": "./src/public-api.ts",
-  "license": "MIT"
+  "main": "dist/public-api.js",
+  "module": "dist/public-api.mjs",
+  "types": "dist/public-api.d.ts",
+  "license": "MIT",
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run clean && tsup src/public-api.ts --format cjs,esm --dts",
+    "prepublishOnly": "npm run build"
+  }
 }

package/src/Delement/AudioContainer.ts

@@ -0,0 +1,169 @@
+import { CanPlayToEnd } from "./VideoContainer";
+import { DAudioDto } from "../dto/DElement.dto";
+import { DEventDispatcher } from "../events/event-bus";
+import { DTimestamp } from "../common/DTimestamp";
+
+export class AudioContainer implements CanPlayToEnd {
+    private readonly TAG = "[ DAudio ]: ";
+    protected dto: DAudioDto | null = null;
+    private el: HTMLAudioElement;
+    constructor(private readonly eventBus: DEventDispatcher) {
+        this.el = document.createElement("audio");
+        this.el.style.position = "absolute";
+        this.el.style.visibility = "hidden";
+        // this.el.on
+        this.onLoad = this.onLoad.bind(this);
+        this.el.onload = this.onLoad;
+        this.onLoadedMetadata = this.onLoadedMetadata.bind(this);
+        this.el.onloadedmetadata = this.onLoadedMetadata;
+        this.el.onplay = () => {
+            // TODO
+        };
+        this.onCanPlayThrough = this.onCanPlayThrough.bind(this);
+        this.el.oncanplaythrough = this.onCanPlayThrough;
+        this.el.onended = (_) => {
+            const url = this.el.src;
+            this.eventBus.emit({
+                kind: "AUDIO_ENDED_EVENT",
+                data: { url },
+                producer: "DAudio",
+                timestamp: DTimestamp.now(),
+                producerId: this.id,
+            });
+        };
+        this.el.ondurationchange = (_: Event) => {
+            const duration = this.el.duration;
+            const isInfinity = duration === Number.POSITIVE_INFINITY;
+            this.eventBus.emit({
+                kind: "AUDIO_DURATION_CHANGE_EVENT",
+                timestamp: DTimestamp.now(),
+                producer: "DAudio",
+                producerId: this.id,
+                data: { duration: this.el.duration, isInfinity },
+            });
+        };
+    }
+
+    setAudio(dto: DAudioDto) {
+        this.dto = dto;
+        this.el.src = dto.url;
+        this.el.load();
+    }
+
+    destroy() {
+        try {
+            this.el.pause();
+            this.el.src = "";
+            this.el.load();
+        } catch (e) {
+            console.log(e);
+        }
+    }
+
+    pause() {
+        try {
+            this.el.pause();
+        } catch (e) {
+            // TODO EMIT ERROR EVENT.
+            console.log(e);
+        }
+    }
+
+    play(url: string) {
+        if (this.el.src !== url) {
+            this.el.src = url;
+        }
+        this.eventBus.emit({
+            kind: "AUDIO_PLAY_EVENT",
+            producerId: this.id,
+            data: {},
+            producer: "DAudio",
+            timestamp: DTimestamp.now(),
+        });
+        this.el
+            .play()
+            .then((res) => {
+                console.log(res);
+            })
+            .catch((e) => {
+                console.log(e);
+            });
+    }
+
+    onLoadedMetadata(_: Event) {
+        this.eventBus.emit({
+            kind: "AUDIO_METADATA_LOADED_EVENT",
+            timestamp: DTimestamp.now(),
+            producer: "DAudio",
+            producerId: this.id,
+            data: {},
+        });
+    }
+
+    onLoad(_: Event) {
+        this.eventBus.emit({
+            kind: "AUDIO_LOAD_EVENT",
+            timestamp: DTimestamp.now(),
+            producer: "DAudio",
+            producerId: this.id,
+            data: {},
+        });
+        // console.log(this.TAG + event.type);
+    }
+
+    get id() {
+        return this.dto?.id ?? "DAudio";
+    }
+
+    private onCanPlayThrough(_: Event) {
+        this.eventBus.emit({
+            kind: "AUDIO_CAN_PLAY_THROUGH_EVENT",
+            data: {},
+            producer: "DAudio",
+            timestamp: DTimestamp.now(),
+            producerId: this.id,
+        });
+    }
+
+    // private onPlay(_: Event) {}
+
+    async playToEnd(): Promise<boolean> {
+        const endedOrErrored = new Promise<boolean>((resolve) => {
+            this.el.addEventListener(
+                "ended",
+                (_) => {
+                    // console.log(e);
+                    resolve(true);
+                },
+                { once: true }
+            );
+            this.el.addEventListener(
+                "error",
+                (_) => {
+                    // console.log(e);
+                    resolve(false);
+                },
+                { once: true }
+            );
+        });
+        try {
+            this.play(this.el.src);
+            await endedOrErrored;
+            return true;
+        } catch (e) {
+            // TODO LET PARENT DEAL WITH ERRORS? THE MANAGER?? MANAGERS CALL ABORT.
+            console.log(e);
+            this.eventBus.emit({
+                kind: "AUDIO_ERROR_EVENT",
+                timestamp: DTimestamp.now(),
+                producer: "DAudio",
+                producerId: this.id,
+                data: { error: e },
+            });
+            return false;
+        } finally {
+        }
+
+        return Promise.resolve(false);
+    }
+}

package/src/Delement/DAuto-play.ts

@@ -0,0 +1,36 @@
+import { DCommand } from "../commands/DCommand";
+
+/**
+ * Autoplay video by Id.
+ */
+export interface AutoPlayVideo {
+    readonly kind: "autoplay-video";
+    readonly muted?: boolean;
+    readonly startAt?: number;
+    readonly videoId: string;
+}
+
+/**
+ * Add a pause between auto-play elements.
+ * TODO Not implemented
+ */
+export interface AutoPlayPause {
+    readonly kind: "autoplay-pause";
+    readonly duration: number;
+}
+
+export interface AutoPlayAudio {
+    readonly kind: "autoplay-audio";
+    readonly audioId: string;
+    readonly startAt?: number;
+}
+
+export type AutoPlayElement = AutoPlayVideo | AutoPlayAudio | AutoPlayPause;
+
+export interface DAutoPlaySequence {
+    readonly id: string;
+    readonly blockUserInput: boolean;
+    readonly items: Array<AutoPlayAudio | AutoPlayVideo | AutoPlayPause>;
+    readonly startCommands: ReadonlyArray<DCommand>;
+    readonly endCommands: ReadonlyArray<DCommand>;
+}

package/src/Delement/DElement.ts

@@ -0,0 +1,263 @@
+import { DStyle } from "./DStyle";
+import { DElementBaseDto } from "../dto/DElement.dto";
+import { DCommand, ElementCommand } from "../commands/DCommand";
+import { DCommandBus } from "../commands/DCommandBus";
+import { DEventHandler } from "../event-handlers/DEventHandler";
+import { DUtil } from "../utils/DUtil";
+import { EventBus } from "../events/event-bus";
+import { DTimestamp } from "../common/DTimestamp";
+import { AnimationDto } from "../dto/AnimationDto";
+import { ScaleService } from "../engine/scale";
+import { DState } from "../state/Dstate";
+
+export abstract class DElement<T extends HTMLElement> {
+    protected readonly el: T;
+    private clickHandlerIsEnabled = true;
+    readonly id: string;
+    private isAnimatingSelf = false;
+    protected currStyle: Partial<DStyle> = {
+        fontSize: { _unit: "px", value: 100 },
+        fontWeight: 500,
+        textColor: "black",
+        opacity: 1,
+    };
+
+    // private readonly onQueryChangedHandlers =
+    private readonly eventHandlers: DEventHandler.LookUp;
+    protected readonly commandBus: DCommandBus;
+    protected readonly eventBus: EventBus;
+    protected scale: ScaleService;
+    private readonly baseDto: DElementBaseDto;
+    protected readonly subscriptions = new Set<() => void>();
+
+    protected constructor(
+        el: T,
+        eventBus: EventBus,
+        commandBus: DCommandBus,
+        dto: DElementBaseDto,
+        scale: ScaleService
+    ) {
+        this.el = el;
+        this.id = dto.id;
+        this.baseDto = dto;
+        // this.el.style.position = "absolute";
+        this.commandBus = commandBus;
+        this.eventBus = eventBus;
+        this.eventHandlers = DEventHandler.createLookUp(dto.eventHandlers);
+        this.scale = scale;
+        // CLICK
+        this.onClickHandler = this.onClickHandler.bind(this);
+        this.el.onclick = this.onClickHandler;
+
+        // HOVER
+        this.onMouseOver = this.onMouseOver.bind(this);
+        this.el.onmouseover = this.onMouseOver;
+
+        if (dto) {
+            this.updateStyles(dto?.style);
+        }
+        const commandSubscription = this.commandBus.subscribe((c) => {
+            if (c.kind === "ELEMENT_STYLE_COMMAND" && c.targetId === this.id) {
+                this.setStyle(c.payload.changes);
+            }
+            if (c.kind === "ELEMENT_DISABLE_CLICK_COMMAND" && c.targetId === this.id) {
+                this.clickHandlerIsEnabled = false;
+            }
+            if (c.kind === "ELEMENT_ENABLE_CLICK_COMMAND" && c.targetId === this.id) {
+                this.clickHandlerIsEnabled = true;
+            }
+            if (c.kind === "ELEMENT_ANIMATE_COMMAND" && c.targetId === this.id) {
+                console.log("TODO IMPLEMENT ANIMATION_HANDLER IN DElement.");
+            }
+        }, this.id);
+        // TODO MEMORY LEAK
+        const eventSubscription = this.eventBus.subscribe((event) => {
+            const handlers = this.eventHandlers.get(event.kind) ?? [];
+            // TODO Apply Conditions in WHEN.
+            const commands = handlers.map((h) => h.thenExecute).flat(1);
+            commands.forEach((command) => {
+                this.commandBus.emit(command);
+                // this.doAction(command);
+            });
+
+            if (event.kind === "HOST_SCALE_CHANGED_EVENT") {
+                console.log("HANDLE THIS SCALE CHANGE!!");
+                this.updateStyles({});
+            }
+
+            if (event.kind === "STATE_QUERY_RESULT_CHANGED_EVENT") {
+                this.queryChangedHandler(event.data);
+            }
+        }, "ELEMENT: ");
+        this.normalize();
+        this.subscriptions.add(commandSubscription);
+        this.subscriptions.add(eventSubscription);
+    }
+
+    abstract destroy(): void;
+
+    // abstract setScale(scale: number): void;
+
+    // /**
+    //  * The purpose of this function is to re-emit commands from event-handlers?
+    //  * @param command
+    //  * @private
+    //  */
+    // private handleCommandsEmittedByPrivateEventHandlers(command: DCommand) {
+    //     console.log(command);
+    //     switch (command.kind) {
+    //         case "ELEMENT_STYLE_COMMAND":
+    //             if (command.targetId === this.id) {
+    //                 this.updateStyles(command.payload.changes);
+    //             }
+    //             break;
+    //         case "ELEMENT_ANIMATE_COMMAND":
+    //             // TODO CHECK FOR TARGET ID
+    //             this.handleAnimateSelfAction(command.payload);
+    //             break;
+    //         case "ELEMENT_ENABLE_CLICK_COMMAND":
+    //             this.clickHandlerIsEnabled = true;
+    //             // this.updateStyles(command.payload.changes);
+    //             break;
+    //         case "ELEMENT_DISABLE_CLICK_COMMAND":
+    //             this.clickHandlerIsEnabled = false;
+    //             // this.handleAnimateSelfAction(command.payload);
+    //             break;
+    //         case "VIDEO_PLAY_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         case "VIDEO_PAUSE_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         case "ENGINE_LEAVE_PAGE_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         case "VIDEO_JUMP_TO_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         case "VIDEO_SET_VOLUME_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         case "AUDIO_PLAY_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         case "AUDIO_PAUSE_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         case "AUDIO_SET_VOLUME_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         case "PAGE_QUE_NEXT_PAGE_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         case "PAGE_QUE_GO_TO_SEQUENCE_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         case "PAGE_QUE_GO_TO_PAGE_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         case "PAGE_QUE_EXCLUDE_BY_PAGE_ID_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         case "PAGE_QUE_JUMP_TO_PAGE_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         case "PAGE_QUE_EXCLUDE_BY_TAG_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         case "STATE_MUTATE_COMMAND":
+    //             this.commandBus.emit(command);
+    //             break;
+    //         default:
+    //             DUtil.neverCheck(command);
+    //     }
+    // }
+
+    private queryChangedHandler(result: DState.StateQueryResult) {
+        const maybeHandlers = this.baseDto.onStateChange;
+        if (!maybeHandlers) {
+            return;
+        }
+        const queryHandlers = maybeHandlers.filter((h) => h.queryName === result.queryName);
+        queryHandlers.forEach((h) => {
+            if (result.curr) {
+                h.whenTrue.forEach((command) => {
+                    // this.doAction(command);
+                    this.commandBus.emit(command);
+                });
+            } else {
+                h.whenFalse.forEach((command) => {
+                    // this.doAction(command);
+                    this.commandBus.emit(command);
+                });
+            }
+        });
+        // console.log(findByQuery, value);
+        // const all = this.baseDto.stateQueryChange ?? [];
+    }
+
+    private onClickHandler(_: MouseEvent) {
+        // console.log();
+        if (!this.clickHandlerIsEnabled) {
+            console.log(this.id + "Click disabled");
+            return;
+        }
+        const clickAction = this.baseDto.onClick;
+        // console.log("NATIVE CLICK ELEMENT: Handlers " + clickAction?.length);
+        if (clickAction && clickAction.length > 0) {
+            // console.log("TARGETID: " + clickAction[0].targetId + " " + this.id);
+            this.eventBus.emit({
+                kind: "USER_CLICKED_EVENT",
+                producer: "DUser",
+                producerId: this.id,
+                data: { elementId: this.id },
+                timestamp: DTimestamp.now(),
+            });
+            clickAction.forEach((command) => {
+                this.commandBus.emit(command);
+            });
+        }
+    }
+
+    private onMouseOver(_: MouseEvent) {
+        // console.log(ev);
+    }
+
+    setStyle(style: Partial<DStyle>) {
+        this.updateStyles(style);
+    }
+
+    appendYourself(parent: HTMLElement) {
+        parent.append(this.el);
+        // console.log(parent);
+    }
+
+    private handleAnimateSelfAction(dto: AnimationDto) {
+        this.isAnimatingSelf = true;
+        const { keyframes, options } = dto;
+
+        const animation = this.el.animate(keyframes, options.duration);
+        animation.onfinish = (e: AnimationPlaybackEvent) => {
+            console.log(e.type);
+            this.isAnimatingSelf = false;
+        };
+        animation.onremove = () => {
+            console.warn("ANIMATION REMOVED: " + animation.id);
+            this.isAnimatingSelf = false;
+        };
+        animation.oncancel = () => {
+            console.warn("ANIMATION CANCELED: " + animation.id);
+            this.isAnimatingSelf = false;
+        };
+    }
+
+    private normalize() {
+        DStyle.normalize(this.el);
+    }
+
+    protected updateStyles(style: Partial<DStyle>) {
+        this.currStyle = Object.assign(this.currStyle, style);
+        DStyle.applyStyles(this.el, this.currStyle, this.scale.scale);
+        window.getComputedStyle(this.el);
+    }
+}

package/src/Delement/DImg.ts

@@ -0,0 +1,78 @@
+import { DElement } from "./DElement";
+import { DImgDto } from "../dto/DElement.dto";
+import { DCommandBus } from "../commands/DCommandBus";
+import { EventBus } from "../events/event-bus";
+import { ScaleService } from "../engine/scale";
+import { DTimestamp } from "../common/DTimestamp";
+
+export class DImg extends DElement<HTMLImageElement> {
+    private static IMAGE_COUNT = 0;
+    private readonly imageCount: number;
+    readonly TAG: string;
+    readonly TIMING_TAG: string;
+    private readonly loadStart: DTimestamp;
+
+    constructor(
+        private readonly dto: DImgDto,
+        private readonly actionSubject: DCommandBus,
+        readonly eventBus: EventBus,
+        readonly scaleService: ScaleService
+    ) {
+        super(document.createElement("img"), eventBus, actionSubject, dto, scaleService);
+        DImg.IMAGE_COUNT += 1;
+        this.imageCount = DImg.IMAGE_COUNT;
+        this.TAG = "[D_IMG " + DImg.IMAGE_COUNT + " ]: ";
+        this.TIMING_TAG = "load-time (" + DImg.IMAGE_COUNT + ") ";
+        this.el.loading = "eager";
+        this.el.style.position = "absolute";
+        this.setStyle(dto.style);
+        this.loadStart = DTimestamp.now();
+        // Bind Handlers
+        this.onError = this.onError.bind(this);
+        this.onLoad = this.onLoad.bind(this);
+        // this.onClick = this.onClick.bind(this);
+        this.el.onload = this.onLoad;
+        this.el.onerror = this.onError;
+        // this.el.onclick = this.onClick;
+        this.el.src = dto.url;
+        console.time(this.TIMING_TAG);
+    }
+
+    log(): void {}
+
+    setScale(scale: number) {
+        console.log(scale);
+        this.setStyle(this.currStyle);
+    }
+    destroy() {
+        this.subscriptions.forEach((unsubscribe) => {
+            unsubscribe();
+        });
+    }
+
+    private onError(ev: Event | string) {
+        if (ev instanceof Event) {
+            console.log(this.TAG + " " + ev.type);
+        } else {
+            console.log(this.TAG + ev);
+        }
+    }
+
+    private onLoad(_: Event) {
+        const loadTime = DTimestamp.diffNow(this.loadStart);
+
+        this.eventBus.emit({
+            kind: "IMAGE_LOADED_EVENT",
+            producer: "DImage",
+            producerId: this.id,
+            timestamp: DTimestamp.now(),
+            data: {
+                loadTime,
+                naturalHeight: this.el.naturalHeight,
+                naturalWidth: this.el.naturalWidth,
+                height: this.el.height,
+                width: this.el.width,
+            },
+        });
+    }
+}