var global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof self !== "undefined" ? self : {};
import {
  shouldCreateVideoPlaceholder
} from "./chunk-KK6IAXDC.mjs";
import {
  constants_default,
  utils_default,
  windowWrapper_default
} from "./chunk-D3Y2XBAR.mjs";
import {
  __require,
  __toESM,
  init_define_process_env
} from "./chunk-FOPGQED5.mjs";

// ../../node_modules/@wix/showcase-organize-media/node_modules/pro-gallery/dist/esm/components/item/videos/videoItem.js
init_define_process_env();
import { __assign, __extends } from "tslib";
import React from "react";

// ../../node_modules/@wix/showcase-organize-media/node_modules/pro-gallery/dist/esm/components/item/videos/getStyle.js
init_define_process_env();
function getStyle(isCrop, isWiderThenContainer) {
  var CALC = "calc(100% + 1px)";
  return isCrop ? getCrop() : getNonCrop();
  function getCrop() {
    return {
      height: isWiderThenContainer ? CALC : "auto",
      width: isWiderThenContainer ? "auto" : CALC,
      position: "absolute",
      margin: "auto",
      minHeight: "100%",
      minWidth: "100%",
      left: "-100%",
      right: "-100%",
      top: "-100%",
      bottom: "-100%"
    };
  }
  function getNonCrop() {
    return {
      width: isWiderThenContainer ? CALC : "auto",
      height: isWiderThenContainer ? "100%" : CALC
    };
  }
}

// ../../node_modules/@wix/showcase-organize-media/node_modules/pro-gallery/dist/esm/components/item/videos/videoItem.js
var VideoItem = (
  /** @class */
  function(_super) {
    __extends(VideoItem2, _super);
    function VideoItem2(props) {
      var _this = _super.call(this, props) || this;
      _this.pause = _this.pause.bind(_this);
      _this.play = _this.play.bind(_this);
      _this.playVideoIfNeeded = _this.playVideoIfNeeded.bind(_this);
      _this.isCompMounted = false;
      _this.state = {
        playedOnce: false,
        loadVideo: props.loadVideo || props.shouldPlay,
        isPlaying: false,
        shouldPlay: props.shouldPlay,
        reactPlayerLoaded: false,
        vimeoPlayerLoaded: false,
        hlsPlayerLoaded: false
      };
      return _this;
    }
    VideoItem2.prototype.componentDidMount = function() {
      this.isCompMounted = true;
      this.dynamiclyImportVideoPlayers();
    };
    VideoItem2.prototype.componentWillUnmount = function() {
      this.isCompMounted = false;
    };
    VideoItem2.prototype.UNSAFE_componentWillMount = function() {
      if (this.props.options.videoPlay === "auto") {
        this.dynamiclyImportVideoPlayers();
      }
    };
    VideoItem2.prototype.dynamiclyImportVideoPlayers = function() {
      var _this = this;
      if (!(windowWrapper_default && windowWrapper_default.ReactPlayer)) {
        Promise.resolve().then(() => __toESM(__require(
          /* webpackChunkName: "proGallery_reactPlayer" */
          "./lib-INOZ3X5B.mjs"
        ))).then(function(ReactPlayer) {
          windowWrapper_default.ReactPlayer = ReactPlayer.default;
          if (_this.isCompMounted) {
            _this.setState({ reactPlayerLoaded: true });
            _this.playVideoIfNeeded();
          }
        });
      }
      if (
        //Vimeo player must be loaded by us, problem with requireJS
        !(windowWrapper_default && windowWrapper_default.Vimeo) && this.props.videoUrl && this.props.videoUrl.includes("vimeo.com")
      ) {
        Promise.resolve().then(() => __toESM(__require(
          /* webpackChunkName: "proGallery_vimeoPlayer" */
          "./player.es-EHCCDTX6.mjs"
        ))).then(function(Player) {
          windowWrapper_default.Vimeo = { Player: Player.default };
          if (_this.isCompMounted) {
            _this.setState({ vimeoPlayerLoaded: true });
            _this.playVideoIfNeeded();
          }
        });
      }
      if (
        //Hls player must be loaded by us, problem with requireJS
        !(windowWrapper_default && windowWrapper_default.Hls) && this.isHLSVideo()
      ) {
        {
          Promise.resolve().then(() => __toESM(__require(
            /* webpackChunkName: "proGallery_HlsPlayer" */
            "./hls-X7Z2O2CI.mjs"
          ))).then(function(Player) {
            windowWrapper_default.Hls = Player.default;
            if (_this.isCompMounted) {
              _this.setState({ hlsPlayerLoaded: true });
              _this.playVideoIfNeeded();
            }
          });
        }
      }
    };
    VideoItem2.prototype.isHLSVideo = function() {
      return this.props.videoUrl && (this.props.videoUrl.includes("/hls") || this.props.videoUrl.includes(".m3u8"));
    };
    VideoItem2.prototype.shouldUseHlsPlayer = function() {
      return this.isHLSVideo() && !utils_default.isiOS();
    };
    VideoItem2.prototype.shouldForceVideoForHLS = function() {
      return this.isHLSVideo() && utils_default.isiOS();
    };
    VideoItem2.prototype.UNSAFE_componentWillReceiveProps = function(nextProps) {
      if (nextProps.shouldPlay || nextProps.firstUserInteractionExecuted) {
        this.setState({ loadVideo: true });
      }
      if (nextProps.shouldPlay) {
        this.setState({ shouldPlay: true });
      }
      this.playVideoIfNeeded(nextProps);
    };
    VideoItem2.prototype.componentDidUpdate = function(prevProps) {
      if (prevProps.activeIndex !== this.props.activeIndex) {
        this.fixIFrameTabIndexIfNeeded();
      }
      if (prevProps.type === "image" && this.props.type === "video") {
        this.dynamiclyImportVideoPlayers();
      }
      this.playVideoIfNeeded();
    };
    VideoItem2.prototype.play = function() {
      this.props.playVideo(this.props.idx);
    };
    VideoItem2.prototype.pause = function() {
      this.props.pauseVideo();
    };
    VideoItem2.prototype.isPrefersReducedMotion = function() {
      return windowWrapper_default.matchMedia && windowWrapper_default.matchMedia("(prefers-reduced-motion: reduce)").matches;
    };
    VideoItem2.prototype.playVideoIfNeeded = function(props) {
      if (props === void 0) {
        props = this.props;
      }
      try {
        var playingVideoIdx = props.playingVideoIdx;
        if (playingVideoIdx === this.props.idx && !this.isPlaying && !this.isPrefersReducedMotion()) {
          this.videoElement = this.videoElement || windowWrapper_default.document.querySelector("#video-".concat(this.props.id, " video"));
          if (this.videoElement) {
            this.isPlaying = true;
            this.videoElement.play();
            utils_default.isVerbose() && console.log("[VIDEO] Playing video #" + this.props.idx, this.videoElement);
          }
        }
      } catch (e) {
        console.error("[VIDEO] Could not play video #" + this.props.idx, this.videoElement, e);
      }
    };
    VideoItem2.prototype.createPlayerElement = function() {
      var _this = this;
      if (!(windowWrapper_default && windowWrapper_default.ReactPlayer && (this.state.loadVideo || this.props.playing))) {
        return null;
      }
      var PlayerElement = windowWrapper_default.ReactPlayer;
      var isWiderThenContainer = this.props.style.ratio >= this.props.cropRatio;
      var isCrop = this.props.options.cubeImages && this.props.options.cubeType === "fill";
      var url = this.props.videoUrl ? this.props.videoUrl : this.props.createUrl(constants_default.urlSizes.RESIZED, constants_default.urlTypes.VIDEO);
      var attributes = {
        controlsList: "nodownload",
        disablePictureInPicture: true,
        muted: !this.props.options.videoSound,
        preload: "metadata",
        style: getStyle(isCrop, isWiderThenContainer),
        type: "video/mp4"
      };
      if (shouldCreateVideoPlaceholder(this.props.options)) {
        attributes.poster = this.props.createUrl(constants_default.urlSizes.SCALED, constants_default.urlTypes.HIGH_RES);
      }
      return React.createElement(PlayerElement, { playsinline: true, className: "gallery-item-visible video gallery-item", id: "video-".concat(this.props.id), width: "100%", height: "100%", url, alt: typeof this.props.alt === "string" ? this.props.alt : "untitled video", loop: !!this.props.options.videoLoop, ref: function(player) {
        return _this.video = player;
      }, volume: this.props.options.videoSound ? 0.8 : 0, playing: this.state.shouldPlay && !this.isPrefersReducedMotion(), onEnded: function() {
        _this.setState({ isPlaying: false });
        _this.props.actions.eventsListener(constants_default.events.VIDEO_ENDED, _this.props);
      }, onPause: function() {
        _this.setState({ isPlaying: false });
      }, onError: function(error, data) {
        if (error === "hlsError" && (data === null || data === void 0 ? void 0 : data.details) === "bufferSeekOverHole" && (data === null || data === void 0 ? void 0 : data.fatal) === false) {
          return;
        }
        _this.props.actions.eventsListener(constants_default.events.VIDEO_ERROR, __assign(__assign({}, _this.props), { videoError: error }));
      }, playbackRate: Number(this.props.options.videoSpeed) || 1, onStart: function() {
        if (!_this.state.playedOnce) {
          _this.setState({ playedOnce: true });
        }
      }, onPlay: function() {
        _this.props.actions.eventsListener(constants_default.events.VIDEO_PLAYED, _this.props);
        _this.setState({ isPlaying: true });
      }, onReady: function() {
        _this.playVideoIfNeeded();
        _this.fixIFrameTabIndexIfNeeded();
        _this.props.actions.setItemLoaded();
        _this.setState({ ready: true });
      }, onProgress: function() {
        if (!_this.props.shouldPlay) {
          _this.setState({ shouldPlay: false });
        }
      }, controls: this.props.activeIndex === this.props.idx && this.props.options.showVideoControls, config: {
        file: {
          attributes,
          forceHLS: this.shouldUseHlsPlayer(),
          forceVideo: this.shouldForceVideoForHLS(),
          hlsOptions: {
            startLevel: 2,
            testBandwidth: false,
            abrEwmaDefaultEstimate: 7e6
          }
        }
      }, key: "video-" + this.props.id });
    };
    VideoItem2.prototype.fixIFrameTabIndexIfNeeded = function() {
      if (this.props.isExternalVideo) {
        var videoGalleryItem = windowWrapper_default.document && windowWrapper_default.document.querySelector("#pro-gallery-".concat(this.props.galleryId, " #video-").concat(this.props.id));
        var videoIFrames = videoGalleryItem && videoGalleryItem.getElementsByTagName("iframe");
        var videoIFrame = videoIFrames && videoIFrames[0];
        if (videoIFrame) {
          if (this.props.activeIndex === this.props.idx) {
            videoIFrame.setAttribute("tabIndex", "0");
          } else {
            videoIFrame.setAttribute("tabIndex", "-1");
          }
        }
      }
    };
    VideoItem2.prototype.getVideoContainerStyles = function() {
      var videoContainerStyle = __assign({}, this.props.imageDimensions);
      if (utils_default.deviceHasMemoryIssues() || this.state.ready || !shouldCreateVideoPlaceholder(this.props.options)) {
      } else {
        videoContainerStyle.backgroundImage = "url(".concat(this.props.createUrl(constants_default.urlSizes.RESIZED, constants_default.urlTypes.HIGH_RES), ")");
      }
      return videoContainerStyle;
    };
    VideoItem2.prototype.render = function() {
      var _a = this.props, videoPlaceholder = _a.videoPlaceholder, hover = _a.hover;
      var baseClassName = [
        "gallery-item-content",
        "gallery-item-visible",
        "gallery-item-preloaded",
        "gallery-item-video",
        "gallery-item",
        "video-item"
      ];
      if (utils_default.isiPhone()) {
        baseClassName.push("ios");
      }
      if (this.state.isPlaying) {
        baseClassName.push("playing");
      }
      if (this.state.playedOnce && this.state.ready) {
        baseClassName.push("playedOnce");
      }
      if (this.props.isCurrentHover) {
        baseClassName.push("item-content-hover");
      } else {
        baseClassName.push("item-content-regular");
      }
      var video = React.createElement(
        "div",
        { className: baseClassName.join(" "), "data-hook": "video_container-video-player-element", key: "video_container-" + this.props.id, style: this.getVideoContainerStyles() },
        this.createPlayerElement(),
        this.props.videoPlayButton
      );
      return React.createElement(
        "div",
        { key: "video-and-hover-container" + this.props.idx },
        video,
        shouldCreateVideoPlaceholder(this.props.options) && videoPlaceholder,
        hover
      );
    };
    return VideoItem2;
  }(React.Component)
);
var videoItem_default = VideoItem;
export {
  videoItem_default as default
};
//# sourceMappingURL=videoItem-QVVYW7GT.mjs.map