@growth-labs/video 0.3.12 → 0.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@growth-labs/video",
-	"version": "0.3.12",
+	"version": "0.3.14",
 	"type": "module",
 	"exports": {
 		".": {

package/src/components/Video.astro

@@ -77,6 +77,7 @@ const playerBoolAttrs = buildPlayerBooleanAttrs({
 	preload={config.player.preload}
 	crossorigin="anonymous"
 	playsinline
+	autopictureinpicture
 	class={`gl-video ${className ?? ''}`.trim()}
 	{...playerBoolAttrs}
 >
@@ -176,6 +177,35 @@ const playerBoolAttrs = buildPlayerBooleanAttrs({
 			}
 		})
 	})
+
+	// `autopictureinpicture` is an HTML attribute on the native <video>
+	// element (Apple/WICG; iOS Safari 13.4+). When set on a playing video,
+	// iOS auto-enters native PiP whenever the page is hidden — lock screen,
+	// tab switch, app switch — so audio + video continue from the system
+	// PiP overlay instead of pausing.
+	//
+	// Vidstack's <media-player> wrapper does not know about this attribute;
+	// `vidstack-html.js`'s only setAttribute-on-media call is for
+	// `playsinline`. The attribute on the wrapper therefore never reaches
+	// the inner <video> that iOS actually inspects, and the feature stays
+	// inert. We close the gap by propagating the attribute ourselves: when
+	// Vidstack mounts the inner <video> (asynchronously, after provider
+	// attach), copy `autopictureinpicture` to it.
+	for (const player of document.querySelectorAll<HTMLElement>('media-player[autopictureinpicture]')) {
+		const propagate = () => {
+			const v = player.querySelector('video')
+			if (v && !v.hasAttribute('autopictureinpicture')) {
+				v.setAttribute('autopictureinpicture', '')
+				return true
+			}
+			return false
+		}
+		if (propagate()) continue
+		const obs = new MutationObserver(() => {
+			if (propagate()) obs.disconnect()
+		})
+		obs.observe(player, { childList: true, subtree: true })
+	}
 </script>
 
 <style>