Merge remote-tracking branch 'origin/develop' into fix/auth-session-and-login

A skipped or failed post-login account save only wrote a log entry, so
the user believed the account was saved. Both save paths (loginMutation
PIN guard and PendingAccountSaveModal catch) now show an error toast.

app/(auth)/(tabs)/(home)/settings.tv.tsx

@@ -854,6 +854,13 @@ export default function SettingsTV() {
               updateSettings({ mergeNextUpAndContinueWatching: value })
             }
           />
+          <TVSettingsToggle
+            label={t("home.settings.appearance.use_episode_images_next_up")}
+            value={settings.useEpisodeImagesForNextUp}
+            onToggle={(value) =>
+              updateSettings({ useEpisodeImagesForNextUp: value })
+            }
+          />
           <TVSettingsToggle
             label={t("home.settings.appearance.show_home_backdrop")}
             value={settings.showHomeBackdrop}

app/_layout.tsx

@@ -11,6 +11,7 @@ import { Image } from "expo-image";
 import { DarkTheme, ThemeProvider } from "expo-router/react-navigation";
 import { Platform } from "react-native";
 import { GlobalModal } from "@/components/GlobalModal";
+import { PendingAccountSaveModal } from "@/components/PendingAccountSaveModal";
 import { enableTVMenuKeyInterception } from "@/hooks/useTVBackHandler";
 import i18n from "@/i18n";
 import { DownloadProvider } from "@/providers/DownloadProvider";
@@ -551,6 +552,7 @@ function Layout() {
                                   closeButton
                                 />
                                 {!Platform.isTV && <GlobalModal />}
+                                {!Platform.isTV && <PendingAccountSaveModal />}
                               </ThemeProvider>
                             </IntroSheetProvider>
                           </BottomSheetModalProvider>

components/PendingAccountSaveModal.tsx

@@ -0,0 +1,52 @@
+import { useAtom, useAtomValue } from "jotai";
+import type React from "react";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform } from "react-native";
+import { toast } from "sonner-native";
+import { SaveAccountModal } from "@/components/SaveAccountModal";
+import {
+  pendingAccountSaveAtom,
+  useJellyfin,
+  userAtom,
+} from "@/providers/JellyfinProvider";
+import { writeErrorLog } from "@/utils/log";
+
+/**
+ * Post-login save-account prompt. Login flows (password or Quick Connect)
+ * only flag the intent via pendingAccountSaveAtom; the protection picker
+ * shows here, AFTER the session is authorized — the login screen itself
+ * unmounts as soon as the user is set, so it can't host the modal.
+ */
+export const PendingAccountSaveModal: React.FC = () => {
+  const [pending, setPending] = useAtom(pendingAccountSaveAtom);
+  const user = useAtomValue(userAtom);
+  const { saveCurrentAccount } = useJellyfin();
+  const { t } = useTranslation();
+
+  // A logout before answering drops the intent — it must not resurface on
+  // the next (possibly different) login.
+  useEffect(() => {
+    if (!user && pending) setPending(null);
+  }, [user, pending, setPending]);
+
+  if (Platform.isTV) return null;
+
+  return (
+    <SaveAccountModal
+      visible={!!pending && !!user}
+      username={user?.Name ?? ""}
+      onClose={() => setPending(null)}
+      onSave={(securityType, pinCode) => {
+        const serverName = pending?.serverName;
+        setPending(null);
+        saveCurrentAccount({ securityType, pinCode, serverName }).catch(
+          (error) => {
+            writeErrorLog(`Failed to save account: ${error?.message ?? error}`);
+            toast.error(t("save_account.not_saved"));
+          },
+        );
+      }}
+    />
+  );
+};

components/home/Home.tsx

@@ -39,7 +39,11 @@ import { useRefreshLibraryOnFocus } from "@/hooks/useRefreshLibraryOnFocus";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useDownload } from "@/providers/DownloadProvider";
 import { useIntroSheet } from "@/providers/IntroSheetProvider";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import {
+  apiAtom,
+  pendingAccountSaveAtom,
+  userAtom,
+} from "@/providers/JellyfinProvider";
 import { SortByOption, SortOrderOption } from "@/utils/atoms/filters";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
