alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-05-31 19:18:26 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

fix(tv): padding

Browse Source
This commit is contained in:
Fredrik Burmester
2026-05-30 21:41:27 +02:00
parent 5a3e9c51c9
commit aedb7bc51d
2 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/search/TVSearchSection.tsx
View File

@@ -20,6 +20,8 @@ interface TVSearchSectionProps extends ViewProps {
onItemPress: (item: BaseItemDto) => void; onItemPress: (item: BaseItemDto) => void;
onItemLongPress?: (item: BaseItemDto) => void; onItemLongPress?: (item: BaseItemDto) => void;
imageUrlGetter?: (item: BaseItemDto) => string | undefined; imageUrlGetter?: (item: BaseItemDto) => string | undefined;
/** Override the horizontal edge padding (defaults to the scaled TV padding). */
horizontalPadding?: number;
} }
export const TVSearchSection: React.FC<TVSearchSectionProps> = ({ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
@@ -31,12 +33,14 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
onItemPress, onItemPress,
onItemLongPress, onItemLongPress,
imageUrlGetter, imageUrlGetter,
horizontalPadding,
...props ...props
}) => { }) => {
const typography = useScaledTVTypography(); const typography = useScaledTVTypography();
const posterSizes = useScaledTVPosterSizes(); const posterSizes = useScaledTVPosterSizes();
const sizes = useScaledTVSizes(); const sizes = useScaledTVSizes();
const ITEM_GAP = sizes.gaps.item; const ITEM_GAP = sizes.gaps.item;
const edgePadding = horizontalPadding ?? sizes.padding.horizontal;
const flatListRef = useRef<FlatList<BaseItemDto>>(null); const flatListRef = useRef<FlatList<BaseItemDto>>(null);
const [focusedCount, setFocusedCount] = useState(0); const [focusedCount, setFocusedCount] = useState(0);
const prevFocusedCount = useRef(0); const prevFocusedCount = useRef(0);
@@ -273,7 +277,7 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
fontWeight: "700", fontWeight: "700",
color: "#FFFFFF", color: "#FFFFFF",
marginBottom: 20, marginBottom: 20,
marginLeft: sizes.padding.horizontal, marginLeft: edgePadding,
letterSpacing: 0.5, letterSpacing: 0.5,
}} }}
> >
@@ -294,10 +298,10 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
getItemLayout={getItemLayout} getItemLayout={getItemLayout}
style={{ overflow: "visible" }} style={{ overflow: "visible" }}
contentInset={{ contentInset={{
left: sizes.padding.horizontal, left: edgePadding,
right: sizes.padding.horizontal, right: edgePadding,
}} }}
contentOffset={{ x: -sizes.padding.horizontal, y: 0 }} contentOffset={{ x: -edgePadding, y: 0 }}
contentContainerStyle={{ contentContainerStyle={{
paddingVertical: SCALE_PADDING, paddingVertical: SCALE_PADDING,
}} }}

8
constants/TVSizes.ts
View File

@@ -49,8 +49,8 @@ export const TVGaps = {
* Base padding values in pixels. * Base padding values in pixels.
*/ */
export const TVPadding = { export const TVPadding = {
/** Horizontal padding from screen edges */ /** Horizontal padding from screen edges (static — matches native search inset) */
horizontal: 90, horizontal: 80,
/** Padding to accommodate scale animations (1.05x) */ /** Padding to accommodate scale animations (1.05x) */
scale: 20, scale: 20,
@@ -142,7 +142,9 @@ export const useScaledTVSizes = (): ScaledTVSizes => {
large: Math.round(scaleSize(TVGaps.large) * scale), large: Math.round(scaleSize(TVGaps.large) * scale),
}, },
padding: { padding: {
horizontal: Math.round(scaleSize(TVPadding.horizontal) * scale), // Static: matches the native tvOS search bar inset, which is a fixed
// point value and does not change with the typography scale setting.
horizontal: TVPadding.horizontal,
scale: Math.round(scaleSize(TVPadding.scale) * scale), scale: Math.round(scaleSize(TVPadding.scale) * scale),
vertical: Math.round(scaleSize(TVPadding.vertical) * scale), vertical: Math.round(scaleSize(TVPadding.vertical) * scale),
heroHeight: TVPadding.heroHeight * scale, heroHeight: TVPadding.heroHeight * scale,