@lumiastream/ui 0.2.8-alpha.25 → 0.2.8-alpha.26

package/dist/index.js

@@ -3502,6 +3502,25 @@ function seLayoutUsesPushText(seLayout) {
 
 // src/se-import/mappers/build.ts
 import { nanoid } from "nanoid";
+function mapSeTextCssToModuleCss(widget, defaults = {}) {
+  const seTextCss = widget.text?.css ?? {};
+  const asStr = (v, fallback) => typeof v === "string" && v.length > 0 ? v : fallback;
+  const asNumOrStr = (v, fallback) => {
+    if (typeof v === "number" && Number.isFinite(v)) return v;
+    if (typeof v === "string" && v.length > 0) return v;
+    return fallback;
+  };
+  return {
+    lineHeight: asNumOrStr(seTextCss["line-height"], defaults.lineHeight ?? 1),
+    fontSize: asNumOrStr(seTextCss["font-size"], defaults.fontSize ?? 24),
+    textAlign: asStr(seTextCss["text-align"], defaults.textAlign ?? "center"),
+    fontFamily: asStr(seTextCss["font-family"], defaults.fontFamily ?? "Roboto"),
+    fontWeight: asStr(seTextCss["font-weight"], defaults.fontWeight ?? "bold"),
+    color: asStr(seTextCss.color, defaults.color ?? "#ffffff"),
+    textShadow: asStr(seTextCss["text-shadow"], defaults.textShadow ?? "rgb(0, 0, 0) 1px 1px 1px"),
+    background: defaults.background ?? "transparent"
+  };
+}
 function buildUnit(widget, lumiaType, moduleExtras, ctx) {
   const id = nanoid();
   const defaults = LUMIA_DEFAULT_SIZES[lumiaType] ?? { width: 400, height: 400 };
@@ -3998,7 +4017,6 @@ function mapGoal(widget, ctx) {
   const v = widget.variables ?? {};
   const listener = v.goalListener ?? (typeof widget.listener === "string" ? widget.listener : null);
   const charity = charityGoalVariables(widget.type);
-  const seTextCss = widget.text?.css ?? {};
   return buildUnit(widget, "goal", {
     content: {
       version: 1,
@@ -4041,23 +4059,16 @@ function mapGoal(widget, ctx) {
         simpleDesign: !!v.simpleDesign
       })
     },
-    css: {
-      // `borderRadius` / `borderStyle` / `borderWidth` / `borderColor`
-      // used to be set here too, but the Goal renderer applies its own
-      // border + borderRadius via inline `style={…}` on the .goal-bar
-      // div (see Goal/index.tsx:123,127,155) sourced from
-      // `content.border` and `content.borderRadius`. Writing them to
-      // module.css just plopped useless transparent-0px rules on the
-      // outer .overlay-module wrapper.
-      lineHeight: seTextCss["line-height"] ?? 1,
-      fontSize: seTextCss["font-size"] ?? 30,
-      textAlign: seTextCss["text-align"] ?? "center",
-      fontFamily: seTextCss["font-family"] ?? "Roboto",
-      fontWeight: seTextCss["font-weight"] ?? "bold",
-      color: seTextCss.color ?? "#ffffff",
-      textShadow: seTextCss["text-shadow"] ?? "rgb(0, 0, 0) 1px 1px 1px",
-      background: "transparent"
-    }
+    // `borderRadius` / `borderStyle` / `borderWidth` / `borderColor`
+    // used to be set on `css` too, but the Goal renderer applies its
+    // own border + borderRadius via inline `style={…}` on the .goal-bar
+    // div (see Goal/index.tsx:123,127,155) sourced from
+    // `content.border` and `content.borderRadius`. Writing them to
+    // module.css just plopped useless transparent-0px rules on the
+    // outer .overlay-module wrapper. SE charity goals commonly use
+    // 24-30px Nunito/Roboto — fontSize default of 30 mirrors the
+    // previous hardcoded fallback.
+    css: mapSeTextCssToModuleCss(widget, { fontSize: 30 })
   }, ctx);
 }
 
@@ -4542,16 +4553,11 @@ function mapCredits(widget, ctx) {
         amount: v.amount
       })
     },
