@livo-tv/sdk 1.1.0 → 1.1.2

package/README.md

@@ -11,7 +11,7 @@ import "@livo-tv/sdk/styles.css";
 <LivoStudio guestToken="..." theme={{ primary: "#2563eb" }} />
 ```
 
-`@livo-tv/sdk/studio` is the native room. Tailwind hosts must `@source` `node_modules/@livo-tv/sdk/dist/*.{js,cjs,mjs}` like `@livo-tv/blocks`. RealtimeKit is an optional peer (`@cloudflare/realtimekit`). Root `<LivoStudio>` remains the iframe fallback.
+`@livo-tv/sdk` and `@livo-tv/sdk/studio` are client entries (the published bundles start with `"use client"`). Import them from `"use client"` files in Next.js App Router — do not import `@livo-tv/sdk/studio` from a Server Component page. Tailwind hosts must `@source` `node_modules/@livo-tv/sdk/dist/*.{js,cjs,mjs}` like `@livo-tv/blocks`. RealtimeKit is an optional peer (`@cloudflare/realtimekit`). Root `<LivoStudio>` remains the iframe fallback.
 
 Server (Node / Workers):
 

package/dist/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var blocks = require('@livo-tv/blocks');

package/dist/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { VideoPlayer, createPlaybackBeaconClient, CurtainStage } from '@livo-tv/blocks';
 import { useState, useRef, useEffect, useMemo } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/studio/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var react = require('react');
@@ -10,6 +11,8 @@ var tailwindMerge = require('tailwind-merge');
 var button = require('@base-ui/react/button');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
+var mergeProps = require('@base-ui/react/merge-props');
+var useRender = require('@base-ui/react/use-render');
 var menu = require('@base-ui/react/menu');
 var tooltip = require('@base-ui/react/tooltip');
 var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -775,6 +778,58 @@ function postLivoEvent(type, payload) {
   window.parent.postMessage({ source: "livo", type, payload }, "*");
 }
 
+// src/studio/lib/embed-urls.ts
+function playerWatchUrl(streamId, origin = "https://player.livo.tv") {
+  return `${origin.replace(/\/$/, "")}/${streamId}`;
+}
+
+// src/studio/lib/clipboard.ts
+async function copyText(value, clipboard = globalThis.navigator?.clipboard ?? null) {
+  if (!clipboard) return false;
+  try {
+    await clipboard.writeText(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/studio/lib/share.ts
+function isAbort(error) {
+  return typeof error === "object" && error !== null && "name" in error && error.name === "AbortError";
+}
+function resolveShareApi(share = typeof navigator === "undefined" ? null : typeof navigator.share === "function" ? navigator : null) {
+  return share ?? null;
+}
+function canNativeShare(data, share = resolveShareApi()) {
+  if (!share) return false;
+  if (typeof share.canShare !== "function") return true;
+  try {
+    return share.canShare(data);
+  } catch {
+    return false;
+  }
+}
+async function shareOrCopyLink(options, deps) {
+  const data = {
+    url: options.url,
+    ...options.title ? { title: options.title } : {},
+    ...options.text ? { text: options.text } : {}
+  };
+  const share = resolveShareApi(deps?.share);
+  if (canNativeShare(data, share) && share) {
+    try {
+      await share.share(data);
+      return "shared";
+    } catch (error) {
+      if (isAbort(error)) return "cancelled";
+    }
+  }
+  const copy = copyText;
+  const ok = await copy(options.url);
+  return ok ? "copied" : "failed";
+}
+
 // src/studio/lib/status.ts
 function canPublish(status) {
   return status === "preview";
@@ -1448,9 +1503,124 @@ function StudioRemoteAudio({
   }, [meeting, participantId]);
   return /* @__PURE__ */ jsxRuntime.jsx("audio", { ref, autoPlay: true, className: "sr-only" });
 }
