MediaControls

Transport controls for any media source: play/pause, seek bar, time, mute and volume, plus optional previous/next and fullscreen. They only report what the user does, so they drive a video, an audio file, a YouTube player or a speaker in another room alike.

import { MediaControls } from 'jarvis-react-ui';

Basic

MediaControls is fully controlled: pass playing, currentTime, duration, volume and muted from your player and handle the callbacks. onSeek fires once when a drag on the seek bar ends, so a player is not flooded with seeks while dragging; the time readout follows the drag meanwhile. Buttons for previous, next and fullscreen appear when you pass their handler.

import { useEffect, useState } from 'react';
import { MediaControls } from 'jarvis-react-ui';

const DURATION = 214;

export default function Basic() {
    const [playing, setPlaying] = useState(false);
    const [time, setTime] = useState(37);
    const [volume, setVolume] = useState(0.7);
    const [muted, setMuted] = useState(false);

    // Stands in for a real player: advances the time while "playing".
    useEffect(() => {
        if (!playing) return;
        const id = setInterval(() => setTime((t) => Math.min(DURATION, t + 1)), 1000);
        return () => clearInterval(id);
    }, [playing]);

    return (
        <MediaControls
            title="Mission briefing · 03"
            playing={playing}
            currentTime={time}
            duration={DURATION}
            volume={volume}
            muted={muted}
            onPlayPause={() => setPlaying(!playing)}
            onSeek={setTime}
            onVolumeChange={setVolume}
            onMutedChange={setMuted}
            onPrevious={() => setTime(0)}
            onNext={() => setTime(DURATION)}
        />
    );
}

Live and minimal

A duration of 0, NaN or Infinity means unknown or live: the seek bar is disabled and LIVE replaces the total time. Without onVolumeChange and onMutedChange the volume controls are hidden.

import { useState } from 'react';
import { MediaControls } from 'jarvis-react-ui';

export default function Live() {
    const [playing, setPlaying] = useState(true);

    return (
        <MediaControls
            size="sm"
            aria-label="Radio controls"
            playing={playing}
            currentTime={0}
            duration={Infinity}
            onPlayPause={() => setPlaying(!playing)}
        />
    );
}

For a ready-made player use MediaPlayer (video and audio files) or YouTubePlayer.

Sound

The buttons play hover_button and click; dragging a slider plays drag_start and drag_end, through the nearest SfxProvider. See Sound effects.

Accessibility

• The controls are a role="group" named Media controls (change it with aria-label). The buttons are named Play / Pause, Mute / Unmute (with aria-pressed), Previous, Next and Fullscreen; the sliders Seek (with the time as aria-valuetext) and Volume.
• Shortcuts while focus is inside the controls: K plays or pauses, M mutes, ← and → seek 5 seconds. Keys a focused slider uses itself are left to it.

API