@daily-co/daily-vcs-web - npm Package Compare versions

Comparing version 0.0.2-alpha.4 to 0.0.2-alpha.5

dist/index.cjs.js

@@ -1,1 +0,1 @@
-"use strict";function e(e,t,s,i){return new(s||(s=Promise))((function(a,r){function o(e){try{l(i.next(e))}catch(e){r(e)}}function n(e){try{l(i.throw(e))}catch(e){r(e)}}function l(e){var t;e.done?a(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(o,n)}l((i=i.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const t=(e,t)=>{if(!e||!t||0===t)return{w:0,h:0};const{width:s,height:i}=e.getBoundingClientRect();return s/i>t?{w:Math.floor(i*t),h:i}:{w:s,h:Math.floor(s/t)}},s=e=>["off","blocked"].includes(e);function i(e,t){return`${e.session_id}${t?"_sshare":""}`}const a=(e,t,a="video")=>{var r,o,n;const l=null===(r=null==e?void 0:e.tracks)||void 0===r?void 0:r[a],c="screenVideo"===a;return{id:i(e,c),type:c?"screenshare":"camera",displayName:c?"":e.user_name||"Guest",dominant:t,paused:!!l&&s(null==l?void 0:l.state),pausedByUser:null!==(n=null===(o=null==l?void 0:l.off)||void 0===o?void 0:o.byUser)&&void 0!==n&&n,track:null==l?void 0:l.persistentTrack}},r=(e,t,a=!1)=>{var r,o,n,l,c,d,h;return{id:e.session_id,displayName:e.user_name||"Guest",video:{id:i(e,!1),dominant:t,paused:s(a?null!==(n=null===(o=null===(r=null==e?void 0:e.tracks)||void 0===r?void 0:r.rmpVideo)||void 0===o?void 0:o.state)&&void 0!==n?n:"off":null===(c=null===(l=null==e?void 0:e.tracks)||void 0===l?void 0:l.video)||void 0===c?void 0:c.state)},audio:{},screenshareVideo:{id:i(e,!0),dominant:t,paused:s(null===(h=null===(d=null==e?void 0:e.tracks)||void 0===d?void 0:d.screenVideo)||void 0===h?void 0:h.state)},screenshareAudio:{}}},o=16/9;exports.DailyVCSWebRenderer=class{constructor(e,s,i,a){var r,n,l;if(this.fps=30,this.paramValues={},this.activeVideoInputSlots=[],this.sources={videoSlots:[],assetImages:{}},this.maxVideoInputSlots=20,this.callbacks={},this.aspectRatio=o,this.includePausedVideo=!0,this.knownNonScreenshareVideoInputIds=new Set,this.vcsState="idle",e||console.error("VCSMeetingRenderer constructor needs a Daily callObject"),this.callObject=e,s&&"function"==typeof s.startDOMOutputAsync){this.comp=s,this.getAssetUrlCb=a.getAssetUrlCb,this.webFrameCb=null!==(r=null==a?void 0:a.webFrameCb)&&void 0!==r?r:void 0,this.rootEl=i,this.viewportSize=null!==(n=null==a?void 0:a.viewportSize)&&void 0!==n?n:{w:1280,h:720},(null==a?void 0:a.aspectRatio)&&(this.aspectRatio=a.aspectRatio,this.viewportSize=t(i,this.aspectRatio)),(null==a?void 0:a.defaultParams)&&(this.defaultParams=a.defaultParams),(null==a?void 0:a.defaultAssets)&&(this.defaultAssets=a.defaultAssets,this.updateImageSources(this.defaultAssets)),(null==a?void 0:a.maxVideoInputSlots)&&(this.maxVideoInputSlots=a.maxVideoInputSlots),(null==a?void 0:a.fps)&&(this.fps=a.fps),(null==a?void 0:a.callbacks)&&(this.callbacks=a.callbacks),Array.isArray(null==a?void 0:a.participantIds)&&(this.participantIds=a.participantIds),this.includePausedVideo=null===(l=null==a?void 0:a.includePausedVideo)||void 0===l||l,this.recomputeOutputScaleFactor();for(let e=0;e<this.maxVideoInputSlots;e++)this.setActiveVideoInput(e,!1)}else console.error("VCSMeetingRenderer constructor needs a VCS composition")}startResizeObserver(){this.resizeObserver=new ResizeObserver((e=>{e&&e.length>0&&this.rootDisplaySizeChanged()})),this.resizeObserver.observe(this.rootEl)}stopResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}get rootElement(){return this.rootEl}get ratio(){return this.aspectRatio}get state(){return this.vcsState}get vcsApiInstance(){return this.vcsApi}get composition(){return this.comp}get participants(){return this.participantIds}get params(){return this.paramValues}get size(){return this.viewportSize}get imageSources(){return this.sources.assetImages}recomputeOutputScaleFactor(){const e=this.rootEl.clientWidth,t=this.rootEl.clientHeight;if(!e||!t)return;const s=this.viewportSize.w/this.viewportSize.h;this.scaleFactor=s>=1?e/this.viewportSize.w:t/this.viewportSize.h}rootDisplaySizeChanged(){this.recomputeOutputScaleFactor(),this.vcsApi&&this.vcsApi.setScaleFactor(this.scaleFactor)}setupDefaultSources(){return e(this,void 0,void 0,(function*(){this.sources={videoSlots:[],assetImages:{}}}))}placeVideoSourceInDOM(e,t){e.setAttribute("style","display: none;"),t&&e.setAttribute("data-video-remote-track-id",t),this.rootEl.appendChild(e)}handleActiveSpeakerChange(){this.handleParticipantsChange()}handleParticipantsChange(){var e,t,i,o;const n=Object.fromEntries(Object.values(this.callObject.participants()).map((e=>[e.session_id,e]))),l=Array.isArray(this.participantIds)?this.participantIds.map((e=>n[e])).filter(Boolean):Object.values(n),c=[],d=[],h=new Map,p=this.includePausedVideo,{peerId:u}=this.callObject.getActiveSpeaker();for(const n of l){const l=n.session_id===u;"remote-media-player"===(null==n?void 0:n.participantType)?c.push(a(n,l,"rmpVideo")):(!p&&s(null===(t=null===(e=null==n?void 0:n.tracks)||void 0===e?void 0:e.video)||void 0===t?void 0:t.state)||c.push(a(n,l)),!p&&s(null===(o=null===(i=null==n?void 0:n.tracks)||void 0===i?void 0:i.screenVideo)||void 0===o?void 0:o.state)||d.push(a(n,l,"screenVideo"))),h.set(n.session_id,r(n,l,"remote-media-player"===(null==n?void 0:n.participantType)))}this.applyTracks([...c,...d]),this.vcsApi.setRoomPeerDescriptionsById(h)}setupEventListeners(){this.callObject.on("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-left",this.handleParticipantsChange.bind(this)),this.callObject.on("active-speaker-change",this.handleActiveSpeakerChange.bind(this))}removeEventListeners(){this.callObject.off("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-left",this.handleParticipantsChange.bind(this)),this.callObject.off("active-speaker-change",this.handleActiveSpeakerChange.bind(this))}start(){return e(this,void 0,void 0,(function*(){var e,t;this.comp&&(this.sources||(yield this.setupDefaultSources()),this.vcsApi=yield this.comp.startDOMOutputAsync(this.rootEl,this.viewportSize.w,this.viewportSize.h,this.sources,{errorCb:this.onError.bind(this),getAssetUrlCb:this.getAssetUrlCb,webFrameCb:this.webFrameCb,fps:this.fps,scaleFactor:this.scaleFactor,enablePreload:!0}),this.vcsState="started",this.handleParticipantsChange(),this.setupEventListeners(),this.sendActiveVideoInputSlots(),this.sendParams(Object.assign(Object.assign({},this.paramValues),this.defaultParams)),this.rootDisplaySizeChanged(),null===(t=(e=this.callbacks).onStart)||void 0===t||t.call(e),this.startResizeObserver())}))}stop(){var e,t;this.vcsApi&&(this.removeEventListeners(),this.vcsApi.stop(),this.vcsState="stopped",null===(t=(e=this.callbacks).onStop)||void 0===t||t.call(e),this.stopResizeObserver())}onError(e){var t,s;console.error("VCS composition error: ",e),this.vcsState="error",null===(s=(t=this.callbacks).onError)||void 0===s||s.call(t,e)}setActiveVideoInput(e,t,s="",i="",a=!1,r=!1,o=!1){this.activeVideoInputSlots[e]=!!t&&{id:s||"",type:a?"screenshare":"camera",displayName:a?"":i,paused:r,dominant:o}}sendActiveVideoInputSlots(){if(!this.vcsApi)return;const e=[];for(const t of this.activeVideoInputSlots)"object"==typeof t?e.push(t):e.push(!1);this.vcsApi.setActiveVideoInputSlots(e)}sendParam(e,t){var s,i;this.vcsApi&&(this.vcsApi.setParamValue(e,t),null===(i=(s=this.callbacks).onParamsChanged)||void 0===i||i.call(s,this.paramValues)),this.paramValues[e]=t}sendParams(e,t="merge"){"replace"===t&&(this.paramValues={}),Object.entries(e).forEach((([e,t])=>this.sendParam(e,t)))}sendUpdateImageSources(){this.vcsApi&&this.vcsApi.updateImageSources(this.sources)}updateImageSources(){return e(this,arguments,void 0,(function*(e={},t="replace"){const s=Object.entries(e).map((([e,t])=>new Promise(((s,i)=>{const a=new Image;a.onload=()=>s({name:e,image:a}),a.onerror=()=>{console.error(`Image load failed, asset ${e}`),i(new Error(`Image load failed, asset ${e}`))},a.src=t}))));try{const e=(yield Promise.all(s)).reduce(((e,t)=>(e[t.name]=t.image,e)),{});if("merge"===t)this.sources.assetImages=Object.assign(Object.assign({},this.sources.assetImages),e);else{if("replace"!==t)return void console.error('Invalid mergeType. Please use either "merge" or "replace".');this.sources.assetImages=e}this.sendUpdateImageSources()}catch(e){console.error(e)}}))}applyTracks(e){var t,s,i,a;if(!this.sources||!e)return;const r=this.sources.videoSlots,o=[];for(const i of e){const e="screenshare"===i.type;if(!i.track&&(!this.includePausedVideo||e||!this.knownNonScreenshareVideoInputIds.has(i.id)))continue;const a=r.find((e=>e.id===i.id));if(a&&(null===(t=a.track)||void 0===t?void 0:t.id)===(null===(s=i.track)||void 0===s?void 0:s.id))o.push(Object.assign(Object.assign({},a),{dominant:i.dominant,paused:i.paused,displayName:i.displayName}));else{let t;if(i.track){const e=new MediaStream([i.track]);(null==a?void 0:a.element)?t=a.element:(t=document.createElement("video"),this.placeVideoSourceInDOM(t,i.track.id)),t.srcObject=e,t.setAttribute("autoplay","true"),t.setAttribute("playsinline","true"),t.setAttribute("controls","false")}o.push(Object.assign(Object.assign({},i),{element:t})),e||this.knownNonScreenshareVideoInputIds.add(i.id)}}r.filter((e=>o.every((t=>t.id!==e.id)))).forEach((e=>{var t,s;null===(s=this.rootEl.querySelector(`[data-video-remote-track-id="${null===(t=null==e?void 0:e.track)||void 0===t?void 0:t.id}"]`))||void 0===s||s.remove()}));let n=o.length!==r.length;if(!n)for(let e=0;e<o.length;e++){const t=o[e],s=r[e];if(t.id!==s.id||t.paused!==s.paused||t.dominant!==s.dominant||t.displayName!==s.displayName||(null===(i=t.track)||void 0===i?void 0:i.id)!==(null===(a=s.track)||void 0===a?void 0:a.id)){n=!0;break}}if(n){this.sources.videoSlots=o,this.sendUpdateImageSources();for(let e=0;e<20;e++){const t=o[e];t?this.setActiveVideoInput(e,!0,t.id,t.displayName,"screenshare"===t.type,t.paused,t.dominant):this.setActiveVideoInput(e,!1)}this.sendActiveVideoInputSlots(),this.rootDisplaySizeChanged()}}updateAspectRatio(e){this.aspectRatio=e,this.viewportSize=t(this.rootEl,this.aspectRatio),"started"===this.vcsState&&(this.stop(),this.start())}updateParticipantIds(e,t="replace"){this.participantIds="merge"===t?[...new Set([...this.participantIds,...e])]:e,"started"===this.vcsState&&this.handleParticipantsChange()}};
+"use strict";function e(e,t,s,i){return new(s||(s=Promise))((function(a,r){function o(e){try{c(i.next(e))}catch(e){r(e)}}function n(e){try{c(i.throw(e))}catch(e){r(e)}}function c(e){var t;e.done?a(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(o,n)}c((i=i.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const t=(e,t)=>{if(!e||!t||0===t)return{w:0,h:0};const{width:s,height:i}=e.getBoundingClientRect();return s/i>t?{w:Math.floor(i*t),h:i}:{w:s,h:Math.floor(s/t)}},s=e=>["off","blocked"].includes(e);function i(e,t){return`${e.session_id}${t?"_sshare":""}`}const a=(e,t,a="video")=>{var r,o,n;const c=null===(r=null==e?void 0:e.tracks)||void 0===r?void 0:r[a],l="screenVideo"===a;return{id:i(e,l),type:l?"screenshare":"camera",displayName:l?"":e.user_name||"Guest",dominant:t,paused:!!c&&s(null==c?void 0:c.state),pausedByUser:null!==(n=null===(o=null==c?void 0:c.off)||void 0===o?void 0:o.byUser)&&void 0!==n&&n,track:null==c?void 0:c.persistentTrack}},r=(e,t,a=!1)=>{var r,o,n,c,l,d,h;return{id:e.session_id,displayName:e.user_name||"Guest",video:{id:i(e,!1),dominant:t,paused:s(a?null!==(n=null===(o=null===(r=null==e?void 0:e.tracks)||void 0===r?void 0:r.rmpVideo)||void 0===o?void 0:o.state)&&void 0!==n?n:"off":null===(l=null===(c=null==e?void 0:e.tracks)||void 0===c?void 0:c.video)||void 0===l?void 0:l.state)},audio:{},screenshareVideo:{id:i(e,!0),dominant:t,paused:s(null===(h=null===(d=null==e?void 0:e.tracks)||void 0===d?void 0:d.screenVideo)||void 0===h?void 0:h.state)},screenshareAudio:{}}},o=16/9;exports.DailyVCSWebRenderer=class{constructor(e,s,i,a){var r,n,c;if(this.fps=30,this.paramValues={},this.activeVideoInputSlots=[],this.sources={videoSlots:[],assetImages:{}},this.maxVideoInputSlots=20,this.callbacks={},this.aspectRatio=o,this.includePausedVideo=!0,this.knownNonScreenshareVideoInputIds=new Set,this.vcsState="idle",e||console.error("VCSMeetingRenderer constructor needs a Daily callObject"),this.callObject=e,s&&"function"==typeof s.startDOMOutputAsync){this.comp=s,this.getAssetUrlCb=a.getAssetUrlCb,this.webFrameCb=null!==(r=null==a?void 0:a.webFrameCb)&&void 0!==r?r:void 0,this.rootEl=i,this.viewportSize=null!==(n=null==a?void 0:a.viewportSize)&&void 0!==n?n:{w:1280,h:720},(null==a?void 0:a.aspectRatio)&&(this.aspectRatio=a.aspectRatio,this.viewportSize=t(i,this.aspectRatio)),(null==a?void 0:a.defaultParams)&&(this.defaultParams=a.defaultParams),(null==a?void 0:a.defaultAssets)&&(this.defaultAssets=a.defaultAssets,this.updateImageSources(this.defaultAssets)),(null==a?void 0:a.maxVideoInputSlots)&&(this.maxVideoInputSlots=a.maxVideoInputSlots),(null==a?void 0:a.fps)&&(this.fps=a.fps),(null==a?void 0:a.callbacks)&&(this.callbacks=a.callbacks),Array.isArray(null==a?void 0:a.participantIds)&&(this.participantIds=a.participantIds),this.includePausedVideo=null===(c=null==a?void 0:a.includePausedVideo)||void 0===c||c,this.recomputeOutputScaleFactor();for(let e=0;e<this.maxVideoInputSlots;e++)this.setActiveVideoInput(e,!1)}else console.error("VCSMeetingRenderer constructor needs a VCS composition")}startResizeObserver(){this.resizeObserver=new ResizeObserver((e=>{e&&e.length>0&&this.rootDisplaySizeChanged()})),this.resizeObserver.observe(this.rootEl)}stopResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}get rootElement(){return this.rootEl}get ratio(){return this.aspectRatio}get state(){return this.vcsState}get vcsApiInstance(){return this.vcsApi}get composition(){return this.comp}get participants(){return this.participantIds}get params(){return this.paramValues}get size(){return this.viewportSize}get imageSources(){return this.sources.assetImages}recomputeOutputScaleFactor(){const e=this.rootEl.clientWidth,t=this.rootEl.clientHeight;if(!e||!t)return;const s=this.viewportSize.w/this.viewportSize.h;this.scaleFactor=s>=1?e/this.viewportSize.w:t/this.viewportSize.h}rootDisplaySizeChanged(){this.recomputeOutputScaleFactor(),this.vcsApi&&this.vcsApi.setScaleFactor(this.scaleFactor)}setupDefaultSources(){return e(this,void 0,void 0,(function*(){this.sources={videoSlots:[],assetImages:{}}}))}placeVideoSourceInDOM(e,t){e.setAttribute("style","display: none;"),t&&e.setAttribute("data-video-id",t),this.rootEl.appendChild(e)}handleActiveSpeakerChange(){this.handleParticipantsChange()}handleParticipantsChange(){var e,t,i,o,n;const c=Object.fromEntries(Object.values(this.callObject.participants()).map((e=>[e.session_id,e]))),l=Array.isArray(this.participantIds)?this.participantIds.map((e=>c[e])).filter(Boolean):Object.values(c),d=[],h=[],p=new Map,u=this.includePausedVideo,v=null!==(e=this.callObject.getActiveSpeaker().peerId)&&void 0!==e?e:"";for(const e of l){const c=e.session_id===v;"remote-media-player"===(null==e?void 0:e.participantType)?d.push(a(e,c,"rmpVideo")):(!u&&s(null===(i=null===(t=null==e?void 0:e.tracks)||void 0===t?void 0:t.video)||void 0===i?void 0:i.state)||d.push(a(e,c)),!u&&s(null===(n=null===(o=null==e?void 0:e.tracks)||void 0===o?void 0:o.screenVideo)||void 0===n?void 0:n.state)||h.push(a(e,c,"screenVideo"))),p.set(e.session_id,r(e,c,"remote-media-player"===(null==e?void 0:e.participantType)))}this.applyTracks([...d,...h]),this.vcsApi.setRoomPeerDescriptionsById(p)}setupEventListeners(){this.callObject.on("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-left",this.handleParticipantsChange.bind(this)),this.callObject.on("active-speaker-change",this.handleActiveSpeakerChange.bind(this))}removeEventListeners(){this.callObject.off("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-left",this.handleParticipantsChange.bind(this)),this.callObject.off("active-speaker-change",this.handleActiveSpeakerChange.bind(this))}start(){return e(this,void 0,void 0,(function*(){var e,t;this.comp&&(this.sources||(yield this.setupDefaultSources()),this.vcsApi=yield this.comp.startDOMOutputAsync(this.rootEl,this.viewportSize.w,this.viewportSize.h,this.sources,{errorCb:this.onError.bind(this),getAssetUrlCb:this.getAssetUrlCb,webFrameCb:this.webFrameCb,fps:this.fps,scaleFactor:this.scaleFactor,enablePreload:!0}),this.vcsState="started",this.handleParticipantsChange(),this.setupEventListeners(),this.sendActiveVideoInputSlots(),this.sendParams(Object.assign(Object.assign({},this.paramValues),this.defaultParams)),this.rootDisplaySizeChanged(),null===(t=(e=this.callbacks).onStart)||void 0===t||t.call(e),this.startResizeObserver())}))}stop(){var e,t;this.vcsApi&&(this.removeEventListeners(),this.vcsApi.stop(),this.vcsState="stopped",null===(t=(e=this.callbacks).onStop)||void 0===t||t.call(e),this.stopResizeObserver())}onError(e){var t,s;console.error("VCS composition error: ",e),this.vcsState="error",null===(s=(t=this.callbacks).onError)||void 0===s||s.call(t,e)}setActiveVideoInput(e,t,s="",i="",a=!1,r=!1,o=!1){this.activeVideoInputSlots[e]=!!t&&{id:s||"",type:a?"screenshare":"camera",displayName:a?"":i,paused:r,dominant:o}}sendActiveVideoInputSlots(){if(!this.vcsApi)return;const e=[];for(const t of this.activeVideoInputSlots)"object"==typeof t?e.push(t):e.push(!1);this.vcsApi.setActiveVideoInputSlots(e)}sendParam(e,t){var s,i;this.vcsApi&&(this.vcsApi.setParamValue(e,t),null===(i=(s=this.callbacks).onParamsChanged)||void 0===i||i.call(s,this.paramValues)),this.paramValues[e]=t}sendParams(e,t="merge"){"replace"===t&&(this.paramValues={}),Object.entries(e).forEach((([e,t])=>this.sendParam(e,t)))}sendUpdateImageSources(){this.vcsApi&&this.vcsApi.updateImageSources(this.sources)}updateImageSources(){return e(this,arguments,void 0,(function*(e={},t="replace"){const s=Object.entries(e).map((([e,t])=>new Promise(((s,i)=>{const a=new Image;a.onload=()=>s({name:e,image:a}),a.onerror=()=>{console.error(`Image load failed, asset ${e}`),i(new Error(`Image load failed, asset ${e}`))},a.src=t}))));try{const e=(yield Promise.all(s)).reduce(((e,t)=>(e[t.name]=t.image,e)),{});if("merge"===t)this.sources.assetImages=Object.assign(Object.assign({},this.sources.assetImages),e);else{if("replace"!==t)return void console.error('Invalid mergeType. Please use either "merge" or "replace".');this.sources.assetImages=e}this.sendUpdateImageSources()}catch(e){console.error(e)}}))}applyTracks(e){var t,s,i,a;if(!this.sources||!e)return;const r=this.sources.videoSlots,o=[];for(const i of e){const e="screenshare"===i.type;if(!i.track&&(!this.includePausedVideo||e||!this.knownNonScreenshareVideoInputIds.has(i.id)))continue;const a=r.find((e=>e.id===i.id));if(a&&(null===(t=a.track)||void 0===t?void 0:t.id)===(null===(s=i.track)||void 0===s?void 0:s.id))o.push(Object.assign(Object.assign({},a),{dominant:i.dominant,paused:i.paused,displayName:i.displayName}));else{let t;if(i.track){const e=new MediaStream([i.track]);(null==a?void 0:a.element)?t=a.element:(t=document.createElement("video"),this.placeVideoSourceInDOM(t,i.id),t.setAttribute("autoplay","true"),t.setAttribute("playsinline","true"),t.setAttribute("controls","false")),t.srcObject||(t.srcObject=e);const s=t.srcObject;if(!s){console.error("no srcObject for video el");break}const r=s.getVideoTracks()[0];if(!r){console.error("no video track for video el");break}r.id!==i.track.id&&(s.removeTrack(r),s.addTrack(i.track))}o.push(Object.assign(Object.assign({},i),{element:t})),e||this.knownNonScreenshareVideoInputIds.add(i.id)}}r.filter((e=>o.every((t=>t.id!==e.id)))).forEach((e=>{var t;null===(t=this.rootEl.querySelector(`[data-video-id="${null==e?void 0:e.id}"]`))||void 0===t||t.remove()}));let n=o.length!==r.length;if(!n)for(let e=0;e<o.length;e++){const t=o[e],s=r[e];if(t.id!==s.id||t.paused!==s.paused||t.dominant!==s.dominant||t.displayName!==s.displayName||(null===(i=t.track)||void 0===i?void 0:i.id)!==(null===(a=s.track)||void 0===a?void 0:a.id)){n=!0;break}}if(n){this.sources.videoSlots=o,this.sendUpdateImageSources();for(let e=0;e<20;e++){const t=o[e];t?this.setActiveVideoInput(e,!0,t.id,t.displayName,"screenshare"===t.type,t.paused,t.dominant):this.setActiveVideoInput(e,!1)}this.sendActiveVideoInputSlots(),this.rootDisplaySizeChanged()}}updateAspectRatio(e){this.aspectRatio=e,this.viewportSize=t(this.rootEl,this.aspectRatio),"started"===this.vcsState&&(this.stop(),this.start())}updateParticipantIds(e,t="replace"){this.participantIds="merge"===t?[...new Set([...this.participantIds,...e])]:e,"started"===this.vcsState&&this.handleParticipantsChange()}};

dist/index.esm.js

@@ -1,1 +0,1 @@
-function e(e,t,s,i){return new(s||(s=Promise))((function(a,o){function r(e){try{l(i.next(e))}catch(e){o(e)}}function n(e){try{l(i.throw(e))}catch(e){o(e)}}function l(e){var t;e.done?a(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(r,n)}l((i=i.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const t=(e,t)=>{if(!e||!t||0===t)return{w:0,h:0};const{width:s,height:i}=e.getBoundingClientRect();return s/i>t?{w:Math.floor(i*t),h:i}:{w:s,h:Math.floor(s/t)}},s=e=>["off","blocked"].includes(e);function i(e,t){return`${e.session_id}${t?"_sshare":""}`}const a=(e,t,a="video")=>{var o,r,n;const l=null===(o=null==e?void 0:e.tracks)||void 0===o?void 0:o[a],c="screenVideo"===a;return{id:i(e,c),type:c?"screenshare":"camera",displayName:c?"":e.user_name||"Guest",dominant:t,paused:!!l&&s(null==l?void 0:l.state),pausedByUser:null!==(n=null===(r=null==l?void 0:l.off)||void 0===r?void 0:r.byUser)&&void 0!==n&&n,track:null==l?void 0:l.persistentTrack}},o=(e,t,a=!1)=>{var o,r,n,l,c,d,h;return{id:e.session_id,displayName:e.user_name||"Guest",video:{id:i(e,!1),dominant:t,paused:s(a?null!==(n=null===(r=null===(o=null==e?void 0:e.tracks)||void 0===o?void 0:o.rmpVideo)||void 0===r?void 0:r.state)&&void 0!==n?n:"off":null===(c=null===(l=null==e?void 0:e.tracks)||void 0===l?void 0:l.video)||void 0===c?void 0:c.state)},audio:{},screenshareVideo:{id:i(e,!0),dominant:t,paused:s(null===(h=null===(d=null==e?void 0:e.tracks)||void 0===d?void 0:d.screenVideo)||void 0===h?void 0:h.state)},screenshareAudio:{}}},r=16/9;class n{constructor(e,s,i,a){var o,n,l;if(this.fps=30,this.paramValues={},this.activeVideoInputSlots=[],this.sources={videoSlots:[],assetImages:{}},this.maxVideoInputSlots=20,this.callbacks={},this.aspectRatio=r,this.includePausedVideo=!0,this.knownNonScreenshareVideoInputIds=new Set,this.vcsState="idle",e||console.error("VCSMeetingRenderer constructor needs a Daily callObject"),this.callObject=e,s&&"function"==typeof s.startDOMOutputAsync){this.comp=s,this.getAssetUrlCb=a.getAssetUrlCb,this.webFrameCb=null!==(o=null==a?void 0:a.webFrameCb)&&void 0!==o?o:void 0,this.rootEl=i,this.viewportSize=null!==(n=null==a?void 0:a.viewportSize)&&void 0!==n?n:{w:1280,h:720},(null==a?void 0:a.aspectRatio)&&(this.aspectRatio=a.aspectRatio,this.viewportSize=t(i,this.aspectRatio)),(null==a?void 0:a.defaultParams)&&(this.defaultParams=a.defaultParams),(null==a?void 0:a.defaultAssets)&&(this.defaultAssets=a.defaultAssets,this.updateImageSources(this.defaultAssets)),(null==a?void 0:a.maxVideoInputSlots)&&(this.maxVideoInputSlots=a.maxVideoInputSlots),(null==a?void 0:a.fps)&&(this.fps=a.fps),(null==a?void 0:a.callbacks)&&(this.callbacks=a.callbacks),Array.isArray(null==a?void 0:a.participantIds)&&(this.participantIds=a.participantIds),this.includePausedVideo=null===(l=null==a?void 0:a.includePausedVideo)||void 0===l||l,this.recomputeOutputScaleFactor();for(let e=0;e<this.maxVideoInputSlots;e++)this.setActiveVideoInput(e,!1)}else console.error("VCSMeetingRenderer constructor needs a VCS composition")}startResizeObserver(){this.resizeObserver=new ResizeObserver((e=>{e&&e.length>0&&this.rootDisplaySizeChanged()})),this.resizeObserver.observe(this.rootEl)}stopResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}get rootElement(){return this.rootEl}get ratio(){return this.aspectRatio}get state(){return this.vcsState}get vcsApiInstance(){return this.vcsApi}get composition(){return this.comp}get participants(){return this.participantIds}get params(){return this.paramValues}get size(){return this.viewportSize}get imageSources(){return this.sources.assetImages}recomputeOutputScaleFactor(){const e=this.rootEl.clientWidth,t=this.rootEl.clientHeight;if(!e||!t)return;const s=this.viewportSize.w/this.viewportSize.h;this.scaleFactor=s>=1?e/this.viewportSize.w:t/this.viewportSize.h}rootDisplaySizeChanged(){this.recomputeOutputScaleFactor(),this.vcsApi&&this.vcsApi.setScaleFactor(this.scaleFactor)}setupDefaultSources(){return e(this,void 0,void 0,(function*(){this.sources={videoSlots:[],assetImages:{}}}))}placeVideoSourceInDOM(e,t){e.setAttribute("style","display: none;"),t&&e.setAttribute("data-video-remote-track-id",t),this.rootEl.appendChild(e)}handleActiveSpeakerChange(){this.handleParticipantsChange()}handleParticipantsChange(){var e,t,i,r;const n=Object.fromEntries(Object.values(this.callObject.participants()).map((e=>[e.session_id,e]))),l=Array.isArray(this.participantIds)?this.participantIds.map((e=>n[e])).filter(Boolean):Object.values(n),c=[],d=[],h=new Map,p=this.includePausedVideo,{peerId:u}=this.callObject.getActiveSpeaker();for(const n of l){const l=n.session_id===u;"remote-media-player"===(null==n?void 0:n.participantType)?c.push(a(n,l,"rmpVideo")):(!p&&s(null===(t=null===(e=null==n?void 0:n.tracks)||void 0===e?void 0:e.video)||void 0===t?void 0:t.state)||c.push(a(n,l)),!p&&s(null===(r=null===(i=null==n?void 0:n.tracks)||void 0===i?void 0:i.screenVideo)||void 0===r?void 0:r.state)||d.push(a(n,l,"screenVideo"))),h.set(n.session_id,o(n,l,"remote-media-player"===(null==n?void 0:n.participantType)))}this.applyTracks([...c,...d]),this.vcsApi.setRoomPeerDescriptionsById(h)}setupEventListeners(){this.callObject.on("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-left",this.handleParticipantsChange.bind(this)),this.callObject.on("active-speaker-change",this.handleActiveSpeakerChange.bind(this))}removeEventListeners(){this.callObject.off("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-left",this.handleParticipantsChange.bind(this)),this.callObject.off("active-speaker-change",this.handleActiveSpeakerChange.bind(this))}start(){return e(this,void 0,void 0,(function*(){var e,t;this.comp&&(this.sources||(yield this.setupDefaultSources()),this.vcsApi=yield this.comp.startDOMOutputAsync(this.rootEl,this.viewportSize.w,this.viewportSize.h,this.sources,{errorCb:this.onError.bind(this),getAssetUrlCb:this.getAssetUrlCb,webFrameCb:this.webFrameCb,fps:this.fps,scaleFactor:this.scaleFactor,enablePreload:!0}),this.vcsState="started",this.handleParticipantsChange(),this.setupEventListeners(),this.sendActiveVideoInputSlots(),this.sendParams(Object.assign(Object.assign({},this.paramValues),this.defaultParams)),this.rootDisplaySizeChanged(),null===(t=(e=this.callbacks).onStart)||void 0===t||t.call(e),this.startResizeObserver())}))}stop(){var e,t;this.vcsApi&&(this.removeEventListeners(),this.vcsApi.stop(),this.vcsState="stopped",null===(t=(e=this.callbacks).onStop)||void 0===t||t.call(e),this.stopResizeObserver())}onError(e){var t,s;console.error("VCS composition error: ",e),this.vcsState="error",null===(s=(t=this.callbacks).onError)||void 0===s||s.call(t,e)}setActiveVideoInput(e,t,s="",i="",a=!1,o=!1,r=!1){this.activeVideoInputSlots[e]=!!t&&{id:s||"",type:a?"screenshare":"camera",displayName:a?"":i,paused:o,dominant:r}}sendActiveVideoInputSlots(){if(!this.vcsApi)return;const e=[];for(const t of this.activeVideoInputSlots)"object"==typeof t?e.push(t):e.push(!1);this.vcsApi.setActiveVideoInputSlots(e)}sendParam(e,t){var s,i;this.vcsApi&&(this.vcsApi.setParamValue(e,t),null===(i=(s=this.callbacks).onParamsChanged)||void 0===i||i.call(s,this.paramValues)),this.paramValues[e]=t}sendParams(e,t="merge"){"replace"===t&&(this.paramValues={}),Object.entries(e).forEach((([e,t])=>this.sendParam(e,t)))}sendUpdateImageSources(){this.vcsApi&&this.vcsApi.updateImageSources(this.sources)}updateImageSources(){return e(this,arguments,void 0,(function*(e={},t="replace"){const s=Object.entries(e).map((([e,t])=>new Promise(((s,i)=>{const a=new Image;a.onload=()=>s({name:e,image:a}),a.onerror=()=>{console.error(`Image load failed, asset ${e}`),i(new Error(`Image load failed, asset ${e}`))},a.src=t}))));try{const e=(yield Promise.all(s)).reduce(((e,t)=>(e[t.name]=t.image,e)),{});if("merge"===t)this.sources.assetImages=Object.assign(Object.assign({},this.sources.assetImages),e);else{if("replace"!==t)return void console.error('Invalid mergeType. Please use either "merge" or "replace".');this.sources.assetImages=e}this.sendUpdateImageSources()}catch(e){console.error(e)}}))}applyTracks(e){var t,s,i,a;if(!this.sources||!e)return;const o=this.sources.videoSlots,r=[];for(const i of e){const e="screenshare"===i.type;if(!i.track&&(!this.includePausedVideo||e||!this.knownNonScreenshareVideoInputIds.has(i.id)))continue;const a=o.find((e=>e.id===i.id));if(a&&(null===(t=a.track)||void 0===t?void 0:t.id)===(null===(s=i.track)||void 0===s?void 0:s.id))r.push(Object.assign(Object.assign({},a),{dominant:i.dominant,paused:i.paused,displayName:i.displayName}));else{let t;if(i.track){const e=new MediaStream([i.track]);(null==a?void 0:a.element)?t=a.element:(t=document.createElement("video"),this.placeVideoSourceInDOM(t,i.track.id)),t.srcObject=e,t.setAttribute("autoplay","true"),t.setAttribute("playsinline","true"),t.setAttribute("controls","false")}r.push(Object.assign(Object.assign({},i),{element:t})),e||this.knownNonScreenshareVideoInputIds.add(i.id)}}o.filter((e=>r.every((t=>t.id!==e.id)))).forEach((e=>{var t,s;null===(s=this.rootEl.querySelector(`[data-video-remote-track-id="${null===(t=null==e?void 0:e.track)||void 0===t?void 0:t.id}"]`))||void 0===s||s.remove()}));let n=r.length!==o.length;if(!n)for(let e=0;e<r.length;e++){const t=r[e],s=o[e];if(t.id!==s.id||t.paused!==s.paused||t.dominant!==s.dominant||t.displayName!==s.displayName||(null===(i=t.track)||void 0===i?void 0:i.id)!==(null===(a=s.track)||void 0===a?void 0:a.id)){n=!0;break}}if(n){this.sources.videoSlots=r,this.sendUpdateImageSources();for(let e=0;e<20;e++){const t=r[e];t?this.setActiveVideoInput(e,!0,t.id,t.displayName,"screenshare"===t.type,t.paused,t.dominant):this.setActiveVideoInput(e,!1)}this.sendActiveVideoInputSlots(),this.rootDisplaySizeChanged()}}updateAspectRatio(e){this.aspectRatio=e,this.viewportSize=t(this.rootEl,this.aspectRatio),"started"===this.vcsState&&(this.stop(),this.start())}updateParticipantIds(e,t="replace"){this.participantIds="merge"===t?[...new Set([...this.participantIds,...e])]:e,"started"===this.vcsState&&this.handleParticipantsChange()}}export{n as DailyVCSWebRenderer};
+function e(e,t,s,i){return new(s||(s=Promise))((function(a,o){function r(e){try{c(i.next(e))}catch(e){o(e)}}function n(e){try{c(i.throw(e))}catch(e){o(e)}}function c(e){var t;e.done?a(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(r,n)}c((i=i.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const t=(e,t)=>{if(!e||!t||0===t)return{w:0,h:0};const{width:s,height:i}=e.getBoundingClientRect();return s/i>t?{w:Math.floor(i*t),h:i}:{w:s,h:Math.floor(s/t)}},s=e=>["off","blocked"].includes(e);function i(e,t){return`${e.session_id}${t?"_sshare":""}`}const a=(e,t,a="video")=>{var o,r,n;const c=null===(o=null==e?void 0:e.tracks)||void 0===o?void 0:o[a],l="screenVideo"===a;return{id:i(e,l),type:l?"screenshare":"camera",displayName:l?"":e.user_name||"Guest",dominant:t,paused:!!c&&s(null==c?void 0:c.state),pausedByUser:null!==(n=null===(r=null==c?void 0:c.off)||void 0===r?void 0:r.byUser)&&void 0!==n&&n,track:null==c?void 0:c.persistentTrack}},o=(e,t,a=!1)=>{var o,r,n,c,l,d,h;return{id:e.session_id,displayName:e.user_name||"Guest",video:{id:i(e,!1),dominant:t,paused:s(a?null!==(n=null===(r=null===(o=null==e?void 0:e.tracks)||void 0===o?void 0:o.rmpVideo)||void 0===r?void 0:r.state)&&void 0!==n?n:"off":null===(l=null===(c=null==e?void 0:e.tracks)||void 0===c?void 0:c.video)||void 0===l?void 0:l.state)},audio:{},screenshareVideo:{id:i(e,!0),dominant:t,paused:s(null===(h=null===(d=null==e?void 0:e.tracks)||void 0===d?void 0:d.screenVideo)||void 0===h?void 0:h.state)},screenshareAudio:{}}},r=16/9;class n{constructor(e,s,i,a){var o,n,c;if(this.fps=30,this.paramValues={},this.activeVideoInputSlots=[],this.sources={videoSlots:[],assetImages:{}},this.maxVideoInputSlots=20,this.callbacks={},this.aspectRatio=r,this.includePausedVideo=!0,this.knownNonScreenshareVideoInputIds=new Set,this.vcsState="idle",e||console.error("VCSMeetingRenderer constructor needs a Daily callObject"),this.callObject=e,s&&"function"==typeof s.startDOMOutputAsync){this.comp=s,this.getAssetUrlCb=a.getAssetUrlCb,this.webFrameCb=null!==(o=null==a?void 0:a.webFrameCb)&&void 0!==o?o:void 0,this.rootEl=i,this.viewportSize=null!==(n=null==a?void 0:a.viewportSize)&&void 0!==n?n:{w:1280,h:720},(null==a?void 0:a.aspectRatio)&&(this.aspectRatio=a.aspectRatio,this.viewportSize=t(i,this.aspectRatio)),(null==a?void 0:a.defaultParams)&&(this.defaultParams=a.defaultParams),(null==a?void 0:a.defaultAssets)&&(this.defaultAssets=a.defaultAssets,this.updateImageSources(this.defaultAssets)),(null==a?void 0:a.maxVideoInputSlots)&&(this.maxVideoInputSlots=a.maxVideoInputSlots),(null==a?void 0:a.fps)&&(this.fps=a.fps),(null==a?void 0:a.callbacks)&&(this.callbacks=a.callbacks),Array.isArray(null==a?void 0:a.participantIds)&&(this.participantIds=a.participantIds),this.includePausedVideo=null===(c=null==a?void 0:a.includePausedVideo)||void 0===c||c,this.recomputeOutputScaleFactor();for(let e=0;e<this.maxVideoInputSlots;e++)this.setActiveVideoInput(e,!1)}else console.error("VCSMeetingRenderer constructor needs a VCS composition")}startResizeObserver(){this.resizeObserver=new ResizeObserver((e=>{e&&e.length>0&&this.rootDisplaySizeChanged()})),this.resizeObserver.observe(this.rootEl)}stopResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}get rootElement(){return this.rootEl}get ratio(){return this.aspectRatio}get state(){return this.vcsState}get vcsApiInstance(){return this.vcsApi}get composition(){return this.comp}get participants(){return this.participantIds}get params(){return this.paramValues}get size(){return this.viewportSize}get imageSources(){return this.sources.assetImages}recomputeOutputScaleFactor(){const e=this.rootEl.clientWidth,t=this.rootEl.clientHeight;if(!e||!t)return;const s=this.viewportSize.w/this.viewportSize.h;this.scaleFactor=s>=1?e/this.viewportSize.w:t/this.viewportSize.h}rootDisplaySizeChanged(){this.recomputeOutputScaleFactor(),this.vcsApi&&this.vcsApi.setScaleFactor(this.scaleFactor)}setupDefaultSources(){return e(this,void 0,void 0,(function*(){this.sources={videoSlots:[],assetImages:{}}}))}placeVideoSourceInDOM(e,t){e.setAttribute("style","display: none;"),t&&e.setAttribute("data-video-id",t),this.rootEl.appendChild(e)}handleActiveSpeakerChange(){this.handleParticipantsChange()}handleParticipantsChange(){var e,t,i,r,n;const c=Object.fromEntries(Object.values(this.callObject.participants()).map((e=>[e.session_id,e]))),l=Array.isArray(this.participantIds)?this.participantIds.map((e=>c[e])).filter(Boolean):Object.values(c),d=[],h=[],p=new Map,u=this.includePausedVideo,v=null!==(e=this.callObject.getActiveSpeaker().peerId)&&void 0!==e?e:"";for(const e of l){const c=e.session_id===v;"remote-media-player"===(null==e?void 0:e.participantType)?d.push(a(e,c,"rmpVideo")):(!u&&s(null===(i=null===(t=null==e?void 0:e.tracks)||void 0===t?void 0:t.video)||void 0===i?void 0:i.state)||d.push(a(e,c)),!u&&s(null===(n=null===(r=null==e?void 0:e.tracks)||void 0===r?void 0:r.screenVideo)||void 0===n?void 0:n.state)||h.push(a(e,c,"screenVideo"))),p.set(e.session_id,o(e,c,"remote-media-player"===(null==e?void 0:e.participantType)))}this.applyTracks([...d,...h]),this.vcsApi.setRoomPeerDescriptionsById(p)}setupEventListeners(){this.callObject.on("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-left",this.handleParticipantsChange.bind(this)),this.callObject.on("active-speaker-change",this.handleActiveSpeakerChange.bind(this))}removeEventListeners(){this.callObject.off("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-left",this.handleParticipantsChange.bind(this)),this.callObject.off("active-speaker-change",this.handleActiveSpeakerChange.bind(this))}start(){return e(this,void 0,void 0,(function*(){var e,t;this.comp&&(this.sources||(yield this.setupDefaultSources()),this.vcsApi=yield this.comp.startDOMOutputAsync(this.rootEl,this.viewportSize.w,this.viewportSize.h,this.sources,{errorCb:this.onError.bind(this),getAssetUrlCb:this.getAssetUrlCb,webFrameCb:this.webFrameCb,fps:this.fps,scaleFactor:this.scaleFactor,enablePreload:!0}),this.vcsState="started",this.handleParticipantsChange(),this.setupEventListeners(),this.sendActiveVideoInputSlots(),this.sendParams(Object.assign(Object.assign({},this.paramValues),this.defaultParams)),this.rootDisplaySizeChanged(),null===(t=(e=this.callbacks).onStart)||void 0===t||t.call(e),this.startResizeObserver())}))}stop(){var e,t;this.vcsApi&&(this.removeEventListeners(),this.vcsApi.stop(),this.vcsState="stopped",null===(t=(e=this.callbacks).onStop)||void 0===t||t.call(e),this.stopResizeObserver())}onError(e){var t,s;console.error("VCS composition error: ",e),this.vcsState="error",null===(s=(t=this.callbacks).onError)||void 0===s||s.call(t,e)}setActiveVideoInput(e,t,s="",i="",a=!1,o=!1,r=!1){this.activeVideoInputSlots[e]=!!t&&{id:s||"",type:a?"screenshare":"camera",displayName:a?"":i,paused:o,dominant:r}}sendActiveVideoInputSlots(){if(!this.vcsApi)return;const e=[];for(const t of this.activeVideoInputSlots)"object"==typeof t?e.push(t):e.push(!1);this.vcsApi.setActiveVideoInputSlots(e)}sendParam(e,t){var s,i;this.vcsApi&&(this.vcsApi.setParamValue(e,t),null===(i=(s=this.callbacks).onParamsChanged)||void 0===i||i.call(s,this.paramValues)),this.paramValues[e]=t}sendParams(e,t="merge"){"replace"===t&&(this.paramValues={}),Object.entries(e).forEach((([e,t])=>this.sendParam(e,t)))}sendUpdateImageSources(){this.vcsApi&&this.vcsApi.updateImageSources(this.sources)}updateImageSources(){return e(this,arguments,void 0,(function*(e={},t="replace"){const s=Object.entries(e).map((([e,t])=>new Promise(((s,i)=>{const a=new Image;a.onload=()=>s({name:e,image:a}),a.onerror=()=>{console.error(`Image load failed, asset ${e}`),i(new Error(`Image load failed, asset ${e}`))},a.src=t}))));try{const e=(yield Promise.all(s)).reduce(((e,t)=>(e[t.name]=t.image,e)),{});if("merge"===t)this.sources.assetImages=Object.assign(Object.assign({},this.sources.assetImages),e);else{if("replace"!==t)return void console.error('Invalid mergeType. Please use either "merge" or "replace".');this.sources.assetImages=e}this.sendUpdateImageSources()}catch(e){console.error(e)}}))}applyTracks(e){var t,s,i,a;if(!this.sources||!e)return;const o=this.sources.videoSlots,r=[];for(const i of e){const e="screenshare"===i.type;if(!i.track&&(!this.includePausedVideo||e||!this.knownNonScreenshareVideoInputIds.has(i.id)))continue;const a=o.find((e=>e.id===i.id));if(a&&(null===(t=a.track)||void 0===t?void 0:t.id)===(null===(s=i.track)||void 0===s?void 0:s.id))r.push(Object.assign(Object.assign({},a),{dominant:i.dominant,paused:i.paused,displayName:i.displayName}));else{let t;if(i.track){const e=new MediaStream([i.track]);(null==a?void 0:a.element)?t=a.element:(t=document.createElement("video"),this.placeVideoSourceInDOM(t,i.id),t.setAttribute("autoplay","true"),t.setAttribute("playsinline","true"),t.setAttribute("controls","false")),t.srcObject||(t.srcObject=e);const s=t.srcObject;if(!s){console.error("no srcObject for video el");break}const o=s.getVideoTracks()[0];if(!o){console.error("no video track for video el");break}o.id!==i.track.id&&(s.removeTrack(o),s.addTrack(i.track))}r.push(Object.assign(Object.assign({},i),{element:t})),e||this.knownNonScreenshareVideoInputIds.add(i.id)}}o.filter((e=>r.every((t=>t.id!==e.id)))).forEach((e=>{var t;null===(t=this.rootEl.querySelector(`[data-video-id="${null==e?void 0:e.id}"]`))||void 0===t||t.remove()}));let n=r.length!==o.length;if(!n)for(let e=0;e<r.length;e++){const t=r[e],s=o[e];if(t.id!==s.id||t.paused!==s.paused||t.dominant!==s.dominant||t.displayName!==s.displayName||(null===(i=t.track)||void 0===i?void 0:i.id)!==(null===(a=s.track)||void 0===a?void 0:a.id)){n=!0;break}}if(n){this.sources.videoSlots=r,this.sendUpdateImageSources();for(let e=0;e<20;e++){const t=r[e];t?this.setActiveVideoInput(e,!0,t.id,t.displayName,"screenshare"===t.type,t.paused,t.dominant):this.setActiveVideoInput(e,!1)}this.sendActiveVideoInputSlots(),this.rootDisplaySizeChanged()}}updateAspectRatio(e){this.aspectRatio=e,this.viewportSize=t(this.rootEl,this.aspectRatio),"started"===this.vcsState&&(this.stop(),this.start())}updateParticipantIds(e,t="replace"){this.participantIds="merge"===t?[...new Set([...this.participantIds,...e])]:e,"started"===this.vcsState&&this.handleParticipantsChange()}}export{n as DailyVCSWebRenderer};

dist/index.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).DailyVCSWebRenderer={})}(this,(function(e){"use strict";function t(e,t,s,i){return new(s||(s=Promise))((function(a,o){function r(e){try{l(i.next(e))}catch(e){o(e)}}function n(e){try{l(i.throw(e))}catch(e){o(e)}}function l(e){var t;e.done?a(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(r,n)}l((i=i.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const s=(e,t)=>{if(!e||!t||0===t)return{w:0,h:0};const{width:s,height:i}=e.getBoundingClientRect();return s/i>t?{w:Math.floor(i*t),h:i}:{w:s,h:Math.floor(s/t)}},i=e=>["off","blocked"].includes(e);function a(e,t){return`${e.session_id}${t?"_sshare":""}`}const o=(e,t,s="video")=>{var o,r,n;const l=null===(o=null==e?void 0:e.tracks)||void 0===o?void 0:o[s],c="screenVideo"===s;return{id:a(e,c),type:c?"screenshare":"camera",displayName:c?"":e.user_name||"Guest",dominant:t,paused:!!l&&i(null==l?void 0:l.state),pausedByUser:null!==(n=null===(r=null==l?void 0:l.off)||void 0===r?void 0:r.byUser)&&void 0!==n&&n,track:null==l?void 0:l.persistentTrack}},r=(e,t,s=!1)=>{var o,r,n,l,c,d,h;return{id:e.session_id,displayName:e.user_name||"Guest",video:{id:a(e,!1),dominant:t,paused:i(s?null!==(n=null===(r=null===(o=null==e?void 0:e.tracks)||void 0===o?void 0:o.rmpVideo)||void 0===r?void 0:r.state)&&void 0!==n?n:"off":null===(c=null===(l=null==e?void 0:e.tracks)||void 0===l?void 0:l.video)||void 0===c?void 0:c.state)},audio:{},screenshareVideo:{id:a(e,!0),dominant:t,paused:i(null===(h=null===(d=null==e?void 0:e.tracks)||void 0===d?void 0:d.screenVideo)||void 0===h?void 0:h.state)},screenshareAudio:{}}},n=16/9;e.DailyVCSWebRenderer=class{constructor(e,t,i,a){var o,r,l;if(this.fps=30,this.paramValues={},this.activeVideoInputSlots=[],this.sources={videoSlots:[],assetImages:{}},this.maxVideoInputSlots=20,this.callbacks={},this.aspectRatio=n,this.includePausedVideo=!0,this.knownNonScreenshareVideoInputIds=new Set,this.vcsState="idle",e||console.error("VCSMeetingRenderer constructor needs a Daily callObject"),this.callObject=e,t&&"function"==typeof t.startDOMOutputAsync){this.comp=t,this.getAssetUrlCb=a.getAssetUrlCb,this.webFrameCb=null!==(o=null==a?void 0:a.webFrameCb)&&void 0!==o?o:void 0,this.rootEl=i,this.viewportSize=null!==(r=null==a?void 0:a.viewportSize)&&void 0!==r?r:{w:1280,h:720},(null==a?void 0:a.aspectRatio)&&(this.aspectRatio=a.aspectRatio,this.viewportSize=s(i,this.aspectRatio)),(null==a?void 0:a.defaultParams)&&(this.defaultParams=a.defaultParams),(null==a?void 0:a.defaultAssets)&&(this.defaultAssets=a.defaultAssets,this.updateImageSources(this.defaultAssets)),(null==a?void 0:a.maxVideoInputSlots)&&(this.maxVideoInputSlots=a.maxVideoInputSlots),(null==a?void 0:a.fps)&&(this.fps=a.fps),(null==a?void 0:a.callbacks)&&(this.callbacks=a.callbacks),Array.isArray(null==a?void 0:a.participantIds)&&(this.participantIds=a.participantIds),this.includePausedVideo=null===(l=null==a?void 0:a.includePausedVideo)||void 0===l||l,this.recomputeOutputScaleFactor();for(let e=0;e<this.maxVideoInputSlots;e++)this.setActiveVideoInput(e,!1)}else console.error("VCSMeetingRenderer constructor needs a VCS composition")}startResizeObserver(){this.resizeObserver=new ResizeObserver((e=>{e&&e.length>0&&this.rootDisplaySizeChanged()})),this.resizeObserver.observe(this.rootEl)}stopResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}get rootElement(){return this.rootEl}get ratio(){return this.aspectRatio}get state(){return this.vcsState}get vcsApiInstance(){return this.vcsApi}get composition(){return this.comp}get participants(){return this.participantIds}get params(){return this.paramValues}get size(){return this.viewportSize}get imageSources(){return this.sources.assetImages}recomputeOutputScaleFactor(){const e=this.rootEl.clientWidth,t=this.rootEl.clientHeight;if(!e||!t)return;const s=this.viewportSize.w/this.viewportSize.h;this.scaleFactor=s>=1?e/this.viewportSize.w:t/this.viewportSize.h}rootDisplaySizeChanged(){this.recomputeOutputScaleFactor(),this.vcsApi&&this.vcsApi.setScaleFactor(this.scaleFactor)}setupDefaultSources(){return t(this,void 0,void 0,(function*(){this.sources={videoSlots:[],assetImages:{}}}))}placeVideoSourceInDOM(e,t){e.setAttribute("style","display: none;"),t&&e.setAttribute("data-video-remote-track-id",t),this.rootEl.appendChild(e)}handleActiveSpeakerChange(){this.handleParticipantsChange()}handleParticipantsChange(){var e,t,s,a;const n=Object.fromEntries(Object.values(this.callObject.participants()).map((e=>[e.session_id,e]))),l=Array.isArray(this.participantIds)?this.participantIds.map((e=>n[e])).filter(Boolean):Object.values(n),c=[],d=[],h=new Map,p=this.includePausedVideo,{peerId:u}=this.callObject.getActiveSpeaker();for(const n of l){const l=n.session_id===u;"remote-media-player"===(null==n?void 0:n.participantType)?c.push(o(n,l,"rmpVideo")):(!p&&i(null===(t=null===(e=null==n?void 0:n.tracks)||void 0===e?void 0:e.video)||void 0===t?void 0:t.state)||c.push(o(n,l)),!p&&i(null===(a=null===(s=null==n?void 0:n.tracks)||void 0===s?void 0:s.screenVideo)||void 0===a?void 0:a.state)||d.push(o(n,l,"screenVideo"))),h.set(n.session_id,r(n,l,"remote-media-player"===(null==n?void 0:n.participantType)))}this.applyTracks([...c,...d]),this.vcsApi.setRoomPeerDescriptionsById(h)}setupEventListeners(){this.callObject.on("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-left",this.handleParticipantsChange.bind(this)),this.callObject.on("active-speaker-change",this.handleActiveSpeakerChange.bind(this))}removeEventListeners(){this.callObject.off("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-left",this.handleParticipantsChange.bind(this)),this.callObject.off("active-speaker-change",this.handleActiveSpeakerChange.bind(this))}start(){return t(this,void 0,void 0,(function*(){var e,t;this.comp&&(this.sources||(yield this.setupDefaultSources()),this.vcsApi=yield this.comp.startDOMOutputAsync(this.rootEl,this.viewportSize.w,this.viewportSize.h,this.sources,{errorCb:this.onError.bind(this),getAssetUrlCb:this.getAssetUrlCb,webFrameCb:this.webFrameCb,fps:this.fps,scaleFactor:this.scaleFactor,enablePreload:!0}),this.vcsState="started",this.handleParticipantsChange(),this.setupEventListeners(),this.sendActiveVideoInputSlots(),this.sendParams(Object.assign(Object.assign({},this.paramValues),this.defaultParams)),this.rootDisplaySizeChanged(),null===(t=(e=this.callbacks).onStart)||void 0===t||t.call(e),this.startResizeObserver())}))}stop(){var e,t;this.vcsApi&&(this.removeEventListeners(),this.vcsApi.stop(),this.vcsState="stopped",null===(t=(e=this.callbacks).onStop)||void 0===t||t.call(e),this.stopResizeObserver())}onError(e){var t,s;console.error("VCS composition error: ",e),this.vcsState="error",null===(s=(t=this.callbacks).onError)||void 0===s||s.call(t,e)}setActiveVideoInput(e,t,s="",i="",a=!1,o=!1,r=!1){this.activeVideoInputSlots[e]=!!t&&{id:s||"",type:a?"screenshare":"camera",displayName:a?"":i,paused:o,dominant:r}}sendActiveVideoInputSlots(){if(!this.vcsApi)return;const e=[];for(const t of this.activeVideoInputSlots)"object"==typeof t?e.push(t):e.push(!1);this.vcsApi.setActiveVideoInputSlots(e)}sendParam(e,t){var s,i;this.vcsApi&&(this.vcsApi.setParamValue(e,t),null===(i=(s=this.callbacks).onParamsChanged)||void 0===i||i.call(s,this.paramValues)),this.paramValues[e]=t}sendParams(e,t="merge"){"replace"===t&&(this.paramValues={}),Object.entries(e).forEach((([e,t])=>this.sendParam(e,t)))}sendUpdateImageSources(){this.vcsApi&&this.vcsApi.updateImageSources(this.sources)}updateImageSources(){return t(this,arguments,void 0,(function*(e={},t="replace"){const s=Object.entries(e).map((([e,t])=>new Promise(((s,i)=>{const a=new Image;a.onload=()=>s({name:e,image:a}),a.onerror=()=>{console.error(`Image load failed, asset ${e}`),i(new Error(`Image load failed, asset ${e}`))},a.src=t}))));try{const e=(yield Promise.all(s)).reduce(((e,t)=>(e[t.name]=t.image,e)),{});if("merge"===t)this.sources.assetImages=Object.assign(Object.assign({},this.sources.assetImages),e);else{if("replace"!==t)return void console.error('Invalid mergeType. Please use either "merge" or "replace".');this.sources.assetImages=e}this.sendUpdateImageSources()}catch(e){console.error(e)}}))}applyTracks(e){var t,s,i,a;if(!this.sources||!e)return;const o=this.sources.videoSlots,r=[];for(const i of e){const e="screenshare"===i.type;if(!i.track&&(!this.includePausedVideo||e||!this.knownNonScreenshareVideoInputIds.has(i.id)))continue;const a=o.find((e=>e.id===i.id));if(a&&(null===(t=a.track)||void 0===t?void 0:t.id)===(null===(s=i.track)||void 0===s?void 0:s.id))r.push(Object.assign(Object.assign({},a),{dominant:i.dominant,paused:i.paused,displayName:i.displayName}));else{let t;if(i.track){const e=new MediaStream([i.track]);(null==a?void 0:a.element)?t=a.element:(t=document.createElement("video"),this.placeVideoSourceInDOM(t,i.track.id)),t.srcObject=e,t.setAttribute("autoplay","true"),t.setAttribute("playsinline","true"),t.setAttribute("controls","false")}r.push(Object.assign(Object.assign({},i),{element:t})),e||this.knownNonScreenshareVideoInputIds.add(i.id)}}o.filter((e=>r.every((t=>t.id!==e.id)))).forEach((e=>{var t,s;null===(s=this.rootEl.querySelector(`[data-video-remote-track-id="${null===(t=null==e?void 0:e.track)||void 0===t?void 0:t.id}"]`))||void 0===s||s.remove()}));let n=r.length!==o.length;if(!n)for(let e=0;e<r.length;e++){const t=r[e],s=o[e];if(t.id!==s.id||t.paused!==s.paused||t.dominant!==s.dominant||t.displayName!==s.displayName||(null===(i=t.track)||void 0===i?void 0:i.id)!==(null===(a=s.track)||void 0===a?void 0:a.id)){n=!0;break}}if(n){this.sources.videoSlots=r,this.sendUpdateImageSources();for(let e=0;e<20;e++){const t=r[e];t?this.setActiveVideoInput(e,!0,t.id,t.displayName,"screenshare"===t.type,t.paused,t.dominant):this.setActiveVideoInput(e,!1)}this.sendActiveVideoInputSlots(),this.rootDisplaySizeChanged()}}updateAspectRatio(e){this.aspectRatio=e,this.viewportSize=s(this.rootEl,this.aspectRatio),"started"===this.vcsState&&(this.stop(),this.start())}updateParticipantIds(e,t="replace"){this.participantIds="merge"===t?[...new Set([...this.participantIds,...e])]:e,"started"===this.vcsState&&this.handleParticipantsChange()}}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).DailyVCSWebRenderer={})}(this,(function(e){"use strict";function t(e,t,s,i){return new(s||(s=Promise))((function(a,o){function r(e){try{c(i.next(e))}catch(e){o(e)}}function n(e){try{c(i.throw(e))}catch(e){o(e)}}function c(e){var t;e.done?a(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(r,n)}c((i=i.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const s=(e,t)=>{if(!e||!t||0===t)return{w:0,h:0};const{width:s,height:i}=e.getBoundingClientRect();return s/i>t?{w:Math.floor(i*t),h:i}:{w:s,h:Math.floor(s/t)}},i=e=>["off","blocked"].includes(e);function a(e,t){return`${e.session_id}${t?"_sshare":""}`}const o=(e,t,s="video")=>{var o,r,n;const c=null===(o=null==e?void 0:e.tracks)||void 0===o?void 0:o[s],l="screenVideo"===s;return{id:a(e,l),type:l?"screenshare":"camera",displayName:l?"":e.user_name||"Guest",dominant:t,paused:!!c&&i(null==c?void 0:c.state),pausedByUser:null!==(n=null===(r=null==c?void 0:c.off)||void 0===r?void 0:r.byUser)&&void 0!==n&&n,track:null==c?void 0:c.persistentTrack}},r=(e,t,s=!1)=>{var o,r,n,c,l,d,h;return{id:e.session_id,displayName:e.user_name||"Guest",video:{id:a(e,!1),dominant:t,paused:i(s?null!==(n=null===(r=null===(o=null==e?void 0:e.tracks)||void 0===o?void 0:o.rmpVideo)||void 0===r?void 0:r.state)&&void 0!==n?n:"off":null===(l=null===(c=null==e?void 0:e.tracks)||void 0===c?void 0:c.video)||void 0===l?void 0:l.state)},audio:{},screenshareVideo:{id:a(e,!0),dominant:t,paused:i(null===(h=null===(d=null==e?void 0:e.tracks)||void 0===d?void 0:d.screenVideo)||void 0===h?void 0:h.state)},screenshareAudio:{}}},n=16/9;e.DailyVCSWebRenderer=class{constructor(e,t,i,a){var o,r,c;if(this.fps=30,this.paramValues={},this.activeVideoInputSlots=[],this.sources={videoSlots:[],assetImages:{}},this.maxVideoInputSlots=20,this.callbacks={},this.aspectRatio=n,this.includePausedVideo=!0,this.knownNonScreenshareVideoInputIds=new Set,this.vcsState="idle",e||console.error("VCSMeetingRenderer constructor needs a Daily callObject"),this.callObject=e,t&&"function"==typeof t.startDOMOutputAsync){this.comp=t,this.getAssetUrlCb=a.getAssetUrlCb,this.webFrameCb=null!==(o=null==a?void 0:a.webFrameCb)&&void 0!==o?o:void 0,this.rootEl=i,this.viewportSize=null!==(r=null==a?void 0:a.viewportSize)&&void 0!==r?r:{w:1280,h:720},(null==a?void 0:a.aspectRatio)&&(this.aspectRatio=a.aspectRatio,this.viewportSize=s(i,this.aspectRatio)),(null==a?void 0:a.defaultParams)&&(this.defaultParams=a.defaultParams),(null==a?void 0:a.defaultAssets)&&(this.defaultAssets=a.defaultAssets,this.updateImageSources(this.defaultAssets)),(null==a?void 0:a.maxVideoInputSlots)&&(this.maxVideoInputSlots=a.maxVideoInputSlots),(null==a?void 0:a.fps)&&(this.fps=a.fps),(null==a?void 0:a.callbacks)&&(this.callbacks=a.callbacks),Array.isArray(null==a?void 0:a.participantIds)&&(this.participantIds=a.participantIds),this.includePausedVideo=null===(c=null==a?void 0:a.includePausedVideo)||void 0===c||c,this.recomputeOutputScaleFactor();for(let e=0;e<this.maxVideoInputSlots;e++)this.setActiveVideoInput(e,!1)}else console.error("VCSMeetingRenderer constructor needs a VCS composition")}startResizeObserver(){this.resizeObserver=new ResizeObserver((e=>{e&&e.length>0&&this.rootDisplaySizeChanged()})),this.resizeObserver.observe(this.rootEl)}stopResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}get rootElement(){return this.rootEl}get ratio(){return this.aspectRatio}get state(){return this.vcsState}get vcsApiInstance(){return this.vcsApi}get composition(){return this.comp}get participants(){return this.participantIds}get params(){return this.paramValues}get size(){return this.viewportSize}get imageSources(){return this.sources.assetImages}recomputeOutputScaleFactor(){const e=this.rootEl.clientWidth,t=this.rootEl.clientHeight;if(!e||!t)return;const s=this.viewportSize.w/this.viewportSize.h;this.scaleFactor=s>=1?e/this.viewportSize.w:t/this.viewportSize.h}rootDisplaySizeChanged(){this.recomputeOutputScaleFactor(),this.vcsApi&&this.vcsApi.setScaleFactor(this.scaleFactor)}setupDefaultSources(){return t(this,void 0,void 0,(function*(){this.sources={videoSlots:[],assetImages:{}}}))}placeVideoSourceInDOM(e,t){e.setAttribute("style","display: none;"),t&&e.setAttribute("data-video-id",t),this.rootEl.appendChild(e)}handleActiveSpeakerChange(){this.handleParticipantsChange()}handleParticipantsChange(){var e,t,s,a,n;const c=Object.fromEntries(Object.values(this.callObject.participants()).map((e=>[e.session_id,e]))),l=Array.isArray(this.participantIds)?this.participantIds.map((e=>c[e])).filter(Boolean):Object.values(c),d=[],h=[],p=new Map,u=this.includePausedVideo,v=null!==(e=this.callObject.getActiveSpeaker().peerId)&&void 0!==e?e:"";for(const e of l){const c=e.session_id===v;"remote-media-player"===(null==e?void 0:e.participantType)?d.push(o(e,c,"rmpVideo")):(!u&&i(null===(s=null===(t=null==e?void 0:e.tracks)||void 0===t?void 0:t.video)||void 0===s?void 0:s.state)||d.push(o(e,c)),!u&&i(null===(n=null===(a=null==e?void 0:e.tracks)||void 0===a?void 0:a.screenVideo)||void 0===n?void 0:n.state)||h.push(o(e,c,"screenVideo"))),p.set(e.session_id,r(e,c,"remote-media-player"===(null==e?void 0:e.participantType)))}this.applyTracks([...d,...h]),this.vcsApi.setRoomPeerDescriptionsById(p)}setupEventListeners(){this.callObject.on("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.on("participant-left",this.handleParticipantsChange.bind(this)),this.callObject.on("active-speaker-change",this.handleActiveSpeakerChange.bind(this))}removeEventListeners(){this.callObject.off("participant-joined",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-updated",this.handleParticipantsChange.bind(this)),this.callObject.off("participant-left",this.handleParticipantsChange.bind(this)),this.callObject.off("active-speaker-change",this.handleActiveSpeakerChange.bind(this))}start(){return t(this,void 0,void 0,(function*(){var e,t;this.comp&&(this.sources||(yield this.setupDefaultSources()),this.vcsApi=yield this.comp.startDOMOutputAsync(this.rootEl,this.viewportSize.w,this.viewportSize.h,this.sources,{errorCb:this.onError.bind(this),getAssetUrlCb:this.getAssetUrlCb,webFrameCb:this.webFrameCb,fps:this.fps,scaleFactor:this.scaleFactor,enablePreload:!0}),this.vcsState="started",this.handleParticipantsChange(),this.setupEventListeners(),this.sendActiveVideoInputSlots(),this.sendParams(Object.assign(Object.assign({},this.paramValues),this.defaultParams)),this.rootDisplaySizeChanged(),null===(t=(e=this.callbacks).onStart)||void 0===t||t.call(e),this.startResizeObserver())}))}stop(){var e,t;this.vcsApi&&(this.removeEventListeners(),this.vcsApi.stop(),this.vcsState="stopped",null===(t=(e=this.callbacks).onStop)||void 0===t||t.call(e),this.stopResizeObserver())}onError(e){var t,s;console.error("VCS composition error: ",e),this.vcsState="error",null===(s=(t=this.callbacks).onError)||void 0===s||s.call(t,e)}setActiveVideoInput(e,t,s="",i="",a=!1,o=!1,r=!1){this.activeVideoInputSlots[e]=!!t&&{id:s||"",type:a?"screenshare":"camera",displayName:a?"":i,paused:o,dominant:r}}sendActiveVideoInputSlots(){if(!this.vcsApi)return;const e=[];for(const t of this.activeVideoInputSlots)"object"==typeof t?e.push(t):e.push(!1);this.vcsApi.setActiveVideoInputSlots(e)}sendParam(e,t){var s,i;this.vcsApi&&(this.vcsApi.setParamValue(e,t),null===(i=(s=this.callbacks).onParamsChanged)||void 0===i||i.call(s,this.paramValues)),this.paramValues[e]=t}sendParams(e,t="merge"){"replace"===t&&(this.paramValues={}),Object.entries(e).forEach((([e,t])=>this.sendParam(e,t)))}sendUpdateImageSources(){this.vcsApi&&this.vcsApi.updateImageSources(this.sources)}updateImageSources(){return t(this,arguments,void 0,(function*(e={},t="replace"){const s=Object.entries(e).map((([e,t])=>new Promise(((s,i)=>{const a=new Image;a.onload=()=>s({name:e,image:a}),a.onerror=()=>{console.error(`Image load failed, asset ${e}`),i(new Error(`Image load failed, asset ${e}`))},a.src=t}))));try{const e=(yield Promise.all(s)).reduce(((e,t)=>(e[t.name]=t.image,e)),{});if("merge"===t)this.sources.assetImages=Object.assign(Object.assign({},this.sources.assetImages),e);else{if("replace"!==t)return void console.error('Invalid mergeType. Please use either "merge" or "replace".');this.sources.assetImages=e}this.sendUpdateImageSources()}catch(e){console.error(e)}}))}applyTracks(e){var t,s,i,a;if(!this.sources||!e)return;const o=this.sources.videoSlots,r=[];for(const i of e){const e="screenshare"===i.type;if(!i.track&&(!this.includePausedVideo||e||!this.knownNonScreenshareVideoInputIds.has(i.id)))continue;const a=o.find((e=>e.id===i.id));if(a&&(null===(t=a.track)||void 0===t?void 0:t.id)===(null===(s=i.track)||void 0===s?void 0:s.id))r.push(Object.assign(Object.assign({},a),{dominant:i.dominant,paused:i.paused,displayName:i.displayName}));else{let t;if(i.track){const e=new MediaStream([i.track]);(null==a?void 0:a.element)?t=a.element:(t=document.createElement("video"),this.placeVideoSourceInDOM(t,i.id),t.setAttribute("autoplay","true"),t.setAttribute("playsinline","true"),t.setAttribute("controls","false")),t.srcObject||(t.srcObject=e);const s=t.srcObject;if(!s){console.error("no srcObject for video el");break}const o=s.getVideoTracks()[0];if(!o){console.error("no video track for video el");break}o.id!==i.track.id&&(s.removeTrack(o),s.addTrack(i.track))}r.push(Object.assign(Object.assign({},i),{element:t})),e||this.knownNonScreenshareVideoInputIds.add(i.id)}}o.filter((e=>r.every((t=>t.id!==e.id)))).forEach((e=>{var t;null===(t=this.rootEl.querySelector(`[data-video-id="${null==e?void 0:e.id}"]`))||void 0===t||t.remove()}));let n=r.length!==o.length;if(!n)for(let e=0;e<r.length;e++){const t=r[e],s=o[e];if(t.id!==s.id||t.paused!==s.paused||t.dominant!==s.dominant||t.displayName!==s.displayName||(null===(i=t.track)||void 0===i?void 0:i.id)!==(null===(a=s.track)||void 0===a?void 0:a.id)){n=!0;break}}if(n){this.sources.videoSlots=r,this.sendUpdateImageSources();for(let e=0;e<20;e++){const t=r[e];t?this.setActiveVideoInput(e,!0,t.id,t.displayName,"screenshare"===t.type,t.paused,t.dominant):this.setActiveVideoInput(e,!1)}this.sendActiveVideoInputSlots(),this.rootDisplaySizeChanged()}}updateAspectRatio(e){this.aspectRatio=e,this.viewportSize=s(this.rootEl,this.aspectRatio),"started"===this.vcsState&&(this.stop(),this.start())}updateParticipantIds(e,t="replace"){this.participantIds="merge"===t?[...new Set([...this.participantIds,...e])]:e,"started"===this.vcsState&&this.handleParticipantsChange()}}}));

package.json

 {
   "name": "@daily-co/daily-vcs-web",
   "description": "This package enables developers to render a VCSComposition inside a given DOM element in the browser.",
-  "version": "0.0.2-alpha.4",
+  "version": "0.0.2-alpha.5",
   "license": "BSD-2-Clause",
@@ -48,3 +48,4 @@ "main": "dist/index.cjs.js",
   "devDependencies": {
-    "@daily-co/daily-js": ">=0.47.0",
+    "@daily-co/daily-js": ">=0.71.2",
+    "@faker-js/faker": "^9.0.3",
     "@rollup/plugin-commonjs": "^25.0.2",
@@ -55,5 +56,7 @@ "@rollup/plugin-node-resolve": "^15.1.0",
     "@size-limit/preset-small-lib": "^8.2.6",
+    "@testing-library/jest-dom": "^6.5.0",
     "@types/jest": "^29.5.3",
     "@types/node": "^20.4.0",
     "eslint": "^8.44.0",
+    "fake-mediastreamtrack": "^1.2.0",
     "jest": "^29.6.1",
@@ -60,0 +63,0 @@ "jest-environment-jsdom": "^29.6.1",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50808

increased by1.38%

Lines of code

442

increased by0.68%

Worsened metrics

Dev dependency count

20

increased by17.65%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes