@media-quest/engine 0.0.14 → 0.0.15

package/src/page/Page.ts

@@ -0,0 +1,160 @@
+import { DElement } from "../Delement/DElement";
+import { TaskManager } from "./task-manager";
+import { createDElement } from "../Delement/element-factory";
+import { ScaleService } from "../engine/scale";
+import { Task } from "./task";
+import { PStyle } from "../Delement/DStyle";
+import { ButtonClickAction } from "../Delement/button-click-action";
+import { PageComponent, PageComponentDto } from "./page-component";
+import { DElementDto } from "../Delement/DElement.dto";
+import { Fact } from "../rules/fact";
+import { DTimestamp } from "../common/DTimestamp";
+import { PageResult } from "./page-result";
+import { TaskState, TaskStateDiff } from "./task-state";
+
+export interface VideoPlayerDto {
+  playUrl: string;
+  style?: PStyle;
+}
+
+export interface PageDto {
+  readonly id: string;
+  readonly tags: string[];
+  staticElements: Array<DElementDto>;
+  background: string;
+  components: Array<PageComponentDto>;
+  videoPlayer?: VideoPlayerDto;
+  initialTasks: Array<Task>;
+}
+
+export const PageDto = {
+  createDummy: (id: number): PageDto => {
+    return {
+      id: "id" + id,
+      tags: [],
+      staticElements: [],
+      background: "white",
+      // videoList: [],
+      components: [
+        {
+          el: {
+            _tag: "div",
+            style: { x: 10, y: 0, w: 40, h: 20, backgroundColor: "red" },
+            children: [],
+            innerText: "Next btn " + id,
+          },
+        },
+      ],
+
+      initialTasks: [],
+    };
+  },
+};
+
+export class Page {
+  private readonly TAG = "[ DPage ]: ";
+  private staticElements: DElement<HTMLElement>[] = [];
+  private components: PageComponent[] = [];
+  private pageEntered: DTimestamp = DTimestamp.now();
+  private previousState: TaskState | false = false;
+
+  constructor(
+    private readonly dto: PageDto,
+    private readonly taskManager: TaskManager,
+    private readonly scaleService: ScaleService,
+    private readonly onCompleted: (result: PageResult) => void,
+  ) {
+    this.components = dto.components.map((el) => {
+      const component = new PageComponent(el, scaleService);
+      component.onClick = (actions) => {
+        this.handleButtonAction(actions);
+      };
+      this.components.push(component);
+
+      return component;
+    });
+    dto.staticElements.forEach((el) => {
+      const element = createDElement(el, scaleService);
+      this.staticElements.push(element);
+    });
+
+    if (dto.videoPlayer) {
+      this.taskManager.loadVideo(dto.videoPlayer.playUrl);
+      if (dto.videoPlayer.style) {
+        this.taskManager.setVideoStyles(dto.videoPlayer.style);
+      }
+    }
+
+    if (dto.initialTasks.length) {
+      this.taskManager.autoPlaySequence(dto.initialTasks);
+    }
+  }
+
+  private createPageResult(facts: Fact[]): PageResult {
+    const pageExited = DTimestamp.now();
+    const pageTime = DTimestamp.diff(this.pageEntered, pageExited);
+    return {
+      pageId: this.dto.id,
+      pageEntered: this.pageEntered,
+      pageExited,
+      pageTime,
+      collectedFacts: facts,
+    };
+  }
+  private handleButtonAction(a: ButtonClickAction) {
+    switch (a.kind) {
+      case "next-page":
+        const nextPageResult = this.createPageResult([]);
+        this.onCompleted(nextPageResult);
+        break;
+      case "play-video":
+        this.taskManager.execute(a.task);
+        break;
+      case "play-audio":
+        this.taskManager.execute(a.task);
+        break;
+      case "pause-video":
+        this.taskManager.pauseVideo();
+        break;
+      case "pause-audio":
+        this.taskManager.pauseAudio();
+        break;
+      case "submit-fact":
+        const submitFactResult = this.createPageResult([a.fact]);
+        this.onCompleted(submitFactResult);
+        break;
+      case "submit-form":
+        // TODO IMPLEMENT Collection of form-data // LOOP OVER ALL INPUTS
+        const submitFormResult = this.createPageResult([]);
+        this.onCompleted(submitFormResult);
+        break;
+      default:
+        const _exhaustiveCheck: never = a;
+        console.log(_exhaustiveCheck);
+    }
+  }
+
+  appendYourself(parent: HTMLElement) {
+    this.staticElements.forEach((el) => {
+      el.appendYourself(parent);
+    });
+
+    this.components.forEach((comp) => {
+      comp.appendToParent(parent);
+    });
+  }
+
+  destroy() {
+    // console.log("DESTROY PAGE ");
+    this.taskManager.clear();
+  }
+
+  tick() {
+    const prev = this.previousState;
+    const curr = this.taskManager.getState();
+    const diff = TaskState.getDiff(curr, prev);
+    this.components.forEach((comp) => {
+      comp.updateState(diff);
+    });
+  }
+}

