Nomnom Pumpernickle Muffins

    @vidispine/vdt-videojs-react

    0.12.0 • Public • Published

    @vidispine/vdt-videojs-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-videojs-react';

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

    Props

    Name Type Default Description
    player React Component null Pass a vdt-videojs Player component ref to use the controls with
    light Bool false Optional - Switch to a light theme for dark-colored user interfaces

    <VideoSeekBar />

    import { VideoSeekBar } from '@vidispine/vdt-videojs-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

    Name Type Default Description
    player React Component null Pass a vdt-videojs Player component ref to use the controls with
    in Number null Optional - Set the "in" point marker in seconds from video start, reactive
    out Number null Optional - Set the "out" point marker in seconds from video start, reactive
    markersEnabled Bool true Optional - Set to false to disable in / out marker functionality, reactive
    regions Array [] Optional - Render region markers with or without
    captions passing an array of Regions, reactive
    const regions = [
      new VideoSeekBar.Region({
        in: 12, // as seconds
        out: 13,
        title: 'Dinosaurs',
        annotation: 'Based on fossil and (...)'
      }),
      new VideoSeekBar.Region({
        in: 18,
        out: 19
      })
    ]
    onRegionClick Function undefined Optional - Trigger a callback that happens upon clicking on a region.
    (region)=>{
      console.log(region, 'clicked on a region')
      // optional - return true to prevent seek
      return true 
    }
    bgColor String '#fafafa' Optional - Customize the seek bar background color
    fillColor String '#f00' Optional - Customize the seek bar fill (progress bar) color

    <VideoTimeCode />

    import { VideoTimeCode } from '@vidispine/vdt-videojs-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

    Name Type Default Description
    player React Component null Pass a vdt-videojs Player component ref to use the timecode with
    hours Number null Optional - set hours, reactive
    minutes Number null Optional - set minutes, reactive
    seconds Number null Optional - set seconds, reactive
    frame Number null Optional - set frame, reactive

    Keywords

    none

    Install

    npm i @vidispine/vdt-videojs-react@0.12.0

    Version

    0.12.0

    License

    UNLICENSED

    Unpacked Size

    92.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • vidispine-owner