siam-ui-utils 2.1.12 → 2.1.13

package/index.d.ts

@@ -75,5 +75,5 @@ declare module 'siam-ui-utils' {
   export function TomarFoto(props);
 
   //VIDEO CALL ROOM
-  export function VideoCallRoom(props);
+  export function WherebyRoom(props);
 }

package/package.json

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

package/src/App.jsx

@@ -9,7 +9,7 @@ import { TomarFoto, DropzoneUploader, DropzoneUploaderDniDigital } from './';
 import './index.css';
 import './App.css';
 import './assets/css/vendor/bootstrap.min.css';
-import { VideoCallRoom } from './video-call-room';
+import { VideoCallRoom } from './where-by-room';
 
 const App = () => {
   const [open, setOpen] = useState('0');

package/src/index.js

@@ -5,4 +5,4 @@ export * from './CustomBootstrap';
 export * from './CustomSelectInput';
 export * from './tomar-foto';
 export * as IntlMessages from './IntlMessages';
-export * from './video-call-room';
+export * from './where-by-room';

package/src/where-by-room/constants.js

@@ -0,0 +1,2 @@
+export const ALERT_TIMEOUT = 5; //5 MINUTOS (alerta de tiempo restante)
+export const SESSION_TIMEOUT = 30; //30 MINUTOS

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

@@ -0,0 +1,67 @@
+import React, { useEffect, useRef } from 'react';
+import { WherebyEmbedded } from '@whereby.com/browser-sdk';
+import { ALERT_TIMEOUT, SESSION_TIMEOUT } from './constants';
+
+const WherebyRoom = ({
+  roomUrl,
+  title = 'Sala de consulta',
+  onHostLeft = () => {},
+  onSessionFinished = () => {},
+  timeOut = SESSION_TIMEOUT,
+  alertTimeout = ALERT_TIMEOUT,
+  onAlertTimeout = () => {},
+}) => {
+  const iframeRef = useRef(null);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+
+    const whereby = new WherebyEmbedded(iframe);
+
+    whereby.on('room:participant-left', (event) => {
+      if (event.participant.isHost) {
+        onHostLeft();
+      }
+    });
+
+    const sessionTimeout = setTimeout(
+      () => {
+        onSessionFinished();
+        iframe.remove();
+      },
+      timeOut * 60 * 1000,
+    );
+
+    const sessionAlertTimeout = setTimeout(
+      () => {
+        onAlertTimeout();
+      },
+      alertTimeout * 60 * 1000,
+    );
+
+    return () => {
+      clearTimeout(sessionTimeout);
+      clearTimeout(sessionAlertTimeout);
+      whereby.destroy();
+    };
+  }, []);
+
+  return (
+    <div>
+      <iframe
+        ref={iframeRef}
+        title={title}
+        src={roomUrl}
+        allow="camera; microphone; fullscreen; speaker; display-capture"
+        style={{
+          width: '100%',
+          height: '80vh',
+          border: 0,
+          borderRadius: '12px',
+        }}
+      ></iframe>
+    </div>
+  );
+};
+
+export default WherebyRoom;

package/src/video-call-room/index.jsx

@@ -1,10 +0,0 @@
-export const VideoCallRoom = ({ url, title = 'Videollamada AMPF' }) => {
-  return (
-    <iframe
-      src={url}
-      allow="camera; microphone; fullscreen; speaker; display-capture"
-      style={{ width: '100%', height: '100%', border: '0', minHeight: '600px' }}
-      title={title}
-    />
-  );
-};