package/src/page/media-player.ts

@@ -0,0 +1,117 @@
+import { DStyle, PStyle } from "../Delement/DStyle";
+
+type MediaPlayerEvent =
+  | { kind: "video-ended"; url: string }
+  | { kind: "audio-ended"; url: string }
+  | { kind: "error"; message: string };
+
+export interface IMediaPlayer {
+  playVideo(url: string, loop: boolean): void;
+  playAudio(url: string, loop: boolean): void;
+  pauseVideo(): void;
+  pauseAudio(): void;
+  clear(): void;
+  hideVideo(): void;
+  loadVideo(url: string): void;
+  appendToParent(el: { appendChild: (el: HTMLElement) => void }): void;
+}
+
+export const createMediaPlayer = (onEvent: (mediaPlayerEvent: MediaPlayerEvent) => void): IMediaPlayer => {
+  const videoElement = document.createElement("video");
+  const audioElement = document.createElement("audio");
+  const videoStyles: PStyle = { h: 40, w: 80, borderStyle: "solid", borderWidth: { _unit: "px", value: 5 } };
+
+  DStyle.normalize(videoElement);
+  DStyle.applyStyles(videoElement, videoStyles, 1);
+  videoElement.onended = () => {
+    console.log("VIDEO ENDED");
+  };
+  videoElement.onerror = () => {
+    console.log("VIDEO ERROR WHY ?? ");
+  };
+  audioElement.onended = () => {
+    console.log("AUDIO ENDED");
+  };
+
+  const playVideo = (url: string, loop = false) => {
+    if (videoElement.src !== url) {
+      videoElement.src = url;
+    }
+
+    try {
+      videoElement.play();
+    } catch (e) {
+      console.log("VIDEO PLAY ERROR");
+      console.log(e);
+    }
+  };
+
+  const playAudio = (url: string, loop = false) => {
+    audioElement.loop = loop;
+    if (audioElement.src !== url) {
+      audioElement.src = url;
+    }
+    // audioElement.play();
+    try {
+      audioElement.play();
+    } catch (e) {
+      console.log("AUDIO PLAY ERROR");
+      console.log(e);
+    }
+  };
+
+  const showVideo = () => {
+    videoElement.style.visibility = "visible";
+  };
+
+  const pauseVideo = () => {
+    try {
+      videoElement.pause();
+    } catch (e) {
+      console.log("VIDEO PAUSE ERROR");
+      console.log(e);
+    }
+  };
+
+  const loadVideo = (url: string) => {
+    if (videoElement.src !== url) {
+      videoElement.src = url;
+    }
+  };
+  const pauseAudio = () => {
+    try {
+      audioElement.pause();
+    } catch (e) {
+      console.log("AUDIO PAUSE ERROR");
+      console.log(e);
+    }
+  };
+  const appendToParent = (el: { appendChild: (el: HTMLElement) => void }) => {
+    el.appendChild(videoElement);
+    el.appendChild(audioElement);
+  };
+  const clear = () => {
+    pauseVideo();
+    pauseAudio();
+    videoElement.src = "";
+    audioElement.src = "";
+  };
+  const hideVideo = () => {
+    videoElement.style.visibility = "hidden";
+  };
+
+  return {
+    playVideo,
+    playAudio,
+    pauseVideo,
+    loadVideo,
+    clear,
+    pauseAudio,
+    hideVideo,
+    appendToParent,
+    // mediaLayer,
+    // videoElement,
+    // audioElement,
+    // videoStyles,
+  };
+};

package/src/page/page-component.ts

