Merge pull request #2095 from twilio/prep-2.31.0

Prep 2.31.0

Author: charliesantos

.circleci/config.yml

@@ -74,15 +74,15 @@ executors:
       <<: *defaultEnv
   generic-executor:
     docker:
-      - image: alpine:3.7
+      - image: alpine:3.21
         auth:
           username: $DOCKER_HUB_USERNAME
           password: $DOCKER_HUB_PASSWORD
     environment:
       <<: *defaultEnv
   machine-executor:
     machine:
-      image: ubuntu-2004:202111-02
+      image: ubuntu-2404:current
     environment:
       <<: *defaultEnv
 commands:

.gitignore

@@ -11,7 +11,6 @@ test/crossbrowser/src/browser/index.js
 test/lib/sdkdriver/lib
 test/lib/sdkdriver/test/integration/browser/index.js
 npm-debug.log
-package-lock.json
 test.json
 nodemon.json
 yarn.lock

CHANGELOG.md

@@ -2,6 +2,16 @@ The Twilio Programmable Video SDKs use [Semantic Versioning](http://www.semver.o
 
 **Version 1.x reached End of Life on September 8th, 2021.** See the changelog entry [here](https://www.twilio.com/changelog/end-of-life-complete-for-unsupported-versions-of-the-programmable-video-sdk). Support for the 1.x version ended on December 4th, 2020.
 
+2.31.0 (April 21, 2025)
+=======================
+
+New Features
+------------
+
+### Document Picture-in-Picture API Support
+
+Previously, when `Client Track Switch Off Control` was set to `auto`, video tracks were automatically switched off—even if they were visible and rendered in a [Document Picture-in-Picture](https://developer.chrome.com/docs/web-platform/document-picture-in-picture) (PiP) window. This caused issues where users could see the video element, but the track itself was disabled. In this new SDK version, video tracks will remain active and continue to play when displayed in a PiP window.
+
 2.30.0 (March 28, 2025)
 ========================
 

README.md

@@ -74,7 +74,7 @@ Releases of twilio-video.js are hosted on a CDN, and you can include these
 directly in your web app using a <script> tag.
 
 ```html
-<script src="//sdk.twilio.com/js/video/releases/2.30.0/twilio-video.min.js"></script>
+<script src="//sdk.twilio.com/js/video/releases/2.31.0/twilio-video.min.js"></script>
 ```
 
 Using this method, twilio-video.js will set a browser global:

appveyor.yml

@@ -338,15 +338,19 @@ class RemoteVideoTrack extends RemoteMediaVideoTrack {
   }
 }
 
-function setupDocumentVisibilityTurnOff(removeVideoTrack) {
-  function onVisibilityChanged() {
-    maybeUpdateEnabledHint(removeVideoTrack);
+function isAttachedToDocumentPip(remoteVideoTrack) {
+  if (!('documentPictureInPicture' in globalThis)) {
+    return false;
   }
 
-  documentVisibilityMonitor.onVisibilityChange(1, onVisibilityChanged);
-  return () => {
-    documentVisibilityMonitor.offVisibilityChange(1, onVisibilityChanged);
-  };
+  const pipWindow = globalThis.documentPictureInPicture.window;
+  if (!pipWindow) {
+    return false;
+  }
+
+  const pipEls = new WeakSet(pipWindow.document.querySelectorAll('video'));
+
+  return remoteVideoTrack._getAllAttachedElements().some(el => pipEls.has(el));
 }
 
 function maybeUpdateEnabledHint(remoteVideoTrack) {
@@ -358,7 +362,9 @@ function maybeUpdateEnabledHint(remoteVideoTrack) {
   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);
+  const enabled = pipWindows.length > 0 ||
+    isAttachedToDocumentPip(remoteVideoTrack) ||
+    (document.visibilityState === 'visible' && visibleElements.length > 0);
 
   if (enabled === true) {
     remoteVideoTrack._turnOffTimer.clear();
@@ -388,6 +394,17 @@ function maybeUpdateDimensionHint(remoteVideoTrack) {
   }
 }
 
+function setupDocumentVisibilityTurnOff(removeVideoTrack) {
+  function onVisibilityChanged() {
+    maybeUpdateEnabledHint(removeVideoTrack);
+  }
+
+  documentVisibilityMonitor.onVisibilityChange(1, onVisibilityChanged);
+  return () => {
+    documentVisibilityMonitor.offVisibilityChange(1, onVisibilityChanged);
+  };
+}
+
 /**
  * @typedef {object} VideoContentPreferences
  * @property {VideoTrack.Dimensions} [renderDimensions] - Render Dimensions to request for the {@link RemoteVideoTrack}.