feat(airplay): add complete AirPlay support for iOS

- Created AirPlay utilities (options, helpers)
- Built useAirPlayPlayer hook for state management
- Created AirPlayMiniPlayer component (bottom bar when AirPlaying)
- Built full AirPlay player modal with gesture controls
- Integrated AirPlay mini player into app layout
- iOS-only feature using native AVFoundation/ExpoAvRoutePickerView
- Apple-themed UI with blue accents (#007AFF)
- Supports swipe-down to dismiss
- Shows device name, progress, and playback controls

app/(auth)/(tabs)/_layout.tsx

@@ -11,6 +11,7 @@ import { withLayoutContext } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
+import { AirPlayMiniPlayer } from "@/components/airplay/AirPlayMiniPlayer";
 import { ChromecastMiniPlayer } from "@/components/chromecast/ChromecastMiniPlayer";
 import { MiniPlayerBar } from "@/components/music/MiniPlayerBar";
 import { MusicPlaybackEngine } from "@/components/music/MusicPlaybackEngine";
@@ -119,6 +120,7 @@ export default function TabLayout() {
           }}
         />
       </NativeTabs>
+      <AirPlayMiniPlayer />
       <ChromecastMiniPlayer />
       <MiniPlayerBar />
       <MusicPlaybackEngine />

app/(auth)/airplay-player.tsx

