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

@webex/widgets 1.22.1 → 1.24.0

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);