@webex/plugin-device-manager 3.0.0-beta.3 → 3.0.0-beta.30

package/sample/app.js

@@ -14,7 +14,7 @@ let webex;
 // retype things everytime we reload the page.
 
 [
-  'access-token'
+  'access-token',
   // 'invitee'
 ].forEach((id) => {
   const el = document.getElementById(id);
@@ -25,6 +25,93 @@ let webex;
   });
 });
 
+function notify(message) {
+  document.getElementById('notifications').innerHTML = message;
+  setTimeout(() => {
+    document.getElementById('notifications').innerHTML = '';
+  }, 5000);
+}
+
+function populateDeviceDropdown(devices) {
+  const deviceListDropdown = document.getElementById('device-list-dropdown');
+
+  deviceListDropdown.length = 0;
+
+  const defaultOption = document.createElement('option');
+
+  defaultOption.text = 'Choose a Device';
+  deviceListDropdown.add(defaultOption);
+  deviceListDropdown.selectedIndex = 0;
+
+  let option;
+
+  devices.forEach((device) => {
+    option = document.createElement('option');
+    option.text = device.deviceInfo.description || device.deviceInfo.name;
+    option.value = device.id;
+    deviceListDropdown.add(option);
+  });
+}
+
+function toggleDisplay(elementId, status) {
+  const element = document.getElementById(elementId);
+
+  if (status) {
+    element.style.display = 'block';
+  } else {
+    element.style.display = 'none';
+  }
+}
+
+function populateDeviceAudioState(audioState) {
+  document.getElementById('getAudioStateContentsDiv').innerHTML = `<div>
+    <ul>
+      <li>Muted: ${audioState.microphones.muted}</li>
+      <li>volume current level: ${audioState.volume.level}</li>
+      <li>volume max level: ${audioState.volume.max}</li>
+      <li>volume min level: ${audioState.volume.min}</li>
+      <li>volume step level: ${audioState.volume.step}</li>
+    </ul>
+    <div id='hideAudioStateBtnDiv' style=muted"display:none;">
+      <button id="hideAudioState" title="hideAudioState" type="button">hideAudioState</button>
+    </div>
+  </div>`;
+  toggleDisplay('getAudioStateContentsDiv', true);
+  toggleDisplay('hideAudioStateBtnDiv', true);
+  // hideAudioState of the paired device
+  document.getElementById('hideAudioState').addEventListener('click', () => {
+    toggleDisplay('getAudioStateContentsDiv', false);
+    toggleDisplay('hideAudioStateBtnDiv', false);
+  });
+}
+
+function populateDeviceSearchResults(response) {
+  let devices = '';
+
+  response.forEach((device) => {
+    devices += `
+      <li style='list-style-type: none'>
+        <input type='radio' name='deviceRadio' onclick='requestPinChallenge("${device.id}")'/>
+        <label>${device.description || device.name}</label>
+      </li>`;
+  });
+  document.getElementById('getDeviceSearchResultsDiv').innerHTML = `<div>
+    <ul>
+      ${devices}
+    </ul>
+    <div id='hideDeviceSearchResultsBtnDiv' style=muted"display:none;">
+      <button id="hideDeviceSearchResults" title="hideDeviceSearchResults" type="button">hideDeviceSearchResults</button>
+    </div>
+  </div>`;
+  toggleDisplay('getDeviceSearchResultsDiv', true);
+  toggleDisplay('hideDeviceSearchResults', true);
+  // hideAudioState of the paired device
+  document.getElementById('hideDeviceSearchResults').addEventListener('click', () => {
+    toggleDisplay('getDeviceSearchResultsDiv', false);
+    toggleDisplay('hideDeviceSearchResults', false);
+  });
+}
+
 function connect() {
   if (!webex) {
     webex = Webex.init({
@@ -32,8 +119,8 @@ function connect() {
         // Any other sdk config we need
       },
       credentials: {
-        access_token: document.getElementById('access-token').value
-      }
+        access_token: document.getElementById('access-token').value,
+      },
     });
   }
 
