feat(home): adds pull to refresh functionality

Adds pull-to-refresh functionality on the home screen.

This change enhances user experience by allowing users to
manually refresh the home screen content. It also ensures
that the loading indicator is correctly managed during
refresh operations, using a try-finally block.

app/(auth)/player/direct-player.tsx

@@ -28,7 +28,6 @@ import {
 } from "@/components/video-player/controls/utils/playback-speed-settings";
 import useRouter from "@/hooks/useAppRouter";
 import { useHaptic } from "@/hooks/useHaptic";
-import { useIntroPlayback } from "@/hooks/useIntroPlayback";
 import { useOrientation } from "@/hooks/useOrientation";
 import { usePlaybackManager } from "@/hooks/usePlaybackManager";
 import usePlaybackSpeed from "@/hooks/usePlaybackSpeed";
@@ -56,7 +55,7 @@ import {
 } from "@/utils/jellyfin/subtitleUtils";
 import { writeToLog } from "@/utils/log";
 import { generateDeviceProfile } from "@/utils/profiles/native";
-import { msToTicks, ticksToMs, ticksToSeconds } from "@/utils/time";
+import { msToTicks, ticksToSeconds } from "@/utils/time";
 
 export default function page() {
   const videoRef = useRef<MpvPlayerViewRef>(null);
@@ -88,8 +87,6 @@ export default function page() {
   const progress = useSharedValue(0);
   const isSeeking = useSharedValue(false);
   const cacheProgress = useSharedValue(0);
-  // Track whether we've already triggered completion for the current intro
-  const introCompletionTriggered = useSharedValue(false);
   const VolumeManager = Platform.isTV
     ? null
     : require("react-native-volume-manager");
@@ -152,14 +149,6 @@ export default function page() {
     isError: false,
   });
 
-  // Intro playback hook - manages intro video playback before main content
-  const { intros, currentIntro, isPlayingIntro, skipAllIntros } =
-    useIntroPlayback({
-      api,
-      itemId: item?.Id || null,
-      userId: user?.Id,
-    });
-
   // Resolve audio index: use URL param if provided, otherwise use stored index for offline playback
   const audioIndex = useMemo(() => {
     if (audioIndexFromUrl !== undefined) {
@@ -258,9 +247,6 @@ export default function page() {
     isError: false,
   });
 
-  // Intro stream state - separate from main content stream
-  const [introStream, setIntroStream] = useState<Stream | null>(null);
-
   useEffect(() => {
     const fetchStreamData = async () => {
       setStreamStatus({ isLoading: true, isError: false });
@@ -341,57 +327,6 @@ export default function page() {
     downloadedItem,
   ]);
 
-  // Fetch intro stream when current intro changes
-  useEffect(() => {
-    const fetchIntroStreamData = async () => {
-      // Don't fetch intro stream if offline or no current intro
-      if (offline || !currentIntro?.Id || !api || !user?.Id) {
-        setIntroStream(null);
-        return;
-      }
-
-      try {
-        const res = await getStreamUrl({
-          api,
-          item: currentIntro,
-          startTimeTicks: 0, // Always start from beginning for intros
-          userId: user.Id,
-          audioStreamIndex: audioIndex,
-          maxStreamingBitrate: bitrateValue,
-          mediaSourceId: undefined,
-          subtitleStreamIndex: subtitleIndex,
-          deviceProfile: generateDeviceProfile(),
-        });
-        if (!res) return;
-        const { mediaSource, sessionId, url } = res;
-
-        if (!sessionId || !mediaSource || !url) {
-          console.error("Failed to get intro stream URL");
-          return;
-        }
-        setIntroStream({ mediaSource, sessionId, url });
-      } catch (error) {
-        console.error("Failed to fetch intro stream:", error);
-      }
-    };
-    fetchIntroStreamData();
-  }, [
-    currentIntro,
-    api,
-    user?.Id,
-    audioIndex,
-    bitrateValue,
-    subtitleIndex,
-    offline,
-  ]);
-
-  // Reset intro completion flag when a new intro starts playing
-  useEffect(() => {
-    if (isPlayingIntro) {
-      introCompletionTriggered.value = false;
-    }
-  }, [isPlayingIntro, currentIntro]);
-
   useEffect(() => {
     if (!stream || !api || offline) return;
     const reportPlaybackStart = async () => {
@@ -545,21 +480,6 @@ export default function page() {
         lastUrlUpdateTime.value = now;
       }
 
-      // Handle intro completion - check if intro has reached its end
-      if (isPlayingIntro && currentIntro) {
-        const introDuration = ticksToMs(currentIntro.RunTimeTicks || 0);
-        // Check if we're near the end of the intro (within 1000ms buffer)
-        // Use a larger buffer to ensure reliable detection even with short intros
-        // or if MPV doesn't fire progress callbacks frequently
-        if (currentTime >= introDuration - 1000) {
-          // Only trigger once per intro to avoid multiple calls
-          if (!introCompletionTriggered.value) {
-            introCompletionTriggered.value = true;
-            skipAllIntros();
-          }
-        }
-      }
-
       if (!item?.Id) return;
 
       playbackManager.reportPlaybackProgress(
@@ -576,9 +496,6 @@ export default function page() {
       isSeeking,
       isPlaybackStopped,
       isBuffering,
-      isPlayingIntro,
-      currentIntro,
-      skipAllIntros,
     ],
   );
 
@@ -589,11 +506,9 @@ export default function page() {
 
   /** Build video source config for MPV */
   const videoSource = useMemo<MpvVideoSource | undefined>(() => {
-    // Use intro stream if playing intro, otherwise use main content stream
-    const activeStream = isPlayingIntro ? introStream : stream;
-    if (!activeStream?.url) return undefined;
+    if (!stream?.url) return undefined;
 
-    const mediaSource = activeStream.mediaSource;
+    const mediaSource = stream.mediaSource;
     const isTranscoding = Boolean(mediaSource?.TranscodingUrl);
 
     // Get external subtitle URLs
@@ -629,17 +544,14 @@ export default function page() {
     );
 
     // Calculate start position directly here to avoid timing issues
-    // For intros, always start from 0
-    const startTicks = isPlayingIntro
-      ? 0
-      : playbackPositionFromUrl
-        ? Number.parseInt(playbackPositionFromUrl, 10)
-        : (item?.UserData?.PlaybackPositionTicks ?? 0);
+    const startTicks = playbackPositionFromUrl
+      ? Number.parseInt(playbackPositionFromUrl, 10)
+      : (item?.UserData?.PlaybackPositionTicks ?? 0);
     const startPos = ticksToSeconds(startTicks);
 
     // Build source config - headers only needed for online streaming
     const source: MpvVideoSource = {
-      url: activeStream.url,
+      url: stream.url,
       startPosition: startPos,
       autoplay: true,
       initialSubtitleId,
@@ -662,8 +574,6 @@ export default function page() {
   }, [
     stream?.url,
     stream?.mediaSource,
-    introStream?.url,
-    introStream?.mediaSource,
     item?.UserData?.PlaybackPositionTicks,
     playbackPositionFromUrl,
     api?.basePath,
@@ -671,7 +581,6 @@ export default function page() {
     subtitleIndex,
     audioIndex,
     offline,
-    isPlayingIntro,
   ]);
 
   const volumeUpCb = useCallback(async () => {
@@ -1084,9 +993,6 @@ export default function page() {
                 getTechnicalInfo={getTechnicalInfo}
                 playMethod={playMethod}
                 transcodeReasons={transcodeReasons}
-                isPlayingIntro={isPlayingIntro}
-                skipAllIntros={skipAllIntros}
-                intros={intros}
               />
             )}
           </View>

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "streamyfin",

components/home/Home.tsx

@@ -35,6 +35,7 @@ import { MediaListSection } from "@/components/medialists/MediaListSection";
 import { Colors } from "@/constants/Colors";
 import useRouter from "@/hooks/useAppRouter";
 import { useNetworkStatus } from "@/hooks/useNetworkStatus";
+import { useRefetchHomeOnForeground } from "@/hooks/useRefetchHomeOnForeground";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useDownload } from "@/providers/DownloadProvider";
 import { useIntroSheet } from "@/providers/IntroSheetProvider";
@@ -107,6 +108,9 @@ export const Home = () => {
     prevIsConnected.current = isConnected;
   }, [isConnected, invalidateCache]);
 
+  // Refresh home data on mount (cold start) and when app returns to foreground
+  useRefetchHomeOnForeground();
+
   const hasDownloads = useMemo(() => {
     if (Platform.isTV) return false;
     return downloadedItems.length > 0;
@@ -196,10 +200,13 @@ export const Home = () => {
 
   const refetch = async () => {
     setLoading(true);
-    setLoadedSections(new Set());
-    await refreshStreamyfinPluginSettings();
-    await invalidateCache();
-    setLoading(false);
+    try {
+      setLoadedSections(new Set());
+      await refreshStreamyfinPluginSettings();
+      await invalidateCache();
+    } finally {
+      setLoading(false);
+    }
   };
 
   const createCollectionConfig = useCallback(

components/home/HomeWithCarousel.tsx

@@ -19,6 +19,7 @@ import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
   Platform,
+  RefreshControl,
   TouchableOpacity,
   View,
 } from "react-native";
@@ -37,6 +38,7 @@ import { MediaListSection } from "@/components/medialists/MediaListSection";
 import { Colors } from "@/constants/Colors";
 import useRouter from "@/hooks/useAppRouter";
 import { useNetworkStatus } from "@/hooks/useNetworkStatus";
+import { useRefetchHomeOnForeground } from "@/hooks/useRefetchHomeOnForeground";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
@@ -67,8 +69,8 @@ export const HomeWithCarousel = () => {
   const api = useAtomValue(apiAtom);
   const user = useAtomValue(userAtom);
   const insets = useSafeAreaInsets();
-  const [_loading, setLoading] = useState(false);
   const { settings, refreshStreamyfinPluginSettings } = useSettings();
+  const [loading, setLoading] = useState(false);
   const headerOverlayOffset = Platform.isTV ? 0 : 60;
   const navigation = useNavigation();
   const animatedScrollRef = useAnimatedRef<Animated.ScrollView>();
@@ -91,6 +93,19 @@ export const HomeWithCarousel = () => {
     prevIsConnected.current = isConnected;
   }, [isConnected, invalidateCache]);
 
+  // Refresh home data on mount (cold start) and when app returns to foreground
+  useRefetchHomeOnForeground();
+
+  const refetch = async () => {
+    setLoading(true);
+    try {
+      await refreshStreamyfinPluginSettings();
+      await invalidateCache();
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const hasDownloads = useMemo(() => {
     if (Platform.isTV) return false;
     return downloadedItems.length > 0;
@@ -178,13 +193,6 @@ export const HomeWithCarousel = () => {
     );
   }, [userViews]);
 
-  const _refetch = async () => {
-    setLoading(true);
-    await refreshStreamyfinPluginSettings();
-    await invalidateCache();
-    setLoading(false);
-  };
-
   const createCollectionConfig = useCallback(
     (
       title: string,
@@ -540,8 +548,18 @@ export const HomeWithCarousel = () => {
       nestedScrollEnabled
       contentInsetAdjustmentBehavior='never'
       scrollEventThrottle={16}
-      bounces={false}
+      bounces={!Platform.isTV}
       overScrollMode='never'
+      refreshControl={
+        !Platform.isTV ? (
+          <RefreshControl
+            refreshing={loading}
+            onRefresh={refetch}
+            tintColor='white'
+            colors={["white"]}
+          />
+        ) : undefined
+      }
       style={{ marginTop: -headerOverlayOffset }}
       contentContainerStyle={{ paddingTop: headerOverlayOffset }}
       onScroll={(event) => {
@@ -570,7 +588,7 @@ export const HomeWithCarousel = () => {
               settings.streamyStatsPromotedWatchlists;
             const streamystatsSections =
               index === streamystatsIndex && hasStreamystatsContent ? (
-                <>
+                <View key='streamystats-sections'>
                   {settings.streamyStatsMovieRecommendations && (
                     <StreamystatsRecommendations
                       title={t(
@@ -590,7 +608,7 @@ export const HomeWithCarousel = () => {
                   {settings.streamyStatsPromotedWatchlists && (
                     <StreamystatsPromotedWatchlists />
                   )}
-                </>
+                </View>
               ) : null;
 
             if (section.type === "InfiniteScrollingCollectionList") {

components/item/ItemPeopleSections.tsx

@@ -37,7 +37,18 @@ export const ItemPeopleSections: React.FC<Props> = ({ item, ...props }) => {
     return { ...item, People: people } as BaseItemDto;
   }, [item, people]);
 
-  const topPeople = useMemo(() => people.slice(0, 3), [people]);
+  const topPeople = useMemo(() => {
+    const seen = new Set<string>();
+    const unique: BaseItemPerson[] = [];
+    for (const person of people) {
+      if (person.Id && !seen.has(person.Id)) {
+        seen.add(person.Id);
+        unique.push(person);
+      }
+      if (unique.length >= 3) break;
+    }
+    return unique;
+  }, [people]);
 
   const renderActorSection = useCallback(
     (person: BaseItemPerson, idx: number, total: number) => {

components/video-player/controls/BottomControls.tsx

@@ -57,11 +57,6 @@ interface BottomControlsProps {
     minutes: number;
     seconds: number;
   };
-
-  // Intro playback props
-  isPlayingIntro?: boolean;
-  skipAllIntros?: () => void;
-  intros?: BaseItemDto[];
 }
 
 export const BottomControls: FC<BottomControlsProps> = ({
@@ -92,9 +87,6 @@ export const BottomControls: FC<BottomControlsProps> = ({
   trickPlayUrl,
   trickplayInfo,
   time,
-  isPlayingIntro = false,
-  skipAllIntros,
-  intros = [],
 }) => {
   const { settings } = useSettings();
   const insets = useSafeAreaInsets();
@@ -141,14 +133,6 @@ export const BottomControls: FC<BottomControlsProps> = ({
           )}
         </View>
         <View className='flex flex-row space-x-2 shrink-0'>
-          {/* Skip Intro button - shows when playing intro videos */}
-          {isPlayingIntro && intros.length > 0 && skipAllIntros && (
-            <SkipButton
-              showButton={true}
-              onPress={skipAllIntros}
-              buttonText='Skip Intro'
-            />
-          )}
           <SkipButton
             showButton={showSkipButton}
             onPress={skipIntro}

components/video-player/controls/Controls.tsx

@@ -72,10 +72,6 @@ interface Props {
   getTechnicalInfo?: () => Promise<TechnicalInfo>;
   playMethod?: "DirectPlay" | "DirectStream" | "Transcode";
   transcodeReasons?: string[];
-  // Intro playback props
-  isPlayingIntro?: boolean;
-  skipAllIntros?: () => void;
-  intros?: BaseItemDto[];
 }
 
 export const Controls: FC<Props> = ({
@@ -105,9 +101,6 @@ export const Controls: FC<Props> = ({
   getTechnicalInfo,
   playMethod,
   transcodeReasons,
-  isPlayingIntro = false,
-  skipAllIntros,
-  intros = [],
 }) => {
   const offline = useOfflineMode();
   const { settings, updateSettings } = useSettings();
@@ -561,9 +554,6 @@ export const Controls: FC<Props> = ({
               trickPlayUrl={trickPlayUrl}
               trickplayInfo={trickplayInfo}
               time={isSliding || showRemoteBubble ? time : remoteTime}
-              isPlayingIntro={isPlayingIntro}
-              skipAllIntros={skipAllIntros}
-              intros={intros}
             />
           </Animated.View>
         </>

hooks/useIntroPlayback.ts

@@ -1,46 +0,0 @@
-import type { Api } from "@jellyfin/sdk";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useEffect, useState } from "react";
-import { getIntros } from "@/utils/intros";
-
-interface UseIntroPlaybackProps {
-  api: Api | null;
-  itemId: string | null;
-  userId?: string;
-}
-
-export function useIntroPlayback({
-  api,
-  itemId,
-  userId,
-}: UseIntroPlaybackProps) {
-  const [intros, setIntros] = useState<BaseItemDto[]>([]);
-  const [isPlayingIntro, setIsPlayingIntro] = useState(false);
-
-  useEffect(() => {
-    async function fetchIntros() {
-      if (!api || !itemId) return;
-
-      const introItems = await getIntros(api, itemId, userId);
-      setIntros(introItems);
-      // Set isPlayingIntro to true when intros are available
-      setIsPlayingIntro(introItems.length > 0);
-    }
-
-    fetchIntros();
-  }, [api, itemId, userId]);
-
-  // Only play the first intro if intros are available.. might be nice to configure this at some point with tags or something 🤷‍♂️
-  const currentIntro = intros.length > 0 ? intros[0] : null;
-
-  const skipAllIntros = () => {
-    setIsPlayingIntro(false);
-  };
-
-  return {
-    intros,
-    currentIntro,
-    isPlayingIntro,
-    skipAllIntros,
-  };
-}

hooks/useRefetchHomeOnForeground.ts

@@ -0,0 +1,32 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { AppState } from "react-native";
+
+/**
+ * Refetches active home queries on mount (cold start) and whenever
+ * the app returns to the foreground from background.
+ */
+export function useRefetchHomeOnForeground() {
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    // On mount (cold start), use cancelRefetch: false so we don't cancel
+    // an in-flight initial fetch that React Query already started.
+    queryClient.refetchQueries(
+      { queryKey: ["home"], type: "active" },
+      { cancelRefetch: false },
+    );
+
+    const subscription = AppState.addEventListener("change", (state) => {
+      if (state === "active") {
+        // On foreground return, force a fresh refetch
+        queryClient.refetchQueries(
+          { queryKey: ["home"], type: "active" },
+          { cancelRefetch: true },
+        );
+      }
+    });
+
+    return () => subscription.remove();
+  }, [queryClient]);
+}

utils/intros.ts

@@ -1,28 +0,0 @@
-import type { Api } from "@jellyfin/sdk";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
-
-/**
- * Fetches intro items for a given media item using the Jellyfin SDK
- * @param api - The Jellyfin API instance
- * @param itemId - The ID of the media item
- * @param userId - Optional user ID
- * @returns Promise<BaseItemDto[]> - Array of intro items
- */
-export async function getIntros(
-  api: Api,
-  itemId: string,
-  userId?: string,
-): Promise<BaseItemDto[]> {
-  try {
-    const response = await getUserLibraryApi(api).getIntros({
-      itemId,
-      userId,
-    });
-
-    return response.data.Items || [];
-  } catch (error) {
-    console.error("Error fetching intros:", error);
-    return [];
-  }
-}