+function BubbleGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "bubble-group",
+      className: cn("flex min-w-0 flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+var bubbleVariants = classVarianceAuthority.cva(
+  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  {
+    variants: {
+      variant: {
+        default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+        secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+        outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Bubble({
+  variant = "default",
+  align = "start",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "bubble",
+      "data-variant": variant,
+      "data-align": align,
+      className: cn(bubbleVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function BubbleContent({
+  className,
+  render,
+  ...props
+}) {
+  return useRender.useRender({
+    defaultTagName: "div",
+    props: mergeProps.mergeProps(
+      {
+        className: cn(
+          "w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
+          className
+        )
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "bubble-content"
+    }
+  });
+}
+classVarianceAuthority.cva(
+  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4"
+      },
+      align: {
+        start: "left-3",
+        end: "right-3"
+      }
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end"
+    }
+  }
+);
+
+// src/studio/lib/chat-groups.ts
+function groupChatMessages(messages, selfId) {
+  const groups = [];
+  for (const row of messages) {
+    const mine = Boolean(selfId) && row.userId === selfId;
+    const last = groups[groups.length - 1];
+    if (last && last.userId === row.userId && last.mine === mine) {
+      last.rows.push(row);
+      continue;
+    }
+    groups.push({
+      userId: row.userId,
+      name: row.name,
+      mine,
+      rows: [row]
+    });
+  }
+  return groups;
+}
+function senderInitials(name) {
+  const parts = name.trim().split(/\s+/).filter((part) => part.length > 0);
+  if (parts.length === 0) return "?";
+  const first = parts[0];
+  if (parts.length === 1) return first.slice(0, 2).toUpperCase();
+  return `${first[0]}${parts[1][0]}`.toUpperCase();
+}
 function StudioChatPanel({
   meeting,
   selfId,
+  participants,
   isModerator: isModerator2,
   labels
 }) {
@@ -1468,6 +1638,17 @@ function StudioChatPanel({
   );
   const pinned = react.useMemo(() => meeting.pinnedChatMessages(), [meeting, tick]);
   const limit = meeting.chatMaxTextLimit();
+  const pictures = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const row of participants) {
+      if (row.userId) map.set(row.userId, row.picture);
+    }
+    return map;
+  }, [participants]);
+  const groups = react.useMemo(
+    () => groupChatMessages(messages, selfId),
+    [messages, selfId]
+  );
   react.useEffect(() => {
     const list = listRef.current;
     if (!list) return;
@@ -1491,6 +1672,44 @@ function StudioChatPanel({
       );
     }
   }
+  function messageActions(row, mine) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        className: mine ? "text-muted-foreground flex flex-wrap justify-end gap-2 text-xs" : "text-muted-foreground flex flex-wrap gap-2 text-xs",
+        children: [
+          row.isEdited ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.chatEdited }) : null,
+          mine ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setEditingId(row.id);
+                setDraft(row.text);
+              },
+              children: labels.chatEdit
+            }
+          ) : null,
+          isModerator2 || mine ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => void meeting.deleteChatMessage(row.id).catch(() => sonner.toast.error(labels.chatError)),
+              children: labels.chatDelete
+            }
+          ) : null,
+          isModerator2 ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => void meeting.pinChatMessage(row.id, row.pinned !== true).catch(() => sonner.toast.error(labels.chatError)),
+              children: row.pinned ? labels.chatUnpin : labels.chatPin
+            }
+          ) : null
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
     pinned[0] ? /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", className: "bg-muted border-b px-3 py-2 text-sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: labels.chatPinned }),