@@ -0,0 +1,113 @@
+import { PStyle } from "../Delement/DStyle";
+import { ScaleService } from "../engine/scale";
+import { DElement } from "../Delement/DElement";
+import { createDElement } from "../Delement/element-factory";
+import { ButtonClickAction } from "../Delement/button-click-action";
+import { DElementDto } from "../Delement/DElement.dto";
+import { TaskState, TaskStateDiff } from "./task-state";
+
+export interface PageComponentDto {
+  readonly onClick?: ButtonClickAction;
+  readonly el: DElementDto;
+  readonly whenVideoPlay?: PStyle;
+  readonly whenVideoPaused?: PStyle;
+  readonly whenAudioPlaying?: PStyle;
+  readonly whenAudioPaused?: PStyle;
+  readonly whenAudioBlocked?: PStyle;
+  readonly whenVideoBlocked?: PStyle;
+  readonly whenAudioUnblocked?: PStyle;
+  readonly whenVideoUnblocked?: PStyle;
+  readonly whenResponseBlocked?: PStyle;
+  readonly whenResponseUnblocked?: PStyle;
+  readonly whenFormInputBlocked?: PStyle;
+  readonly whenFormInputUnblocked?: PStyle;
+}
+
+const isFalse = (bool?: boolean): bool is false => bool === false;
+const isTrue = (bool?: boolean): bool is true => bool === true;
+
+export class PageComponent {
+  private readonly TAG = "[ PageComponent ]: ";
+  private el: DElement<HTMLElement>;
+  private prevState: TaskState | false = false;
+
+  constructor(
+    readonly dto: PageComponentDto,
+    readonly scale: ScaleService,
+  ) {
+    this.el = createDElement(dto.el, scale);
+    this.el.onclick = () => {
+      if (dto.onClick) {
+        this.onClick(dto.onClick);
+      } else {
+        console.warn(this.TAG + "onClick not implemented");
+      }
+    };
+  }
+
+  onClick(action: ButtonClickAction) {
+    console.warn(this.TAG + "onclick not implemented");
+  }
+
+  updateState(state: TaskStateDiff) {
+    this.handleStateChanges(state);
+  }
+
+  setState(state: TaskState) {
+    const prev = this.prevState;
+    const diff = TaskState.getDiff(state, prev);
+    this.prevState = state;
+    if (Object.keys(diff).length > 0) {
+      this.handleStateChanges(diff);
+    }
+  }
+
+  private handleStateChanges(diff: TaskStateDiff) {
+    const {
+      videoIsPlaying,
+      audioIsPlaying,
+      blockAudio,
+      blockVideo,
+      blockResponseButton,
+      blockFormInput,
+      isGifMode,
+    } = diff;
+    const {
+      whenAudioPaused,
+      whenVideoPaused,
+      whenAudioPlaying,
+      whenFormInputBlocked,
+      whenResponseBlocked,
+      whenVideoPlay,
+      whenAudioBlocked,
+      whenVideoBlocked,
+      whenAudioUnblocked,
+      whenVideoUnblocked,
+      whenResponseUnblocked,
+      whenFormInputUnblocked,
+    } = this.dto;
+    if (isTrue(audioIsPlaying) && whenAudioPlaying) {
+      this.el.setStyle(whenAudioPlaying);
+    }
+    if (isFalse(audioIsPlaying) && whenAudioPaused) {
+      this.el.setStyle(whenAudioPaused);
+    }
+    if (isTrue(videoIsPlaying) && whenVideoPlay) {
+      this.el.setStyle(whenVideoPlay);
+    }
+    if (isFalse(videoIsPlaying) && whenVideoPaused) {
+      this.el.setStyle(whenVideoPaused);
+    }
+    // if (isTrue(blockAudio) && whenAudioBlocked) {
+    //     this.el.setStyle(whenAudioBlocked);
+    // }
+    // if (isTrue(blockVideo) && whenVideoBlocked) {
+    //     this.el.setStyle(whenVideoBlocked);
+    // }
+  }
+
+  appendToParent(parent: { append: (el: HTMLElement) => void }) {
+    // parent.appendChild(this.el.);
+    this.el.appendYourself(parent);
+  }
+}

package/src/page/page-result.ts

