@vindral/web-sdk 4.5.1-26-gf419005e4 → 4.5.1-28-g9cc413f1

package/{rbEA9dxP.js → Cf_UT7pO.js}

@@ -1,5 +1,5 @@
 import { n as e, t } from "./BsfwXDui.js";
-import { _ as n, a as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as ee, n as d, o as te, p as ne, r as re, s as ie, t as ae, u as oe, v as se } from "./BR0DDziv.js";
+import { _ as n, a as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as ee, n as d, o as te, p as ne, r as re, s as ie, t as ae, u as oe, v as se } from "./viWJT_nb.js";
 import { F as ce } from "./BBVSf5AB.js";
 import { i as f, n as p, r as m, t as h } from "./DSw1XhvD.js";
 import { c as le, n as ue, t as de } from "./BOdyvABa.js";

package/cast-sender.d.ts

@@ -332,6 +332,9 @@ interface Options {
 	 * This enables platform media features such as fullscreen and picture-in-picture
 	 * for non-MSE playback by routing the canvas output through a `<video>` element.
 	 *
+	 * On iOS the audio then plays from its own element, so it continues in the background and under
+	 * lock. After an extended pause from the lock screen, reopening Safari may be required to resume.
+	 *
 	 * Disabled by default.
 	 */
 	streamToMediaElementEnabled?: boolean;

package/core.d.ts

@@ -428,6 +428,9 @@ export interface Options {
 	 * This enables platform media features such as fullscreen and picture-in-picture
 	 * for non-MSE playback by routing the canvas output through a `<video>` element.
 	 *
+	 * On iOS the audio then plays from its own element, so it continues in the background and under
+	 * lock. After an extended pause from the lock screen, reopening Safari may be required to resume.
+	 *
 	 * Disabled by default.
 	 */
 	streamToMediaElementEnabled?: boolean;
@@ -1654,6 +1657,7 @@ export declare class Vindral extends Emitter<PublicVindralEvents> {
 	 * the page is visible, so a hidden pause is a stop there. Reads the decoder in use.
 	 */
 	private hiddenPauseIsStop;
+	private usesSplitCanvasAudio;
 	private isWebKitCanvasPath;
 	private holdsDecoyWhilePaused;
 	private streamsToMediaElement;

package/core.js

@@ -1,3 +1,3 @@
-import { t as e } from "./BR0DDziv.js";
+import { t as e } from "./viWJT_nb.js";
 import { a as t, c as n, d as r, f as i, i as a, l as o, n as s, o as c, r as l, s as u } from "./BBVSf5AB.js";
 export { s as AUTHENTICATION_EXPIRED_CODE, l as AUTHENTICATION_FAILED_CODE, a as CHANNEL_NOT_FOUND_CODE, t as CHANNEL_NOT_LIVE_CODE, c as CONNECTION_FAILED_AFTER_RETRIES_CODE, u as CONNECTION_FAILED_CODE, n as DISCONNECTED_BY_EDGE, o as INACTIVITY_CODE, r as NO_INCOMING_DATA, e as Vindral, i as VindralError };

package/legacy.d.ts

@@ -431,6 +431,9 @@ export interface Options {
 	 * This enables platform media features such as fullscreen and picture-in-picture
 	 * for non-MSE playback by routing the canvas output through a `<video>` element.
 	 *
+	 * On iOS the audio then plays from its own element, so it continues in the background and under
+	 * lock. After an extended pause from the lock screen, reopening Safari may be required to resume.
+	 *
 	 * Disabled by default.
 	 */
 	streamToMediaElementEnabled?: boolean;
@@ -1669,6 +1672,7 @@ export declare class Vindral extends Emitter<PublicVindralEvents> {
 	 * the page is visible, so a hidden pause is a stop there. Reads the decoder in use.
 	 */
 	private hiddenPauseIsStop;
+	private usesSplitCanvasAudio;
 	private isWebKitCanvasPath;
 	private holdsDecoyWhilePaused;
 	private streamsToMediaElement;

package/legacy.es.js

@@ -4522,7 +4522,7 @@ var Pl = class e extends Kt {
 			this.element.muted = this._userProvidedMuted, this._play().catch(S);
 		}), p(this, "play", () => {
 			this.element.muted = this._userProvidedMuted, this._play().catch((e) => {
-				if (e instanceof Error) {
+				if (e instanceof Error && e.name !== "AbortError") {
 					let t = new U("Media Play Error", {
 						source: e,
 						isFatal: !1,
@@ -10459,10 +10459,10 @@ var ex = 5, tx = 40, nx = 1, rx = 5, ix = (e) => {
 m();
 var ux, dx = class {
 	constructor(e) {
-		p(this, "emitter", void 0), p(this, "isVisibleCount", 0), p(this, "isHiddenCount", 0), p(this, "isOnlineCount", 0), p(this, "isOfflineCount", 0), p(this, "isActive", document.visibilityState === "visible"), p(this, "unload", () => {
-			document.removeEventListener("visibilitychange", this.onVisibilityChanged), window.removeEventListener("pageshow", this.onPageShow), window.removeEventListener("pagehide", this.onPageHide), window.removeEventListener("online", this.onOnline), window.removeEventListener("offline", this.onOffline);
+		p(this, "emitter", void 0), p(this, "isVisibleCount", 0), p(this, "isHiddenCount", 0), p(this, "isOnlineCount", 0), p(this, "isOfflineCount", 0), p(this, "isActive", document.visibilityState === "visible"), p(this, "isBehindAnotherApp", !1), p(this, "unload", () => {
+			this.emitter.off("fullscreen app switch", this.onFullscreenAppSwitch), window.removeEventListener("focus", this.onVisibilityChanged), document.removeEventListener("visibilitychange", this.onVisibilityChanged), window.removeEventListener("pageshow", this.onPageShow), window.removeEventListener("pagehide", this.onPageHide), window.removeEventListener("online", this.onOnline), window.removeEventListener("offline", this.onOffline);
 		}), p(this, "load", () => {
-			document.addEventListener("visibilitychange", this.onVisibilityChanged), window.addEventListener("pageshow", this.onPageShow), window.addEventListener("pagehide", this.onPageHide), window.addEventListener("online", this.onOnline), window.addEventListener("offline", this.onOffline);
+			this.emitter.on("fullscreen app switch", this.onFullscreenAppSwitch), window.addEventListener("focus", this.onVisibilityChanged), document.addEventListener("visibilitychange", this.onVisibilityChanged), window.addEventListener("pageshow", this.onPageShow), window.addEventListener("pagehide", this.onPageHide), window.addEventListener("online", this.onOnline), window.addEventListener("offline", this.onOffline);
 		}), p(this, "unsuspend", () => {}), p(this, "getStatistics", () => {
 			var e, t, n, r, i;
 			return {
@@ -10479,9 +10479,11 @@ var ux, dx = class {
 				navigatorDownlink: (i = navigator.connection) == null ? void 0 : i.downlink
 			};
 		}), p(this, "onOnline", () => this.isOnlineCount++), p(this, "onOffline", () => this.isOfflineCount++), p(this, "onPageShow", (e) => {
-			this.emitter.emit("pageshow", e), this.setIsActive(document.visibilityState === "visible");
+			this.emitter.emit("pageshow", e), this.onVisibilityChanged();
 		}), p(this, "onPageHide", (e) => this.emitter.emit("pagehide", e)), p(this, "onVisibilityChanged", () => {
-			this.setIsActive(document.visibilityState === "visible");
+			this.isBehindAnotherApp = !1, this.setIsActive(this.isVisible);
+		}), p(this, "onFullscreenAppSwitch", () => {
+			this.isBehindAnotherApp = !0, this.setIsActive(!1);
 		}), p(this, "setIsActive", (e) => {
 			e !== this.isActive && (this.emitter.emit("page active", e), e ? this.isVisibleCount++ : this.isHiddenCount++), this.isActive = e;
 		}), this.emitter = e;
@@ -10490,7 +10492,7 @@ var ux, dx = class {
 		return navigator.onLine;
 	}
 	get isVisible() {
-		return document.visibilityState === "visible";
+		return document.visibilityState === "visible" && !this.isBehindAnotherApp;
 	}
 };
 ux = dx, p(dx, "create", (e) => new ux(e)), H(), m(), B();
@@ -10739,11 +10741,13 @@ var Sx, Cx = 150, wx = 400, Tx = (e) => e === void 0 ? 5 : e <= Cx ? 1 : e <= wx
 		})), p(this, "suspend", () => {
 			this.setGain(0);
 		}), p(this, "unsuspend", () => {
-			var e;
 			if (this.setGain(this._volume), !Qe()) {
 				this.resume().catch(this.onUnsuspendFailure);
 				return;
 			}
+			this.restartContext();
+		}), p(this, "restartContext", () => {
+			var e;
 			this.ignoreSuspendCalls = !!this.audio, (e = this.audio) == null || e.suspend().then(N(function* () {
 				yield a.resume(), a.ignoreSuspendCalls = !1;
 			})).catch(this.onUnsuspendFailure);
@@ -10823,7 +10827,11 @@ var Sx, Cx = 150, wx = 400, Tx = (e) => e === void 0 ? 5 : e <= Cx ? 1 : e <= wx
 			return (e = this.audio) == null || e.unload(), this.audio = new xx(), this.audio.on("state", (e) => {
 				this.logger.info("AudioContext state change", { state: e }), e === "running" && (this._muted = this._userProvidedMuted, this.setGain(this._volume)), !this.ignoreSuspendCalls && this.emit("state change", e);
 			}), this.audio.on("stuck", () => {
-				this.reInitWhenStuck && (this.logger.info("Re-init audio context"), this.setupContext(), this.resume().catch(S), this.emit("stuck"));
+				if (!this.reInitWhenStuck) {
+					this.restartContext();
+					return;
+				}
+				this.logger.info("Re-init audio context"), this.setupContext(), this.resume().catch(S), this.emit("stuck");
 			}), (t = this.gainNode) == null || t.disconnect(), this.gainNode = this.audio.createGain(), this.setGain(this._volume), this.startTime = this.audio.currentTime, (n = this.splitter) == null || n.disconnect(), this.splitter = this.audio.createSplitter(), this.audio;
 		}), p(this, "setGain", (e) => {
 			this.gainNode && (this.gainNode.gain.value = this._muted ? 0 : e);
@@ -11233,30 +11241,49 @@ var Fx, Ix = [
 };
 Fx = zx, p(zx, "create", (e, t, n) => new Fx(e, t, n)), p(zx, "isSupported", () => typeof navigator < "u" && "mediaSession" in navigator && typeof MediaMetadata < "u"), Bi(), H(), m(), B();
 var Bx, Vx = class {
-	constructor(e, t, n, r, { muted: i, volume: a, type: o, poster: s, offscreenCanvas: c, bufferTime: l, backgroundPlaybackEnabled: u }) {
-		p(this, "logger", void 0), p(this, "emitter", void 0), p(this, "mediaElement", void 0), p(this, "audioPlayer", void 0), p(this, "videoPlayer", void 0), p(this, "pool", void 0), p(this, "isDisconnected", !0), p(this, "_userProvidedMuted", !1), p(this, "timers", new Zn()), p(this, "offscreenCanvas", void 0), p(this, "videoTrack", void 0), p(this, "canvasCaptureTracks", []), p(this, "backgroundPlaybackEnabled", void 0), p(this, "nativeTracksByLanguage", /* @__PURE__ */ new Map()), p(this, "nativeCuesByLanguage", /* @__PURE__ */ new Map()), p(this, "lastCanvasCueTexts", []), p(this, "isIOSNativeFullscreen", !1), p(this, "isSyncingNativeTextTracks", !1), p(this, "renderCanvasSubtitlesInNativeFullscreen", (() => {
+	constructor(e, t, n, r, { muted: i, volume: a, type: o, poster: s, offscreenCanvas: c, bufferTime: l, backgroundPlaybackEnabled: u, splitAudio: d }) {
+		if (p(this, "logger", void 0), p(this, "emitter", void 0), p(this, "mediaElement", void 0), p(this, "sound", void 0), p(this, "wantsPlay", void 0), p(this, "audioPlayer", void 0), p(this, "videoPlayer", void 0), p(this, "pool", void 0), p(this, "isDisconnected", !0), p(this, "_userProvidedMuted", !1), p(this, "timers", new Zn()), p(this, "offscreenCanvas", void 0), p(this, "videoTrack", void 0), p(this, "canvasCaptureTracks", []), p(this, "backgroundPlaybackEnabled", void 0), p(this, "nativeTracksByLanguage", /* @__PURE__ */ new Map()), p(this, "nativeCuesByLanguage", /* @__PURE__ */ new Map()), p(this, "lastCanvasCueTexts", []), p(this, "isIOSNativeFullscreen", !1), p(this, "isSyncingNativeTextTracks", !1), p(this, "renderCanvasSubtitlesInNativeFullscreen", (() => {
 			let e = at().platform;
 			return e.isIOS && e.iosVersion <= 16;
 		})()), p(this, "volumeState", void 0), p(this, "textTracks", new Ax()), p(this, "reset", () => {}), p(this, "load", () => {
-			this.mediaElement.load(), this.emitter.on("decoded frame", this.onDecodedFrame), this.emitter.on("flush buffers", this.flushBuffers), this.emitter.on("ios-hack: reset size", this.resetCanvasSize), this.emitter.on("enter picture in picture", this.onEnterIOSHack), this.emitter.on("exit picture in picture", this.onExitIOSHack), this.element().element.textTracks.addEventListener("change", this.onNativeTextTrackChange), this.element().element.addEventListener("webkitendfullscreen", this.onExitIOSHack), this.element().element.addEventListener("webkitbeginfullscreen", this.onEnterIOSHack), this.videoPlayer.load(), this.timers.setInterval(this.syncNativeTextTracks, 100);
+			this.mediaElement.load(), this.sound && (this.sound.load(), document.body.appendChild(this.sound.element), this.mediaElement.element.addEventListener("pause", this.onVideoPause), this.mediaElement.element.addEventListener("play", this.onVideoPlay), window.addEventListener("focus", this.onWindowFocus)), this.emitter.on("decoded frame", this.onDecodedFrame), this.emitter.on("flush buffers", this.flushBuffers), this.emitter.on("ios-hack: reset size", this.resetCanvasSize), this.emitter.on("enter picture in picture", this.onEnterIOSHack), this.emitter.on("exit picture in picture", this.onExitIOSHack), this.element().element.textTracks.addEventListener("change", this.onNativeTextTrackChange), this.element().element.addEventListener("webkitendfullscreen", this.onExitIOSHack), this.element().element.addEventListener("webkitbeginfullscreen", this.onEnterIOSHack), this.videoPlayer.load(), this.timers.setInterval(this.syncNativeTextTracks, 100);
 		}), p(this, "unload", () => {
 			this.emitter.off("target buffer time", this.onTargetBufferTime), this.emitter.off("decoded frame", this.onDecodedFrame), this.emitter.off("flush buffers", this.flushBuffers), this.emitter.off("ios-hack: reset size", this.resetCanvasSize), this.emitter.off("enter picture in picture", this.onEnterIOSHack), this.emitter.off("exit picture in picture", this.onExitIOSHack), this.element().element.textTracks.removeEventListener("change", this.onNativeTextTrackChange), this.element().element.removeEventListener("webkitendfullscreen", this.onExitIOSHack), this.element().element.removeEventListener("webkitbeginfullscreen", this.onEnterIOSHack);
 			for (let e of this.nativeTracksByLanguage.keys()) this.clearNativeCues(e);
-			this.nativeTracksByLanguage.clear(), this.nativeCuesByLanguage.clear(), this.mediaElement.unload(), this.timers.unload(), this.audioPlayer.unload(), this.videoPlayer.unload();
+			this.nativeTracksByLanguage.clear(), this.nativeCuesByLanguage.clear(), this.sound && (this.mediaElement.element.removeEventListener("pause", this.onVideoPause), this.mediaElement.element.removeEventListener("play", this.onVideoPlay), window.removeEventListener("focus", this.onWindowFocus), this.sound.pause(), this.sound.element.srcObject = null, this.sound.unload(), this.sound.element.remove()), this.mediaElement.unload(), this.timers.unload(), this.audioPlayer.unload(), this.videoPlayer.unload();
 		}), p(this, "suspend", () => {
 			this.videoPlayer.suspend(), this.audioPlayer.suspend();
 		}), p(this, "unsuspend", () => {
 			this.videoPlayer.unsuspend(), this.audioPlayer.unsuspend();
-		}), p(this, "element", () => this.mediaElement), p(this, "getStatistics", () => z(z({}, this.videoPlayer.getStatistics()), {}, { audioContextState: this.audioPlayer.contextState })), p(this, "activateAudioPlayer", () => (this.isDisconnected && this.connectStreams(), this.audioPlayer.play())), p(this, "flushBuffers", () => {
+		}), p(this, "element", () => this.mediaElement), p(this, "elements", () => this.sound ? [this.mediaElement, this.sound] : [this.mediaElement]), p(this, "getStatistics", () => z(z({}, this.videoPlayer.getStatistics()), {}, { audioContextState: this.audioPlayer.contextState })), p(this, "activateAudioPlayer", () => (this.isDisconnected && this.connectStreams(), this.audioPlayer.play())), p(this, "flushBuffers", () => {
 			this.audioPlayer.flushBuffer();
 		}), p(this, "onTargetBufferTime", (e) => {
 			this.audioPlayer.bufferTime = e;
 		}), p(this, "resetCanvasSize", () => {
 			this.videoPlayer.resetSize();
+		}), p(this, "onVideoPause", () => {
+			this.mediaElement.element.paused && (this.emitPlaybackState(), this.wantsPlay && this.timers.setTimeout(this.isIOSNativeFullscreen ? this.reportFullscreenPause : this.restartVideoIfWanted, 400));
+		}), p(this, "onVideoPlay", () => {
+			if (!this.mediaElement.element.paused) {
+				if (!this.wantsPlay) {
+					this.isIOSNativeFullscreen ? this.emitter.emit("native control", "play") : this.mediaElement.pause();
+					return;
+				}
+				this.emitPlaybackState();
+			}
 		}), p(this, "onEnterIOSHack", () => {
 			this.isIOSNativeFullscreen = !0, this.mediaElement._iosHackEnterPiPMode();
 		}), p(this, "onExitIOSHack", () => {
-			this.isIOSNativeFullscreen = !1, this.clearCanvasCues(), this.mediaElement._iosHackExitPiPMode();
+			this.isIOSNativeFullscreen = !1, this.clearCanvasCues(), this.mediaElement._iosHackExitPiPMode(), this.sound && this.restartVideoIfWanted();
+		}), p(this, "reportFullscreenPause", () => {
+			!this.isIOSNativeFullscreen || !this.wantsPlay || !this.mediaElement.element.paused || (St(this.mediaElement.element) === "picture-in-picture" || document.hasFocus() ? this.emitter.emit("native control", "pause") : this.emitter.emit("fullscreen app switch"));
+		}), p(this, "onWindowFocus", () => {
+			this.isIOSNativeFullscreen && this.wantsPlay && this.mediaElement.element.paused && this.mediaElement.tryPlay();
+		}), p(this, "lastPlaybackState", void 0), p(this, "emitPlaybackState", () => {
+			let e = this.isPaused ? "paused" : "playing";
+			e !== this.lastPlaybackState && (this.lastPlaybackState = e, this.emitter.emit("media element state", e));
+		}), p(this, "restartVideoIfWanted", () => {
+			this.wantsPlay && this.mediaElement.element.paused && !this.isIOSNativeFullscreen && document.visibilityState === "visible" && this.mediaElement.tryPlay();
 		}), p(this, "onDecodedFrame", (e) => {
 			try {
 				this.audioPlayer.onDecodedFrame(e);
@@ -11275,10 +11302,10 @@ var Bx, Vx = class {
 			this.logger.info(`Connecting streams using ${this.offscreenCanvas ? "OffscreenCanvas" : "VideoPlayer"} canvas (${e.width}x${e.height})`);
 			let t = this.videoTrack ? [this.videoTrack] : e.captureStream().getTracks(), n = this.canvasCaptureTracks;
 			this.canvasCaptureTracks = this.videoTrack ? [] : t;
-			let r = this.audioPlayer.useMediaStreamDestination().stream, i = [...t, ...r.getTracks()];
+			let r = this.audioPlayer.useMediaStreamDestination().stream, i = this.sound ? t : [...t, ...r.getTracks()];
 			this.logger.info(`Video tracks: ${t.length} (${this.videoTrack ? "worker track" : "canvas capture"}), Audio tracks: ${r.getTracks().length}`);
 			for (let e of n) e.stop();
-			this.mediaElement.element.srcObject = new MediaStream(i), this.isDisconnected = !1;
+			this.mediaElement.element.srcObject = new MediaStream(i), this.sound && this.sound.element.srcObject !== r && (this.sound.element.srcObject = r), this.isDisconnected = !1;
 		}), p(this, "setVideoTrack", (e) => {
 			this.videoTrack !== e && (this.videoTrack = e, this.reconnectCanvasStream());
 		}), p(this, "setOffscreenCanvas", (e) => {
@@ -11354,43 +11381,48 @@ var Bx, Vx = class {
 		}), p(this, "applyVisibilityMutePolicy", () => {
 			if (!this.audioPlayer.isContextRunning) return;
 			let e = document.visibilityState === "hidden";
-			this.mediaElement.muted = this._userProvidedMuted || e && !this.backgroundPlaybackEnabled;
+			this.soundElement.muted = this._userProvidedMuted || e && !this.backgroundPlaybackEnabled;
 		}), this.logger = t, this.emitter = e, this.pool = n, this._userProvidedMuted = i, this.offscreenCanvas = c, this.backgroundPlaybackEnabled = u == null ? !1 : u, this.emitter.on("target buffer time", this.onTargetBufferTime), this.mediaElement = new Pl({
 			poster: s,
 			type: o,
-			muted: i,
+			muted: d ? !0 : i,
 			volume: a,
 			autoplay: !1,
 			logger: this.logger.createContext("MediaElement")
-		}), this.mediaElement.on("volume state", (e) => {
+		}), d && (this.sound = new Pl({
+			type: "audio",
+			muted: i,
+			volume: a,
+			autoplay: !1,
+			logger: this.logger.createContext("SoundElement")
+		}), this.sound.element.style.display = "none", this.sound.element.setAttribute("aria-hidden", "true")), this.soundElement.on("volume state", (e) => {
 			this.updateVolumeState(), !e.isMuted && !this.audioPlayer.isContextRunning && this.activateAudioPlayer().catch(S), e.isMuted || (this._userProvidedMuted = !1);
-		}), this.mediaElement.on("media element state", (e) => {
-			e === "paused" && this.audioPlayer.flushBuffer(), this.audioPlayer.sinkPaused = e === "paused", this.emitter.emit("media element state", e);
-		}), this.audioPlayer = Ex.create(this.logger.createContext("AudioPlayerModule"), r, {
+		}), this.soundElement.on("media element state", (e) => {
+			e === "paused" && this.audioPlayer.flushBuffer(), this.audioPlayer.sinkPaused = e === "paused", this.emitPlaybackState();
+		}), this.sound) for (let e of this.elements()) e.on("needs user input", (e) => this.emitter.emit("needs user input", e)), e.on("error", (e) => this.emitter.emit("error", e));
+		this.audioPlayer = Ex.create(this.logger.createContext("AudioPlayerModule"), r, {
 			muted: !1,
 			reInitWhenStuck: !1,
 			bufferTime: l
-		}), this.audioPlayer.on("stuck", () => {
-			this.isDisconnected = !0;
 		}), this.audioPlayer.on("state change", (e) => {
-			e === "suspended" || e === "interrupted" ? this.mediaElement.muted = !0 : e === "running" && this.applyVisibilityMutePolicy(), this.updateVolumeState();
+			e === "suspended" || e === "interrupted" ? this.soundElement.muted = !0 : e === "running" && this.applyVisibilityMutePolicy(), this.updateVolumeState();
 		}), this.videoPlayer = Ox.create(this.logger.createContext("VideoPlayerModule"), this.audioPlayer, this.pool, this.mediaElement.element, () => this.reconnectCanvasStream(), this.onVideoPlayerError);
 	}
 	get volume() {
-		return this.mediaElement.volume;
+		return this.soundElement.volume;
 	}
 	set volume(e) {
-		this.mediaElement.volume = e;
+		this.soundElement.volume = e;
 	}
 	get muted() {
-		return this.mediaElement.muted || this.audioPlayer.muted;
+		return this.soundElement.muted || this.audioPlayer.muted;
 	}
 	get userMuted() {
-		return this.audioPlayer.isContextRunning ? this.mediaElement.muted : this._userProvidedMuted;
+		return this.audioPlayer.isContextRunning ? this.soundElement.muted : this._userProvidedMuted;
 	}
 	set muted(e) {
 		let t = this.muted;
-		this._userProvidedMuted = e, this.mediaElement.muted = e, !e && t && this.activateAudioPlayer().catch(S);
+		this._userProvidedMuted = e, this.soundElement.muted = e, !e && t && this.activateAudioPlayer().catch(S);
 	}
 	get currentTime() {
 		return this.audioPlayer.currentTime;
@@ -11411,7 +11443,11 @@ var Bx, Vx = class {
 		return this.mediaElement.totalSeekTime;
 	}
 	get isPaused() {
-		return this.mediaElement.isPaused;
+		return this.sound ? this.wantsPlay === !1 || this.sound.isPaused && this.mediaElement.element.paused : this.mediaElement.isPaused;
+	}
+	get isPlayingAsRequested() {
+		let e = this.soundElement.element;
+		return !this.wantsPlay || !e.paused && e.muted === this._userProvidedMuted;
 	}
 	get isSeeking() {
 		return this.mediaElement.isSeeking;
@@ -11420,16 +11456,23 @@ var Bx, Vx = class {
 		return this.audioPlayer.audioNode;
 	}
 	play() {
-		let e = this._userProvidedMuted;
+		var e;
+		this.wantsPlay = !0;
+		let t = this._userProvidedMuted;
 		return this.activateAudioPlayer().catch(() => {
-			e || this.emitter.emit("needs user input", {
+			t || this.emitter.emit("needs user input", {
 				forAudio: !0,
 				forVideo: !1
 			});
-		}), this.mediaElement.play();
+		}), (e = this.sound) == null || e.play(), this.mediaElement.play();
 	}
 	pause() {
-		this.mediaElement.pause();
+		var e;
+		this.wantsPlay = !1, (e = this.sound) == null || e.pause(), this.mediaElement.pause();
+	}
+	get soundElement() {
+		var e;
+		return (e = this.sound) == null ? this.mediaElement : e;
 	}
 	get canvasCuesEnabled() {
 		return this.renderCanvasSubtitlesInNativeFullscreen && !this.offscreenCanvas;
@@ -12802,11 +12845,11 @@ var CS, wS = {
 CS = ES, p(ES, "create", (e, t, n, r) => new CS(e, t, n, r)), H(), m();
 var DS, OS = class {
 	constructor(e, t, n) {
-		p(this, "logger", void 0), p(this, "element", void 0), p(this, "documentState", void 0), p(this, "timers", new Zn()), p(this, "unload", () => {
+		p(this, "logger", void 0), p(this, "elements", void 0), p(this, "documentState", void 0), p(this, "timers", new Zn()), p(this, "unload", () => {
 			this.timers.unload();
 		}), p(this, "unpause", () => {
-			this.element.userHasProvidedInput && this.element.isPaused && this.documentState.isVisible && this.documentState.isOnline && (this.logger.debug("Unpause video"), this.element.tryPlay());
-		}), this.logger = e, this.element = t, this.documentState = n, this.timers.setInterval(this.unpause, 100);
+			if (!(!this.documentState.isVisible || !this.documentState.isOnline)) for (let e of this.elements) e.userHasProvidedInput && e.isPaused && (this.logger.debug("Unpause media element"), e.tryPlay());
+		}), this.logger = e, this.elements = t, this.documentState = n, this.timers.setInterval(this.unpause, 100);
 	}
 };
 //#endregion
@@ -13397,7 +13440,7 @@ var YS = 1e4, XS = 1280 * 720, ZS = /* @__PURE__ */ new WeakMap(), QS = /* @__PU
 			let e = this.modules.canvasModule instanceof Vx ? !0 : void 0;
 			return z({
 				uptime: this.uptime,
-				version: "4.5.1-26-gf419005e4",
+				version: "4.5.1-28-g9cc413f1",
 				clientId: this.clientId,
 				sessionId: this.sessionId,
 				channelId: this.channelId,
@@ -13464,7 +13507,7 @@ var YS = 1e4, XS = 1280 * 720, ZS = /* @__PURE__ */ new WeakMap(), QS = /* @__PU
 		l && this.logger.warn("Option mseEnabled is deprecated and will be removed in a future release. Use decoders instead (e.g. decoders: [\"wasm\"])."), l && !u && t.mseEnabled === !1 && this.options.set("decoders", ["wasm"]);
 		let d = eS.create(this.emitter, this.logger.createContext("PictureInPictureModule")), f = this.options.get("mediaSessionEnabled") ? zx.create(this.emitter, this.logger.createContext("MediaSessionModule"), {
 			metadata: this.options.get("mediaSessionMetadata"),
-			decoy: this.willUseMediaSource() ? void 0 : Zl.create(this.logger.createContext("AudioFocusDecoy"), this.yieldToInterruption),
+			decoy: this.willUseMediaSource() || this.usesSplitCanvasAudio() ? void 0 : Zl.create(this.logger.createContext("AudioFocusDecoy"), this.yieldToInterruption),
 			isMuted: () => this.playbackSource.userMuted,
 			isHidden: () => !this.modules.documentState.isVisible,
 			isSinkPaused: () => this.isMediaElementPaused,
@@ -13496,7 +13539,7 @@ var YS = 1e4, XS = 1280 * 720, ZS = /* @__PURE__ */ new WeakMap(), QS = /* @__PU
 				logger: this.logger.createContext("MediaElement"),
 				poster: x
 			});
-			e.on("buffer state", (e) => this.onMediaElementBufferState(e, te)), e.on("needs user input", (e) => this.emitter.emit("needs user input", e)), e.on("volume state", (e) => this.emitter.emit("volume state", e)), e.on("media element state", (e) => this.onMediaElementState(e)), this.element = e.element, this.playbackSource = e, Va.isSupported() && this.encryptedMediaExtensions.attach(e.element), te = Kx.create(this.logger.createContext("MseModule"), this.emitter, this.element), this.options.get("pauseSupportEnabled") || (ne = OS.create(this.logger.createContext("UnpauseModule"), e, b)), this.options.get("pictureInPictureEnabled") && this.emitter.emit("add picture in picture listener", { element: e.element });
+			e.on("buffer state", (e) => this.onMediaElementBufferState(e, te)), e.on("needs user input", (e) => this.emitter.emit("needs user input", e)), e.on("volume state", (e) => this.emitter.emit("volume state", e)), e.on("media element state", (e) => this.onMediaElementState(e)), this.element = e.element, this.playbackSource = e, Va.isSupported() && this.encryptedMediaExtensions.attach(e.element), te = Kx.create(this.logger.createContext("MseModule"), this.emitter, this.element), this.options.get("pauseSupportEnabled") || (ne = OS.create(this.logger.createContext("UnpauseModule"), [e], b)), this.options.get("pictureInPictureEnabled") && this.emitter.emit("add picture in picture listener", { element: e.element });
 		} else if (this.streamsToMediaElement()) {
 			let e = Vx.create(this.emitter, this.logger.createContext("ModernCanvasModule"), this.pool, this, {
 				type: this.options.get("media") === "audio" ? "audio" : "video",
@@ -13505,11 +13548,12 @@ var YS = 1e4, XS = 1280 * 720, ZS = /* @__PURE__ */ new WeakMap(), QS = /* @__PU
 				poster: x,
 				offscreenCanvas: this.offscreenCanvasElement,
 				bufferTime: this.options.get("minBufferTime"),
-				backgroundPlaybackEnabled: this.isBackgroundPlayEnabled(this.channelId)
-			}), t = e.element();
-			this.element = t.element, this.playbackSource = e, ie = e;
-			let n = this.browser.platform.isIOS && this.browser.platform.iosVersion <= 15;
-			this.options.get("pictureInPictureEnabled") && !n && this.emitter.emit("add picture in picture listener", { element: this.element }), this.options.get("pauseSupportEnabled") || (ne = OS.create(this.logger.createContext("UnpauseModule"), t, b));
+				backgroundPlaybackEnabled: this.isBackgroundPlayEnabled(this.channelId),
+				splitAudio: this.usesSplitCanvasAudio()
+			});
+			this.element = e.element().element, this.playbackSource = e, ie = e;
+			let t = this.browser.platform.isIOS && this.browser.platform.iosVersion <= 15;
+			this.options.get("pictureInPictureEnabled") && !t && this.emitter.emit("add picture in picture listener", { element: this.element }), this.options.get("pauseSupportEnabled") || (ne = OS.create(this.logger.createContext("UnpauseModule"), e.elements(), b));
 		} else {
 			let e;
 			e = Px.create(this.emitter, this.logger.createContext("LegacyCanvasModule"), this.pool, this, this.options.get("muted") || this.options.get("media") === "video", this.options.get("volume"), () => {
@@ -13565,9 +13609,11 @@ var YS = 1e4, XS = 1280 * 720, ZS = /* @__PURE__ */ new WeakMap(), QS = /* @__PU
 		}), this.emitter.on("exit picture in picture", () => {
 			var e;
 			return (e = this.modules.decoder) == null ? void 0 : e.setVideoRenderingEnabled(this.modules.documentState.isVisible);
-		}), this.emitter.on("media session: request play", () => this.fromNativeControls("play")), this.emitter.on("media session: request pause", () => this.fromNativeControls("pause")), this.emitter.on("media session: request stop", () => this.fromNativeControls("pause")), this.emitter.on("page active", (e) => {
+		}), this.emitter.on("media session: request play", () => this.fromNativeControls("play")), this.emitter.on("media session: request pause", () => this.fromNativeControls("pause")), this.emitter.on("media session: request stop", () => this.fromNativeControls("pause")), this.emitter.on("native control", (e) => {
+			this.options.get("pauseSupportEnabled") && this.fromNativeControls(e);
+		}), this.emitter.on("page active", (e) => {
 			var t, n;
-			if ((t = this.modules.decoder) == null || t.setVideoRenderingEnabled(this.isVideoOnScreen(e)), e) this.clearInactivityDisconnect(), this.isUserPaused || (this.logger.debug("Unsuspending"), this.unsuspend());
+			if ((t = this.modules.decoder) == null || t.setVideoRenderingEnabled(this.isVideoOnScreen(e)), e) this.clearInactivityDisconnect(), this.isUserPaused || (this.logger.debug("Unsuspending"), this.unsuspend(), this.usesSplitCanvasAudio() && this.playbackSource.isPlayingAsRequested === !1 && (this.logger.debug("Playing again after show"), this.play()));
 			else if (this.clearVisiblePauseDisconnect(), this.logger.debug("Suspending"), this.suspend(), this.shouldAllowBackgroundPlayback(this.channelId)) {
 				var r, i, a;
 				(r = this.modules.decoder) == null || r.enableBackgroundTimers(), this.modules.connection.unsuspend(), this.modules.sync.unsuspend(), (i = this.modules.decoder) == null || i.unsuspend(), (a = this.modules.canvasModule) == null || a.unsuspend(), this.scheduleInactivityDisconnect();
@@ -14120,6 +14166,9 @@ var YS = 1e4, XS = 1280 * 720, ZS = /* @__PURE__ */ new WeakMap(), QS = /* @__PU
 	resolvedDecoder(e) {
 		return LS(this.options.get("decoders", e), this.browser.supportsMediaSource, this.options.get("drm"));
 	}
+	usesSplitCanvasAudio() {
+		return !this.willUseMediaSource() && this.options.get("streamToMediaElementEnabled") && kt(this.browser) && this.options.get("media") !== "audio" && this.options.get("media") !== "video" && this.browser.platform.isIOS;
+	}
 	isWebKitCanvasPath() {
 		return !this.willUseMediaSource() && this.browser.platform.isWebKit;
 	}