feat(sync-play): squash feature/sync-play

components/PlayButton.tsx

@@ -30,6 +30,7 @@ import { getDownloadedItemById } from "@/providers/Downloads/database";
 import { useGlobalModal } from "@/providers/GlobalModalProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
+import { useSyncPlay } from "@/providers/SyncPlay/SyncPlayProvider";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 import { useSettings } from "@/utils/atoms/settings";
 import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
@@ -67,6 +68,14 @@ export const PlayButton: React.FC<Props> = ({
   const api = useAtomValue(apiAtom);
   const user = useAtomValue(userAtom);
 
+  // SyncPlay: when enabled, we DO NOT navigate locally on play — we tell the
+  // server, which broadcasts a PlayQueue: NewPlaylist update to every group
+  // member (including us). Our `setStartPlaybackHandler` in SyncPlayProvider
+  // then performs the navigation uniformly for everyone, matching
+  // jellyfin-web's playbackManager intercept (Controller.play).
+  const { isEnabled: isSyncPlayEnabled, controller: syncPlayController } =
+    useSyncPlay();
+
   // Use colors prop if provided, otherwise fallback to global atom
   const effectiveColors = colors || globalColorAtom;
 
@@ -94,6 +103,37 @@ export const PlayButton: React.FC<Props> = ({
   const handleNormalPlayFlow = useCallback(async () => {
     if (!item) return;
 
+    // SyncPlay intercept: in a group, route playback through sthe server so
+    // every member gets the same PlayQueue: NewPlaylist update and navigates
+    // together. Skips local navigation and the Chromecast prompt entirely —
+    // SyncPlay + Chromecast isn't a supported combination yet, same as
+    // jellyfin-web.
+    if (isSyncPlayEnabled && syncPlayController && item.Id) {
+      try {
+        // Pass the full `item` (not just the ID) so the SyncPlay controller
+        // can run `translateItemsForPlayback` with full context — this is
+        // what jellyfin-web does, and it lets us expand Series / Season /
+        // BoxSet into real episode/track IDs before broadcasting the queue.
+        // Without expansion, receivers (jellyfin-web in particular) get
+        // container IDs they can't play and silently fail to open the
+        // player.
+        await syncPlayController.play({
+          items: [item],
+          ids: [item.Id],
+          startPositionTicks: item.UserData?.PlaybackPositionTicks ?? 0,
+        });
+      } catch (error) {
+        console.error("SyncPlay: failed to start group playback", error);
+        Alert.alert(
+          t("player.client_error"),
+          t("syncplay.failed_to_start", {
+            defaultValue: "Failed to start SyncPlay group playback",
+          }),
+        );
+      }
+      return;
+    }
+
     const queryParams = new URLSearchParams({
       itemId: item.Id!,
       audioIndex: selectedOptions.audioIndex?.toString() ?? "",
@@ -290,6 +330,8 @@ export const PlayButton: React.FC<Props> = ({
     goToPlayer,
     isOffline,
     t,
+    isSyncPlayEnabled,
+    syncPlayController,
   ]);
 
   const onPress = useCallback(async () => {

components/syncplay/GroupSelectionMenu.tsx

@@ -0,0 +1,235 @@
+/**
+ * GroupSelectionMenu
+ *
+ * Content rendered inside the SyncPlay bottom sheet (the sheet itself is
+ * owned by SyncPlayButton). Calls `onClose` after successful actions to
+ * dismiss the parent sheet.
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Button } from "@/components/Button";
+import { Text } from "@/components/common/Text";
+import { useSyncPlay } from "@/providers/SyncPlay";
+import type { GroupInfoDto } from "@/providers/SyncPlay/types";
+
+interface GroupSelectionMenuProps {
+  onClose: () => void;
+}
+
+export function GroupSelectionMenu({ onClose }: GroupSelectionMenuProps) {
+  const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
+
+  const {
+    isEnabled,
+    groupInfo,
+    canCreateGroups,
+    joinGroup,
+    createGroup,
+    leaveGroup,
+    getGroups,
+  } = useSyncPlay();
+
+  const [groups, setGroups] = useState<GroupInfoDto[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      setIsLoading(true);
+      try {
+        const fetchedGroups = await getGroups();
+        if (!cancelled) {
+          setGroups(fetchedGroups);
+        }
+      } catch (error) {
+        console.error("Failed to fetch groups", error);
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [getGroups]);
+
+  const handleJoinGroup = useCallback(
+    async (groupId: string) => {
+      try {
+        await joinGroup(groupId);
+        onClose();
+      } catch (error) {
+        console.error("Failed to join group", error);
+      }
+    },
+    [joinGroup, onClose],
+  );
+
+  const handleCreateGroup = useCallback(async () => {
+    setIsCreating(true);
+    try {
+      await createGroup();
+      onClose();
+    } catch (error) {
+      console.error("Failed to create group", error);
+    } finally {
+      setIsCreating(false);
+    }
+  }, [createGroup, onClose]);
+
+  const handleLeaveGroup = useCallback(async () => {
+    try {
+      await leaveGroup();
+      onClose();
+    } catch (error) {
+      console.error("Failed to leave group", error);
+    }
+  }, [leaveGroup, onClose]);
+
+  const containerStyle = {
+    paddingLeft: Math.max(16, insets.left),
+    paddingRight: Math.max(16, insets.right),
+    paddingBottom: Math.max(16, insets.bottom),
+    paddingTop: 8,
+  };
+
+  if (isEnabled && groupInfo) {
+    return (
+      <View style={containerStyle}>
+        <View className='mb-4'>
+          <View className='flex-row items-center mb-2'>
+            <Ionicons name='people' size={24} color='#00a4dc' />
+            <Text className='font-bold text-xl text-neutral-100 ml-2'>
+              {t("syncplay.title")}
+            </Text>
+          </View>
+          <Text className='text-neutral-400'>{t("syncplay.my_group")}</Text>
+        </View>
+
+        <View className='bg-neutral-800 rounded-xl p-4 mb-4'>
+          <View className='flex-row items-center justify-between mb-3'>
+            <Text className='text-neutral-100 font-semibold text-lg'>
+              {groupInfo.GroupName}
+            </Text>
+            <View className='bg-[#00a4dc] px-2 py-1 rounded'>
+              <Text className='text-white text-xs font-medium'>
+                {groupInfo.State}
+              </Text>
+            </View>
+          </View>
+
+          {groupInfo.Participants && groupInfo.Participants.length > 0 && (
+            <View className='flex-row items-center'>
+              <Ionicons name='person' size={16} color='#9ca3af' />
+              <Text className='text-neutral-400 ml-2'>
+                {groupInfo.Participants.length} {t("syncplay.members")}
+              </Text>
+            </View>
+          )}
+        </View>
+
+        <Button onPress={handleLeaveGroup} color='red'>
+          <View className='flex-row items-center justify-center'>
+            <Ionicons name='exit-outline' size={20} color='white' />
+            <Text className='text-white font-semibold ml-2'>
+              {t("syncplay.leave_group")}
+            </Text>
+          </View>
+        </Button>
+      </View>
+    );
+  }
+
+  return (
+    <View style={containerStyle}>
+      <View className='mb-4'>
+        <View className='flex-row items-center mb-2'>
+          <Ionicons name='people-outline' size={24} color='white' />
+          <Text className='font-bold text-xl text-neutral-100 ml-2'>
+            {t("syncplay.title")}
+          </Text>
+        </View>
+        <Text className='text-neutral-400'>{t("syncplay.join_group")}</Text>
+      </View>
+
+      {isLoading && (
+        <View className='py-8 items-center'>
+          <ActivityIndicator color='#00a4dc' />
+        </View>
+      )}
+
+      {!isLoading && groups.length > 0 && (
+        <View className='mb-4'>
+          <Text className='text-neutral-400 text-sm mb-2 ml-1'>
+            {t("syncplay.available_groups")}
+          </Text>
+          <View className='bg-neutral-800 rounded-xl overflow-hidden'>
+            {groups.map((group, index) => (
+              <TouchableOpacity
+                key={group.GroupId ?? index}
+                onPress={() => group.GroupId && handleJoinGroup(group.GroupId)}
+                className={`flex-row items-center p-4 ${
+                  index < groups.length - 1 ? "border-b border-neutral-700" : ""
+                }`}
+              >
+                <View className='w-10 h-10 bg-[#00a4dc]/20 rounded-full items-center justify-center mr-3'>
+                  <Ionicons name='people' size={20} color='#00a4dc' />
+                </View>
+
+                <View className='flex-1'>
+                  <Text className='text-neutral-100 font-medium'>
+                    {group.GroupName}
+                  </Text>
+                  <Text className='text-neutral-500 text-sm'>
+                    {group.Participants?.length ?? 0} {t("syncplay.members")} •{" "}
+                    {group.State}
+                  </Text>
+                </View>
+
+                <Ionicons name='chevron-forward' size={20} color='#9ca3af' />
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+      )}
+
+      {!isLoading && groups.length === 0 && (
+        <View className='bg-neutral-800/50 rounded-xl p-6 mb-4 items-center'>
+          <Ionicons name='people-outline' size={40} color='#6b7280' />
+          <Text className='text-neutral-400 text-center mt-3'>
+            {t("syncplay.available_groups")}: 0{"\n"}
+            {t("syncplay.create_new_group")}
+          </Text>
+        </View>
+      )}
+
+      {canCreateGroups && (
+        <Button
+          onPress={handleCreateGroup}
+          color='purple'
+          disabled={isCreating}
+        >
+          <View className='flex-row items-center justify-center'>
+            {isCreating ? (
+              <ActivityIndicator size='small' color='white' />
+            ) : (
+              <>
+                <Ionicons name='add' size={20} color='white' />
+                <Text className='text-white font-semibold ml-2'>
+                  {t("syncplay.create_new_group")}
+                </Text>
+              </>
+            )}
+          </View>
+        </Button>
+      )}
+    </View>
+  );
+}

components/syncplay/SyncPlayButton.tsx

@@ -0,0 +1,97 @@
+/**
+ * SyncPlayButton
+ *
+ * Header button for accessing SyncPlay functionality.
+ * Shows group status and opens the group selection sheet.
+ *
+ * Uses the @expo/ui drop-in BottomSheetModal (SwiftUI sheet on iOS, Jetpack
+ * Compose ModalBottomSheet on Android). Because it presents natively, it
+ * works correctly even when triggered from `headerRight` — no portal or
+ * provider context is required (unlike @gorhom/bottom-sheet, which fails
+ * silently from detached UINavigationItem subtrees).
+ *
+ * Safe to import statically: this whole module is lazy-required only on
+ * non-TV platforms by app/(auth)/(tabs)/(home)/_layout.tsx.
+ */
+
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@expo/ui/community/bottom-sheet";
+import { Ionicons } from "@expo/vector-icons";
+import { useCallback, useRef } from "react";
+import { Platform, View } from "react-native";
+import { Pressable } from "react-native-gesture-handler";
+import { useCastDevice } from "react-native-google-cast";
+import { toast } from "sonner-native";
+import { useNetworkStatus } from "@/providers/NetworkStatusProvider";
+import { useSyncPlay } from "@/providers/SyncPlay";
+import { GroupSelectionMenu } from "./GroupSelectionMenu";
+
+interface SyncPlayButtonProps {
+  size?: number;
+}
+
+export function SyncPlayButton({ size = 22 }: SyncPlayButtonProps) {
+  const { isEnabled, canJoinGroups } = useSyncPlay();
+  const { isConnected } = useNetworkStatus();
+  const castDevice = useCastDevice();
+  const sheetRef = useRef<BottomSheetMethods>(null);
+
+  const isCasting = !!castDevice;
+
+  const handlePress = useCallback(() => {
+    if (isCasting) {
+      toast("SyncPlay not available while casting");
+      return;
+    }
+    sheetRef.current?.present();
+  }, [isCasting]);
+
+  const handleDismiss = useCallback(() => {
+    sheetRef.current?.dismiss();
+  }, []);
+
+  if (Platform.isTV) return null;
+  if (!canJoinGroups) return null;
+  if (!isConnected) return null;
+
+  const iconColor = isCasting ? "#6b7280" : isEnabled ? "#00a4dc" : "white";
+
+  return (
+    <>
+      <Pressable
+        className='mr-4'
+        onPress={handlePress}
+        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+      >
+        <View className='relative'>
+          <Ionicons
+            name={isEnabled ? "people" : "people-outline"}
+            size={size}
+            color={iconColor}
+          />
+          {isEnabled && !isCasting && (
+            <View
+              className='absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-[#00a4dc]'
+              style={{
+                borderWidth: 1,
+                borderColor: "#171717",
+              }}
+            />
+          )}
+        </View>
+      </Pressable>
+      <BottomSheetModal
+        ref={sheetRef}
+        snapPoints={Platform.OS === "android" ? ["100%"] : ["60%"]}
+        enablePanDownToClose
+      >
+        <BottomSheetView>
+          <GroupSelectionMenu onClose={handleDismiss} />
+        </BottomSheetView>
+      </BottomSheetModal>
+    </>
+  );
+}

components/syncplay/SyncPlayIndicator.tsx

@@ -0,0 +1,165 @@
+/**
+ * SyncPlayIndicator
+ *
+ * Visual indicator shown during SyncPlay operations.
+ * Only appears when user's stream is ready but waiting for other group members.
+ *
+ * Key principle: SyncPlay indicator = "You're ready, waiting on others"
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { StyleSheet, View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+import { Text } from "@/components/common/Text";
+
+// SyncPlay cyan color (matches Jellyfin-web)
+const SYNC_PLAY_COLOR = "#00a4dc";
+
+interface SyncPlayIndicatorProps {
+  /**
+   * Whether the indicator should be visible.
+   * Should only be true when:
+   * 1. User's stream has loaded
+   * 2. Waiting for other group members
+   */
+  visible: boolean;
+
+  /**
+   * Optional message to display
+   */
+  message?: string;
+}
+
+export function SyncPlayIndicator({
+  visible,
+  message,
+}: SyncPlayIndicatorProps) {
+  const { t } = useTranslation();
+  const displayMessage = message ?? t("syncplay.waiting_for_group");
+  const opacity = useSharedValue(0);
+  const scale = useSharedValue(1);
+
+  useEffect(() => {
+    if (visible) {
+      opacity.value = withTiming(1, { duration: 200 });
+      scale.value = withRepeat(
+        withTiming(1.15, {
+          duration: 800,
+          easing: Easing.inOut(Easing.ease),
+        }),
+        -1,
+        true,
+      );
+    } else {
+      opacity.value = withTiming(0, { duration: 200 });
+      scale.value = 1;
+    }
+  }, [visible, opacity, scale]);
+
+  const containerStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  const pulseStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Animated.View style={[styles.container, containerStyle]}>
+      <View style={styles.content}>
+        {/* Pulsing icon container */}
+        <Animated.View style={[styles.iconContainer, pulseStyle]}>
+          <View style={styles.iconCircle}>
+            <Ionicons name='people' size={28} color='white' />
+          </View>
+        </Animated.View>
+
+        {/* Message */}
+        <Text style={styles.message}>{displayMessage}</Text>
+
+        {/* SyncPlay badge */}
+        <View style={styles.badge}>
+          <Ionicons name='sync' size={12} color='white' />
+          <Text style={styles.badgeText}>SyncPlay</Text>
+        </View>
+      </View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFill,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    zIndex: 100,
+  },
+  content: {
+    alignItems: "center",
+  },
+  iconContainer: {
+    marginBottom: 16,
+  },
+  iconCircle: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: SYNC_PLAY_COLOR,
+    justifyContent: "center",
+    alignItems: "center",
+    // Glow effect
+    shadowColor: SYNC_PLAY_COLOR,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.6,
+    shadowRadius: 16,
+    elevation: 8,
+  },
+  message: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "500",
+    marginBottom: 8,
+  },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 164, 220, 0.2)",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: SYNC_PLAY_COLOR,
+  },
+  badgeText: {
+    color: SYNC_PLAY_COLOR,
+    fontSize: 12,
+    fontWeight: "600",
+    marginLeft: 4,
+  },
+});
+
+/**
+ * Hook-compatible version that reads SyncPlay state directly
+ */
+export function useSyncPlayIndicatorState(
+  isLocalReady: boolean,
+  isGroupWaiting: boolean,
+): boolean {
+  // Show indicator only when:
+  // 1. User's local stream has loaded (isLocalReady)
+  // 2. Group is still waiting for others (isGroupWaiting)
+  return isLocalReady && isGroupWaiting;
+}

components/syncplay/SyncPlaySpinner.tsx

@@ -0,0 +1,53 @@
+/**
+ * SyncPlaySpinner
+ *
+ * Compact rotating SyncPlay icon shown in place of the play/pause button
+ * while a play/pause command is in flight to the server (the "schedule-play"
+ * indicator from jellyfin-web).
+ */
+
+import { Ionicons } from "@expo/vector-icons";
+import { useEffect } from "react";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+
+// SyncPlay cyan color (matches jellyfin-web)
+const SYNC_PLAY_COLOR = "#00a4dc";
+
+interface SyncPlaySpinnerProps {
+  size: number;
+  color?: string;
+}
+
+export function SyncPlaySpinner({
+  size,
+  color = SYNC_PLAY_COLOR,
+}: SyncPlaySpinnerProps) {
+  const rotation = useSharedValue(0);
+
+  useEffect(() => {
+    rotation.value = withRepeat(
+      withTiming(360, {
+        duration: 1200,
+        easing: Easing.linear,
+      }),
+      -1,
+      false,
+    );
+  }, [rotation]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <Ionicons name='sync' size={size} color={color} />
+    </Animated.View>
+  );
+}

components/syncplay/index.ts

@@ -0,0 +1,10 @@
+/**
+ * SyncPlay UI Components
+ */
+
+export { GroupSelectionMenu } from "./GroupSelectionMenu";
+export { SyncPlayButton } from "./SyncPlayButton";
+export {
+  SyncPlayIndicator,
+  useSyncPlayIndicatorState,
+} from "./SyncPlayIndicator";

components/video-player/controls/CenterControls.tsx

@@ -4,11 +4,16 @@ import { Platform, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
+import { SyncPlaySpinner } from "@/components/syncplay/SyncPlaySpinner";
+import { useSyncPlay } from "@/providers/SyncPlay/SyncPlayProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import AudioSlider from "./AudioSlider";
 import BrightnessSlider from "./BrightnessSlider";
 import { ICON_SIZES } from "./constants";
 
+// SyncPlay cyan color (matches Jellyfin-web)
+const SYNC_PLAY_COLOR = "#00a4dc";
+
 interface CenterControlsProps {
   showControls: boolean;
   isPlaying: boolean;
@@ -44,6 +49,18 @@ export const CenterControls: FC<CenterControlsProps> = ({
   const { settings } = useSettings();
   const insets = useSafeAreaInsets();
 
+  // SyncPlay state from global provider
+  const {
+    isEnabled: isSyncPlayEnabled,
+    groupInfo,
+    pendingPlaybackCommand,
+  } = useSyncPlay();
+  const isSyncPlayWaiting = isSyncPlayEnabled && groupInfo?.State === "Waiting";
+  // Show the rotating SyncPlay icon ("schedule-play" in jellyfin-web) while a
+  // play/pause request is in flight to the server.
+  const isSyncPlayScheduling =
+    isSyncPlayEnabled && pendingPlaybackCommand !== null;
+
   return (
     <View
       style={{
@@ -121,7 +138,17 @@ export const CenterControls: FC<CenterControlsProps> = ({
 
       <View style={Platform.isTV ? { flex: 1, alignItems: "center" } : {}}>
         <TouchableOpacity onPress={togglePlay}>
-          {!isBuffering ? (
+          {isSyncPlayScheduling ? (
+            // SyncPlay command in flight - rotating spinner ("schedule-play")
+            <SyncPlaySpinner size={ICON_SIZES.CENTER} />
+          ) : isSyncPlayWaiting ? (
+            // SyncPlay waiting indicator - clock icon, still pressable to toggle
+            <Ionicons
+              name='time'
+              size={ICON_SIZES.CENTER}
+              color={SYNC_PLAY_COLOR}
+            />
+          ) : !isBuffering ? (
             <Ionicons
               name={isPlaying ? "pause" : "play"}
               size={ICON_SIZES.CENTER}