streemo-video-call-sdk 0.2.4 → 0.2.6

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { PropsWithChildren, Component, ReactNode, ErrorInfo } from 'react';
+export { StreemoThemeProvider, Theme, ThemeMode, ThemeTokens, createTheme, useTheme } from 'streemo-ui-kit-web/theme';
 import { T as TokenProvider, S as ServerAuthConfig } from './sdkConfig-C9Fey7R2.js';
 export { a as SDKError, b as SDKErrorCode, c as ServerTokenProviderOptions, d as TokenProviderContext, V as VideoSDKConfig, e as createServerTokenProvider, f as defaultApiBaseUrl, g as defaultWsBaseUrlFromApi, h as getVideoSDKConfig, i as initVideoSDK, m as mapSDKErrorToUIMessage } from './sdkConfig-C9Fey7R2.js';
 
@@ -223,6 +224,8 @@ declare function useCall({ roomId, enabled }: UseCallParams): {
     hasCameraTrack: boolean;
     toggleMic: () => void;
     toggleCamera: () => void;
+    screenSharing: boolean;
+    toggleScreenShare: () => Promise<void>;
     sendChatMessage: (text: string, senderName?: string) => void;
     editChatMessage: (id: string, text: string) => void;
     deleteChatMessage: (id: string) => void;
@@ -416,6 +419,8 @@ declare function useWebRTCCall(params: UseWebRTCCallParams): {
     hasCameraTrack: boolean;
     toggleMic: () => void;
     toggleCamera: () => void;
+    screenSharing: boolean;
+    toggleScreenShare: () => Promise<void>;
     sendChatMessage: (text: string, senderName?: string) => void;
     editChatMessage: (id: string, text: string) => void;
     deleteChatMessage: (id: string) => void;

package/dist/index.js

@@ -193,17 +193,27 @@ function useStreemoContext() {
 }
 
 // src/theme/StreemoTheme.tsx
+import { createTheme, themeToCssVars } from "streemo-ui-kit-web/theme";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function StreemoTheme({ theme, mode = "light", children }) {
-  const style = {
-    ["--st-color-primary"]: theme?.primary ?? "#635bff",
-    ["--st-color-bg"]: theme?.background ?? (mode === "dark" ? "#111827" : "#ffffff"),
-    ["--st-color-text"]: theme?.text ?? (mode === "dark" ? "#f9fafb" : "#0f172a"),
-    ["--st-radius"]: theme?.radius ?? "10px"
-  };
+  const themeConfig = createTheme({
+    mode,
+    tokens: theme ? {
+      colors: {
+        primary: theme.primary,
+        background: theme.background,
+        text: theme.text
+      },
+      radius: theme.radius ? { md: parseInt(theme.radius, 10) || 10, lg: 12 } : void 0
+    } : void 0
+  });
+  const style = themeToCssVars(themeConfig);
   return /* @__PURE__ */ jsx2("div", { className: `st-theme st-theme--${mode}`, style, children });
 }
 
+// src/index.ts
+import { createTheme as createTheme2, StreemoThemeProvider, useTheme } from "streemo-ui-kit-web/theme";
+
 // src/hooks/useChat.ts
 import { useEffect as useEffect2, useState as useState2 } from "react";
 function useChat() {
@@ -631,6 +641,9 @@ var RENEGOTIATION_RETRY_DELAY_MS = 6e3;
 var RENEGOTIATION_MAX_RETRIES = 3;
 var DISCONNECTED_CLEANUP_DELAY_MS = 1e4;
 var NETWORK_STATS_POLL_MS = 5e3;
+function isVideoTransceiver(t) {
+  return t.kind === "video";
+}
 var AUDIO_CONSTRAINTS = {
   echoCancellation: true,
   noiseSuppression: true,
@@ -820,6 +833,8 @@ function useWebRTCCall(params) {
   const [cameraEnabled, setCameraEnabled] = useState6(true);
   const [hasMicTrack, setHasMicTrack] = useState6(false);
   const [hasCameraTrack, setHasCameraTrack] = useState6(false);
+  const [screenSharing, setScreenSharing] = useState6(false);
+  const screenTrackRef = useRef2(null);
   const clearRenegotiationRetry = useCallback2((targetUserId) => {
     const timer = renegotiationTimersRef.current.get(targetUserId);
     if (timer) {
@@ -1572,6 +1587,83 @@ function useWebRTCCall(params) {
     });
     setCameraEnabled(nextEnabled);
   }, [cameraEnabled]);
+  const stopScreenShare = useCallback2(() => {
+    const stream = localStreamRef.current;
+    if (!stream || !screenTrackRef.current) return;
+    navigator.mediaDevices.getUserMedia({ audio: false, video: VIDEO_CONSTRAINTS }).then((cameraStream) => {
+      const cameraTrack = cameraStream.getVideoTracks()[0];
+      if (!cameraTrack) return;
+      const oldTrack = stream.getVideoTracks()[0];
+      if (oldTrack) {
+        stream.removeTrack(oldTrack);
+        oldTrack.stop();
+      }
+      stream.addTrack(cameraTrack);
+      screenTrackRef.current = null;
+      setScreenSharing(false);
+      setLocalStream(new MediaStream(stream.getTracks()));
+      peersRef.current.forEach((peer) => {
+        const videoSender = peer.getSenders().find((s) => s.track?.kind === "video");
+        if (videoSender) {
+          videoSender.replaceTrack(cameraTrack);
+        } else {
+          const videoTransceiver = peer.getTransceivers().find(isVideoTransceiver);
+          if (videoTransceiver) {
+            videoTransceiver.sender.replaceTrack(cameraTrack);
+          } else {
+            peer.addTrack(cameraTrack, localStreamRef.current);
+          }
+        }
+      });
+      cameraStream.getTracks().filter((t) => t !== cameraTrack).forEach((t) => t.stop());
+    }).catch(() => {
+      setScreenSharing(false);
+      screenTrackRef.current = null;
+    });
+  }, []);
+  const toggleScreenShare = useCallback2(async () => {
+    const stream = localStreamRef.current;
+    if (!stream) return;
+    if (screenSharing) {
+      stopScreenShare();
+      return;
+    }
+    try {
+      const screenStream = await navigator.mediaDevices.getDisplayMedia({
+        video: true,
+        audio: false
+      });
+      const screenTrack = screenStream.getVideoTracks()[0];
+      if (!screenTrack) return;
+      screenTrackRef.current = screenTrack;
+      screenTrack.onended = () => stopScreenShare();
+      const oldVideoTrack = stream.getVideoTracks()[0];
+      if (oldVideoTrack) {
+        stream.removeTrack(oldVideoTrack);
+        oldVideoTrack.stop();
+      }
+      stream.addTrack(screenTrack);
+      setScreenSharing(true);
+      setLocalStream(new MediaStream(stream.getTracks()));
+      peersRef.current.forEach((peer) => {
+        const videoSender = peer.getSenders().find((s) => s.track?.kind === "video");
+        if (videoSender) {
+          videoSender.replaceTrack(screenTrack);
+        } else {
+          const videoTransceiver = peer.getTransceivers().find(isVideoTransceiver);
+          if (videoTransceiver) {
+            videoTransceiver.sender.replaceTrack(screenTrack);
+          } else {
+            peer.addTrack(screenTrack, localStreamRef.current);
+          }
+        }
+      });
+      screenStream.getTracks().filter((t) => t !== screenTrack).forEach((t) => t.stop());
+    } catch {
+      setScreenSharing(false);
+      screenTrackRef.current = null;
+    }
+  }, [screenSharing, stopScreenShare]);
   const sendChatMessage = useCallback2(
     (text, senderName = "\u0413\u043E\u0441\u0442\u044C") => {
       const normalizedText = text.trim();
@@ -1665,6 +1757,8 @@ function useWebRTCCall(params) {
     hasCameraTrack,
     toggleMic,
     toggleCamera,
+    screenSharing,
+    toggleScreenShare,
     sendChatMessage,
     editChatMessage,
     deleteChatMessage,
@@ -1737,11 +1831,12 @@ function ChannelPreview({ channel, active, onSelect }) {
 }
 
 // src/components/ui/LoadingSpinner.tsx
+import { Spinner } from "streemo-ui-kit-web";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function LoadingSpinner({ label = "Loading..." }) {
   return /* @__PURE__ */ jsxs2("div", { className: "st-spinner", role: "status", "aria-live": "polite", children: [
-    /* @__PURE__ */ jsx5("span", { className: "st-spinner__dot" }),
-    /* @__PURE__ */ jsx5("span", { children: label })
+    /* @__PURE__ */ jsx5(Spinner, { size: 20 }),
+    label != null && /* @__PURE__ */ jsx5("span", { children: label })
   ] });
 }
 
@@ -2042,19 +2137,10 @@ function MuteButton() {
 }
 
 // src/components/video/ScreenShareButton.tsx
-import { useState as useState11 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 function ScreenShareButton() {
-  const [sharing, setSharing] = useState11(false);
-  return /* @__PURE__ */ jsx23(
-    "button",
-    {
-      onClick: () => {
-        setSharing((prev) => !prev);
-      },
-      children: sharing ? "Stop share" : "Share screen"
-    }
-  );
+  const call = useCallRoomContext();
+  return /* @__PURE__ */ jsx23("button", { onClick: () => void call.toggleScreenShare(), children: call.screenSharing ? "Stop share" : "Share screen" });
 }
 
 // src/components/video/CallControls.tsx
@@ -2070,12 +2156,10 @@ function CallControls() {
 }
 
 // src/components/ui/Avatar.tsx
+import { Avatar as StreemoAvatar } from "streemo-ui-kit-web";
 import { jsx as jsx25 } from "react/jsx-runtime";
 function Avatar({ name, image, size = 32 }) {
-  if (image) {
-    return /* @__PURE__ */ jsx25("img", { className: "st-avatar", src: image, alt: name, style: { width: size, height: size } });
-  }
-  return /* @__PURE__ */ jsx25("div", { className: "st-avatar st-avatar--fallback", style: { width: size, height: size }, children: name.slice(0, 1).toUpperCase() });
+  return /* @__PURE__ */ jsx25(StreemoAvatar, { name, src: image ?? void 0, size });
 }
 
 // src/components/ui/PresenceBadge.tsx
@@ -2113,7 +2197,7 @@ var ErrorBoundary = class extends Component {
 };
 
 // src/ChatPanel.tsx
-import { useEffect as useEffect8, useMemo as useMemo11, useRef as useRef4, useState as useState12 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo11, useRef as useRef4, useState as useState11 } from "react";
 import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
 function ChatPanel({
   messages,
@@ -2131,9 +2215,9 @@ function ChatPanel({
   onFocusChange,
   placeholder = "Write a message..."
 }) {
-  const [draft, setDraft] = useState12("");
-  const [editingId, setEditingId] = useState12(null);
-  const [editingText, setEditingText] = useState12("");
+  const [draft, setDraft] = useState11("");
+  const [editingId, setEditingId] = useState11(null);
+  const [editingText, setEditingText] = useState11("");
   const listRef = useRef4(null);
   const typingTimeoutRef = useRef4(null);
   const typingLine = useMemo11(() => {
@@ -2373,12 +2457,14 @@ export {
   StreemoClient,
   StreemoProvider,
   StreemoTheme,
+  StreemoThemeProvider,
   Thread,
   TypingIndicator,
   UserStatus,
   VideoCallWidget,
   VideoTile,
   createServerTokenProvider,
+  createTheme2 as createTheme,
   defaultApiBaseUrl,
   defaultWsBaseUrlFromApi,
   getVideoSDKConfig,
@@ -2392,6 +2478,7 @@ export {
   useParticipants,
   usePresence,
   useStreemoContext,
+  useTheme,
   useTyping,
   useWebRTCCall
 };