@media-quest/builder 0.0.37 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@media-quest/builder",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "description": "Builder library for Media-quest schemas",
   "main": "dist/public-api.js",
   "types": "dist/public-api.d.js",
@@ -24,6 +24,6 @@
     "dts": true
   },
   "peerDependencies": {
-    "@media-quest/engine": "0.0.37"
+    "@media-quest/engine": "0.0.38"
   }
 }

package/src/Builder-schema-dto.ts

@@ -1,6 +1,6 @@
 import { SchemaID } from "./primitives/ID";
 import { SchemaPrefixValue } from "./primitives/schema-prefix";
-import { ImageFile } from "./media-files";
+import { AudioFile, ImageFile } from "./media-files";
 import type { BuilderPageDto } from "./page/Builder-page";
 import { CodebookPredefinedVariable } from "./code-book/codebook-variable";
 import { SumScoreVariableDto } from "./sum-score/sum-score-variable";
@@ -34,20 +34,29 @@ const blockAutoplayVideo = (dto: BuilderPageDto): BuilderPageDto => {
 };
 
 const overrideVideoUrl = (dto: BuilderPageDto, baseUrl: string): BuilderPageDto => {
-  if (dto.mainMedia && dto.mainMedia.kind === "main-video") {
-    dto.mainMedia.file.downloadUrl = [baseUrl, dto.mainMedia.file.id].join("/");
+  const mainMedia = dto.mainMedia;
+  if (mainMedia && mainMedia.kind === "main-video") {
+    const url = [baseUrl, mainMedia.file.id].join("/");
+    const file = { ...mainMedia.file, downloadUrl: url };
+    dto.mainMedia = { ...mainMedia, file };
   }
   return dto;
 };
 const overrideImageUrl = (dto: BuilderPageDto, baseUrl: string): BuilderPageDto => {
-  if (dto.mainMedia && dto.mainMedia.kind === "main-image") {
-    dto.mainMedia.file.downloadUrl = [baseUrl, dto.mainMedia.file.id].join("/");
+  const mainMedia = dto.mainMedia;
+  if (mainMedia && mainMedia.kind === "main-image") {
+    const url = [baseUrl, mainMedia.file.id].join("/");
+    const file = { ...mainMedia.file, downloadUrl: url };
+    dto.mainMedia = { ...mainMedia, file };
   }
   return dto;
 };
 const overrideAudioUrl = (dto: BuilderPageDto, baseUrl: string): BuilderPageDto => {
-  if (dto.mainText.audioFile) {
-    dto.mainText.audioFile.downloadUrl = [baseUrl, dto.mainText.audioFile.id].join("/");
+  const newAudioFile = { ...dto };
+  const audioFile = newAudioFile.mainText.audioFile;
+  if (audioFile) {
+    const url = [baseUrl, audioFile.id].join("/");
+    dto.mainText.audioFile = { ...audioFile, downloadUrl: url };
   }
   return dto;
 };

package/src/Builder-schema.ts

@@ -279,6 +279,7 @@ export class BuilderSchema {
     });
 
     let moduleDto = builderSchema.toJson();
+    console.log(options.mediaAssets);
     if (options.mediaAssets) {
       const { videoFilesBaseUrl, audioFilesBaseUrl, imageFilesBaseUrl } = options.mediaAssets;
       moduleDto = BuilderSchemaDto.overrideAllMediaUrls(moduleDto, {

package/src/theme/Default-theme.ts

@@ -19,8 +19,6 @@ namespace BuilderOptionTheme {
   const BTN_BORDER_STYLE: DStyle["borderStyle"] = "solid";
   const FONT_WEIGHT: DStyle["fontWeight"] = 500;
   const FONT_SIZE: DCss.Px["value"] = 36;
-  const MAIN_TEXT_FONT_SIZE: DCss.Px = { _unit: "px", value: 36 };
-  const MAIN_TEXT_WIDTH: DCss.Percent = { _unit: "percent", value: 80 };
 
   const BTN_PADDING_LEFT = 10;
   const BTN_PADDING_TOP = 10;
@@ -91,20 +89,25 @@ namespace BuilderOptionTheme {
   };
 }
 
-const textHighTop = 25;
-const textLowTop = 55;
-const audioHighTop = 20;
-const audioLowTop = 55;
+const MAIN_TEXT_FONT_SIZE: DCss.Px = { _unit: "px", value: 40 };
+const MAIN_TEXT_WIDTH: DCss.Percent = { _unit: "percent", value: 76 };
+const textHighTop = 30;
+const textLowTop = 72;
+const audioHighTop = 30;
+const audioLowTop = 72;
 
 const textBase: PStyle = {
-  width: 76,
+  width: MAIN_TEXT_WIDTH,
   // backgroundColor: "red",
   top: textHighTop,
-  left: 12,
-  textAlign: "center",
+  left: 14,
+  lineHeight: 1.2,
+  textAlign: "left",
   textColor: "black",
-  fontSize: { _unit: "px", value: 40 },
+  transform: "translate(0, -50%)",
+  fontSize: MAIN_TEXT_FONT_SIZE,
 };
+
 const textHigh: PStyle = { ...textBase, top: textHighTop };
 const textLow: PStyle = { ...textHigh, top: textLowTop };
 
@@ -115,6 +118,7 @@ const audioBase: PStyle = {
   top: audioHighTop,
   cursor: "pointer",
   opacity: 0.8,
+  transform: "translate(0, -50%)",
   visibility: "visible",
 };
 const audioHigh: PStyle = { ...audioBase, top: audioHighTop };