fix(tv): font sizes

2026-03-22 17:29:32 +00:00 · 2026-01-19 20:01:00 +01:00
parent f4445c4152
commit 2b36d4bc76
35 changed files with 437 additions and 167 deletions
--- a/components/home/Favorites.tv.tsx
+++ b/components/home/Favorites.tv.tsx
@@ -11,6 +11,7 @@ import heart from "@/assets/icons/heart.fill.png";
 import { Text } from "@/components/common/Text";
 import { InfiniteScrollingCollectionList } from "@/components/home/InfiniteScrollingCollectionList.tv";
 import { Colors } from "@/constants/Colors";
+import { TVTypography } from "@/constants/TVTypography";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";

 const HORIZONTAL_PADDING = 60;
@@ -147,7 +148,7 @@ export const Favorites = () => {
        />
        <Text
          style={{
-            fontSize: 32,
+            fontSize: TVTypography.heading,
            fontWeight: "bold",
            marginBottom: 8,
            color: "#FFFFFF",
@@ -159,7 +160,7 @@ export const Favorites = () => {
          style={{
            textAlign: "center",
            opacity: 0.7,
-            fontSize: 18,
+            fontSize: TVTypography.body,
            color: "#FFFFFF",
          }}
        >
--- a/components/home/Home.tv.tsx
+++ b/components/home/Home.tv.tsx
@@ -31,6 +31,7 @@ import { InfiniteScrollingCollectionList } from "@/components/home/InfiniteScrol
 import { StreamystatsPromotedWatchlists } from "@/components/home/StreamystatsPromotedWatchlists.tv";
 import { StreamystatsRecommendations } from "@/components/home/StreamystatsRecommendations.tv";
 import { Loader } from "@/components/Loader";
+import { TVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useNetworkStatus } from "@/hooks/useNetworkStatus";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
@@ -525,7 +526,7 @@ export const Home = () => {
      >
        <Text
          style={{
-            fontSize: 32,
+            fontSize: TVTypography.heading,
            fontWeight: "bold",
            marginBottom: 8,
            color: "#FFFFFF",
@@ -537,7 +538,7 @@ export const Home = () => {
          style={{
            textAlign: "center",
            opacity: 0.7,
-            fontSize: 18,
+            fontSize: TVTypography.body,
            color: "#FFFFFF",
          }}
        >
@@ -577,7 +578,7 @@ export const Home = () => {
      >
        <Text
          style={{
-            fontSize: 32,
+            fontSize: TVTypography.heading,
            fontWeight: "bold",
            marginBottom: 8,
            color: "#FFFFFF",
@@ -589,7 +590,7 @@ export const Home = () => {
          style={{
            textAlign: "center",
            opacity: 0.7,
-            fontSize: 18,
+            fontSize: TVTypography.body,
            color: "#FFFFFF",
          }}
        >
--- a/components/home/InfiniteScrollingCollectionList.tv.tsx
+++ b/components/home/InfiniteScrollingCollectionList.tv.tsx
@@ -21,6 +21,7 @@ import MoviePoster, {
 } from "@/components/posters/MoviePoster.tv";
 import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
 import { Colors } from "@/constants/Colors";
+import { TVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { SortByOption, SortOrderOption } from "@/utils/atoms/filters";
 import ContinueWatchingPoster, {
@@ -54,12 +55,19 @@ const TVItemCardText: React.FC<{ item: BaseItemDto }> = ({ item }) => {
    <View style={{ marginTop: 12, flexDirection: "column" }}>
      {item.Type === "Episode" ? (
        <>
-          <Text numberOfLines={1} style={{ fontSize: 16, color: "#FFFFFF" }}>
+          <Text
+            numberOfLines={1}
+            style={{ fontSize: TVTypography.callout, color: "#FFFFFF" }}
+          >
            {item.Name}
          </Text>
          <Text
            numberOfLines={1}
-            style={{ fontSize: 14, color: "#9CA3AF", marginTop: 2 }}
+            style={{
+              fontSize: TVTypography.callout,
+              color: "#9CA3AF",
+              marginTop: 2,
+            }}
          >
            {`S${item.ParentIndexNumber?.toString()}:E${item.IndexNumber?.toString()}`}
            {" - "}
@@ -68,10 +76,19 @@ const TVItemCardText: React.FC<{ item: BaseItemDto }> = ({ item }) => {
        </>
      ) : (
        <>
-          <Text numberOfLines={1} style={{ fontSize: 16, color: "#FFFFFF" }}>
+          <Text
+            numberOfLines={1}
+            style={{ fontSize: TVTypography.callout, color: "#FFFFFF" }}
+          >
            {item.Name}
          </Text>
-          <Text style={{ fontSize: 14, color: "#9CA3AF", marginTop: 2 }}>
+          <Text
+            style={{
+              fontSize: TVTypography.callout,
+              color: "#9CA3AF",
+              marginTop: 2,
+            }}
+          >
            {item.ProductionYear}
          </Text>
        </>
@@ -119,7 +136,13 @@ const TVSeeAllCard: React.FC<{
            color='white'
            style={{ marginBottom: 8 }}
          />
-          <Text style={{ fontSize: 18, color: "#FFFFFF", fontWeight: "600" }}>
+          <Text
+            style={{
+              fontSize: TVTypography.callout,
+              color: "#FFFFFF",
+              fontWeight: "600",
+            }}
+          >
            {t("common.seeAll", { defaultValue: "See all" })}
          </Text>
        </View>
@@ -369,7 +392,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
      {/* Section Header */}
      <Text
        style={{
-          fontSize: 22,
+          fontSize: TVTypography.body,
          fontWeight: "600",
          color: "#FFFFFF",
          marginBottom: 16,
@@ -381,7 +404,11 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({

      {isLoading === false && allItems.length === 0 && (
        <Text
-          style={{ color: "#737373", fontSize: 16, marginLeft: SCALE_PADDING }}
+          style={{
+            color: "#737373",
+            fontSize: TVTypography.callout,
+            marginLeft: SCALE_PADDING,
+          }}
        >
          {t("home.no_items")}
        </Text>
@@ -420,7 +447,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
                    color: "#262626",
                    backgroundColor: "#262626",
                    borderRadius: 6,
-                    fontSize: 16,
+                    fontSize: TVTypography.callout,
                  }}
                  numberOfLines={1}
                >
--- a/components/home/StreamystatsPromotedWatchlists.tv.tsx
+++ b/components/home/StreamystatsPromotedWatchlists.tv.tsx
@@ -16,6 +16,7 @@ import MoviePoster, {
 } from "@/components/posters/MoviePoster.tv";
 import SeriesPoster from "@/components/posters/SeriesPoster.tv";
 import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
+import { TVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
@@ -28,10 +29,19 @@ const SCALE_PADDING = 20;
 const TVItemCardText: React.FC<{ item: BaseItemDto }> = ({ item }) => {
  return (
    <View style={{ marginTop: 12, flexDirection: "column" }}>
-      <Text numberOfLines={1} style={{ fontSize: 16, color: "#FFFFFF" }}>
+      <Text
+        numberOfLines={1}
+        style={{ fontSize: TVTypography.callout, color: "#FFFFFF" }}
+      >
        {item.Name}
      </Text>
-      <Text style={{ fontSize: 14, color: "#9CA3AF", marginTop: 2 }}>
+      <Text
+        style={{
+          fontSize: TVTypography.callout,
+          color: "#9CA3AF",
+          marginTop: 2,
+        }}
+      >
        {item.ProductionYear}
      </Text>
    </View>
@@ -145,7 +155,7 @@ const WatchlistSection: React.FC<WatchlistSectionProps> = ({
    <View style={{ overflow: "visible" }} {...props}>
      <Text
        style={{
-          fontSize: 22,
+          fontSize: TVTypography.body,
          fontWeight: "600",
          color: "#FFFFFF",
          marginBottom: 16,
--- a/components/home/StreamystatsRecommendations.tv.tsx
+++ b/components/home/StreamystatsRecommendations.tv.tsx
@@ -16,6 +16,7 @@ import MoviePoster, {
 } from "@/components/posters/MoviePoster.tv";
 import SeriesPoster from "@/components/posters/SeriesPoster.tv";
 import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
+import { TVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
@@ -36,10 +37,19 @@ interface Props extends ViewProps {
 const TVItemCardText: React.FC<{ item: BaseItemDto }> = ({ item }) => {
  return (
    <View style={{ marginTop: 12, flexDirection: "column" }}>
-      <Text numberOfLines={1} style={{ fontSize: 16, color: "#FFFFFF" }}>
+      <Text
+        numberOfLines={1}
+        style={{ fontSize: TVTypography.callout, color: "#FFFFFF" }}
+      >
        {item.Name}
      </Text>
-      <Text style={{ fontSize: 14, color: "#9CA3AF", marginTop: 2 }}>
+      <Text
+        style={{
+          fontSize: TVTypography.callout,
+          color: "#9CA3AF",
+          marginTop: 2,
+        }}
+      >
        {item.ProductionYear}
      </Text>
    </View>
@@ -208,7 +218,7 @@ export const StreamystatsRecommendations: React.FC<Props> = ({
    <View style={{ overflow: "visible" }} {...props}>
      <Text
        style={{
-          fontSize: 22,
+          fontSize: TVTypography.body,
          fontWeight: "600",
          color: "#FFFFFF",
          marginBottom: 16,