siam-ui-utils 2.2.4 → 2.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "keywords": [
     "ampf-react",
     "ampf-utils",

package/src/App.jsx

@@ -81,7 +81,7 @@ const App = () => {
           <AccordionHeader targetId="4">Video Call Room</AccordionHeader>
           <AccordionBody accordionId="4">
             <WhereByRoom
-              url="https://whereby.com/test-ampf-room"
+              src="https://whereby.com/test-ampf-room"
               title="Videollamada de ejemplo"
             />
           </AccordionBody>

package/src/where-by-room/index.jsx

@@ -1,71 +1,17 @@
-import { useEffect, useRef } from 'react';
+import { WherebyProvider } from '@whereby.com/browser-sdk/react';
 import '@whereby.com/browser-sdk/embed';
+import Room from './room';
 
 export const WhereByRoom = ({ src, onEvent, onActions, iframeClass }) => {
-  const wherebyRef = useRef(null);
-
-  useEffect(() => {
-    const elm = wherebyRef.current;
-    if (!elm) return;
-
-    if (onActions) {
-      onActions({
-        endMeeting: () => elm.endMeeting(),
-        knock: () => elm.knock(),
-        cancelKnock: () => elm.cancelKnock(),
-        leaveRoom: () => elm.leaveRoom(),
-        startRecording: () => elm.startRecording(),
-        stopRecording: () => elm.stopRecording(),
-        startStreaming: () => elm.startStreaming(),
-        stopStreaming: () => elm.stopStreaming(),
-        startLiveTranscription: () => elm.startLiveTranscription(),
-        stopLiveTranscription: () => elm.stopLiveTranscription(),
-        toggleCamera: (enabled) => elm.toggleCamera(enabled),
-        toggleMicrophone: (enabled) => elm.toggleMicrophone(enabled),
-        toggleScreenshare: (enabled) => elm.toggleScreenshare(enabled),
-        toggleChat: (enabled) => elm.toggleChat(enabled),
-      });
-    }
-
-    const events = [
-      'ready',
-      'join',
-      'leave',
-      'participant_join',
-      'participant_leave',
-      'microphone_toggle',
-      'camera_toggle',
-      'screenshare_toggle',
-      'chat_toggle',
-      'people_toggle',
-      'pip_toggle',
-      'deny_device_permission',
-      'streaming_status_change',
-      'connection_status_change',
-      'meeting_end',
-    ];
-    function handleEvent(e) {
-      if (onEvent) onEvent(e.type, e.detail);
-    }
-    events.forEach((ev) => elm.addEventListener(ev, handleEvent));
-    return () => {
-      events.forEach((ev) => elm.removeEventListener(ev, handleEvent));
-    };
-  }, [onEvent, onActions]);
-
   return (
-    <div className={iframeClass}>
-      <whereby-embed
-        ref={wherebyRef}
-        class={iframeClass}
-        room={src}
-        chat="on"
-        screenshare="on"
-        audio="on"
-        video="on"
-        allow="camera; microphone; fullscreen"
+    <WherebyProvider>
+      <Room
+        src={src}
+        onEvent={onEvent}
+        onActions={onActions}
+        iframeClass={iframeClass}
       />
-    </div>
+    </WherebyProvider>
   );
 };
 export default WhereByRoom;

package/src/where-by-room/room.jsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef } from 'react';
+import '@whereby.com/browser-sdk/embed';
+
+export const Room = ({ src, onEvent, onActions, iframeClass }) => {
+  const wherebyRef = useRef(null);
+
+  useEffect(() => {
+    const elm = wherebyRef.current;
+    if (!elm) return;
+
+    if (onActions) {
+      onActions({
+        endMeeting: () => elm.endMeeting(),
+        knock: () => elm.knock(),
+        cancelKnock: () => elm.cancelKnock(),
+        leaveRoom: () => elm.leaveRoom(),
+        startRecording: () => elm.startRecording(),
+        stopRecording: () => elm.stopRecording(),
+        startStreaming: () => elm.startStreaming(),
+        stopStreaming: () => elm.stopStreaming(),
+        startLiveTranscription: () => elm.startLiveTranscription(),
+        stopLiveTranscription: () => elm.stopLiveTranscription(),
+        toggleCamera: (enabled) => elm.toggleCamera(enabled),
+        toggleMicrophone: (enabled) => elm.toggleMicrophone(enabled),
+        toggleScreenshare: (enabled) => elm.toggleScreenshare(enabled),
+        toggleChat: (enabled) => elm.toggleChat(enabled),
+      });
+    }
+
+    const events = [
+      'ready',
+      'join',
+      'leave',
+      'participant_join',
+      'participant_leave',
+      'microphone_toggle',
+      'camera_toggle',
+      'screenshare_toggle',
+      'chat_toggle',
+      'people_toggle',
+      'pip_toggle',
+      'deny_device_permission',
+      'streaming_status_change',
+      'connection_status_change',
+      'meeting_end',
+    ];
+    function handleEvent(e) {
+      if (onEvent) onEvent(e.type, e.detail);
+    }
+    events.forEach((ev) => elm.addEventListener(ev, handleEvent));
+    return () => {
+      events.forEach((ev) => elm.removeEventListener(ev, handleEvent));
+    };
+  }, [onEvent, onActions]);
+
+  return (
+    <div className={iframeClass}>
+      <whereby-embed
+        ref={wherebyRef}
+        class={iframeClass}
+        room={src}
+        chat="on"
+        screenshare="on"
+        audio="on"
+        video="on"
+        allow="camera; microphone; fullscreen"
+      />
+    </div>
+  );
+};
+export default Room;

package/vite.config.ts

@@ -1,19 +1,22 @@
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vitest/config";
-import commonjs from 'vite-plugin-commonjs'
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vitest/config';
+import commonjs from 'vite-plugin-commonjs';
 
 export default defineConfig({
-    plugins: [react(), commonjs()],
-    server: {
-        port: 5173,
-        open: true,
-        hmr: true
-    },
-    css: {
-        preprocessorOptions: {
-            scss: {
-                silenceDeprecations: ['legacy-js-api'],
-            },
-        },
+  define: {
+    'process.env': {},
+  },
+  plugins: [react(), commonjs()],
+  server: {
+    port: 5173,
+    open: true,
+    hmr: true,
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: ['legacy-js-api'],
+      },
     },
+  },
 });