alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-03-15 05:46:29 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix: design

Browse Source
This commit is contained in:
Fredrik Burmester
2026-01-20 22:15:00 +01:00
parent 0353a718f3
commit 2a9f4c2885
8 changed files with 457 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/jellyseerr/discover/TVDiscoverSlide.tsx
View File

@@ -15,6 +15,7 @@ import {
useJellyseerr,
} from "@/hooks/useJellyseerr";
import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
import { MediaStatus } from "@/utils/jellyseerr/server/constants/media";
import type DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
import type {
MovieResult,
@@ -35,7 +36,7 @@ const TVDiscoverPoster: React.FC<TVDiscoverPosterProps> = ({
const router = useRouter();
const { jellyseerrApi, getTitle, getYear } = useJellyseerr();
const { focused, handleFocus, handleBlur, animatedStyle } =
useTVFocusAnimation({ scaleAmount: 1.08 });
useTVFocusAnimation({ scaleAmount: 1.05 });
const posterUrl = item.posterPath
? jellyseerrApi?.imageProxy(item.posterPath, "w342")
@@ -44,6 +45,10 @@ const TVDiscoverPoster: React.FC<TVDiscoverPosterProps> = ({
const title = getTitle(item);
const year = getYear(item);
const isInLibrary =
item.mediaInfo?.status === MediaStatus.AVAILABLE ||
item.mediaInfo?.status === MediaStatus.PARTIALLY_AVAILABLE;
const handlePress = () => {
router.push({
pathname: "/(auth)/(tabs)/(search)/jellyseerr/page",
@@ -65,23 +70,21 @@ const TVDiscoverPoster: React.FC<TVDiscoverPosterProps> = ({
style={[
animatedStyle,
{
width: 180,
width: 210,
shadowColor: "#fff",
shadowOffset: { width: 0, height: 0 },
shadowOpacity: focused ? 0.4 : 0,
shadowRadius: focused ? 12 : 0,
shadowOpacity: focused ? 0.6 : 0,
shadowRadius: focused ? 20 : 0,
},
]}
>
<View
style={{
width: 180,
aspectRatio: 2 / 3,
borderRadius: 12,
width: 210,
aspectRatio: 10 / 15,
borderRadius: 24,
overflow: "hidden",
backgroundColor: "rgba(255,255,255,0.1)",
borderWidth: focused ? 3 : 0,
borderColor: "#fff",
}}
>
{posterUrl ? (
@@ -107,13 +110,30 @@ const TVDiscoverPoster: React.FC<TVDiscoverPosterProps> = ({
/>
</View>
)}
{isInLibrary && (
<View
style={{
position: "absolute",
top: 8,
right: 8,
backgroundColor: "rgba(255,255,255,0.9)",
borderRadius: 14,
width: 28,
height: 28,
alignItems: "center",
justifyContent: "center",
}}
>
<Ionicons name='checkmark' size={18} color='black' />
</View>
)}
</View>
<Text
style={{
fontSize: TVTypography.callout,
color: focused ? "#fff" : "rgba(255,255,255,0.9)",
color: "#fff",
fontWeight: "600",
marginTop: 10,
marginTop: 12,
}}
numberOfLines={2}
>
@@ -122,10 +142,9 @@ const TVDiscoverPoster: React.FC<TVDiscoverPosterProps> = ({
{year && (
<Text
style={{
fontSize: 14,
color: focused
? "rgba(255,255,255,0.7)"
: "rgba(255,255,255,0.5)",
fontSize: TVTypography.callout,
color: "#9CA3AF",
marginTop: 2,
}}
>
{year}

247
components/jellyseerr/tv/TVJellyseerrPage.tsx
View File

@@ -10,7 +10,6 @@ import { useTranslation } from "react-i18next";
import {
Animated,
Dimensions,
FlatList,
Pressable,
ScrollView,
TVFocusGuideView,
@@ -61,7 +60,6 @@ interface TVCastCardProps {
};
imageProxy: (path: string, size?: string) => string;
onPress: () => void;
isFirst?: boolean;
refSetter?: (ref: View | null) => void;
}
@@ -69,7 +67,6 @@ const TVCastCard: React.FC<TVCastCardProps> = ({
person,
imageProxy,
onPress,
isFirst,
refSetter,
}) => {
const { focused, handleFocus, handleBlur, animatedStyle } =
@@ -85,7 +82,6 @@ const TVCastCard: React.FC<TVCastCardProps> = ({
onPress={onPress}
onFocus={handleFocus}
onBlur={handleBlur}
hasTVPreferredFocus={isFirst}
>
<Animated.View
style={[
@@ -174,6 +170,7 @@ interface TVSeasonCardProps {
canRequest: boolean;
disabled?: boolean;
onCardFocus?: () => void;
refSetter?: (ref: View | null) => void;
}
const TVSeasonCard: React.FC<TVSeasonCardProps> = ({
@@ -182,6 +179,7 @@ const TVSeasonCard: React.FC<TVSeasonCardProps> = ({
canRequest,
disabled = false,
onCardFocus,
refSetter,
}) => {
const { t } = useTranslation();
const { focused, handleFocus, handleBlur, animatedStyle } =
@@ -194,6 +192,7 @@ const TVSeasonCard: React.FC<TVSeasonCardProps> = ({
return (
<Pressable
ref={refSetter}
onPress={canRequest ? onPress : undefined}
onFocus={handleCardFocus}
onBlur={handleBlur}
@@ -205,7 +204,8 @@ const TVSeasonCard: React.FC<TVSeasonCardProps> = ({
animatedStyle,
{
minWidth: 180,
padding: 16,
paddingVertical: 18,
paddingHorizontal: 32,
backgroundColor: focused
? "rgba(255,255,255,0.15)"
: "rgba(255,255,255,0.08)",
@@ -221,42 +221,46 @@ const TVSeasonCard: React.FC<TVSeasonCardProps> = ({
},
]}
>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
gap: 12,
}}
>
<View style={{ height: 40, justifyContent: "center" }}>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
gap: 12,
}}
>
<Text
style={{
fontSize: TVTypography.callout,
fontWeight: "600",
color: focused ? "#FFFFFF" : "rgba(255,255,255,0.9)",
}}
numberOfLines={1}
>
{t("jellyseerr.season_number", {
season_number: season.seasonNumber,
})}
</Text>
<JellyseerrStatusIcon
mediaStatus={season.status}
showRequestIcon={canRequest}
/>
</View>
<Text
style={{
fontSize: TVTypography.callout,
fontWeight: "600",
color: focused ? "#FFFFFF" : "rgba(255,255,255,0.9)",
fontSize: 14,
color: focused
? "rgba(255,255,255,0.8)"
: "rgba(255,255,255,0.5)",
marginTop: 4,
}}
numberOfLines={1}
>
{t("jellyseerr.season_number", {
season_number: season.seasonNumber,
{t("jellyseerr.number_episodes", {
episode_number: season.episodeCount,
})}
</Text>
<JellyseerrStatusIcon
mediaStatus={season.status}
showRequestIcon={canRequest}
/>
</View>
<Text
style={{
fontSize: 14,
color: focused ? "rgba(255,255,255,0.8)" : "rgba(255,255,255,0.5)",
marginTop: 4,
}}
>
{t("jellyseerr.number_episodes", {
episode_number: season.episodeCount,
})}
</Text>
</Animated.View>
</Pressable>
);
@@ -279,9 +283,10 @@ export const TVJellyseerrPage: React.FC = () => {
const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
const { showRequestModal } = useTVRequestModal();
const [lastActionButtonRef, setLastActionButtonRef] = useState<View | null>(
null,
);
// Refs for TVFocusGuideView destinations (useState triggers re-render when set)
const [playButtonRef, setPlayButtonRef] = useState<View | null>(null);
const [firstCastCardRef, setFirstCastCardRef] = useState<View | null>(null);
// Scroll control ref
const mainScrollRef = useRef<ScrollView>(null);
@@ -757,7 +762,7 @@ export const TVJellyseerrPage: React.FC = () => {
onPress={handlePlay}
hasTVPreferredFocus
variant='primary'
refSetter={!canRequest ? setLastActionButtonRef : undefined}
refSetter={setPlayButtonRef}
>
<Ionicons
name='play'
@@ -777,12 +782,13 @@ export const TVJellyseerrPage: React.FC = () => {
</TVButton>
)}
{canRequest && (
{/* Request button - only show for movies, TV series use Request All + season cards */}
{canRequest && mediaType === MediaType.MOVIE && (
<TVButton
onPress={handleRequest}
variant='secondary'
hasTVPreferredFocus={!hasJellyfinMedia}
refSetter={setLastActionButtonRef}
refSetter={!hasJellyfinMedia ? setPlayButtonRef : undefined}
>
<Ionicons
name='add'
@@ -801,6 +807,62 @@ export const TVJellyseerrPage: React.FC = () => {
</Text>
</TVButton>
)}
{/* Request All button for TV series */}
{mediaType === MediaType.TV &&
seasons.filter((s) => s.seasonNumber !== 0).length > 0 &&
!allSeasonsAvailable && (
<TVButton
onPress={handleRequestAll}
variant='secondary'
hasTVPreferredFocus={!hasJellyfinMedia}
refSetter={!hasJellyfinMedia ? setPlayButtonRef : undefined}
>
<View
style={{
height: 40,
flexDirection: "row",
alignItems: "center",
}}
>
<Ionicons
name='bag-add'
size={20}
color='#FFFFFF'
style={{ marginRight: 8 }}
/>
<Text
style={{
fontSize: TVTypography.callout,
fontWeight: "600",
color: "#FFFFFF",
}}
>
{t("jellyseerr.request_all")}
</Text>
</View>
</TVButton>
)}
{/* Individual season cards for TV series */}
{mediaType === MediaType.TV &&
orderBy(
seasons.filter((s) => s.seasonNumber !== 0),
"seasonNumber",
"desc",
).map((season) => {
const canRequestSeason =
season.status === MediaStatus.UNKNOWN;
return (
<TVSeasonCard
key={season.id}
season={season}
onPress={() => handleSeasonRequest(season.seasonNumber)}
canRequest={canRequestSeason}
onCardFocus={handleSeasonsFocus}
/>
);
})}
</View>
{/* Approve/Decline for managers */}
@@ -867,67 +929,6 @@ export const TVJellyseerrPage: React.FC = () => {
</View>
</View>
{/* Seasons section (TV shows only) */}
{mediaType === MediaType.TV &&
seasons.filter((s) => s.seasonNumber !== 0).length > 0 && (
<View style={{ marginTop: 40, marginBottom: 32 }}>
<Text
style={{
fontSize: TVTypography.heading,
fontWeight: "bold",
color: "#FFFFFF",
marginBottom: 16,
}}
>
{t("item_card.seasons")}
</Text>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
style={{ overflow: "visible" }}
contentContainerStyle={{ paddingVertical: 16, gap: 16 }}
>
{!allSeasonsAvailable && (
<TVButton onPress={handleRequestAll} variant='secondary'>
<Ionicons
name='bag-add'
size={20}
color='#FFFFFF'
style={{ marginRight: 8 }}
/>
<Text
style={{
fontSize: TVTypography.callout,
fontWeight: "600",
color: "#FFFFFF",
}}
>
{t("jellyseerr.request_all")}
</Text>
</TVButton>
)}
{orderBy(
seasons.filter((s) => s.seasonNumber !== 0),
"seasonNumber",
"desc",
).map((season) => {
const canRequestSeason =
season.status === MediaStatus.UNKNOWN;
return (
<TVSeasonCard
key={season.id}
season={season}
onPress={() => handleSeasonRequest(season.seasonNumber)}
canRequest={canRequestSeason}
onCardFocus={handleSeasonsFocus}
/>
);
})}
</ScrollView>
</View>
)}
{/* Cast section */}
{cast.length > 0 && jellyseerrApi && (
<View style={{ marginTop: 24 }}>
@@ -942,35 +943,51 @@ export const TVJellyseerrPage: React.FC = () => {
{t("jellyseerr.cast")}
</Text>
{/* Focus guide for upward navigation from cast to action buttons */}
{lastActionButtonRef && (
{/* Focus guides for bidirectional navigation - stacked together */}
{/* Downward: action buttons → first cast card */}
{firstCastCardRef && (
<TVFocusGuideView
destinations={[lastActionButtonRef]}
style={{ height: 1, width: "100%" }}
destinations={[firstCastCardRef]}
style={{
height: 1,
width: SCREEN_WIDTH,
marginLeft: -(insets.left + 80),
}}
/>
)}
{/* Upward: cast → action buttons */}
{playButtonRef && (
<TVFocusGuideView
destinations={[playButtonRef]}
style={{
height: 1,
width: SCREEN_WIDTH,
marginLeft: -(insets.left + 80),
}}
/>
)}
<FlatList
<ScrollView
horizontal
data={cast}
keyExtractor={(item) => item.id.toString()}
showsHorizontalScrollIndicator={false}
style={{ overflow: "visible" }}
contentContainerStyle={{
paddingVertical: 16,
gap: 28,
}}
style={{ overflow: "visible" }}
renderItem={({ item, index }) => (
>
{cast.map((person, index) => (
<TVCastCard
person={item}
key={person.id}
person={person}
imageProxy={(path, size) =>
jellyseerrApi.imageProxy(path, size || "w185")
}
onPress={() => handleCastPress(item.id)}
isFirst={index === 0}
onPress={() => handleCastPress(person.id)}
refSetter={index === 0 ? setFirstCastCardRef : undefined}
/>
)}
/>
))}
</ScrollView>
</View>
)}
</ScrollView>

45
components/search/TVJellyseerrSearchResults.tsx
View File

@@ -7,6 +7,7 @@ import { Text } from "@/components/common/Text";
import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
import { TVTypography } from "@/constants/TVTypography";
import { useJellyseerr } from "@/hooks/useJellyseerr";
import { MediaStatus } from "@/utils/jellyseerr/server/constants/media";
import type {
MovieResult,
PersonResult,
@@ -28,7 +29,7 @@ const TVJellyseerrPoster: React.FC<TVJellyseerrPosterProps> = ({
}) => {
const { jellyseerrApi, getTitle, getYear } = useJellyseerr();
const { focused, handleFocus, handleBlur, animatedStyle } =
useTVFocusAnimation({ scaleAmount: 1.08 });
useTVFocusAnimation({ scaleAmount: 1.05 });
const posterUrl = item.posterPath
? jellyseerrApi?.imageProxy(item.posterPath, "w342")
@@ -37,6 +38,10 @@ const TVJellyseerrPoster: React.FC<TVJellyseerrPosterProps> = ({
const title = getTitle(item);
const year = getYear(item);
const isInLibrary =
item.mediaInfo?.status === MediaStatus.AVAILABLE ||
item.mediaInfo?.status === MediaStatus.PARTIALLY_AVAILABLE;
return (
<Pressable
onPress={onPress}
@@ -51,20 +56,18 @@ const TVJellyseerrPoster: React.FC<TVJellyseerrPosterProps> = ({
width: 210,
shadowColor: "#fff",
shadowOffset: { width: 0, height: 0 },
shadowOpacity: focused ? 0.4 : 0,
shadowRadius: focused ? 12 : 0,
shadowOpacity: focused ? 0.6 : 0,
shadowRadius: focused ? 20 : 0,
},
]}
>
<View
style={{
width: 210,
aspectRatio: 2 / 3,
borderRadius: 12,
aspectRatio: 10 / 15,
borderRadius: 24,
overflow: "hidden",
backgroundColor: "rgba(255,255,255,0.1)",
borderWidth: focused ? 3 : 0,
borderColor: "#fff",
}}
>
{posterUrl ? (
@@ -90,13 +93,30 @@ const TVJellyseerrPoster: React.FC<TVJellyseerrPosterProps> = ({
/>
</View>
)}
{isInLibrary && (
<View
style={{
position: "absolute",
top: 8,
right: 8,
backgroundColor: "rgba(255,255,255,0.9)",
borderRadius: 14,
width: 28,
height: 28,
alignItems: "center",
justifyContent: "center",
}}
>
<Ionicons name='checkmark' size={18} color='black' />
</View>
)}
</View>
<Text
style={{
fontSize: TVTypography.callout,
color: focused ? "#fff" : "rgba(255,255,255,0.9)",
color: "#fff",
fontWeight: "600",
marginTop: 10,
marginTop: 12,
}}
numberOfLines={2}
>
@@ -105,10 +125,9 @@ const TVJellyseerrPoster: React.FC<TVJellyseerrPosterProps> = ({
{year && (
<Text
style={{
fontSize: 14,
color: focused
? "rgba(255,255,255,0.7)"
: "rgba(255,255,255,0.5)",
fontSize: TVTypography.callout,
color: "#9CA3AF",
marginTop: 2,
}}
>
{year}

4
components/series/TVEpisodeCard.tsx
View File

@@ -20,6 +20,8 @@ interface TVEpisodeCardProps {
onPress: () => void;
onFocus?: () => void;
onBlur?: () => void;
/** Setter function for the ref (for focus guide destinations) */
refSetter?: (ref: View | null) => void;
}
export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
@@ -29,6 +31,7 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
onPress,
onFocus,
onBlur,
refSetter,
}) => {
const api = useAtomValue(apiAtom);
@@ -71,6 +74,7 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
disabled={disabled}
onFocus={onFocus}
onBlur={onBlur}
refSetter={refSetter}
>
<View
style={{

100
components/series/TVSeriesPage.tsx
View File

@@ -17,9 +17,9 @@ import {
Animated,
Dimensions,
Easing,
FlatList,
Pressable,
ScrollView,
TVFocusGuideView,
View,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -27,10 +27,7 @@ import { ItemImage } from "@/components/common/ItemImage";
import { Text } from "@/components/common/Text";
import { getItemNavigation } from "@/components/common/TouchableItemRouter";
import { seasonIndexAtom } from "@/components/series/SeasonPicker";
import {
TV_EPISODE_WIDTH,
TVEpisodeCard,
} from "@/components/series/TVEpisodeCard";
import { TVEpisodeCard } from "@/components/series/TVEpisodeCard";
import { TVSeriesHeader } from "@/components/series/TVSeriesHeader";
import { TVOptionSelector } from "@/components/tv/TVOptionSelector";
import { TVTypography } from "@/constants/TVTypography";
@@ -64,12 +61,14 @@ const TVFocusableButton: React.FC<{
hasTVPreferredFocus?: boolean;
disabled?: boolean;
variant?: "primary" | "secondary";
refSetter?: (ref: View | null) => void;
}> = ({
onPress,
children,
hasTVPreferredFocus,
disabled = false,
variant = "primary",
refSetter,
}) => {
const [focused, setFocused] = useState(false);
const scale = useRef(new Animated.Value(1)).current;
@@ -86,6 +85,7 @@ const TVFocusableButton: React.FC<{
return (
<Pressable
ref={refSetter}
onPress={onPress}
onFocus={() => {
setFocused(true);
@@ -232,17 +232,21 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
// Season selector modal state
const [isSeasonModalVisible, setIsSeasonModalVisible] = useState(false);
// Focus guide refs (using useState to trigger re-renders when refs are set)
const [playButtonRef, setPlayButtonRef] = useState<View | null>(null);
const [firstEpisodeRef, setFirstEpisodeRef] = useState<View | null>(null);
// ScrollView ref for page scrolling
const mainScrollRef = useRef<ScrollView>(null);
// FlatList ref for scrolling back
const episodeListRef = useRef<FlatList<BaseItemDto>>(null);
// ScrollView ref for scrolling back
const episodeListRef = useRef<ScrollView>(null);
const [focusedCount, setFocusedCount] = useState(0);
const prevFocusedCount = useRef(0);
// Scroll back to start when episode list loses focus
useEffect(() => {
if (prevFocusedCount.current > 0 && focusedCount === 0) {
episodeListRef.current?.scrollToOffset({ offset: 0, animated: true });
episodeListRef.current?.scrollTo({ x: 0, animated: true });
// Scroll page back to top when leaving episode section
mainScrollRef.current?.scrollTo({ y: 0, animated: true });
}
@@ -422,37 +426,6 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
}));
}, [seasons, selectedSeasonIndex]);
// Episode list item layout
const getItemLayout = useCallback(
(_data: ArrayLike<BaseItemDto> | null | undefined, index: number) => ({
length: TV_EPISODE_WIDTH + ITEM_GAP,
offset: (TV_EPISODE_WIDTH + ITEM_GAP) * index,
index,
}),
[],
);
// Render episode card
const renderEpisode = useCallback(
({ item: episode }: { item: BaseItemDto; index: number }) => (
<View style={{ marginRight: ITEM_GAP }}>
<TVEpisodeCard
episode={episode}
onPress={() => handleEpisodePress(episode)}
onFocus={handleEpisodeFocus}
onBlur={handleEpisodeBlur}
disabled={isSeasonModalVisible}
/>
</View>
),
[
handleEpisodePress,
handleEpisodeFocus,
handleEpisodeBlur,
isSeasonModalVisible,
],
);
// Get play button text
const playButtonText = useMemo(() => {
if (!nextUnwatchedEpisode) return t("common.play");
@@ -574,6 +547,7 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
hasTVPreferredFocus={!isSeasonModalVisible}
disabled={isSeasonModalVisible}
variant='primary'
refSetter={setPlayButtonRef}
>
<Ionicons
name='play'
@@ -617,24 +591,48 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
{selectedSeasonName}
</Text>
<FlatList
{/* Bidirectional focus guides - stacked together above the list */}
{/* Downward: Play button → first episode */}
{firstEpisodeRef && (
<TVFocusGuideView
destinations={[firstEpisodeRef]}
style={{ height: 1, width: "100%" }}
/>
)}
{/* Upward: episodes → Play button */}
{playButtonRef && (
<TVFocusGuideView
destinations={[playButtonRef]}
style={{ height: 1, width: "100%" }}
/>
)}
<ScrollView
ref={episodeListRef}
horizontal
data={episodesForSeason}
keyExtractor={(ep) => ep.Id!}
renderItem={renderEpisode}
showsHorizontalScrollIndicator={false}
initialNumToRender={5}
maxToRenderPerBatch={3}
windowSize={5}
removeClippedSubviews={false}
getItemLayout={getItemLayout}
style={{ overflow: "visible" }}
contentContainerStyle={{
paddingVertical: SCALE_PADDING,
paddingHorizontal: SCALE_PADDING,
gap: ITEM_GAP,
}}
ListEmptyComponent={
>
{episodesForSeason.length > 0 ? (
episodesForSeason.map((episode, index) => (
<TVEpisodeCard
key={episode.Id}
episode={episode}
onPress={() => handleEpisodePress(episode)}
onFocus={handleEpisodeFocus}
onBlur={handleEpisodeBlur}
disabled={isSeasonModalVisible}
// Pass refSetter to first episode for focus guide destination
// Note: Do NOT use hasTVPreferredFocus on focus guide destinations
refSetter={index === 0 ? setFirstEpisodeRef : undefined}
/>
))
) : (
<Text
style={{
color: "#737373",
@@ -644,8 +642,8 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
>
{t("item_card.no_episodes_for_this_season")}
</Text>
}
/>
)}
</ScrollView>
</View>
</ScrollView>

6
components/tv/TVButton.tsx
View File

@@ -12,6 +12,8 @@ export interface TVButtonProps {
scaleAmount?: number;
square?: boolean;
refSetter?: (ref: View | null) => void;
nextFocusDown?: number;
nextFocusUp?: number;
}
const getButtonStyles = (
@@ -59,6 +61,8 @@ export const TVButton: React.FC<TVButtonProps> = ({
scaleAmount = 1.05,
square = false,
refSetter,
nextFocusDown,
nextFocusUp,
}) => {
const { focused, handleFocus, handleBlur, animatedStyle } =
useTVFocusAnimation({ scaleAmount });
@@ -74,6 +78,8 @@ export const TVButton: React.FC<TVButtonProps> = ({
hasTVPreferredFocus={hasTVPreferredFocus && !disabled}
disabled={disabled}
focusable={!disabled}
nextFocusDown={nextFocusDown}
nextFocusUp={nextFocusUp}
>
<Animated.View
style={[

12
components/tv/TVFocusablePoster.tsx
View File

@@ -1,5 +1,11 @@
import React, { useRef, useState } from "react";
import { Animated, Easing, Pressable, type ViewStyle } from "react-native";
import {
Animated,
Easing,
Pressable,
View,
type ViewStyle,
} from "react-native";
export interface TVFocusablePosterProps {
children: React.ReactNode;
@@ -11,6 +17,8 @@ export interface TVFocusablePosterProps {
onFocus?: () => void;
onBlur?: () => void;
disabled?: boolean;
/** Setter function for the ref (for focus guide destinations) */
refSetter?: (ref: View | null) => void;
}
export const TVFocusablePoster: React.FC<TVFocusablePosterProps> = ({
@@ -23,6 +31,7 @@ export const TVFocusablePoster: React.FC<TVFocusablePosterProps> = ({
onFocus: onFocusProp,
onBlur: onBlurProp,
disabled = false,
refSetter,
}) => {
const [focused, setFocused] = useState(false);
const scale = useRef(new Animated.Value(1)).current;
@@ -39,6 +48,7 @@ export const TVFocusablePoster: React.FC<TVFocusablePosterProps> = ({
return (
<Pressable
ref={refSetter}
onPress={onPress}
onFocus={() => {
setFocused(true);