@lumiastream/ui 0.2.8-alpha.7 → 0.2.8-alpha.9

package/dist/index.js

@@ -3825,24 +3825,113 @@ function mapCustom(widget) {
 }
 
 // src/se-import/mappers/misc.ts
+function mapChatboxTheme(seTheme) {
+  const t = (seTheme ?? "").toString().toLowerCase();
+  if (!t || t === "default") return "simple";
+  if (t.includes("flipin") || t.includes("bubble") || t.includes("bubbly")) return "bubbly";
+  if (t.includes("glass") || t.includes("transparent")) return "glass";
+  if (t.includes("boxy") || t.includes("checker")) return "boxy";
+  if (t.includes("basic")) return "basic";
+  return "simple";
+}
+function paddingShorthand(message) {
+  const pick = (key) => {
+    const raw = message?.[key];
+    if (raw == null || raw === "") return null;
+    const n = typeof raw === "number" ? raw : parseFloat(String(raw));
+    return Number.isFinite(n) ? n : null;
+  };
+  const t = pick("padding-top");
+  const r = pick("padding-right");
+  const b = pick("padding-bottom");
+  const l = pick("padding-left");
+  if (t == null && r == null && b == null && l == null) return void 0;
+  const px = (n) => `${n ?? 0}px`;
+  return `${px(t)} ${px(r)} ${px(b)} ${px(l)}`;
+}
 function mapChatbox(widget) {
   const v = widget.variables ?? {};
-  const fadeOutSeconds = typeof v.fadeOut === "number" ? v.fadeOut : 0;
+  const textCss = widget.text?.css ?? {};
+  const messageCss = textCss.message ?? {};
+  const fadeOutSeconds = typeof v.fadeOut === "number" ? v.fadeOut : v.fadeOut === true ? 30 : 0;
+  const messagePadding = paddingShorthand(messageCss);
+  const DEFAULT_CHATBOX_FONT_SIZE = 14;
+  const moduleCss = {};
+  if (textCss["font-family"] != null) moduleCss.fontFamily = textCss["font-family"];
+  moduleCss.fontSize = textCss["font-size"] != null ? textCss["font-size"] : DEFAULT_CHATBOX_FONT_SIZE;
+  if (textCss["color"] != null) moduleCss.color = textCss["color"];
+  if (textCss["font-weight"] != null) moduleCss.fontWeight = textCss["font-weight"];
+  if (textCss["text-shadow"] != null) moduleCss.textShadow = textCss["text-shadow"];
+  if (textCss["text-align"] != null) moduleCss.textAlign = textCss["text-align"];
+  if (textCss["line-height"] != null) moduleCss.lineHeight = textCss["line-height"];
+  if (messagePadding) moduleCss.padding = messagePadding;
+  const DEFAULT_CHATBOX_BG = "#1e1e1e";
+  const messageBackground = typeof messageCss["background"] === "string" && messageCss["background"].length > 0 ? messageCss["background"] : DEFAULT_CHATBOX_BG;
+  moduleCss.background = messageBackground;
+  const messageFontFamily = typeof messageCss["font-family"] === "string" && messageCss["font-family"].length > 0 ? messageCss["font-family"] : void 0;
+  const highlightBackground = v.highlight && typeof v.highlight === "object" && typeof v.highlight["background"] === "string" ? v.highlight["background"] : void 0;
+  const accentColor = highlightBackground && highlightBackground.length > 0 ? highlightBackground : void 0;
   return buildUnit(widget, "chatbox", {
+    // Visual styling (font / color / padding etc) lives on module.css, not
+    // content. Lumia's TextStyle settings panel + the chatbox renderer both
+    // read from here.
+    css: moduleCss,
     content: {
-      theme: v.theme ?? "default",
+      theme: mapChatboxTheme(v.theme),
       fadeOutAfterDelay: fadeOutSeconds > 0,
       fadeOutDelayTime: fadeOutSeconds,
+      // Defaults Lumia's chatbox renderer + UI expect on every module.
+      // Without these the chatbox silently dropped messages (the
+      // `ignoredStreamingSites` truthy gate), rendered in the wrong
+      // theme (no theme → blank list), or showed missing controls in
+      // settings. `ignoredList` carries SE's per-user ignore list across.
+      ignoredList: Array.isArray(v.ignored) ? v.ignored : [],
+      ignoredStreamingSites: [],
+      horizontal: false,
+      reverseFlow: false,
+      hideAlerts: false,
+      hideAlertMessage: false,
       showAvatar: true,
-      // SE `messageDelay` (between-message delay) and `delay` (initial delay) have no
-      // Lumia equivalent today — kept as provenance so users can wire them later if
-      // Lumia adds the feature.
+      showBadges: true,
+      showEmotes: true,
+      showSiteIcon: true,
+      showTimestamp: false,
+      breakLine: false,
+      hyperClickableLinks: true,
+      clickableChatterProfiles: true,
+      previewMediaInChat: true,
+      maxItemsToShow: 20,
+      removeAfter: 3e4,
+      itemGap: 8,
+      borderRadius: "10px",
+      bgOpacity: 0.4,
+      animations: {
+        enterAnimation: "fadeIn",
+        exitAnimation: "fadeOut",
+        enterAnimationDuration: 1e3,
+        exitAnimationDuration: 1e3,
+        enterAnimationDelay: 0,
+        exitAnimationDelay: 0
+      },
+      // Carry the SE message-level font override and the streamer's
+      // accent color across so the imported chatbox looks right at
+      // first paint. Background lives on `module.css.background`
+      // above — `content.background` was a dead write the renderer
+      // never read.
+      ...messageFontFamily ? { messageFontFamily } : {},
+      ...accentColor ? {
+        chatboxStreamingSite: {
+          twitch: { themeConfig: { primaryColor: accentColor, showUsernameColors: true } }
+        }
+      } : {},
+      // SE-only fields preserved as provenance — no native Lumia equivalent.
+      // `delay` / `messageDelay` (initial + per-message hold), and the
+      // raw highlight block in case a future Lumia feature wants the
+      // fine-grained styling.
       se_message_delay: v.messageDelay,
       se_initial_delay: v.delay,
-      // SE `ignored` (per-user ignore) and `highlight` (per-user emphasis) likewise
-      // have no Lumia equivalent — preserved as provenance only.
-      se_ignored_users: v.ignored,
-      se_highlight_users: v.highlight
+      se_highlight_users: v.highlight,
+      se_text_css: textCss
     }
   });
 }