@@ -61,26 +148,23 @@ function connect() {
 }
 
 function requestPinChallenge(deviceId) {
-  return webex.devicemanager.requestPin({id: deviceId})
-    .then(() => {
-      toggleDisplay('enterPinDiv', true);
-      toggleDisplay('requestPairingBtnDiv', true);
-      notify('Enter the PIN');
-    });
+  return webex.devicemanager.requestPin({id: deviceId}).then(() => {
+    toggleDisplay('enterPinDiv', true);
+    toggleDisplay('requestPairingBtnDiv', true);
+    notify('Enter the PIN');
+  });
 }
 
-
 document.getElementById('deviceControls').refresh.addEventListener('click', () => {
   if (webex.devicemanager) {
     notify('Listing devices...');
 
-    return webex.devicemanager.refresh()
-      .then((devices) => {
-        populateDeviceDropdown(devices);
-        notify('');
-        toggleDisplay('requestPinDiv', true);
-        toggleDisplay('removeBtnDiv', true);
-      });
+    return webex.devicemanager.refresh().then((devices) => {
+      populateDeviceDropdown(devices);
+      notify('');
+      toggleDisplay('requestPinDiv', true);
+      toggleDisplay('removeBtnDiv', true);
+    });
   }
 
   return false;
@@ -108,7 +192,8 @@ document.getElementById('requestPairing').addEventListener('click', () => {
     notify('Pairing...');
     const pin = document.getElementById('pin').value;
 
-    return webex.devicemanager.pair({pin})
+    return webex.devicemanager
+      .pair({pin})
       .then(() => {
         notify('Paired');
         toggleDisplay('requestUnPairingBtnDiv', true);
@@ -139,23 +224,22 @@ document.getElementById('requestUnPairing').addEventListener('click', () => {
   if (webex.devicemanager) {
     notify('UnPairing...');
 
-    return webex.devicemanager.unpair()
-      .then(() => {
-        notify('UnPaired');
-        toggleDisplay('requestUnPairingBtnDiv', false);
-        toggleDisplay('requestPairingBtnDiv', false);
-        toggleDisplay('enterPinDiv', false);
-        toggleDisplay('getAudioStateBtnDiv', false);
-        toggleDisplay('hideAudioStateBtnDiv', false);
-        toggleDisplay('getAudioStateContentsDiv', false);
-        toggleDisplay('volumeUpBtnDiv', false);
-        toggleDisplay('volumeDownBtnDiv', false);
-        toggleDisplay('muteBtnDiv', false);
-        toggleDisplay('unmuteBtnDiv', false);
-        toggleDisplay('enterConvoIdDiv', false);
-        toggleDisplay('bindSpaceBtnDiv', false);
-        toggleDisplay('unbindSpaceBtnDiv', false);
-      });
+    return webex.devicemanager.unpair().then(() => {
+      notify('UnPaired');
+      toggleDisplay('requestUnPairingBtnDiv', false);
+      toggleDisplay('requestPairingBtnDiv', false);
+      toggleDisplay('enterPinDiv', false);
+      toggleDisplay('getAudioStateBtnDiv', false);
+      toggleDisplay('hideAudioStateBtnDiv', false);
+      toggleDisplay('getAudioStateContentsDiv', false);
+      toggleDisplay('volumeUpBtnDiv', false);
+      toggleDisplay('volumeDownBtnDiv', false);
+      toggleDisplay('muteBtnDiv', false);
+      toggleDisplay('unmuteBtnDiv', false);
+      toggleDisplay('enterConvoIdDiv', false);
+      toggleDisplay('bindSpaceBtnDiv', false);
+      toggleDisplay('unbindSpaceBtnDiv', false);
+    });
   }
 
   return false;
@@ -166,11 +250,10 @@ document.getElementById('getAudioState').addEventListener('click', () => {
   if (webex.devicemanager) {
     notify('GettingAudioState...');
 
-    return webex.devicemanager.getAudioState()
-      .then((res) => {
-        populateDeviceAudioState(res);
-        notify('Audio State fetched');
-      });
+    return webex.devicemanager.getAudioState().then((res) => {
+      populateDeviceAudioState(res);
+      notify('Audio State fetched');
+    });
   }
 
   return false;
@@ -181,7 +264,8 @@ document.getElementById('volumeUp').addEventListener('click', () => {
   if (webex.devicemanager) {
     notify('Increasing Volume...');
 
-    return webex.devicemanager.increaseVolume()
+    return webex.devicemanager
+      .increaseVolume()
       .then(() => webex.devicemanager.getAudioState())
       .then((res) => {
         populateDeviceAudioState(res);
@@ -197,7 +281,8 @@ document.getElementById('volumeDown').addEventListener('click', () => {
   if (webex.devicemanager) {
     notify('Decreasing Volume...');
 
-    return webex.devicemanager.decreaseVolume()
+    return webex.devicemanager
+      .decreaseVolume()
       .then(() => webex.devicemanager.getAudioState())
       .then((res) => {
         populateDeviceAudioState(res);
@@ -213,7 +298,8 @@ document.getElementById('mute').addEventListener('click', () => {
   if (webex.devicemanager) {
     notify('Muting...');
 
-    return webex.devicemanager.mute()
+    return webex.devicemanager
+      .mute()
       .then(() => webex.devicemanager.getAudioState())
       .then((res) => {
         populateDeviceAudioState(res);
@@ -231,7 +317,8 @@ document.getElementById('unmute').addEventListener('click', () => {
   if (webex.devicemanager) {
     notify('UnMuting');
 
-    return webex.devicemanager.unmute()
+    return webex.devicemanager
+      .unmute()
       .then(() => webex.devicemanager.getAudioState())
       .then((res) => {
         populateDeviceAudioState(res);
@@ -249,25 +336,32 @@ document.getElementById('bindSpace').addEventListener('click', () => {
   if (webex.devicemanager) {
     notify('Binding space...');
     const convoId = document.getElementById('convoId').value;
+
     let url;
 
-    return webex.internal.services.waitForCatalog('postauth')
+    return webex.internal.services
+      .waitForCatalog('postauth')
       .then(() => {
         url = `${webex.internal.services.get('conversation')}/conversations/${convoId}`;
 
-        return webex.internal.conversation.get({url}, {
-          url,
-          includeUxTimers: true,
-          ackFilter: 'noack',
-          includeParticipants: false,
-          lastViewableActivityOnly: true,
-          participantsLimit: 0
-        });
+        return webex.internal.conversation.get(
+          {url},
+          {
+            url,
+            includeUxTimers: true,
+            ackFilter: 'noack',
+            includeParticipants: false,
+            lastViewableActivityOnly: true,
+            participantsLimit: 0,
+          }
+        );
       })
-      .then((conversation) => webex.devicemanager.bindSpace({
-        url,
-        kmsResourceObjectUrl: conversation.kmsResourceObjectUrl
-      }))
+      .then((conversation) =>
+        webex.devicemanager.bindSpace({
+          url,
+          kmsResourceObjectUrl: conversation.kmsResourceObjectUrl,
+        })
+      )
       .then(() => {
         notify('Space is bound');
         toggleDisplay('bindSpaceBtnDiv', false);
@@ -286,7 +380,8 @@ document.getElementById('unbindSpace').addEventListener('click', () => {
   if (webex.devicemanager) {
     notify('UnBinding space...');
 
-    return webex.devicemanager.unbindSpace()
+    return webex.devicemanager
+      .unbindSpace()
       .then(() => {
         notify('Space is unbound');
         toggleDisplay('bindSpaceBtnDiv', true);
@@ -307,7 +402,8 @@ document.getElementById('remove').addEventListener('click', () => {
     const deviceId = dropdown.options[dropdown.selectedIndex].value;
 
     if (deviceId && deviceId !== 'Choose a Device') {
-      return webex.devicemanager.remove(deviceId)
+      return webex.devicemanager
+        .remove(deviceId)
         .then(() => {
           notify('Device removed');
 
@@ -333,9 +429,10 @@ document.getElementById('search').addEventListener('click', () => {
     const searchQuery = document.getElementById('searchQuery').value;
 
     if (searchQuery && searchQuery.length >= 3) {
-      return webex.devicemanager.search({
-        searchQuery
-      })
+      return webex.devicemanager
+        .search({
+          searchQuery,
+        })
         .then((res) => {
           populateDeviceSearchResults(res);
         })
@@ -349,94 +446,6 @@ document.getElementById('search').addEventListener('click', () => {
   return false;
 });
 
-function notify(message) {
-  document.getElementById('notifications').innerHTML = message;
-  setTimeout(() => {
-    document.getElementById('notifications').innerHTML = '';
-  }, 5000);
-}
-
-function populateDeviceDropdown(devices) {
-  const deviceListDropdown = document.getElementById('device-list-dropdown');
-
-  deviceListDropdown.length = 0;
-
-  const defaultOption = document.createElement('option');
-
-  defaultOption.text = 'Choose a Device';
-  deviceListDropdown.add(defaultOption);
-  deviceListDropdown.selectedIndex = 0;
-
-  let option;
-
-  devices.forEach((device) => {
-    option = document.createElement('option');
-    option.text = device.deviceInfo.description || device.deviceInfo.name;
-    option.value = device.id;
-    deviceListDropdown.add(option);
-  });
-}
-
-function populateDeviceAudioState(audioState) {
-  document.getElementById('getAudioStateContentsDiv').innerHTML = `<div>
-    <ul>
-      <li>Muted: ${audioState.microphones.muted}</li>
-      <li>volume current level: ${audioState.volume.level}</li>
-      <li>volume max level: ${audioState.volume.max}</li>
-      <li>volume min level: ${audioState.volume.min}</li>
-      <li>volume step level: ${audioState.volume.step}</li>
-    </ul>
-    <div id='hideAudioStateBtnDiv' style=muted"display:none;">
-      <button id="hideAudioState" title="hideAudioState" type="button">hideAudioState</button>
-    </div>
-  </div>`;
-  toggleDisplay('getAudioStateContentsDiv', true);
-  toggleDisplay('hideAudioStateBtnDiv', true);
-  // hideAudioState of the paired device
-  document.getElementById('hideAudioState').addEventListener('click', () => {
-    toggleDisplay('getAudioStateContentsDiv', false);
-    toggleDisplay('hideAudioStateBtnDiv', false);
-  });
-}
-
-function populateDeviceSearchResults(response) {
-  let devices = '';
-
-  response.forEach((device) => {
-    devices += `
-      <li style='list-style-type: none'>
-        <input type='radio' name='deviceRadio' onclick='requestPinChallenge("${device.id}")'/>
-        <label>${device.description || device.name}</label>
-      </li>`;
-  });
-  document.getElementById('getDeviceSearchResultsDiv').innerHTML = `<div>
-    <ul>
-      ${devices}
-    </ul>
-    <div id='hideDeviceSearchResultsBtnDiv' style=muted"display:none;">
-      <button id="hideDeviceSearchResults" title="hideDeviceSearchResults" type="button">hideDeviceSearchResults</button>
-    </div>
-  </div>`;
-  toggleDisplay('getDeviceSearchResultsDiv', true);
-  toggleDisplay('hideDeviceSearchResults', true);
-  // hideAudioState of the paired device
-  document.getElementById('hideDeviceSearchResults').addEventListener('click', () => {
-    toggleDisplay('getDeviceSearchResultsDiv', false);
-    toggleDisplay('hideDeviceSearchResults', false);
-  });
-}
-
-function toggleDisplay(elementId, status) {
-  const element = document.getElementById(elementId);
-
-  if (status) {
-    element.style.display = 'block';
-  }
-  else {
-    element.style.display = 'none';
-  }
-}
-
 document.getElementById('credentials').addEventListener('submit', (event) => {
   // let's make sure we don't reload the page when we submit the form
   event.preventDefault();

package/src/collection.js

@@ -8,15 +8,14 @@ const DeviceCollection = {
   },
 
   set(device) {
-    const deviceId = device.id || device.identity && device.identity.id;
+    const deviceId = device.id || (device.identity && device.identity.id);
     // check if the device is already existing, if so then merge else add
     const existingDevice = this.devices[deviceId];
 
     if (existingDevice) {
       // already existing, merge for any new binding information
       merge(existingDevice, device);
-    }
-    else {
+    } else {
       this.devices[deviceId] = device;
     }
   },
@@ -27,8 +26,7 @@ const DeviceCollection = {
 
   getAll() {
     return Object.values(this.devices);
-  }
-
+  },
 };
 
 export default DeviceCollection;