@@ -1502,7 +1721,7 @@ function StudioChatPanel({
         ref: listRef,
         role: "log",
         "aria-live": "polite",
-        className: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-3",
+        className: "flex min-h-0 flex-1 flex-col gap-3 overflow-auto p-3",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Button,
@@ -1520,48 +1739,42 @@ function StudioChatPanel({
               children: labels.chatLoadOlder
             }
           ),
-          messages.map((row) => {
-            const mine = Boolean(selfId) && row.userId === selfId;
+          groups.map((group) => {
+            const bubbles = group.rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Bubble,
+                {
+                  align: group.mine ? "end" : "start",
+                  variant: group.mine ? "default" : "secondary",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(BubbleContent, { children: row.text })
+                }
+              ),
+              messageActions(row, group.mine)
+            ] }, row.id));
+            if (group.mine) {
+              return /* @__PURE__ */ jsxRuntime.jsx(BubbleGroup, { className: "items-end", children: bubbles }, group.rows[0].id);
+            }
+            const picture = pictures.get(group.userId) ?? null;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: mine ? "self-end text-right" : "self-start",
+                className: "flex max-w-full gap-2 self-start",
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: row.name }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "bg-muted max-w-64 rounded-lg px-2 py-1 text-sm", children: row.text }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground flex flex-wrap justify-end gap-2 text-xs", children: [
-                    row.isEdited ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.chatEdited }) : null,
-                    mine ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => {
-                          setEditingId(row.id);
-                          setDraft(row.text);
-                        },
-                        children: labels.chatEdit
-                      }
-                    ) : null,
-                    isModerator2 || mine ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => void meeting.deleteChatMessage(row.id).catch(() => sonner.toast.error(labels.chatError)),
-                        children: labels.chatDelete
-                      }
-                    ) : null,
-                    isModerator2 ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => void meeting.pinChatMessage(row.id, row.pinned !== true).catch(() => sonner.toast.error(labels.chatError)),
-                        children: row.pinned ? labels.chatUnpin : labels.chatPin
-                      }
-                    ) : null
+                  picture ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: picture,
+                      alt: "",
+                      className: "mt-0.5 size-7 shrink-0 rounded-full object-cover"
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-muted text-muted-foreground mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full text-xs", children: senderInitials(group.name) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mb-1 text-xs", children: group.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx(BubbleGroup, { children: bubbles })
                   ] })
                 ]
               },
-              row.id
+              group.rows[0].id
             );
           })
         ]
@@ -1691,7 +1904,9 @@ function StudioSidePanel({
   onDeny,
   onGrantStage,
   onDenyStage,
-  onTakeOffAir
+  onTakeOffAir,
+  guestUrl,
+  onShareGuestLink
 }) {
   const panelists = participants.filter((row) => isOnStage(row.stageStatus));
   const audience = participants.filter((row) => !isOnStage(row.stageStatus));
@@ -1748,6 +1963,19 @@ function StudioSidePanel({
         labels
       }
     ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-3", children: [
+      guestUrl ? /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "w-full",
+          onClick: onShareGuestLink,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, {}),
+            labels.shareLink
+          ]
+        }
+      ) : null,
       /* @__PURE__ */ jsxRuntime.jsx(
         StudioWaitingRoom,
         {
@@ -2299,58 +2527,6 @@ function TooltipContent({
     }
   ) });
 }
