"use strict";

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
  return t;
};

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

Object.defineProperty(exports, "__esModule", {
  value: true
});

const react_1 = __importDefault(require("react"));

const exotic_1 = require("exotic");

const deps_1 = require("./deps");

const Source_1 = require("./Source"); // @todo @vishalini
// 1. use exotic (isObj, isFunction)
// 2. move to deps


function fromRefToDom(dom) {
  return dom.current && dom.current.play ? dom.current : dom.value && dom.value.play ? dom.value : dom;
}
/**
 * @type { HTMLMediaElement }
 * @todo - merge with OneGallery/VideoPlayer - this one does not embedded url/youtube
 * https://www.youtube.com/watch?v=r21CMDyPuGo
 * @todo - allow borderless iframe inserting
 * @example <iframe data-reactid="26" frameborder="0" allowfullscreen="1" gesture="media" allow="encrypted-media" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/51SmzJzu-PI?autoplay=0&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3&amp;controls=0&amp;start=0&amp;origin=http%3A%2F%2Ftruthdubstep.audio&amp;enablejsapi=1&amp;widgetid=1" id="widget2"></iframe>
 */


class VideoPlayer extends react_1.default.PureComponent {
  constructor() {
    super(...arguments);
    this.dom = react_1.default.createRef();
  }

  updateRef() {
    const dom = fromRefToDom(this.dom); // !isFunction @todo @vishalini

    if (!dom.pause) {
      console.warn('NOT A VIDEO REF');
      console.log(this);
    } else if (this.props.isPaused === true) {
      console.debug('[Video] pausing');
      dom.pause();
    } else if (this.props.isPaused === false) {
      console.debug('[Video] playing');
      dom.play();
    }
  } // try this https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops


  static getDerivedStateFromProps(nextProps) {
    return {
      isForcingPlayPause: nextProps.isPaused !== undefined,
      isPlaying: nextProps.isPaused === false
    };
  }

  componentDidUpdate() {
    console.debug('[Video] componentDidUpdate');
    this.updateRef();
  }

  render() {
    const _a = this.props,
          {
      loop,
      controls,
      preload,
      src,
      muted,
      //
      className
    } = _a,
          remainingProps = __rest(_a, ["loop", "controls", "preload", "src", "muted", "className"]);

    const list = exotic_1.toArray(src);
    const [firstSource] = list;
    const thumbnailImage = deps_1.alias.toCover(this.props);
    const autoPlay = deps_1.alias.toAutoPlay(this.props);
    const listView = list.map(Source_1.Source.from);
    return react_1.default.createElement("video", Object.assign({
      // onPause={event => {}}
      // onPlay={event => {}}
      // onClick={event => {}}
      // onPlaying={event => {}}
      // onVolumeChange={event => {}}
      // onSeeked={event => {}}
      // onLoad={event => {}}
      // this is styled components
      // @see https://github.com/styled-components/styled-components/blob/master/docs/tips-and-tricks.md
      // innerRef={this.setRef}
      //
      // this is for normal unwrapped react elements
      // @see https://reactjs.org/docs/refs-and-the-dom.html
      // @see https://github.com/facebook/react/pull/11555
      // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
      ref: this.dom,
      className: className,
      poster: thumbnailImage,
      // autoPlay={autoPlay}
      loop: loop,
      preload: preload,
      controls: controls,
      muted: muted,
      src: firstSource
    }, remainingProps), listView);
  }

}

VideoPlayer.defaultProps = {
  autoPlay: false,
  muted: undefined,
  loop: true,
  controls: false,
  isPaused: undefined,
  src: ['//raderain-cdn.sirv.com/T-Giant/Video/Video_T-Giant_Skateboadring.mp4'],
  preload: 'auto',
  className: 'video-inline-player'
};
exports.VideoPlayer = VideoPlayer;
exports.default = VideoPlayer; //# sourceMappingURL=Video.js.map