@saran-ign/video-annotation-tool/dist/app/TwoDVideoAnnotation.js

[](https://www.npmjs.com/package/@saran-ign/video-annotation-tool) [](https://www.npmjs.co

import { jsx as _jsx } from "react/jsx-runtime";
import Canvas from '../Canvas/Canvas';
import { CanvasProvider } from '../contexts/CanvasProvider';
import PropTypes from 'prop-types';
const TwoDVideoAnnotation = ({ rootRef, videoUrl, shapes, setShapes, selectedShapeTool, hideAnnotations, lockEdit, annotationColor, selectedAnnotationData, videoControls, videoTimeAnnotation, showVideoDuration }) => {
    if (!videoUrl) {
        console.error("Provide a video url");
        return null;
    }
    return (_jsx(CanvasProvider, { shapes: shapes, setShapes: setShapes, children: _jsx("div", { style: {
                padding: '0',
                position: 'relative',
            }, children: _jsx(Canvas, { ref: rootRef, url: videoUrl, videoControls: videoControls || {}, 
                //@ts-ignore
                selectedShapeTool: selectedShapeTool, selectedAnnotationData: selectedAnnotationData, hideAnnotations: hideAnnotations || false, lockEdit: lockEdit || false, annotationColor: annotationColor || '#FF0000', videoTimeAnnotation: videoTimeAnnotation, showVideoDuration: showVideoDuration }) }) }));
};
TwoDVideoAnnotation.propTypes = {
    rootRef: PropTypes.object,
    videoUrl: PropTypes.string.isRequired,
    selectedShapeTool: PropTypes.oneOf(['rectangle', 'circle', 'polygon', null]),
    hideAnnotations: PropTypes.bool,
    lockEdit: PropTypes.bool,
    showVideoDuration: PropTypes.bool,
    shapes: PropTypes.arrayOf(PropTypes.object).isRequired,
    setShapes: PropTypes.func.isRequired,
    annotationColor: PropTypes.string,
    videoControls: PropTypes.object,
    selectedAnnotationData: PropTypes.func
};
export default TwoDVideoAnnotation;