diff --git a/components/ItemContent.tv.tsx b/components/ItemContent.tv.tsx index 12b648d1..ecbdbacc 100644 --- a/components/ItemContent.tv.tsx +++ b/components/ItemContent.tv.tsx @@ -525,6 +525,13 @@ export const ItemContentTV: React.FC = React.memo( } }, [item?.Id, queryClient]); + // Handle manual refresh of metadata + const handleRefreshMetadata = useCallback(() => { + if (item?.Id) { + queryClient.invalidateQueries({ queryKey: ["item", item.Id] }); + } + }, [item?.Id, queryClient]); + // Get display values for buttons const selectedAudioLabel = useMemo(() => { const track = audioTracks.find( @@ -849,6 +856,13 @@ export const ItemContentTV: React.FC = React.memo( : t("common.play")} + + + {/* Playback options */} diff --git a/components/tv/TVButton.tsx b/components/tv/TVButton.tsx index a2713ed9..dde95e11 100644 --- a/components/tv/TVButton.tsx +++ b/components/tv/TVButton.tsx @@ -5,13 +5,47 @@ import { useTVFocusAnimation } from "./hooks/useTVFocusAnimation"; export interface TVButtonProps { onPress: () => void; children: React.ReactNode; - variant?: "primary" | "secondary"; + variant?: "primary" | "secondary" | "glass"; hasTVPreferredFocus?: boolean; disabled?: boolean; style?: ViewStyle; scaleAmount?: number; + square?: boolean; } +const getButtonStyles = ( + variant: "primary" | "secondary" | "glass", + focused: boolean, +) => { + switch (variant) { + case "glass": + return { + backgroundColor: focused + ? "rgba(255, 255, 255, 0.25)" + : "rgba(255, 255, 255, 0.1)", + shadowColor: "#fff", + borderWidth: 1, + borderColor: focused + ? "rgba(255, 255, 255, 0.4)" + : "rgba(255, 255, 255, 0.15)", + }; + case "secondary": + return { + backgroundColor: focused ? "#7c3aed" : "rgba(124, 58, 237, 0.8)", + shadowColor: "#a855f7", + borderWidth: 1, + borderColor: "transparent", + }; + default: + return { + backgroundColor: focused ? "#ffffff" : "rgba(255, 255, 255, 0.9)", + shadowColor: "#fff", + borderWidth: 1, + borderColor: "transparent", + }; + } +}; + export const TVButton: React.FC = ({ onPress, children, @@ -20,11 +54,12 @@ export const TVButton: React.FC = ({ disabled = false, style, scaleAmount = 1.05, + square = false, }) => { const { focused, handleFocus, handleBlur, animatedStyle } = useTVFocusAnimation({ scaleAmount }); - const isPrimary = variant === "primary"; + const buttonStyles = getButtonStyles(variant, focused); return ( = ({ style={[ animatedStyle, { - shadowColor: isPrimary ? "#fff" : "#a855f7", + shadowColor: buttonStyles.shadowColor, shadowOffset: { width: 0, height: 0 }, - shadowOpacity: focused ? 0.6 : 0, - shadowRadius: focused ? 20 : 0, + shadowOpacity: focused ? 0.4 : 0, + shadowRadius: focused ? 15 : 0, }, style, ]} > {children} diff --git a/translations/en.json b/translations/en.json index 8e81cc30..bf549255 100644 --- a/translations/en.json +++ b/translations/en.json @@ -517,7 +517,8 @@ "back": "Back", "continue": "Continue", "verifying": "Verifying...", - "login": "Login" + "login": "Login", + "refresh": "Refresh" }, "search": { "search": "Search...",