@media-quest/engine 0.0.30 → 0.0.31

package/src/Delement/button-click-action.ts

@@ -1,35 +1,42 @@
-import { PlayAudioTask, PlayVideoTask } from "../page/task";
-import { Fact } from "../rules/fact";
-
-export type ButtonClickAction =
-  | { kind: "play-audio"; task: PlayAudioTask }
-  | { kind: "pause-audio" }
-  | { kind: "play-video"; task: PlayVideoTask }
-  | { kind: "pause-video" }
-  | { kind: "submit-fact"; fact: Fact }
-  | { kind: "next-page" }
-  | { kind: "submit-form" };
-
-export const ButtonClickAction = {
-  describe: (a: ButtonClickAction): string => {
-    switch (a.kind) {
-      case "next-page":
-        return "go to next page";
-      case "play-video":
-        return "VideoId = " + a.task.videoId;
-      case "play-audio":
-        return "AudioId = " + a.task.audioId;
-      case "pause-video":
-        return "";
-      case "pause-audio":
-        return "";
-      case "submit-fact":
-        return a.fact.label + " = " + a.fact.value;
-      case "submit-form":
-        return "";
-      default:
-        const _exhaustiveCheck: never = a;
-        return "";
-    }
-  },
-};
+import { PlayAudioTask, PlayVideoTask } from "../page/task";
+import { Fact } from "../rules/fact";
+
+export type ButtonClickAction =
+  | { kind: "play-audio"; task: PlayAudioTask; vibrateMs?: number }
+  | { kind: "pause-audio"; vibrateMs?: number }
+  | { kind: "play-video"; task: PlayVideoTask; vibrateMs?: number }
+  | { kind: "mute-video"; vibrateMs?: number }
+  | { kind: "un-mute-video"; vibrateMs?: number }
+  | { kind: "pause-video"; vibrateMs?: number }
+  | { kind: "submit-fact"; fact: Fact; vibrateMs?: number }
+  | { kind: "next-page"; vibrateMs?: number }
+  | { kind: "submit-form"; vibrateMs?: number };
+
+// export type ButtonClickAction = _ButtonClickAction & ;
+export const ButtonClickAction = {
+  describe: (a: ButtonClickAction): string => {
+    switch (a.kind) {
+      case "next-page":
+        return "go to next page";
+      case "play-video":
+        return "VideoId = " + a.task.videoId;
+      case "play-audio":
+        return "AudioId = " + a.task.audioId;
+      case "pause-video":
+        return "";
+      case "pause-audio":
+        return "";
+      case "submit-fact":
+        return a.fact.label + " = " + a.fact.value;
+      case "submit-form":
+        return "";
+      case "mute-video":
+        return "mute-video";
+      case "un-mute-video":
+        return "un-mute-video";
+      default:
+        const _exhaustiveCheck: never = a;
+        return "";
+    }
+  },
+};

package/src/Delement/css.spec.ts

