alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-04-11 11:31:55 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Attempt 2 at scaling

Browse Source 
Added some more logic for scaling to hopefully have a uniform state

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>
This commit is contained in:
Lance Chant
2026-04-10 15:59:50 +02:00
parent 8ee1197186
commit bab11addee
8 changed files with 129 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/home/Home.tv.tsx
View File

@@ -20,7 +20,10 @@ import { useTranslation } from "react-i18next";
import {
ActivityIndicator,
Animated,
Dimensions,
Easing,
PixelRatio,
Platform,
ScrollView,
View,
} from "react-native";
@@ -40,11 +43,12 @@ import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import { useSettings } from "@/utils/atoms/settings";
import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
import { scaleSize } from "@/utils/scaleSize";
const HORIZONTAL_PADDING = 60;
const TOP_PADDING = 100;
const HORIZONTAL_PADDING = scaleSize(60);
const TOP_PADDING = scaleSize(100);
// Generous gap between sections for Apple TV+ aesthetic
const SECTION_GAP = 24;
const SECTION_GAP = scaleSize(10);
type InfiniteScrollingCollectionListSection = {
type: "InfiniteScrollingCollectionList";
@@ -79,6 +83,22 @@ export const Home = () => {
const _invalidateCache = useInvalidatePlaybackProgressCache();
const { showItemActions } = useTVItemActionModal();
// Log TV viewport dimensions for DPI scaling debug
useEffect(() => {
const w = Dimensions.get("window");
const s = Dimensions.get("screen");
console.log("========== TV DIMENSIONS ==========");
console.log("Platform.OS:", Platform.OS, "isTV:", Platform.isTV);
console.log("Window:", w.width, "x", w.height);
console.log("Screen:", s.width, "x", s.height);
console.log("PixelRatio:", PixelRatio.get());
console.log(
"scaleSize(210):",
210 * Math.min(w.width / 1920, w.height / 1080),
);
console.log("====================================");
}, []);
// Dynamic backdrop state with debounce
const [focusedItem, setFocusedItem] = useState<BaseItemDto | null>(null);
const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

24
components/home/InfiniteScrollingCollectionList.tv.tsx
View File

@@ -24,9 +24,10 @@ import { useScaledTVTypography } from "@/constants/TVTypography";
import useRouter from "@/hooks/useAppRouter";
import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
import { SortByOption, SortOrderOption } from "@/utils/atoms/filters";
import { scaleSize } from "@/utils/scaleSize";
// Extra padding to accommodate scale animation (1.05x) and glow shadow
const SCALE_PADDING = 20;
const SCALE_PADDING = scaleSize(20);
interface Props extends ViewProps {
title?: string | null;
@@ -81,7 +82,7 @@ const TVSeeAllCard: React.FC<{
style={{
width,
aspectRatio,
borderRadius: 24,
borderRadius: scaleSize(24),
backgroundColor: "rgba(255, 255, 255, 0.08)",
justifyContent: "center",
alignItems: "center",
@@ -91,9 +92,9 @@ const TVSeeAllCard: React.FC<{
>
<Ionicons
name='arrow-forward'
size={32}
size={scaleSize(32)}
color='white'
style={{ marginBottom: 8 }}
style={{ marginBottom: scaleSize(8) }}
/>
<Text
style={{
@@ -250,7 +251,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
fontSize: typography.heading,
fontWeight: "700",
color: "#FFFFFF",
marginBottom: 20,
marginBottom: scaleSize(20),
marginLeft: sizes.padding.horizontal,
letterSpacing: 0.5,
}}
@@ -286,8 +287,8 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
backgroundColor: "#262626",
width: itemWidth,
aspectRatio: orientation === "horizontal" ? 16 / 9 : 10 / 15,
borderRadius: 12,
marginBottom: 8,
borderRadius: scaleSize(12),
marginBottom: scaleSize(8),
}}
/>
<View
@@ -328,6 +329,9 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
windowSize={5}
removeClippedSubviews={false}
maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
ListHeaderComponent={
<View style={{ width: sizes.padding.horizontal }} />
}
style={{ overflow: "visible" }}
contentInset={{
left: sizes.padding.horizontal,
@@ -342,6 +346,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
style={{
flexDirection: "row",
alignItems: "center",
width: sizes.padding.horizontal,
}}
>
{isFetchingNextPage && (
@@ -350,7 +355,10 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
marginLeft: itemWidth / 2,
marginRight: ITEM_GAP,
justifyContent: "center",
height: orientation === "horizontal" ? 191 : 315,
height:
orientation === "horizontal"
? scaleSize(191)
: scaleSize(315),
}}
>
<ActivityIndicator size='small' color='white' />

19
components/home/StreamystatsPromotedWatchlists.tv.tsx
View File

@@ -19,10 +19,11 @@ import useRouter from "@/hooks/useAppRouter";
import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import { useSettings } from "@/utils/atoms/settings";
import { scaleSize } from "@/utils/scaleSize";
import { createStreamystatsApi } from "@/utils/streamystats/api";
import type { StreamystatsWatchlist } from "@/utils/streamystats/types";
const SCALE_PADDING = 20;
const SCALE_PADDING = scaleSize(20);
interface WatchlistSectionProps extends ViewProps {
watchlist: StreamystatsWatchlist;
@@ -168,8 +169,8 @@ const WatchlistSection: React.FC<WatchlistSectionProps> = ({
backgroundColor: "#262626",
width: posterSizes.poster,
aspectRatio: 10 / 15,
borderRadius: 12,
marginBottom: 8,
borderRadius: scaleSize(12),
marginBottom: scaleSize(8),
}}
/>
</View>
@@ -286,12 +287,12 @@ export const StreamystatsPromotedWatchlists: React.FC<
<View style={{ overflow: "visible" }} {...props}>
<View
style={{
height: 16,
width: 128,
height: scaleSize(16),
width: scaleSize(128),
backgroundColor: "#262626",
borderRadius: 4,
borderRadius: scaleSize(4),
marginLeft: SCALE_PADDING,
marginBottom: 16,
marginBottom: scaleSize(16),
}}
/>
<View
@@ -309,8 +310,8 @@ export const StreamystatsPromotedWatchlists: React.FC<
backgroundColor: "#262626",
width: posterSizes.poster,
aspectRatio: 10 / 15,
borderRadius: 12,
marginBottom: 8,
borderRadius: scaleSize(12),
marginBottom: scaleSize(8),
}}
/>
</View>

5
components/home/StreamystatsRecommendations.tv.tsx
View File

@@ -18,6 +18,7 @@ import useRouter from "@/hooks/useAppRouter";
import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import { useSettings } from "@/utils/atoms/settings";
import { scaleSize } from "@/utils/scaleSize";
import { createStreamystatsApi } from "@/utils/streamystats/api";
import type { StreamystatsRecommendationsIdsResponse } from "@/utils/streamystats/types";
@@ -220,8 +221,8 @@ export const StreamystatsRecommendations: React.FC<Props> = ({
backgroundColor: "#262626",
width: sizes.posters.poster,
aspectRatio: 10 / 15,
borderRadius: 12,
marginBottom: 8,
borderRadius: scaleSize(12),
marginBottom: scaleSize(8),
}}
/>
</View>

64
components/tv/TVPosterCard.tsx
View File

@@ -21,6 +21,7 @@ import {
} from "@/modules/glass-poster";
import { apiAtom } from "@/providers/JellyfinProvider";
import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
import { scaleSize } from "@/utils/scaleSize";
import { runtimeTicksToMinutes } from "@/utils/time";
export interface TVPosterCardProps {
@@ -225,7 +226,13 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
: null;
return (
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
<View
style={{
flexDirection: "row",
alignItems: "center",
gap: scaleSize(8),
}}
>
{episodeLabel && (
<Text
style={{
@@ -259,7 +266,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
style={{
fontSize: typography.callout,
color: "#9CA3AF",
marginTop: 4,
marginTop: scaleSize(4),
}}
>
{item.ChannelName}
@@ -277,7 +284,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
style={{
fontSize: typography.callout,
color: "#9CA3AF",
marginTop: 4,
marginTop: scaleSize(4),
}}
>
{artist}
@@ -296,7 +303,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
style={{
fontSize: typography.callout,
color: "#9CA3AF",
marginTop: 4,
marginTop: scaleSize(4),
}}
>
{artist}
@@ -312,7 +319,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
style={{
fontSize: typography.callout,
color: "#9CA3AF",
marginTop: 4,
marginTop: scaleSize(4),
}}
>
{item.ChildCount} tracks
@@ -328,7 +335,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
style={{
fontSize: typography.callout,
color: "#9CA3AF",
marginTop: 4,
marginTop: scaleSize(4),
}}
>
{item.ProductionYear}
@@ -344,23 +351,23 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
<View
style={{
position: "absolute",
top: 12,
left: 12,
top: scaleSize(12),
left: scaleSize(12),
backgroundColor: "#FFFFFF",
borderRadius: 8,
borderRadius: scaleSize(8),
flexDirection: "row",
alignItems: "center",
paddingHorizontal: 12,
paddingVertical: 8,
gap: 6,
paddingHorizontal: scaleSize(12),
paddingVertical: scaleSize(8),
gap: scaleSize(6),
zIndex: 10,
}}
>
<Ionicons name='play' size={16} color='#000000' />
<Ionicons name='play' size={scaleSize(16)} color='#000000' />
<Text
style={{
color: "#000000",
fontSize: 14,
fontSize: scaleSize(14),
fontWeight: "700",
}}
>
@@ -382,7 +389,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
justifyContent: "center",
}}
>
<Ionicons name='play-circle' size={56} color='white' />
<Ionicons name='play-circle' size={scaleSize(56)} color='white' />
</View>
) : null;
@@ -395,9 +402,9 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
style={{
width,
aspectRatio,
borderRadius: 24,
borderRadius: scaleSize(24),
backgroundColor: "#1a1a1a",
borderWidth: 2,
borderWidth: scaleSize(2),
borderColor: focused ? "#FFFFFF" : "transparent",
}}
/>
@@ -411,7 +418,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
<GlassPosterView
imageUrl={imageUrl}
aspectRatio={aspectRatio}
cornerRadius={24}
cornerRadius={scaleSize(24)}
progress={progress}
showWatchedIndicator={isWatched}
isFocused={focused}
@@ -431,10 +438,10 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
position: "relative",
width,
aspectRatio,
borderRadius: 24,
borderRadius: scaleSize(4),
overflow: "hidden",
backgroundColor: "#1a1a1a",
borderWidth: 2,
borderWidth: scaleSize(2),
borderColor: focused ? "#FFFFFF" : "transparent",
}}
>
@@ -470,7 +477,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
style={{
fontSize: typography.callout,
color: "#FFFFFF",
marginTop: 4,
marginTop: scaleSize(4),
fontWeight: "500",
}}
>
@@ -498,8 +505,13 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
// Default: show name
return (
<Text
numberOfLines={1}
style={{ fontSize: typography.body, color: "#FFFFFF" }}
numberOfLines={3}
style={{
fontSize: typography.callout,
color: "#FFFFFF",
marginTop: scaleSize(4),
fontWeight: "500",
}}
>
{item.Name}
</Text>
@@ -551,7 +563,7 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
shadowColor: useGlass ? undefined : shadowColor,
shadowOffset: useGlass ? undefined : { width: 0, height: 0 },
shadowOpacity: useGlass ? undefined : focused ? 0.3 : 0,
shadowRadius: useGlass ? undefined : focused ? 12 : 0,
shadowRadius: useGlass ? undefined : focused ? scaleSize(12) : 0,
}}
>
{renderPosterImage()}
@@ -560,7 +572,9 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
{/* Text below poster */}
{showText && (
<View style={{ marginTop: 12, paddingHorizontal: 4 }}>
<View
style={{ marginTop: scaleSize(12), paddingHorizontal: scaleSize(4) }}
>
{item.Type === "Episode" ? (
<>
{renderSubtitle()}