@@ -0,0 +1,11 @@
+import { DTimestamp } from "../common/DTimestamp";
+import { Fact } from "../rules/fact";
+
+export interface PageResult {
+  readonly pageId: string;
+  readonly pagePrefix?: string;
+  readonly pageEntered: DTimestamp;
+  readonly pageExited: DTimestamp;
+  readonly pageTime: DTimestamp.Diff;
+  readonly collectedFacts: Fact[];
+}

package/src/page/task-manager.ts

@@ -0,0 +1,203 @@
+import { DTimestamp } from "../common/DTimestamp";
+import { Task } from "./task";
+import { DStyle, PStyle } from "../Delement/DStyle";
+import { ScaleService } from "../engine/scale";
+import { TaskState } from "./task-state";
+
+export class TaskManager {
+  private readonly TAG = "[TaskManager]: ";
+  private readonly videoElement = document.createElement("video");
+  private readonly audioElement = document.createElement("audio");
+  private readonly showConsoleLogs = false;
+  private videoStyles: PStyle = {
+    h: 40,
+    w: 80,
+    y: 60,
+    x: 10,
+  };
+  private runningTask: { task: Task; startedAt: DTimestamp } | false = false;
+  private taskList: Array<Task> = [];
+  private delayRef: number | false = false;
+
+  clear() {
+    if (this.showConsoleLogs) console.log(this.TAG + "CLEAR");
+    if (typeof this.delayRef === "number") {
+      window.clearTimeout(this.delayRef);
+    }
+
+    this.pauseVideo();
+    this.pauseAudio();
+    this.videoElement.src = "";
+    this.audioElement.src = "";
+    this.taskList = [];
+    this.runningTask = false;
+    this.hideVideo();
+  }
+
+  getState(): TaskState {
+    const c = this.runningTask;
+    const isGifMode = this.videoElement.loop;
+    const audioIsPlaying = c && c.task.kind === "play-audio-task" && !this.audioElement.paused;
+    const videoIsPlaying = c && c.task.kind === "play-video-task" && !this.videoElement.paused;
+    const blockResponseButton = c && c.task.blockResponseButton;
+    const blockAudio = c && c.task.blockAudio;
+    const blockVideo = c && c.task.blockVideo;
+    const blockFormInput = c && c.task.blockFormInput;
+    return {
+      audioIsPlaying,
+      isGifMode,
+      videoIsPlaying,
+      blockFormInput,
+      blockResponseButton,
+      blockAudio,
+      blockVideo,
+    };
+  }
+
+  constructor(
+    private readonly mediaLayer: HTMLDivElement,
+    private readonly scale: ScaleService,
+    private readonly onError: (error: string) => void,
+  ) {
+    this.hideVideo();
+    this.mediaLayer.appendChild(this.videoElement);
+    this.mediaLayer.appendChild(this.audioElement);
+    DStyle.normalize(this.videoElement);
+    DStyle.applyStyles(this.videoElement, this.videoStyles, this.scale.scale);
+
+    this.videoElement.onended = () => {
+      const next = this.getNextTask();
+      if (next) {
+        this.execute(next);
+      } else {
+        this.runningTask = false;
+      }
+    };
+    this.videoElement.onerror = (e) => {
+      if (e instanceof Event) {
+        console.log(e.target);
+        console.log("IS EVENT");
+      }
+      console.log("VIDEO ERROR WHY ?? ");
+      onError("Error playing video." + this.videoElement.src);
+    };
+    this.audioElement.onended = () => {
+      const next = this.getNextTask();
+      if (next) {
+        this.execute(next);
+      } else {
+        this.runningTask = false;
+      }
+    };
+  }
+
+  execute(task: Task): boolean {
+    // console.log("EXECUTE TASK" + task.kind);
+    const curr = this.runningTask;
+
+    // Check if we should remove the current task.
+    if (curr && Task.shallRemoveCurrent(task) && Task.notEq(curr.task, task)) {
+      this.pauseAudio();
+      this.pauseVideo();
+      this.runningTask = false;
+    }
+
+    if (!curr) {
+      this.runningTask = { startedAt: DTimestamp.now(), task: task };
+    } else if (Task.notEq(curr.task, task)) {
+      this.runningTask = { startedAt: DTimestamp.now(), task: task };
+    }
+
+    if (task.priority === "replace-all" || task.priority === "replace-queue") {
+      this.taskList = [];
+    }
+
+    // STARTING PLAY VIDEO
+    if (task.kind === "play-video-task") {
+      this.showVideo();
+      // this.pauseAudio()
+      this.loadVideo(task.url);
+      if (task.loop) {
+        this.videoElement.loop = true;
+      } else {
+        this.videoElement.loop = false;
+      }
+
+      try {
+        this.videoElement.play();
+      } catch (e) {
+        console.error(e);
+      }
+    }
+
+    // STARTING PLAY AUDIO
+    if (task.kind === "play-audio-task") {
+      if (!this.videoElement.loop) {
+        this.pauseVideo();
+      }
+      if (task.url !== this.audioElement.src) {
+        this.audioElement.src = task.url;
+      }
+      this.audioElement.play();
+    }
+    return true;
+  }
+
+  setVideoStyles(styles: PStyle) {
+    this.videoStyles = styles;
+    DStyle.applyStyles(this.videoElement, this.videoStyles, this.scale.scale);
+  }
+
+  autoPlaySequence(tasks: Task[]) {
+    this.taskList = [...tasks];
+    const next = this.getNextTask();
+    if (next) {
+      this.execute(next);
+    }
+  }
+
+  loadVideo(url: string) {
+    // console.log("LOAD VIDEO " + !!url + " ");
+    if (this.videoElement.src !== url) {
+      this.videoElement.src = url;
+    }
+    this.showVideo();
+  }
+
+  private showVideo() {
+    this.videoElement.style.display = "block";
+  }
+
+  private hideVideo() {
+    this.videoElement.style.display = "none";
+  }
+
+  pauseVideo() {
+    try {
+      if (!this.videoElement.loop) {
+        this.videoElement.pause();
+      }
+    } catch (e) {
+      console.log(e);
+      this.onError("Error pausing video.");
+    }
+  }
+
+  pauseAudio() {
+    try {
+      if (!this.audioElement.loop) {
+        this.audioElement.pause();
+      }
+    } catch (e) {
+      console.log(e);
+      this.onError("Error pausing audio.");
+    }
+  }
+
+  private getNextTask(): Task | false {
+    // console.log("Getting next task.");
+    // console.log(this.taskList);
+    const first = this.taskList.shift();
+    return first ?? false;
+  }
+}