-    css: {
-      fontSize: 30,
-      lineHeight: 1,
-      fontFamily: "Roboto",
-      fontWeight: "normal",
-      color: "#ffffff",
-      textShadow: "",
-      textAlign: "center",
-      background: "transparent"
-    }
+    // Credits renders scrolling section headers + per-event lines; the
+    // renderer reads font/size/weight/color from module.css. Pull from SE's
+    // text.css so an imported credits widget keeps the streamer's chosen
+    // font and weight — defaults match the prior hardcoded fallbacks.
+    css: mapSeTextCssToModuleCss(widget, { fontSize: 30, fontWeight: "normal", textShadow: "" })
   }, ctx);
 }
 function inferSlideshowMediaType(mime, url) {
@@ -4678,21 +4684,10 @@ function mapTimer(widget, ctx) {
     if (v.seconds !== false) clockBits.push("{{seconds}}");
     if (clockBits.length) parts.push(clockBits.join(":"));
   }
-  const seTextCss = widget.text?.css ?? {};
-  const asStr = (v2, fallback) => typeof v2 === "string" && v2.length > 0 ? v2 : fallback;
-  const asNum = (v2, fallback) => typeof v2 === "number" && Number.isFinite(v2) ? v2 : typeof v2 === "string" && v2.length > 0 ? v2 : fallback;
-  const moduleCss = {
-    lineHeight: asNum(seTextCss["line-height"], 1),
-    fontSize: asNum(seTextCss["font-size"], 24),
-    textAlign: asStr(seTextCss["text-align"], "center"),
-    fontFamily: asStr(seTextCss["font-family"], "Roboto"),
-    fontWeight: asStr(seTextCss["font-weight"], "bold"),
-    color: asStr(seTextCss.color, "#ffffff"),
-    textShadow: asStr(seTextCss["text-shadow"], "rgb(0, 0, 0) 1px 1px 1px"),
-    background: "transparent"
-  };
   return buildUnit(widget, "timer", {
-    css: moduleCss,
+    // Carry the streamer's SE text styling (font/size/color/shadow) so an
+    // imported countdown doesn't render in Lumia's default Roboto/24px.
+    css: mapSeTextCssToModuleCss(widget),
     content: {
       version: 1,
       type: "countdown",

package/dist/se-import.js

@@ -387,6 +387,25 @@ function seLayoutUsesPushText(seLayout) {
 
 // src/se-import/mappers/build.ts
 import { nanoid } from "nanoid";
+function mapSeTextCssToModuleCss(widget, defaults = {}) {
+  const seTextCss = widget.text?.css ?? {};
+  const asStr = (v, fallback) => typeof v === "string" && v.length > 0 ? v : fallback;
+  const asNumOrStr = (v, fallback) => {
+    if (typeof v === "number" && Number.isFinite(v)) return v;
+    if (typeof v === "string" && v.length > 0) return v;
+    return fallback;
+  };
+  return {
+    lineHeight: asNumOrStr(seTextCss["line-height"], defaults.lineHeight ?? 1),
+    fontSize: asNumOrStr(seTextCss["font-size"], defaults.fontSize ?? 24),
+    textAlign: asStr(seTextCss["text-align"], defaults.textAlign ?? "center"),
+    fontFamily: asStr(seTextCss["font-family"], defaults.fontFamily ?? "Roboto"),
+    fontWeight: asStr(seTextCss["font-weight"], defaults.fontWeight ?? "bold"),
+    color: asStr(seTextCss.color, defaults.color ?? "#ffffff"),
+    textShadow: asStr(seTextCss["text-shadow"], defaults.textShadow ?? "rgb(0, 0, 0) 1px 1px 1px"),
+    background: defaults.background ?? "transparent"
+  };
+}
 function buildUnit(widget, lumiaType, moduleExtras, ctx) {
   const id = nanoid();
   const defaults = LUMIA_DEFAULT_SIZES[lumiaType] ?? { width: 400, height: 400 };
@@ -883,7 +902,6 @@ function mapGoal(widget, ctx) {
   const v = widget.variables ?? {};
   const listener = v.goalListener ?? (typeof widget.listener === "string" ? widget.listener : null);
   const charity = charityGoalVariables(widget.type);
-  const seTextCss = widget.text?.css ?? {};
   return buildUnit(widget, "goal", {
     content: {
       version: 1,
@@ -926,23 +944,16 @@ function mapGoal(widget, ctx) {
         simpleDesign: !!v.simpleDesign
       })
     },
-    css: {
-      // `borderRadius` / `borderStyle` / `borderWidth` / `borderColor`
-      // used to be set here too, but the Goal renderer applies its own
-      // border + borderRadius via inline `style={…}` on the .goal-bar
-      // div (see Goal/index.tsx:123,127,155) sourced from
-      // `content.border` and `content.borderRadius`. Writing them to
-      // module.css just plopped useless transparent-0px rules on the
-      // outer .overlay-module wrapper.
-      lineHeight: seTextCss["line-height"] ?? 1,
-      fontSize: seTextCss["font-size"] ?? 30,
-      textAlign: seTextCss["text-align"] ?? "center",
-      fontFamily: seTextCss["font-family"] ?? "Roboto",
-      fontWeight: seTextCss["font-weight"] ?? "bold",
-      color: seTextCss.color ?? "#ffffff",
-      textShadow: seTextCss["text-shadow"] ?? "rgb(0, 0, 0) 1px 1px 1px",
-      background: "transparent"
-    }
+    // `borderRadius` / `borderStyle` / `borderWidth` / `borderColor`
+    // used to be set on `css` too, but the Goal renderer applies its
+    // own border + borderRadius via inline `style={…}` on the .goal-bar
+    // div (see Goal/index.tsx:123,127,155) sourced from
+    // `content.border` and `content.borderRadius`. Writing them to
+    // module.css just plopped useless transparent-0px rules on the
+    // outer .overlay-module wrapper. SE charity goals commonly use
+    // 24-30px Nunito/Roboto — fontSize default of 30 mirrors the
+    // previous hardcoded fallback.
+    css: mapSeTextCssToModuleCss(widget, { fontSize: 30 })
   }, ctx);
 }
 
@@ -1427,16 +1438,11 @@ function mapCredits(widget, ctx) {
         amount: v.amount
       })
     },
-    css: {
-      fontSize: 30,
-      lineHeight: 1,
-      fontFamily: "Roboto",
-      fontWeight: "normal",
-      color: "#ffffff",
-      textShadow: "",
-      textAlign: "center",
-      background: "transparent"
-    }
+    // Credits renders scrolling section headers + per-event lines; the
+    // renderer reads font/size/weight/color from module.css. Pull from SE's
+    // text.css so an imported credits widget keeps the streamer's chosen
+    // font and weight — defaults match the prior hardcoded fallbacks.
+    css: mapSeTextCssToModuleCss(widget, { fontSize: 30, fontWeight: "normal", textShadow: "" })
   }, ctx);
 }
 function inferSlideshowMediaType(mime, url) {
@@ -1563,21 +1569,10 @@ function mapTimer(widget, ctx) {
     if (v.seconds !== false) clockBits.push("{{seconds}}");
     if (clockBits.length) parts.push(clockBits.join(":"));
   }
-  const seTextCss = widget.text?.css ?? {};
-  const asStr = (v2, fallback) => typeof v2 === "string" && v2.length > 0 ? v2 : fallback;
-  const asNum = (v2, fallback) => typeof v2 === "number" && Number.isFinite(v2) ? v2 : typeof v2 === "string" && v2.length > 0 ? v2 : fallback;
-  const moduleCss = {
-    lineHeight: asNum(seTextCss["line-height"], 1),
-    fontSize: asNum(seTextCss["font-size"], 24),
-    textAlign: asStr(seTextCss["text-align"], "center"),
-    fontFamily: asStr(seTextCss["font-family"], "Roboto"),
-    fontWeight: asStr(seTextCss["font-weight"], "bold"),
-    color: asStr(seTextCss.color, "#ffffff"),
-    textShadow: asStr(seTextCss["text-shadow"], "rgb(0, 0, 0) 1px 1px 1px"),
-    background: "transparent"
-  };
   return buildUnit(widget, "timer", {
-    css: moduleCss,
+    // Carry the streamer's SE text styling (font/size/color/shadow) so an
+    // imported countdown doesn't render in Lumia's default Roboto/24px.
+    css: mapSeTextCssToModuleCss(widget),
     content: {
       version: 1,
       type: "countdown",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lumiastream/ui",
-	"version": "0.2.8-alpha.25",
+	"version": "0.2.8-alpha.26",
 	"author": "Lumia Stream",
 	"license": "ISC",
 	"description": "Lumia UI Kit",