react-video-annotation-tool/dist/app/TwoDVideoAnnotation.js

A React-based video player with built-in annotation features, enabling interactive video tagging and markup for seamless media annotation workflows

import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import Canvas from '../Canvas/Canvas';
import { CanvasProvider } from '../contexts/CanvasProvider';
var TwoDVideoAnnotation = function TwoDVideoAnnotation(_ref) {
  var rootRef = _ref.rootRef,
    videoUrl = _ref.videoUrl,
    shapes = _ref.shapes,
    setShapes = _ref.setShapes,
    selectedShapeTool = _ref.selectedShapeTool,
    hideAnnotations = _ref.hideAnnotations,
    lockEdit = _ref.lockEdit,
    annotationColor = _ref.annotationColor,
    selectedAnnotationData = _ref.selectedAnnotationData,
    videoControls = _ref.videoControls;
  if (!videoUrl) {
    console.error("Provide a video url");
    return null;
  }
  return /*#__PURE__*/React.createElement(CanvasProvider, {
    shapes: shapes,
    setShapes: setShapes
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '0',
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement(Canvas, {
    ref: rootRef,
    url: videoUrl,
    videoControls: videoControls || {},
    selectedShapeTool: selectedShapeTool,
    selectedAnnotationData: selectedAnnotationData,
    hideAnnotations: hideAnnotations || false,
    lockEdit: lockEdit || false,
    annotationColor: annotationColor || '#FF0000'
  })));
};
TwoDVideoAnnotation.propTypes = {
  rootRef: PropTypes.object,
  videoUrl: PropTypes.string.isRequired,
  selectedShapeTool: PropTypes.oneOf(['rectangle', 'circle', 'polygon', null]),
  hideAnnotations: PropTypes.bool,
  lockEdit: PropTypes.bool,
  onSubmit: PropTypes.func,
  shapes: PropTypes.arrayOf(PropTypes.object).isRequired,
  setShapes: PropTypes.func.isRequired,
  annotationColor: PropTypes.string,
  videoControls: PropTypes.object,
  selectedAnnotationData: PropTypes.func
};
export default TwoDVideoAnnotation;