📦 @livepreso/react-plugin-html5-video

Components

Html5Video

Allows MP4 URLs to be played in the deck using a simple HTML 5 video player.

import React from "react";
import { Html5Video } from "@livepreso/react-plugin-html5-video";

export default function () {
	return (
		<Html5Video
			url="https://site/video.mp4"
			thumbnail="https://site/video-thumbnail.jpg"
			width={1280}
			height={720}
			loop={true}
			startMuted={false}
			autoplay={true}
		/>
	);
}

info

Currently only supports MP4.

Props:

Prop Name	Type	Description
url	String	URL of the video.
thumbnail	String	URL of the thumbnail to use as the video poster.
width	Number	The width of the video. Defaults to 640.
height	Number	The height of the video. Defaults to 360.
autoplay	Boolean	Whether the video should autoplay. Defaults to false.
loop	Boolean	Whether the video should loop. Defaults to false.
startMuted	Boolean	Whether the video should start muted. Defaults to false.
customControls	Node	Components for manually controlling the video. Default video controls will be deactivated.
children	Node	Additional children to render within the component.

ManagedHtml5Video

Similar to Html5Video, but allows for editing of the MP4 video url - and selected settings, in PresoManager. Prep-mode editing is to be added in a future release.

When viewed in PresoManager, the user will be able to click "Edit video" to update video settings.

Editable settings:

• MP4 URL
• Upload thumbnail
• Autoplay
• Loop
• Start muted

import React from "react";
import { ManagedHtml5Video } from "@livepreso/react-plugin-html5-video";

export default function () {
	return (
		<ManagedHtml5Video
			url="https://site/video.mp4"
			videoKey="video"
			thumbnailKey="video_thumbnail"
			width={1280}
			height={720}
			isCompany={true}
			loop={true}
			startMuted={false}
			autoplay={true}
		/>
	);
}

info

Currently only supports MP4.

Props:

Prop Name	Type	Description
videoKey	String	The key the video URL is saved to in CMS Vals (PresoManager).
thumbnailKey	String	The key the thumbnail image URL is saved to in CMS Vals (PresoManager).
url	String	Default URL of the video.
width	Number	The width of the video. Defaults to 640.
height	Number	The height of the video. Defaults to 360.
isCompany	Boolean	Whether the video field is editable in PresoManager - currently required. Defaults to false.
autoplay	Boolean	Whether the video should autoplay. Defaults to false.
loop	Boolean	Whether the video should loop. Defaults to false.
startMuted	Boolean	Whether the video should start muted. Defaults to false.
customControls	Node	Components for manually controlling the video. Default video controls will be deactivated.
children	Node	Additional children to render within the component - intended for custom controls.

Hooks

useVideo()

Retrieves video data stored within a React context.

Includes functions for controlling the video, as well as information on its current state. Useful when making custom controls.

info

Can only be used by components that are children of a Html5Video or ManagedHtml5Video component, or are supplied via the customControls prop.

Name	Type	Description
controls	Object	Functions to control the video (play, pause, seek, etc.) - see below.
state	Object	State of the video (isPlaying, isFullscreen, etc.) - see below.
url	String	URL of the current video.
isEditable	Boolean	Indicates whether the video URL and settings can be edited by the user.
controlsDisabled	Boolean	Indicates whether video playback controls are enabled (e.g. disabled while editing video settings).

Controls:

Control	Type	Description
togglePlayPause	Function	Function to toggle the play/pause state of the video.
play	Function	Function to play the video.
pause	Function	Function to pause the video.
toggleMute	Function	Function to toggle the mute state of the video.
enterFullscreen	Function	Function to enter fullscreen mode for the video.
exitFullscreen	Function	Function to exit fullscreen mode for the video.
seek	Function	Function to seek to a specific point in the video (percentage represented as 0 - 100).

State:

State	Type	Description
isPlaying	Boolean	Indicates whether the video is currently playing.
isFullscreen	Boolean	Indicates whether the video is currently in fullscreen mode.
isMuted	Boolean	Indicates whether the video is currently muted.
hasError	Boolean	Indicates whether there is an error with the video.
canPlay	Boolean	Indicates whether the video is ready to be played.
progress	Number	The current progress of the video (percentage represented as 0 - 100).

Play button example:

Slide:

import React from "react";
import classNames from "classnames";

import { ManagedHtml5Video } from "@livepreso/react-plugin-html5-video";

import { VideoPlayPause } from "./VideoPlayPause.js";

export default function () {
	return (
		<ManagedHtml5Video
			videoKey="video"
			thumbnailKey="video_thumbnail"
			isCompany={true}
			customControls={
				<div>
					<VideoPlayPause />
					<VideoProgress />
				</div>
			}
		/>
	);
}

Play & pause button:

import React from "react";

import PauseIcon from "@material-design-icons/svg/filled/pause.svg";
import PlayIcon from "@material-design-icons/svg/filled/play_arrow.svg";
import classNames from "classnames";

import { useVideo } from "@livepreso/react-plugin-html5-video";

import style from "./VideoControls.module.scss";

export function VideoPlayPause() {
	const { controls = {}, state = {}, controlsDisabled = false } = useVideo();

	function handleClick() {
		if (controlsDisabled) return;
		controls.togglePlayPause();
	}

	return (
		<button
			className={classNames({ [style.isDisabled]: controlsDisabled })}
			onClick={handleClick}
		>
			{state.isPlaying ? <PauseIcon /> : <PlayIcon />}
		</button>
	);
}

Progress bar:

import React, { useRef } from "react";

import classNames from "classnames";

import { useVideo } from "@livepreso/react-plugin-html5-video";

export function VideoProgress() {
	const progressRef = useRef(null);

	const { controls = {}, state = {}, controlsDisabled = false } = useVideo();

	function handleClick(event) {
		if (controlsDisabled) return;
		const rect = progressRef.current.getBoundingClientRect();
		const pos = (event.pageX - rect.left) / rect.width;
		controls.seek(pos * 100);
	}

	return (
		<progress
			ref={progressRef}
			id="progress"
			value={state.progress}
			max="100"
			onClick={handleClick}
		>
			<span id="progress-bar"></span>
		</progress>
	);
}

Contexts

VideoContext

Contains information about the current Html5Video or ManagedHtml5Video component.

import { useContext }, React from "react";
import { VideoContext } from "@livepreso/react-plugin-html5-video";

export default function() {
	const context = useContext(VideoContext);

	const {
		// Functions to control the video (play, pause, seek etc.).
		controls,
		// State of the video (isPlaying, isFullscreen etc.).
		state,
		// URL of the current video
		url,
		// If the video URL and settings can be edited by the user
		isEditable,
		// If video playback controls are enabled (eg. disabled while editing video settings)
		controlsDisabled,

		// ==== The following are used internally ====

		// Function to register the video controls.
		registerControls,
		// Function to update the video state.
		updateState,
	} = context;

	const {
		// Function to toggle the play/pause state of the video.
		togglePlayPause,
		// Function to play the video.
		play,
		// Function to pause the video.
		pause,
		// Function to toggle the mute state of the video.
		toggleMute,
		// Function to enter fullscreen mode for the video.
		enterFullscreen,
		// Function to exit fullscreen mode for the video.
		exitFullscreen
		// Function to seek to a specific point in the video (percentage represented as 0 - 100)
		seek
	} = controls;

	const {
		// Indicates whether the video is currently playing.
		isPlaying,
		// Indicates whether the video is currently in fullscreen mode.
		isFullscreen,
		// Indicates whether the video is currently muted.
		isMuted,
		// Indicates whether there is an error with the video.
		hasError,
		// Indicates whether the video is ready to be played.
		canPlay,
		// The current progress of the video (percentage represented as 0 - 100).
		progress,
} = state;

	// ...
}