package/src/page/task-state.ts

@@ -0,0 +1,55 @@
+export type TaskState = {
+  audioIsPlaying: boolean;
+  isGifMode: boolean;
+  videoIsPlaying: boolean;
+  blockFormInput: boolean;
+  blockResponseButton: boolean;
+  blockAudio: boolean;
+  blockVideo: boolean;
+};
+
+export type TaskStateDiff = Partial<TaskState> & { __diffed__: true };
+export const TaskState = {
+  eq: (a: TaskState, b: TaskState) => {
+    return (
+      a.audioIsPlaying === b.audioIsPlaying &&
+      a.isGifMode === b.isGifMode &&
+      a.videoIsPlaying === b.videoIsPlaying &&
+      a.blockFormInput === b.blockFormInput &&
+      a.blockResponseButton === b.blockResponseButton &&
+      a.blockAudio === b.blockAudio &&
+      a.blockVideo === b.blockVideo
+    );
+  },
+
+  getDiff: (curr: TaskState, prev: TaskState | false): TaskStateDiff => {
+    if (prev === false) {
+      return curr as TaskStateDiff;
+    }
+
+    const diff = {} as TaskStateDiff;
+
+    if (curr.audioIsPlaying !== prev.audioIsPlaying) {
+      diff.audioIsPlaying = curr.audioIsPlaying;
+    }
+    if (curr.isGifMode !== prev.isGifMode) {
+      diff.isGifMode = curr.isGifMode;
+    }
+    if (curr.videoIsPlaying !== prev.videoIsPlaying) {
+      diff.videoIsPlaying = curr.videoIsPlaying;
+    }
+    if (curr.blockFormInput !== prev.blockFormInput) {
+      diff.blockFormInput = curr.blockFormInput;
+    }
+    if (curr.blockResponseButton !== prev.blockResponseButton) {
+      diff.blockResponseButton = curr.blockResponseButton;
+    }
+    if (curr.blockAudio !== prev.blockAudio) {
+      diff.blockAudio = curr.blockAudio;
+    }
+    if (curr.blockVideo !== prev.blockVideo) {
+      diff.blockVideo = curr.blockVideo;
+    }
+    return diff;
+  },
+};