mirror of
https://github.com/streamyfin/streamyfin.git
synced 2026-05-22 14:56:38 +01:00
76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import { TVTypographyScale, useSettings } from "@/utils/atoms/settings";
|
|
import { scaleSize } from "@/utils/scaleSize";
|
|
|
|
/**
|
|
* TV Typography Scale
|
|
*
|
|
* Consistent text sizes for TV interface components.
|
|
* Base values are designed for 1920x1080 and scaled to the actual viewport via
|
|
* scaleSize(), then further adjusted by the user's tvTypographyScale setting.
|
|
*/
|
|
|
|
// =============================================================================
|
|
// BASE VALUES (at Default scale)
|
|
// =============================================================================
|
|
|
|
export const TVTypography = {
|
|
/** Hero titles, movie/show names */
|
|
display: 70,
|
|
|
|
/** Episode series name, major headings */
|
|
title: 42,
|
|
|
|
/** Section headers (Cast, Technical Details, From this Series) */
|
|
heading: 32,
|
|
|
|
/** Overview, actor names, card titles, metadata */
|
|
body: 40,
|
|
|
|
/** Secondary text, labels, subtitles */
|
|
callout: 26,
|
|
};
|
|
|
|
export type TVTypographyKey = keyof typeof TVTypography;
|
|
|
|
// =============================================================================
|
|
// SCALING
|
|
// =============================================================================
|
|
|
|
const scaleMultipliers: Record<TVTypographyScale, number> = {
|
|
[TVTypographyScale.Small]: 0.8,
|
|
[TVTypographyScale.Default]: 1.0,
|
|
[TVTypographyScale.Large]: 1.1,
|
|
[TVTypographyScale.ExtraLarge]: 1.2,
|
|
};
|
|
|
|
// =============================================================================
|
|
// HOOKS
|
|
// =============================================================================
|
|
|
|
export type ScaledTVTypography = {
|
|
display: number;
|
|
title: number;
|
|
heading: number;
|
|
body: number;
|
|
callout: number;
|
|
};
|
|
|
|
/**
|
|
* Hook that returns scaled TV typography values based on user settings.
|
|
* Use this instead of the static TVTypography constant for dynamic scaling.
|
|
*/
|
|
export const useScaledTVTypography = (): ScaledTVTypography => {
|
|
const { settings } = useSettings();
|
|
const scale =
|
|
scaleMultipliers[settings.tvTypographyScale] ??
|
|
scaleMultipliers[TVTypographyScale.Default];
|
|
|
|
return {
|
|
display: Math.round(scaleSize(TVTypography.display) * scale),
|
|
title: Math.round(scaleSize(TVTypography.title) * scale),
|
|
heading: Math.round(scaleSize(TVTypography.heading) * scale),
|
|
body: Math.round(scaleSize(TVTypography.body) * scale),
|
|
callout: Math.round(scaleSize(TVTypography.callout) * scale),
|
|
};
|
|
};
|