@media-quest/builder 0.0.30 → 0.0.32

package/src/theme/default-theme-compiler.ts

@@ -1,37 +1,46 @@
-import { AbstractThemeCompiler } from "./AbstractThemeCompiler";
+import { ThemeCompiler } from "./ThemeCompiler";
 import type { BuilderSchemaDto } from "../Builder-schema";
 import { BuilderSchema } from "../Builder-schema";
 import type { BuilderPageDto } from "../page/Builder-page";
-import { ThemeUtils } from "./theme-utils";
-import { DefaultTheme, type IDefaultTheme } from "./IDefaultTheme";
+import { DefaultTheme } from "./Default-theme";
 import type { BuilderMainImageDto } from "../BuilderMainImageDto";
 import type { BuilderMainVideoDto } from "../BuilderMainVideoDto";
 import {
   ButtonClickAction,
+  DButtonDto,
   DDivDto,
+  DelayTask,
   DElementDto,
   DImgDto,
   DTextDto,
   PageDto,
-  PageComponentDto,
-  RuleActionPageQue,
   PlayAudioTask,
   PlayVideoTask,
+  PStyle,
   Rule,
+  RuleActionPageQue,
   SchemaDto,
-  DelayTask,
 } from "@media-quest/engine";
 
 import { AudioFile } from "../media-files";
 import { BuilderRule } from "../rulebuilder";
+import { IDefaultTheme } from "./IDefault-theme";
+import { Theme2 } from "./theme2";
 
