@media-quest/builder 0.0.30 → 0.0.32

package/dist/public-api.js

@@ -32,6 +32,7 @@ __export(public_api_exports, {
   BuilderTag: () => BuilderTag,
   BuilderText: () => BuilderText,
   CodeBook: () => CodeBook,
+  DefaultTheme: () => DefaultTheme,
   ExcludeByPageIdSelectItem: () => ExcludeByPageIdSelectItem,
   ExcludeByTagSelectItem: () => ExcludeByTagSelectItem,
   JumpToActionManager: () => JumpToActionManager,
@@ -1389,61 +1390,6 @@ var BuilderPage = class _BuilderPage extends BuilderObject {
   }
 };
 
-// src/theme/AbstractThemeCompiler.ts
-var AbstractThemeCompiler = class {
-  constructor(theme) {
-    this.theme = theme;
-  }
-};
-
-// src/theme/theme-utils.ts
-var ThemeUtils;
-((ThemeUtils2) => {
-  ThemeUtils2.spaceEvenlyX = (items, options = {
-    startAt: 0,
-    endAt: 100,
-    defaultItemWidth: 5
-  }) => {
-    const startAt = options?.startAt ?? 0;
-    const endAt = options?.endAt ?? 100;
-    const range = Math.abs(endAt - startAt);
-    if (items.length === 0) {
-      return [];
-    }
-    const marginCount = items.length + 1;
-    const defaultWidth = options.defaultItemWidth ?? 150 / marginCount;
-    let totalWidthOfElements = items.reduce((prev, curr) => {
-      const w = curr.style.w ?? defaultWidth;
-      return prev + w;
-    }, 0);
-    let cursor = startAt;
-    const rest = Math.max(range - totalWidthOfElements, 0);
-    const margin = rest / marginCount;
-    items.forEach((item) => {
-      cursor = cursor + margin;
-      const w = item.style.w ?? defaultWidth;
-      const x = cursor;
-      cursor = cursor + w;
-      item.style.w = w;
-      item.style.x = x;
-    });
-    return items;
-  };
-  ThemeUtils2.centerY = () => ({
-    y: 50,
-    transform: "translate(0%, 50%)"
-  });
-  ThemeUtils2.centerX = () => ({
-    x: 50,
-    transform: "translate(-50%, 0%)"
-  });
-  ThemeUtils2.centerXY = () => ({
-    x: 50,
-    y: 50,
-    transform: "translate(-50%, 50%)"
-  });
-})(ThemeUtils || (ThemeUtils = {}));
-
 // src/theme/icon-urls.ts
 var IconUrls = {
   ispeWhitePng: "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fispe-hvit.png?alt=media&token=f6fe628b-2d99-472d-a2ea-e062873e2e22",
@@ -1460,7 +1406,7 @@ var IconUrls = {
   volumeUpSvg: "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fvolume_up-24px.svg?alt=media&token=551bd0a6-a515-4f87-a245-da433f4833f9"
 };
 
-// src/theme/IDefaultTheme.ts
+// src/theme/Default-theme.ts
 var BuilderOptionTheme;
 ((BuilderOptionTheme2) => {
   const GREEN = "#70AD47";
@@ -1470,80 +1416,64 @@ var BuilderOptionTheme;
   const LIGHT_BLUE = "#42719C";
   const WHITE = "#ffffff";
   const BLUE = "#2F5597";
-  const BTN_WIDTH = 18.5;
   const BTN_BORDER_WIDTH = 3;
   const BTN_BORDER_RADIUS = 10;
   const BTN_BORDER_STYLE = "solid";
-  const BTN_HEIGHT = 9.2;
-  const BTN_SHORT_WIDTH = 13.7;
   const FONT_WEIGHT = 600;
-  const FONT_SIZE = 35;
+  const FONT_SIZE = 50;
+  const BTN_PADDING_LEFT = 40;
+  const BTN_PADDING_TOP = 40;
+  const buttonBaseCss2 = () => ({
+    css: {
+      fontWeight: FONT_WEIGHT,
+      fontSize: { _unit: "px", value: FONT_SIZE },
+      letterSpacing: { _unit: "px", value: 2 },
+      paddingLeft: { _unit: "px", value: BTN_PADDING_LEFT },
+      paddingTop: { _unit: "px", value: BTN_PADDING_TOP },
+      paddingBottom: { _unit: "px", value: BTN_PADDING_TOP },
+      paddingRight: { _unit: "px", value: BTN_PADDING_LEFT },
+      borderRadius: { _unit: "px", value: BTN_BORDER_RADIUS },
+      borderWidth: { _unit: "px", value: BTN_BORDER_WIDTH },
+      borderStyle: BTN_BORDER_STYLE,
+      // boxShadow: "3px 3px gray",
+      position: "relative",
+      display: "block"
+    },
+    cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+    cssEnabled: { opacity: 1, cursor: "pointer" }
+  });
   BuilderOptionTheme2.blueButton = () => {
+    const base = buttonBaseCss2();
+    const { css, cssEnabled, cssDisabled } = base;
     const optionTheme = {
       name: "blue-button-theme",
       normal: {
         btn: {
           css: {
+            ...css,
             backgroundColor: BLUE,
             borderColor: BLUE,
-            textColor: WHITE,
-            fontSize: { _unit: "px", value: FONT_SIZE },
-            borderWidth: { _unit: "px", value: BTN_BORDER_WIDTH },
-            borderStyle: BTN_BORDER_STYLE,
-            borderRadius: { value: BTN_BORDER_RADIUS, _unit: "px" },
-            padding: { _unit: "px", value: 40 },
-            h: BTN_HEIGHT,
-            w: BTN_WIDTH,
-            x: 10,
-            y: 8,
-            textAlign: "center"
+            textColor: WHITE
           },
-          cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
-          cssEnabled: { opacity: 1, cursor: "pointer" }
+          cssDisabled,
+          cssEnabled
         },
         divider: {},
-        text1: {
-          y: 50,
-          transform: "translate(0%, 50%)",
-          textColor: WHITE,
-          fontSize: { _unit: "px", value: FONT_SIZE },
-          w: 84,
-          x: 8,
-          fontWeight: FONT_WEIGHT,
-          textAlign: "center"
-        },
+        text1: {},
         text2: {}
       },
       dontKnow: {
         btn: {
           css: {
+            ...css,
             backgroundColor: WHITE,
             borderColor: LIGHT_BLUE,
-            textColor: BLUE,
-            fontSize: { _unit: "px", value: FONT_SIZE },
-            borderWidth: { _unit: "px", value: BTN_BORDER_WIDTH },
-            borderStyle: BTN_BORDER_STYLE,
-            borderRadius: { value: BTN_BORDER_RADIUS, _unit: "px" },
-            padding: { _unit: "px", value: 40 },
-            h: BTN_HEIGHT,
-            w: BTN_SHORT_WIDTH,
-            x: 10,
-            y: 8,
-            textAlign: "center"
+            textColor: BLUE
           },
-          cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
-          cssEnabled: { opacity: 1, cursor: "pointer" }
-        },
-        text1: {
-          y: 50,
-          transform: "translate(0%, 50%)",
-          textColor: BLUE,
-          fontSize: { _unit: "px", value: FONT_SIZE },
-          w: 84,
-          x: 8,
-          fontWeight: FONT_WEIGHT,
-          textAlign: "center"
+          cssDisabled,
+          cssEnabled
         },
+        text1: {},
         text2: {},
         divider: {}
       }
@@ -1551,8 +1481,35 @@ var BuilderOptionTheme;
     return optionTheme;
   };
 })(BuilderOptionTheme || (BuilderOptionTheme = {}));
+var textHighTop = 25;
+var textLowTop = 55;
+var audioHighTop = 20;
+var audioLowTop = 55;
+var textBase = {
+  width: 80,
+  top: textHighTop,
+  left: 10,
+  textAlign: "center",
+  textColor: "black",
+  fontSize: { _unit: "px", value: 40 }
+};
+var textHigh = { ...textBase, top: textHighTop };
+var textLow = { ...textHigh, top: textLowTop };
+var audioBase = {
+  height: 6,
+  width: 6,
+  left: 4,
+  top: audioHighTop,
+  cursor: "pointer",
+  opacity: 0.8,
+  visibility: "visible"
+};
+var audioHigh = { ...audioBase, top: audioHighTop };
+var audioLow = { ...audioBase, top: audioLowTop };
 var DefaultTheme = {
   name: "default-theme",
+  schemaBackgroundColor: "white",
+  dimensions: { baseHeight: 1300, baseWidth: 1024 },
   videoPlayer: {
     playButton: {
       iconUrl: IconUrls.playCircleRegular,
@@ -1566,76 +1523,491 @@ var DefaultTheme = {
       cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
       cssEnabled: { opacity: 0.8, cursor: "pointer" }
     },
-    videoElement: { css: { w: 100, h: 45, y: 55, x: 0 } }
+    videoElement: { css: { height: 41, top: 3, x: 0 } }
   },
   image: { style: { h: 50, w: 100, x: 0 } },
   mainText: {
-    noMedia: {
-      text: {
-        css: {
-          w: 80,
-          y: 65,
-          x: 10,
-          textAlign: "center",
-          textColor: "black",
-          fontSize: { _unit: "px", value: 40 }
-        },
-        cssDisabled: {},
-        cssEnabled: {}
-      },
+    base: {
+      text: { ...textBase },
       audio: {
-        css: {
-          h: 6,
-          w: 6,
-          x: 4,
-          y: 32,
-          cursor: "pointer",
-          opacity: 0.8,
-          visibility: "visible"
-        },
+        iconUrl: IconUrls.volumeUpSvg,
+        css: { ...audioBase },
         cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
         cssEnabled: { opacity: 0.8, cursor: "pointer" }
       }
     },
-    withMedia: {
-      text: {
+    notMediaHasAudio: {
+      text: { ...textHigh },
+      audio: { ...audioHigh }
+    },
+    hasMediaNotAudio: {
+      text: { ...textHigh }
+    },
+    notMediaNotAudio: { text: { ...textHigh } },
+    hasMediaHasAudio: { text: { ...textLow }, audio: { ...audioLow } }
+  },
+  buttonBar: {
+    vibrateMs: false,
+    container: {
+      base: {
+        display: "flex",
+        justifyContent: "space-evenly",
+        position: "absolute",
+        width: 100,
+        height: 15,
+        bottom: 0,
+        left: 0,
+        // h: 10,
+        alignItems: "center",
+        backgroundColor: "yellow"
+      },
+      whenSingle: { justifyContent: "space-evenly" },
+      whenMany: { justifyContent: "space-evenly" }
+    },
+    nextButtonTheme: BuilderOptionTheme.blueButton(),
+    responseButtons: BuilderOptionTheme.blueButton()
+  }
+};
+
+// src/theme/default-theme-compiler.ts
+var import_engine2 = require("@media-quest/engine");
+
+// src/theme/icons.ts
+var UN_MUTE = `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 15.5661V23.4339H13.3333L20 29.9903V9.00969L13.3333 15.5661H8ZM26 19.5C26 17.179 24.64 15.1859 22.6667 14.2155V24.7714C24.64 23.8141 26 21.821 26 19.5ZM22.6667 8V10.7013C26.52 11.829 29.3333 15.3432 29.3333 19.5C29.3333 23.6568 26.52 27.171 22.6667 28.2987V31C28.0133 29.8067 32 25.1123 32 19.5C32 13.8877 28.0133 9.19327 22.6667 8Z" fill="#164AC4"/>
+</svg>`;
+var MUTE = `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M26 20C26 17.64 24.64 15.6133 22.6667 14.6267V17.5733L25.9333 20.84C25.9733 20.5733 26 20.2933 26 20ZM29.3333 20C29.3333 21.2533 29.0667 22.4267 28.6133 23.52L30.6267 25.5333C31.5067 23.88 32 22 32 20C32 14.2933 28.0133 9.52 22.6667 8.30667V11.0533C26.52 12.2 29.3333 15.7733 29.3333 20ZM9.69333 8L8 9.69333L14.3067 16H8V24H13.3333L20 30.6667V21.6933L25.6667 27.36C24.7733 28.0533 23.7733 28.6 22.6667 28.9333V31.68C24.5067 31.2667 26.1733 30.4133 27.5867 29.2667L30.3067 32L32 30.3067L20 18.3067L9.69333 8ZM20 9.33333L17.2133 12.12L20 14.9067V9.33333Z" fill="#164AC4"/>
+</svg>`;
+var PLAY_SOUND = `
+
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1_299)">
+    <path d="M13.5 19.5C16.8137 19.5 19.5 16.8137 19.5 13.5C19.5 10.1863 16.8137 7.5 13.5 7.5C10.1863 7.5 7.5 10.1863 7.5 13.5C7.5 16.8137 10.1863 19.5 13.5 19.5Z" fill="#164AC4"/>
+    <path d="M13.5 22.5C9.495 22.5 1.5 24.51 1.5 28.5V31.5H25.5V28.5C25.5 24.51 17.505 22.5 13.5 22.5ZM25.14 8.04L22.62 10.575C23.88 12.345 23.88 14.64 22.62 16.41L25.14 18.945C28.17 15.915 28.17 11.34 25.14 8.04ZM30.105 3L27.66 5.445C31.815 9.975 31.815 16.785 27.66 21.555L30.105 24C35.955 18.165 35.97 9.075 30.105 3Z" fill="#164AC4"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1_299">
+      <rect width="36" height="36" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>`;
+var CLOSE = `
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20 0.799988C8.94 0.799988 0 9.73999 0 20.8C0 31.86 8.94 40.8 20 40.8C31.06 40.8 40 31.86 40 20.8C40 9.73999 31.06 0.799988 20 0.799988ZM30 27.98L27.18 30.8L20 23.62L12.82 30.8L10 27.98L17.18 20.8L10 13.62L12.82 10.8L20 17.98L27.18 10.8L30 13.62L22.82 20.8L30 27.98Z" fill="white"/>
+</svg>`;
+var COMPLETED = `
+<svg width="36" height="27" viewBox="0 0 36 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.2 21.2L2.8 12.8L0 15.6L11.2 26.8L35.2 2.8L32.4 0L11.2 21.2Z" fill="white"/>
+</svg>`;
+var VIDEO_PLAY = `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 12V28L29 20L16 12Z" fill="#164AC4"/>
+</svg>`;
+var VIDEO_REPLAY = `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20 12.8V8L13.75 14L20 20V15.2C24.1375 15.2 27.5 18.428 27.5 22.4C27.5 26.372 24.1375 29.6 20 29.6C15.8625 29.6 12.5 26.372 12.5 22.4H10C10 27.704 14.475 32 20 32C25.525 32 30 27.704 30 22.4C30 17.096 25.525 12.8 20 12.8Z" fill="#164AC4"/>
+</svg>`;
+var HELP = `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20 0C8.96 0 0 8.96 0 20C0 31.04 8.96 40 20 40C31.04 40 40 31.04 40 20C40 8.96 31.04 0 20 0ZM22 34H18V30H22V34ZM26.14 18.5L24.34 20.34C22.9 21.8 22 23 22 26H18V25C18 22.8 18.9 20.8 20.34 19.34L22.82 16.82C23.56 16.1 24 15.1 24 14C24 11.8 22.2 10 20 10C17.8 10 16 11.8 16 14H12C12 9.58 15.58 6 20 6C24.42 6 28 9.58 28 14C28 15.76 27.28 17.36 26.14 18.5Z" fill="#164AC4"/>
+</svg>`;
+var VIDEO_PAUSE = `
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13 28H17.6667V12H13V28ZM22.3333 12V28H27V12H22.3333Z" fill="#164AC4"/>
+</svg>`;
+var THEME_2_ICONS = {
+  unMute: {
+    svg: UN_MUTE,
+    dataUrl: "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTggMTUuNTY2MVYyMy40MzM5SDEzLjMzMzNMMjAgMjkuOTkwM1Y5LjAwOTY5TDEzLjMzMzMgMTUuNTY2MUg4Wk0yNiAxOS41QzI2IDE3LjE3OSAyNC42NCAxNS4xODU5IDIyLjY2NjcgMTQuMjE1NVYyNC43NzE0QzI0LjY0IDIzLjgxNDEgMjYgMjEuODIxIDI2IDE5LjVaTTIyLjY2NjcgOFYxMC43MDEzQzI2LjUyIDExLjgyOSAyOS4zMzMzIDE1LjM0MzIgMjkuMzMzMyAxOS41QzI5LjMzMzMgMjMuNjU2OCAyNi41MiAyNy4xNzEgMjIuNjY2NyAyOC4yOTg3VjMxQzI4LjAxMzMgMjkuODA2NyAzMiAyNS4xMTIzIDMyIDE5LjVDMzIgMTMuODg3NyAyOC4wMTMzIDkuMTkzMjcgMjIuNjY2NyA4WiIgZmlsbD0iIzE2NEFDNCIvPgo8L3N2Zz4="
+  },
+  mute: {
+    svg: MUTE,
+    dataUrl: "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTI2IDIwQzI2IDE3LjY0IDI0LjY0IDE1LjYxMzMgMjIuNjY2NyAxNC42MjY3VjE3LjU3MzNMMjUuOTMzMyAyMC44NEMyNS45NzMzIDIwLjU3MzMgMjYgMjAuMjkzMyAyNiAyMFpNMjkuMzMzMyAyMEMyOS4zMzMzIDIxLjI1MzMgMjkuMDY2NyAyMi40MjY3IDI4LjYxMzMgMjMuNTJMMzAuNjI2NyAyNS41MzMzQzMxLjUwNjcgMjMuODggMzIgMjIgMzIgMjBDMzIgMTQuMjkzMyAyOC4wMTMzIDkuNTIgMjIuNjY2NyA4LjMwNjY3VjExLjA1MzNDMjYuNTIgMTIuMiAyOS4zMzMzIDE1Ljc3MzMgMjkuMzMzMyAyMFpNOS42OTMzMyA4TDggOS42OTMzM0wxNC4zMDY3IDE2SDhWMjRIMTMuMzMzM0wyMCAzMC42NjY3VjIxLjY5MzNMMjUuNjY2NyAyNy4zNkMyNC43NzMzIDI4LjA1MzMgMjMuNzczMyAyOC42IDIyLjY2NjcgMjguOTMzM1YzMS42OEMyNC41MDY3IDMxLjI2NjcgMjYuMTczMyAzMC40MTMzIDI3LjU4NjcgMjkuMjY2N0wzMC4zMDY3IDMyTDMyIDMwLjMwNjdMMjAgMTguMzA2N0w5LjY5MzMzIDhaTTIwIDkuMzMzMzNMMTcuMjEzMyAxMi4xMkwyMCAxNC45MDY3VjkuMzMzMzNaIiBmaWxsPSIjMTY0QUM0Ii8+Cjwvc3ZnPg=="
+  },
+  audioPlay: {
+    svg: PLAY_SOUND,
+    dataUrl: "data:image/svg+xml;base64,Cgo8c3ZnIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8xXzI5OSkiPgogICAgPHBhdGggZD0iTTEzLjUgMTkuNUMxNi44MTM3IDE5LjUgMTkuNSAxNi44MTM3IDE5LjUgMTMuNUMxOS41IDEwLjE4NjMgMTYuODEzNyA3LjUgMTMuNSA3LjVDMTAuMTg2MyA3LjUgNy41IDEwLjE4NjMgNy41IDEzLjVDNy41IDE2LjgxMzcgMTAuMTg2MyAxOS41IDEzLjUgMTkuNVoiIGZpbGw9IiMxNjRBQzQiLz4KICAgIDxwYXRoIGQ9Ik0xMy41IDIyLjVDOS40OTUgMjIuNSAxLjUgMjQuNTEgMS41IDI4LjVWMzEuNUgyNS41VjI4LjVDMjUuNSAyNC41MSAxNy41MDUgMjIuNSAxMy41IDIyLjVaTTI1LjE0IDguMDRMMjIuNjIgMTAuNTc1QzIzLjg4IDEyLjM0NSAyMy44OCAxNC42NCAyMi42MiAxNi40MUwyNS4xNCAxOC45NDVDMjguMTcgMTUuOTE1IDI4LjE3IDExLjM0IDI1LjE0IDguMDRaTTMwLjEwNSAzTDI3LjY2IDUuNDQ1QzMxLjgxNSA5Ljk3NSAzMS44MTUgMTYuNzg1IDI3LjY2IDIxLjU1NUwzMC4xMDUgMjRDMzUuOTU1IDE4LjE2NSAzNS45NyA5LjA3NSAzMC4xMDUgM1oiIGZpbGw9IiMxNjRBQzQiLz4KICA8L2c+CiAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAwXzFfMjk5Ij4KICAgICAgPHJlY3Qgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiBmaWxsPSJ3aGl0ZSIvPgogICAgPC9jbGlwUGF0aD4KICA8L2RlZnM+Cjwvc3ZnPg=="
+  },
+  videoPause: {
+    svg: VIDEO_PAUSE,
+    dataUrl: "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEzIDI4SDE3LjY2NjdWMTJIMTNWMjhaTTIyLjMzMzMgMTJWMjhIMjdWMTJIMjIuMzMzM1oiIGZpbGw9IiMxNjRBQzQiLz4KPC9zdmc+"
+  },
+  videoPlay: {
+    svg: VIDEO_PLAY,
+    dataUrl: "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE2IDEyVjI4TDI5IDIwTDE2IDEyWiIgZmlsbD0iIzE2NEFDNCIvPgo8L3N2Zz4="
+  },
+  videoReplay: {
+    svg: VIDEO_REPLAY,
+    dataUrl: "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTIwIDEyLjhWOEwxMy43NSAxNEwyMCAyMFYxNS4yQzI0LjEzNzUgMTUuMiAyNy41IDE4LjQyOCAyNy41IDIyLjRDMjcuNSAyNi4zNzIgMjQuMTM3NSAyOS42IDIwIDI5LjZDMTUuODYyNSAyOS42IDEyLjUgMjYuMzcyIDEyLjUgMjIuNEgxMEMxMCAyNy43MDQgMTQuNDc1IDMyIDIwIDMyQzI1LjUyNSAzMiAzMCAyNy43MDQgMzAgMjIuNEMzMCAxNy4wOTYgMjUuNTI1IDEyLjggMjAgMTIuOFoiIGZpbGw9IiMxNjRBQzQiLz4KPC9zdmc+"
+  },
+  close: {
+    svg: CLOSE,
+    dataUrl: "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQxIiB2aWV3Qm94PSIwIDAgNDAgNDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTIwIDAuNzk5OTg4QzguOTQgMC43OTk5ODggMCA5LjczOTk5IDAgMjAuOEMwIDMxLjg2IDguOTQgNDAuOCAyMCA0MC44QzMxLjA2IDQwLjggNDAgMzEuODYgNDAgMjAuOEM0MCA5LjczOTk5IDMxLjA2IDAuNzk5OTg4IDIwIDAuNzk5OTg4Wk0zMCAyNy45OEwyNy4xOCAzMC44TDIwIDIzLjYyTDEyLjgyIDMwLjhMMTAgMjcuOThMMTcuMTggMjAuOEwxMCAxMy42MkwxMi44MiAxMC44TDIwIDE3Ljk4TDI3LjE4IDEwLjhMMzAgMTMuNjJMMjIuODIgMjAuOEwzMCAyNy45OFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPg=="
+  },
+  complete: {
+    svg: COMPLETED,
+    dataUrl: "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjM2IiBoZWlnaHQ9IjI3IiB2aWV3Qm94PSIwIDAgMzYgMjciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTExLjIgMjEuMkwyLjggMTIuOEwwIDE1LjZMMTEuMiAyNi44TDM1LjIgMi44TDMyLjQgMEwxMS4yIDIxLjJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4="
+  },
+  help: {
+    svg: HELP,
+    dataUrl: "data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTIwIDBDOC45NiAwIDAgOC45NiAwIDIwQzAgMzEuMDQgOC45NiA0MCAyMCA0MEMzMS4wNCA0MCA0MCAzMS4wNCA0MCAyMEM0MCA4Ljk2IDMxLjA0IDAgMjAgMFpNMjIgMzRIMThWMzBIMjJWMzRaTTI2LjE0IDE4LjVMMjQuMzQgMjAuMzRDMjIuOSAyMS44IDIyIDIzIDIyIDI2SDE4VjI1QzE4IDIyLjggMTguOSAyMC44IDIwLjM0IDE5LjM0TDIyLjgyIDE2LjgyQzIzLjU2IDE2LjEgMjQgMTUuMSAyNCAxNEMyNCAxMS44IDIyLjIgMTAgMjAgMTBDMTcuOCAxMCAxNiAxMS44IDE2IDE0SDEyQzEyIDkuNTggMTUuNTggNiAyMCA2QzI0LjQyIDYgMjggOS41OCAyOCAxNEMyOCAxNS43NiAyNy4yOCAxNy4zNiAyNi4xNCAxOC41WiIgZmlsbD0iIzE2NEFDNCIvPgo8L3N2Zz4="
+  }
+};
+
+// src/theme/theme2.ts
+var translate = (pos) => {
+  const x = pos.x || 0;
+  const y = pos.y || 0;
+  return `translate(${x}%, ${y}%)`;
+};
+var translateY50 = translate({ y: 50 });
+var translateX50 = translate({ x: -50 });
+var translateX50Y50 = translate({ x: -50, y: 50 });
+var Colors = {
+  primary: "#164AC4",
+  secondary: "#E8F0FE",
+  text: "#0D1E45",
+  white: "#ffffff",
+  backgroundGray: "#F0F0F0",
+  backgroundWhite: "white",
+  progressBackGround: "#164AC4",
+  progressForGround: "#F5F5F5"
+  // red: "red",
+  // yellow: "yellow",
+};
+var fraction = 472.6 / 600;
+var LAYER_2 = 2;
+var LAYER_4 = 4;
+var LAYER_5 = 5;
+var W_M1 = 6;
+var W_M2 = 4.5;
+var W_M3 = 3;
+var W_M4 = 1.5;
+var H_M1 = 5;
+var H_M2 = 3.75;
+var H_M3 = 2.5;
+var H_M4 = 1.25;
+var W_MAX = 100 - W_M1 * 2;
+var PROGRESS_BAR_HEIGHT = 2;
+var AUDIO_ICON_WIDTH = 10;
+var AUDIO_ICON_HEIGHT = AUDIO_ICON_WIDTH * fraction;
+var AUDIO_ICON_LEFT = W_M1 + W_M2 + W_M3;
+var Q_AREA_HEIGHT = 32;
+var Q_AREA_BOTTOM = 2 * H_M1 + H_M2;
+var Q_AREA_LEFT = W_M1 + W_M2;
+var Q_AREA_WIDTH = W_MAX - W_M2 - W_M2;
+var Q_AREA_TOP = 100 - Q_AREA_HEIGHT - Q_AREA_BOTTOM;
+var MEDIA_HEIGHT = 34;
+var MEDIA_TOP = H_M1 + H_M2;
+var MEDIA_BOTTOM = MEDIA_TOP + MEDIA_HEIGHT;
+var MEDIA_LEFT = W_M1 + W_M2;
+var VIDEO_BUTTONS_WIDTH = 8;
+var VIDEO_BUTTONS_HEIGHT = VIDEO_BUTTONS_WIDTH * fraction;
+var VIDEO_CONTROLS_WIDTH = VIDEO_BUTTONS_WIDTH * 2 + 4 * W_M4;
+var VIDEO_CONTROLS_HEIGHT = VIDEO_BUTTONS_HEIGHT + 2 * H_M4 + 2;
+var VIDEO_CONTROLS_LEFT = 50 - VIDEO_CONTROLS_WIDTH / 2;
+var VIDEO_CONTROLS_RIGHT = 50 - VIDEO_CONTROLS_WIDTH / 2;
+var VIDEO_CONTROLS_TOP = MEDIA_BOTTOM - 1;
+var VIDEO_CONTROLS_BOTTOM = 100 - VIDEO_CONTROLS_HEIGHT - VIDEO_CONTROLS_TOP;
+var PAGE_BACKGROUND_BOTTOM = H_M1 + H_M1;
+var PAGE_BACKGROUND_HEIGHT = 100 - PAGE_BACKGROUND_BOTTOM - H_M1;
+var BUTTON_BAR_WIDTH = Q_AREA_WIDTH - 2 * W_M3;
+var MAIN_TEXT_WIDE = Q_AREA_WIDTH - 2 * W_M3;
+var MAIN_TEXT_NARROW = MAIN_TEXT_WIDE - AUDIO_ICON_WIDTH - W_M3;
+var btnTextBase = {
+  fontSize: { _unit: "px", value: 25 },
+  bottom: VIDEO_CONTROLS_BOTTOM + 1.2,
+  zIndex: LAYER_5,
+  width: VIDEO_CONTROLS_WIDTH / 2,
+  textAlign: "center",
+  visibility: "hidden",
+  margin: { _unit: "px", value: 0 }
+  // backgroundColor: Colors.yellow,
+};
+var muteUnmuteText = { ...btnTextBase, right: VIDEO_CONTROLS_RIGHT };
+var playPauseText = { ...btnTextBase, left: VIDEO_CONTROLS_LEFT };
+var replayText = {
+  ...btnTextBase,
+  width: VIDEO_CONTROLS_WIDTH,
+  left: VIDEO_CONTROLS_LEFT,
+  // backgroundColor: Colors.yellow,
+  visibility: "hidden"
+};
+var playPauseBase = {
+  css: {
+    width: VIDEO_BUTTONS_WIDTH,
+    height: VIDEO_BUTTONS_HEIGHT,
+    top: MEDIA_BOTTOM,
+    left: VIDEO_CONTROLS_LEFT + W_M4,
+    zIndex: LAYER_5,
+    visibility: "hidden"
+  },
+  cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+  cssEnabled: { opacity: 0.8, cursor: "pointer" }
+};
+var replayButtonStyles = {
+  width: VIDEO_BUTTONS_WIDTH,
+  height: VIDEO_BUTTONS_HEIGHT,
+  top: MEDIA_BOTTOM,
+  // backgroundColor: "red",
+  left: VIDEO_CONTROLS_LEFT + VIDEO_CONTROLS_WIDTH / 2,
+  transform: translateX50,
+  zIndex: LAYER_5,
+  visibility: "hidden",
+  cursor: "pointer"
+};
+var muteUnMuteStyles = {
+  css: {
+    width: VIDEO_BUTTONS_WIDTH,
+    height: VIDEO_BUTTONS_HEIGHT,
+    top: MEDIA_BOTTOM,
+    right: VIDEO_CONTROLS_RIGHT + W_M4,
+    zIndex: LAYER_5,
+    cursor: "pointer"
+    // transform: "translateX: 100%",
+  },
+  cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+  cssEnabled: { opacity: 0.8, cursor: "pointer" }
+};
+var buttonBaseCss = () => ({
+  css: {
+    backgroundColor: Colors.primary,
+    borderColor: Colors.primary,
+    textColor: Colors.white,
+    fontWeight: 600,
+    fontSize: { _unit: "px", value: 35 },
+    lineHeight: 1,
+    // letterSpacing: { _unit: "px", value: 2 },
+    paddingLeft: { _unit: "px", value: 30 },
+    paddingTop: { _unit: "px", value: 10 },
+    paddingBottom: { _unit: "px", value: 10 },
+    paddingRight: { _unit: "px", value: 30 },
+    borderRadius: { _unit: "px", value: 20 },
+    borderStyle: "solid",
+    boxShadow: "3px 3px gray",
+    position: "relative",
+    display: "block",
+    cursor: "pointer"
+  },
+  cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+  cssEnabled: { opacity: 1, cursor: "pointer" }
+});
+var primaryButton = (overridesCss) => {
+  const base = buttonBaseCss();
+  const optionTheme = {
+    name: "primary-button",
+    normal: {
+      btn: {
+        css: {
+          ...base.css,
+          ...overridesCss,
+          backgroundColor: Colors.primary,
+          borderColor: Colors.primary,
+          textColor: Colors.white
+        },
+        cssDisabled: base.cssDisabled,
+        cssEnabled: base.cssEnabled
+      },
+      divider: {},
+      text1: {},
+      text2: {}
+    },
+    dontKnow: {
+      btn: {
         css: {
-          w: 80,
-          y: 27,
-          x: 10,
-          textAlign: "center",
-          textColor: "black",
-          fontSize: { _unit: "px", value: 30 }
+          ...base.css,
+          backgroundColor: Colors.secondary,
+          borderColor: Colors.secondary,
+          textColor: Colors.primary
         },
-        cssDisabled: {},
-        cssEnabled: {}
+        cssEnabled: base.cssEnabled,
+        cssDisabled: base.cssDisabled
+      },
+      text1: {},
+      text2: {},
+      divider: {}
+    }
+  };
+  return optionTheme;
+};
+var Theme2 = {
+  name: "theme2",
+  schemaBackgroundColor: Colors.white,
+  dimensions: { baseHeight: 1300, baseWidth: 1024 },
+  pageBackGround: {
+    style: {
+      height: PAGE_BACKGROUND_HEIGHT,
+      width: W_MAX,
+      bottom: PAGE_BACKGROUND_BOTTOM,
+      left: W_M1,
+      backgroundColor: Colors.backgroundGray
+    }
+  },
+  backGroundArea1: {
+    style: {
+      height: Q_AREA_HEIGHT,
+      width: Q_AREA_WIDTH,
+      left: Q_AREA_LEFT,
+      bottom: Q_AREA_BOTTOM,
+      backgroundColor: Colors.white
+    }
+  },
+  progressBar: {
+    width: W_MAX,
+    height: PROGRESS_BAR_HEIGHT,
+    bottom: H_M1,
+    left: W_M1,
+    backgroundStyles: {
+      backgroundColor: Colors.backgroundGray,
+      borderRadius: { _unit: "px", value: 10 }
+    },
+    progressStyles: {
+      backgroundColor: Colors.primary,
+      borderRadius: { _unit: "px", value: 10 }
+    },
+    text: {
+      textType: "page-progress",
+      style: { fontSize: { _unit: "px", value: 20 }, x: 81.5, y: 2.5 }
+    }
+  },
+  videoPlayer: {
+    playButton: {
+      text: { text: "Spill av", css: { ...playPauseText } },
+      iconUrl: THEME_2_ICONS.videoPlay.dataUrl,
+      ...playPauseBase
+    },
+    pauseButton: {
+      text: { text: "Pause", css: { ...playPauseText } },
+      iconUrl: THEME_2_ICONS.videoPause.dataUrl,
+      ...playPauseBase
+    },
+    buttonBar: {
+      width: VIDEO_CONTROLS_WIDTH,
+      zIndex: LAYER_4,
+      top: VIDEO_CONTROLS_TOP,
+      left: VIDEO_CONTROLS_LEFT,
+      backgroundColor: Colors.white,
+      height: VIDEO_CONTROLS_HEIGHT,
+      borderRadius: { _unit: "px", value: 16 }
+    },
+    muteButton: {
+      text: { text: "Lyd av", css: { ...muteUnmuteText } },
+      iconUrl: THEME_2_ICONS.mute.dataUrl,
+      css: muteUnMuteStyles.css
+    },
+    unMuteButton: {
+      iconUrl: THEME_2_ICONS.unMute.dataUrl,
+      css: muteUnMuteStyles.css,
+      text: { text: "Lyd p\xE5", css: { ...muteUnmuteText } }
+    },
+    replayButton: {
+      css: replayButtonStyles,
+      cssDisabled: {},
+      cssEnabled: {},
+      iconUrl: THEME_2_ICONS.videoReplay.dataUrl,
+      text: { text: "Spill av p\xE5 nytt", css: replayText }
+    },
+    videoElement: {
+      css: {
+        height: MEDIA_HEIGHT,
+        top: MEDIA_TOP,
+        transform: translateX50,
+        left: 50,
+        width: 100,
+        zIndex: LAYER_2,
+        visibility: "visible"
+      }
+    }
+  },
+  image: {
+    style: {
+      height: MEDIA_HEIGHT,
+      // Center image, with dynamic width.
+      left: 50,
+      transform: translateX50,
+      top: MEDIA_TOP,
+      boxShadow: "3px 3px"
+    }
+  },
+  mainText: {
+    base: {
+      text: {
+        width: MAIN_TEXT_WIDE,
+        left: W_M1 + W_M2 + W_M3,
+        top: Q_AREA_TOP + H_M3,
+        backgroundColor: Colors.white,
+        textAlign: "left",
+        textColor: "black",
+        fontSize: { _unit: "px", value: 35 },
+        lineHeight: 1.2
       },
       audio: {
+        iconUrl: THEME_2_ICONS.audioPlay.dataUrl,
         css: {
-          h: 6,
-          w: 6,
-          x: 4,
-          y: 32,
+          height: AUDIO_ICON_HEIGHT,
+          width: AUDIO_ICON_WIDTH,
+          top: Q_AREA_TOP + H_M3,
+          left: W_M1 + W_M2 + W_M3,
           cursor: "pointer",
+          // transform: "translateY(100%)",
           opacity: 0.8,
           visibility: "visible"
+          // backgroundColor: "green",
         },
         cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
         cssEnabled: { opacity: 0.8, cursor: "pointer" }
       }
-    }
+    },
+    notMediaHasAudio: {
+      text: { width: MAIN_TEXT_NARROW, left: W_M1 + W_M2 + W_M3 + AUDIO_ICON_WIDTH + W_M3 },
+      audio: {}
+    },
+    hasMediaHasAudio: {
+      text: {
+        width: MAIN_TEXT_NARROW,
+        left: W_M1 + W_M2 + W_M3 + AUDIO_ICON_WIDTH + W_M3
+      },
+      audio: {}
+    },
+    notMediaNotAudio: { text: {} },
+    hasMediaNotAudio: { text: {} }
   },
-  nextButtonTheme: BuilderOptionTheme.blueButton(),
-  responseButtons: BuilderOptionTheme.blueButton()
+  buttonBar: {
+    vibrateMs: 60,
+    container: {
+      base: {
+        display: "flex",
+        justifyContent: "space-evenly",
+        width: BUTTON_BAR_WIDTH,
+        bottom: Q_AREA_BOTTOM + H_M3,
+        left: Q_AREA_LEFT + W_M3,
+        // backgroundColor: "green",
+        gap: { _unit: "px", value: 20 },
+        alignItems: "center"
+      },
+      whenSingle: { justifyContent: "space-evenly" },
+      whenMany: { justifyContent: "flex-start" }
+    },
+    nextButtonTheme: primaryButton({}),
+    responseButtons: primaryButton({})
+  }
 };
 
 // src/theme/default-theme-compiler.ts
-var import_engine2 = require("@media-quest/engine");
-var DefaultThemeCompiler = class extends AbstractThemeCompiler {
+var DefaultThemeCompiler = class {
   name = "Ispe default theme.";
+  defaultTheme = DefaultTheme;
+  theme2 = Theme2;
+  currentTheme = Theme2;
+  allThemes = [DefaultTheme, Theme2];
   TAG = "[ DEFAULT_THEME_COMPILER ]: ";
+  setTheme(theme) {
+    this.currentTheme = theme;
+  }
   constructor() {
-    super(DefaultTheme);
   }
   compileRules(source) {
     const builderSchema = BuilderSchema.fromJson(source);
@@ -1652,13 +2024,36 @@ var DefaultThemeCompiler = class extends AbstractThemeCompiler {
     return pageQueRules;
   }
   compile(source) {
-    const pages = source.pages.map((p) => this.compilePage(p, source.prefix));
+    const t = this.currentTheme;
+    const themeName = t.name;
+    const schema = source.name;
+    const tag = schema + "-" + themeName + " compile";
+    const TAG = tag.toUpperCase();
+    const numberOfPages = source.pages.length;
+    const pages = source.pages.map((p, index) => {
+      return this.compilePage(p, index, numberOfPages, source.prefix);
+    });
+    let baseHeight = source.baseHeight;
+    let baseWidth = source.baseWidth;
+    let backgroundColor = source.backgroundColor;
+    if (t.dimensions.baseHeight) {
+      baseHeight = t.dimensions.baseHeight;
+    }
+    if (t.dimensions.baseWidth) {
+      baseWidth = t.dimensions.baseWidth;
+    }
+    if (t.dimensions.baseWidth) {
+      baseWidth = t.dimensions.baseWidth;
+    }
+    if (t.schemaBackgroundColor) {
+      backgroundColor = t.schemaBackgroundColor;
+    }
     const rules = this.compileRules(source);
     const dto = {
-      backgroundColor: source.backgroundColor,
-      baseHeight: source.baseHeight,
-      baseWidth: source.baseWidth,
       id: source.id,
+      backgroundColor,
+      baseHeight,
+      baseWidth,
       pageSequences: [],
       pages,
       predefinedFacts: [],
@@ -1666,56 +2061,109 @@ var DefaultThemeCompiler = class extends AbstractThemeCompiler {
     };
     return dto;
   }
-  compilePage(page, modulePrefix) {
+  compilePage(page, pageIndex, totalNumberOfPages, modulePrefix) {
+    const pageNumber = pageIndex + 1;
     const tags = page.tags ?? [];
     const { nextButton, mainText, id, mainMedia, _type, prefix } = page;
-    const staticElements = [];
+    const t = this.currentTheme;
+    const hasMainMedia = !!mainMedia;
+    const hasMainTextAudio = !!mainText.audioFile;
+    const elements = [];
     let initialAudioTasks = [];
     let initialVideoTaskList = [];
     const newPage = {
       background: "white",
-      components: [],
-      staticElements,
+      elements,
       id,
       prefix,
       initialTasks: [],
       tags: [...tags]
     };
+    const bg = t.pageBackGround;
+    if (bg) {
+      const pageBackGround = {
+        style: bg.style,
+        _tag: "div",
+        children: []
+      };
+      elements.push(pageBackGround);
+    }
+    const bgArea1 = t.backGroundArea1;
+    if (bgArea1) {
+      const backgroundArea1 = {
+        style: bgArea1.style,
+        _tag: "div",
+        children: []
+      };
+      elements.push(backgroundArea1);
+    }
+    if (t.progressBar) {
+      const progressInPercent = pageNumber / totalNumberOfPages;
+      const baseStyles = {
+        bottom: t.progressBar.bottom,
+        left: t.progressBar.left,
+        height: t.progressBar.height,
+        width: t.progressBar.width
+      };
+      const progressBackGround = {
+        style: {
+          ...baseStyles,
+          ...t.progressBar.backgroundStyles
+        },
+        _tag: "div",
+        children: []
+      };
+      const currentProgress = t.progressBar.width * progressInPercent;
+      const progressIndicator = {
+        style: { ...baseStyles, ...t.progressBar.progressStyles, w: currentProgress },
+        _tag: "div",
+        children: []
+      };
+      const pText = t.progressBar.text;
+      elements.push(progressBackGround);
+      elements.push(progressIndicator);
+      if (pText) {
+        const progressText = {
+          _tag: "p",
+          innerText: "side " + pageNumber + " av " + totalNumberOfPages,
+          style: pText.style
+        };
+        elements.push(progressText);
+      }
+    }
     if (page.mainText.audioFile) {
       const autoPlay = page.mainText.autoplay;
       const autoPlayDelay = page.mainText.autoplayDelay;
-      const res = this.compileMainTextAudio(page.mainText.audioFile, autoPlay, autoPlayDelay);
+      const res = this.compileMainTextAudio(
+        page.mainText.audioFile,
+        autoPlay,
+        autoPlayDelay,
+        hasMainMedia
+      );
       initialAudioTasks = [...res.initialTasks];
-      newPage.components.push(...res.components);
+      newPage.elements.push(...res.components);
     }
     if (_type === "question") {
       const variableId = modulePrefix + "_" + page.prefix;
-      const { components, question } = this.compileQuestion(id, page, variableId);
-      newPage.components.push(...components);
-      newPage.staticElements.push(question);
+      const qRes = this.compileQuestion(id, page, variableId, hasMainMedia);
+      newPage.elements.push(qRes.buttonBar, qRes.question);
     }
     if (_type === "info-page") {
       const infoText = mainText.text;
-      const nextButtonComponent = this.compileButton(nextButton, {
-        kind: "next-button"
-      });
-      const textStyle = mainMedia ? DefaultTheme.mainText.withMedia.text.css : DefaultTheme.mainText.noMedia.text.css;
-      const infoTextElement = {
-        innerText: infoText,
-        _tag: "p",
-        style: textStyle
-      };
-      newPage.staticElements.push(infoTextElement);
-      newPage.components.push(nextButtonComponent);
+      const nextButtonBar = this.compileButtonBar([
+        this.compileButton(nextButton, { kind: "next-button" })
+      ]);
+      const infoTextElement = this.compileMainText(infoText, hasMainTextAudio, hasMainMedia);
+      newPage.elements.push(infoTextElement, nextButtonBar);
     }
     if (mainMedia && mainMedia.kind === "main-image") {
       const mainImageElement = this.compileImage(mainMedia);
-      newPage.staticElements.push(mainImageElement);
+      newPage.elements.push(mainImageElement);
     }
     if (mainMedia && mainMedia.kind === "main-video") {
       const videoOutput = this.compileVideo(mainMedia);
       newPage.videoPlayer = videoOutput.videoPlayer;
-      newPage.components.push(...videoOutput.components);
+      newPage.elements.push(...videoOutput.components);
       initialVideoTaskList = [...videoOutput.autoPlayTasks];
     }
     newPage.initialTasks.push(...initialVideoTaskList);
@@ -1726,20 +2174,36 @@ var DefaultThemeCompiler = class extends AbstractThemeCompiler {
   compileImage(image) {
     const img = {
       _tag: "img",
-      style: this.theme.image.style,
+      style: this.currentTheme.image.style,
       url: image.file.downloadUrl
     };
     return img;
   }
-  compileMainTextAudio(audioFile, autoPlay, autoPlayDelay) {
-    const t = this.theme.mainText;
-    const audioId = audioFile.id;
-    const iconUrl = "https://firebasestorage.googleapis.com/v0/b/ispe-backend-dev.appspot.com/o/public-assets%2Fvolume_up-24px.svg?alt=media&token=551bd0a6-a515-4f87-a245-da433f4833f9";
-    const playMainTextAudio = {
-      _tag: "img",
-      url: iconUrl,
-      style: { ...t.withMedia.audio.css }
+  compileMainText(text, hasAudio, hasMainMedia) {
+    const t = this.currentTheme;
+    const { base, hasMediaNotAudio, notMediaHasAudio, notMediaNotAudio, hasMediaHasAudio } = t.mainText;
+    let style = base.text;
+    if (hasMainMedia && hasAudio)
+      style = { ...style, ...hasMediaHasAudio.text };
+    if (!hasMainMedia && hasAudio)
+      style = { ...style, ...notMediaHasAudio.text };
+    if (hasMainMedia && !hasAudio)
+      style = { ...style, ...hasMediaNotAudio.text };
+    if (!hasMainMedia && !hasAudio)
+      style = { ...style, ...notMediaNotAudio.text };
+    return {
+      _tag: "p",
+      innerText: text,
+      style
     };
+  }
+  compileMainTextAudio(audioFile, autoPlay, autoPlayDelay, hasMainMedia) {
+    const t = this.currentTheme.mainText;
+    const audioId = audioFile.id;
+    const iconUrl = this.currentTheme.mainText.base.audio.iconUrl;
+    const baseIconStyles = t.base.audio;
+    const addedStyles = hasMainMedia ? t.hasMediaHasAudio.audio : t.notMediaHasAudio.audio;
+    const audioIconStyle = { ...baseIconStyles.css, ...addedStyles };
     const task = {
       audioId,
       blockAudio: false,
@@ -1750,6 +2214,12 @@ var DefaultThemeCompiler = class extends AbstractThemeCompiler {
       priority: "replace-all",
       url: audioFile.downloadUrl
     };
+    const playMainTextAudio = {
+      _tag: "img",
+      url: iconUrl,
+      style: { ...audioIconStyle },
+      onClick: { kind: "play-audio", task }
+    };
     let initialAudioTasks = [];
     if (autoPlay) {
       const playAudioTask = { ...task, priority: "follow-queue" };
@@ -1767,19 +2237,58 @@ var DefaultThemeCompiler = class extends AbstractThemeCompiler {
         initialAudioTasks = [delayTask, playAudioTask];
       }
     }
-    const playBtn = {
-      el: playMainTextAudio,
-      onClick: { kind: "play-audio", task }
-    };
-    return { components: [playBtn], initialTasks: [...initialAudioTasks] };
+    return { components: [playMainTextAudio], initialTasks: [...initialAudioTasks] };
   }
   compileVideo(video) {
-    const t = this.theme.videoPlayer;
+    const t = this.currentTheme.videoPlayer;
+    const hasReplayButton = !!t.replayButton;
     const mode = video.mode;
-    const components = [];
     let autoPlayTasks = [];
     let autoplayVideoTask = false;
     let autoplayDelayTask = false;
+    let buttonBar = false;
+    let playButton = false;
+    let playButtonText = false;
+    let replayButton = false;
+    let replayButtonText = false;
+    let pauseButton = false;
+    let pauseButtonText = false;
+    let unmuteButton = false;
+    let unmuteButtonText = false;
+    let muteButton = false;
+    let muteButtonText = false;
+    const showWhenEnded = {
+      whenVideoEnded: { visibility: "visible" },
+      whenVideoEndedAndMuted: { visibility: "visible" },
+      whenVideoPlaying: { visibility: "hidden" },
+      whenVideoPlayingAndMuted: { visibility: "hidden" },
+      whenVideoPaused: { visibility: "hidden" },
+      whenVideoPausedAndMuted: { visibility: "hidden" }
+    };
+    const showWhenPlayingOrPaused = {
+      whenVideoEnded: { visibility: "visible" },
+      whenVideoEndedAndMuted: { visibility: "visible" },
+      whenVideoPlaying: { visibility: "visible" },
+      whenVideoPlayingAndMuted: { visibility: "visible" },
+      whenVideoPaused: { visibility: "hidden" },
+      whenVideoPausedAndMuted: { visibility: "hidden" }
+    };
+    const showWhenPlaying = {
+      whenVideoEnded: { visibility: "hidden" },
+      whenVideoEndedAndMuted: { visibility: "hidden" },
+      whenVideoPlaying: { visibility: "visible" },
+      whenVideoPlayingAndMuted: { visibility: "visible" },
+      whenVideoPaused: { visibility: "hidden" },
+      whenVideoPausedAndMuted: { visibility: "hidden" }
+    };
+    const showWhenPaused = {
+      whenVideoEnded: { visibility: "hidden" },
+      whenVideoEndedAndMuted: { visibility: "hidden" },
+      whenVideoPlaying: { visibility: "hidden" },
+      whenVideoPlayingAndMuted: { visibility: "hidden" },
+      whenVideoPaused: { visibility: "visible" },
+      whenVideoPausedAndMuted: { visibility: "visible" }
+    };
     const playButtonTask = {
       kind: "play-video-task",
       url: video.file.downloadUrl,
@@ -1809,47 +2318,148 @@ var DefaultThemeCompiler = class extends AbstractThemeCompiler {
     }
     const videoPlayer = {
       playUrl: video.file.downloadUrl,
-      style: { h: 45, w: 100, x: 0, y: 55 }
+      style: t.videoElement.css
+      // style: { h: 45, w: 100, x: 0, y: 55 },
     };
-    const playButton = {
-      el: {
-        _tag: "img",
-        url: t.playButton.iconUrl,
-        style: { ...t.playButton.css, ...t.playButton.cssEnabled }
+    if (t.buttonBar) {
+      buttonBar = {
+        _tag: "div",
+        style: { ...t.buttonBar },
+        children: []
+      };
+    }
+    playButton = {
+      ...showWhenPaused,
+      _tag: "img",
+      url: t.playButton.iconUrl,
+      style: { ...t.playButton.css, ...t.playButton.cssEnabled },
+      // },
+      onClick: { kind: "play-video", task: playButtonTask }
+    };
+    if (t.playButton.text) {
+      playButtonText = {
+        ...showWhenPaused,
+        _tag: "p",
+        style: t.playButton.text.css,
+        innerText: t.playButton.text.text
+      };
+    }
+    pauseButton = {
+      ...showWhenPlaying,
+      _tag: "img",
+      style: {
+        ...t.pauseButton.css,
+        visibility: "hidden",
+        ...t.pauseButton.cssEnabled
       },
-      onClick: { kind: "play-video", task: playButtonTask },
-      whenVideoPlay: { visibility: "hidden" },
-      whenVideoPaused: { visibility: "visible" }
+      url: t.pauseButton.iconUrl,
+      onClick: { kind: "pause-video" }
     };
-    const pauseBtn = {
-      el: {
+    if (t.pauseButton.text) {
+      pauseButtonText = {
+        ...showWhenPlaying,
+        _tag: "p",
+        style: t.pauseButton.text.css,
+        innerText: t.pauseButton.text.text
+      };
+    }
+    if (t.unMuteButton) {
+      unmuteButton = {
         _tag: "img",
-        style: {
-          ...t.pauseButton.css,
-          visibility: "hidden",
-          ...t.pauseButton.cssEnabled
-        },
-        url: t.pauseButton.iconUrl
-      },
-      onClick: { kind: "pause-video" },
-      whenVideoPlay: { visibility: "visible" },
-      whenVideoPaused: { visibility: "hidden" }
+        style: { ...t.unMuteButton.css },
+        url: t.unMuteButton.iconUrl,
+        onClick: { kind: "un-mute-video" },
+        whenVideoPausedAndMuted: { visibility: "visible" },
+        whenVideoPaused: { visibility: "hidden" },
+        whenVideoPlayingAndMuted: { visibility: "visible" },
+        whenVideoPlaying: { visibility: "hidden" },
+        whenVideoEnded: { visibility: "hidden" },
+        whenVideoEndedAndMuted: { visibility: "hidden" }
+      };
+      if (t.unMuteButton.text) {
+        unmuteButtonText = {
+          _tag: "p",
+          style: t.unMuteButton.text.css,
+          innerText: t.unMuteButton.text.text,
+          whenVideoPausedAndMuted: { visibility: "visible" },
+          whenVideoPaused: { visibility: "hidden" },
+          whenVideoPlayingAndMuted: { visibility: "visible" },
+          whenVideoPlaying: { visibility: "hidden" },
+          whenVideoEnded: { visibility: "hidden" },
+          whenVideoEndedAndMuted: { visibility: "hidden" }
+        };
+      }
+    }
+    if (t.muteButton) {
+      muteButton = {
+        _tag: "img",
+        style: { ...t.muteButton.css },
+        url: t.muteButton.iconUrl,
+        onClick: { kind: "mute-video" },
+        whenVideoPausedAndMuted: { visibility: "hidden" },
+        whenVideoPaused: { visibility: "visible" },
+        whenVideoPlayingAndMuted: { visibility: "hidden" },
+        whenVideoPlaying: { visibility: "visible" },
+        whenVideoEnded: { visibility: "hidden" },
+        whenVideoEndedAndMuted: { visibility: "hidden" }
+      };
+      if (t.muteButton.text) {
+        muteButtonText = {
+          _tag: "p",
+          style: t.muteButton.text.css,
+          innerText: t.muteButton.text.text,
+          whenVideoPausedAndMuted: { visibility: "hidden" },
+          whenVideoPaused: { visibility: "visible" },
+          whenVideoPlayingAndMuted: { visibility: "hidden" },
+          whenVideoPlaying: { visibility: "visible" },
+          whenVideoEnded: { visibility: "hidden" },
+          whenVideoEndedAndMuted: { visibility: "hidden" }
+        };
+      }
+    }
+    if (t.replayButton) {
+      replayButton = {
+        ...showWhenEnded,
+        _tag: "img",
+        style: { ...t.replayButton.css },
+        url: t.replayButton.iconUrl,
+        onClick: { kind: "play-video", task: playButtonTask }
+      };
+      if (t.replayButton.text) {
+        replayButtonText = {
+          ...showWhenEnded,
+          _tag: "p",
+          style: t.replayButton.text.css,
+          innerText: t.replayButton.text.text
+        };
+      }
+    }
+    const componentsSet = /* @__PURE__ */ new Set();
+    const addComponent = (maybeComponent) => {
+      if (maybeComponent) {
+        componentsSet.add(maybeComponent);
+      }
     };
     if (mode !== "gif-mode") {
-      components.push(playButton);
-      components.push(pauseBtn);
-    }
-    return { videoPlayer, components, autoPlayTasks: [...autoPlayTasks] };
-  }
-  compileQuestion(pageId, page, variableId) {
+      addComponent(buttonBar);
+      addComponent(unmuteButton);
+      addComponent(unmuteButtonText);
+      addComponent(muteButton);
+      addComponent(muteButtonText);
+      addComponent(playButton);
+      addComponent(playButtonText);
+      addComponent(pauseButton);
+      addComponent(pauseButtonText);
+      addComponent(replayButton);
+      addComponent(replayButtonText);
+    }
+    return { videoPlayer, components: [...componentsSet], autoPlayTasks: [...autoPlayTasks] };
+  }
+  compileQuestion(pageId, page, variableId, hasMainMedia) {
+    const t = this.currentTheme;
     const q = page.defaultQuestion;
     const text = page.mainText.text;
-    const questionStyle = page.mainMedia ? DefaultTheme.mainText.withMedia.text.css : DefaultTheme.mainText.noMedia.text.css;
-    const question = {
-      _tag: "p",
-      innerText: text,
-      style: questionStyle
-    };
+    const questionElement = this.compileMainText(text, !!page.mainText.audioFile, hasMainMedia);
     const buttons = q.options.map((o) => {
       const btns = this.compileButton(o, {
         kind: "response-button",
@@ -1858,12 +2468,26 @@ var DefaultThemeCompiler = class extends AbstractThemeCompiler {
       });
       return btns;
     });
-    const rootElements = buttons.map((b) => b.el);
-    ThemeUtils.spaceEvenlyX(rootElements);
-    return { question, components: buttons };
+    const buttonBar = this.compileButtonBar(buttons);
+    return {
+      question: questionElement,
+      buttonBar
+    };
+  }
+  compileButtonBar(buttons) {
+    const t = this.currentTheme;
+    const isSingle = buttons.length < 2;
+    const style = isSingle ? { ...t.buttonBar.container.base, ...t.buttonBar.container.whenSingle } : { ...t.buttonBar.container.base, ...t.buttonBar.container.whenMany };
+    const buttonBar = {
+      _tag: "div",
+      children: [...buttons],
+      style
+    };
+    return buttonBar;
   }
   compileButton(buttonDto, options) {
     const { id, value, label } = buttonDto;
+    const t = this.currentTheme;
     const onclickAction = options.kind === "response-button" ? {
       kind: "submit-fact",
       fact: {
@@ -1874,28 +2498,17 @@ var DefaultThemeCompiler = class extends AbstractThemeCompiler {
         referenceLabel: options.questionText
       }
     } : { kind: "next-page" };
-    const btnStyles = value === 9 ? DefaultTheme.responseButtons.dontKnow : DefaultTheme.responseButtons.normal;
-    const btn = {
-      _tag: "div",
-      children: [
-        {
-          _tag: "p",
-          innerText: label,
-          style: btnStyles.text1
-        }
-      ],
-      style: { ...btnStyles.btn.css, ...btnStyles.btn.cssEnabled }
-    };
-    if (options.kind === "next-button") {
-      btn.style.x = 50;
-      btn.style.y = 8;
-      btn.style.transform = "translate(-50%, 0%)";
+    const btnStyles = value === 9 ? t.buttonBar.responseButtons.dontKnow : t.buttonBar.responseButtons.normal;
+    if (t.buttonBar.vibrateMs) {
+      onclickAction.vibrateMs = t.buttonBar.vibrateMs;
     }
-    const component = {
-      el: btn,
+    const btn = {
+      _tag: "button",
+      innerText: label,
+      style: { ...btnStyles.btn.css, ...btnStyles.btn.cssEnabled },
       onClick: onclickAction
     };
-    return component;
+    return btn;
   }
 };
 
@@ -2331,6 +2944,7 @@ var BuilderSchema = class _BuilderSchema {
     this._pageCollection = BuilderPageCollection.create([]);
   }
   prefix;
+  compiler = new DefaultThemeCompiler();
   baseHeight = 1300;
   baseWidth = 1024;
   backgroundColor = "#000000";
@@ -2526,9 +3140,8 @@ var BuilderSchema = class _BuilderSchema {
       }
     });
     const moduleDto = builderSchema.toJson();
-    const imp = new DefaultThemeCompiler();
     const codebook = CodeBook.fromSchema(moduleDto);
-    const schema = imp.compile(moduleDto);
+    const schema = this.compiler.compile(moduleDto);
     const schemaConfig = SchemaConfig.fromSchema(moduleDto);
     const output = { codebook, schema, schemaConfig };
     return output;
@@ -2716,6 +3329,7 @@ var SumScore = {
   BuilderTag,
   BuilderText,
   CodeBook,
+  DefaultTheme,
   ExcludeByPageIdSelectItem,
   ExcludeByTagSelectItem,
   JumpToActionManager,