-
-// src/studio/lib/clipboard.ts
-async function copyText(value, clipboard = globalThis.navigator?.clipboard ?? null) {
-  if (!clipboard) return false;
-  try {
-    await clipboard.writeText(value);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-// src/studio/lib/share.ts
-function isAbort(error) {
-  return typeof error === "object" && error !== null && "name" in error && error.name === "AbortError";
-}
-function resolveShareApi(share = typeof navigator === "undefined" ? null : typeof navigator.share === "function" ? navigator : null) {
-  return share ?? null;
-}
-function canNativeShare(data, share = resolveShareApi()) {
-  if (!share) return false;
-  if (typeof share.canShare !== "function") return true;
-  try {
-    return share.canShare(data);
-  } catch {
-    return false;
-  }
-}
-async function shareOrCopyLink(options, deps) {
-  const data = {
-    url: options.url,
-    ...options.title ? { title: options.title } : {},
-    ...options.text ? { text: options.text } : {}
-  };
-  const share = resolveShareApi(deps?.share);
-  if (canNativeShare(data, share) && share) {
-    try {
-      await share.share(data);
-      return "shared";
-    } catch (error) {
-      if (isAbort(error)) return "cancelled";
-    }
-  }
-  const copy = copyText;
-  const ok = await copy(options.url);
-  return ok ? "copied" : "failed";
-}
-
-// src/studio/lib/embed-urls.ts
-function playerWatchUrl(streamId, origin = "https://player.livo.tv") {
-  return `${origin.replace(/\/$/, "")}/${streamId}`;
-}
 function Dialog({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
 }
@@ -2820,7 +2996,6 @@ function StudioToolbar({
   stageEnabled,
   canLeaveStage,
   reducedMotion,
-  playerOrigin,
   onToggleMute,
   onToggleCamera,
   onToggleScreen,
@@ -2944,41 +3119,6 @@ function StudioToolbar({
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, {})
       }
     ) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ControlIcon,
-      {
-        label: labels.share,
-        onClick: () => {
-          void navigator.clipboard.writeText(
-            playerWatchUrl(session.stream.id, playerOrigin)
-          );
-          sonner.toast.success(labels.shareCopied);
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Share2, {})
-      }
-    ),
-    session.role === "moderator" && session.guestUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-      ControlIcon,
-      {
-        label: labels.shareLink,
-        onClick: () => {
-          const url = session.guestUrl;
-          if (!url) return;
-          void shareOrCopyLink({
-            url,
-            title: session.stream.title,
-            text: labels.shareGuestText.replace(
-              "{title}",
-              session.stream.title
-            )
-          }).then((result) => {
-            if (result === "copied") sonner.toast.success(labels.copied);
-            if (result === "failed") sonner.toast.error(labels.shareFailed);
-          });
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, {})
-      }
-    ) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
       ControlIcon,
       {
@@ -3751,6 +3891,22 @@ function StudioRoom({
           trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "destructive", disabled: pending, children: labels.stop })
         }
       ) : null,
+      session.role === "moderator" ? /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "icon-sm",
+          "aria-label": labels.share,
+          onClick: () => {
+            void navigator.clipboard.writeText(
+              playerWatchUrl(session.stream.id, playerOrigin)
+            );
+            sonner.toast.success(labels.shareCopied);
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Share2, {})
+        }
+      ) : null,
       embed ? null : chrome
     ] }),
     !stageEnabled && session.role === "guest" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3838,6 +3994,22 @@ function StudioRoom({
           onTakeOffAir: (userId) => {
             const tile = participants.find((row) => row.userId === userId);
             if (tile) void onSetStage(tile, false);
+          },
+          guestUrl: session.guestUrl,
+          onShareGuestLink: () => {
+            const url = session.guestUrl;
+            if (!url) return;
+            void shareOrCopyLink({
+              url,
+              title: session.stream.title,
+              text: labels.shareGuestText.replace(
+                "{title}",
+                session.stream.title
+              )
+            }).then((result) => {
+              if (result === "copied") sonner.toast.success(labels.copied);
+              if (result === "failed") sonner.toast.error(labels.shareFailed);
+            });
           }
         }
       ) : null
@@ -3856,7 +4028,6 @@ function StudioRoom({
         session,
         meeting,
         labels,
-        playerOrigin,
         muted,
         cameraOn,
         screenOn,
@@ -3886,9 +4057,9 @@ function StudioRoom({
         onCancelShareRequest: () => setShareGrant("idle"),
         onAskStage: () => {
           if (session.role === "moderator") {
-            const userId = self?.userId;
-            if (userId) void meeting.setStageAccess(userId, true);
-            else void meeting.requestStageAccess();
+            void Promise.resolve(meeting.joinStage()).catch(
+              () => sonner.toast.error(labels.stageError)
+            );
             return;
           }
           void meeting.requestStageAccess();
@@ -4636,6 +4807,21 @@ function studioMeetingFromRtk(raw) {
       await meeting.stage?.requestAccess?.();
       notifyStage();
     },
+    async joinStage() {
+      if (currentStageStatus() === "ON_STAGE") {
+        notifyStage();
+        return;
+      }
+      if (meeting.self?.permissions?.stageAccess !== "ALLOWED") {
+        await meeting.stage?.requestAccess?.();
+        notifyStage();
+        return;
+      }
+      await meeting.stage?.join?.();
+      joinedStageLocally = true;
+      await republishCameraIfOn();
+      notifyStage();
+    },
     async leaveStage() {
       await meeting.stage?.leave?.();
       notifyStage();