mirror of
https://github.com/streamyfin/streamyfin.git
synced 2026-05-31 11:08:26 +01:00
fix(tv): padding
This commit is contained in:
@@ -20,6 +20,8 @@ interface TVSearchSectionProps extends ViewProps {
|
||||
onItemPress: (item: BaseItemDto) => void;
|
||||
onItemLongPress?: (item: BaseItemDto) => void;
|
||||
imageUrlGetter?: (item: BaseItemDto) => string | undefined;
|
||||
/** Override the horizontal edge padding (defaults to the scaled TV padding). */
|
||||
horizontalPadding?: number;
|
||||
}
|
||||
|
||||
export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
|
||||
@@ -31,12 +33,14 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
|
||||
onItemPress,
|
||||
onItemLongPress,
|
||||
imageUrlGetter,
|
||||
horizontalPadding,
|
||||
...props
|
||||
}) => {
|
||||
const typography = useScaledTVTypography();
|
||||
const posterSizes = useScaledTVPosterSizes();
|
||||
const sizes = useScaledTVSizes();
|
||||
const ITEM_GAP = sizes.gaps.item;
|
||||
const edgePadding = horizontalPadding ?? sizes.padding.horizontal;
|
||||
const flatListRef = useRef<FlatList<BaseItemDto>>(null);
|
||||
const [focusedCount, setFocusedCount] = useState(0);
|
||||
const prevFocusedCount = useRef(0);
|
||||
@@ -273,7 +277,7 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
|
||||
fontWeight: "700",
|
||||
color: "#FFFFFF",
|
||||
marginBottom: 20,
|
||||
marginLeft: sizes.padding.horizontal,
|
||||
marginLeft: edgePadding,
|
||||
letterSpacing: 0.5,
|
||||
}}
|
||||
>
|
||||
@@ -294,10 +298,10 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
|
||||
getItemLayout={getItemLayout}
|
||||
style={{ overflow: "visible" }}
|
||||
contentInset={{
|
||||
left: sizes.padding.horizontal,
|
||||
right: sizes.padding.horizontal,
|
||||
left: edgePadding,
|
||||
right: edgePadding,
|
||||
}}
|
||||
contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
|
||||
contentOffset={{ x: -edgePadding, y: 0 }}
|
||||
contentContainerStyle={{
|
||||
paddingVertical: SCALE_PADDING,
|
||||
}}
|
||||
|
||||
@@ -49,8 +49,8 @@ export const TVGaps = {
|
||||
* Base padding values in pixels.
|
||||
*/
|
||||
export const TVPadding = {
|
||||
/** Horizontal padding from screen edges */
|
||||
horizontal: 90,
|
||||
/** Horizontal padding from screen edges (static — matches native search inset) */
|
||||
horizontal: 80,
|
||||
|
||||
/** Padding to accommodate scale animations (1.05x) */
|
||||
scale: 20,
|
||||
@@ -142,7 +142,9 @@ export const useScaledTVSizes = (): ScaledTVSizes => {
|
||||
large: Math.round(scaleSize(TVGaps.large) * scale),
|
||||
},
|
||||
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),
|
||||
vertical: Math.round(scaleSize(TVPadding.vertical) * scale),
|
||||
heroHeight: TVPadding.heroHeight * scale,
|
||||
|
||||
Reference in New Issue
Block a user