@media-quest/engine 0.0.30 → 0.0.32

package/dist/public-api.js

@@ -22,6 +22,7 @@ var public_api_exports = {};
 __export(public_api_exports, {
   ButtonClickAction: () => ButtonClickAction,
   Condition: () => Condition,
+  DButton: () => DButton,
   DCss: () => DCss,
   DDiv: () => DDiv,
   DElement: () => DElement,
@@ -30,7 +31,6 @@ __export(public_api_exports, {
   DText: () => DText,
   DUtil: () => DUtil,
   MqEvent: () => MqEvent,
-  PageComponent: () => PageComponent,
   PageDto: () => PageDto,
   Rule: () => Rule,
   RuleEngine: () => RuleEngine,
@@ -559,6 +559,10 @@ var Scale;
 var DCss;
 ((DCss2) => {
   DCss2.toString = (unit, scale) => {
+    const _mapped = typeof unit === "number" ? { _unit: "percent", value: unit } : unit;
+    return _toString(_mapped, scale);
+  };
+  const _toString = (unit, scale) => {
     const clampedScale = Math.max(scale, 0.03);
     if (unit._unit === "px") {
       if (unit.value < 0.1) {
@@ -571,6 +575,9 @@ var DCss;
     return unit.value + "%";
   };
   DCss2.isLengthUnit = (unit) => {
+    if (typeof unit === "number") {
+      return true;
+    }
     if (!unit) {
       return false;
     }
@@ -585,17 +592,48 @@ var DCss;
 // src/Delement/DStyle.ts
 var DStyle;
 ((DStyle2) => {
+  const isNumber = DUtil.isNumber;
+  const isLengthUnit = DCss.isLengthUnit;
   DStyle2.normalize = (el) => {
-    el.style.padding = "0";
-    el.style.margin = "0";
-    el.style.position = "absolute";
-    el.style.boxSizing = "border-box";
+    const s = el.style;
+    s.position = "absolute";
+    s.boxSizing = "border-box";
+    s.bottom = "";
+    s.top = "";
+    s.left = "";
+    s.right = "";
+    s.boxShadow = "";
+    s.padding = "0px";
+    s.margin = "0px";
+    s.fontSize = "12px";
+    s.lineHeight = "1";
+    s.textAlign = "center";
+    s.textDecoration = "none";
+    s.boxShadow = "";
+    s.boxSizing = "border-box";
+    s.fontWeight = "500";
+    s.borderStyle = "";
+    s.borderRadius = "";
+    s.borderWidth = "";
+    s.borderWidth = "10px";
+    s.borderColor = "black";
+    s.backgroundColor = "";
+    s.border = "";
+    s.borderStyle = "none";
+    s.outline = "";
+    s.wordSpacing = "";
+    s.userSelect = "none";
+    s.textShadow = "";
     return el;
   };
   DStyle2.applyStyles = (el, style, scale) => {
     const {
       x,
       y,
+      left,
+      right,
+      top,
+      bottom,
       backgroundColor,
       borderColor,
       borderWidth,
@@ -606,6 +644,7 @@ var DStyle;
       cursor,
       fontSize,
       fontWeight,
+      lineHeight,
       textColor,
       textAlign,
       translate,
@@ -613,9 +652,87 @@ var DStyle;
       padding,
       letterSpacing,
       h,
+      height,
+      width,
       transform,
-      visibility
+      visibility,
+      justifyContent,
+      alignContent,
+      flexWrap,
+      display,
+      flexDirection,
+      alignItems,
+      position,
+      paddingLeft,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      gap,
+      zIndex,
+      //
+      boxShadow,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight
     } = style;
+    if (typeof zIndex === "number") {
+      el.style.zIndex = "" + zIndex;
+    }
+    if (DCss.isLengthUnit(minWidth)) {
+      el.style.minWidth = DCss.toString(minWidth, scale);
+    }
+    if (DCss.isLengthUnit(maxWidth)) {
+      el.style.maxWidth = DCss.toString(maxWidth, scale);
+    }
+    if (typeof lineHeight === "number") {
+      el.style.lineHeight = "" + lineHeight;
+    }
+    if (DCss.isLengthUnit(minHeight)) {
+      el.style.minHeight = DCss.toString(minHeight, scale);
+    }
+    if (DCss.isLengthUnit(maxHeight)) {
+      el.style.maxHeight = DCss.toString(maxHeight, scale);
+    }
+    if (boxShadow) {
+      el.style.boxShadow = boxShadow;
+    }
+    if (gap) {
+      el.style.gap = DCss.toString(gap, scale);
+    }
+    if (paddingLeft) {
+      el.style.paddingLeft = DCss.toString(paddingLeft, scale);
+    }
+    if (paddingRight) {
+      el.style.paddingRight = DCss.toString(paddingRight, scale);
+    }
+    if (paddingTop) {
+      el.style.paddingTop = DCss.toString(paddingTop, scale);
+    }
+    if (paddingBottom) {
+      el.style.paddingBottom = DCss.toString(paddingBottom, scale);
+    }
+    if (position) {
+      el.style.position = position;
+    }
+    if (justifyContent) {
+      el.style.justifyContent = justifyContent;
+    }
+    if (alignContent) {
+      el.style.alignContent = alignContent;
+    }
+    if (flexWrap) {
+      el.style.flexWrap = flexWrap;
+    }
+    if (display) {
+      el.style.display = display;
+    }
+    if (flexDirection) {
+      el.style.flexDirection = flexDirection;
+    }
+    if (alignItems) {
+      el.style.alignItems = alignItems;
+    }
     if (backgroundColor) {
       el.style.backgroundColor = backgroundColor;
     }
@@ -652,11 +769,29 @@ var DStyle;
     if (DUtil.isNumber(y)) {
       el.style.bottom = y + "%";
     }
+    if (DCss.isLengthUnit(height)) {
+      el.style.height = DCss.toString(height, scale);
+    }
+    if (DCss.isLengthUnit(width)) {
+      el.style.width = DCss.toString(width, scale);
+    }
+    if (DCss.isLengthUnit(left)) {
+      el.style.left = DCss.toString(left, scale);
+    }
+    if (DCss.isLengthUnit(right)) {
+      el.style.right = DCss.toString(right, scale);
+    }
+    if (DCss.isLengthUnit(bottom)) {
+      el.style.bottom = DCss.toString(bottom, scale);
+    }
+    if (DCss.isLengthUnit(top)) {
+      el.style.top = DCss.toString(top, scale);
+    }
     if (DUtil.isNumber(h)) {
-      el.style.height = h + "%";
+      el.style.height = DCss.toString(h, scale);
     }
-    if (DUtil.isNumber(w)) {
-      el.style.width = w + "%";
+    if (isNumber(w)) {
+      el.style.width = DCss.toString(w, scale);
     }
     if (DCss.isLengthUnit(borderRadius)) {
       el.style.borderRadius = DCss.toString(borderRadius, scale);
@@ -670,7 +805,7 @@ var DStyle;
     if (padding) {
       el.style.padding = DCss.toString(padding, scale);
     }
-    if (DUtil.isNumber(opacity)) {
+    if (isNumber(opacity)) {
       el.style.opacity = opacity + "";
     }
     if (visibility) {
@@ -680,7 +815,62 @@ var DStyle;
   };
 })(DStyle || (DStyle = {}));
 
+// src/common/DTimestamp.ts
+var DTimestamp;
+((DTimestamp2) => {
+  DTimestamp2.now = () => Date.now();
+  DTimestamp2.addMills = (t, ms) => {
+    const res = t + Math.abs(ms);
+    return res;
+  };
+  DTimestamp2.diff = (t1, t2) => {
+    const t1Abs = Math.abs(t1);
+    const t2Abs = Math.abs(t2);
+    return Math.abs(t1Abs - t2Abs);
+  };
+  DTimestamp2.diffNow = (t) => {
+    return (0, DTimestamp2.diff)(t, (0, DTimestamp2.now)());
+  };
+})(DTimestamp || (DTimestamp = {}));
+
+// src/page/task-state.ts
+var TaskState = {
+  eq: (a, b) => {
+    return a.audioIsPlaying === b.audioIsPlaying && a.isGifMode === b.isGifMode && a.videoPlayState === b.videoPlayState && a.blockFormInput === b.blockFormInput && a.blockResponseButton === b.blockResponseButton && a.blockAudio === b.blockAudio && a.blockVideo === b.blockVideo;
+  },
+  getDiff: (curr, prev) => {
+    if (prev === false) {
+      return curr;
+    }
+    const diff = {};
+    if (curr.audioIsPlaying !== prev.audioIsPlaying) {
+      diff.audioIsPlaying = curr.audioIsPlaying;
+    }
+    if (curr.isGifMode !== prev.isGifMode) {
+      diff.isGifMode = curr.isGifMode;
+    }
+    if (curr.videoPlayState !== prev.videoPlayState) {
+      diff.videoPlayState = curr.videoPlayState;
+    }
+    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;
+  }
+};
+
 // src/Delement/DElement.ts
+var isFalse = (bool) => bool === false;
+var isTrue = (bool) => bool === true;
 var DElement = class {
   constructor(el, dto, scale) {
     this.el = el;
@@ -690,7 +880,6 @@ var DElement = class {
       this.el.innerText = dto.innerText;
     }
     this.setStyle = this.setStyle.bind(this);
-    this.normalize = this.normalize.bind(this);
     this.appendYourself = this.appendYourself.bind(this);
     this.updateStyles = this.updateStyles.bind(this);
     const { onMouseEnter, onMouseLeave } = dto;
@@ -704,14 +893,12 @@ var DElement = class {
         this.setStyle(onMouseLeave);
       };
     }
-    this.el.onclick = () => {
-      this.onclick();
-    };
-    this.normalize();
+    DStyle.normalize(this.el);
     if (dto) {
       this.updateStyles(dto?.style);
     }
   }
+  prevState = false;
   currStyle = {
     fontSize: { _unit: "px", value: 100 },
     fontWeight: 500,
@@ -721,21 +908,80 @@ var DElement = class {
   /**
    *  This method is called when the element is clicked.
    *  This method shall be overridden by the pageClass.
-   * @param actions
+   * @param style
    */
-  onclick() {
-  }
   setStyle(style) {
     this.updateStyles(style);
   }
+  getElementByDangerousReference() {
+    return this.el;
+  }
   appendYourself(parent) {
     parent.append(this.el);
   }
-  normalize() {
-    this.el.style.padding = "0";
-    this.el.style.margin = "0";
-    this.el.style.position = "absolute";
-    this.el.style.boxSizing = "border-box";
+  updateState(state) {
+    this.handleStateChanges(state);
+  }
+  setState(state) {
+    const prev = this.prevState;
+    const diff = TaskState.getDiff(state, prev);
+    this.prevState = state;
+    if (Object.keys(diff).length > 0) {
+      this.handleStateChanges(diff);
+    }
+  }
+  handleStateChanges(diff) {
+    const {
+      audioIsPlaying,
+      videoPlayState,
+      blockAudio,
+      blockVideo,
+      blockResponseButton,
+      blockFormInput,
+      isGifMode
+    } = diff;
+    const {
+      whenAudioPaused,
+      whenVideoPaused,
+      whenAudioPlaying,
+      whenFormInputBlocked,
+      whenResponseBlocked,
+      whenVideoPlaying,
+      whenVideoEnded,
+      whenAudioBlocked,
+      whenVideoBlocked,
+      whenAudioUnblocked,
+      whenVideoUnblocked,
+      whenResponseUnblocked,
+      whenFormInputUnblocked,
+      whenVideoPausedAndMuted,
+      whenVideoEndedAndMuted,
+      whenVideoPlayingAndMuted
+    } = this.dto;
+    if (isTrue(audioIsPlaying) && whenAudioPlaying) {
+      this.setStyle(whenAudioPlaying);
+    }
+    if (isFalse(audioIsPlaying) && whenAudioPaused) {
+      this.setStyle(whenAudioPaused);
+    }
+    if (videoPlayState === "playing" && whenVideoPlaying) {
+      this.setStyle(whenVideoPlaying);
+    }
+    if (videoPlayState === "paused" && whenVideoPaused) {
+      this.setStyle(whenVideoPaused);
+    }
+    if (videoPlayState === "ended" && whenVideoEnded) {
+      this.setStyle(whenVideoEnded);
+    }
+    if (videoPlayState === "playing-and-muted" && whenVideoPlayingAndMuted) {
+      this.setStyle(whenVideoPlayingAndMuted);
+    }
+    if (videoPlayState === "paused-and-muted" && whenVideoPausedAndMuted) {
+      this.setStyle(whenVideoPausedAndMuted);
+    }
+    if (videoPlayState === "ended-and-muted" && whenVideoEndedAndMuted) {
+      this.setStyle(whenVideoEndedAndMuted);
+    }
   }
   updateStyles(style) {
     this.currStyle = Object.assign(this.currStyle, style);
@@ -749,6 +995,17 @@ var DDiv = class extends DElement {
   TAG = "[ DDiv ]: ";
   defaultStyle = { x: 22, y: 4 };
   children = [];
+  registerClickHandler(clickHandler) {
+    this.el.onclick = () => {
+      const action = this.dto.onClick;
+      if (action) {
+        clickHandler(action);
+      }
+    };
+    this.children.forEach((child) => {
+      child.registerClickHandler(clickHandler);
+    });
+  }
   constructor(dto, scale, children) {
     const d = document.createElement("div");
     super(d, dto, scale);
@@ -757,26 +1014,13 @@ var DDiv = class extends DElement {
       child.appendYourself(this.el);
     });
   }
+  whenConstructed() {
+    this.children.forEach((child) => {
+      console.log(child);
+    });
+  }
 };
 
-// src/common/DTimestamp.ts
-var DTimestamp;
-((DTimestamp2) => {
-  DTimestamp2.now = () => Date.now();
-  DTimestamp2.addMills = (t, ms) => {
-    const res = t + Math.abs(ms);
-    return res;
-  };
-  DTimestamp2.diff = (t1, t2) => {
-    const t1Abs = Math.abs(t1);
-    const t2Abs = Math.abs(t2);
-    return Math.abs(t1Abs - t2Abs);
-  };
-  DTimestamp2.diffNow = (t) => {
-    return (0, DTimestamp2.diff)(t, (0, DTimestamp2.now)());
-  };
-})(DTimestamp || (DTimestamp = {}));
-
 // src/Delement/DImg.ts
 var DImg = class _DImg extends DElement {
   constructor(dto, scaleService) {
@@ -803,6 +1047,14 @@ var DImg = class _DImg extends DElement {
   TAG;
   TIMING_TAG;
   loadStart;
+  registerClickHandler(clickHandler) {
+    this.el.onclick = () => {
+      const action = this.dto.onClick;
+      if (action) {
+        clickHandler(action);
+      }
+    };
+  }
   log() {
   }
 };
@@ -812,6 +1064,32 @@ var DText = class extends DElement {
   constructor(dto, scale) {
     super(document.createElement("p"), dto, scale);
   }
+  registerClickHandler(clickHandler) {
+    this.el.onclick = () => {
+      const onClick = this.dto.onClick;
+      if (onClick) {
+        clickHandler(onClick);
+      }
+    };
+  }
+};
+
+// src/Delement/DButton.ts
+var DButton = class extends DElement {
+  TAG = "[ DDiv ]: ";
+  defaultStyle = { x: 40, y: 40 };
+  constructor(dto, scale) {
+    const d = document.createElement("button");
+    super(d, dto, scale);
+  }
+  registerClickHandler(clickHandler) {
+    this.el.onclick = () => {
+      const action = this.dto.onClick;
+      if (action) {
+        clickHandler(action);
+      }
+    };
+  }
 };
 
 // src/Delement/element-factory.ts
@@ -819,12 +1097,13 @@ var createDElement = (dto, scale) => {
   switch (dto._tag) {
     case "div":
       const childEls = createChildrenForDiv(dto, scale);
-      const newDiv = new DDiv(dto, scale, childEls);
-      return newDiv;
+      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 = dto;
       throw new Error("Unknown dto given to the createDElement function.");
@@ -834,13 +1113,21 @@ var createChildrenForDiv = (dto, scale) => {
   const childDto = dto.children;
   const childEls = [];
   childDto.forEach((dto2) => {
-    if (dto2._tag === "p") {
-      const newText = new DText(dto2, scale);
-      childEls.push(newText);
-    }
-    if (dto2._tag === "img") {
-      const newImage = new DImg(dto2, scale);
-      childEls.push(newImage);
+    switch (dto2._tag) {
+      case "p":
+        const newText = new DText(dto2, scale);
+        childEls.push(newText);
+        break;
+      case "img":
+        const newImage = new DImg(dto2, scale);
+        childEls.push(newImage);
+        break;
+      case "button":
+        const newButton = new DButton(dto2, scale);
+        childEls.push(newButton);
+        break;
+      default:
+        const check = dto2;
     }
   });
   return childEls;
@@ -864,6 +1151,10 @@ var ButtonClickAction = {
         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 = a;
         return "";
@@ -871,116 +1162,6 @@ var ButtonClickAction = {
   }
 };
 
-// src/page/task-state.ts
-var TaskState = {
-  eq: (a, b) => {
-    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, prev) => {
-    if (prev === false) {
-      return curr;
-    }
-    const diff = {};
-    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;
-  }
-};
-
-// src/page/page-component.ts
-var isFalse = (bool) => bool === false;
-var isTrue = (bool) => bool === true;
-var PageComponent = class {
-  constructor(dto, scale) {
-    this.dto = dto;
-    this.scale = scale;
-    this.el = createDElement(dto.el, scale);
-    this.el.onclick = () => {
-      if (dto.onClick) {
-        this.onClick(dto.onClick);
-      } else {
-        console.warn(this.TAG + "onClick not implemented");
-      }
-    };
-  }
-  TAG = "[ PageComponent ]: ";
-  el;
-  prevState = false;
-  onClick(action) {
-    console.warn(this.TAG + "onclick not implemented");
-  }
-  updateState(state) {
-    this.handleStateChanges(state);
-  }
-  setState(state) {
-    const prev = this.prevState;
-    const diff = TaskState.getDiff(state, prev);
-    this.prevState = state;
-    if (Object.keys(diff).length > 0) {
-      this.handleStateChanges(diff);
-    }
-  }
-  handleStateChanges(diff) {
-    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);
-    }
-  }
-  appendToParent(parent) {
-    this.el.appendYourself(parent);
-  }
-};
-
 // src/events/mq-events.ts
 var MqEvent = {
   engineStart(schemaId, schemaPrefix) {
@@ -1021,17 +1202,13 @@ var PageDto = {
       id: "id" + id,
       prefix: "prefix" + id,
       tags: [],
-      staticElements: [],
       background: "white",
-      // videoList: [],
-      components: [
+      elements: [
         {
-          el: {
-            _tag: "div",
-            style: { x: 10, y: 0, w: 40, h: 20, backgroundColor: "red" },
-            children: [],
-            innerText: "Next btn " + id
-          }
+          _tag: "div",
+          style: { x: 10, y: 0, w: 40, h: 20, backgroundColor: "red" },
+          children: [],
+          innerText: "Next btn " + id
         }
       ],
       initialTasks: []
@@ -1044,17 +1221,12 @@ var Page = class {
     this.taskManager = taskManager;
     this.scaleService = scaleService;
     this.onCompleted = onCompleted;
-    this.components = dto.components.map((el) => {
-      const component = new PageComponent(el, scaleService);
-      component.onClick = (action) => {
-        this.handleButtonAction(action);
-      };
-      this.components.push(component);
-      return component;
-    });
-    dto.staticElements.forEach((el) => {
+    dto.elements.forEach((el) => {
       const element = createDElement(el, scaleService);
-      this.staticElements.push(element);
+      element.registerClickHandler((action) => {
+        this.handleButtonAction(action);
+      });
+      this.elements.push(element);
     });
     if (dto.videoPlayer) {
       this.taskManager.loadVideo(dto.videoPlayer.playUrl);
@@ -1067,8 +1239,9 @@ var Page = class {
     }
   }
   TAG = "[ DPage ]: ";
-  staticElements = [];
-  components = [];
+  elements = [];
+  // private elements: PageComponent[] = [];
+  // private layoutComponents: PageLayoutComponent[] = [];
   pageEntered = DTimestamp.now();
   previousState = false;
   eventLog = new Array();
@@ -1094,6 +1267,11 @@ var Page = class {
       descriptions: ButtonClickAction.describe(a)
     });
     this.eventLog.push(event);
+    navigator.vibrate(200);
+    const { vibrateMs } = a;
+    if (vibrateMs) {
+      navigator.vibrate(vibrateMs);
+    }
     switch (a.kind) {
       case "next-page":
         const nextPageResult = this.createPageResult([]);
@@ -1111,6 +1289,12 @@ var Page = class {
       case "pause-audio":
         this.taskManager.pauseAudio();
         break;
+      case "mute-video":
+        this.taskManager.muteVideo();
+        break;
+      case "un-mute-video":
+        this.taskManager.unMuteVideo();
+        break;
       case "submit-fact":
         const submitFactResult = this.createPageResult([a.fact]);
         this.onCompleted(submitFactResult);
@@ -1128,12 +1312,9 @@ var Page = class {
     const pageEnterEvent = MqEvent.pageEnter(this.dto.id, this.dto.prefix);
     this.pageEntered = DTimestamp.now();
     this.eventLog.push(pageEnterEvent);
-    this.staticElements.forEach((el) => {
+    this.elements.forEach((el) => {
       el.appendYourself(parent);
     });
-    this.components.forEach((comp) => {
-      comp.appendToParent(parent);
-    });
   }
   destroy() {
     this.taskManager.clear();
@@ -1142,8 +1323,8 @@ var Page = class {
     const prev = this.previousState;
     const curr = this.taskManager.getState();
     const diff = TaskState.getDiff(curr, prev);
-    this.components.forEach((comp) => {
-      comp.updateState(diff);
+    this.elements.forEach((element) => {
+      element.updateState(diff);
     });
   }
 };
@@ -1203,6 +1384,7 @@ var TaskManager = class {
     this.hideVideo();
     this.mediaLayer.appendChild(this.videoElement);
     this.mediaLayer.appendChild(this.audioElement);
+    this.videoStyles = this.defaultVideoStyles;
     DStyle.normalize(this.videoElement);
     DStyle.applyStyles(this.videoElement, this.videoStyles, this.scale.scale);
     this.videoElement.onended = () => {
@@ -1231,12 +1413,13 @@ var TaskManager = class {
   videoElement = document.createElement("video");
   audioElement = document.createElement("audio");
   showConsoleLogs = false;
-  videoStyles = {
-    h: 40,
-    w: 80,
-    y: 60,
-    x: 10
+  defaultVideoStyles = {
+    height: 50,
+    width: 100,
+    top: 0,
+    left: 0
   };
+  videoStyles;
   runningTask = false;
   taskList = [];
   delayRef = false;
@@ -1265,10 +1448,19 @@ var TaskManager = class {
     const blockAudio = c && c.task.blockAudio;
     const blockVideo = c && c.task.blockVideo;
     const blockFormInput = c && c.task.blockFormInput;
+    const videoIsMuted = this.videoElement.muted;
+    const videoIsAtTheEnd = this.videoElement.ended;
+    let videoPlayState = videoIsMuted ? "paused-and-muted" : "paused";
+    if (videoIsPlaying) {
+      videoPlayState = videoIsMuted ? "playing-and-muted" : "playing";
+    }
+    if (videoIsAtTheEnd) {
+      videoPlayState = videoIsMuted ? "ended-and-muted" : "ended";
+    }
     return {
       audioIsPlaying,
+      videoPlayState,
       isGifMode,
-      videoIsPlaying,
       blockFormInput,
       blockResponseButton,
       blockAudio,
@@ -1337,7 +1529,7 @@ var TaskManager = class {
     return true;
   }
   setVideoStyles(styles) {
-    this.videoStyles = styles;
+    this.videoStyles = { ...styles };
     DStyle.applyStyles(this.videoElement, this.videoStyles, this.scale.scale);
   }
   autoPlaySequence(tasks) {
@@ -1390,10 +1582,15 @@ var TaskManager = class {
     }
   }
   getNextTask() {
-    console.log("Getting next task.");
     const first = this.taskList.shift();
     return first ?? false;
   }
+  muteVideo() {
+    this.videoElement.muted = true;
+  }
+  unMuteVideo() {
+    this.videoElement.muted = false;
+  }
 };
 
 // src/engine/SchemaEngine.ts
@@ -1421,8 +1618,8 @@ var SchemaEngine = class {
     this.scale = new ScaleService({
       baseHeight: schema.baseHeight,
       baseWidth: schema.baseWidth,
-      containerWidth: width,
-      containerHeight: height
+      containerWidth: this.width,
+      containerHeight: this.height
     });
     this.logger.info(this.TAG + "Scale: " + JSON.stringify(this.scale));
     this.player = new DPlayer(this.schema);
@@ -1479,6 +1676,9 @@ var SchemaEngine = class {
       this.currentPage.destroy();
       this.uiLayer.innerHTML = "";
     }
+    if (nextPage && nextPage.videoPlayer && nextPage.videoPlayer.style) {
+      this.taskManager.setVideoStyles(nextPage.videoPlayer.style);
+    }
     if (!nextPage) {
       this.player = new DPlayer(this.schema);
       if (this.player.pagesLeft > 0) {
@@ -1515,6 +1715,7 @@ var SchemaEngine = class {
 0 && (module.exports = {
   ButtonClickAction,
   Condition,
+  DButton,
   DCss,
   DDiv,
   DElement,
@@ -1523,7 +1724,6 @@ var SchemaEngine = class {
   DText,
   DUtil,
   MqEvent,
-  PageComponent,
   PageDto,
   Rule,
   RuleEngine,