auto_awesome Material Design 3
OwnTV Player
Full player + PiP miniplayer · Click around to interact
Full Player
BBC One HD
Planet Earth III — Ep 4: Frozen Peaks
→ Next: The Documentary Show at 21:00
My Playlist → Documentaries → Planet Earth III → Season 1
Episode 4 — Frozen Peaks
2024 58 min 1080p LIVE
12:34
20:15 58:30
Picture-in-Picture / Mini Player
OwnTV
Browse while watching
News Channel
Sports HD
Movie Central
Kids Zone
Documentary
Music Live
Lifestyle
Classic Films
Planet Earth III — Ep 4: Frozen Peaks
20:15 58:30
open_in_full
info
Top Bar & Episode Information
Navigation and content metadata
arrow_back
Back Button
Returns to the previous screen (channel list, series detail, or browse). Uses a 40dp circular icon button with translucent background. On Android TV, maps to the Back key.
40×40dp · circle · rgba background
breadcrumb
Breadcrumb Path
Full navigation path displayed above the title: Playlist → Category → Series → Season. Uses arrow separators (→). Truncates with ellipsis if too long. Helps users understand where they are in the content hierarchy.
11px · medium · 45% opacity
title
Episode Title
Primary content identifier. Format: Episode N — Title Name for series, or Channel Name — Show Title for live. Bold 16px, white, single-line truncated.
16px · semibold · white
live_tv
Metadata & LIVE Badge
Secondary info row: Year · Duration · Resolution · LIVE indicator. The LIVE badge pulses with a white dot animation. For VOD, the LIVE badge is hidden and a quality badge (4K/HDR) may appear instead.
12px · regular · dot-separated
play_circle
Transport Controls
Play, pause, seek, skip
skip_previous
Skip Previous
Goes to the previous episode in the series/playlist. For live channels, switches to the previous channel. Resets progress to 0 and shows the channel info card.
52×52dp · circle · translucent
replay_10
Rewind 10s
Seeks backward by 10 seconds. On long-press (Android TV), seeks backward by 30 seconds. Visual feedback: brief ripple on the button. For live TV, this may be limited by the timeshift buffer.
52×52dp · -10s per tap
pause
Play / Pause
Primary transport button. Toggles between play and pause states. Larger than surrounding buttons (72dp vs 52dp) with a solid white background and dark icon. The icon switches between ▶ and ⏸. Synced across full player and PiP.
72×72dp · solid white · state toggle
forward_10
Forward 10s
Seeks forward by 10 seconds. On long-press, seeks forward by 30 seconds. Same visual feedback as rewind. For live TV, jumps ahead in the timeshift buffer.
52×52dp · +10s per tap
skip_next
Skip Next
Goes to the next episode in the series/playlist. For live channels, switches to the next channel. Resets progress to 0 and triggers the channel info card overlay for 3 seconds. D-Pad right on Android TV remote maps here when focused.
52×52dp · circle · translucent
linear_scale
Seekbar & Progress
Time navigation and buffering state
timeline
Progress Track
4dp tall track with three visual layers: track (darkest, 15% white), buffered (20% white, shows downloaded range), and progress (teal #52DBC8, current position). Clickable anywhere to seek.
4dp height · 3-layer · clickable
touch_app
Thumb & Hover Preview
14dp teal thumb appears on hover. Above the thumb, a floating tooltip shows the time at the hovered position (e.g. "12:34"). The tooltip follows the cursor horizontally and clamps at the edges.
14dp thumb · time tooltip · hover-only
schedule
Time Display
Current position on the left, total duration on the right. Uses tabular-nums for stable digit width. Format: MM:SS for content under 1 hour, H:MM:SS for longer content. Updates in real-time during playback.
12px · medium · tabular-nums
downloading
Buffered Range
Shows the downloaded/buffered portion of the stream as a lighter overlay on the track. Updates as the buffer fills. For live streams, this represents the timeshift window available for rewind.
20% white · dynamic width
tune
Bottom Control Bar
Volume, speed, tracks, zoom, PiP, fullscreen
volume_up
Volume Control
Click icon to mute/unmute. On hover, a horizontal slider expands from the icon (0→90px width animation). Icon changes: 🔊 volume_up (>40%), 🔉 volume_down (1-40%), 🔇 volume_off (0%). Slider thumb is teal 12dp circle. On Android TV, maps to hardware volume keys.
Expandable slider · 3 icon states · mute toggle
speed
Playback Speed
Shows current speed (e.g. "1.0x"). Clicking opens a popup with options: 0.25x, 0.5x, 0.75x, 1.0x (Normal), 1.25x, 1.5x, 2.0x. Selected option shows a teal checkmark. Button label updates to reflect selection. Turns teal when not 1.0x.
7 speed options · checkmark selection · label updates
subtitles
Subtitle Selection
Badge shows available track count. Popup lists: Off + all available tracks. Each track shows a language icon and name (e.g. "English (CC)", "Español", "العربية"). Selected track has teal checkmark. Button turns teal when subtitles are active.
Badge count · Off + tracks · checkmark · CC indicator
audio_track
Audio Track Selection
Badge shows track count. Popup lists all audio tracks with channel info (e.g. "English (5.1)", "Español (Stereo)"). Surround sound icon per track. Selected track has teal checkmark. Useful for multi-language content.
Badge count · channel info · checkmark
aspect_ratio
Player Zoom
6 zoom modes: Fit Screen (default, letterbox), Fill/Crop (crop edges to fill), Stretch (distort to fill), Original 1:1 (pixel-perfect), Force 16:9, Force 4:3. Each with descriptive icon. Button turns teal when non-default.
6 modes · icon per mode · divider between fit/force
picture_in_picture_alt
Picture-in-Picture
Activates PiP mode — video shrinks to a floating mini player that hovers over the browse screen. Player controls are replaced with a compact PiP UI. Video continues playing during the transition. See PiP section for full details.
Floating window · compact controls · continues playback
fullscreen
Fullscreen Toggle
Toggles between fullscreen and windowed mode. Icon switches between fullscreen (⛶) and fullscreen_exit. On Android TV, the app is typically always fullscreen, so this maps to the system immersive mode — hiding the status bar and navigation bar for true full-screen playback.
Icon state toggle · immersive mode on TV
live_tv
Channel Info Overlay
Auto-displayed on channel change
card_membership
Info Card
Frosted glass card (blur backdrop, semi-transparent background) positioned top-left below the top bar. Contains: channel logo (44dp gradient square with initials), channel name, current program title, and next program with start time. Max width 320px.
44dp logo · blur backdrop · 14dp radius
timer
Auto-Show / Auto-Hide
Triggered by: channel change (prev/next), initial channel load. Slides in from the left with a subtle translateX animation. Auto-hides after 3-4 seconds. Can also be triggered by pressing the OK/Enter key on Android TV remote while controls are hidden.
3s display · slide-in animation · dismiss on tap
visibility
Overlay Behavior
Show/hide logic and auto-hide timer
  • Show triggers: Any D-Pad press, tap/click on video area, mouse movement
  • Hide triggers: Click on empty video area, 5-second inactivity timer
  • Auto-hide timer: Resets on any user interaction. When controls are visible, timer starts at 5 seconds. Overlay fades out with a 400ms opacity transition.
  • Gradient masks: Top gradient (85%→transparent, 200px) and bottom gradient (90%→transparent, 260px) ensure text readability over any video content
  • Popup menus: Pause the auto-hide timer while any popup menu is open. Timer resumes when all menus close.
  • Seekbar persistent: On Android TV, the seekbar can optionally remain visible during playback (thin progress line at bottom) even when the full overlay is hidden, so users always know the current position.
  • Touch devices: Single tap toggles overlay. Double tap on left/right half seeks ±10s with a visual ripple indicator.
picture_in_picture_alt
Picture-in-Picture / Mini Player
Compact floating window for multitasking
open_in_full
Expand Button
Top-left icon. Returns to the full player view with a smooth expand animation. Video continues playing during the transition — no buffer interruption. Maps to the Back key on Android TV remote when PiP is focused.
28×28dp · circle · top-left
close
Close Button
Top-right icon. Stops playback and dismisses the PiP window entirely. May show a brief confirmation toast: "Playback stopped". On Android TV, maps to the Back key long-press or a dedicated dismiss action.
28×28dp · circle · top-right
play_arrow
Compact Transport
Three buttons: Skip Previous, Play/Pause (larger, 44dp, solid white), Skip Next. No rewind/forward 10s — too small for accurate seeking. Play/pause state is synced with the main player.
36dp standard · 44dp play · syncs with main
linear_scale
Mini Seekbar
3dp tall progress bar (vs 4dp in full player). Clickable for basic seeking — no thumb or preview tooltip due to size constraints. Time codes shown below in 10px font. Progress is synced with the main player.
3dp height · clickable · no thumb · synced
drag_indicator
Drag Handle
32×4dp pill at the top-center of the PiP window. Visual affordance for repositioning. On touch devices, long-press and drag to move the window. On Android TV, the window snaps to the nearest corner (TL, TR, BL, BR) when moved via D-Pad.
32×4dp pill · 15% white · top-center
open_in_full
Resize Handle
Bottom-right corner icon. On touch devices, drag to resize the PiP window between minimum (240×135dp) and maximum (480×270dp). On Android TV, cycles through 3 preset sizes: small (240×135), medium (320×180), large (480×270).
se-resize cursor · 3 size presets on TV
timer
Auto-Hide & Hover Behavior
PiP controls auto-hide after 3 seconds of inactivity (vs 5s in full player). Hovering over the PiP window reveals controls and resets the timer. Clicking the video area toggles the overlay. The window has a subtle teal glow border on hover to indicate interactivity. Background app content (channel grid, browse screen) remains fully interactive while PiP is active.
3s auto-hide · hover reveals · teal glow on hover
popup
Popup Menu System
Shared behavior for all popup menus
  • Appearance: 16dp rounded corners, frosted glass background (rgba + backdrop-filter blur 20px), subtle white border. Min-width 200px.
  • Animation: Opens with scale(0.96) + translateY(8px) → scale(1) + translateY(0) over 200ms cubic-bezier(0.2, 0, 0, 1). Closes in reverse.
  • Positioning: Anchored above the triggering button. Left-aligned for left-side buttons, right-aligned for right-side buttons. Clamped to viewport edges.
  • Header: 11px uppercase section title in 40% opacity white (e.g. "SUBTITLES", "AUDIO TRACK", "PLAYBACK SPEED", "PLAYER ZOOM").
  • Items: 14px medium weight. Optional leading icon (20dp). Trailing checkmark (18dp, teal, opacity 0→1 for selected). Hover: 8% white background.
  • Selection: Only one item selected at a time. Selected item text turns teal (#52DBC8). Checkmark fades in. Auto-closes 200ms after selection.
  • Dividers: 1px line at 8% white opacity, 16px horizontal margin. Used to separate "Off" from track list, or zoom categories.
  • Exclusivity: Only one popup open at a time. Opening a new popup closes the previous one. Clicking outside any popup closes all.
  • Android TV navigation: D-Pad navigates between items. Enter/OK selects. Back closes the popup without selecting.
settings_remote
Android TV Remote Key Mappings
D-Pad, media keys, and system integration
arrow_back
Back Key
If overlay visible → hide overlay. If popup open → close popup. If PiP active → expand to full player. If full player with overlay hidden → return to previous screen.
select_all
D-Pad / OK
D-Pad navigates focus between controls. OK activates focused button. If overlay hidden, any D-Pad press shows overlay and focuses the last-used control. Left/Right on seekbar adjusts position.
play_arrow
Media Keys
Play/Pause key toggles playback directly (no overlay needed). Rewind/Forward keys seek ±10s. Next/Prev keys skip to next/previous episode or channel. These work even when the overlay is hidden.
volume_up
Volume Keys
Mapped to system volume. Volume overlay shown by the Android TV system (not the app). The app's volume slider syncs with the system volume when the overlay is visible.
palette
Design Tokens
Colors, sizing, and MD3 references
colorize
Color Palette
Primary / Accent: #52DBC8 (teal)
On-Primary: #003730
Primary Container: #004F46
Surface: #0E1513
On-Surface: #DEE4E1
Overlay BG: rgba(0,0,0,0.85-0.9)
Popup BG: rgba(20,28,26,0.95)
straighten
Sizing Reference
Play button: 72×72dp
Center controls: 52×52dp
Bottom controls: 40×40dp (12dp radius)
PiP controls: 36×36dp / 44dp play
Seekbar: 4dp / PiP: 3dp
Popup items: 10px vert padding, 20px horiz
motion_photos_on
Animations
Overlay fade: 400ms ease
Popup open: 200ms cubic-bezier(0.2,0,0,1)
Volume expand: 250ms ease
LIVE pulse: 1.5s ease-in-out infinite
Channel info slide: 300ms ease
font_download
Typography
Font: Inter (400, 500, 600, 700)
Icons: Material Symbols Rounded (FILL: 1)
Episode title: 16px / 600
Breadcrumb: 11px / 500 / 45%
Time codes: 12px / 500 / tabular-nums