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

Comparing version 0.0.1-alpha.1 to 0.0.1-alpha.2

dist/index.cjs.js

@@ -200,2 +200,9 @@ 'use strict';
     }
+    /**
+     * imageSources is a map of imageId to image URL.
+     * It's used to keep track of the images that are currently being rendered.
+     */
+    get imageSources() {
+        return this.sources.assetImages;
+    }
     recomputeOutputScaleFactor() {
@@ -286,10 +293,10 @@ const displayW = this.rootEl.clientWidth;
     setupEventListeners() {
-        this.callObject.on('participant-joined', this.handleParticipantsChange);
-        this.callObject.on('participant-updated', this.handleParticipantsChange);
-        this.callObject.on('participant-left', this.handleParticipantsChange);
+        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);
-        this.callObject.off('participant-updated', this.handleParticipantsChange);
-        this.callObject.off('participant-left', this.handleParticipantsChange);
+        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));
     }
@@ -385,5 +392,7 @@ /**
      */
-    sendParams(params) {
+    sendParams(params, mergeType = 'merge') {
         if (!this.vcsApi)
             return;
+        if (mergeType === 'replace')
+            this.paramValues = {};
         Object.entries(params).forEach(([id, value]) => this.sendParam(id, value));
@@ -405,3 +414,3 @@ }
                 const img = new Image();
-                img.onload = () => resolve({ name, image });
+                img.onload = () => resolve({ name, image: img });
                 img.onerror = () => {
@@ -408,0 +417,0 @@ console.error(`Image load failed, asset ${name}`);

dist/index.esm.js

@@ -198,2 +198,9 @@ /******************************************************************************
     }
+    /**
+     * imageSources is a map of imageId to image URL.
+     * It's used to keep track of the images that are currently being rendered.
+     */
+    get imageSources() {
+        return this.sources.assetImages;
+    }
     recomputeOutputScaleFactor() {
@@ -284,10 +291,10 @@ const displayW = this.rootEl.clientWidth;
     setupEventListeners() {
-        this.callObject.on('participant-joined', this.handleParticipantsChange);
-        this.callObject.on('participant-updated', this.handleParticipantsChange);
-        this.callObject.on('participant-left', this.handleParticipantsChange);
+        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);
-        this.callObject.off('participant-updated', this.handleParticipantsChange);
-        this.callObject.off('participant-left', this.handleParticipantsChange);
+        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));
     }
@@ -383,5 +390,7 @@ /**
      */
-    sendParams(params) {
+    sendParams(params, mergeType = 'merge') {
         if (!this.vcsApi)
             return;
+        if (mergeType === 'replace')
+            this.paramValues = {};
         Object.entries(params).forEach(([id, value]) => this.sendParam(id, value));
@@ -403,3 +412,3 @@ }
                 const img = new Image();
-                img.onload = () => resolve({ name, image });
+                img.onload = () => resolve({ name, image: img });
                 img.onerror = () => {
@@ -406,0 +415,0 @@ console.error(`Image load failed, asset ${name}`);

dist/index.umd.js

@@ -204,2 +204,9 @@ (function (global, factory) {
         }
+        /**
+         * imageSources is a map of imageId to image URL.
+         * It's used to keep track of the images that are currently being rendered.
+         */
+        get imageSources() {
+            return this.sources.assetImages;
+        }
         recomputeOutputScaleFactor() {
@@ -290,10 +297,10 @@ const displayW = this.rootEl.clientWidth;
         setupEventListeners() {
-            this.callObject.on('participant-joined', this.handleParticipantsChange);
-            this.callObject.on('participant-updated', this.handleParticipantsChange);
-            this.callObject.on('participant-left', this.handleParticipantsChange);
+            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);
-            this.callObject.off('participant-updated', this.handleParticipantsChange);
-            this.callObject.off('participant-left', this.handleParticipantsChange);
+            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));
         }
@@ -389,5 +396,7 @@ /**
          */
-        sendParams(params) {
+        sendParams(params, mergeType = 'merge') {
             if (!this.vcsApi)
                 return;
+            if (mergeType === 'replace')
+                this.paramValues = {};
             Object.entries(params).forEach(([id, value]) => this.sendParam(id, value));
@@ -409,3 +418,3 @@ }
                     const img = new Image();
-                    img.onload = () => resolve({ name, image });
+                    img.onload = () => resolve({ name, image: img });
                     img.onerror = () => {
@@ -412,0 +421,0 @@ console.error(`Image load failed, asset ${name}`);

dist/typings/VCSWebRenderer.d.ts

@@ -119,2 +119,7 @@ import type { VCSComposition, VCSApi, ViewportSize, Options, Params, Merge } from './types';
     get size(): ViewportSize;
+    /**
+     * imageSources is a map of imageId to image URL.
+     * It's used to keep track of the images that are currently being rendered.
+     */
+    get imageSources(): Record<string, string>;
     private recomputeOutputScaleFactor;
@@ -153,3 +158,3 @@ /**
      */
-    sendParams(params: Record<string, any>): void;
+    sendParams(params: Record<string, any>, mergeType?: Merge): void;
     private sendUpdateImageSources;
@@ -156,0 +161,0 @@ /**

package.json

 {
   "name": "@daily-co/daily-vcs-web",
-  "description": "A library to render Daily VCS view in the browser",
-  "version": "0.0.1-alpha.1",
+  "description": "This package enables developers to render a VCSComposition inside a given DOM element in the browser.",
+  "version": "0.0.1-alpha.2",
   "license": "BSD-2-Clause",
@@ -9,3 +9,3 @@ "main": "dist/index.cjs.js",
   "browser": "dist/index.umd.js",
-  "typings": "dist/index.d.ts",
+  "typings": "dist/typings/index.d.ts",
   "files": [
@@ -12,0 +12,0 @@ "dist"

README.md

@@ -9,3 +9,3 @@ # Daily VCS Web
 
-````bash
+```bash
 npm install @daily-co/daily-vcs-web
@@ -32,4 +32,9 @@ # or
 
-const renderer = new DailyVCSWebRenderer(callObject, DailyVCSBaselineComposition, rootEl, opts);
-````
+const renderer = new DailyVCSWebRenderer(
+  callObject,
+  DailyVCSBaselineComposition,
+  rootEl,
+  opts
+);
+```
 
@@ -115,2 +120,3 @@ ### Methods
 | `size`           | `{ w: number, h: number }` | The render viewport size used by VCS.                                                                      |
+| `imageSources`   | `Record<string, string>`   | A map of image assets. It keeps track of the current image sources                                         |
 
@@ -117,0 +123,0 @@ ### Callbacks

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

84812

increased by1.97%

Lines of code

1806

increased by1.8%

Number of lines in readme file

140

increased by4.48%

No dependency changes