twilio-video 2.18.1 → 2.18.2

package/lib/media/track/remotevideotrack.js

@@ -67,6 +67,12 @@ class RemoteVideoTrack extends RemoteMediaVideoTrack {
       _invisibleElements: {
         value: new WeakSet(),
       },
+      _elToPipCallbacks: {
+        value: new WeakMap(),
+      },
+      _elToPipWindows: {
+        value: new WeakMap(),
+      },
       _turnOffTimer: {
         value: new Timeout(() => {
           this._setRenderHint({ enabled: false });
@@ -165,6 +171,50 @@ class RemoteVideoTrack extends RemoteMediaVideoTrack {
     return this;
   }
 
+  _unObservePip(el) {
+    const pipCallbacks = this._elToPipCallbacks.get(el);
+    if (pipCallbacks) {
+      el.removeEventListener('enterpictureinpicture', pipCallbacks.onEnterPip);
+      el.removeEventListener('leavepictureinpicture', pipCallbacks.onLeavePip);
+      this._elToPipCallbacks.delete(el);
+    }
+  }
+
+  _observePip(el) {
+    const pipCallbacks = this._elToPipCallbacks.get(el);
+    if (!pipCallbacks) {
+      const onEnterPip = event => this._onEnterPip(event, el);
+      const onLeavePip = event => this._onLeavePip(event, el);
+      const onResizePip = event => this._onResizePip(event, el);
+
+      el.addEventListener('enterpictureinpicture', onEnterPip);
+      el.addEventListener('leavepictureinpicture', onLeavePip);
+      this._elToPipCallbacks.set(el, { onEnterPip, onLeavePip, onResizePip });
+    }
+  }
+
+  _onEnterPip(event, videoEl) {
+    this._log.debug('onEnterPip');
+    const pipWindow = event.pictureInPictureWindow;
+    this._elToPipWindows.set(videoEl, pipWindow);
+    const { onResizePip } = this._elToPipCallbacks.get(videoEl);
+    pipWindow.addEventListener('resize', onResizePip);
+    maybeUpdateEnabledHint(this);
+  }
+
+  _onLeavePip(event, videoEl) {
+    this._log.debug('onLeavePip');
+    this._elToPipWindows.delete(videoEl);
+    const { onResizePip } = this._elToPipCallbacks.get(videoEl);
+    const pipWindow = event.pictureInPictureWindow;
+    pipWindow.removeEventListener('resize', onResizePip);
+    maybeUpdateEnabledHint(this);
+  }
+
+  _onResizePip() {
+    maybeUpdateDimensionHint(this);
+  }
+
   attach(el) {
     const result = super.attach(el);
 
@@ -181,6 +231,7 @@ class RemoteVideoTrack extends RemoteMediaVideoTrack {
       this._documentVisibilityTurnOffCleanup = this._documentVisibilityTurnOffCleanup || setupDocumentVisibilityTurnOff(this);
     }
 
+    this._observePip(result);
     return result;
   }
 
@@ -191,6 +242,7 @@ class RemoteVideoTrack extends RemoteMediaVideoTrack {
       this._intersectionObserver.unobserve(element);
       this._resizeObserver.unobserve(element);
       this._invisibleElements.delete(element);
+      this._unObservePip(element);
     });
 
     if (this._attachments.size === 0) {
@@ -297,34 +349,42 @@ function setupDocumentVisibilityTurnOff(removeVideoTrack) {
   };
 }
 
-function maybeUpdateEnabledHint(removeVideoTrack) {
-  if (removeVideoTrack._clientTrackSwitchOffControl !== 'auto') {
+function maybeUpdateEnabledHint(remoteVideoTrack) {
+  if (remoteVideoTrack._clientTrackSwitchOffControl !== 'auto') {
     return;
   }
 
-  const visibleElements = removeVideoTrack._getAllAttachedElements().filter(el => !removeVideoTrack._invisibleElements.has(el));
-  const enabled = document.visibilityState === 'visible' && visibleElements.length > 0;
+  const visibleElements = remoteVideoTrack._getAllAttachedElements().filter(el => !remoteVideoTrack._invisibleElements.has(el));
+  const pipWindows = remoteVideoTrack._getAllAttachedElements().filter(el => remoteVideoTrack._elToPipWindows.has(el));
+
+  // even when document is invisible we may have track playing in pip window.
+  const enabled = pipWindows.length > 0 || (document.visibilityState === 'visible' && visibleElements.length > 0);
 
   if (enabled === true) {
-    removeVideoTrack._turnOffTimer.clear();
-    removeVideoTrack._setRenderHint({ enabled: true });
-  } else if (!removeVideoTrack._turnOffTimer.isSet) {
+    remoteVideoTrack._turnOffTimer.clear();
+    remoteVideoTrack._setRenderHint({ enabled: true });
+  } else if (!remoteVideoTrack._turnOffTimer.isSet) {
     // set the track to be turned off after some delay.
-    removeVideoTrack._turnOffTimer.start();
+    remoteVideoTrack._turnOffTimer.start();
   }
 }
 
-function maybeUpdateDimensionHint(removeVideoTrack) {
-  if (removeVideoTrack._contentPreferencesMode !== 'auto') {
+function maybeUpdateDimensionHint(remoteVideoTrack) {
+  if (remoteVideoTrack._contentPreferencesMode !== 'auto') {
     return;
   }
 
-  const visibleElements = removeVideoTrack._getAllAttachedElements().filter(el => !removeVideoTrack._invisibleElements.has(el));
-  if (visibleElements.length > 0) {
-    const [{ clientHeight, clientWidth }] = visibleElements.sort((el1, el2) =>
+  const visibleElements = remoteVideoTrack._getAllAttachedElements().filter(el => !remoteVideoTrack._invisibleElements.has(el));
+  const pipElements = remoteVideoTrack._getAllAttachedElements().map(el => {
+    const pipWindow = remoteVideoTrack._elToPipWindows.get(el);
+    return pipWindow ? { clientHeight: pipWindow.height, clientWidth: pipWindow.width } : { clientHeight: 0, clientWidth: 0 };
+  });
+  const totalElements = visibleElements.concat(pipElements);
+  if (totalElements.length > 0) {
+    const [{ clientHeight, clientWidth }] = totalElements.sort((el1, el2) =>
       el2.clientHeight + el2.clientWidth - el1.clientHeight - el1.clientWidth - 1);
     const renderDimensions = { height: clientHeight, width: clientWidth };
-    removeVideoTrack._setRenderHint({ renderDimensions });
+    remoteVideoTrack._setRenderHint({ renderDimensions });
   }
 }
 

package/lib/signaling/v2/mediasignaling.js

@@ -50,19 +50,16 @@ class MediaSignaling extends EventEmitter {
     const receiverPromise = this._getReceiver(id).then(receiver => {
       if (receiver.kind !== 'data') {
         this._log.error('Expected a DataTrackReceiver');
-        throw new Error('Expected a DataTrackReceiver');
       } if (this._receiverPromise !== receiverPromise) {
         return;
       }
 
       try {
         this._transport = receiver.toDataTransport();
+        this.emit('ready', this._transport);
       } catch (ex) {
-        this._log.error('Failed to toDataTransport');
-        throw new Error('Failed to toDataTransport');
+        this._log.error(`Failed to toDataTransport: ${ex.message}`);
       }
-      this.emit('ready', this._transport);
-
       receiver.once('close', () => this._teardown());
     });
     this._receiverPromise = receiverPromise;

package/lib/signaling/v2/peerconnection.js

@@ -904,7 +904,9 @@ class PeerConnectionV2 extends StateMachine {
       log.debug(`Starting ICE reconnect timeout: ${delay}`);
       this._iceReconnectTimeout.start();
     }
-    this.offer();
+    this.offer().catch(ex => {
+      log.error(`offer failed in _initiateIceRestart with: ${ex.message}`);
+    });
   }
 
   /**

package/package.json

@@ -2,7 +2,7 @@
   "name": "twilio-video",
   "title": "Twilio Video",
   "description": "Twilio Video JavaScript Library",
-  "version": "2.18.1",
+  "version": "2.18.2",
   "homepage": "https://twilio.com",
   "author": "Mark Andrus Roberts <mroberts@twilio.com>",
   "contributors": [
@@ -97,7 +97,8 @@
     "lint:js": "eslint ./lib ./test/*.js ./docker/**/*.js ./test/framework/*.js ./test/lib/*.js ./test/integration/** ./test/unit/** ",
     "lint:ts": "eslint ./tsdef/*.ts ./lib/**/*.ts",
     "lint": "npm-run-all lint:js lint:ts",
-    "test:unit": "npm-run-all build:es5 test:unit:js test:unit:ts",
+    "printVersion": "node --version && npm --version",
+    "test:unit": "npm-run-all printVersion build:es5 test:unit:js test:unit:ts",
     "test:unit:js": "nyc --report-dir=./coverage/js --extension=.js --include=lib/**/* --reporter=html --reporter=lcov --reporter=text mocha ./test/unit/index.js",
     "test:unit:ts": "nyc --report-dir=./coverage/ts --extension=.ts --include=lib/**/* --reporter=html --reporter=lcov --reporter=text mocha -r ts-node/register ./test/unit/index.ts",
     "test:serversiderender": "mocha ./test/serversiderender/index.js",