"use strict";

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

const tslib_1 = require("tslib");

const react_1 = tslib_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('[Video] 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
   * @todo if this does not work change it
   */


  static getDerivedStateFromProps(nextProps) {
    return {
      isForcingPlayPause: nextProps.isPaused !== undefined,
      isPlaying: nextProps.isPaused === false
    };
  }
  /**
   * @todo @fixme
   */


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

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

    const list = exotic_1.toArray(src);
    const [firstSource] = list;
    const thumbnailImage = deps_1.alias.toCover(this.props);
    const shouldAutoPlay = 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: shouldAutoPlay,
      loop: shouldLoop,
      preload: preload,
      controls: hasNativeControls,
      muted: muted,
      src: firstSource
    }, remainingProps), listView);
  }

}

VideoPlayer.defaultProps = {
  shouldAutoPlay: false,
  muted: undefined,
  shouldLoop: true,
  hasNativeControls: 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