mirror of
https://github.com/streamyfin/streamyfin.git
synced 2026-01-21 02:28:08 +00:00
fix: design
This commit is contained in:
Fredrik Burmester
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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={{
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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={[
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -2,6 +2,54 @@
|
||||
|
||||
This document explains how to use `TVFocusGuideView` to create reliable focus navigation between non-adjacent sections on Apple TV and Android TV.
|
||||
|
||||
## Platform Differences (CRITICAL)
|
||||
|
||||
### tvOS vs Android TV
|
||||
|
||||
**`nextFocusUp`, `nextFocusDown`, `nextFocusLeft`, `nextFocusRight` props only work on Android TV, NOT tvOS.**
|
||||
|
||||
This is a [known limitation](https://github.com/react-native-tvos/react-native-tvos/issues/490). These props are documented as "only for Android" in React Native.
|
||||
|
||||
```typescript
|
||||
// ❌ Does NOT work on tvOS (Apple TV)
|
||||
<Pressable nextFocusUp={someNodeHandle} nextFocusDown={anotherNodeHandle}>
|
||||
...
|
||||
</Pressable>
|
||||
|
||||
// ✅ Works on both tvOS and Android TV
|
||||
<TVFocusGuideView destinations={[targetRef]}>
|
||||
...
|
||||
</TVFocusGuideView>
|
||||
```
|
||||
|
||||
**For tvOS, always use `TVFocusGuideView` with the `destinations` prop.**
|
||||
|
||||
## ScrollView vs FlatList for TV
|
||||
|
||||
**Use ScrollView instead of FlatList for horizontal lists on TV when focus navigation is critical.**
|
||||
|
||||
FlatList only renders visible items and manages its own recycling, which can interfere with focus navigation. ScrollView renders all items at once, providing more predictable focus behavior.
|
||||
|
||||
```typescript
|
||||
// ❌ FlatList can cause focus issues on TV
|
||||
<FlatList
|
||||
horizontal
|
||||
data={cast}
|
||||
renderItem={({ item, index }) => <CastCard ... />}
|
||||
/>
|
||||
|
||||
// ✅ ScrollView provides reliable focus navigation
|
||||
<ScrollView horizontal>
|
||||
{cast.map((person, index) => (
|
||||
<CastCard key={person.id} ... />
|
||||
))}
|
||||
</ScrollView>
|
||||
```
|
||||
|
||||
**When to use which:**
|
||||
- **ScrollView**: Small to medium lists (< 20 items) where focus navigation must be reliable
|
||||
- **FlatList**: Large lists where performance is more important than perfect focus navigation
|
||||
|
||||
## The Problem
|
||||
|
||||
tvOS uses a **geometric focus engine** that draws a ray in the navigation direction and finds the nearest focusable element. This works well for adjacent elements but fails when:
|
||||
@@ -53,159 +101,160 @@ const [targetRef, setTargetRef] = useState<View | null>(null);
|
||||
<TVFocusGuideView destinations={targetRef ? [targetRef] : []} />
|
||||
```
|
||||
|
||||
## Complete Example: Bidirectional Navigation
|
||||
## Bidirectional Navigation (CRITICAL PATTERN)
|
||||
|
||||
This example shows how to create focus navigation between a vertical list of buttons and a horizontal ScrollView of cards.
|
||||
When you need focus to navigate both UP and DOWN between sections, you must stack both focus guides together AND avoid `hasTVPreferredFocus` on the destination element.
|
||||
|
||||
### Step 1: Convert Components to forwardRef
|
||||
### The Focus Flickering Problem
|
||||
|
||||
Any component that needs to be a focus destination must forward its ref:
|
||||
If you use `hasTVPreferredFocus={true}` on an element that is ALSO the destination of a focus guide, you will get **focus flickering** where focus rapidly jumps back and forth between elements.
|
||||
|
||||
```typescript
|
||||
const TVOptionButton = React.forwardRef<
|
||||
View,
|
||||
{
|
||||
label: string;
|
||||
onPress: () => void;
|
||||
}
|
||||
>(({ label, onPress }, ref) => {
|
||||
return (
|
||||
<Pressable ref={ref} onPress={onPress}>
|
||||
<Text>{label}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
});
|
||||
// ❌ CAUSES FOCUS FLICKERING - destination has hasTVPreferredFocus
|
||||
<TVFocusGuideView destinations={[firstCardRef]} />
|
||||
<ScrollView horizontal>
|
||||
{items.map((item, index) => (
|
||||
<Card
|
||||
ref={index === 0 ? setFirstCardRef : undefined}
|
||||
hasTVPreferredFocus={index === 0} // ❌ DON'T DO THIS
|
||||
/>
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
const TVActorCard = React.forwardRef<
|
||||
View,
|
||||
{
|
||||
name: string;
|
||||
onPress: () => void;
|
||||
}
|
||||
>(({ name, onPress }, ref) => {
|
||||
return (
|
||||
<Pressable ref={ref} onPress={onPress}>
|
||||
<Text>{name}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
});
|
||||
// ✅ CORRECT - destination does NOT have hasTVPreferredFocus
|
||||
<TVFocusGuideView destinations={[firstCardRef]} />
|
||||
<ScrollView horizontal>
|
||||
{items.map((item, index) => (
|
||||
<Card
|
||||
ref={index === 0 ? setFirstCardRef : undefined}
|
||||
// No hasTVPreferredFocus - the focus guide handles directing focus here
|
||||
/>
|
||||
))}
|
||||
</ScrollView>
|
||||
```
|
||||
|
||||
### Step 2: Track Refs with State
|
||||
### Complete Bidirectional Example
|
||||
|
||||
```typescript
|
||||
const MyScreen: React.FC = () => {
|
||||
// Track the first actor card (for downward navigation)
|
||||
const [firstActorRef, setFirstActorRef] = useState<View | null>(null);
|
||||
// Track refs for focus navigation
|
||||
const [playButtonRef, setPlayButtonRef] = useState<View | null>(null);
|
||||
const [firstCastCardRef, setFirstCastCardRef] = useState<View | null>(null);
|
||||
|
||||
// Track the last option button (for upward navigation)
|
||||
const [lastButtonRef, setLastButtonRef] = useState<View | null>(null);
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
{/* Action buttons section */}
|
||||
<View style={{ flexDirection: "row", gap: 16 }}>
|
||||
<TVButton
|
||||
ref={setPlayButtonRef}
|
||||
onPress={handlePlay}
|
||||
hasTVPreferredFocus // OK here - this is NOT a focus guide destination
|
||||
>
|
||||
Play
|
||||
</TVButton>
|
||||
</View>
|
||||
|
||||
// ...
|
||||
{/* Cast section */}
|
||||
<View>
|
||||
<Text>Cast</Text>
|
||||
|
||||
{/* BOTH focus guides stacked together, above the list */}
|
||||
{/* Downward: Play button → first cast card */}
|
||||
{firstCastCardRef && (
|
||||
<TVFocusGuideView
|
||||
destinations={[firstCastCardRef]}
|
||||
style={{ height: 1, width: "100%" }}
|
||||
/>
|
||||
)}
|
||||
{/* Upward: cast → Play button */}
|
||||
{playButtonRef && (
|
||||
<TVFocusGuideView
|
||||
destinations={[playButtonRef]}
|
||||
style={{ height: 1, width: "100%" }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Use ScrollView, not FlatList, for reliable focus */}
|
||||
<ScrollView horizontal style={{ overflow: "visible" }}>
|
||||
{cast.map((person, index) => (
|
||||
<CastCard
|
||||
key={person.id}
|
||||
person={person}
|
||||
refSetter={index === 0 ? setFirstCastCardRef : undefined}
|
||||
// ⚠️ NO hasTVPreferredFocus here - causes flickering!
|
||||
/>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Step 3: Place Focus Guides
|
||||
### Key Rules for Bidirectional Navigation
|
||||
|
||||
```typescript
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
{/* Option buttons */}
|
||||
<View>
|
||||
<TVOptionButton label="Quality" onPress={...} />
|
||||
<TVOptionButton label="Audio" onPress={...} />
|
||||
<TVOptionButton
|
||||
ref={setLastButtonRef} // Last button gets the ref
|
||||
label="Subtitles"
|
||||
onPress={...}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Focus guide: options → cast (downward navigation) */}
|
||||
{firstActorRef && (
|
||||
<TVFocusGuideView
|
||||
destinations={[firstActorRef]}
|
||||
style={{ height: 1, width: "100%" }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Cast section */}
|
||||
<View>
|
||||
<Text>Cast</Text>
|
||||
|
||||
{/* Focus guide: cast → options (upward navigation) */}
|
||||
{lastButtonRef && (
|
||||
<TVFocusGuideView
|
||||
destinations={[lastButtonRef]}
|
||||
style={{ height: 1, width: "100%" }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<ScrollView horizontal>
|
||||
{actors.map((actor, index) => (
|
||||
<TVActorCard
|
||||
key={actor.id}
|
||||
ref={index === 0 ? setFirstActorRef : undefined} // First card gets the ref
|
||||
name={actor.name}
|
||||
onPress={...}
|
||||
/>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
```
|
||||
|
||||
### Step 4: Handle Dynamic "Last" Element
|
||||
|
||||
When the last button varies based on conditions (e.g., subtitle button only shows if subtitles exist), compute which one is last:
|
||||
|
||||
```typescript
|
||||
// Determine which button is last
|
||||
const lastOptionButton = useMemo(() => {
|
||||
if (hasSubtitles) return "subtitle";
|
||||
if (hasAudio) return "audio";
|
||||
return "quality";
|
||||
}, [hasSubtitles, hasAudio]);
|
||||
|
||||
// Pass ref only to the last one
|
||||
<TVOptionButton
|
||||
ref={lastOptionButton === "quality" ? setLastButtonRef : undefined}
|
||||
label="Quality"
|
||||
onPress={...}
|
||||
/>
|
||||
<TVOptionButton
|
||||
ref={lastOptionButton === "audio" ? setLastButtonRef : undefined}
|
||||
label="Audio"
|
||||
onPress={...}
|
||||
/>
|
||||
<TVOptionButton
|
||||
ref={lastOptionButton === "subtitle" ? setLastButtonRef : undefined}
|
||||
label="Subtitles"
|
||||
onPress={...}
|
||||
/>
|
||||
```
|
||||
1. **Stack both focus guides together** - Place them adjacent to each other, above the destination list
|
||||
2. **Do NOT use `hasTVPreferredFocus` on focus guide destinations** - This causes focus flickering
|
||||
3. **Use ScrollView instead of FlatList** - More reliable focus behavior
|
||||
4. **Use `useState` for refs, not `useRef`** - Triggers re-renders when refs are set
|
||||
|
||||
## Focus Guide Placement
|
||||
|
||||
The focus guide should be placed **between** the source and destination sections:
|
||||
The focus guides should be placed **together** above the destination section:
|
||||
|
||||
```
|
||||
┌─────────────────────────┐
|
||||
│ Option Buttons │ ← Source (going down)
|
||||
│ [Quality] [Audio] │
|
||||
│ Action Buttons │ ← Source (going down)
|
||||
│ [Play] [Request] │ Has hasTVPreferredFocus ✓
|
||||
└─────────────────────────┘
|
||||
↓
|
||||
┌─────────────────────────┐
|
||||
│ TVFocusGuideView │ ← Invisible guide (height: 1px)
|
||||
│ destinations=[actor1] │ Catches downward navigation
|
||||
└─────────────────────────┘
|
||||
┌─────────────────────────┐
|
||||
│ TVFocusGuideView │ ← Invisible guide (height: 1px)
|
||||
│ destinations=[lastBtn] │ Catches upward navigation
|
||||
│ TVFocusGuideView │ ← Downward guide
|
||||
│ destinations=[card1] │
|
||||
├─────────────────────────┤
|
||||
│ Actor Cards │ ← Destination (going down)
|
||||
│ [👤] [👤] [👤] [👤] │ Source (going up)
|
||||
│ TVFocusGuideView │ ← Upward guide
|
||||
│ destinations=[playBtn] │ (stacked together)
|
||||
└─────────────────────────┘
|
||||
↓
|
||||
┌─────────────────────────┐
|
||||
│ Cast Cards (ScrollView)│ ← First card is destination
|
||||
│ [👤] [👤] [👤] [👤] │ NO hasTVPreferredFocus ✗
|
||||
└─────────────────────────┘
|
||||
```
|
||||
|
||||
## Component Pattern with refSetter
|
||||
|
||||
For components that need to be focus guide destinations, use a `refSetter` callback prop:
|
||||
|
||||
```typescript
|
||||
interface TVCastCardProps {
|
||||
person: { id: number; name: string };
|
||||
onPress: () => void;
|
||||
refSetter?: (ref: View | null) => void;
|
||||
}
|
||||
|
||||
const TVCastCard: React.FC<TVCastCardProps> = ({
|
||||
person,
|
||||
onPress,
|
||||
refSetter,
|
||||
}) => {
|
||||
return (
|
||||
<Pressable
|
||||
ref={refSetter}
|
||||
onPress={onPress}
|
||||
// No hasTVPreferredFocus when this is a focus guide destination
|
||||
>
|
||||
<Text>{person.name}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
};
|
||||
|
||||
// Usage
|
||||
<TVCastCard
|
||||
person={person}
|
||||
onPress={handlePress}
|
||||
refSetter={index === 0 ? setFirstCastCardRef : undefined}
|
||||
/>
|
||||
```
|
||||
|
||||
## Tips and Gotchas
|
||||
@@ -232,13 +281,25 @@ The focus guide should be placed **between** the source and destination sections
|
||||
</TVFocusGuideView>
|
||||
```
|
||||
|
||||
5. **Auto focus**: Use `autoFocus` to automatically focus the first focusable child:
|
||||
5. **Auto focus**: Use `autoFocus` to automatically focus the first focusable child when entering a region:
|
||||
```typescript
|
||||
<TVFocusGuideView autoFocus>
|
||||
{/* First focusable child will receive focus */}
|
||||
</TVFocusGuideView>
|
||||
```
|
||||
|
||||
**Warning**: Don't use `autoFocus` on a wrapper when you also have bidirectional focus guides - it can interfere with upward navigation.
|
||||
|
||||
## Common Mistakes
|
||||
|
||||
| Mistake | Result | Fix |
|
||||
|---------|--------|-----|
|
||||
| Using `nextFocusUp`/`nextFocusDown` props | Doesn't work on tvOS | Use `TVFocusGuideView` |
|
||||
| Using FlatList for horizontal lists | Focus navigation unreliable | Use ScrollView |
|
||||
| `hasTVPreferredFocus` on focus guide destination | Focus flickering loop | Remove `hasTVPreferredFocus` from destination |
|
||||
| Focus guides placed separately | Focus flickering | Stack both guides together |
|
||||
| Using `useRef` for focus guide refs | Focus guide doesn't update | Use `useState` |
|
||||
|
||||
## Reference Implementation
|
||||
|
||||
See `components/ItemContent.tv.tsx` for a complete implementation of bidirectional focus navigation between playback options and the cast list.
|
||||
See `components/jellyseerr/tv/TVJellyseerrPage.tsx` for a complete implementation of bidirectional focus navigation between action buttons and a cast list.
|
||||
|
||||
Reference in New Issue
Block a user