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

Comparing version 0.0.1-alpha.8 to 0.0.1-alpha.9

dist/index.cjs.js

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

dist/index.esm.js

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

dist/index.umd.js

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

dist/typings/VCSWebRenderer.d.ts

@@ -26,3 +26,3 @@ import type { VCSComposition, VCSApi, ViewportSize, Options, Params, Merge, State } from './types';
      */
-    private readonly viewportSize;
+    private viewportSize;
     private readonly defaultParams;
@@ -71,3 +71,3 @@ private readonly defaultAssets;
      */
-    private readonly aspectRatio;
+    private aspectRatio;
     private participantIds;
@@ -101,2 +101,7 @@ private resizeObserver;
     /**
+     * aspectRatio is to automatically compute the viewportSize based on the rootEl size.
+     * It defaults to 16/9.
+     */
+    get ratio(): number;
+    /**
      * state is the current state of the VCS composition.
@@ -181,2 +186,8 @@ */
     /**
+     * updateAspectRatio updates the aspect ratio of the element.
+     * @param aspectRatio is the new aspect ratio.
+     * it will restart the VCS composition.
+     */
+    updateAspectRatio(aspectRatio: number): void;
+    /**
      * updateParticipantIds updates the participantIds to render.
@@ -183,0 +194,0 @@ * @param participantIds is an array of participantIds to render. If it's empty, all participants will be rendered.

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

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

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

47933

increased by1.63%

Lines of code

418

increased by2.7%

No dependency changes