Merge branch 'develop' into fix/ui-headers-and-logs

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

@@ -73,7 +73,6 @@ export default function IndexLayout() {
           headerLeft: () => (
             <Pressable
               onPress={() => _router.back()}
-              className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />
@@ -158,7 +157,6 @@ export default function IndexLayout() {
           headerLeft: () => (
             <Pressable
               onPress={() => _router.back()}
-              className='pl-0.5'
               style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
             >
               <Feather name='chevron-left' size={28} color='white' />

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/(auth)/(tabs)/(home)/settings/logs/page.tsx

@@ -1,4 +1,6 @@
+import { Ionicons } from "@expo/vector-icons";
 import { File, Paths } from "expo-file-system";
+import { requireOptionalNativeModule } from "expo-modules-core";
 import { useNavigation } from "expo-router";
 import type * as SharingType from "expo-sharing";
 import { useCallback, useEffect, useId, useMemo, useState } from "react";
@@ -6,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import Collapsible from "react-native-collapsible";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { Loader } from "@/components/Loader";
@@ -72,6 +75,25 @@ export default function Page() {
     }
   }, [filteredLogs, Sharing]);
 
+  const copyLog = useCallback(
+    async (log: NonNullable<typeof logs>[number]) => {
+      // Skip on builds that don't ship the expo-clipboard native module
+      // (probe returns null instead of throwing); same guard as Quick Connect.
+      if (!requireOptionalNativeModule("ExpoClipboard")) return;
+      const Clipboard = await import("expo-clipboard");
+      const text = [
+        `[${log.level}] ${new Date(log.timestamp).toLocaleString()}`,
+        log.message,
+        log.data ? JSON.stringify(log.data, null, 2) : null,
+      ]
+        .filter(Boolean)
+        .join("\n");
+      await Clipboard.setStringAsync(text);
+      toast.success(t("home.settings.logs.copied"));
+    },
+    [logs, t],
+  );
+
   useEffect(() => {
     if (Platform.isTV) return;
 
@@ -88,8 +110,15 @@ export default function Page() {
   }, [share, loading]);
 
   return (
-    <View className='flex-1'>
-      <View className='flex flex-row justify-end py-2 px-4 space-x-2'>
+    <ScrollView
+      // Like the sibling settings pages, let iOS auto-inset the content below the
+      // transparent header (no manual header-height math). The filter bar is a
+      // sticky header so it stays pinned just under the header while logs scroll.
+      contentInsetAdjustmentBehavior='automatic'
+      stickyHeaderIndices={[0]}
+      contentContainerStyle={{ paddingBottom: insets.bottom }}
+    >
+      <View className='flex flex-row justify-end py-2 px-4 space-x-2 bg-black'>
         <FilterButton
           id={orderFilterId}
           queryKey='log'
@@ -112,67 +141,77 @@ export default function Page() {
           multiple={true}
         />
       </View>
-      <ScrollView
-        className='pb-4 px-4'
-        contentContainerStyle={{ paddingBottom: insets.bottom }}
-      >
-        <View className='flex flex-col space-y-2'>
-          {filteredLogs?.map((log, index) => (
-            <View className='bg-neutral-900 rounded-xl p-3' key={index}>
-              <TouchableOpacity
-                disabled={!log.data}
-                onPress={() =>
-                  setState((v) => ({
-                    ...v,
-                    [log.timestamp]: !v[log.timestamp],
-                  }))
-                }
-              >
-                <View className='flex flex-row justify-between'>
-                  <Text
-                    className={`mb-1
+      <View className='flex flex-col space-y-2 px-4'>
+        {filteredLogs?.map((log, index) => (
+          <View className='bg-neutral-900 rounded-xl p-3' key={index}>
+            <TouchableOpacity
+              disabled={!log.data}
+              onPress={() =>
+                setState((v) => ({
+                  ...v,
+                  [log.timestamp]: !v[log.timestamp],
+                }))
+              }
+            >
+              <View className='flex flex-row justify-between'>
+                <Text
+                  className={`mb-1
                       ${log.level === "INFO" && "text-blue-500"}
                       ${log.level === "ERROR" && "text-red-500"}
                       ${log.level === "DEBUG" && "text-purple-500"}
                     `}
-                  >
-                    {log.level}
-                  </Text>
-
-                  <Text className='text-xs'>
-                    {new Date(log.timestamp).toLocaleString()}
-                  </Text>
-                </View>
-                <Text selectable className='text-xs'>
-                  {log.message}
+                >
+                  {log.level}
                 </Text>
-              </TouchableOpacity>
 
-              {log.data && (
-                <>
-                  {!state[log.timestamp] && (
-                    <Text className='text-xs mt-0.5'>
-                      {t("home.settings.logs.click_for_more_info")}
-                    </Text>
-                  )}
-                  <Collapsible collapsed={!state[log.timestamp]}>
-                    <View className='mt-2 flex flex-col space-y-2'>
-                      <ScrollView className='rounded-xl' style={codeBlockStyle}>
-                        <Text>{JSON.stringify(log.data, null, 2)}</Text>
-                      </ScrollView>
-                    </View>
-                  </Collapsible>
-                </>
+                <Text className='text-xs'>
+                  {new Date(log.timestamp).toLocaleString()}
+                </Text>
+              </View>
+              <Text className='text-xs'>{log.message}</Text>
+              {/* Keep the whole collapsed row tappable: the hint lives inside
+                  the toggle so tapping it expands too. */}
+              {log.data && !state[log.timestamp] && (
+                <Text className='text-xs mt-0.5'>
+                  {t("home.settings.logs.click_for_more_info")}
+                </Text>
               )}
-            </View>
-          ))}
-          {filteredLogs?.length === 0 && (
-            <Text className='opacity-50'>
-              {t("home.settings.logs.no_logs_available")}
-            </Text>
-          )}
-        </View>
-      </ScrollView>
-    </View>
+            </TouchableOpacity>
+
+            {log.data && (
+              <Collapsible collapsed={!state[log.timestamp]}>
+                <View className='mt-2 flex flex-col space-y-2'>
+                  <ScrollView
+                    className='rounded-xl'
+                    style={codeBlockStyle}
+                    nestedScrollEnabled
+                  >
+                    {/* Only the raw payload is selectable (per request); the
+                        header/message stay tap-to-toggle. */}
+                    <Text selectable>{JSON.stringify(log.data, null, 2)}</Text>
+                  </ScrollView>
+                  {!Platform.isTV && (
+                    <TouchableOpacity
+                      onPress={() => copyLog(log)}
+                      className='flex flex-row items-center self-end px-2 py-1'
+                    >
+                      <Ionicons name='copy-outline' size={16} color='white' />
+                      <Text className='text-xs ml-1'>
+                        {t("home.settings.logs.copy")}
+                      </Text>
+                    </TouchableOpacity>
+                  )}
+                </View>
+              </Collapsible>
+            )}
+          </View>
+        ))}
+        {filteredLogs?.length === 0 && (
+          <Text className='opacity-50'>
+            {t("home.settings.logs.no_logs_available")}
+          </Text>
+        )}
+      </View>
+    </ScrollView>
   );
 }

bun.lock

@@ -31,6 +31,7 @@
         "expo-brightness": "~56.0.5",
         "expo-build-properties": "~56.0.18",
         "expo-camera": "~56.0.8",
+        "expo-clipboard": "~56.0.4",
         "expo-constants": "~56.0.18",
         "expo-crypto": "~56.0.4",
         "expo-dev-client": "~56.0.20",
@@ -1001,6 +1002,8 @@
 
     "expo-camera": ["expo-camera@56.0.8", "", { "dependencies": { "barcode-detector": "^3.0.0" }, "peerDependencies": { "expo": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native-web"] }, "sha512-UDOpUUMisFRmCv1XQV1MJCKGAH2CsIC1Rs6P9Bbc6JLVmbxEKAd5dK68y6cScOdWURxVfJ0PRcjYnSuc8ayyIQ=="],
 
+    "expo-clipboard": ["expo-clipboard@56.0.4", "", { "peerDependencies": { "expo": "*", "react": "*", "react-native": "*" } }, "sha512-qb4DYlkiowHYHaUYVT2FN9nk/nI1xShXOUYsI7J9dVpQCOHcGFjCBPX1VAvEW4Ye4/Aagd6IuhOVAq/+scBOiA=="],
+
     "expo-constants": ["expo-constants@56.0.18", "", { "dependencies": { "@expo/env": "~2.3.0" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-8AMtbDGl/WVPnWlmbpGmvcdnNCy9E4PFnwdVwj600vljkMDPSxcAcjw8GVXEPk3PpZ+ngTqsrkltWyj0UKYAxw=="],
 
     "expo-crypto": ["expo-crypto@56.0.4", "", { "peerDependencies": { "expo": "*" } }, "sha512-fRNEhoXRXgAWBpe3/hq5X+KXTit3OZqdiAGts1YvNEUHQb+H5591mpPac0Yw+sZg9pXcrjRnzo5AxvZaENpc7g=="],

components/common/HeaderBackButton.tsx

@@ -1,4 +1,4 @@
-import { Ionicons } from "@expo/vector-icons";
+import { Feather } from "@expo/vector-icons";
 import { BlurView, type BlurViewProps } from "expo-blur";
 import { Platform } from "react-native";
 import { Pressable, type PressableProps } from "react-native-gesture-handler";
@@ -23,7 +23,7 @@ export const HeaderBackButton: React.FC<Props> = ({
         className='flex items-center justify-center w-9 h-9'
         {...pressableProps}
       >
-        <Ionicons name='arrow-back' size={24} color='white' />
+        <Feather name='chevron-left' size={28} color='white' />
       </Pressable>
     );
   }
@@ -36,10 +36,10 @@ export const HeaderBackButton: React.FC<Props> = ({
           intensity={100}
           className='overflow-hidden rounded-full p-2'
         >
-          <Ionicons
+          <Feather
             className='drop-shadow-2xl'
-            name='arrow-back'
-            size={24}
+            name='chevron-left'
+            size={28}
             color='white'
           />
         </BlurView>
@@ -49,13 +49,18 @@ export const HeaderBackButton: React.FC<Props> = ({
   return (
     <Pressable
       onPress={() => router.back()}
-      className=' rounded-full p-2'
+      // Match the Settings page back button: chevron flush to the edge with a
+      // 16px gap before the title (the old `p-2` pushed both arrow and title
+      // too far right). drop-shadow keeps it readable over images. hitSlop
+      // keeps the touch area at ~44dp now that the padding is gone.
+      style={{ marginRight: 16 }}
       {...pressableProps}
+      hitSlop={8}
     >
-      <Ionicons
+      <Feather
         className='drop-shadow-2xl'
-        name='arrow-back'
-        size={24}
+        name='chevron-left'
+        size={28}
         color='white'
       />
     </Pressable>

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/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,
-  },
-});

package.json

@@ -54,6 +54,7 @@
     "expo-brightness": "~56.0.5",
     "expo-build-properties": "~56.0.18",
     "expo-camera": "~56.0.8",
+    "expo-clipboard": "~56.0.4",
     "expo-constants": "~56.0.18",
     "expo-crypto": "~56.0.4",
     "expo-dev-client": "~56.0.20",

translations/en.json

@@ -137,7 +137,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 +300,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.",
@@ -410,7 +415,9 @@
         "click_for_more_info": "Click for more info",
         "level": "Level",
         "no_logs_available": "No logs available",
-        "delete_all_logs": "Delete all logs"
+        "delete_all_logs": "Delete all logs",
+        "copy": "Copy",
+        "copied": "Copied to clipboard"
       },
       "languages": {
         "title": "Languages",

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,