@saran-ign/react-video-annotation-tool/dist/VideoPlayer/Player.js

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

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { forwardRef, useEffect, useRef } from 'react';
import Hls from 'hls.js';
var Player = /*#__PURE__*/forwardRef(function VideoElem(props, ref) {
  var videoControls = props.videoControls;
  var playerRef = useRef();
  useEffect(function () {
    var videoElement = playerRef.current;
    if (!videoElement) return;

    // Forward ref
    if (ref) ref.current = videoElement;

    // Reset video
    videoElement.removeAttribute('src');
    videoElement.load();
    var hls;
    if (props.url && props.url.endsWith('.m3u8')) {
      if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
        // Native support (Safari)
        videoElement.src = props.url;
      } else if (Hls.isSupported()) {
        hls = new Hls();
        hls.loadSource(props.url);
        hls.attachMedia(videoElement);
        hls.on(Hls.Events.ERROR, function (event, data) {
          console.error('HLS.js error:', data);
        });
      } else {
        console.error('HLS is not supported in this browser.');
      }
    } else {
      videoElement.src = props.url;
    }
    videoElement.crossOrigin = 'anonymous';
    videoElement.loop = true;
    videoElement.autoplay = true;
    var onLoadedData = function onLoadedData() {
      // You can handle any logic when video is ready
    };
    videoElement.addEventListener('loadeddata', onLoadedData);
    return function () {
      videoElement.removeEventListener('loadeddata', onLoadedData);
      if (hls) {
        hls.destroy();
      }
    };
  }, [props === null || props === void 0 ? void 0 : props.parentref, props.url, ref]);
  return /*#__PURE__*/React.createElement("video", _extends({
    style: {
      minHeight: 300,
      objectFit: 'cover',
      minWidth: 500,
      position: 'absolute',
      top: 0,
      left: 0,
      width: props.dimensions.width,
      height: props.dimensions.height
    },
    ref: playerRef
  }, videoControls, {
    preload: "auto",
    controls: false
  }));
});
export default Player;