@lumiastream/ui 0.8.3 → 0.8.5

package/dist/se-import.js

@@ -4839,7 +4839,7 @@ async function diagnoseSEAuth(jwt) {
 }
 
 // src/se-import/ui/SEImportWizard.tsx
-import { useCallback as useCallback4, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef9, useState as useState14 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef9, useState as useState13 } from "react";
 
 // src/components/LSButton/LSButton.tsx
 import Button from "@mui/material/Button";
@@ -8088,7 +8088,6 @@ function EventListItem({
   avatar,
   fallbackAvatar,
   timestamp,
-  amountBadge,
   platformIcon,
   alertIcon,
   eventType,
@@ -8137,14 +8136,6 @@ function EventListItem({
             style: accentColor ? { color: accentColor } : void 0,
             children: resolvedAlertIcon
           }
-        ) : null,
-        amountBadge != null && amountBadge !== false ? /* @__PURE__ */ jsx24(
-          "span",
-          {
-            className: "ls-eventlist-item__amount-badge",
-            style: accentColor ? { color: accentColor, backgroundColor: `color-mix(in srgb, ${accentColor} 18%, transparent)`, borderColor: `color-mix(in srgb, ${accentColor} 45%, transparent)` } : void 0,
-            children: amountBadge
-          }
         ) : null
       ] }),
       /* @__PURE__ */ jsxs14("div", { className: "ls-eventlist-item__body", children: [
@@ -8163,7 +8154,7 @@ function EventListItem({
 EventListItem.displayName = "EventListItem";
 
 // src/components/EventList/EventList.tsx
-import { useEffect as useEffect7, useRef as useRef7, useState as useState9 } from "react";
+import { useEffect as useEffect7, useRef as useRef7 } from "react";
 import classNames14 from "classnames";
 import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var PIN_THRESHOLD = 24;
@@ -8185,15 +8176,10 @@ function EventList({
   newestAt = "top",
   onEndReached,
   endReachedThreshold = 24,
-  showNewItemsPill = false,
-  newItemsPillText,
   className
 }) {
   const listRef = useRef7(null);
   const pinnedRef = useRef7(true);
-  const prevNewestIdRef = useRef7(null);
-  const newItemsInitedRef = useRef7(false);
-  const [unreadCount, setUnreadCount] = useState9(0);
   useEffect7(() => {
     const el = listRef.current;
     if (!autoScroll || !el || !pinnedRef.current) {
@@ -8201,34 +8187,6 @@ function EventList({
     }
     el.scrollTop = newestAt === "top" ? 0 : el.scrollHeight;
   }, [items, autoScroll, newestAt]);
-  useEffect7(() => {
-    if (!showNewItemsPill) {
-      return;
-    }
-    const newestId = (newestAt === "top" ? items[0]?.id : items[items.length - 1]?.id) ?? null;
-    const prevNewestId = prevNewestIdRef.current;
-    let added = 0;
-    if (prevNewestId != null && newestId != null && newestId !== prevNewestId) {
-      const idx = newestAt === "top" ? items.findIndex((item) => item.id === prevNewestId) : items.length - 1 - [...items].reverse().findIndex((item) => item.id === prevNewestId);
-      added = newestAt === "top" ? idx > 0 ? idx : 0 : idx >= 0 && idx < items.length - 1 ? items.length - 1 - idx : 0;
-    }
-    prevNewestIdRef.current = newestId;
-    if (!newItemsInitedRef.current) {
-      newItemsInitedRef.current = true;
-      return;
-    }
-    if (added > 0 && !pinnedRef.current) {
-      setUnreadCount((count) => count + added);
-    }
-  }, [items, showNewItemsPill, newestAt]);
-  const scrollToNewest = () => {
-    const el = listRef.current;
-    if (el) {
-      el.scrollTo({ top: newestAt === "top" ? 0 : el.scrollHeight, behavior: "smooth" });
-    }
-    pinnedRef.current = true;
-    setUnreadCount(0);
-  };
   const handleScroll = () => {
     const el = listRef.current;
     if (!el) {
@@ -8238,50 +8196,43 @@ function EventList({
     const distanceFromNewest = newestAt === "top" ? el.scrollTop : distanceFromEnd;
     const distanceFromOldest = newestAt === "top" ? distanceFromEnd : el.scrollTop;
     pinnedRef.current = distanceFromNewest <= PIN_THRESHOLD;
-    if (pinnedRef.current && unreadCount > 0) {
-      setUnreadCount(0);
-    }
     if (onEndReached && distanceFromOldest <= endReachedThreshold) {
       onEndReached();
     }
   };
-  return /* @__PURE__ */ jsxs15("div", { className: classNames14("ls-eventlist", className), id, children: [
-    showNewItemsPill && unreadCount > 0 ? /* @__PURE__ */ jsx25("button", { type: "button", className: classNames14("ls-eventlist__new-pill", { "ls-eventlist__new-pill--bottom": newestAt === "bottom" }), onClick: scrollToNewest, children: newItemsPillText ? newItemsPillText(unreadCount) : `${unreadCount} new` }) : null,
-    items.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: classNames14("ls-eventlist__empty", emptyClassName), children: [
-      emptyIcon ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist__empty-icon", children: emptyIcon }) : null,
-      /* @__PURE__ */ jsx25("span", { children: emptyText })
-    ] }) : /* @__PURE__ */ jsx25(
-      "div",
-      {
-        className: "ls-eventlist__list",
-        ref: listRef,
-        onScroll: handleScroll,
-        style: itemGap != null ? { gap: typeof itemGap === "number" ? `${itemGap}px` : itemGap } : void 0,
-        children: items.map((item) => /* @__PURE__ */ jsx25("div", { className: "ls-eventlist__row", children: /* @__PURE__ */ jsx25(
-          EventListItem,
-          {
-            username: item.username,
-            message: item.message,
-            userMessage: item.userMessage,
-            avatar: item.avatar,
-            fallbackAvatar: item.fallbackAvatar ?? fallbackAvatar,
-            timestamp: item.timestamp,
-            amountBadge: item.amountBadge,
-            platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx25(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
-            alertIcon: item.alertIcon,
-            eventType: item.eventType,
-            accentColor: item.accentColor,
-            colorFullBackground,
-            showAvatar: showAvatars,
-            showTimestamp: showTimestamps,
-            showMessage: showMessages,
-            actions: showActions ? item.actions : void 0,
-            onUsernameClick: item.onUsernameClick
-          }
-        ) }, item.id))
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx25("div", { className: classNames14("ls-eventlist", className), id, children: items.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: classNames14("ls-eventlist__empty", emptyClassName), children: [
+    emptyIcon ? /* @__PURE__ */ jsx25("span", { className: "ls-eventlist__empty-icon", children: emptyIcon }) : null,
+    /* @__PURE__ */ jsx25("span", { children: emptyText })
+  ] }) : /* @__PURE__ */ jsx25(
+    "div",
+    {
+      className: "ls-eventlist__list",
+      ref: listRef,
+      onScroll: handleScroll,
+      style: itemGap != null ? { gap: typeof itemGap === "number" ? `${itemGap}px` : itemGap } : void 0,
+      children: items.map((item) => /* @__PURE__ */ jsx25("div", { className: "ls-eventlist__row", children: /* @__PURE__ */ jsx25(
+        EventListItem,
+        {
+          username: item.username,
+          message: item.message,
+          userMessage: item.userMessage,
+          avatar: item.avatar,
+          fallbackAvatar: item.fallbackAvatar ?? fallbackAvatar,
+          timestamp: item.timestamp,
+          platformIcon: showPlatformIcons ? item.platformIcon ?? (item.platform ? /* @__PURE__ */ jsx25(PlatformIcon, { platform: item.platform }) : void 0) : void 0,
+          alertIcon: item.alertIcon,
+          eventType: item.eventType,
+          accentColor: item.accentColor,
+          colorFullBackground,
+          showAvatar: showAvatars,
+          showTimestamp: showTimestamps,
+          showMessage: showMessages,
+          actions: showActions ? item.actions : void 0,
+          onUsernameClick: item.onUsernameClick
+        }
+      ) }, item.id))
+    }
+  ) });
 }
 EventList.displayName = "EventList";
 
@@ -8390,7 +8341,7 @@ StreamStatusPanel.displayName = "StreamStatusPanel";
 
 // src/components/ViewersList/ViewersList.tsx
 import * as React from "react";
-import { useMemo as useMemo5, useState as useState10 } from "react";
+import { useMemo as useMemo5, useState as useState9 } from "react";
 import classNames16 from "classnames";
 import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 function ViewersList({
@@ -8409,7 +8360,7 @@ function ViewersList({
   id,
   className
 }) {
-  const [query, setQuery] = useState10("");
+  const [query, setQuery] = useState9("");
   const internalSearch = showSearch && !searchSlot;
   const filtered = useMemo5(
     () => internalSearch && query ? viewers.filter((viewer) => viewer.username.toLowerCase().includes(query.toLowerCase())) : viewers,
@@ -8695,7 +8646,7 @@ function ModQueueItem({
 ModQueueItem.displayName = "ModQueueItem";
 
 // src/components/ModQueueList/ModQueueList.tsx
-import { useMemo as useMemo6, useState as useState11 } from "react";
+import { useMemo as useMemo6, useState as useState10 } from "react";
 import ButtonBase from "@mui/material/ButtonBase";
 import classNames20 from "classnames";
 
@@ -8769,7 +8720,7 @@ function ModQueueList({
   onDeny,
   className
 }) {
-  const [internalQuery, setInternalQuery] = useState11("");
+  const [internalQuery, setInternalQuery] = useState10("");
   const query = searchValue !== void 0 ? searchValue : internalQuery;
   const handleSearchChange = (value) => {
     if (searchValue === void 0) {
@@ -8856,7 +8807,7 @@ function ModActivityLog({ logs, emptyText, onClear, clearLabel = "Clear logs", a
 ModActivityLog.displayName = "ModActivityLog";
 
 // src/components/SongRequestList/SongRequestList.tsx
-import { useState as useState12 } from "react";
+import { useState as useState11 } from "react";
 import classNames22 from "classnames";
 import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function SongRequestList({
@@ -8877,7 +8828,7 @@ function SongRequestList({
   emptyText,
   className
 }) {
-  const [addValue, setAddValue] = useState12("");
+  const [addValue, setAddValue] = useState11("");
   const submitAdd = () => {
     const query = addValue.trim();
     if (!query || addDisabled || !onAddSong) {
@@ -8955,13 +8906,13 @@ function SongRequestList({
 SongRequestList.displayName = "SongRequestList";
 
 // src/se-import/ui/MarketplacePicker.tsx
-import { useEffect as useEffect9, useMemo as useMemo7, useState as useState13 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo7, useState as useState12 } from "react";
 import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed, onPick, onCancel }) {
   const candidateIds = useMemo7(() => getMarketplaceCandidates(seWidgetType), [seWidgetType]);
-  const [candidates, setCandidates] = useState13(() => candidateIds.map((id) => ({ id, loading: true })));
-  const [activeId, setActiveId] = useState13(candidateIds[0] ?? null);
-  const [activeLayerId, setActiveLayerId] = useState13(null);
+  const [candidates, setCandidates] = useState12(() => candidateIds.map((id) => ({ id, loading: true })));
+  const [activeId, setActiveId] = useState12(candidateIds[0] ?? null);
+  const [activeLayerId, setActiveLayerId] = useState12(null);
   useEffect9(() => {
     let cancelled = false;
     candidateIds.forEach(async (id) => {
@@ -11467,8 +11418,8 @@ var CUSTOM_WIDGET_TABS = [
 ];
 function CustomWidgetCard({ widget }) {
   const tabs = CUSTOM_WIDGET_TABS.filter(({ key }) => widget[key].trim().length > 0);
-  const [activeKey, setActiveKey] = useState14(tabs[0]?.key ?? "js");
-  const [copied, setCopied] = useState14(false);
+  const [activeKey, setActiveKey] = useState13(tabs[0]?.key ?? "js");
+  const [copied, setCopied] = useState13(false);
   const value = widget[activeKey] ?? "";
   useEffect10(() => setCopied(false), [activeKey]);
   const handleCopy = useCallback4(() => {
@@ -11593,47 +11544,47 @@ function SEImportWizard({
     CustomEmbed,
     isAdmin
   } = bindings;
-  const [step, setStep] = useState14(
+  const [step, setStep] = useState13(
     initialStep ?? (initialUrl ? "url" : initialJwt ? "connect" : "mode")
   );
-  const [entryMode, setEntryMode] = useState14(
+  const [entryMode, setEntryMode] = useState13(
     initialStep === "url" ? "url" : initialStep === "connect" ? "jwt" : initialUrl ? "url" : initialJwt ? "jwt" : null
   );
-  const [jwt, setJwt] = useState14(initialJwt);
-  const [seClient, setSeClient] = useState14(null);
-  const [channels, setChannels] = useState14(null);
-  const [selectedChannelId, setSelectedChannelId] = useState14(null);
-  const [connectError, setConnectError] = useState14(null);
-  const [connecting, setConnecting] = useState14(false);
-  const [overlayList, setOverlayList] = useState14(
+  const [jwt, setJwt] = useState13(initialJwt);
+  const [seClient, setSeClient] = useState13(null);
+  const [channels, setChannels] = useState13(null);
+  const [selectedChannelId, setSelectedChannelId] = useState13(null);
+  const [connectError, setConnectError] = useState13(null);
+  const [connecting, setConnecting] = useState13(false);
+  const [overlayList, setOverlayList] = useState13(
     initialOverlayList?.length ? initialOverlayList : null
   );
-  const [overlaysLoading, setOverlaysLoading] = useState14(false);
-  const [overlaysError, setOverlaysError] = useState14(null);
-  const [selectedOverlayIds, setSelectedOverlayIds] = useState14(/* @__PURE__ */ new Set());
-  const [activeOverlaySummaries, setActiveOverlaySummaries] = useState14([]);
-  const [activeOverlayPreview, setActiveOverlayPreview] = useState14();
-  const [url, setUrl] = useState14(initialUrl);
-  const [loadError, setLoadError] = useState14(null);
-  const [loading, setLoading] = useState14(false);
-  const [result, setResult] = useState14(null);
-  const [batchImports, setBatchImports] = useState14([]);
-  const [originalReviewItems, setOriginalReviewItems] = useState14([]);
-  const [options, setOptions] = useState14({
+  const [overlaysLoading, setOverlaysLoading] = useState13(false);
+  const [overlaysError, setOverlaysError] = useState13(null);
+  const [selectedOverlayIds, setSelectedOverlayIds] = useState13(/* @__PURE__ */ new Set());
+  const [activeOverlaySummaries, setActiveOverlaySummaries] = useState13([]);
+  const [activeOverlayPreview, setActiveOverlayPreview] = useState13();
+  const [url, setUrl] = useState13(initialUrl);
+  const [loadError, setLoadError] = useState13(null);
+  const [loading, setLoading] = useState13(false);
+  const [result, setResult] = useState13(null);
+  const [batchImports, setBatchImports] = useState13([]);
+  const [originalReviewItems, setOriginalReviewItems] = useState13([]);
+  const [options, setOptions] = useState13({
     mirrorAssets: true,
     name: ""
   });
-  const [mirrorRows, setMirrorRows] = useState14([]);
-  const [mirrorRunning, setMirrorRunning] = useState14(false);
-  const [rowStates, setRowStates] = useState14({});
-  const [reviewIndex, setReviewIndex] = useState14(0);
-  const [importing, setImporting] = useState14(false);
-  const [marketplacePickerOpen, setMarketplacePickerOpen] = useState14(false);
+  const [mirrorRows, setMirrorRows] = useState13([]);
+  const [mirrorRunning, setMirrorRunning] = useState13(false);
+  const [rowStates, setRowStates] = useState13({});
+  const [reviewIndex, setReviewIndex] = useState13(0);
+  const [importing, setImporting] = useState13(false);
+  const [marketplacePickerOpen, setMarketplacePickerOpen] = useState13(false);
   const mirrorStartedRef = useRef9(false);
   const mirrorAbortRef = useRef9(null);
   const initialOverlayImportStartedRef = useRef9(false);
   const filenameCacheRef = useRef9(/* @__PURE__ */ new Map());
-  const [assetUrls, setAssetUrls] = useState14([]);
+  const [assetUrls, setAssetUrls] = useState13([]);
   const currentItem = originalReviewItems[reviewIndex];
   const currentRow = currentItem ? rowStates[currentItem.moduleId] ?? { state: "pending" } : void 0;
   const handleConnect = useCallback4(async () => {

package/dist/utils/chatMedia.js

@@ -536,6 +536,10 @@ var resolvePlatformChatterProfileUrl = ({ platform, username, displayname, userI
       return normalizedUsername ? `https://www.tiktok.com/@${encodeURIComponent(normalizedUsername)}` : null;
     case "kick":
       return normalizedUsername ? `https://kick.com/${encodeURIComponent(normalizedUsername)}` : null;
+    case "twitter":
+      return normalizedUsername ? `https://twitter.com/${encodeURIComponent(normalizedUsername)}` : null;
+    case "trovo":
+      return normalizedUsername ? `https://trovo.live/s/${encodeURIComponent(normalizedUsername)}` : null;
     case "discord":
       return normalizedUserId ? `https://discord.com/users/${encodeURIComponent(normalizedUserId)}` : null;
     default:

package/dist/utils.d.ts

@@ -108,4 +108,13 @@ declare const codeMirrorlinterOptions: (type: "overlay" | "code", language?: "js
     };
 };
 
-export { codeMirrorlinterOptions, variableCompletionOptions };
+type PingNote = {
+    freq: number;
+    at: number;
+};
+declare const PING_NOTES: PingNote[];
+declare const playEventPing: (options?: {
+    sinkId?: string;
+}) => void;
+
+export { PING_NOTES, type PingNote, codeMirrorlinterOptions, playEventPing, variableCompletionOptions };

package/dist/utils.js

@@ -752,6 +752,10 @@ var resolvePlatformChatterProfileUrl = ({ platform, username, displayname, userI
       return normalizedUsername ? `https://www.tiktok.com/@${encodeURIComponent(normalizedUsername)}` : null;
     case "kick":
       return normalizedUsername ? `https://kick.com/${encodeURIComponent(normalizedUsername)}` : null;
+    case "twitter":
+      return normalizedUsername ? `https://twitter.com/${encodeURIComponent(normalizedUsername)}` : null;
+    case "trovo":
+      return normalizedUsername ? `https://trovo.live/s/${encodeURIComponent(normalizedUsername)}` : null;
     case "discord":
       return normalizedUserId ? `https://discord.com/users/${encodeURIComponent(normalizedUserId)}` : null;
     default:
@@ -808,8 +812,97 @@ var resolveChatterProfileUrlWithResolvers = async ({
     userId: normalizedUserId || void 0
   });
 };
+
+// src/utils/eventPing.ts
+var PING_NOTES = [
+  { freq: 1046.5, at: 0 },
+  { freq: 1318.51, at: 0.075 },
+  { freq: 1567.98, at: 0.15 },
+  { freq: 2093, at: 0.235 }
+];
+var pingAudioContext = null;
+var pingUnlockBound = false;
+var appliedSinkId = null;
+var getPingContext = () => {
+  const Ctx = globalThis.AudioContext ?? globalThis.webkitAudioContext;
+  if (!Ctx) {
+    return null;
+  }
+  if (!pingAudioContext) {
+    pingAudioContext = new Ctx();
+  }
+  if (!pingUnlockBound) {
+    pingUnlockBound = true;
+    const unlock = () => {
+      pingAudioContext?.resume().catch(() => {
+      });
+    };
+    globalThis.addEventListener?.("pointerdown", unlock);
+    globalThis.addEventListener?.("keydown", unlock);
+  }
+  return pingAudioContext;
+};
+var applyPingSink = (ctx, sinkId) => {
+  if (sinkId === void 0 || sinkId === appliedSinkId) {
+    return null;
+  }
+  const sinkCtx = ctx;
+  if (typeof sinkCtx.setSinkId !== "function") {
+    return null;
+  }
+  appliedSinkId = sinkId;
+  return sinkCtx.setSinkId(sinkId).catch(() => {
+  });
+};
+var emitPingTone = (ctx) => {
+  const start = ctx.currentTime;
+  const master = ctx.createGain();
+  master.gain.setValueAtTime(0.85, start);
+  master.connect(ctx.destination);
+  for (const note of PING_NOTES) {
+    const noteStart = start + note.at;
+    for (const detune of [-5, 6]) {
+      const osc = ctx.createOscillator();
+      const gain = ctx.createGain();
+      osc.type = "triangle";
+      osc.frequency.setValueAtTime(note.freq, noteStart);
+      osc.detune.setValueAtTime(detune, noteStart);
+      osc.connect(gain);
+      gain.connect(master);
+      gain.gain.setValueAtTime(1e-4, noteStart);
+      gain.gain.exponentialRampToValueAtTime(0.13, noteStart + 0.012);
+      gain.gain.exponentialRampToValueAtTime(1e-4, noteStart + 0.4);
+      osc.start(noteStart);
+      osc.stop(noteStart + 0.42);
+    }
+  }
+};
+var playEventPing = (options) => {
+  try {
+    const ctx = getPingContext();
+    if (!ctx) {
+      return;
+    }
+    const run = () => {
+      if (ctx.state === "suspended") {
+        ctx.resume().then(() => emitPingTone(ctx)).catch(() => {
+        });
+        return;
+      }
+      emitPingTone(ctx);
+    };
+    const sinkApplied = applyPingSink(ctx, options?.sinkId);
+    if (sinkApplied) {
+      sinkApplied.then(run, run);
+    } else {
+      run();
+    }
+  } catch {
+  }
+};
 export {
   MEDIA_PREVIEW_USER_LEVEL_VALUES,
+  PING_NOTES,
   buildChatMessageContent,
   codeMirrorlinterOptions,
   getMediaPreviewFromUrl,
@@ -818,6 +911,7 @@ export {
   normalizeHttpUrl,
   normalizeMediaPreviewUserLevels,
   parseMessageLinks,
+  playEventPing,
   resolveChatterProfileUrlWithResolvers,
   resolveMediaPreviewRoleSettings,
   resolveMediaPreviewSetting,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumiastream/ui",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "author": "Lumia Stream",
   "license": "ISC",
   "description": "Lumia UI Kit",
@@ -153,7 +153,6 @@
     "watch": "tsup --watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "link-local": "npm run build && node ./scripts/link-local.mjs",
     "release": "changeset && changeset tag && npm run build && npm publish",
     "prepublishOnly": "npm run build",
     "postpublish": "npm cache clean --force && node ./scripts/postpublish-install.mjs",
@@ -193,8 +192,8 @@
     "vitest": "^4.1.6"
   },
   "dependencies": {
-    "@lumiastream/lumia-translations": "^1.17.9",
-    "@lumiastream/lumia-types": "3.8.2",
+    "@lumiastream/lumia-translations": "1.18.3",
+    "@lumiastream/lumia-types": "3.8.4",
     "classnames": "^2.5.1",
     "globals": "^17.4.0",
     "nanoid": "^5.1.11",