@whereby.com/browser-sdk 2.0.0-alpha2 → 2.0.0-alpha4

package/dist/lib.cjs.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var heresy = require('heresy');
-var React = require('react');
 var tslib = require('tslib');
+var React = require('react');
 var adapter = require('webrtc-adapter');
 var io = require('socket.io-client');
 var SDPUtils = require('sdp');
@@ -130,7 +130,7 @@ heresy.define("WherebyEmbed", {
         if (!subdomain)
             return this.html `Whereby: Missing subdomain attr.`;
         const url = new URL(room, `https://${subdomain}.whereby.com`);
-        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha2", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
+        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha4", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
         // add to URL if set in any way
         (o, v) => (this[v.toLowerCase()] != null ? Object.assign(Object.assign({}, o), { [v]: this[v.toLowerCase()] }) : o), {}))).forEach(([k, v]) => {
             if (!url.searchParams.has(k) && typeof v === "string") {
@@ -146,13 +146,23 @@ heresy.define("WherebyEmbed", {
     },
 });
 
-var VideoElement = ({ stream, style }) => {
-    const videoEl = React.useCallback((node) => {
-        if (node !== null && node.srcObject !== stream) {
-            node.srcObject = stream;
+var VideoView = (_a) => {
+    var { muted, stream } = _a, rest = tslib.__rest(_a, ["muted", "stream"]);
+    const videoEl = React.useRef(null);
+    React.useEffect(() => {
+        if (!videoEl.current) {
+            return;
+        }
+        if (videoEl.current.srcObject !== stream) {
+            videoEl.current.srcObject = stream;
+        }
+        // Handle muting programatically, not as video attribute
+        // https://stackoverflow.com/questions/14111917/html5-video-muted-but-still-playing
+        if (videoEl.current.muted !== muted) {
+            videoEl.current.muted = Boolean(muted);
         }
-    }, []);
-    return React__default["default"].createElement("video", { ref: videoEl, autoPlay: true, playsInline: true, style: style });
+    }, [muted, stream, videoEl]);
+    return React__default["default"].createElement("video", Object.assign({ ref: videoEl, autoPlay: true, playsInline: true }, rest));
 };
 
 const EVENTS = {
@@ -5456,12 +5466,12 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
             },
         },
         {
-            VideoView: VideoElement,
+            VideoView,
         },
     ];
 }
 
-const sdkVersion = "2.0.0-alpha2";
+const sdkVersion = "2.0.0-alpha4";
 
 exports.sdkVersion = sdkVersion;
 exports.useRoomConnection = useRoomConnection;

package/dist/lib.esm.js

@@ -1,6 +1,6 @@
 import { define, ref } from 'heresy';
-import React, { useCallback, useState, useReducer, useEffect } from 'react';
-import { __awaiter } from 'tslib';
+import { __rest, __awaiter } from 'tslib';
+import React, { useRef, useEffect, useState, useReducer } from 'react';
 import adapter from 'webrtc-adapter';
 import io from 'socket.io-client';
 import SDPUtils from 'sdp';
@@ -115,7 +115,7 @@ define("WherebyEmbed", {
         if (!subdomain)
             return this.html `Whereby: Missing subdomain attr.`;
         const url = new URL(room, `https://${subdomain}.whereby.com`);
-        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha2", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
+        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha4", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
         // add to URL if set in any way
         (o, v) => (this[v.toLowerCase()] != null ? Object.assign(Object.assign({}, o), { [v]: this[v.toLowerCase()] }) : o), {}))).forEach(([k, v]) => {
             if (!url.searchParams.has(k) && typeof v === "string") {
@@ -131,13 +131,23 @@ define("WherebyEmbed", {
     },
 });
 
-var VideoElement = ({ stream, style }) => {
-    const videoEl = useCallback((node) => {
-        if (node !== null && node.srcObject !== stream) {
-            node.srcObject = stream;
+var VideoView = (_a) => {
+    var { muted, stream } = _a, rest = __rest(_a, ["muted", "stream"]);
+    const videoEl = useRef(null);
+    useEffect(() => {
+        if (!videoEl.current) {
+            return;
+        }
+        if (videoEl.current.srcObject !== stream) {
+            videoEl.current.srcObject = stream;
+        }
+        // Handle muting programatically, not as video attribute
+        // https://stackoverflow.com/questions/14111917/html5-video-muted-but-still-playing
+        if (videoEl.current.muted !== muted) {
+            videoEl.current.muted = Boolean(muted);
         }
-    }, []);
-    return React.createElement("video", { ref: videoEl, autoPlay: true, playsInline: true, style: style });
+    }, [muted, stream, videoEl]);
+    return React.createElement("video", Object.assign({ ref: videoEl, autoPlay: true, playsInline: true }, rest));
 };
 
 const EVENTS = {
@@ -5441,11 +5451,11 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
             },
         },
         {
-            VideoView: VideoElement,
+            VideoView,
         },
     ];
 }
 
-const sdkVersion = "2.0.0-alpha2";
+const sdkVersion = "2.0.0-alpha4";
 
 export { sdkVersion, useRoomConnection };

package/dist/types.d.ts

@@ -31,11 +31,12 @@ declare global {
     }
 }
 
-interface VideoElProps {
+interface VideoViewSelfProps {
     stream: MediaStream;
     style?: React.CSSProperties;
 }
-declare const _default: ({ stream, style }: VideoElProps) => JSX.Element;
+type VideoViewProps = VideoViewSelfProps & React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
+declare const _default: ({ muted, stream, ...rest }: VideoViewProps) => JSX.Element;
 
 interface RoomParticipantData {
     displayName: string;
@@ -99,6 +100,6 @@ interface RoomConnectionComponents {
 }
 declare function useRoomConnection(roomUrl: string, roomConnectionOptions: RoomConnectionOptions): [state: RoomState, actions: RoomConnectionActions, components: RoomConnectionComponents];
 
-declare const sdkVersion = "2.0.0-alpha2";
+declare const sdkVersion = "2.0.0-alpha4";
 
 export { sdkVersion, useRoomConnection };