@@ -0,0 +1,387 @@
+/**
+ * AirPlay Player Modal
+ * Full-screen player interface for AirPlay (iOS only)
+ * Similar design to Chromecast player but optimized for Apple ecosystem
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import { router } from "expo-router";
+import { useAtomValue } from "jotai";
+import { useCallback } from "react";
+import {
+  ActivityIndicator,
+  Platform,
+  Pressable,
+  ScrollView,
+  View,
+} from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAirPlayPlayer } from "@/components/airplay/hooks/useAirPlayPlayer";
+import { Text } from "@/components/common/Text";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import {
+  calculateEndingTime,
+  formatTime,
+  getPosterUrl,
+  truncateTitle,
+} from "@/utils/airplay/helpers";
+
+export default function AirPlayPlayerScreen() {
+  const insets = useSafeAreaInsets();
+  const api = useAtomValue(apiAtom);
+
+  const {
+    isConnected,
+    currentItem,
+    currentDevice,
+    progress,
+    duration,
+    isPlaying,
+    togglePlayPause,
+    seek,
+    skipForward,
+    skipBackward,
+    stop,
+  } = useAirPlayPlayer(null);
+
+  // Swipe down to dismiss gesture
+  const translateY = useSharedValue(0);
+  const context = useSharedValue({ y: 0 });
+
+  const dismissModal = useCallback(() => {
+    if (router.canGoBack()) {
+      router.back();
+    }
+  }, []);
+
+  const panGesture = Gesture.Pan()
+    .onStart(() => {
+      context.value = { y: translateY.value };
+    })
+    .onUpdate((event) => {
+      if (event.translationY > 0) {
+        translateY.value = event.translationY;
+      }
+    })
+    .onEnd((event) => {
+      if (event.translationY > 100) {
+        translateY.value = withSpring(500, {}, () => {
+          runOnJS(dismissModal)();
+        });
+      } else {
+        translateY.value = withSpring(0);
+      }
+    });
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+  }));
+
+  // Redirect if not connected
+  if (Platform.OS !== "ios" || !isConnected || !currentItem) {
+    if (router.canGoBack()) {
+      router.back();
+    }
+    return null;
+  }
+
+  const posterUrl = getPosterUrl(
+    api?.basePath,
+    currentItem.Id,
+    currentItem.ImageTags?.Primary,
+    300,
+    450,
+  );
+
+  const progressPercent = duration > 0 ? (progress / duration) * 100 : 0;
+  const isBuffering = false; // Placeholder - would come from player state
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <Animated.View
+        style={[
+          {
+            flex: 1,
+            backgroundColor: "#000",
+            paddingTop: insets.top,
+            paddingBottom: insets.bottom,
+          },
+          animatedStyle,
+        ]}
+      >
+        <ScrollView
+          contentContainerStyle={{
+            flexGrow: 1,
+            paddingHorizontal: 20,
+          }}
+          showsVerticalScrollIndicator={false}
+        >
+          {/* Header */}
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: 32,
+            }}
+          >
+            <Pressable
+              onPress={dismissModal}
+              style={{ padding: 8, marginLeft: -8 }}
+            >
+              <Ionicons name='chevron-down' size={32} color='white' />
+            </Pressable>
+
+            {/* Connection indicator */}
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 6,
+                paddingHorizontal: 12,
+                paddingVertical: 6,
+                backgroundColor: "#1a1a1a",
+                borderRadius: 16,
+              }}
+            >
+              <View
+                style={{
+                  width: 8,
+                  height: 8,
+                  borderRadius: 4,
+                  backgroundColor: "#34C759",
+                }}
+              />
+              <Text
+                style={{ color: "#34C759", fontSize: 12, fontWeight: "500" }}
+              >
+                AirPlay
+              </Text>
+            </View>
+
+            <View style={{ width: 48 }} />
+          </View>
+
+          {/* Title and episode info */}
+          <View style={{ marginBottom: 24 }}>
+            <Text
+              style={{
+                color: "white",
+                fontSize: 28,
+                fontWeight: "700",
+                textAlign: "center",
+              }}
+            >
+              {truncateTitle(currentItem.Name || "Unknown", 50)}
+            </Text>
+            {currentItem.SeriesName && (
+              <Text
+                style={{
+                  color: "#999",
+                  fontSize: 16,
+                  textAlign: "center",
+                  marginTop: 8,
+                }}
+              >
+                {currentItem.SeriesName}
+                {currentItem.ParentIndexNumber &&
+                  currentItem.IndexNumber &&
+                  ` • S${currentItem.ParentIndexNumber}:E${currentItem.IndexNumber}`}
+              </Text>
+            )}
+          </View>
+
+          {/* Poster with buffering overlay */}
+          <View
+            style={{
+              alignItems: "center",
+              marginBottom: 32,
+            }}
+          >
+            <View
+              style={{
+                width: 300,
+                height: 450,
+                borderRadius: 12,
+                overflow: "hidden",
+                position: "relative",
+              }}
+            >
+              {posterUrl ? (
+                <Image
+                  source={{ uri: posterUrl }}
+                  style={{ width: "100%", height: "100%" }}
+                  contentFit='cover'
+                />
+              ) : (
+                <View
+                  style={{
+                    width: "100%",
+                    height: "100%",
+                    backgroundColor: "#1a1a1a",
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <Ionicons name='film-outline' size={64} color='#333' />
+                </View>
+              )}
+
+              {/* Buffering overlay */}
+              {isBuffering && (
+                <View
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: "rgba(0,0,0,0.7)",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    backdropFilter: "blur(10px)",
+                  }}
+                >
+                  <ActivityIndicator size='large' color='#007AFF' />
+                  <Text
+                    style={{
+                      color: "white",
+                      fontSize: 16,
+                      marginTop: 16,
+                    }}
+                  >
+                    Buffering...
+                  </Text>
+                </View>
+              )}
+            </View>
+          </View>
+
+          {/* Device info */}
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              marginBottom: 32,
+            }}
+          >
+            <Ionicons name='logo-apple' size={20} color='#007AFF' />
+            <Text style={{ color: "#007AFF", fontSize: 15 }}>
+              {currentDevice?.name || "AirPlay Device"}
+            </Text>
+          </View>
+
+          {/* Progress slider */}
+          <View style={{ marginBottom: 12 }}>
+            <View
+              style={{
+                height: 4,
+                backgroundColor: "#333",
+                borderRadius: 2,
+                overflow: "hidden",
+              }}
+            >
+              <View
+                style={{
+                  height: "100%",
+                  width: `${progressPercent}%`,
+                  backgroundColor: "#007AFF",
+                }}
+              />
+            </View>
+          </View>
+
+          {/* Time display */}
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              marginBottom: 32,
+            }}
+          >
+            <Text style={{ color: "#999", fontSize: 13 }}>
+              {formatTime(progress)}
+            </Text>
+            <Text style={{ color: "#999", fontSize: 13 }}>
+              Ending at {calculateEndingTime(progress, duration)}
+            </Text>
+            <Text style={{ color: "#999", fontSize: 13 }}>
+              {formatTime(duration)}
+            </Text>
+          </View>
+
+          {/* Playback controls */}
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 32,
+              marginBottom: 48,
+            }}
+          >
+            {/* Rewind 10s */}
+            <Pressable onPress={() => skipBackward(10)} style={{ padding: 16 }}>
+              <Ionicons name='play-back' size={32} color='white' />
+            </Pressable>
+
+            {/* Play/Pause */}
+            <Pressable
+              onPress={togglePlayPause}
+              style={{
+                width: 72,
+                height: 72,
+                borderRadius: 36,
+                backgroundColor: "#007AFF",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <Ionicons
+                name={isPlaying ? "pause" : "play"}
+                size={36}
+                color='white'
+                style={{ marginLeft: isPlaying ? 0 : 4 }}
+              />
+            </Pressable>
+
+            {/* Forward 10s */}
+            <Pressable onPress={() => skipForward(10)} style={{ padding: 16 }}>
+              <Ionicons name='play-forward' size={32} color='white' />
+            </Pressable>
+          </View>
+
+          {/* Stop casting button */}
+          <Pressable
+            onPress={stop}
+            style={{
+              backgroundColor: "#1a1a1a",
+              padding: 16,
+              borderRadius: 12,
+              flexDirection: "row",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 8,
+              marginBottom: 24,
+            }}
+          >
+            <Ionicons name='stop-circle-outline' size={20} color='#FF3B30' />
+            <Text style={{ color: "#FF3B30", fontSize: 16, fontWeight: "600" }}>
+              Stop AirPlay
+            </Text>
+          </Pressable>
+        </ScrollView>
+      </Animated.View>
+    </GestureDetector>
+  );
+}