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

feat(tv): add scalable typography with user-configurable text size

Browse Source
This commit is contained in:
Fredrik Burmester
2026-01-25 22:55:44 +01:00
parent 0c6c20f563
commit 875a017e8c
59 changed files with 712 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/series/TVEpisodeCard.tsx
View File

@@ -7,7 +7,7 @@ import { ProgressBar } from "@/components/common/ProgressBar";
import { Text } from "@/components/common/Text";
import { TVFocusablePoster } from "@/components/tv/TVFocusablePoster";
import { WatchedIndicator } from "@/components/WatchedIndicator";
import { TVTypography } from "@/constants/TVTypography";
import { useScaledTVTypography } from "@/constants/TVTypography";
import { apiAtom } from "@/providers/JellyfinProvider";
import { runtimeTicksToMinutes } from "@/utils/time";
@@ -33,6 +33,7 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
onBlur,
refSetter,
}) => {
const typography = useScaledTVTypography();
const api = useAtomValue(apiAtom);
const thumbnailUrl = useMemo(() => {
@@ -112,7 +113,7 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
{episodeLabel && (
<Text
style={{
fontSize: TVTypography.callout,
fontSize: typography.callout,
color: "#9CA3AF",
fontWeight: "500",
}}
@@ -122,14 +123,10 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
)}
{duration && (
<>
<Text
style={{ color: "#6B7280", fontSize: TVTypography.callout }}
>
<Text style={{ color: "#6B7280", fontSize: typography.callout }}>
•
</Text>
<Text
style={{ fontSize: TVTypography.callout, color: "#9CA3AF" }}
>
<Text style={{ fontSize: typography.callout, color: "#9CA3AF" }}>
{duration}
</Text>
</>
@@ -138,7 +135,7 @@ export const TVEpisodeCard: React.FC<TVEpisodeCardProps> = ({
<Text
numberOfLines={2}
style={{
fontSize: TVTypography.callout,
fontSize: typography.callout,
color: "#FFFFFF",
marginTop: 4,
fontWeight: "500",

9
components/series/TVSeriesHeader.tsx
View File

@@ -8,7 +8,7 @@ import { Dimensions, View } from "react-native";
import { Badge } from "@/components/Badge";
import { Text } from "@/components/common/Text";
import { GenreTags } from "@/components/GenreTags";
import { TVTypography } from "@/constants/TVTypography";
import { useScaledTVTypography } from "@/constants/TVTypography";
import { apiAtom } from "@/providers/JellyfinProvider";
import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
@@ -19,6 +19,7 @@ interface TVSeriesHeaderProps {
}
export const TVSeriesHeader: React.FC<TVSeriesHeaderProps> = ({ item }) => {
const typography = useScaledTVTypography();
const api = useAtomValue(apiAtom);
const logoUrl = useMemo(() => {
@@ -58,7 +59,7 @@ export const TVSeriesHeader: React.FC<TVSeriesHeaderProps> = ({ item }) => {
) : (
<Text
style={{
fontSize: TVTypography.display,
fontSize: typography.display,
fontWeight: "bold",
color: "#FFFFFF",
marginBottom: 16,
@@ -80,7 +81,7 @@ export const TVSeriesHeader: React.FC<TVSeriesHeaderProps> = ({ item }) => {
}}
>
{yearString && (
<Text style={{ color: "white", fontSize: TVTypography.body }}>
<Text style={{ color: "white", fontSize: typography.body }}>
{yearString}
</Text>
)}
@@ -123,7 +124,7 @@ export const TVSeriesHeader: React.FC<TVSeriesHeaderProps> = ({ item }) => {
>
<Text
style={{
fontSize: TVTypography.body,
fontSize: typography.body,
color: "#E5E7EB",
lineHeight: 32,
}}

12
components/series/TVSeriesPage.tsx
View File

@@ -29,7 +29,7 @@ import { getItemNavigation } from "@/components/common/TouchableItemRouter";
import { seasonIndexAtom } from "@/components/series/SeasonPicker";
import { TVEpisodeCard } from "@/components/series/TVEpisodeCard";
import { TVSeriesHeader } from "@/components/series/TVSeriesHeader";
import { TVTypography } from "@/constants/TVTypography";
import { useScaledTVTypography } from "@/constants/TVTypography";
import useRouter from "@/hooks/useAppRouter";
import { useTVSeriesSeasonModal } from "@/hooks/useTVSeriesSeasonModal";
import { useDownload } from "@/providers/DownloadProvider";
@@ -142,6 +142,7 @@ const TVSeasonButton: React.FC<{
onPress: () => void;
disabled?: boolean;
}> = ({ seasonName, onPress, disabled = false }) => {
const typography = useScaledTVTypography();
const [focused, setFocused] = useState(false);
const scale = useRef(new Animated.Value(1)).current;
@@ -190,7 +191,7 @@ const TVSeasonButton: React.FC<{
>
<Text
style={{
fontSize: TVTypography.body,
fontSize: typography.body,
color: focused ? "#000" : "#FFFFFF",
fontWeight: "bold",
}}
@@ -213,6 +214,7 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
allEpisodes = [],
isLoading: _isLoading,
}) => {
const typography = useScaledTVTypography();
const { t } = useTranslation();
const insets = useSafeAreaInsets();
const router = useRouter();
@@ -567,7 +569,7 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
/>
<Text
style={{
fontSize: TVTypography.body,
fontSize: typography.body,
fontWeight: "bold",
color: "#000000",
}}
@@ -591,7 +593,7 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
<View style={{ marginTop: 40, overflow: "visible" }}>
<Text
style={{
fontSize: TVTypography.body,
fontSize: typography.body,
fontWeight: "600",
color: "#FFFFFF",
marginBottom: 16,
@@ -646,7 +648,7 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
<Text
style={{
color: "#737373",
fontSize: TVTypography.callout,
fontSize: typography.callout,
marginLeft: SCALE_PADDING,
}}
>