@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, video_ref, videoUrl, videoId, 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, video_ref: video_ref, url: videoUrl, videoId: videoId, 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,
    videoId: PropTypes.string,
    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;