npm - @webex/widgets - Versions diffs - 1.22.1 → 1.24.0 - Mend

@webex/widgets 1.22.1 → 1.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/README.md CHANGED Viewed

@@ -20,19 +20,9 @@
 that follow the [Webex](https://www.webex.com) products experience,
 aimed at developers that want to embed Webex into their applications.
-## Project Status
-The Webex Component System is considered to be in beta stage and it's not a generally available product from Webex at this time.
-This means that the Webex Component System is available for everyone to use but breaking changes may occur as we develop it.
-We try our best to minimize any breaking changes but they may occur.
-While the Webex Component System is not a GA product, we still offer support through all regular channels.
-However, bug priority is given to product already generally available.
-We love for you to use the Webex Component System and be part of the feedback process!
 ## Table of Contents
 - [Install](#install)
-- [Webex Components vs Webex Widgets](#webex-components-vs-webex-widgets)
 - [Usage](#usage)
 - [Contributing](#contributing)
 - [License](#license)
@@ -42,38 +32,17 @@ We love for you to use the Webex Component System and be part of the feedback pr
 ## Install
 ```bash
-npm install --save webex @webex/widgets
+npx install-peerdeps @webex/widgets
 ```
-Notice that the [Webex Javascript SDK](https://www.npmjs.com/package/webex)
-has to be installed as a peer dependency.
-## Webex Components vs Webex Widgets
-In addition to the Webex Widgets, we also offer the
-[Webex Component System](https://github.com/webex/components#webex-components).
-The Webex Component System (sometimes shortened as _Webex Components_) is a set of
-React components that, while following Webex styling, allow for more granularity
-in terms of layout and source of data.
-To learn more on the Webex Component System head to its Github repository at
-https://github.com/webex/components.
-Webex Widgets are based on Webex Components but include the adapter that uses
-our [Javascript SDK](https://github.com/webex/webex-js-sdk) to talk to Webex services for you.
-This means that the Webex Widgets use the
-[SDK Component Adapter](https://github.com/webex/sdk-component-adapter#webex-sdk-component-adapter)
-to inject the Webex data.
-All you need is a valid access token and a few parameters based on the widget you want to use.
-You have to take the Widget layout as-is, but the benefit is that there are no configurations needed.
-Install, copy-paste and you have the power of Webex in your application!
+This will install the Widgets package, peer dependencies and dependencies.
 ## Usage
 ### Styles
 In order to properly style Webex Widgets, you will need to import our CSS separately.
-Import `@webex/widgets/dist/webexWidgets.css` into your main entry file.
+Import `@webex/widgets/dist/css/webex-widgets.css` into your main entry file.
 There are two ways to do this:
@@ -82,7 +51,7 @@ There are two ways to do this:
 In your `App.js[x]`, add the following import:
 ```js
-import '@webex/widgets/dist/webexWidgets.css';
+import '@webex/widgets/dist/css/webex-widgets.css';
 ...
 ```
@@ -95,7 +64,7 @@ In the `<head>` tag of your `index.html`, add the following tag:
 <head>
   ...
-  <link rel="stylesheet" type="text/css" href="node_modules/@webex/widgets/dist/webexWidgets.css" />
+  <link rel="stylesheet" type="text/css" href="node_modules/@webex/widgets/dist/css/webex-widgets.css" />
 </head>
 ```
@@ -105,26 +74,34 @@ reference accordingly.
 ### Widgets
-Please make sure to install the [Webex Javascript SDK](https://www.npmjs.com/package/webex)
-along with the [Webex Widget](https://www.npmjs.com/package/@webex/widgets) package.
+Please make sure to install the [Webex Widget](https://www.npmjs.com/package/@webex/widgets) package and related dependencies.
 ```bash
-npm install --save webex @webex/widgets
+npx install-peerdeps @webex/widgets
 ```
 To use a Webex Widget, simply import the desired widget and render it into your React application.
 ```js
-import React from 'react';
-import {WebexMeetingWidget} from '@webex/widgets';
+import {WebexMeetingsWidget} from '@webex/widgets';
-import '@webex/widgets/dist/webexWidgets.css';
+import '@webex/widgets/dist/css/webex-widgets.css';
 export default function App() {
-  return <WebexMeetingWidget accessToken="<YOUR_ACCESS_TOKEN>" meetingDestination="<MEETING_DESTINATION>" />;
+  return (
+    <WebexMeetingsWidget
+      style={{width: "1000px", height: "500px"}} // Substitute with any arbitrary size or use `className`
+      accessToken="<ACCESS_TOKEN>"
+      meetingDestination="<MEETING_DESTINATION>"
+    />
+  );
 }
 ```
+Available widgets from this package are:
+- [Webex Meetings widget](https://github.com/webex/widgets/tree/master/src/widgets/WebexMeetings#webex-meetings-widget)
 ## Contributing
 We'd love for you to contribute to our source code and to make the Webex Widgets even better than they are today!

package/dist/{assets → css/assets}/15592702.woff RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/18609408.woff RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/2ce7dd9e.woff2 RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/2f4a9953.woff2 RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/45dc7dcd.woff2 RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/46a31acd.woff2 RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/49e65cec.woff RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/4a5e2b76.woff2 RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/4fbe2ff6.woff RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/521bbff9.woff2 RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/5be282d2.woff RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/5c1e91fe.woff RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/6a79ddf2.woff2 RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/6c0c2778.woff2 RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/7f551bab.woff RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/87960965.gif RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/89721a2e.woff RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/af1a3e22.svg RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/c1f2fd26.woff RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/cc2626a2.woff2 RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/dc7f8e1b.gif RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/dcdf6545.woff RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/e2738dc5.woff2 RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/ecaeee69.woff RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/ee7d15d.woff RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/f09be80b.woff2 RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/f7e670d.woff RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/f98de399.woff2 RENAMED Viewed

File without changes

package/dist/{assets → css/assets}/ff8c1c66.woff2 RENAMED Viewed

File without changes

package/dist/{webexWidgets.css → css/webex-widgets.css} RENAMED Viewed

File without changes

package/dist/webexWidgets.esm.js CHANGED Viewed

@@ -10747,14 +10747,14 @@ var Ca = function (e) {
     if (i) {
       var t = function () {
-        d(!0);
+        return d(!0);
       },
           n = function () {
-        d(!1);
+        return d(!1);
       };
-      i.addEventListener("mouseenter", t), i.addEventListener("touchstart", t), i.addEventListener("mouseleave", n), i.addEventListener("touchmove", n), i.addEventListener("click", n), e = function () {
-        i.removeEventListener("mouseenter", t), i.removeEventListener("touchstart", t), i.removeEventListener("mouseleave", n), i.removeEventListener("touchmove", n), i.removeEventListener("click", n);
+      i.addEventListener("touchstart", t), i.addEventListener("touchend", n), i.addEventListener("mouseenter", t), i.addEventListener("mouseleave", n), i.addEventListener("click", n), e = function () {
+        i.removeEventListener("touchstart", t), i.removeEventListener("touchend", n), i.removeEventListener("mouseenter", t), i.removeEventListener("mouseleave", n), i.removeEventListener("click", n);
       };
     }
@@ -12704,7 +12704,113 @@ performance.now || performance.mozNow || performance.msNow || performance.oNow |
   return new Date().getTime();
 }; // generate timestamp or delta
+/**
+ * Custom rxjs operator for chaining dependent observables.
+ * Usage:
+ ```js
+  obs.pipe(
+    chainWith((lastMessage) => createDependentObservable(lastMessage),
+  );
+  ```
+ *
+ * @param {function(lastMessage): Observable} createDependentObservable  Function that is passed the last message emitted by the source observable and returns a new observable
+ * @returns {Observable} observable
+ */
+function chainWith(createDependentObservable) {
+  return source => new Observable(subscriber => {
+    let lastValue;
+    let subscription;
+    subscription = source.subscribe(value => {
+      subscriber.next(value);
+      lastValue = value;
+    }, error => subscriber.error(error), () => {
+      subscription = createDependentObservable(lastValue).subscribe(value => subscriber.next(value), error => subscriber.error(error), () => subscriber.complete());
+    });
+    return () => {
+      if (subscription) {
+        subscription.unsubscribe();
+      }
+    };
+  });
+}
+/**
+ * Custom rxjs operator that works like combineLatest, but emits even if some of the source observables haven't emitted yet.
+ * Usage:
+ ```js
+  combineLatestImmediate(obs1, obs2, ...);
+  ```
+ *
+ * @param {ObservableInput} [observables] An array of input Observables to combine with each other.
+ * @returns {Observable} Observable that emits arrays containing the last emitted value from each of the observables defined above.
+ */
+function combineLatestImmediate() {
+  for (var _len = arguments.length, observables = new Array(_len), _key = 0; _key < _len; _key++) {
+    observables[_key] = arguments[_key];
+  }
+  return combineLatest(observables.map(obs => obs.pipe(startWith(undefined))));
+}
+/**
+ * Helper function for deep merge on objects.
+ *
+ * @param {object} dest - The destination object.
+ * @param {object} src - The source object.
+ */
+function deepMerge(dest, src) {
+  const result = dest;
+  for (const [key, val] of Object.entries(src || {})) {
+    if (val && val.constructor === Object) {
+      deepMerge(result[key], val);
+    } else {
+      result[key] = val;
+    }
+  }
+}
+/**
+ * Safe JSON stringifier that:
+ * - replaces circular references with the text [circular-reference]
+ * - catches any JSON.stringify error and returns [error-stringifying:<ERROR-MESSAGE>]
+ *
+ * @param {any} data  Data to be stringified
+ * @param {function} [replacer]  JSON.stringify() replacer parameter
+ * @param {string|number} [space]  JSON.stringify() space parameter
+ * @returns {string} The string result
+ */
+function safeJsonStringify(data, replacer, space) {
+  const seen = new WeakSet();
+  let str;
+  try {
+    str = JSON.stringify(data, (key, value) => {
+      let replaced = replacer ? replacer(key, value) : value;
+      if (typeof replaced === 'object' && replaced !== null) {
+        if (seen.has(replaced)) {
+          replaced = '[circular-reference]';
+        } else {
+          seen.add(replaced);
+        }
+      }
+      return replaced;
+    }, space);
+  } catch (error) {
+    str = `[error-stringifying:${error.message}]`;
+  }
+  return str;
+}
+const isSpeakerSupported = !!document.createElement('audio').setSinkId;
 const logFormat = format.printf(_ref => {
   let {
     timestamp,
@@ -12718,7 +12824,7 @@ const logFormat = format.printf(_ref => {
   let msgString = message;
   if (Array.isArray(message)) {
-    msgString = message.map(item => typeof item === 'string' && item || JSON.stringify(item, (key, value) => value instanceof MediaStream && `MediaStream([${value.getTracks().map(track => track.kind)}])` || value, 2)).join(' ');
+    msgString = message.map(item => typeof item === 'string' && item || safeJsonStringify(item, (key, value) => value instanceof MediaStream && `MediaStream([${value.getTracks().map(track => track.kind)}])` || value, 2)).join(' ');
   }
   return `${timestamp} ${level} ${resourceType} ${resourceID} ${action} ${msgString} ${error ? ` ${error.stack || error}` : ''}`;
@@ -13396,77 +13502,6 @@ class ShareControl extends MeetingControl {
   }
 }
-/**
- * Custom rxjs operator for chaining dependent observables.
- * Usage:
- ```js
-  obs.pipe(
-    chainWith((lastMessage) => createDependentObservable(lastMessage),
-  );
-  ```
- *
- * @param {function(lastMessage): Observable} createDependentObservable  Function that is passed the last message emitted by the source observable and returns a new observable
- * @returns {Observable} observable
- */
-function chainWith(createDependentObservable) {
-  return source => new Observable(subscriber => {
-    let lastValue;
-    let subscription;
-    subscription = source.subscribe(value => {
-      subscriber.next(value);
-      lastValue = value;
-    }, error => subscriber.error(error), () => {
-      subscription = createDependentObservable(lastValue).subscribe(value => subscriber.next(value), error => subscriber.error(error), () => subscriber.complete());
-    });
-    return () => {
-      if (subscription) {
-        subscription.unsubscribe();
-      }
-    };
-  });
-}
-/**
- * Custom rxjs operator that works like combineLatest, but emits even if some of the source observables haven't emitted yet.
- * Usage:
- ```js
-  combineLatestImmediate(obs1, obs2, ...);
-  ```
- *
- * @param {ObservableInput} [observables] An array of input Observables to combine with each other.
- * @returns {Observable} Observable that emits arrays containing the last emitted value from each of the observables defined above.
- */
-function combineLatestImmediate() {
-  for (var _len = arguments.length, observables = new Array(_len), _key = 0; _key < _len; _key++) {
-    observables[_key] = arguments[_key];
-  }
-  return combineLatest(observables.map(obs => obs.pipe(startWith(undefined))));
-}
-/**
- * Helper function for deep merge on objects.
- *
- * @param {object} dest - The destination object.
- * @param {object} src - The source object.
- */
-function deepMerge(dest, src) {
-  const result = dest;
-  for (const [key, val] of Object.entries(src || {})) {
-    if (val && val.constructor === Object) {
-      deepMerge(result[key], val);
-    } else {
-      result[key] = val;
-    }
-  }
-}
-const isSpeakerSupported = !!document.createElement('audio').setSinkId;
 /**
  * Display options of a meeting control.
  *
@@ -13474,6 +13509,7 @@ const isSpeakerSupported = !!document.createElement('audio').setSinkId;
  * @see {@link https://github.com/webex/component-adapter-interfaces/blob/master/src/MeetingsAdapter.js#L58}
  */
 class SwitchCameraControl extends MeetingControl {
   /**
    * Calls the action of the switch camera control.
@@ -13500,7 +13536,7 @@ class SwitchCameraControl extends MeetingControl {
       meetingID
     }]);
     const cameraID$ = this.adapter.getMeeting(meetingID).pipe(map(meeting => meeting.cameraID), distinctUntilChanged());
-    const options$ = defer(() => this.adapter.getAvailableDevices(meetingID, 'videoinput')).pipe(map(availableCameras => availableCameras.map(camera => ({
+    const options$ = this.adapter.getAvailableDevices(meetingID, 'videoinput').pipe(map(availableCameras => availableCameras.map(camera => ({
       value: camera.deviceId,
       label: camera.label
     }))));
@@ -13553,7 +13589,7 @@ class SwitchMicrophoneControl extends MeetingControl {
       meetingID
     }]);
     const microphoneID$ = this.adapter.getMeeting(meetingID).pipe(map(meeting => meeting.microphoneID), distinctUntilChanged());
-    const options$ = defer(() => this.adapter.getAvailableDevices(meetingID, 'audioinput')).pipe(map(availableMicrophones => availableMicrophones.map(microphone => ({
+    const options$ = this.adapter.getAvailableDevices(meetingID, 'audioinput').pipe(map(availableMicrophones => availableMicrophones.map(microphone => ({
       value: microphone.deviceId,
       label: microphone.label
     }))));
@@ -13606,7 +13642,7 @@ class SwitchSpeakerControl extends MeetingControl {
       meetingID
     }]);
     const speakerID$ = this.adapter.getMeeting(meetingID).pipe(map(meeting => meeting.speakerID), distinctUntilChanged());
-    const options$ = defer(() => this.adapter.getAvailableDevices(meetingID, 'audiooutput')).pipe(map(availableSpeakers => availableSpeakers.map(speaker => ({
+    const options$ = this.adapter.getAvailableDevices(meetingID, 'audiooutput').pipe(map(availableSpeakers => availableSpeakers.map(speaker => ({
       value: speaker.deviceId,
       label: speaker.label
     }))), map(options => [{
@@ -13930,7 +13966,7 @@ class MeetingsSDKAdapter extends d {
           }
         }, 2000);
         const [localStream] = await sdkMeeting.getMediaStreams(mediaDirection, audioVideo);
-        const availableDevices = await this.getAvailableDevices(ID);
+        const availableDevices = await navigator.mediaDevices.enumerateDevices();
         const [{
           label: deviceLabel
         }] = localStream.getTracks();
@@ -13962,10 +13998,7 @@ class MeetingsSDKAdapter extends d {
         if (!ignored) {
           let perm;
           const ee = error.error;
-          logger.error('MEETING', ID, 'getStream()', ['Unable to retrieve local media stream', {
-            mediaDirection,
-            audioVideo
-          }], ee);
+          logger.error('MEETING', ID, 'getStream()', 'Unable to retrieve local media stream', ee || error);
           if (ee instanceof DOMException) {
             if (ee.name === 'NotAllowedError') {
@@ -14019,35 +14052,38 @@ class MeetingsSDKAdapter extends d {
     });
   }
   /**
-   * Returns available media devices.
+   * Emits available media devices.
+   * If the user did no grant access to media (browser and OS), the returned observable
+   * will emit an empty array.
    *
-   * @param {string} ID ID of the meeting
-   * @param {'videoinput'|'audioinput'|'audiooutput'} [type] String specifying the device type.
+   * @param {string} ID  Id of the meeting
+   * @param {'videoinput'|'audioinput'|'audiooutput'} type  String specifying the device type.
    * See {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo/kind|MDN}
-   * @returns {MediaDeviceInfo[]} Array containing media devices.
+   * @returns {Observable<MediaDeviceInfo[]>} Observable that emits arrays containing media devices.
    * @private
    */
-  // eslint-disable-next-line class-methods-use-this
-  async getAvailableDevices(ID, type) {
+  getAvailableDevices(ID, type) {
     logger.debug('MEETING', ID, 'getAvailableDevices()', ['called with', {
       ID,
       type
     }]);
-    let devices;
-    try {
-      const sdkMeeting = this.fetchMeeting(ID);
-      devices = await sdkMeeting.getDevices();
-      devices = devices.filter(device => !type || device.kind === type && device.deviceId);
-    } catch (error) {
-      logger.error('MEETING', ID, 'getAvailableDevices()', 'Unable to retrieve devices', error);
-      devices = [];
-    }
+    const getDevices = async () => {
+      let devices = [];
+      try {
+        devices = await this.fetchMeeting(ID).getDevices();
+        devices = devices.filter(device => !type || device.kind === type && device.deviceId);
+      } catch (error) {
+        logger.error('MEETING', ID, 'getAvailableDevices()', 'Unable to retrieve devices', error);
+      }
+      return devices;
+    };
-    logger.debug('MEETING', ID, 'getAvailabelDevices()', ['return', devices]);
-    return devices;
+    return this.getMeeting(ID).pipe(map(meeting => type !== 'videoinput' && type !== 'audioinput' || type === 'videoinput' && meeting.localVideo.permission === 'ALLOWED' || type === 'audioinput' && meeting.localAudio.permission === 'ALLOWED'), distinctUntilChanged(), concatMap(allowed => from(allowed ? getDevices() : [[]])), tap(devices => logger.debug('MEETING', ID, 'getAvailabelDevices()', ['emitting', devices])));
   }
   /**
    * Update the meeting object with media attached based on a given event type.
@@ -14111,21 +14147,24 @@ class MeetingsSDKAdapter extends d {
       case MEDIA_TYPE_REMOTE_SHARE:
         this.meetings[ID] = { ...meeting,
-          remoteShareStream: stream
+          remoteShareStream: stream,
+          remoteShare: meeting.remoteSharing ? stream : null
         };
         break;
       case EVENT_REMOTE_SHARE_START:
         // Only activate the remote stream when get get the start notification
         this.meetings[ID] = { ...meeting,
-          remoteShare: meeting.remoteShareStream
+          remoteShare: meeting.remoteShareStream || null,
+          remoteSharing: true
         };
         break;
       case EVENT_REMOTE_SHARE_STOP:
         // Remove remote share on stop event
         this.meetings[ID] = { ...meeting,
-          remoteShare: null
+          remoteShare: null,
+          remoteSharing: false
         };
         break;
     }
@@ -15529,7 +15568,7 @@ var defineProperty = defineProperty$1;
 })(constants);
 var name = "@webex/sdk-component-adapter";
-var version = "1.95.0";
+var version = "1.97.1";
 const LOG_ARGS$1 = ['SDK-MEMBERSHIPS', `${name}-${version}`]; // max parameter value must be greater than 0 and less than or equal to 1000
 const MAX_MEMBERSHIPS = 1000; // TODO: Figure out how to import JS Doc definitions and remove duplication.
@@ -16571,7 +16610,7 @@ var WebexMeetings = si(ai(WebexMeetingsWidget), function (props) {
     },
     config: {
       appName: appName,
-      appVersion: __appVersion__
+      appVersion: "1.23.0"
     }
   });
   return new WebexSDKAdapter(webex);