From 8b6c3e7bced654c6e8cdeb3bb43ece87ea771dc4 Mon Sep 17 00:00:00 2001
From: sphet98 <260131232+Sphet98@users.noreply.github.com>
Date: Sun, 8 Feb 2026 00:28:24 +0200
Subject: [PATCH] Add AirPlay support

Enable AirPlay when available. Currently only audio will be AirPlayed since
the video format is incompatible.
---
 materialious/src/lib/components/Player.svelte | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte
index 1de79a20..948e7e30 100644
--- a/materialious/src/lib/components/Player.svelte
+++ b/materialious/src/lib/components/Player.svelte
@@ -649,6 +649,11 @@
 		});
 		playerElement = document.getElementById('player') as HTMLMediaElement;
 
+		// Enable AirPlay if supported
+		if (hasWebkitShowPlaybackTargetPicker(playerElement)) {
+			playerElement.setAttribute('x-webkit-airplay', 'allow');
+		}
+
 		playerElement.loop = playerLoop;
 
 		if ($playerState) {
@@ -988,6 +993,18 @@
 		playerTextTracks = player.getTextTracks();
 	});
 
+	function hasWebkitShowPlaybackTargetPicker(
+		el: HTMLMediaElement
+	): el is HTMLMediaElement & { webkitShowPlaybackTargetPicker: () => void } {
+		return typeof (el as any).webkitShowPlaybackTargetPicker === "function";
+	}
+
+	function handleAirPlayClick() {
+		if(playerElement && hasWebkitShowPlaybackTargetPicker(playerElement)) {
+			playerElement.webkitShowPlaybackTargetPicker();
+		}
+	}
+
 	async function getLastPlayPos(): Promise<number> {
 		if (loadTimeFromUrl($page) || !$playerSavePlaybackPositionStore) return 0;
 
@@ -1513,6 +1530,14 @@
 								{/if}
 							</menu>
 						</button>
+						{#if playerElement && hasWebkitShowPlaybackTargetPicker(playerElement)}
+							<button
+								class="inverse-primary"
+								onclick={handleAirPlayClick}
+								title="AirPlay">
+								<i>airplay</i>
+							</button>
+						{/if}
 						{#if document.pictureInPictureEnabled}
 							<button
 								class="inverse-primary"