Player

import { AudioHolder, MiniPlayer, PlayerContextProvider, VideoPlayer } from "@arclockproject/common/components/Player";

For examples and live demos, see the Player guide.

AudioHolder

Component

Hidden <audio> element that plays the loaded entry's separate audio file. Keep it mounted (e.g. next to MiniPlayer) so audio keeps playing when the VideoPlayer is unmounted. Must be inside PlayerContextProvider.

Type parameters <metaType, listMetaType>

Props

None.

MiniPlayer

Component

Small player bar fixed to the bottom-right of the screen, with playback controls, a progress bar and a "Resume" button that calls navigate. Clicking it opens a larger panel, which also shows children at the bottom. Shown while usePlayer().internal.miniPlayer is true. Must be inside PlayerContextProvider.

Props

children? (ReactNode)

PlayerContextProvider

Component

Holds the player state shared by VideoPlayer, MiniPlayer and AudioHolder. Put it high in the tree, e.g. around your router, so playback survives page changes. Only its children can use the player.

metaType is the type of each entry's meta, and listMetaType the type of playlistMeta.

Type parameters <metaType, listMetaType>

Props

touchHistory? ((video: videoData<metaType>) => void) — Called when the player moves to another entry without opening its page, e.g. the next playlist entry while the mini player is shown. Use it to record watch history.
navigate? ((link: videoData<metaType>) => void) — Called when the player wants to open an entry's page, e.g. the mini player's "Resume" button or the next playlist entry. Use it to route.
settings? (settings) — If passed, the player uses these settings instead of its own.

usePlayer().internal.settings.set then has no effect, so update this prop to change them.
children? (ReactNode)

Example

<PlayerContextProvider navigate={(video) => router.push(`/watch/${video.id}`)}>
  <App />
  <MiniPlayer />
  <AudioHolder />
</PlayerContextProvider>

VideoPlayer

Component

The main video player: 16:9 video with controls, progress bar, chapters, heatmap, subtitles, speed, fullscreen and audio-only mode. It plays whatever is loaded in the player state, so it can be unmounted and mounted again without stopping (keep AudioHolder mounted for that). Must be inside PlayerContextProvider.

Changes to videoData.id will make the player restart from 0 and play that instead.

Type parameters <metaType, listMetaType>

Props

videoData? (videoData<metaType>) — Entry to load when this player mounts or the id changes. Leave it out to show whatever is already loaded.
isPlaylist (boolean) — false clears the current playlist, so only this entry plays.
errorDisplay? (string) — Not used yet.
chapters (videoChapters[]) — Chapters to mark on the progress bar.
heatmap (Required<videoHeatmap>[]) — "Most watched" graph to draw above the progress bar.
ScrollTriggerDistance? (number) — Not used yet. Use settings.stickyTriggerDistance instead.
showInlineTitle? (boolean) — Show the title over the video. It is always shown in fullscreen.

Example

<VideoPlayer videoData={{
  id: "my-id-300";
  title: "Cat video";
  files: {
    video: "/videos/cat-300.mp4";
    audio: "/videos/cat-300.mp3";
    subtitles: "/videos/cat-300-commentary.vtt";
    thumbnail: "/videos/cat-300.png";
  };
  meta: { ... }; // Your data or null
}} isPlaylist={false} chapters={[]} heatmap={[]} />