@@ -1,36 +1,40 @@
-import { DCss } from "./css";
-import LengthUnit = DCss.LengthUnit;
-import { DStyle } from "./DStyle";
-describe("Css utils testing", () => {
-    test("Clamp and round of px-units", () => {
-        const px1300: DCss.Px = { _unit: "px", value: 1300 };
-        const px555: DCss.Px = { _unit: "px", value: 555 };
-        const px123: DCss.Px = { _unit: "px", value: 123 };
-        const px10: DCss.Px = { _unit: "px", value: 10 };
-        const px3: DCss.Px = { _unit: "px", value: 3 };
-        const px0: DCss.Px = { _unit: "px", value: 0 };
-        const px1: DCss.Px = { _unit: "px", value: 1 };
-        const scale026 = DCss.toString;
-        // const scale001 = DCss.toStringCreator(0.01);
-
-        expect(DCss.toString(px1300, 0.26)).toBe("338px");
-        expect(DCss.toString(px10, 0.26)).toBe("3px");
-        expect(DCss.toString(px1, 0.26)).toBe("1px");
-        expect(DCss.toString(px3, 0.26)).toBe("1px");
-        expect(DCss.toString(px0, 0.26)).toBe("0px");
-        expect(DCss.toString(px0, 0.26)).toBe("0px");
-        expect(DCss.toString(px555, 0.26)).toBe("144px");
-        expect(DCss.toString(px123, 0.01)).toBe("4px");
-        expect(DCss.toString(px1300, 0.01)).toBe("39px");
-        expect(DCss.isLengthUnit()).toBe(false);
-        expect(DCss.isLengthUnit({} as LengthUnit)).toBe(false);
-        expect(DCss.isLengthUnit(px123)).toBe(true);
-    });
-
-    test("Normalize div: ", () => {
-        const div = document.createElement("div");
-        const normalized = DStyle.normalize(div);
-        expect(normalized.style.padding).toBe("0px");
-        expect(normalized.style.boxSizing).toBe("border-box");
-    });
-});
+import { DCss } from "./css";
+import LengthUnit = DCss.LengthUnit;
+import { DStyle } from "./DStyle";
+describe("Css utils testing", () => {
+  test("Clamp and round of px-units", () => {
+    const px1300: DCss.Px = { _unit: "px", value: 1300 };
+    const px555: DCss.Px = { _unit: "px", value: 555 };
+    const px123: DCss.Px = { _unit: "px", value: 123 };
+    const px10: DCss.Px = { _unit: "px", value: 10 };
+    const px3: DCss.Px = { _unit: "px", value: 3 };
+    const px0: DCss.Px = { _unit: "px", value: 0 };
+    const px1: DCss.Px = { _unit: "px", value: 1 };
+    const scale026 = DCss.toString;
+    // const scale001 = DCss.toStringCreator(0.01);
+
+    expect(DCss.toString(px1300, 0.26)).toBe("338px");
+    expect(DCss.toString(px10, 0.26)).toBe("3px");
+    expect(DCss.toString(px1, 0.26)).toBe("1px");
+    expect(DCss.toString(px3, 0.26)).toBe("1px");
+    expect(DCss.toString(px0, 0.26)).toBe("0px");
+    expect(DCss.toString(px0, 0.26)).toBe("0px");
+    expect(DCss.toString(px555, 0.26)).toBe("144px");
+    expect(DCss.toString(px123, 0.01)).toBe("4px");
+    expect(DCss.toString(px1300, 0.01)).toBe("39px");
+    expect(DCss.isLengthUnit()).toBe(false);
+    expect(DCss.isLengthUnit({} as LengthUnit)).toBe(false);
+    expect(DCss.isLengthUnit(px123)).toBe(true);
+  });
+
+  test("Normalize div: ", () => {
+    const div = document.createElement("div");
+    const normalized = DStyle.normalize(div);
+    expect(normalized.style.padding).toBe("0px");
+    expect(normalized.style.boxSizing).toBe("border-box");
+  });
+
+  test("Can validate Length-units ", () => {
+    expect(DCss.isLengthUnit(0)).toBe(true);
+  });
+});

package/src/Delement/css.ts

@@ -1,46 +1,56 @@
-import { DUtil } from "../utils/DUtil";
-
-export namespace DCss {
-    export interface Px {
-        readonly _unit: "px";
-        readonly value: number;
-    }
-
-    export type LengthString = `${number}px` | `${number}%`;
-    export interface Percent {
-        readonly _unit: "percent";
-        readonly value: number;
-    }
-
-    export type LengthUnit = Px | Percent;
-
-    /**
-     * Will scale to 3% of baseScale
-     * @param unit
-     * @param scale
-     */
-    export const toString = (unit: Readonly<LengthUnit>, scale: number): LengthString => {
-        const clampedScale = Math.max(scale, 0.03);
-        if (unit._unit === "px") {
-            if (unit.value < 0.1) {
-                return "0px";
-            }
-
-            const rounded = Math.round(unit.value * clampedScale);
-            const clamped = Math.max(rounded, 1);
-            return (clamped + "px") as LengthString;
-        }
-        return (unit.value + "%") as LengthString;
-    };
-
-    export const isLengthUnit = (unit?: LengthUnit): unit is LengthUnit => {
-        if (!unit) {
-            return false;
-        }
-        const unitKey: keyof LengthUnit = "_unit";
-        const valueKey: keyof LengthUnit = "value";
-        const hasUnitKey = DUtil.hasKey(unit, unitKey);
-        const hasValueKey = DUtil.hasKey(unit, valueKey);
-        return hasUnitKey && hasValueKey;
-    };
-}
+import { DUtil } from "../utils/DUtil";
+
+export namespace DCss {
+  export interface Px {
+    readonly _unit: "px";
+    readonly value: number;
+  }
+
+  export type LengthString = `${number}px` | `${number}%`;
+  export interface Percent {
+    readonly _unit: "percent";
+    readonly value: number;
+  }
+
+  export type LengthUnit = Px | Percent | number;
+
+  /**
+   * Will scale to 3% of baseScale
+   * @param unit
+   * @param scale
+   */
+  export const toString = (unit: Readonly<LengthUnit>, scale: number): LengthString => {
+    const _mapped: Percent | Px =
+      typeof unit === "number" ? { _unit: "percent", value: unit } : unit;
+    return _toString(_mapped, scale);
+  };
+  const _toString = (unit: Readonly<Percent | Px>, scale: number): LengthString => {
+    const clampedScale = Math.max(scale, 0.03);
+    if (unit._unit === "px") {
+      if (unit.value < 0.1) {
+        return "0px";
+      }
+
+      const rounded = Math.round(unit.value * clampedScale);
+      const clamped = Math.max(rounded, 1);
+      return (clamped + "px") as LengthString;
+    }
+    return (unit.value + "%") as LengthString;
+  };
+
+  export const isLengthUnit = (unit?: LengthUnit): unit is LengthUnit => {
+    if (typeof unit === "number") {
+      return true;
+    }
+
+    if (!unit) {
+      return false;
+    }
+
+    const unitKey: keyof DCss.Px = "_unit";
+    const valueKey: keyof DCss.Px = "value";
+    const hasUnitKey = DUtil.hasKey(unit, unitKey);
+    const hasValueKey = DUtil.hasKey(unit, valueKey);
+    return hasUnitKey && hasValueKey;
+  };
+}

