siam-ui-utils 2.2.3 → 2.2.5

package/eslint.config.mjs

@@ -1,41 +1,41 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import pluginReact from 'eslint-plugin-react';
-import pluginReactHooks from 'eslint-plugin-react-hooks';
-import pluginReactRefresh from 'eslint-plugin-react-refresh';
-import { defineConfig } from 'eslint/config';
-
-export default defineConfig([
-  { ignores: ['build', '**/*.d.ts'] },
-  {
-    files: ['**/*.{js,jsx,ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 'latest',
-      sourceType: 'module',
-      globals: globals.browser,
-      parserOptions: {
-        ecmaFeatures: { jsx: true },
-      },
-    },
-    plugins: {
-      react: pluginReact,
-      'react-hooks': pluginReactHooks,
-      'react-refresh': pluginReactRefresh,
-    },
-    rules: {
-      ...js.configs.recommended.rules,
-      ...pluginReact.configs.recommended.rules,
-      ...pluginReact.configs['jsx-runtime'].rules,
-      ...pluginReactHooks.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': [
-        'off',
-        { allowConstantExport: true },
-      ],
-      'react/prop-types': 'off',
-      '@/no-default-export': 'off',
-      'no-unused-vars': 'warn',
-    },
-    settings: { react: { version: 'detect' } },
-  },
-]);
+import js from '@eslint/js';
+import globals from 'globals';
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+import pluginReactRefresh from 'eslint-plugin-react-refresh';
+import { defineConfig } from 'eslint/config';
+
+export default defineConfig([
+  { ignores: ['build', '**/*.d.ts'] },
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: globals.browser,
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    plugins: {
+      react: pluginReact,
+      'react-hooks': pluginReactHooks,
+      'react-refresh': pluginReactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...pluginReact.configs.recommended.rules,
+      ...pluginReact.configs['jsx-runtime'].rules,
+      ...pluginReactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'off',
+        { allowConstantExport: true },
+      ],
+      'react/prop-types': 'off',
+      '@/no-default-export': 'off',
+      'no-unused-vars': 'warn',
+    },
+    settings: { react: { version: 'detect' } },
+  },
+]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "keywords": [
     "ampf-react",
     "ampf-utils",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@types/react-intl": "^3.0.0",
-    "@whereby.com/browser-sdk": "^3.12.18",
+    "@whereby.com/browser-sdk": "^3.13.1",
     "events": "^3.3.0",
     "html5-file-selector": "^2.1.0",
     "prop-types": "^15.8.1",

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/custom-input/CustomInputRadio.jsx

@@ -4,11 +4,10 @@ import './index.css';
 export const CustomInputRadio = ({
   className,
   customClassName,
-  defaultChecked,
+  checked,
   disabled,
   id,
   inline,
-  key,
   label,
   name,
   onChange,
@@ -16,15 +15,14 @@ export const CustomInputRadio = ({
   return (
     <FormGroup
       check
-      key={key}
       inline={inline}
-      className={`custom-radio ${customClassName}`}
+      className={`custom-radio ${customClassName || ''}`}
     >
       <Input
         id={id}
         type="radio"
         name={name}
-        defaultChecked={defaultChecked}
+        checked={checked}
         onChange={onChange}
         disabled={disabled}
         className={className}

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

@@ -1,98 +1,17 @@
-import { useEffect, useRef, useState } from 'react';
-
-export const WhereByRoom = ({
-  url,
-  title = 'Videollamada AMPF',
-  onEvent,
-  style = {},
-  waitingMessage = 'Por favor, espere a que el doctor habilite la sala...',
-  ...props
-}) => {
-  const iframeRef = useRef(null);
-  const [roomEnabled, setRoomEnabled] = useState(false);
-
-  useEffect(() => {
-    let whereby;
-    const loadSDK = async () => {
-      if (!window.Whereby) {
-        // Carga el SDK si no está presente
-        const script = document.createElement('script');
-        script.src = 'https://embed.whereby.com/embed-sdk.js';
-        script.async = true;
-        script.onload = () => {
-          whereby = new window.Whereby(iframeRef.current);
-          whereby.on('roomJoined', (event) => {
-            setRoomEnabled(true);
-            onEvent?.('roomJoined', event);
-          });
-          whereby.on('roomLeft', (event) => {
-            setRoomEnabled(false);
-            onEvent?.('roomLeft', event);
-          });
-          whereby.on('participantJoined', (event) =>
-            onEvent?.('participantJoined', event)
-          );
-          whereby.on('participantLeft', (event) =>
-            onEvent?.('participantLeft', event)
-          );
-          // Agrega más eventos según necesidad
-        };
-        document.body.appendChild(script);
-      } else {
-        whereby = new window.Whereby(iframeRef.current);
-        whereby.on('roomJoined', (event) => {
-          setRoomEnabled(true);
-          onEvent?.('roomJoined', event);
-        });
-        whereby.on('roomLeft', (event) => {
-          setRoomEnabled(false);
-          onEvent?.('roomLeft', event);
-        });
-        whereby.on('participantJoined', (event) =>
-          onEvent?.('participantJoined', event)
-        );
-        whereby.on('participantLeft', (event) =>
-          onEvent?.('participantLeft', event)
-        );
-      }
-    };
-    loadSDK();
-
-    return () => {
-      // Limpieza si es necesario
-    };
-  }, [url, onEvent]);
-
-  if (!roomEnabled) {
-    return (
-      <div
-        style={{
-          ...style,
-          minHeight: '600px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        {waitingMessage}
-      </div>
-    );
-  }
+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 }) => {
   return (
-    <iframe
-      ref={iframeRef}
-      src={url}
-      allow="camera; microphone; fullscreen; speaker; display-capture"
-      style={{
-        width: '100%',
-        height: '100%',
-        border: '0',
-        minHeight: '600px',
-        ...style,
-      }}
-      title={title}
-      {...props}
-    />
+    <WherebyProvider>
+      <Room
+        iframeClass={iframeClass}
+        room={src}
+        onEvent={onEvent}
+        onActions={onActions}
+      />
+    </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'],
+      },
     },
+  },
 });