@@ -89,6 +93,9 @@ const HomeMobile = () => {
   const invalidateCache = useInvalidatePlaybackProgressCache();
   const [loadedSections, setLoadedSections] = useState<Set<string>>(new Set());
   const { showIntro } = useIntroSheet();
+  // Gate the intro so it can't steal presentation from the post-login
+  // save-account sheet (both are BottomSheetModals): wait until no save is pending.
+  const pendingAccountSave = useAtomValue(pendingAccountSaveAtom);
 
   // Fallback refresh for newly added content when returning to the home screen
   // (primary path is the LibraryChanged WebSocket event).
@@ -97,7 +104,9 @@ const HomeMobile = () => {
   // Show intro modal on first launch
   useEffect(() => {
     const hasShownIntro = storage.getBoolean("hasShownIntro");
-    if (!hasShownIntro) {
+    // Defer while the save-account sheet is up; this effect re-runs and schedules
+    // the intro once the sheet is dismissed (pendingAccountSaveAtom cleared).
+    if (!hasShownIntro && !pendingAccountSave) {
       const timer = setTimeout(() => {
         showIntro();
       }, 1000);
@@ -106,7 +115,7 @@ const HomeMobile = () => {
         clearTimeout(timer);
       };
     }
-  }, [showIntro]);
+  }, [showIntro, pendingAccountSave]);
 
   useEffect(() => {
     if (isConnected && !prevIsConnected.current) {

components/home/InfiniteScrollingCollectionList.tsx

@@ -15,6 +15,7 @@ import {
 import { SectionHeader } from "@/components/common/SectionHeader";
 import { Text } from "@/components/common/Text";
 import MoviePoster from "@/components/posters/MoviePoster";
+import { useSettings } from "@/utils/atoms/settings";
 import { Colors } from "../../constants/Colors";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
@@ -85,6 +86,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
   }, [isSuccess, onLoaded]);
 
   const { t } = useTranslation();
+  const { settings } = useSettings();
 
   // Flatten all pages into a single array (and de-dupe by Id to avoid UI duplicates)
   const allItems = useMemo(() => {
@@ -186,7 +188,10 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
                 `}
               >
                 {item.Type === "Episode" && orientation === "horizontal" && (
-                  <ContinueWatchingPoster item={item} />
+                  <ContinueWatchingPoster
+                    item={item}
+                    useEpisodePoster={settings?.useEpisodeImagesForNextUp}
+                  />
                 )}
                 {item.Type === "Episode" && orientation === "vertical" && (
                   <SeriesPoster item={item} />

components/home/InfiniteScrollingCollectionList.tv.tsx

@@ -24,6 +24,7 @@ import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import { SortByOption, SortOrderOption } from "@/utils/atoms/filters";
+import { useSettings } from "@/utils/atoms/settings";
 import { scaleSize } from "@/utils/scaleSize";
 
 // Extra padding to accommodate scale animation (1.05x) and glow shadow
@@ -165,6 +166,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
     });
 
   const { t } = useTranslation();
+  const { settings } = useSettings();
 
   const allItems = useMemo(() => {
     const items = data?.pages.flat() ?? [];
@@ -231,6 +233,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
             hasTVPreferredFocus={isFirstItem}
             onFocus={() => handleItemFocus(item)}
             width={itemWidth}
+            preferEpisodeImage={settings?.useEpisodeImagesForNextUp}
           />
         </View>
       );
@@ -243,6 +246,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
       showItemActions,
       handleItemFocus,
       ITEM_GAP,
+      settings?.useEpisodeImagesForNextUp,
     ],
   );
 

components/home/ScrollingCollectionList.tsx

@@ -9,6 +9,7 @@ import { ScrollView, View, type ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { useInView } from "@/hooks/useInView";
+import { useSettings } from "@/utils/atoms/settings";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import { ItemCardText } from "../ItemCardText";
@@ -50,6 +51,7 @@ export const ScrollingCollectionList: React.FC<Props> = ({
   });
 
   const { t } = useTranslation();
+  const { settings } = useSettings();
 
   // Show skeleton if loading OR if lazy loading is enabled and not in view yet
   const shouldShowSkeleton = isLoading || (enableLazyLoading && !isInView);
@@ -108,7 +110,10 @@ export const ScrollingCollectionList: React.FC<Props> = ({
                 `}
               >
                 {item.Type === "Episode" && orientation === "horizontal" && (
-                  <ContinueWatchingPoster item={item} />
+                  <ContinueWatchingPoster
+                    item={item}
+                    useEpisodePoster={settings?.useEpisodeImagesForNextUp}
+                  />
                 )}
                 {item.Type === "Episode" && orientation === "vertical" && (
                   <SeriesPoster item={item} />

components/login/Login.tsx

@@ -3,7 +3,7 @@ import type { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { t } from "i18next";
-import { useAtomValue } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import { useCallback, useEffect, useState } from "react";
 import {
   Alert,
@@ -21,13 +21,14 @@ import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import JellyfinServerDiscovery from "@/components/JellyfinServerDiscovery";
 import { PreviousServersList } from "@/components/PreviousServersList";
-import { SaveAccountModal } from "@/components/SaveAccountModal";
 import { Colors } from "@/constants/Colors";
-import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
-import type {
-  AccountSecurityType,
-  SavedServer,
-} from "@/utils/secureCredentials";
+import {
+  apiAtom,
+  pendingAccountSaveAtom,
+  useJellyfin,
+  userAtom,
+} from "@/providers/JellyfinProvider";
+import type { SavedServer } from "@/utils/secureCredentials";
 
 const CredentialsSchema = z.object({
   username: z.string().min(1, t("login.username_required")),
@@ -35,6 +36,7 @@ const CredentialsSchema = z.object({
 
 export const Login: React.FC = () => {
   const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
   const navigation = useNavigation();
   const params = useLocalSearchParams();
   const {
@@ -45,6 +47,7 @@ export const Login: React.FC = () => {
     loginWithSavedCredential,
     loginWithPassword,
   } = useJellyfin();
+  const setPendingAccountSave = useSetAtom(pendingAccountSaveAtom);
 
   const {
     apiUrl: _apiUrl,
@@ -64,13 +67,24 @@ export const Login: React.FC = () => {
     password: _password || "",
   });
 
-  // Save account state
+  // Save account state — only the intent lives here; the protection picker is
+  // the global PendingAccountSaveModal, shown after the login succeeds.
   const [saveAccount, setSaveAccount] = useState(false);
-  const [showSaveModal, setShowSaveModal] = useState(false);
-  const [pendingLogin, setPendingLogin] = useState<{
-    username: string;
-    password: string;
-  } | null>(null);
+
+  // Tracks an in-flight Quick Connect attempt (code issued, provider polling).
+  const [quickConnectActive, setQuickConnectActive] = useState(false);
+
+  // A Quick Connect login with "save account" on flags the post-login save:
+  // the protection picker shows globally once the session exists (this screen
+  // unmounts on login, so it can't host the modal).
+  useEffect(() => {
+    if (user) {
+      if (quickConnectActive && saveAccount) {
+        setPendingAccountSave({ serverName });
+      }
+      setQuickConnectActive(false);
+    }
+  }, [user]);
 
   // Handle URL params for server connection
   useEffect(() => {
@@ -117,29 +131,22 @@ export const Login: React.FC = () => {
     const result = CredentialsSchema.safeParse(credentials);
     if (!result.success) return;
 
-    if (saveAccount) {
-      setPendingLogin({
-        username: credentials.username,
-        password: credentials.password,
-      });
-      setShowSaveModal(true);
-    } else {
-      await performLogin(credentials.username, credentials.password);
+    const ok = await performLogin(credentials.username, credentials.password);
+    // The protection picker shows AFTER a successful login (global modal) —
+    // never for a failed one.
+    if (ok && saveAccount) {
+      setPendingAccountSave({ serverName });
     }
   };
 
   const performLogin = async (
     username: string,
     password: string,
-    options?: {
-      saveAccount?: boolean;
-      securityType?: AccountSecurityType;
-      pinCode?: string;
-    },
-  ) => {
+  ): Promise<boolean> => {
     setLoading(true);
     try {
-      await login(username, password, serverName, options);
+      await login(username, password, serverName);
+      return true;
     } catch (error) {
       if (error instanceof Error) {
         Alert.alert(t("login.connection_failed"), error.message);
@@ -149,23 +156,9 @@ export const Login: React.FC = () => {
           t("login.an_unexpected_error_occurred"),
         );
       }
+      return false;
     } finally {
       setLoading(false);
-      setPendingLogin(null);
-    }
-  };
-
-  const handleSaveAccountConfirm = async (
-    securityType: AccountSecurityType,
-    pinCode?: string,
-  ) => {
-    setShowSaveModal(false);
-    if (pendingLogin) {
-      await performLogin(pendingLogin.username, pendingLogin.password, {
-        saveAccount: true,
-        securityType,
-        pinCode,
-      });
     }
   };
 
@@ -259,6 +252,7 @@ export const Login: React.FC = () => {
     try {
       const code = await initiateQuickConnect();
       if (code) {
+        setQuickConnectActive(true);
         Alert.alert(
           t("login.quick_connect"),
           t("login.enter_code_to_login", { code: code }),
@@ -443,16 +437,6 @@ export const Login: React.FC = () => {
           </View>
         )}
       </KeyboardAvoidingView>
-
-      <SaveAccountModal
-        visible={showSaveModal}
-        onClose={() => {
-          setShowSaveModal(false);
-          setPendingLogin(null);
-        }}
-        onSave={handleSaveAccountConfirm}
-        username={pendingLogin?.username || credentials.username}
-      />
     </SafeAreaView>
   );
 };

components/settings/AppearanceSettings.tsx

@@ -27,6 +27,7 @@ export const AppearanceSettings: React.FC = () => {
       <ListGroup title={t("home.settings.appearance.title")} className=''>
         <ListItem
           title={t("home.settings.other.show_custom_menu_links")}
+          subtitle={t("home.settings.other.show_custom_menu_links_hint")}
           disabled={pluginSettings?.showCustomMenuLinks?.locked}
           onPress={() =>
             Linking.openURL(
@@ -44,6 +45,9 @@ export const AppearanceSettings: React.FC = () => {
         </ListItem>
         <ListItem
           title={t("home.settings.appearance.merge_next_up_continue_watching")}
+          subtitle={t(
+            "home.settings.appearance.merge_next_up_continue_watching_hint",
+          )}
         >
           <Switch
             value={settings.mergeNextUpAndContinueWatching}
@@ -52,15 +56,32 @@ export const AppearanceSettings: React.FC = () => {
             }
           />
         </ListItem>
+        <ListItem
+          title={t("home.settings.appearance.use_episode_images_next_up")}
+          subtitle={t(
+            "home.settings.appearance.use_episode_images_next_up_hint",
+          )}
+        >
+          <Switch
+            value={settings.useEpisodeImagesForNextUp}
+            onValueChange={(value) =>
+              updateSettings({ useEpisodeImagesForNextUp: value })
+            }
+          />
+        </ListItem>
         <ListItem
           onPress={() =>
             router.push("/settings/appearance/hide-libraries/page")
           }
           title={t("home.settings.other.hide_libraries")}
+          subtitle={t("home.settings.other.select_libraries_you_want_to_hide")}
           showArrow
         />
         <ListItem
           title={t("home.settings.appearance.hide_remote_session_button")}
+          subtitle={t(
+            "home.settings.appearance.hide_remote_session_button_hint",
+          )}
         >
           <Switch
             value={settings.hideRemoteSessionButton}

components/tv/TVPosterCard.tsx

@@ -72,6 +72,9 @@ export interface TVPosterCardProps {
 
   /** Custom image URL getter - if not provided, uses smart URL logic */
   imageUrlGetter?: (item: BaseItemDto) => string | undefined;
+
+  /** For horizontal episodes, prefer the episode's own image over the series thumb */
+  preferEpisodeImage?: boolean;
 }
 
 /**
@@ -108,6 +111,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
   glowColor = "white",
   scaleAmount = 1.05,
   imageUrlGetter,
+  preferEpisodeImage = false,
 }) => {
   const api = useAtomValue(apiAtom);
   const posterSizes = useScaledTVPosterSizes();
@@ -139,6 +143,10 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
     if (orientation === "horizontal") {
       // Episode: prefer series thumb image for consistent look (like hero section)
       if (item.Type === "Episode") {
+        // Opt-in: use the episode's own image instead of the series thumb.
+        if (preferEpisodeImage && item.ImageTags?.Primary) {
+          return `${api.basePath}/Items/${item.Id}/Images/Primary?fillHeight=600&quality=80&tag=${item.ImageTags.Primary}`;
+        }
         // First try parent/series thumb (horizontal series artwork).
         // Matched pair: ParentThumbItemId owns the Thumb tag, not ParentBackdropItemId.
         if (item.ParentThumbItemId && item.ParentThumbImageTag) {
@@ -174,7 +182,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
       item,
       width: width * 2, // 2x for quality on large screens
     });
-  }, [api, item, orientation, width, imageUrlGetter]);
+  }, [api, item, orientation, width, imageUrlGetter, preferEpisodeImage]);
 
   // Progress calculation
   const progress = useMemo(() => {

components/video-player/controls/BottomControls.tsx

@@ -15,6 +15,7 @@ import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import { useSettings } from "@/utils/atoms/settings";
 import { chapterMarkers, chapterNameAt } from "@/utils/chapters";
 import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
+import SkipButton from "./SkipButton";
 import { TimeDisplay } from "./TimeDisplay";
 import { TrickplayBubble } from "./TrickplayBubble";
 
@@ -33,8 +34,11 @@ interface BottomControlsProps {
   showRemoteBubble: boolean;
   currentTime: number;
   remainingTime: number;
+  showSkipButton: boolean;
   showSkipCreditButton: boolean;
   hasContentAfterCredits: boolean;
+  skipIntro: () => void;
+  skipCredit: () => void;
   nextItem?: BaseItemDto | null;
   handleNextEpisodeAutoPlay: () => void;
   handleNextEpisodeManual: () => void;
@@ -82,8 +86,11 @@ export const BottomControls: FC<BottomControlsProps> = ({
   showRemoteBubble,
   currentTime,
   remainingTime,
+  showSkipButton,
   showSkipCreditButton,
   hasContentAfterCredits,
+  skipIntro,
+  skipCredit,
   nextItem,
   handleNextEpisodeAutoPlay,
   handleNextEpisodeManual,
@@ -173,11 +180,21 @@ export const BottomControls: FC<BottomControlsProps> = ({
           ) : null}
         </View>
         <View className='flex flex-row items-center space-x-2 shrink-0'>
-          {/* Smart Skip Credits behavior (drives Next Episode timing):
-              - "Skip Credits" button itself is rendered in SkipSegmentOverlay
-                (independent of controls visibility).
-              - "Next Episode" shows when credits extend to video end AND a next
-                episode exists. */}
+          <SkipButton
+            showButton={showSkipButton}
+            onPress={skipIntro}
+            buttonText='Skip Intro'
+          />
+          {/* Smart Skip Credits behavior:
+              - Show "Skip Credits" if there's content after credits OR no next episode
+              - Show "Next Episode" if credits extend to video end AND next episode exists */}
+          <SkipButton
+            showButton={
+              showSkipCreditButton && (hasContentAfterCredits || !nextItem)
+            }
+            onPress={skipCredit}
+            buttonText='Skip Credits'
+          />
           {settings.autoPlayNextEpisode !== false &&
             (settings.maxAutoPlayEpisodeCount.value === -1 ||
               settings.autoPlayEpisodeCount <

components/video-player/controls/Controls.tsx

@@ -38,7 +38,6 @@ import { useRemoteControl } from "./hooks/useRemoteControl";
 import { useVideoNavigation } from "./hooks/useVideoNavigation";
 import { useVideoSlider } from "./hooks/useVideoSlider";
 import { useVideoTime } from "./hooks/useVideoTime";
-import { SkipSegmentOverlay } from "./SkipSegmentOverlay";
 import { TechnicalInfoOverlay } from "./TechnicalInfoOverlay";
 import { useControlsTimeout } from "./useControlsTimeout";
 import { PlaybackSpeedScope } from "./utils/playback-speed-settings";
@@ -339,16 +338,6 @@ export const Controls: FC<Props> = ({
       maxMs,
     );
 
-  // Whether the "Next Episode" countdown will actually be rendered. The Skip
-  // Credits button yields to it only when this is true; if autoplay is
-  // disabled or its episode limit is reached, Skip Credits must stay available
-  // (mirrors the NextEpisodeCountDownButton mount gate in BottomControls).
-  const willShowNextEpisode =
-    !!nextItem &&
-    settings.autoPlayNextEpisode !== false &&
-    (settings.maxAutoPlayEpisodeCount.value === -1 ||
-      settings.autoPlayEpisodeCount < settings.maxAutoPlayEpisodeCount.value);
-
   const goToItemCommon = useCallback(
     (item: BaseItemDto) => {
       if (!item || !settings) {
@@ -581,8 +570,11 @@ export const Controls: FC<Props> = ({
               showRemoteBubble={showRemoteBubble}
               currentTime={currentTime}
               remainingTime={remainingTime}
+              showSkipButton={showSkipButton}
               showSkipCreditButton={showSkipCreditButton}
               hasContentAfterCredits={hasContentAfterCredits}
+              skipIntro={skipIntro}
+              skipCredit={skipCredit}
               nextItem={nextItem}
               handleNextEpisodeAutoPlay={handleNextEpisodeAutoPlay}
               handleNextEpisodeManual={handleNextEpisodeManual}
@@ -602,17 +594,6 @@ export const Controls: FC<Props> = ({
               time={isSliding || showRemoteBubble ? time : remoteTime}
             />
           </Animated.View>
-          {/* Skip Intro / Skip Credits float independently of the controls so
-              they're visible (and tappable) without summoning the controls. */}
-          <SkipSegmentOverlay
-            showSkipButton={showSkipButton}
-            showSkipCreditButton={showSkipCreditButton}
-            hasContentAfterCredits={hasContentAfterCredits}
-            willShowNextEpisode={willShowNextEpisode}
-            skipIntro={skipIntro}
-            skipCredit={skipCredit}
-            controlsVisible={showControls}
-          />
         </>
       )}
       {settings.maxAutoPlayEpisodeCount.value !== -1 && (

components/video-player/controls/SkipSegmentOverlay.tsx

@@ -1,125 +0,0 @@
-import type { FC } from "react";
-import { useEffect, useState } from "react";
-import { StyleSheet } from "react-native";
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
-import SkipButton from "./SkipButton";
-
-interface Props {
-  showSkipButton: boolean;
-  showSkipCreditButton: boolean;
-  hasContentAfterCredits: boolean;
-  willShowNextEpisode: boolean;
-  skipIntro: () => void;
-  skipCredit: () => void;
-  controlsVisible: boolean;
-}
-
-// Offsets are relative to the safe-area insets so they hold in both portrait
-// and landscape (the insets move with the notch / home indicator).
-//
-// Hidden: low, far-right — nothing else is drawn there, this is the familiar
-//         spot and was working fine.
-// Visible: shifted up (clear of the horizontal progress bar) and left (clear
-//          of the chapters icon), while staying below the vertical volume
-//          slider which sits at the vertical middle of the screen.
-const HIDDEN_BOTTOM = 24;
-const HIDDEN_RIGHT = 12;
-const VISIBLE_BOTTOM = 65;
-const VISIBLE_RIGHT = 42;
-const ANIM_DURATION = 250;
-
-// Keeps `value` true for `duration` ms after it turns false. SkipButton hides
-// itself instantly via a `hidden` (display:none) class, which would preempt
-// the parent's opacity fade-out — lagging the flag keeps the button rendered
-// (and visible) while the fade plays out.
-const useDelayedHide = (value: boolean, duration: number): boolean => {
-  const [display, setDisplay] = useState(value);
-  useEffect(() => {
-    if (value) {
-      setDisplay(true);
-      return;
-    }
-    const t = setTimeout(() => setDisplay(false), duration);
-    return () => clearTimeout(t);
-  }, [value, duration]);
-  return value || display;
-};
-
-/**
- * Floating Skip Intro / Skip Credits buttons shown independently of the
- * player controls. They appear on their own during an intro or credits segment
- * without the user having to summon the controls.
- */
-export const SkipSegmentOverlay: FC<Props> = ({
-  showSkipButton,
-  showSkipCreditButton,
-  hasContentAfterCredits,
-  willShowNextEpisode,
-  skipIntro,
-  skipCredit,
-  controlsVisible,
-}) => {
-  const insets = useControlsSafeAreaInsets();
-
-  const showCredit =
-    showSkipCreditButton && (hasContentAfterCredits || !willShowNextEpisode);
-  const visible = showSkipButton || showCredit;
-
-  // Drive each SkipButton with a lagged flag so it stays visible while the
-  // opacity fade-out plays, instead of disappearing the instant its segment
-  // ends. `visible` above still drives opacity/pointerEvents immediately.
-  const renderSkip = useDelayedHide(showSkipButton, ANIM_DURATION);
-  const renderCredit = useDelayedHide(showCredit, ANIM_DURATION);
-
-  const opacity = useSharedValue(visible ? 1 : 0);
-
-  useEffect(() => {
-    opacity.value = withTiming(visible ? 1 : 0, {
-      duration: ANIM_DURATION,
-      easing: Easing.out(Easing.quad),
-    });
-  }, [visible, opacity]);
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-  }));
-
-  // Position is recomputed on render (no slide animation) so the button never
-  // sweeps through an overlap zone while the controls toggle.
-  const bottom =
-    insets.bottom + (controlsVisible ? VISIBLE_BOTTOM : HIDDEN_BOTTOM);
-  const right = insets.right + (controlsVisible ? VISIBLE_RIGHT : HIDDEN_RIGHT);
-
-  return (
-    <Animated.View
-      style={[styles.container, { right, bottom }, animatedStyle]}
-      pointerEvents={visible ? "box-none" : "none"}
-    >
-      <SkipButton
-        showButton={renderSkip}
-        onPress={skipIntro}
-        buttonText='Skip Intro'
-      />
-      <SkipButton
-        showButton={renderCredit}
-        onPress={skipCredit}
-        buttonText='Skip Credits'
-      />
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    flexDirection: "row",
-    gap: 8,
-    zIndex: 15,
-  },
-});

providers/JellyfinProvider.tsx

@@ -15,12 +15,14 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
 import { useTranslation } from "react-i18next";
 import { AppState, Platform } from "react-native";
 import { getDeviceNameSync } from "react-native-device-info";
 import uuid from "react-native-uuid";
+import { toast } from "sonner-native";
 import useRouter from "@/hooks/useAppRouter";
 import { useInterval } from "@/hooks/useInterval";
 import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
@@ -91,6 +93,12 @@ export const apiAtom = atom<Api | null>(initialApi);
 export const userAtom = atom<UserDto | null>(initialUser);
 export const wsAtom = atom<WebSocket | null>(null);
 export const cacheVersionAtom = atom<number>(0);
+// Set by a login flow that wants the account saved: the protection picker
+// shows AFTER the session is authorized (the login screen unmounts on
+// success, so the modal lives at the root — see PendingAccountSaveModal).
+export const pendingAccountSaveAtom = atom<{ serverName?: string } | null>(
+  null,
+);
 
 interface LoginOptions {
   saveAccount?: boolean;
@@ -108,6 +116,11 @@ interface JellyfinContextValue {
     serverName?: string,
     options?: LoginOptions,
   ) => Promise<void>;
+  saveCurrentAccount: (options?: {
+    securityType?: AccountSecurityType;
+    pinCode?: string;
+    serverName?: string;
+  }) => Promise<void>;
   logout: () => Promise<void>;
   initiateQuickConnect: () => Promise<string | undefined>;
   stopQuickConnectPolling: () => void;
@@ -165,6 +178,69 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
   const { clearAllJellyseerData, setJellyseerrUser } = useJellyseerr();
   const queryClient = useQueryClient();
 
+  // --- Session-expiry handling ----------------------------------------------
+  // When the server revokes the token (e.g. the device/session is deleted), a
+  // 401 can surface from any authenticated request. Without central handling
+  // the dead token stays in storage, so every reload re-fires authed calls →
+  // 401 spam + uncaught rejections, and the app lingers in a half-authenticated
+  // state. A single response interceptor on the authenticated api clears the
+  // session on the first 401 so the app drops cleanly to the login screen.
+  const sessionExpiredRef = useRef(false);
+
+  // Shared teardown for manual logout AND forced session expiry — keeping it
+  // in one place prevents the two paths from drifting (a 401 expiry must wipe
+  // plugin settings / Jellyseerr state too, or the next login on the same
+  // device inherits the previous user's data).
+  // Saved credentials are kept so the user can quick-login again.
+  const clearSessionState = useCallback(async () => {
+    // All synchronous teardown first: if the async Jellyseerr cleanup below
+    // fails or resolves late (user may already be re-authenticating), the
+    // session/cache state is already gone.
+    storage.remove("token");
+    storage.remove("user");
+    storage.remove("REACT_QUERY_OFFLINE_CACHE");
+    clearTVDiscoverySafely();
+    setUser(null);
+    setApi(null);
+    setPluginSettings(undefined);
+    queryClient.clear();
+
+    try {
+      await clearAllJellyseerData();
+    } catch (e) {
+      writeErrorLog(
+        `Failed to clear Jellyseerr data: ${e instanceof Error ? e.message : e}`,
+      );
+    }
+  }, [setUser, setApi, setPluginSettings, clearAllJellyseerData, queryClient]);
+
+  const handleSessionExpired = useCallback(() => {
+    if (sessionExpiredRef.current) return; // run once per session
+    sessionExpiredRef.current = true;
+    clearSessionState().catch((e) =>
+      writeErrorLog(`Session-expiry cleanup failed: ${e?.message ?? e}`),
+    );
+  }, [clearSessionState]);
+
+  useEffect(() => {
+    // Only guard an authenticated session. A pre-auth api (login screen) keeps
+    // its own handling — a wrong-password 401 is not a session expiry.
+    if (!api?.accessToken) return;
+    sessionExpiredRef.current = false; // re-arm for this fresh session
+    const interceptorId = api.axiosInstance.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        if (error?.response?.status === 401) {
+          handleSessionExpired();
+        }
+        return Promise.reject(error);
+      },
+    );
+    return () => {
+      api.axiosInstance.interceptors.response.eject(interceptorId);
+    };
+  }, [api, handleSessionExpired]);
+
   const headers = useMemo(() => {
     if (!deviceId) return {};
     return {
@@ -307,6 +383,40 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     },
   });
 
+  // Persist the CURRENT session to secure storage — used by the post-login
+  // save-account modal (the protection picker shows AFTER a successful
+  // login, for both the password and Quick Connect flows).
+  const saveCurrentAccount = useCallback(
+    async (options?: {
+      securityType?: AccountSecurityType;
+      pinCode?: string;
+      serverName?: string;
+    }) => {
+      const token = storage.getString("token");
+      if (!api?.basePath || !user?.Id || !user.Name || !token) return;
+      const securityType = options?.securityType || "none";
+      let pinHash: string | undefined;
+      if (securityType === "pin") {
+        // Never persist a "pin" credential without its hash — it would be
+        // impossible to unlock.
+        if (!options?.pinCode) throw new Error("PIN code is required");
+        pinHash = await hashPIN(options.pinCode);
+      }
+      await saveAccountCredential({
+        serverUrl: api.basePath,
+        serverName: options?.serverName || "",
+        token,
+        userId: user.Id,
+        username: user.Name,
+        savedAt: Date.now(),
+        securityType,
+        pinHash,
+        primaryImageTag: user.PrimaryImageTag ?? undefined,
+      });
+    },
+    [api?.basePath, user],
+  );
+
   const loginMutation = useMutation({
     mutationFn: async ({
       username,
@@ -338,18 +448,25 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
             if (securityType === "pin" && options.pinCode) {
               pinHash = await hashPIN(options.pinCode);
             }
-
-            await saveAccountCredential({
-              serverUrl: api.basePath,
-              serverName: serverName || "",
-              token: auth.data.AccessToken,
-              userId: auth.data.User.Id || "",
-              username,
-              savedAt: Date.now(),
-              securityType,
-              pinHash,
-              primaryImageTag: auth.data.User.PrimaryImageTag ?? undefined,
-            });
+            if (securityType === "pin" && !pinHash) {
+              // Never persist a "pin" credential without its hash — it would be
+              // impossible to unlock. Skip the save rather than failing a login
+              // that already succeeded, and tell the user it didn't happen.
+              writeErrorLog("Account save skipped: PIN required but missing");
+              toast.error(t("save_account.not_saved"));
+            } else {
+              await saveAccountCredential({
+                serverUrl: api.basePath,
+                serverName: serverName || "",
+                token: auth.data.AccessToken,
+                userId: auth.data.User.Id || "",
+                username,
+                savedAt: Date.now(),
+                securityType,
+                pinHash,
+                primaryImageTag: auth.data.User.PrimaryImageTag ?? undefined,
+              });
+            }
           }
 
           const recentPluginSettings = await refreshStreamyfinPluginSettings();
@@ -409,19 +526,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
           writeErrorLog("Failed to delete expo push token for device"),
         );
 
-      storage.remove("token");
-      storage.remove("user");
-      clearTVDiscoverySafely();
-      setUser(null);
-      setApi(null);
-      setPluginSettings(undefined);
-      await clearAllJellyseerData();
-
-      // Clear React Query cache to prevent data from previous account lingering
-      queryClient.clear();
-      storage.remove("REACT_QUERY_OFFLINE_CACHE");
-
-      // Note: We keep saved credentials for quick switching back
+      await clearSessionState();
     },
     onError: (error) => {
       console.error("Logout failed:", error);
@@ -509,7 +614,9 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       }
     },
     onError: (error) => {
-      console.error("Quick login failed:", error);
+      // Expected, handled case (e.g. revoked token → "Session Expired", or
+      // server unreachable): the UI surfaces the message, so warn, don't error.
+      console.warn("Quick login failed:", error);
     },
   });
 
@@ -620,54 +727,66 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
             setUser(storedUser);
           }
 
-          // Dismiss splash screen with cached data immediately,
-          // fetch fresh user data in the background
-          setInitialLoaded(true);
+          // Validate the token and refresh user data in the background. Do NOT
+          // await this: the Jellyfin SDK axios instance has no timeout, so when
+          // offline this call hangs for the full OS TCP timeout (75-120s) and
+          // blocks splash dismissal. The cached storedUser (set above) is enough
+          // to render; on success we just refresh it.
+          getUserApi(apiInstance)
+            .getCurrentUser()
+            .then(async (response) => {
+              // The response can resolve long after startup (no axios timeout).
+              // If the session changed meanwhile (logout, account switch), drop
+              // it instead of repopulating a stale user / re-saving credentials.
+              if (getTokenFromStorage() !== token) return;
+              setUser(response.data);
 
-          try {
-            const response = await getUserApi(apiInstance).getCurrentUser();
-            setUser(response.data);
-
-            // Migrate current session to secure storage if not already saved
-            if (storedUser?.Id && storedUser?.Name) {
-              const existingCredential = await getAccountCredential(
-                serverUrl,
-                storedUser.Id,
-              );
-              if (!existingCredential) {
-                await saveAccountCredential({
+              // Migrate current session to secure storage if not already saved
+              if (storedUser?.Id && storedUser?.Name) {
+                const existingCredential = await getAccountCredential(
                   serverUrl,
-                  serverName: "",
-                  token,
-                  userId: storedUser.Id,
-                  username: storedUser.Name,
-                  savedAt: Date.now(),
-                  securityType: "none",
-                  primaryImageTag: response.data.PrimaryImageTag ?? undefined,
-                });
-              } else if (
-                response.data.PrimaryImageTag !==
-                existingCredential.primaryImageTag
-              ) {
-                // Update image tag if it has changed
-                addAccountToServer(serverUrl, existingCredential.serverName, {
-                  userId: existingCredential.userId,
-                  username: existingCredential.username,
-                  securityType: existingCredential.securityType,
-                  savedAt: existingCredential.savedAt,
-                  primaryImageTag: response.data.PrimaryImageTag ?? undefined,
-                });
+                  storedUser.Id,
+                );
+                if (!existingCredential) {
+                  await saveAccountCredential({
+                    serverUrl,
+                    serverName: "",
+                    token,
+                    userId: storedUser.Id,
+                    username: storedUser.Name,
+                    savedAt: Date.now(),
+                    securityType: "none",
+                    primaryImageTag: response.data.PrimaryImageTag ?? undefined,
+                  });
+                } else if (
+                  response.data.PrimaryImageTag !==
+                  existingCredential.primaryImageTag
+                ) {
+                  // Update image tag if it has changed
+                  addAccountToServer(serverUrl, existingCredential.serverName, {
+                    userId: existingCredential.userId,
+                    username: existingCredential.username,
+                    securityType: existingCredential.securityType,
+                    savedAt: existingCredential.savedAt,
+                    primaryImageTag: response.data.PrimaryImageTag ?? undefined,
+                  });
+                }
               }
-            }
-          } catch (e) {
-            // Background fetch failed — app already rendered with cached data
-            console.warn("Background user fetch failed, using cached data:", e);
-          }
-        } else {
-          setInitialLoaded(true);
+            })
+            .catch((e) => {
+              // Expected, handled case (offline, or a token the server rejects —
+              // the UI prompts re-login): warn, don't error. Log only
+              // status/message — never the raw error (axios errors carry the
+              // request config incl. the Authorization header / token).
+              console.warn(
+                "Background user validation failed:",
+                e?.response?.status ?? e?.message ?? "unknown error",
+              );
+            });
         }
       } catch (e) {
         console.error(e);
+      } finally {
         setInitialLoaded(true);
       }
     };
@@ -681,6 +800,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     removeServer: () => removeServerMutation.mutateAsync(),
     login: (username, password, serverName, options) =>
       loginMutation.mutateAsync({ username, password, serverName, options }),
+    saveCurrentAccount,
     logout: () => logoutMutation.mutateAsync(),
     initiateQuickConnect,
     stopQuickConnectPolling,

translations/en.json

@@ -56,6 +56,7 @@
   "save_account": {
     "title": "Save account",
     "save_for_later": "Save this account",
+    "not_saved": "Account was not saved",
     "security_option": "Security option",
     "no_protection": "No protection",
     "no_protection_desc": "Quick login without authentication",
@@ -137,7 +138,11 @@
       "appearance": {
         "title": "Appearance",
         "merge_next_up_continue_watching": "Merge Continue watching & Next up",
+        "merge_next_up_continue_watching_hint": "Combine Continue Watching and Next Up into a single home row.",
+        "use_episode_images_next_up": "Use episode images for Next Up & Continue Watching",
+        "use_episode_images_next_up_hint": "Show each episode's own thumbnail in the Next Up and Continue Watching rows instead of the series image.",
         "hide_remote_session_button": "Hide remote session button",
+        "hide_remote_session_button_hint": "Hide the remote-sessions button from the home header.",
         "show_home_backdrop": "Dynamic home backdrop",
         "show_hero_carousel": "Hero carousel",
         "show_series_poster_on_episode": "Show series poster on episodes",
@@ -296,6 +301,7 @@
         },
         "safe_area_in_controls": "Safe area in controls",
         "show_custom_menu_links": "Show custom menu links",
+        "show_custom_menu_links_hint": "Show the custom links your server administrator added in the web config.",
         "show_large_home_carousel": "Show large home carousel (beta)",
         "hide_libraries": "Hide libraries",
         "select_libraries_you_want_to_hide": "Select the libraries you want to hide from the Library tab and home page sections.",

utils/atoms/settings.ts

@@ -274,6 +274,9 @@ export type Settings = {
   hideBrightnessSlider: boolean;
   usePopularPlugin: boolean;
   mergeNextUpAndContinueWatching: boolean;
+  // Use the episode's own image (instead of the series thumb) for the
+  // "Next Up" and "Continue Watching" home rows.
+  useEpisodeImagesForNextUp: boolean;
   // TV-specific settings
   showHomeBackdrop: boolean;
   showTVHeroCarousel: boolean;
@@ -382,6 +385,7 @@ export const defaultValues: Settings = {
   hideBrightnessSlider: false,
   usePopularPlugin: true,
   mergeNextUpAndContinueWatching: false,
+  useEpisodeImagesForNextUp: false,
   // TV-specific settings
   showHomeBackdrop: true,
   showTVHeroCarousel: true,