twilio-video 2.30.0 → 2.31.0

package/.release.json

@@ -18,6 +18,7 @@
         "git rm -rf --ignore-unmatch dist es5",
         "npm run build:quick",
         "git add package.json",
+        "git add package-lock.json",
         "git add -f dist es5",
         "git commit -m \"${RELEASE_VERSION}\"",
         "git tag ${RELEASE_VERSION}",
@@ -32,6 +33,7 @@
         "git rm -rf dist es5",
         "npm run clean",
         "git add package.json",
+        "git add package-lock.json",
         "git commit -m \"${DEVELOPMENT_VERSION}\"",
         "git push origin ${BRANCH}"
       ]

package/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)
 ========================
 

package/README.md

@@ -1,7 +1,7 @@
 twilio-video.js
 ===============
 
-[![NPM](https://img.shields.io/npm/v/twilio-video.svg)](https://www.npmjs.com/package/twilio-video) [![CircleCI](https://circleci.com/gh/twilio/twilio-video.js/tree/master.svg?style=svg&circle-token=80e91c8284c21ff16d3003702e17b903c0b32f1d)](https://circleci.com/gh/twilio/twilio-video.js/tree/master)
+[![NPM](https://img.shields.io/npm/v/twilio-video.svg)](https://www.npmjs.com/package/twilio-video) [![CircleCI](https://dl.circleci.com/status-badge/img/gh/twilio/twilio-video.js/tree/master.svg?style=shield&circle-token=CCIPRJ_7qmZwk292pKYnNqeFyi5x8_a409cfa25489fb617be3c56119e8064cc77ffb80)](https://circleci.com/gh/twilio/twilio-video.js/tree/master)
 
 twilio-video.js allows you to add real-time voice and video to your web apps.
 
@@ -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:

package/dist/twilio-video.js

@@ -1,4 +1,4 @@
-/*! twilio-video.js 2.30.0
+/*! twilio-video.js 2.31.0
 
 The following license applies to all parts of this software except as
 documented below.
@@ -6619,14 +6619,16 @@ var RemoteVideoTrack = /** @class */ (function (_super) {
     };
     return RemoteVideoTrack;
 }(RemoteMediaVideoTrack));
-function setupDocumentVisibilityTurnOff(removeVideoTrack) {
-    function onVisibilityChanged() {
-        maybeUpdateEnabledHint(removeVideoTrack);
+function isAttachedToDocumentPip(remoteVideoTrack) {
+    if (!('documentPictureInPicture' in globalThis)) {
+        return false;
     }
-    documentVisibilityMonitor.onVisibilityChange(1, onVisibilityChanged);
-    return function () {
-        documentVisibilityMonitor.offVisibilityChange(1, onVisibilityChanged);
-    };
+    var pipWindow = globalThis.documentPictureInPicture.window;
+    if (!pipWindow) {
+        return false;
+    }
+    var pipEls = new WeakSet(pipWindow.document.querySelectorAll('video'));
+    return remoteVideoTrack._getAllAttachedElements().some(function (el) { return pipEls.has(el); });
 }
 function maybeUpdateEnabledHint(remoteVideoTrack) {
     if (remoteVideoTrack._clientTrackSwitchOffControl !== 'auto') {
@@ -6635,7 +6637,9 @@ function maybeUpdateEnabledHint(remoteVideoTrack) {
     var visibleElements = remoteVideoTrack._getAllAttachedElements().filter(function (el) { return !remoteVideoTrack._invisibleElements.has(el); });
     var pipWindows = remoteVideoTrack._getAllAttachedElements().filter(function (el) { return remoteVideoTrack._elToPipWindows.has(el); });
     // even when document is invisible we may have track playing in pip window.
-    var enabled = pipWindows.length > 0 || (document.visibilityState === 'visible' && visibleElements.length > 0);
+    var enabled = pipWindows.length > 0 ||
+        isAttachedToDocumentPip(remoteVideoTrack) ||
+        (document.visibilityState === 'visible' && visibleElements.length > 0);
     if (enabled === true) {
         remoteVideoTrack._turnOffTimer.clear();
         remoteVideoTrack._setRenderHint({ enabled: true });
@@ -6663,6 +6667,15 @@ function maybeUpdateDimensionHint(remoteVideoTrack) {
         remoteVideoTrack._setRenderHint({ renderDimensions: renderDimensions });
     }
 }
+function setupDocumentVisibilityTurnOff(removeVideoTrack) {
+    function onVisibilityChanged() {
+        maybeUpdateEnabledHint(removeVideoTrack);
+    }
+    documentVisibilityMonitor.onVisibilityChange(1, onVisibilityChanged);
+    return function () {
+        documentVisibilityMonitor.offVisibilityChange(1, onVisibilityChanged);
+    };
+}
 /**
  * @typedef {object} VideoContentPreferences
  * @property {VideoTrack.Dimensions} [renderDimensions] - Render Dimensions to request for the {@link RemoteVideoTrack}.
@@ -30838,7 +30851,7 @@ module.exports={
   "name": "twilio-video",
   "title": "Twilio Video",
   "description": "Twilio Video JavaScript Library",
-  "version": "2.30.0",
+  "version": "2.31.0",
   "homepage": "https://twilio.com",
   "author": "Mark Andrus Roberts <mroberts@twilio.com>",
   "contributors": [