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

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

dist/index.cjs.js

@@ -1,1 +0,1 @@
-"use strict";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;exports.DailyVCSWebRenderer=class{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=null!==(o=null==a?void 0:a.getAssetUrlCb)&&void 0!==o?o:null,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,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()}};
+"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()}};

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=null!==(o=null==a?void 0:a.getAssetUrlCb)&&void 0!==o?o:null,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,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{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};

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=null!==(o=null==a?void 0:a.getAssetUrlCb)&&void 0!==o?o:null,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,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{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()}}}));

dist/typings/types/index.d.ts

@@ -26,8 +26,10 @@ export type AssetType = 'font' | 'image';
 export type GetAssetUrlCb = (name: string, namespace: string, type: AssetType) => string;
+export type WebFrameCb = (webFrameId: string, webFrameOpts: any, containerEl: HTMLElement) => void;
 export interface VCSOptions {
+    fps: number;
+    scaleFactor: number;
     enablePreload: boolean;
     errorCb(error: any): void;
-    fps: number;
     getAssetUrlCb: GetAssetUrlCb;
-    scaleFactor: number;
+    webFrameCb?: WebFrameCb;
 }
@@ -70,2 +72,3 @@ export interface VCSPeer {
 export interface Options {
+    getAssetUrlCb: GetAssetUrlCb;
     aspectRatio?: number;
@@ -77,3 +80,3 @@ fps?: number;
     maxVideoInputSlots?: number;
-    getAssetUrlCb: GetAssetUrlCb;
+    webFrameCb?: WebFrameCb;
     callbacks?: VCSCallbacks;
@@ -80,0 +83,0 @@ participantIds?: string[];

dist/typings/VCSWebRenderer.d.ts

@@ -30,2 +30,3 @@ import type { VCSComposition, VCSApi, ViewportSize, Options, Params, Merge, State } from './types';
     private readonly getAssetUrlCb;
+    private readonly webFrameCb?;
     /**
@@ -89,2 +90,3 @@ * fps is the framerate of the VCS composition.
      * @param opts.getAssetUrlCb is a callback that will be called when the VCS composition needs to load an asset.
+     * @param opts.webFrameCb is a callback that will be called when a WebFrame element has new properties.
      * @param opts.maxVideoInputSlots is the maximum number of video input slots that can be rendered.
@@ -91,0 +93,0 @@ * @param opts.fps is the framerate of the VCS composition.

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.3",
+  "version": "0.0.2-alpha.4",
   "license": "BSD-2-Clause",
@@ -6,0 +6,0 @@ "main": "dist/index.cjs.js",

No alert changes

Improved metrics

Total package byte prevSize

50114

increased by0.95%

Lines of code

439

increased by1.15%

No dependency changes