"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