useMediaQuery

Screen-size hooks. useMediaQuery subscribes to a CSS media query. useIsMobile is the shared "below Tailwind's lg breakpoint" check used to switch between desktop and mobile component layouts.

Functions¶

useIsMobile()¶

function useIsMobile(): boolean;

Defined in: src/shared/hooks/useMediaQuery.ts:39

Whether the viewport is mobile-sized (below Tailwind's lg = 1024px, i.e. up to iPad Pro). Matches the lg: breakpoint the shell nav and player layout use, so JS-driven swaps (toolbar, panel-dock icons) stay in sync with the CSS layout.

Returns¶

boolean

useIsSubtitleRail()¶

function useIsSubtitleRail(): boolean;

Defined in: src/shared/hooks/useMediaQuery.ts:49

Whether the subtitle panel should render as a side rail rather than stacked: a desktop-width viewport, or a landscape phone (short height). Matches the lg:/land: rail classes so the JS-driven dock icons stay in sync with the CSS layout. See RAIL_SCREEN in the shared breakpoints.

Returns¶

boolean

useMediaQuery()¶

function useMediaQuery(query): boolean;

Defined in: src/shared/hooks/useMediaQuery.ts:17

Subscribes to a media query and returns whether it currently matches, updating on viewport changes.

Parameters¶

Parameter	Type	Description
`query`	`string`	A CSS media query, e.g. `"(max-width: 639px)"`.

Returns¶

boolean

Whether the query currently matches.