mirror of
https://github.com/streamyfin/streamyfin.git
synced 2026-06-28 00:30:30 +01:00
8a781f2462
- Fix black episode thumbnails in the Next Up / Continue Watching rows: build the parent Thumb URL from the matched ParentThumbItemId + ParentThumbImageTag pair, instead of pairing ParentBackdropItemId with the thumb tag (different parent -> 404 -> black). Fixed on mobile (ContinueWatchingPoster) and TV (TVPosterCard, TVHeroCarousel). - Add a "Use episode images for Next Up & Continue Watching" setting (default off = series image, matching Jellyfin), wired into the home rows on mobile and TV. - Add helper descriptions under the Appearance settings rows.
104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
import { Ionicons } from "@expo/vector-icons";
|
|
import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
|
|
import { Image } from "expo-image";
|
|
import { useAtomValue } from "jotai";
|
|
import type React from "react";
|
|
import { useMemo } from "react";
|
|
import { View } from "react-native";
|
|
import { apiAtom } from "@/providers/JellyfinProvider";
|
|
import { ProgressBar } from "./common/ProgressBar";
|
|
import { WatchedIndicator } from "./WatchedIndicator";
|
|
|
|
type ContinueWatchingPosterProps = {
|
|
item: BaseItemDto;
|
|
useEpisodePoster?: boolean;
|
|
size?: "small" | "normal";
|
|
showPlayButton?: boolean;
|
|
};
|
|
|
|
const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
|
|
item,
|
|
useEpisodePoster = false,
|
|
size = "normal",
|
|
showPlayButton = false,
|
|
}) => {
|
|
const api = useAtomValue(apiAtom);
|
|
|
|
/**
|
|
* Get horizontal poster for movie and episode, with failover to primary.
|
|
*/
|
|
const url = useMemo(() => {
|
|
if (!api) {
|
|
return;
|
|
}
|
|
if (item.Type === "Episode" && useEpisodePoster) {
|
|
return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
|
|
}
|
|
if (item.Type === "Episode") {
|
|
// Matched pair: the parent that owns the Thumb (ParentThumbItemId), not the
|
|
// backdrop owner — otherwise the Thumb tag is requested on the wrong item → black.
|
|
if (item.ParentThumbItemId && item.ParentThumbImageTag) {
|
|
return `${api?.basePath}/Items/${item.ParentThumbItemId}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ParentThumbImageTag}`;
|
|
}
|
|
|
|
return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
|
|
}
|
|
if (item.Type === "Movie") {
|
|
if (item.ImageTags?.Thumb) {
|
|
return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ImageTags?.Thumb}`;
|
|
}
|
|
|
|
return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
|
|
}
|
|
if (item.Type === "Program") {
|
|
if (item.ImageTags?.Thumb) {
|
|
return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ImageTags?.Thumb}`;
|
|
}
|
|
|
|
return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
|
|
}
|
|
|
|
if (item.ImageTags?.Thumb) {
|
|
return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ImageTags?.Thumb}`;
|
|
}
|
|
|
|
return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
|
|
// useEpisodePoster in deps so flipping the setting re-computes the URL live
|
|
// (no app restart needed).
|
|
}, [item, useEpisodePoster]);
|
|
|
|
if (!url)
|
|
return <View className='aspect-video border border-neutral-800 w-44' />;
|
|
|
|
return (
|
|
<View
|
|
className={`
|
|
relative w-44 aspect-video rounded-lg overflow-hidden border border-neutral-800
|
|
${size === "small" ? "w-32" : "w-44"}
|
|
`}
|
|
>
|
|
<View className='w-full h-full flex items-center justify-center'>
|
|
<Image
|
|
key={item.Id}
|
|
id={item.Id}
|
|
source={{
|
|
uri: url,
|
|
}}
|
|
cachePolicy={"memory-disk"}
|
|
contentFit='cover'
|
|
className='w-full h-full'
|
|
/>
|
|
{showPlayButton && (
|
|
<View className='absolute inset-0 flex items-center justify-center'>
|
|
<Ionicons name='play-circle' size={40} color='white' />
|
|
</View>
|
|
)}
|
|
</View>
|
|
{!item.UserData?.Played && <WatchedIndicator item={item} />}
|
|
<ProgressBar item={item} />
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default ContinueWatchingPoster;
|