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

@@ -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"