package/src/Delement/element-factory.ts

@@ -1,40 +1,49 @@
-import { DElement } from "./DElement";
-import { DDiv, DDivDto } from "./Ddiv";
-import { DImg } from "./DImg";
-import { DText } from "./DText";
-import { ScaleService } from "../engine/scale";
-import { DElementDto } from "./DElement.dto";
-
-export const createDElement = (dto: DElementDto, scale: ScaleService): DElement<any> => {
-  switch (dto._tag) {
-    case "div":
-      const childEls = createChildrenForDiv(dto, scale);
-      const newDiv = new DDiv(dto, scale, childEls);
-      return newDiv;
-    case "img":
-      return new DImg(dto, scale);
-    case "p":
-      return new DText(dto, 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, 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, scale);
-      childEls.push(newText);
-    }
-    if (dto._tag === "img") {
-      const newImage = new DImg(dto, scale);
-      childEls.push(newImage);
-    }
-  });
-  return childEls;
-};
+import { DElement } from "./DElement";
+import { DDiv, DDivDto } from "./Ddiv";
+import { DImg } from "./DImg";
+import { DText } from "./DText";
+import { ScaleService } from "../engine/scale";
+import { DElementDto } from "./DElement.dto";
+import { DButton } from "./DButton";
+
+export const createDElement = (dto: DElementDto, scale: ScaleService): DElement<any> => {
+  switch (dto._tag) {
+    case "div":
+      const childEls = createChildrenForDiv(dto, scale);
+      return new DDiv(dto, scale, childEls);
+    case "img":
+      return new DImg(dto, scale);
+    case "p":
+      return new DText(dto, scale);
+    case "button":
+      return new DButton(dto, 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, scale: ScaleService): DDiv["children"] => {
+  const childDto = dto.children;
+  const childEls: Array<DImg | DText | DButton> = [];
+  childDto.forEach((dto) => {
+    switch (dto._tag) {
+      case "p":
+        const newText = new DText(dto, scale);
+        childEls.push(newText);
+        break;
+      case "img":
+        const newImage = new DImg(dto, scale);
+        childEls.push(newImage);
+        break;
+      case "button":
+        const newButton = new DButton(dto, scale);
+        childEls.push(newButton);
+        break;
+      default:
+        const check: never = dto;
+    }
+  });
+  return childEls;
+};

package/src/engine/SchemaEngine.ts

@@ -1,150 +1,155 @@
-import { SchemaDto } from "./SchemaDto";
-import { DPlayer } from "./dplayer";
-import { ScaleService } from "./scale";
-import { Page } from "../page/Page";
-import { TaskManager } from "../page/task-manager";
-import { PageResult } from "../page/page-result";
-import { SchemaResult } from "./SchemaResult";
-export interface EngineLogger {
-  info(message: string): void;
-  error(message: string): void;
-  warn(message: string): void;
-}
-
-const voidLogger: EngineLogger = {
-  info: (message: string) => {},
-  error: (message: string) => {},
-  warn: (message: string) => {},
-};
-
-export interface ISchemaEngine {
-  onProgress(handler: (result: SchemaResult) => void): void;
-  onFatalError(handler: (error: { message: string }) => void): void;
-  setLogger(logger: EngineLogger): void;
-}
-
-export class SchemaEngine implements ISchemaEngine {
-  private readonly TAG = "[ SCHEMA_ENGINE ] :";
-  private readonly scale: ScaleService;
-  private readonly hostElement: HTMLDivElement;
-  private readonly taskManager: TaskManager;
-  private logger: EngineLogger = voidLogger;
-  private readonly uiLayer: HTMLDivElement = document.createElement("div");
-  private readonly mediaLayer: HTMLDivElement = document.createElement("div");
-  private player: DPlayer;
-  private currentPage: Page | false = false;
-  private readonly tickerRef: number | false = false;
-  constructor(
-    hostEl: HTMLDivElement,
-    private readonly height: number,
-    private readonly width: number,
-    private readonly schema: SchemaDto,
-  ) {
-    this.tickerRef = window.setInterval(() => {
-      if (this.currentPage) {
-        this.currentPage.tick();
-      }
-    }, 100);
-    this.hostElement = hostEl;
-    this.hostElement.appendChild(this.mediaLayer);
-    this.hostElement.appendChild(this.uiLayer);
-    this.scale = new ScaleService({
-      baseHeight: schema.baseHeight,
-      baseWidth: schema.baseWidth,
-      containerWidth: width,
-      containerHeight: height,
-    });
-    this.logger.info(this.TAG + "Scale: " + JSON.stringify(this.scale));
-    this.player = new DPlayer(this.schema);
-    this.taskManager = new TaskManager(this.mediaLayer, this.scale, (error) => {
-      console.log(error);
-    });
-
-    this.styleSelf();
-    this.handlePageCompleted = this.handlePageCompleted.bind(this);
-    this.nextPage();
-  }
-
-  private handlePageCompleted(result: PageResult) {
-    // 1 Save data from last page
-    this.player.saveHistory(result);
-
-    // 2 Emit progress
-    const currentResults = this.player.getResults();
-    const a: SchemaResult = {
-      schemaId: this.schema.id,
-      pagesLeft: currentResults.pagesLeft,
-      predefinedFacts: currentResults.predefinedFacts,
-      eventLog: currentResults.eventLog,
-      answers: currentResults.answerFacts,
-    };
-    if (this._onProgress) {
-      this._onProgress(a);
-    }
-
-    // 3. Next page
-    this.nextPage();
-  }
-
-  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.uiLayer);
-    this.uiLayer.style.zIndex = "10";
-    this.mediaLayer.style.zIndex = "8";
-    makeStatic(this.mediaLayer);
-  }
-
-  private nextPage() {
-    const nextPage = this.player.getNextPage();
-    if (this.currentPage) {
-      this.currentPage.destroy();
-      this.uiLayer.innerHTML = "";
-    }
-
-    if (!nextPage) {
-      // TODO FIGURE OUT WHAQT TO DO AT END OF TEST!! Start over??
-      this.player = new DPlayer(this.schema);
-      if (this.player.pagesLeft > 0) {
-        this.nextPage();
-      }
-      return false;
-    }
-
-    const newPage = new Page(nextPage, this.taskManager, this.scale, (result) => {
-      this.handlePageCompleted(result);
-    });
-    this.currentPage = newPage;
-    newPage.appendYourself(this.uiLayer);
-    return true;
-  }
-
-  destroy() {
-    if (this.currentPage) {
-      this.currentPage.destroy();
-      this.uiLayer.innerHTML = "";
-    }
-  }
-
-  private _onProgress: ((result: SchemaResult) => void) | false = false;
-  onProgress(handler: (result: SchemaResult) => void) {
-    this._onProgress = handler;
-  }
-
-  private _onFatalError: ((error: { message: string }) => void) | false = false;
-  onFatalError(handler: (error: { message: string }) => void): void {
-    this._onFatalError = handler;
-  }
-  setLogger(logger: EngineLogger) {
-    this.logger = logger;
-  }
-}
+import { SchemaDto } from "./SchemaDto";
+import { DPlayer } from "./dplayer";
+import { ScaleService } from "./scale";
+import { Page } from "../page/Page";
+import { TaskManager } from "../page/task-manager";
+import { PageResult } from "../page/page-result";
+import { SchemaResult } from "./SchemaResult";
+export interface EngineLogger {
+  info(message: string): void;
+  error(message: string): void;
+  warn(message: string): void;
+}
+
+const voidLogger: EngineLogger = {
+  info: (message: string) => {},
+  error: (message: string) => {},
+  warn: (message: string) => {},
+};
+
+export interface ISchemaEngine {
+  onProgress(handler: (result: SchemaResult) => void): void;
+  onFatalError(handler: (error: { message: string }) => void): void;
+  setLogger(logger: EngineLogger): void;
+}
+
+export class SchemaEngine implements ISchemaEngine {
+  private readonly TAG = "[ SCHEMA_ENGINE ] :";
+  private readonly scale: ScaleService;
+  private readonly hostElement: HTMLDivElement;
+  private readonly taskManager: TaskManager;
+  private logger: EngineLogger = voidLogger;
+  private readonly uiLayer: HTMLDivElement = document.createElement("div");
+  private readonly mediaLayer: HTMLDivElement = document.createElement("div");
+  private player: DPlayer;
+  private currentPage: Page | false = false;
+  private readonly tickerRef: number | false = false;
+  constructor(
+    hostEl: HTMLDivElement,
+    private readonly height: number,
+    private readonly width: number,
+    private readonly schema: SchemaDto,
+  ) {
+    this.tickerRef = window.setInterval(() => {
+      if (this.currentPage) {
+        this.currentPage.tick();
+      }
+    }, 100);
+    this.hostElement = hostEl;
+    this.hostElement.appendChild(this.mediaLayer);
+    this.hostElement.appendChild(this.uiLayer);
+    this.scale = new ScaleService({
+      baseHeight: schema.baseHeight,
+      baseWidth: schema.baseWidth,
+      containerWidth: this.width,
+      containerHeight: this.height,
+    });
+    this.logger.info(this.TAG + "Scale: " + JSON.stringify(this.scale));
+    this.player = new DPlayer(this.schema);
+    this.taskManager = new TaskManager(this.mediaLayer, this.scale, (error) => {
+      console.log(error);
+    });
+
+    this.styleSelf();
+    this.handlePageCompleted = this.handlePageCompleted.bind(this);
+    this.nextPage();
+  }
+
+  private handlePageCompleted(result: PageResult) {
+    // 1 Save data from last page
+    this.player.saveHistory(result);
+
+    // 2 Emit progress
+    const currentResults = this.player.getResults();
+    const a: SchemaResult = {
+      schemaId: this.schema.id,
+      pagesLeft: currentResults.pagesLeft,
+      predefinedFacts: currentResults.predefinedFacts,
+      eventLog: currentResults.eventLog,
+      answers: currentResults.answerFacts,
+    };
+    if (this._onProgress) {
+      this._onProgress(a);
+    }
+
+    // 3. Next page
+    this.nextPage();
+  }
+
+  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.uiLayer);
+    this.uiLayer.style.zIndex = "10";
+    this.mediaLayer.style.zIndex = "8";
+    makeStatic(this.mediaLayer);
+  }
+
+  private nextPage() {
+    const nextPage = this.player.getNextPage();
+    if (this.currentPage) {
+      this.currentPage.destroy();
+      this.uiLayer.innerHTML = "";
+    }
+
+    // console.log(nextPage);
+    if (nextPage && nextPage.videoPlayer && nextPage.videoPlayer.style) {
+      this.taskManager.setVideoStyles(nextPage.videoPlayer.style);
+    }
+
+    if (!nextPage) {
+      // TODO FIGURE OUT WHAQT TO DO AT END OF TEST!! Start over??
+      this.player = new DPlayer(this.schema);
+      if (this.player.pagesLeft > 0) {
+        this.nextPage();
+      }
+      return false;
+    }
+
+    const newPage = new Page(nextPage, this.taskManager, this.scale, (result) => {
+      this.handlePageCompleted(result);
+    });
+    this.currentPage = newPage;
+    newPage.appendYourself(this.uiLayer);
+    return true;
+  }
+
+  destroy() {
+    if (this.currentPage) {
+      this.currentPage.destroy();
+      this.uiLayer.innerHTML = "";
+    }
+  }
+
+  private _onProgress: ((result: SchemaResult) => void) | false = false;
+  onProgress(handler: (result: SchemaResult) => void) {
+    this._onProgress = handler;
+  }
+
+  private _onFatalError: ((error: { message: string }) => void) | false = false;
+  onFatalError(handler: (error: { message: string }) => void): void {
+    this._onFatalError = handler;
+  }
+  setLogger(logger: EngineLogger) {
+    this.logger = logger;
+  }
+}