/*! @name videojs-trimming-controls @version 0.0.0 @license MIT */
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')) :
  typeof define === 'function' && define.amd ? define(['video.js'], factory) :
  (global.videojsTrimmingControls = factory(global.videojs));
}(this, (function (videojs) { 'use strict';

  videojs = videojs && videojs.hasOwnProperty('default') ? videojs['default'] : videojs;

  function _inheritsLoose(subClass, superClass) {
    subClass.prototype = Object.create(superClass.prototype);
    subClass.prototype.constructor = subClass;
    subClass.__proto__ = superClass;
  }

  var version = "0.0.0";

  var Plugin = videojs.getPlugin('plugin'); // Default options for the plugin.

  var defaults = {
    startTrim: 60,
    endTrim: 120,
    limitPlayback: false
  };
  /**
   * An advanced Video.js plugin. For more information on the API
   *
   * See: https://blog.videojs.com/feature-spotlight-advanced-plugins/
   */

  var TrimmingControls =
  /*#__PURE__*/
  function (_Plugin) {
    _inheritsLoose(TrimmingControls, _Plugin);

    /**
     * Create a TrimmingControls plugin instance.
     *
     * @param  {Player} player
     *         A Video.js Player instance.
     *
     * @param  {Object} [options]
     *         An optional options object.
     *
     *         While not a core part of the Video.js plugin architecture, a
     *         second argument of options is a convenient way to accept inputs
     *         from your plugin's caller.
     */
    function TrimmingControls(player, options) {
      var _this;

      // the parent class will add player under this.player
      _this = _Plugin.call(this, player) || this;
      _this.options = videojs.mergeOptions(defaults, options);

      _this.createTrimmingControls();

      player.ready(function () {
        setTimeout(function () {
          _this.updateTrimTimes(_this.options.startTrim, _this.options.endTrim);
        }, 100);
        player.on("timeupdate", function () {
          if (_this.options.limitPlayback && _this.player.currentTime() >= _this.options.endTrim) {
            _this.player.currentTime(_this.options.endTrim);

            _this.player.pause();
          }
        });
        player.on('playing', function () {
          videojs.log('playback began!');

          _this.updateTrimTimes(_this.options.startTrim, _this.options.endTrim);
        });
      });
      return _this;
    }

    var _proto = TrimmingControls.prototype;

    _proto.createTrimmingControls = function createTrimmingControls() {
      var player = this.player;
      var videoJsComponentClass = videojs.getComponent('Component');
      /**
       * Extend vjs button class for quality button.
       */

      var TrimControlBarClass =
      /*#__PURE__*/
      function (_videoJsComponentClas) {
        _inheritsLoose(TrimControlBarClass, _videoJsComponentClas);

        /**
         * Component constructor.
         */
        function TrimControlBarClass() {
          return _videoJsComponentClas.call(this, player, {
            title: player.localize('Trimming Controls')
          }) || this;
        }

        var _proto2 = TrimControlBarClass.prototype;

        _proto2.createEl = function createEl() {
          return videojs.dom.createEl('div', {
            // Prefixing classes of elements within a player with "vjs-" is a convention used in Video.js.
            className: 'vjs-control-bar vjs-trimming-controls',
            dir: 'ltr'
          });
        };

        return TrimControlBarClass;
      }(videoJsComponentClass);

      var videoJSSpacerClass = videojs.getComponent('Spacer');
      var videoJSButtonClass = videojs.getComponent('Button');

      var GoToButtonClass =
      /*#__PURE__*/
      function (_videoJSButtonClass) {
        _inheritsLoose(GoToButtonClass, _videoJSButtonClass);

        function GoToButtonClass(_plugin, _targetPosition, _text) {
          var _this2;

          _this2 = _videoJSButtonClass.call(this, player, {// title: player.localize('Trim Button'), 
            // label: "Trim Here"
          }) || this;
          _this2.trimmingControls = _plugin;
          _this2.targetPosition = _targetPosition;

          _this2.controlText(_text);

          _this2.el().getElementsByClassName('vjs-icon-placeholder')[0].classList += " material-icons";
          return _this2;
        }

        var _proto3 = GoToButtonClass.prototype;

        _proto3.handleClick = function handleClick() {
          if (this.targetPosition == 0) {
            this.player().currentTime(this.trimmingControls.options.startTrim);
          } else if (this.targetPosition == 1) {
            this.player().currentTime(this.trimmingControls.options.endTrim);
          }
        };

        return GoToButtonClass;
      }(videoJSButtonClass);

      var TrimButtonClass =
      /*#__PURE__*/
      function (_videoJSButtonClass2) {
        _inheritsLoose(TrimButtonClass, _videoJSButtonClass2);

        function TrimButtonClass(_plugin, _targetPosition, _text) {
          var _this3;

          _this3 = _videoJSButtonClass2.call(this, player, {// title: player.localize('Trim Button'), 
            // label: "Trim Here"
          }) || this;
          _this3.trimmingControls = _plugin;
          _this3.targetPosition = _targetPosition;

          _this3.controlText(_text);

          _this3.el().getElementsByClassName('vjs-icon-placeholder')[0].classList += " material-icons";
          return _this3;
        }

        var _proto4 = TrimButtonClass.prototype;

        _proto4.handleClick = function handleClick() {
          if (this.targetPosition == 0) {
            this.trimmingControls.updateTrimTimes(this.player().currentTime(), this.trimmingControls.options.endTrim);
          } else if (this.targetPosition == 1) {
            this.trimmingControls.updateTrimTimes(this.trimmingControls.options.startTrim, this.player().currentTime());
          }
        };

        return TrimButtonClass;
      }(videoJSButtonClass);

      var TrimTimeDisplayClass =
      /*#__PURE__*/
      function (_videoJsComponentClas2) {
        _inheritsLoose(TrimTimeDisplayClass, _videoJsComponentClas2);

        function TrimTimeDisplayClass(_defaultTime) {
          var _this4;

          _this4 = _videoJsComponentClas2.call(this, player, {}) || this;

          _this4.updateTimeContent(_defaultTime);

          return _this4;
        }

        var _proto5 = TrimTimeDisplayClass.prototype;

        _proto5.createEl = function createEl() {
          return videojs.dom.createEl('input', {
            // Prefixing classes of elements within a player with "vjs-" is a convention used in Video.js.
            className: 'vjs-time-display'
          });
        };

        _proto5.updateTimeContent = function updateTimeContent(timeInSeconds) {
          videojs.dom.emptyEl(this.el()); //this.controlText(videojs.formatTime(timeInSeconds, 600))
          //videojs.dom.appendContent(this.el(), videojs.formatTime(timeInSeconds, 600));
          //videojs.dom.textContent(this.el(), videojs.formatTime(timeInSeconds, 600));

          this.el().value = videojs.formatTime(timeInSeconds, 600.01);
        };

        return TrimTimeDisplayClass;
      }(videoJsComponentClass);

      var FrameButtonClass =
      /*#__PURE__*/
      function (_videoJSButtonClass3) {
        _inheritsLoose(FrameButtonClass, _videoJSButtonClass3);

        function FrameButtonClass(_plugin, _targetPosition, _text) {
          var _this5;

          _this5 = _videoJSButtonClass3.call(this, player, {// title: player.localize('Trim Button'), 
            // label: "Trim Here"
          }) || this;
          _this5.trimmingControls = _plugin;
          _this5.targetPosition = _targetPosition;

          _this5.controlText(_text);

          _this5.el().getElementsByClassName('vjs-icon-placeholder')[0].classList += " material-icons";
          return _this5;
        }

        var _proto6 = FrameButtonClass.prototype;

        _proto6.handleClick = function handleClick() {
          if (this.targetPosition == 0) {
            this.player().currentTime(this.player().currentTime() - 0.1);
          } else if (this.targetPosition == 1) {
            this.player().currentTime(this.player().currentTime() + 0.1);
          }
        };

        return FrameButtonClass;
      }(videoJSButtonClass);

      var videoJSPlayToggleClass = videojs.getComponent('PlayToggle');

      var playbackEndToggleClass =
      /*#__PURE__*/
      function (_videoJSButtonClass4) {
        _inheritsLoose(playbackEndToggleClass, _videoJSButtonClass4);

        function playbackEndToggleClass(_plugin, _text) {
          var _this6;

          _this6 = _videoJSButtonClass4.call(this, player, {// title: player.localize('Trim Button'), 
            // label: "Trim Here"
          }) || this;
          _this6.trimmingControls = _plugin;

          _this6.controlText(_text);

          _this6.el().getElementsByClassName('vjs-icon-placeholder')[0].classList += " material-icons";
          return _this6;
        }

        var _proto7 = playbackEndToggleClass.prototype;

        _proto7.handleClick = function handleClick() {
          this.trimmingControls.options.limitPlayback = !this.trimmingControls.options.limitPlayback;
          this.toggleClass('playbackLimited');
        };

        return playbackEndToggleClass;
      }(videoJSButtonClass); //Creating Trimming Seek Bar


      this._trimSeekControlBar = new TrimControlBarClass();
      var trimSeekControlBarInstance = player.addChild(this._trimSeekControlBar, {
        componentClass: 'trimControlBar'
      }, player.children().length);
      trimSeekControlBarInstance.addClass('vljs-trim-seek');
      trimSeekControlBarInstance.el().innerHTML = '<div id="trimBarPlaceholderContainer"><div id="trimBarPlaceholder"></div></div>'; // //Spacer
      // this._spacer1 = new videoJSSpacerClass();
      // const spacer1Instance = this._trimSeekControlBar.addChild(this._spacer1, {componentClass: 'spacer'}, 0);
      // spacer1Instance.setAttribute("style", "flex: 0 0 158px");
      // //Spacer
      // this._spacer1 = new videoJSSpacerClass();
      // const spacer2Instance = this._trimSeekControlBar.addChild(this._spacer1, {componentClass: 'spacer'}, 2);
      // spacer2Instance.setAttribute("style", "flex: 0 0 178px");
      //Creating Trimming Controls Bar

      this._trimControlBar = new TrimControlBarClass();
      var trimControlBarInstance = player.addChild(this._trimControlBar, {
        componentClass: 'trimControlBar'
      }, player.children().length);
      trimControlBarInstance.addClass('vljs-trim-buttons'); //Trim Bar Controls order: spacer,GoTo,Time,SetPlayhead,frameadjust,playpause,frameAdjust,setPlayhead,time,GoTo, endplayback
      //Spacer for balance

      this._spacer = new videoJSSpacerClass();

      var spacerInstance = this._trimControlBar.addChild(this._spacer, {
        componentClass: 'spacer'
      }, 0); //Go To start of Trim


      this._startGoToButton = new GoToButtonClass(this, 0, "Go to start of trim segment");

      var startGoToButtonInstance = this._trimControlBar.addChild(this._startGoToButton, {
        componentClass: 'goToButton'
      }, 5);

      startGoToButtonInstance.addClass('vljs-trimming-button');
      startGoToButtonInstance.el().getElementsByClassName('vjs-icon-placeholder')[0].innerText = "skip_previous"; //Create trim start time display

      this._startTrimTimeDisplay = new TrimTimeDisplayClass(this.options.startTrim);

      var startTrimTimeDisplayInstance = this._trimControlBar.addChild(this._startTrimTimeDisplay, {
        componentClass: 'trimTimeDisplay'
      }, 10);

      startTrimTimeDisplayInstance.on("change", function () {
        this.player_.trimmingControls().setTimestamps(startTrimTimeDisplayInstance.el().value, 0);
      }); //Create set start at playhead button

      this._startTrimButton = new TrimButtonClass(this, 0, "Set trim start at playhead");

      var startTrimButtonInstance = this._trimControlBar.addChild(this._startTrimButton, {
        componentClass: 'trimButton'
      }, 20);

      startTrimButtonInstance.addClass('vljs-trimming-button');
      startTrimButtonInstance.el().getElementsByClassName('vjs-icon-placeholder')[0].innerText = "edit"; //Create Frame Back Button

      this._frameBackButton = new FrameButtonClass(this, 0, "Move back 1 frame");

      var frameBackButtonInstance = this._trimControlBar.addChild(this._frameBackButton, {
        componentClass: 'frameButton'
      }, 22);

      frameBackButtonInstance.addClass('vljs-trimming-button');
      frameBackButtonInstance.el().getElementsByClassName('vjs-icon-placeholder')[0].innerText = "fast_rewind"; //Create Play/Pause Button

      this._playPauseButton = new videoJSPlayToggleClass(this.player);

      var playPauseButtonInstance = this._trimControlBar.addChild(this._playPauseButton, {
        componentClass: 'playPauseButton'
      }, 25); //Create Frame Forward Button


      this._frameForwardButton = new FrameButtonClass(this, 1, "Move forward 1 frame");

      var frameForwardButtonInstance = this._trimControlBar.addChild(this._frameForwardButton, {
        componentClass: 'frameButton'
      }, 27);

      frameForwardButtonInstance.addClass('vljs-trimming-button');
      frameForwardButtonInstance.el().getElementsByClassName('vjs-icon-placeholder')[0].innerText = "fast_forward"; //Create set end at playhead button

      this._endTrimButton = new TrimButtonClass(this, 1, "Set trim end at playhead");

      var endTrimButtonInstance = this._trimControlBar.addChild(this._endTrimButton, {
        componentClass: 'trimButton'
      }, 30);

      endTrimButtonInstance.addClass('vljs-trimming-button');
      endTrimButtonInstance.el().getElementsByClassName('vjs-icon-placeholder')[0].innerText = "edit"; //Create trim end time display

      this._endTrimTimeDisplay = new TrimTimeDisplayClass(this.options.endTrim);

      var endTrimTimeDisplayInstance = this._trimControlBar.addChild(this._endTrimTimeDisplay, {
        componentClass: 'trimTimeDisplay'
      }, 40);

      endTrimTimeDisplayInstance.on("change", function () {
        this.player_.trimmingControls().setTimestamps(endTrimTimeDisplayInstance.el().value, 1);
      }); //Go To end of Trim

      this._endGoToButton = new GoToButtonClass(this, 1, "Go to end of trim segment");

      var endGoToButtonInstance = this._trimControlBar.addChild(this._endGoToButton, {
        componentClass: 'goToButton'
      }, 50);

      endGoToButtonInstance.addClass('vljs-trimming-button');
      endGoToButtonInstance.el().getElementsByClassName('vjs-icon-placeholder')[0].innerText = "skip_next"; //End playback at trim endpoint

      this._playbackEndToggle = new playbackEndToggleClass(this, "End playback at trim endpoint");

      var playbackEndToggleInstance = this._trimControlBar.addChild(this._playbackEndToggle, {
        componentClass: 'playbackEndToggle'
      }, 60);

      playbackEndToggleInstance.addClass('vljs-trimming-button');
      playbackEndToggleInstance.el().getElementsByClassName('vjs-icon-placeholder')[0].innerText = "stop";
    };

    _proto.updateTrimTimes = function updateTrimTimes(startValue, endValue) {
      //Update stored values
      this.options.startTrim = startValue;
      this.options.endTrim = endValue; //Update timestamp displays

      this._startTrimTimeDisplay.updateTimeContent(startValue);

      this._endTrimTimeDisplay.updateTimeContent(endValue); //Update slider


      document.getElementById("trimBarPlaceholder").style["marginLeft"] = startValue / this.player.duration() * 100 + "%";
      document.getElementById("trimBarPlaceholder").style["marginRight"] = 100 - endValue / this.player.duration() * 100 + "%";
    };

    _proto.setTimestamps = function setTimestamps(value, index) {
      if (/^\d*:?\d*:?\d*\.?\d*$/.test(value)) {
        if (index === 0) {
          this.updateTrimTimes(this.getSeconds(value), this.options.endTrim);
        } else if (index === 1) {
          this.updateTrimTimes(this.options.startTrim, this.getSeconds(value));
        }
      } else {
        this._startTrimTimeDisplay.updateTimeContent(startValue);

        this._endTrimTimeDisplay.updateTimeContent(endValue);
      }
    };

    _proto.getSeconds = function getSeconds(time) {
      var timeArr = time.split(':'),
          //Array of hours, minutes, and seconds.
      s = 0,
          //Seconds total
      m = 1; //Multiplier

      while (timeArr.length > 0) {
        //Iterate through time segments starting from the seconds,
        s += m * timeArr.pop(); //multiply as  appropriate, and add to seconds total,

        m *= 60; //increase multiplier.
      }

      return s;
    };

    return TrimmingControls;
  }(Plugin); // Define default values for the plugin's `state` object here.


  TrimmingControls.defaultState = {}; // Include the version number.

  TrimmingControls.VERSION = version; // Register the plugin with video.js.

  videojs.registerPlugin('trimmingControls', TrimmingControls);

  return TrimmingControls;

})));