Full-bleed video with scrubber and transport
import * as React from "react";
import { View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, Image, Slider, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { GlowSpot, Mount, StoryScrim, World } from "../shared";
export interface VideoPlayerScreenProps {
title?: string;
/** e.g. "Designing tokens · Episode 3" */
subtitle?: string;
/** Stand-in frame for the video surface. */
frameUrl?: string;
/** 0–100 scrub position. */
position?: number;
positionLabel?: string;
durationLabel?: string;
playing?: boolean;
onPlayPause?: () => void;
onSeek?: (position: number) => void;
onBack?: () => void;
}
/** Seconds → m:ss for the scrubber labels. */
const fmtTime = (sec: number) =>
`${Math.floor(sec / 60)}:${String(Math.floor(sec % 60)).padStart(2, "0")}`;
const RATES = ["1×", "1.25×", "1.5×", "2×"] as const;
/** Video player — full-bleed frame, scrubber, centered transport. */
export function VideoPlayerScreen({
title = "Inside the Orbit Collection",
subtitle = "Season 2 · Behind the shoot",
frameUrl = "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=900&h=1400&fit=crop&q=80&auto=format",
position = 34,
positionLabel = "4:02",
durationLabel = "11:47",
playing = true,
onPlayPause,
onSeek,
onBack,
}: VideoPlayerScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [isPlaying, setIsPlaying] = React.useState(playing);
const [pos, setPos] = React.useState(position);
const [captions, setCaptions] = React.useState(false);
const [rateIdx, setRateIdx] = React.useState(0);
React.useEffect(() => setIsPlaying(playing), [playing]);
React.useEffect(() => setPos(position), [position]);
// Time labels follow the scrubber — 4:02 would lie when pos moves.
const totalSec =
(parseInt(durationLabel.split(":")[0] ?? "0", 10) || 0) * 60 +
(parseInt(durationLabel.split(":")[1] ?? "0", 10) || 0);
const curLabel = totalSec > 0 ? fmtTime((pos / 100) * totalSec) : positionLabel;
return (
<World primary="#FA2D48">
<SafeAreaView className="flex-1 bg-black" edges={["top", "bottom"]}>
<GlowSpot color="#FA2D48" size={240} className="top-[15%] right-[-80px] opacity-25" />
<GlowSpot color="#38BDF8" size={200} className="bottom-[15%] left-[-90px] opacity-20" />
{/* Frame */}
<Image
source={{ uri: frameUrl }}
className="absolute inset-0 h-full w-full"
accessibilityLabel={`${title} frame`}
/>
{/* Chrome scrims — video chrome needs real gradients, not boxes. */}
<View className="absolute inset-x-0 top-0 h-40">
<StoryScrim edge="top" />
</View>
<View className="absolute inset-x-0 bottom-0 h-32">
<StoryScrim edge="bottom" />
</View>
{/* Top chrome — liquid-glass back disc + title. */}
<View className="flex-row items-center gap-3 px-4 pt-2">
<Glass interactive effect="clear" className="rounded-full">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Go back"
className="h-10 w-10"
>
<Icon name="chevron-left" size="md" color="primaryForeground" />
</Button>
</Glass>
<Mount className="flex-1">
<Text className="text-base font-semibold text-white" numberOfLines={1}>
{title}
</Text>
<Text className="text-xs text-white/60" numberOfLines={1}>
{subtitle}
</Text>
</Mount>
{/* Quality pill — players badge their stream. */}
<Glass interactive effect="regular" className="rounded-full">
<View className="px-2.5 py-1">
<Text className="text-[10px] font-bold text-white">1080p</Text>
</View>
</Glass>
</View>
{/* Center transport — back 10 / play / forward 10. */}
<View className="absolute inset-0 items-center justify-center">
<Mount delay={60} className="flex-row items-center gap-10">
<Glass interactive effect="clear" className="rounded-full">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Back 10 seconds"
className="h-14 w-14"
>
<Icon name="skip-back" size="md" color="primaryForeground" />
</Button>
</Glass>
<Button
size="icon"
haptic="medium"
onPress={() => {
haptics.medium();
setIsPlaying((p) => !p);
onPlayPause?.();
}}
accessibilityLabel={isPlaying ? "Pause" : "Play"}
accessibilityState={{ checked: isPlaying }}
className="h-20 w-20 rounded-full bg-[#FA2D48] p-0"
>
<Icon
name={isPlaying ? "pause" : "play"}
size="lg"
color="primaryForeground"
/>
</Button>
<Glass interactive effect="clear" className="rounded-full">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Forward 10 seconds"
className="h-14 w-14"
>
<Icon name="skip-forward" size="md" color="primaryForeground" />
</Button>
</Glass>
</Mount>
</View>
{/* Bottom scrub + actions. */}
<View
className="absolute inset-x-0 bottom-0 px-5"
style={{ paddingBottom: insets.bottom + 16 }}
>
<Slider
value={pos}
onValueChange={(v) => {
setPos(v);
onSeek?.(v);
}}
accessibilityLabel="Seek"
min={0}
max={100}
/>
<Mount delay={120} className="flex-row items-center justify-between">
<Text className="text-xs font-medium text-white/80">
{curLabel}
</Text>
<View className="flex-row items-center gap-4">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => {
haptics.selection();
setCaptions((c) => !c);
}}
accessibilityLabel="Captions"
accessibilityState={{ selected: captions }}
className={cn("h-9 w-9", captions && "bg-white/20")}
>
<Icon name="file-text" size="sm" color="primaryForeground" />
</Button>
<Glass interactive effect="clear" className="rounded-full">
<Button
variant="ghost"
haptic="light"
onPress={() => {
haptics.selection();
setRateIdx((i) => (i + 1) % RATES.length);
}}
accessibilityLabel={`Playback speed ${RATES[rateIdx]}`}
className="h-8 rounded-full px-3"
>
<Text className="text-xs font-semibold text-white">
{RATES[rateIdx]}
</Text>
</Button>
</Glass>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Fullscreen"
className="h-9 w-9"
>
<Icon name="maximize" size="sm" color="primaryForeground" />
</Button>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="AirPlay"
className="h-9 w-9"
>
<Icon name="upload" size="sm" color="primaryForeground" />
</Button>
</View>
<Text className="text-xs font-medium text-white/80">
{durationLabel}
</Text>
</Mount>
</View>
</SafeAreaView>
</World>
);
}
VideoPlayerScreen.displayName = "VideoPlayerScreen";
Recreate the "Video Player Screen" screen in React Native using LumioUI.
Goal: Full-bleed video with scrubber and transport Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.
## Setup
Fastest path — install the screen plus its component deps:
```bash
npx lumioui add media-video-player
```
Or pull just the components: `npx lumioui add button glass icon image slider text`
Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*
Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.
## Components — how, where, when
### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×8
### `glass` — iOS 26 liquid-glass surface — real glass via expo-glass-effect (Expo Go) or @callstack/liquid-glass (dev builds), SVG refraction + specular rim on web, frosted fallback elsewhere; GlassContainer melts adjacent panes into one blob
- `<Glass>` ×5
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×7
### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×1 — Frame
### `slider` — Draggable track with haptic ticks and precise thumb.
- `<Slider>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×6
## Conventions (non-negotiable)
- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.
## Deliverable
One file: `screens/media/video-player.tsx` exporting VideoPlayerScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.
## Reference implementation
The LumioUI source for this screen — reproduce it faithfully:
```tsx
import * as React from "react";
import { View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, Image, Slider, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { GlowSpot, Mount, StoryScrim, World } from "../shared";
export interface VideoPlayerScreenProps {
title?: string;
/** e.g. "Designing tokens · Episode 3" */
subtitle?: string;
/** Stand-in frame for the video surface. */
frameUrl?: string;
/** 0–100 scrub position. */
position?: number;
positionLabel?: string;
durationLabel?: string;
playing?: boolean;
onPlayPause?: () => void;
onSeek?: (position: number) => void;
onBack?: () => void;
}
/** Seconds → m:ss for the scrubber labels. */
const fmtTime = (sec: number) =>
`${Math.floor(sec / 60)}:${String(Math.floor(sec % 60)).padStart(2, "0")}`;
const RATES = ["1×", "1.25×", "1.5×", "2×"] as const;
/** Video player — full-bleed frame, scrubber, centered transport. */
export function VideoPlayerScreen({
title = "Inside the Orbit Collection",
subtitle = "Season 2 · Behind the shoot",
frameUrl = "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=900&h=1400&fit=crop&q=80&auto=format",
position = 34,
positionLabel = "4:02",
durationLabel = "11:47",
playing = true,
onPlayPause,
onSeek,
onBack,
}: VideoPlayerScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [isPlaying, setIsPlaying] = React.useState(playing);
const [pos, setPos] = React.useState(position);
const [captions, setCaptions] = React.useState(false);
const [rateIdx, setRateIdx] = React.useState(0);
React.useEffect(() => setIsPlaying(playing), [playing]);
React.useEffect(() => setPos(position), [position]);
// Time labels follow the scrubber — 4:02 would lie when pos moves.
const totalSec =
(parseInt(durationLabel.split(":")[0] ?? "0", 10) || 0) * 60 +
(parseInt(durationLabel.split(":")[1] ?? "0", 10) || 0);
const curLabel = totalSec > 0 ? fmtTime((pos / 100) * totalSec) : positionLabel;
return (
<World primary="#FA2D48">
<SafeAreaView className="flex-1 bg-black" edges={["top", "bottom"]}>
<GlowSpot color="#FA2D48" size={240} className="top-[15%] right-[-80px] opacity-25" />
<GlowSpot color="#38BDF8" size={200} className="bottom-[15%] left-[-90px] opacity-20" />
{/* Frame */}
<Image
source={{ uri: frameUrl }}
className="absolute inset-0 h-full w-full"
accessibilityLabel={`${title} frame`}
/>
{/* Chrome scrims — video chrome needs real gradients, not boxes. */}
<View className="absolute inset-x-0 top-0 h-40">
<StoryScrim edge="top" />
</View>
<View className="absolute inset-x-0 bottom-0 h-32">
<StoryScrim edge="bottom" />
</View>
{/* Top chrome — liquid-glass back disc + title. */}
<View className="flex-row items-center gap-3 px-4 pt-2">
<Glass interactive effect="clear" className="rounded-full">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Go back"
className="h-10 w-10"
>
<Icon name="chevron-left" size="md" color="primaryForeground" />
</Button>
</Glass>
<Mount className="flex-1">
<Text className="text-base font-semibold text-white" numberOfLines={1}>
{title}
</Text>
<Text className="text-xs text-white/60" numberOfLines={1}>
{subtitle}
</Text>
</Mount>
{/* Quality pill — players badge their stream. */}
<Glass interactive effect="regular" className="rounded-full">
<View className="px-2.5 py-1">
<Text className="text-[10px] font-bold text-white">1080p</Text>
</View>
</Glass>
</View>
{/* Center transport — back 10 / play / forward 10. */}
<View className="absolute inset-0 items-center justify-center">
<Mount delay={60} className="flex-row items-center gap-10">
<Glass interactive effect="clear" className="rounded-full">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Back 10 seconds"
className="h-14 w-14"
>
<Icon name="skip-back" size="md" color="primaryForeground" />
</Button>
</Glass>
<Button
size="icon"
haptic="medium"
onPress={() => {
haptics.medium();
setIsPlaying((p) => !p);
onPlayPause?.();
}}
accessibilityLabel={isPlaying ? "Pause" : "Play"}
accessibilityState={{ checked: isPlaying }}
className="h-20 w-20 rounded-full bg-[#FA2D48] p-0"
>
<Icon
name={isPlaying ? "pause" : "play"}
size="lg"
color="primaryForeground"
/>
</Button>
<Glass interactive effect="clear" className="rounded-full">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Forward 10 seconds"
className="h-14 w-14"
>
<Icon name="skip-forward" size="md" color="primaryForeground" />
</Button>
</Glass>
</Mount>
</View>
{/* Bottom scrub + actions. */}
<View
className="absolute inset-x-0 bottom-0 px-5"
style={{ paddingBottom: insets.bottom + 16 }}
>
<Slider
value={pos}
onValueChange={(v) => {
setPos(v);
onSeek?.(v);
}}
accessibilityLabel="Seek"
min={0}
max={100}
/>
<Mount delay={120} className="flex-row items-center justify-between">
<Text className="text-xs font-medium text-white/80">
{curLabel}
</Text>
<View className="flex-row items-center gap-4">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => {
haptics.selection();
setCaptions((c) => !c);
}}
accessibilityLabel="Captions"
accessibilityState={{ selected: captions }}
className={cn("h-9 w-9", captions && "bg-white/20")}
>
<Icon name="file-text" size="sm" color="primaryForeground" />
</Button>
<Glass interactive effect="clear" className="rounded-full">
<Button
variant="ghost"
haptic="light"
onPress={() => {
haptics.selection();
setRateIdx((i) => (i + 1) % RATES.length);
}}
accessibilityLabel={`Playback speed ${RATES[rateIdx]}`}
className="h-8 rounded-full px-3"
>
<Text className="text-xs font-semibold text-white">
{RATES[rateIdx]}
</Text>
</Button>
</Glass>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Fullscreen"
className="h-9 w-9"
>
<Icon name="maximize" size="sm" color="primaryForeground" />
</Button>
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="AirPlay"
className="h-9 w-9"
>
<Icon name="upload" size="sm" color="primaryForeground" />
</Button>
</View>
<Text className="text-xs font-medium text-white/80">
{durationLabel}
</Text>
</Mount>
</View>
</SafeAreaView>
</World>
);
}
VideoPlayerScreen.displayName = "VideoPlayerScreen";
```
Screen: https://lumioui.dev/screens/media-video-player