@snapcall/stream-ui 1.28.0 → 1.28.1

package/dist/stream-ui.esm.js

@@ -1880,7 +1880,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     }
     async getTransport(kind, direction) {
         if (!this.streamerMediasoup || !this.protoo) throw new Error('streamerMediasoup not initialized');
-        let transport = this.mediasoupTransport[`${kind}-${direction}`];
+        let transport = this.mediasoupTransport[direction];
         if (!transport) {
             try {
                 const promise = this.streamerMediasoup.createTransport(this.protoo, direction);
@@ -1889,7 +1889,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
                     kind: kind,
                     createPromise: promise
                 };
-                this.mediasoupTransport[`${kind}-${direction}`] = transport;
+                this.mediasoupTransport[direction] = transport;
                 transport.transport = await promise;
                 if (transport.transport) this.listenWebRTCTransportStates(transport);
             } catch (err) {
@@ -2497,7 +2497,6 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             this.webcam.facingMode = config.facingMode;
         } else {
             if (config?.device) this.webcam.device = config.device;
-            $c31e3fb4360572af$var$log.warn('enableVideo', 'default deviceId', this.webcam.device?.deviceId);
             optionalParam.deviceId = {
                 ideal: this.webcam.device?.deviceId
             };
@@ -3980,6 +3979,7 @@ class $e96d119a19ed0c6c$export$45fabd1ce5e673de {
         this.video.addEventListener('enterpictureinpicture', this.onEnterPictureInPicture.bind(this));
         this.video.addEventListener('leavepictureinpicture', this.onLeavePictureInPicture.bind(this));
         this.tiles = [];
+        this.missingVideoWarnings = {};
     }
     async start() {
         if (this.tiles.length) {
@@ -4010,6 +4010,12 @@ class $e96d119a19ed0c6c$export$45fabd1ce5e673de {
         this.started = false;
         this.video.srcObject = null;
     }
+    warnMissingVideo(tileId) {
+        if (!this.missingVideoWarnings[tileId]) {
+            this.missingVideoWarnings[tileId] = '1';
+            console.warn(`MultiPiP: No video found for peer ${tileId}`);
+        }
+    }
     draw() {
         if (this.ctx && this.started) {
             this.ctx.fillStyle = '#1f1f1f';
@@ -4017,7 +4023,10 @@ class $e96d119a19ed0c6c$export$45fabd1ce5e673de {
             if (this.tiles.length) {
                 this.tiles.forEach((tile, index)=>{
                     const tileVideo = document.body.querySelectorAll(`[data-peer-id='${tile.id}'] video`)[0];
-                    if (!tileVideo) return console.warn(`MultiPiP: No video found for peer ${tile.id}`);
+                    if (!tileVideo) {
+                        this.warnMissingVideo(tile.id);
+                        return;
+                    }
                     const tileRect = this.layout?.tileRects[index];
                     if (!tileRect) return;
                     this.ctx?.save();
@@ -6352,6 +6361,12 @@ const $580bffc02c115932$export$12201ede76c4c5e1 = ()=>{
                 const base64Image = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).captureVideo(videoElementRef.current);
                 try {
                     const uploaded = await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).saveCapture(base64Image);
+                    await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).createEvents([
+                        {
+                            filename: uploaded.filename,
+                            type: 'image'
+                        }
+                    ]);
                     await (0, $c9e496369b59be7a$export$2f377c2162fd02b2).sendCustomMessageToAll({
                         type: 'snapshot',
                         imageSrc: uploaded.url
@@ -7125,6 +7140,7 @@ const $0707965973625e01$export$f36e83cafa401ab5 = ({ stream: stream, width: widt
         onSnapshot: ()=>snapshot.trigger({
                 videoElementRef: videoElementRef
             }),
+        "data-peer-id": stream.id,
         children: [
             /*#__PURE__*/ (0, $3Sbms$jsx)((0, $7ec04c1818c68245$export$d574f5511ec1d79a), {
                 ref: videoElementRef,

package/dist/stream-ui.js

@@ -1886,7 +1886,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     }
     async getTransport(kind, direction) {
         if (!this.streamerMediasoup || !this.protoo) throw new Error('streamerMediasoup not initialized');
-        let transport = this.mediasoupTransport[`${kind}-${direction}`];
+        let transport = this.mediasoupTransport[direction];
         if (!transport) {
             try {
                 const promise = this.streamerMediasoup.createTransport(this.protoo, direction);
@@ -1895,7 +1895,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
                     kind: kind,
                     createPromise: promise
                 };
-                this.mediasoupTransport[`${kind}-${direction}`] = transport;
+                this.mediasoupTransport[direction] = transport;
                 transport.transport = await promise;
                 if (transport.transport) this.listenWebRTCTransportStates(transport);
             } catch (err) {
@@ -2503,7 +2503,6 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             this.webcam.facingMode = config.facingMode;
         } else {
             if (config?.device) this.webcam.device = config.device;
-            $1dedebd5ff3002eb$var$log.warn('enableVideo', 'default deviceId', this.webcam.device?.deviceId);
             optionalParam.deviceId = {
                 ideal: this.webcam.device?.deviceId
             };
@@ -3986,6 +3985,7 @@ class $21395e477f83709c$export$45fabd1ce5e673de {
         this.video.addEventListener('enterpictureinpicture', this.onEnterPictureInPicture.bind(this));
         this.video.addEventListener('leavepictureinpicture', this.onLeavePictureInPicture.bind(this));
         this.tiles = [];
+        this.missingVideoWarnings = {};
     }
     async start() {
         if (this.tiles.length) {
@@ -4016,6 +4016,12 @@ class $21395e477f83709c$export$45fabd1ce5e673de {
         this.started = false;
         this.video.srcObject = null;
     }
+    warnMissingVideo(tileId) {
+        if (!this.missingVideoWarnings[tileId]) {
+            this.missingVideoWarnings[tileId] = '1';
+            console.warn(`MultiPiP: No video found for peer ${tileId}`);
+        }
+    }
     draw() {
         if (this.ctx && this.started) {
             this.ctx.fillStyle = '#1f1f1f';
@@ -4023,7 +4029,10 @@ class $21395e477f83709c$export$45fabd1ce5e673de {
             if (this.tiles.length) {
                 this.tiles.forEach((tile, index)=>{
                     const tileVideo = document.body.querySelectorAll(`[data-peer-id='${tile.id}'] video`)[0];
-                    if (!tileVideo) return console.warn(`MultiPiP: No video found for peer ${tile.id}`);
+                    if (!tileVideo) {
+                        this.warnMissingVideo(tile.id);
+                        return;
+                    }
                     const tileRect = this.layout?.tileRects[index];
                     if (!tileRect) return;
                     this.ctx?.save();
@@ -6358,6 +6367,12 @@ const $b7b8f2e5b7552341$export$12201ede76c4c5e1 = ()=>{
                 const base64Image = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).captureVideo(videoElementRef.current);
                 try {
                     const uploaded = await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).saveCapture(base64Image);
+                    await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).createEvents([
+                        {
+                            filename: uploaded.filename,
+                            type: 'image'
+                        }
+                    ]);
                     await (0, $c48c1ecc38fed4e9$export$2f377c2162fd02b2).sendCustomMessageToAll({
                         type: 'snapshot',
                         imageSrc: uploaded.url
@@ -7131,6 +7146,7 @@ const $75b49da54f729405$export$f36e83cafa401ab5 = ({ stream: stream, width: widt
         onSnapshot: ()=>snapshot.trigger({
                 videoElementRef: videoElementRef
             }),
+        "data-peer-id": stream.id,
         children: [
             /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $66c45b20958474ec$export$d574f5511ec1d79a), {
                 ref: videoElementRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapcall/stream-ui",
-  "version": "1.28.0",
+  "version": "1.28.1",
   "description": "",
   "source": "src/index.tsx",
   "main": "dist/stream-ui.js",