@livo-tv/sdk 1.2.0 → 1.2.1

package/dist/studio/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
-import { Loader2, Share2, MicOff, Mic, Video, VideoOff, Settings, X, Link2, EyeOff, Eye, Users, MonitorUp, MessageSquare, Maximize, PictureInPicture2, PhoneOff, Undo2, Volume2, XIcon, Pin, MessageSquareOff, MoreVertical } from 'lucide-react';
+import { Loader2, Share2, MicOff, Mic, Video, VideoOff, Settings, X, Link2, EyeOff, Eye, MonitorUp, MessageSquare, Users, Maximize, PictureInPicture2, PhoneOff, Undo2, Volume2, XIcon, Pin, MessageSquareOff, MoreVertical } from 'lucide-react';
 import { toast } from 'sonner';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { clsx } from 'clsx';
@@ -2188,7 +2188,7 @@ function BubbleGroup({ className, ...props }) {
   );
 }
 var bubbleVariants = 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",
+  "group/bubble relative flex w-max max-w-[80%] flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
   {
     variants: {
       variant: {
@@ -2233,7 +2233,7 @@ function BubbleContent({
     props: 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",
+          "w-max max-w-full overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed break-words 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
         )
       },
@@ -2585,7 +2585,7 @@ function StudioSidePanel({
   const panelists = participants.filter((row) => isOnStage(row.stageStatus));
   const audience = participants.filter((row) => !isOnStage(row.stageStatus));
   return /* @__PURE__ */ jsxs("aside", { className: "bg-background flex min-h-0 w-full flex-1 flex-col border-t md:w-80 md:flex-none md:border-l md:border-t-0", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex border-b", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex", children: [
       /* @__PURE__ */ jsxs(
         Button,
         {
@@ -3239,14 +3239,24 @@ function StudioToolbar({
         children: selfStageStatus === "ON_STAGE" ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
       }
     ) : null,
-    session.role === "guest" && stageEnabled && selfStageStatus !== "ON_STAGE" ? /* @__PURE__ */ jsx(
+    session.role === "guest" && stageEnabled ? /* @__PURE__ */ jsx(
       ControlIcon,
       {
-        label: selfStageStatus === "REQUESTED_TO_JOIN_STAGE" ? labels.stageRequested : labels.askToGoOnAir,
+        label: selfStageStatus === "ON_STAGE" ? labels.goOffAir : selfStageStatus === "REQUESTED_TO_JOIN_STAGE" ? labels.stageRequested : labels.askToGoOnAir,
         pressed: selfStageStatus === "REQUESTED_TO_JOIN_STAGE",
-        disabled: selfStageStatus === "REQUESTED_TO_JOIN_STAGE",
-        onClick: onAskStage,
-        children: /* @__PURE__ */ jsx(Users, {})
+        disabled: selfStageStatus === "REQUESTED_TO_JOIN_STAGE" || selfStageStatus === "ON_STAGE" && !canLeaveStage,
+        onClick: () => {
+          if (selfStageStatus === "ON_STAGE") {
+            if (!canLeaveStage) {
+              toast.message(labels.offAirLastVisible);
+              return;
+            }
+            onLeaveStage();
+            return;
+          }
+          onAskStage();
+        },
+        children: selfStageStatus === "ON_STAGE" ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
       }
     ) : null,
     showScreenControl ? canShareFreely ? /* @__PURE__ */ jsx(
@@ -5255,7 +5265,15 @@ function studioMeetingFromRtk(raw) {
         notifyStage();
         return;
       }
-      await meeting.stage?.join?.();
+      try {
+        await meeting.stage?.join?.();
+      } catch {
+        const userId = meeting.self?.userId;
+        if (userId) {
+          await meeting.stage?.grantAccess?.([userId]);
+        }
+        await meeting.stage?.join?.();
+      }
       joinedStageLocally = true;
       await republishCameraIfOn();
       notifyStage();
@@ -5545,7 +5563,11 @@ function useRealtimeKitMeeting(authToken, generation = 0) {
   const [meeting, setMeeting] = useState(null);
   const [error, setError] = useState(null);
   useEffect(() => {
-    if (!authToken) return;
+    if (!authToken) {
+      setMeeting(null);
+      setError(null);
+      return;
+    }
     let cancelled = false;
     let handle = null;
     setError(null);
@@ -5890,9 +5912,9 @@ function LivoGuestStudio({
         setError(err instanceof Error ? err.message : lobbyLabels.joinError);
         setWaitingForHost(false);
       }
-      setJoining(false);
     } finally {
       joinInFlight.current = false;
+      setJoining(false);
     }
   }, [apiUrl, displayName, guestId, lobbyLabels, token]);
   useEffect(() => {
@@ -5968,6 +5990,10 @@ function LivoGuestStudio({
       onRejoin: () => {
         setSession(null);
         setSessionGen((n) => n + 1);
+        setJoining(false);
+        setWaitingForHost(false);
+        setError(null);
+        joinInFlight.current = false;
       },
       reducedMotion,
       labels,