Skip to content
Pinky UI

media

Floating Media Player

A host player can minimize, restore or close without becoming a streaming platform.

  • media
  • player
  • floating
  • layout

Live preview

Host media surface
Lesson 01

Quick usage

usage
import { FloatingMediaPlayer } from "@pinky-ui/systems";

<FloatingMediaPlayer label="Lesson" onPlayPause={setPlaying}>{video}</FloatingMediaPlayer>

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

defaultMode={"inline"}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
mode"inline" | "floating" | "closed"—Controlled player layout state.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Owns layout only; playback and stream cleanup remain with the host.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Persistent nearby lessons or product demos

When not to use

  • Full streaming-player feature sets

Skill

Purpose

FloatingMediaPlayer supplies inline, minimized and closed layout states around a host media player. Use it when a short lesson, demo or podcast should remain available while nearby content is read.

Do not use it as a streaming platform player, force minimization, cover mobile controls or resurrect a player after close. Play state belongs to the host; the component only exposes hooks and layout controls.

Minimize, restore, close and play/pause controls are labeled buttons. Mobile placement stays inside viewport margins and reduced motion changes layout immediately. Pause media when closed and clean up streams in the host implementation.

Open this skill on its own page