feat(tv): add scalable poster sizes synchronized with typography settings

This commit is contained in:
Fredrik Burmester
2026-01-26 18:04:22 +01:00
parent bbd7854287
commit d51cf47eb4
18 changed files with 176 additions and 104 deletions

View File

@@ -7,12 +7,11 @@ import { ProgressBar } from "@/components/common/ProgressBar";
import { Text } from "@/components/common/Text";
import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
import { WatchedIndicator } from "@/components/WatchedIndicator";
import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
import { useScaledTVTypography } from "@/constants/TVTypography";
import { apiAtom } from "@/providers/JellyfinProvider";
import { runtimeTicksToMinutes } from "@/utils/time";
export const TV_EPISODE_WIDTH = 340;
interface TVEpisodeCardProps {
episode: BaseItemDto;
hasTVPreferredFocus?: boolean;
@@ -34,6 +33,7 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
refSetter,
}) => {
const typography = useScaledTVTypography();
const posterSizes = useScaledTVPosterSizes();
const api = useAtomValue(apiAtom);
const thumbnailUrl = useMemo(() => {
@@ -68,7 +68,7 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
}, [episode.ParentIndexNumber, episode.IndexNumber]);
return (
<View style={{ width: TV_EPISODE_WIDTH, opacity: disabled ? 0.5 : 1 }}>
<View style={{ width: posterSizes.episode, opacity: disabled ? 0.5 : 1 }}>
<TVFocusablePoster
onPress={onPress}
hasTVPreferredFocus={hasTVPreferredFocus}
@@ -79,7 +79,7 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
>
<View
style={{
width: TV_EPISODE_WIDTH,
width: posterSizes.episode,
aspectRatio: 16 / 9,
borderRadius: 24,
overflow: "hidden",