zzarcon / react-video-renderer

Build custom video players effortless

react-video-renderer

Build custom video players effortless

• Render props, get all video state passed down as props.
• Bidirectional flow to render and update the video state in a declarative way.
• No side effects out of the box, you just need to build the UI.
• Actions handling: play, pause, mute, unmute, navigate, etc
• Dependency free, <2KB size
• Cross-browser support, no more browser hacks.

Demo 🎩

https://zzarcon.github.io/react-video-renderer

Installation 🚀

yarn add react-video-renderer

Usage ⛏

Render video state and communicate user interactions up when volume or time changes.

import Video from 'react-video-renderer';

<Video src="https://mysite.com/video.mp4">
  {(video, state, actions) => (
    <div>
      {video}
      <div>{state.currentTime} / {state.duration} / {state.buffered}</div>
      <progress value={state.currentTime} max={state.duration} onChange={actions.navigate} />
      <progress value={state.volume} max={1} onChange={actions.setVolume} />
      <button onClick={actions.play}>Play</button>
      <button onClick={actions.pause}>Pause</button>
      <button onClick={actions.requestFullScreen}>Fullscreen</button>
    </div>
  )}
</Video>

Api 💅

Props

interface Props {
  src: string;
  children: RenderCallback;
  controls?: boolean;
  autoPlay?: boolean;
  preload?: string;
  textTracks?: VideoTextTracks;
}

Render method

type RenderCallback = (reactElement: ReactElement<HTMLMediaElement>, state: VideoState, actions: VideoActions, ref: React.RefObject<HTMLMediaElement>) => ReactNode;

State

interface VideoState {
  status: 'playing' | 'paused' | 'errored';
  currentTime: number;
  currentActiveCues: (kind: VideoTextTrackKind, lang: string) => TextTrackCueList | null | undefined;
  volume: number;
  duration: number;
  buffered: number;
  isMuted: boolean;
  isLoading: boolean;
  error?: MediaError | null;
}

Actions

interface VideoActions {
  play: () => void;
  pause: () => void;
  navigate: (time: number) => void;
  setVolume: (volume: number) => void;
  requestFullscreen: () => void;
  mute: () => void;
  unmute: () => void;
  toggleMute: () => void;
}

Error handling 💥

this is all you need to detect video errors

<Video src="some-error-video.mov">
  {(video, state) => {
    if (state.status === 'errored') {
      return (
        <ErrorWrapper>
          Error
        </ErrorWrapper>
      );
    }

    return (
      <div>
        {video}
      </div>
    )
  }}
</Video>

Loading state ✨

you can still interact with the player regardless if the video is loading or not

<Video src="my-video.mp4">
  {(video, state, actions) => {
    const loadingComponent = state.isLoading ? 'loading...' : undefined;

    return (
      <div>
        {video}
        {loadingComponent}
        <button onClick={actions.play}>Play</button>
        <button onClick={actions.pause}>Pause</button>
      </div>
    )
  }}
</Video>

Video text tracks 🚂

HTML5 text tracks support for videos.

subtitles can be rendered natively, or they can be rendered using VideoState.currentActiveCues property:

<Video 
  src="my-video.mp4"
  textTracks={{
    'subtitles': {
      selectedTrackIndex: 0,
      tracks: [
        { src: 'subtitles-en.vtt', lang: 'en', label: 'Subtitles (english)' },
        { src: 'subtitles-es.vtt', lang: 'es', label: 'Subtitles (spanish)' },
      ]
    }
  }}
>
  {(video, state, actions) => {
    const cues = state.currentActiveCues('subtitles', 'en');
    const subtitles =
      cue && cue.length > 0 ? (
        <div>
          {Array.prototype.map.call(cues, (cue, i) => <span key={i}>{cue.text}</span>)}
        </div>
      ) : undefined;

    return (
      <div>
        {video}
        {subtitles}
        <button onClick={actions.play}>Play</button>
        <button onClick={actions.pause}>Pause</button>
      </div>
    )
  }}
</Video>

Author 🧔

@zzarcon

react-video-renderer's Issues

Implement VideoState:isFullScreen

Upgrade ts-react-toolbox to get proper TS strictness

Default currentTime from props

Defining a starting time is a pretty common scenario, but couldn't be done currently. Also, I couldn't find a way to subscribe to video state changes, so actions could be triggered from outside the player itself.

Not sure if that should be part of an API improvement o improving state using props for default values.

Api

Interfaces

interface VideoRendererProps {
  src: string;
  controls?: boolean;
  preload?: 'metadata' | '';
  poster?: 'string';
}

interface VideoState {
  status: 'playing' | 'paused';
  currentTime: number;
  volume: number;
}

Usage

import Video from 'react-video-renderer';

<Video src="" controls preload="metadata" >
  {(element: HTMLVideoElement, state: VideoState) => {

  }}
</Video>

Error in method name

Fullscreen

This is mistake - actions.requestFullScreen
Must be - actions.requestFullscreen

Add props for muted and playsInline

The video props do not support playsInline or muted which is problematic for autoplay videos and iphones. I am trying to submit a PR but I can't test since I am blocked by #36

Unable to contribute due to upath dependency

I can't work on this library because of upath dependency
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=4 <=9". Got "10.16.1"

Not sure what this is a dependency of.

Hide controls on fullScreen mode

Should this component take of hiding the native controls when controls={false} on full screen mode?

video::-webkit-media-controls {
  display:none !important;
}

The error state is not cleared when the video src is changed

Changing video src does not clear error state. This cause an issue if you try to show some loading indicator inside RVRVideoPlayer component as video state remain "errored" even after video src is available.

Keep previous volume when unmuting the video

Right now we are hardcoding the volume when the user unmutes the video, we should restore it to the value it was before going to muted state:

https://github.com/zzarcon/react-video-renderer/blob/master/src/video.tsx#L160

Implement VideoState::isMutted

Expand current VideoState interface providing a convenient property to let users know if the video is muted or not

Implement VideoActions::togglePlay

This will make integration easier since user doesn't have to worry about the video status and will just pass the togglePlay action

[Feature Request] allow passing of custom ref to component

I am wondering if it could be possible to pass your one ref to the component. This would be useful if you need to access the video tag ref outside the render props fn. For my use case I need to bind hls.js to the video element.

Unable to use callbacks

<Video src={src} onPlay={onPlay}>
        {VideoRenderCallback}
</Video>

Unable to do this since onPlay is an invalid prop. Looking at the source I realize this is the case for all such methods. Can we expose these methods?

I'd be happy to open a PR if you think this is a valid usecase.

Use SyntheticEvent type for event listeners

Instead of:

onVolumeChange = (e: any) => {
    const video = e.target as HTMLVideoElement;

We can do:

import {SyntheticEvent} from 'react';

onVolumeChange = (e: SyntheticEvent<HTMLVideoElement>) => {
    const video = e.currentTarget;

Implement VideoState errored

Extend the VideoState interface with errored case and handle it internally

video dimensions

How can you specify the video height and width?

Supports for HLS

Hi, I believe the current video renderer doesn't support HLS format, is there a way to extend the library with HLS?

Thanks!