@vidispine/vdt-react v24.1.0

@vidispine/vdt-react

See documentation for more detail.

<VideoPlayer />

import { VideoPlayer } from '@vidispine/vdt-react';
import '@vidispine/vdt-react/dist/index.css';

A wrapper for vdt-videojs player.

See vdt-videojs for available Class instance methods that can be used via the ref / additional info.

<VideoControls />

import { VideoControls } from '@vidispine/vdt-react';

Custom external controls for controlling a vdt-videojs Player instance.

Props

<VideoSeekBar />

import { VideoSeekBar } from '@vidispine/vdt-react';

Custom seek bar component for interacting with a vdt-videojs Player instance - has marker (in / out point) support. See vdt-videojs for seek bar API accessible trough a ref.

Props

<VideoTimeCode />

import { VideoTimeCode } from '@vidispine/vdt-react';

VideoTimeCode is a wrapper around vdt-videojs TimeCodeDisplay component, it does not host any logic or concept of framerates regarding the video source itself.

TimeCodeDisplay is really good at rendering numbers and handling input, and is purpose made just for that.

The HTML markup that VideoTimeCode outputs is quite minimal and looks like this:

<div class="vdt-timecode vjs-time-control">
	<input class="hours" tabindex="-1" maxlength="2">
	<span>:</span>
	<input class="minutes" tabindex="-1" maxlength="2">
	<span>:</span>
	<input class="seconds" tabindex="-1" maxlength="2">
	<span>:</span>
	<input class="frame" tabindex="-1" maxlength="2">
</div>

Important note:

VideoTimeCode component is provided without any base styling (CSS); It also does not encapsulate it's own DOM inside a shadow node (as opposed to VideControls and VideoSeekBar components)

This allows for maximum flexibility in external use cases and avoids excessive overriding of styles, however poses a risk for CSS collisions.

So one would style the component based on the project spec; CSS to style it could be as short as:

// use specific selectors to avoid colissions with in-player timecode
.some-div > .vdt-timecode{ 
	margin: 25px auto;
	width: 320px;
	border: 1px solid #777;
	border-radius: 20px;
}

.some-div > .vdt-timecode input{
	display: inline-block;
	color: #556;
	width: 76px;
	height: 50px;
	background: none;
	font-size: 19px;
	text-align: left;
	padding-left: 28px;
	font-family: monospace, sans-serif;
	border: none;
}

Or using @materialui-ui

import { styled } from '@material-ui/core/styles';

const StyledTimecode = styled(({ className, ...props }) => (
  <VideoTimeCode className={className} {...props} />
))({
  '& .vdt-timecode': {
    border: '1px solid #777',
    borderRadius: 20,
    width: 'fit-content',
    marginTop: 8,
    marginBottom: 8,
  },
  '& .vdt-timecode input': {
    display: 'inline-block',
    color: '#556',
    width: 76,
    height: 50,
    background: 'none',
    fontSize: 19,
    textAlign: 'left',
    paddingLeft: 28,
    fontFamily: 'monospace, sans-serif',
    border: 'none',
  },
});

And would yield a component looking like this:

Props