Info panel

Adds an i button beside the settings menu, which opens a panel about the video.

"use client";import { info } from "react-video-kit/info";import { defaultPlugins, VideoPlayer } from "react-video-kit/player";const plugins = [  info({    eyebrow: "Nature",    title: "The Long Coast",    artwork: "/media/poster.jpg",    facts: ["2024", "TV-PG", "1h 20m", "4K"],    description:      "A year along one of the most remote coastlines on Earth, where swells that started a thousand miles away finally meet land. Filmed from the air, from the shore, and from under the water, it follows the sea through every season, from the still mornings of summer to the storms that reshape the reef each winter.",    credits: [      { role: "Directed by", names: "A. Rivera" },      { role: "Written by", names: ["A. Rivera", "J. Okafor"] },      { role: "Music by", names: "M. Lindqvist" },    ],  }),  ...defaultPlugins(),];export default function Info() {  return <VideoPlayer src="/media/sample-720.mp4" poster="/media/poster.jpg" plugins={plugins} load="visible" />;}

Usage

import { info } from "react-video-kit/info";import { VideoPlayer } from "react-video-kit/player";const plugins = [  info({    eyebrow: "Nature",    title: "The Long Coast",    artwork: "/artwork.jpg",    facts: ["2024", "TV-PG", "1h 20m"],    description: "A year along one of the most remote coastlines on Earth.",    credits: [      { role: "Directed by", names: "A. Rivera" },      { role: "Written by", names: ["A. Rivera", "J. Okafor"] },    ],  }),];<VideoPlayer src="/video.mp4" plugins={plugins} />;

Every option is optional, and whatever you leave out doesn't render. facts is joined into one line. The description can be as long as it needs to be, because the panel scrolls.

To name the video on the player itself, use title, eyebrow, and description too. They're separate because this plugin is only loaded by players that want a panel.

With a playlist

Whatever isn't given here comes from the current playlist item: its title, eyebrow, description, and its thumbnail or poster as the artwork. So details that belong to the whole series can go here, and the rest stays on each item:

const plugins = [playlist({ items }), info({ facts: ["2024", "TV-PG", "6 episodes"] })];

Change what it shows

setInfo replaces everything on the panel, for details that load later:

player.plugin(info).commands.setInfo({ title: "The Long Coast", facts: ["2024"] });

Place the parts yourself

VideoPlayer places the button and the panel through slots. When you compose your own layout, put them wherever you like:

import * as Video from "react-video-kit";import { InfoButton, InfoPanel } from "react-video-kit/info";<Video.Root src="/video.mp4" plugins={plugins}>  <Video.Media />  <InfoPanel />  <Video.Controls>    <Video.PlayPause />    <InfoButton />  </Video.Controls></Video.Root>;

Behaviour

• Playback carries on behind the panel, and the other controls step aside until it closes.
• Focus moves to the text, so the arrow keys scroll it. The hotkeys plugin ignores keys pressed inside, and the idle plugin doesn't hide anything while it's open.
• Esc and the close button close it, and focus goes back to the button that opened it.
• It closes when the source changes, since what's on it was about the last video.
• The artwork doesn't show on small players, where it would crowd the text.
• Nothing renders until it first opens.
• The root has data-info-open while it's open.

API

Options

State

Read it with useVideoState(info, (state) => …).

Commands

Call them with useCommands(info).

Parts