-export class DefaultThemeCompiler extends AbstractThemeCompiler<IDefaultTheme> {
+export class DefaultThemeCompiler implements ThemeCompiler<IDefaultTheme> {
   readonly name = "Ispe default theme.";
+  readonly defaultTheme = DefaultTheme;
+  readonly theme2 = Theme2;
+  currentTheme = Theme2;
+  allThemes = [DefaultTheme, Theme2];
   private readonly TAG = "[ DEFAULT_THEME_COMPILER ]: ";
-  constructor() {
-    super(DefaultTheme);
+
+  setTheme(theme: IDefaultTheme) {
+    this.currentTheme = theme;
   }
 
+  constructor() {}
+
   private compileRules(source: BuilderSchemaDto): Rule<RuleActionPageQue, never>[] {
     const builderSchema = BuilderSchema.fromJson(source);
     const ruleInput = builderSchema.getRuleInput();
@@ -48,119 +57,230 @@ export class DefaultThemeCompiler extends AbstractThemeCompiler<IDefaultTheme> {
   }
 
   compile(source: BuilderSchemaDto): SchemaDto {
-    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();
+    // console.group(TAG);
+    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: SchemaDto = {
-      backgroundColor: source.backgroundColor,
-      baseHeight: source.baseHeight,
-      baseWidth: source.baseWidth,
       id: source.id,
+      backgroundColor,
+      baseHeight,
+      baseWidth,
       pageSequences: [],
       pages,
       predefinedFacts: [],
       rules,
     };
+    // console.groupEnd();
     return dto;
   }
 
-  private compilePage(page: BuilderPageDto, modulePrefix: string): PageDto {
+  private compilePage(
+    page: BuilderPageDto,
+    pageIndex: number,
+    totalNumberOfPages: number,
+    modulePrefix: string,
+  ): PageDto {
+    const pageNumber = pageIndex + 1;
     const tags = page.tags ?? [];
     const { nextButton, mainText, id, mainMedia, _type, prefix } = page;
-    const staticElements: DElementDto[] = [];
+    const t = this.currentTheme;
+    const hasMainMedia = !!mainMedia;
+    const hasMainTextAudio = !!mainText.audioFile;
+
+    const elements: DElementDto[] = [];
     let initialAudioTasks: Array<PlayAudioTask | DelayTask> = [];
     let initialVideoTaskList: Array<PlayVideoTask | DelayTask> = [];
     const newPage: PageDto = {
       background: "white",
-      components: [],
-      staticElements,
+      elements,
       id,
       prefix,
       initialTasks: [],
       tags: [...tags],
     };
+    const bg = t.pageBackGround;
+    if (bg) {
+      const pageBackGround: DDivDto = {
+        style: bg.style,
+        _tag: "div",
+        children: [],
+      };
+      elements.push(pageBackGround);
+    }
+
+    const bgArea1 = t.backGroundArea1;
+
+    if (bgArea1) {
+      const backgroundArea1: DDivDto = {
+        style: bgArea1.style,
+        _tag: "div",
+        children: [],
+      };
+      elements.push(backgroundArea1);
+    }
+
+    if (t.progressBar) {
+      // console.log("ADDED PROGRESS.");
+      const progressInPercent = pageNumber / totalNumberOfPages;
+      // const a =
+      const baseStyles: PStyle = {
+        bottom: t.progressBar.bottom,
+        left: t.progressBar.left,
+        height: t.progressBar.height,
+        width: t.progressBar.width,
+      };
+      const progressBackGround: DDivDto = {
+        style: {
+          ...baseStyles,
+          ...t.progressBar.backgroundStyles,
+        },
+        _tag: "div",
+        children: [],
+      };
+
+      const currentProgress = t.progressBar.width * progressInPercent;
+      const progressIndicator: DDivDto = {
+        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: DTextDto = {
+          _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,
+      );
+      // console.log(page.mainText.text);
       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);
+
+      // newPage.elements.push(question);
       // console.log(question);
       // elements.push(...buttons, question);
     }
 
     if (_type === "info-page") {
       const infoText = mainText.text;
-      const nextButtonComponent = this.compileButton(nextButton, {
-        kind: "next-button",
-      });
+      const nextButtonBar = this.compileButtonBar([
+        this.compileButton(nextButton, { kind: "next-button" }),
+      ]);
+      const infoTextElement = this.compileMainText(infoText, hasMainTextAudio, hasMainMedia);
 
-      const textStyle = mainMedia
-        ? DefaultTheme.mainText.withMedia.text.css
-        : DefaultTheme.mainText.noMedia.text.css;
-      const infoTextElement: DElementDto = {
-        innerText: infoText,
-        _tag: "p",
-        style: textStyle,
-      };
-      newPage.staticElements.push(infoTextElement);
-      newPage.components.push(nextButtonComponent);
+      // const textBase =
+      newPage.elements.push(infoTextElement, nextButtonBar);
+      // newPage.components.push(nextButtonComponent);
     }
     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?.playUrl
       newPage.videoPlayer = videoOutput.videoPlayer;
-      newPage.components.push(...videoOutput.components);
+      newPage.elements.push(...videoOutput.components);
       initialVideoTaskList = [...videoOutput.autoPlayTasks];
     }
 
     // ADDING INITIAL TASKS IN CORRECT ORDER
     newPage.initialTasks.push(...initialVideoTaskList);
     newPage.initialTasks.push(...initialAudioTasks);
-    const clone = JSON.parse(JSON.stringify(newPage));
+    const clone = JSON.parse(JSON.stringify(newPage)) as PageDto;
     return clone;
   }
 
   private compileImage(image: BuilderMainImageDto) {
     const img: DImgDto = {
       _tag: "img",
-      style: this.theme.image.style,
+      style: this.currentTheme.image.style,
       url: image.file.downloadUrl,
     };
     return img;
   }
 
+  private compileMainText(text: string, hasAudio: boolean, hasMainMedia: boolean): DTextDto {
+    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 };
+    // console.log(style.textColor);
+    return {
+      _tag: "p",
+      innerText: text,
+      style,
+    };
+  }
+
   private compileMainTextAudio(
     audioFile: AudioFile,
     autoPlay: boolean,
     autoPlayDelay: number,
+    hasMainMedia: boolean,
   ): {
-    components: PageComponentDto[];
+    components: DElementDto[];
     initialTasks: Array<PlayAudioTask | DelayTask>;
   } {
-    const t = this.theme.mainText;
+    const t = this.currentTheme.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: DImgDto = {
-      _tag: "img",
-      url: iconUrl,
-      style: { ...t.withMedia.audio.css },
-    };
+    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: PlayAudioTask = {
       audioId,
       blockAudio: false,
@@ -172,6 +292,13 @@ export class DefaultThemeCompiler extends AbstractThemeCompiler<IDefaultTheme> {
       url: audioFile.downloadUrl,
     };
 
+    const playMainTextAudio: DImgDto = {
+      _tag: "img",
+      url: iconUrl,
+      style: { ...audioIconStyle },
+      onClick: { kind: "play-audio", task },
+    };
+
     let initialAudioTasks: Array<PlayAudioTask | DelayTask> = [];
     if (autoPlay) {
       const playAudioTask: PlayAudioTask = { ...task, priority: "follow-queue" };
@@ -190,28 +317,74 @@ export class DefaultThemeCompiler extends AbstractThemeCompiler<IDefaultTheme> {
       }
     }
     // const autoplayTask =
-    const playBtn: PageComponentDto = {
-      el: playMainTextAudio,
-      onClick: { kind: "play-audio", task },
-    };
 
-    return { components: [playBtn], initialTasks: [...initialAudioTasks] };
+    return { components: [playMainTextAudio], initialTasks: [...initialAudioTasks] };
   }
 
   private compileVideo(video: BuilderMainVideoDto): {
     videoPlayer: PageDto["videoPlayer"];
-    components: PageComponentDto[];
+    components: DElementDto[];
     autoPlayTasks: Array<PlayVideoTask | DelayTask>;
   } {
-    const t = this.theme.videoPlayer;
+    const t = this.currentTheme.videoPlayer;
+    const hasReplayButton = !!t.replayButton;
+
     const mode = video.mode;
-    const components: PageComponentDto[] = [];
+    // const components: DElementDto[] = [];
 
     let autoPlayTasks: Array<PlayVideoTask | DelayTask> = [];
 
     let autoplayVideoTask: PlayVideoTask | false = false;
     let autoplayDelayTask: DelayTask | false = false;
 
+    let buttonBar: DDivDto | false = false;
+    let playButton: DImgDto | false = false;
+    let playButtonText: DTextDto | false = false;
+    let replayButton: DImgDto | false = false;
+    let replayButtonText: DTextDto | false = false;
+    let pauseButton: DImgDto | false = false;
+    let pauseButtonText: DTextDto | false = false;
+    let unmuteButton: DImgDto | false = false;
+    let unmuteButtonText: DTextDto | false = false;
+    let muteButton: DImgDto | false = false;
+    let muteButtonText: DTextDto | false = false;
+
+    const showWhenEnded: Partial<DElementDto> = {
+      whenVideoEnded: { visibility: "visible" },
+      whenVideoEndedAndMuted: { visibility: "visible" },
+      whenVideoPlaying: { visibility: "hidden" },
+      whenVideoPlayingAndMuted: { visibility: "hidden" },
+      whenVideoPaused: { visibility: "hidden" },
+      whenVideoPausedAndMuted: { visibility: "hidden" },
+    };
+
+    const showWhenPlayingOrPaused: Partial<DElementDto> = {
+      whenVideoEnded: { visibility: "visible" },
+      whenVideoEndedAndMuted: { visibility: "visible" },
+      whenVideoPlaying: { visibility: "visible" },
+      whenVideoPlayingAndMuted: { visibility: "visible" },
+      whenVideoPaused: { visibility: "hidden" },
+      whenVideoPausedAndMuted: { visibility: "hidden" },
+    };
+
+    const showWhenPlaying: Partial<DElementDto> = {
+      whenVideoEnded: { visibility: "hidden" },
+      whenVideoEndedAndMuted: { visibility: "hidden" },
+      whenVideoPlaying: { visibility: "visible" },
+      whenVideoPlayingAndMuted: { visibility: "visible" },
+      whenVideoPaused: { visibility: "hidden" },
+      whenVideoPausedAndMuted: { visibility: "hidden" },
+    };
+
+    const showWhenPaused: Partial<DElementDto> = {
+      whenVideoEnded: { visibility: "hidden" },
+      whenVideoEndedAndMuted: { visibility: "hidden" },
+      whenVideoPlaying: { visibility: "hidden" },
+      whenVideoPlayingAndMuted: { visibility: "hidden" },
+      whenVideoPaused: { visibility: "visible" },
+      whenVideoPausedAndMuted: { visibility: "visible" },
+    };
+
     const playButtonTask: PlayVideoTask = {
       kind: "play-video-task",
       url: video.file.downloadUrl,
@@ -243,60 +416,173 @@ export class DefaultThemeCompiler extends AbstractThemeCompiler<IDefaultTheme> {
 
     const videoPlayer: PageDto["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: PageComponentDto = {
-      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 },
-      whenVideoPlay: { visibility: "hidden" },
-      whenVideoPaused: { visibility: "visible" },
     };
-    const pauseBtn: PageComponentDto = {
-      el: {
-        _tag: "img",
-        style: {
-          ...t.pauseButton.css,
-          visibility: "hidden",
-          ...t.pauseButton.cssEnabled,
-        },
-        url: t.pauseButton.iconUrl,
+    if (t.playButton.text) {
+      playButtonText = {
+        ...showWhenPaused,
+        _tag: "p",
+        style: t.playButton.text.css,
+        innerText: t.playButton.text.text,
+      };
+      // components.push({
+      //
+      // });
+    }
+
+    pauseButton = {
+      ...showWhenPlaying,
+      _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" },
+    };
+
+    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.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 = new Set<DElementDto>();
+    const addComponent = (maybeComponent: DElementDto | false) => {
+      if (maybeComponent) {
+        componentsSet.add(maybeComponent);
+      }
     };
 
     if (mode !== "gif-mode") {
-      components.push(playButton);
-      components.push(pauseBtn);
+      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, autoPlayTasks: [...autoPlayTasks] };
+    // components = []
+    return { videoPlayer, components: [...componentsSet], autoPlayTasks: [...autoPlayTasks] };
   }
   private compileQuestion(
     pageId: string,
     page: BuilderPageDto,
     variableId: string,
+    hasMainMedia: boolean,
   ): {
     question: DTextDto;
-    components: PageComponentDto[];
+    buttonBar: DDivDto;
   } {
     // TODO REFACTORE DEFAULT QUESTION TO - (REMOVE USE TEXT1)
     // console.log(page);
+    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: DTextDto = {
-      _tag: "p",
-      innerText: text,
-      style: questionStyle,
-    };
-    const buttons: PageComponentDto[] = q.options.map((o) => {
+
+    const questionElement = this.compileMainText(text, !!page.mainText.audioFile, hasMainMedia);
+    // initialTasks: Array<PlayAudioTask | DelayTask>;
+    const buttons: DButtonDto[] = q.options.map((o) => {
       const btns = this.compileButton(o, {
         kind: "response-button",
         questionId: variableId,
@@ -304,18 +590,35 @@ export class DefaultThemeCompiler extends AbstractThemeCompiler<IDefaultTheme> {
       });
       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,
+    };
   }
 
+  private compileButtonBar(buttons: Array<DButtonDto>): DDivDto {
+    const t = this.currentTheme;
+    const isSingle = buttons.length < 2;
+    const style: PStyle = isSingle
+      ? { ...t.buttonBar.container.base, ...t.buttonBar.container.whenSingle }
+      : { ...t.buttonBar.container.base, ...t.buttonBar.container.whenMany };
+    // console.log(t);
+    const buttonBar: DDivDto = {
+      _tag: "div",
+      children: [...buttons],
+      style,
+    };
+    return buttonBar;
+  }
   private compileButton(
     buttonDto: BuilderPageDto["nextButton"],
     options:
       | { kind: "response-button"; questionId: string; questionText: string }
       | { kind: "next-button" },
-  ): PageComponentDto {
+  ): DButtonDto {
     const { id, value, label } = buttonDto;
+    const t = this.currentTheme;
     const onclickAction: ButtonClickAction =
       options.kind === "response-button"
         ? {
@@ -331,28 +634,18 @@ export class DefaultThemeCompiler extends AbstractThemeCompiler<IDefaultTheme> {
         : { kind: "next-page" };
 
     const btnStyles =
-      value === 9 ? DefaultTheme.responseButtons.dontKnow : DefaultTheme.responseButtons.normal;
-    const btn: DDivDto = {
-      _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%)";
+      value === 9 ? t.buttonBar.responseButtons.dontKnow : t.buttonBar.responseButtons.normal;
+    if (t.buttonBar.vibrateMs) {
+      onclickAction.vibrateMs = t.buttonBar.vibrateMs;
     }
-    const component: PageComponentDto = {
-      el: btn,
+
+    const btn: DButtonDto = {
+      _tag: "button",
+      innerText: label,
+      style: { ...btnStyles.btn.css, ...btnStyles.btn.cssEnabled },
       onClick: onclickAction,
     };
-    return component;
+
+    return btn;
   }
 }