@@ -3992,13 +4081,38 @@ function mapCredits(widget) {
     }
   });
 }
+function inferSlideshowMediaType(mime, url) {
+  if (typeof mime === "string") {
+    if (mime.startsWith("video/")) return "video";
+    if (mime.startsWith("image/")) return "image";
+  }
+  const ext = url.split("?")[0].split("#")[0].split(".").pop()?.toLowerCase() ?? "";
+  if (["mp4", "webm", "mov", "m4v", "ogv"].includes(ext)) return "video";
+  return "image";
+}
+function nameFromUrl(url) {
+  try {
+    const path = url.split("?")[0].split("#")[0];
+    return decodeURIComponent(path.split("/").pop() ?? url);
+  } catch {
+    return url;
+  }
+}
 function mapSlideshow(widget) {
   const v = widget.variables ?? {};
-  const sources = (v.images ?? []).map((i) => typeof i === "string" ? i : i.src ?? "").filter(Boolean);
+  const items = (v.images ?? []).map((raw) => {
+    const url = typeof raw === "string" ? raw : raw.url ?? raw.src ?? "";
+    if (!url) return null;
+    return {
+      type: inferSlideshowMediaType(typeof raw === "object" ? raw?.type : void 0, url),
+      src: url,
+      name: nameFromUrl(url)
+    };
+  }).filter((item) => item !== null);
   const seAnim = typeof v.animation === "object" && v.animation !== null ? v.animation : {};
   return buildUnit(widget, "slideshow", {
     content: {
-      items: sources.map((src) => ({ src })),
+      src: items,
       // `interval` of 0 = "rapid cycle" in SE (no delay between images); Lumia's
       // `imageDuration` is the total ms per image. Distinguish three cases:
       //   - undefined → use 5000ms default
@@ -4009,7 +4123,10 @@ function mapSlideshow(widget) {
       loopDelay: 0,
       delay: 0,
       playAudio: !!v.playAudio,
-      random: !!v.random,
+      // Lumia's renderer reads `content.shuffle` (Slideshow/index.tsx:21);
+      // mirroring SE's `random` to that name keeps "play in random order"
+      // working out of the box.
+      shuffle: !!v.random,
       animation: {
         enterAnimation: typeof v.animation === "string" ? v.animation : seAnim.in ?? "fadeIn",
         exitAnimation: typeof v.animation === "string" ? v.animation : seAnim.out ?? "fadeOut",
@@ -7090,7 +7207,7 @@ function SEImportWizard({
             onClose();
           },
           disabled: loading || importing,
-          label: translate("action.cancel", "Cancel")
+          label: translate("common.cancel", "Cancel")
         }
       ),
       step !== "mode" && /* @__PURE__ */ jsx13(

package/package.json

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