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

package/dist/lib.cjs.js

@@ -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-alpha3", 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") {
@@ -147,12 +147,21 @@ heresy.define("WherebyEmbed", {
 });
 
 var VideoView = (_a) => {
-    var { stream } = _a, rest = tslib.__rest(_a, ["stream"]);
-    const videoEl = React.useCallback((node) => {
-        if (node !== null && node.srcObject !== stream) {
-            node.srcObject = stream;
+    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);
         }
-    }, []);
+    }, [muted, stream, videoEl]);
     return React__default["default"].createElement("video", Object.assign({ ref: videoEl, autoPlay: true, playsInline: true }, rest));
 };
 
@@ -5462,7 +5471,7 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     ];
 }
 
-const sdkVersion = "2.0.0-alpha3";
+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 { __rest, __awaiter } from 'tslib';
-import React, { useCallback, useState, useReducer, useEffect } from 'react';
+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-alpha3", 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") {
@@ -132,12 +132,21 @@ define("WherebyEmbed", {
 });
 
 var VideoView = (_a) => {
-    var { stream } = _a, rest = __rest(_a, ["stream"]);
-    const videoEl = useCallback((node) => {
-        if (node !== null && node.srcObject !== stream) {
-            node.srcObject = stream;
+    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);
         }
-    }, []);
+    }, [muted, stream, videoEl]);
     return React.createElement("video", Object.assign({ ref: videoEl, autoPlay: true, playsInline: true }, rest));
 };
 
@@ -5447,6 +5456,6 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     ];
 }
 
-const sdkVersion = "2.0.0-alpha3";
+const sdkVersion = "2.0.0-alpha4";
 
 export { sdkVersion, useRoomConnection };

package/dist/types.d.ts

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