Player — Theming & Customization

Preset Themes

Both the Player and StreamCrafter ship with built-in theme presets. Apply with a single prop:

// React
<Player contentId="pk_..." contentType="live" options={{ theme: "dracula" }} />
<StreamCrafter whipUrl="..." theme="tokyo-night" />

<!-- Web Components -->
<fw-player content-id="pk_..." theme="nord"></fw-player>
<fw-streamcrafter whip-url="..." theme="catppuccin"></fw-streamcrafter>

// Vanilla
const player = createPlayer({ ..., theme: "rose-pine" });
const studio = createStreamCrafter({ ..., theme: "gruvbox" });

Available Themes

Theme	Mode	Accent
default	Dark	Blue
light	Light	Blue
neutral-dark	Dark	Gray
tokyo-night	Dark	Purple
tokyo-night-light	Light	Purple
dracula	Dark	Pink
nord	Dark	Frost blue
catppuccin	Dark	Mauve
catppuccin-light	Light	Mauve
gruvbox	Dark	Orange
gruvbox-light	Light	Orange
one-dark	Dark	Blue
github-dark	Dark	Blue
rose-pine	Dark	Rose
solarized	Dark	Yellow
solarized-light	Light	Yellow
ayu-mirage	Dark	Blue-orange

Runtime Theme Switching

// Vanilla player
player.theme = "tokyo-night";

// Vanilla studio
studio.theme = "catppuccin";

Design Tokens (CSS Custom Properties)

All tokens use bare HSL triplets. Consume via hsl(var(--fw-*) / <alpha>) for opacity support.

Player Tokens (--fw-*)

Colors

Token	Purpose
--fw-accent	Primary interactive color
--fw-accent-secondary	Secondary accent
--fw-success	Success indicators
--fw-danger	Error and destructive actions
--fw-warning	Warning indicators
--fw-live	Live badge and pulse

Surfaces

Token	Purpose
--fw-surface	Default background
--fw-surface-deep	Deepest background layer
--fw-surface-raised	Elevated elements (controls, menus)
--fw-surface-active	Active/pressed state

Text

Token	Purpose
--fw-text	Primary text
--fw-text-bright	High-emphasis text
--fw-text-muted	Secondary text
--fw-text-faint	Disabled and hint text

Layout

Token	Purpose
--fw-shadow-color	Shadow HSL base
--fw-radius	Border radius

Studio Tokens (--fw-sc-*)

Token	Purpose
--fw-sc-surface-deep	Deepest background
--fw-sc-surface	Panel surfaces
--fw-sc-surface-raised	Elevated surfaces
--fw-sc-surface-active	Active/pressed state
--fw-sc-border	Border color
--fw-sc-text	Primary text
--fw-sc-text-muted	Secondary text
--fw-sc-accent	Interactive elements
--fw-sc-success	Success/live indicators
--fw-sc-danger	Error/destructive actions

Custom Overrides

CSS (global)

/* Player */
fw-player,
.fw-player-root {
  --fw-accent: 280 70% 60%;
  --fw-surface: 0 0% 10%;
}

/* Studio */
fw-streamcrafter,
.fw-sc-root {
  --fw-sc-accent: 262 80% 60%;
  --fw-sc-surface-deep: 230 15% 12%;
}

JavaScript (per-instance)

// Player
player.setThemeOverrides({
  accent: "262 80% 60%",
  surface: "230 15% 12%",
  radius: "12px",
});
player.clearTheme(); // Reset to preset

// Studio
studio.theme = {
  accent: "262 80% 60%",
  surfaceDeep: "230 15% 12%",
};

Internationalization

Five built-in locale packs: en, es, fr, de, nl.

Player i18n

// React
<Player
  contentId="pk_..."
  contentType="live"
  options={{
    locale: "de",
    translations: {
      play: "Starten",
      pause: "Pausieren",
    },
  }}
/>

// Vanilla
import { getLocalePack } from "@livepeer-frameworks/player-core";
import { createPlayer } from "@livepeer-frameworks/player-core/vanilla";

const player = createPlayer({
  ...,
  locale: "de",
  translations: {
    play: "Starten",
    pause: "Pausieren",
  },
});

// Or fetch specific translation strings
const deTranslations = getLocalePack("de");

<!-- Svelte -->
<Player
  contentId="pk_..."
  contentType="live"
  options={{
    locale: "de",
    translations: {
      play: "Starten",
      pause: "Pausieren",
    },
  }}
/>

// Web component
const player = document.querySelector("fw-player");
player.locale = "de";
player.translations = {
  play: "Starten",
  pause: "Pausieren",
};

Translation overrides are layered over the selected locale pack, so you only need to provide the strings you want to rename for your product.

Studio i18n

// React
<StreamCrafter whipUrl="..." locale="es" />;

// Vanilla
const studio = createStreamCrafter({
  whipUrl: "...",
  locale: "de",
  translations: {
    goLive: "Live gehen",
    stopStreaming: "Stoppen",
  },
});

Configurable Hotkeys

Player Hotkeys

Default player shortcuts:

Shortcut	Action
Space / K	Play/Pause
J / ArrowLeft	Skip back 10s
L / ArrowRight	Skip forward 10s
ArrowUp / ArrowDown	Volume +/- 10%
M	Mute/Unmute
F	Fullscreen
C	Captions
0-9	Seek to 0-90%
, / .	Prev/Next frame (paused)

Mouse / Touch:

Gesture	Action
Double-click	Fullscreen toggle
Double-tap (left/right)	Skip +/- 10s
Click & Hold	2x speed

Live Constraints

Live-only streams disable seeking, skip, 2x hold, and frame-step. Live with DVR buffer enables these features.

Custom player hotkeys

Custom player key maps are present in the core types, but they are not wired through the current player facades. Treat the shortcuts above as fixed defaults for now.

Studio Hotkeys

const studio = createStreamCrafter({
  whipUrl: "...",
  keyMap: {
    toggleStream: ["g"],
    toggleMute: ["m"],
    addCamera: ["c"],
    shareScreen: ["s"],
    toggleSettings: [","],
  },
});