@clickview/lite 0.0.26-dev.0 → 0.0.26-dev.1

package/dist/scripts/15.chunk.js

@@ -0,0 +1,788 @@
+(window["webpackJsonp_clickview_lite"] = window["webpackJsonp_clickview_lite"] || []).push([[15],{
+
+/***/ "../../libs/shared/src/flight-requests/PlayerRequests.ts":
+/*!***************************************************************************************************!*\
+  !*** C:/ClickView/front-end/clickview/packages/libs/shared/src/flight-requests/PlayerRequests.ts ***!
+  \***************************************************************************************************/
+/*! exports provided: PlayerRequests */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PlayerRequests", function() { return PlayerRequests; });
+/* harmony import */ var _common_src_backbone_enums_HttpVerbs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../common/src/backbone/enums/HttpVerbs */ "../../libs/common/src/backbone/enums/HttpVerbs.ts");
+
+var PlayerRequests = {
+  createViewKey: function createViewKey(id) {
+    return {
+      url: "/api/player/create-view-key",
+      key: "view:key:".concat(id),
+      type: _common_src_backbone_enums_HttpVerbs__WEBPACK_IMPORTED_MODULE_0__["HttpVerbs"].POST,
+      data: {
+        mediaId: id.toString()
+      }
+    };
+  }
+};
+
+/***/ }),
+
+/***/ "../player/src/players/create-clip-player.ts":
+/*!***************************************************!*\
+  !*** ../player/src/players/create-clip-player.ts ***!
+  \***************************************************/
+/*! exports provided: CreateClipPlayer */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CreateClipPlayer", function() { return CreateClipPlayer; });
+/* harmony import */ var _base_player__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./base-player */ "../player/src/players/base-player.ts");
+/* harmony import */ var _plugins_create_clip_plugin_create_clip_plugin__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../plugins/create-clip-plugin/create-clip-plugin */ "../player/src/plugins/create-clip-plugin/create-clip-plugin.ts");
+
+
+class CreateClipPlayer extends _base_player__WEBPACK_IMPORTED_MODULE_0__["BasePlayer"] {
+  constructor(id, options) {
+    super(id, Object.assign(Object.assign({}, options), {
+      playbackRates: null,
+      enableLocalCache: false
+    }));
+  }
+
+  getPlayerClassName() {
+    return 'cv-create-clip-player';
+  }
+
+  configurePlugins() {
+    const {
+      startTime,
+      endTime,
+      minDuration,
+      onChangeStartTime,
+      onChangeEndTime
+    } = this.options;
+    this.player.createClipPlugin({
+      startTime,
+      endTime,
+      minDuration,
+      onChangeStartTime,
+      onChangeEndTime
+    });
+  }
+
+  getSeekBarName() {
+    return 'CreateClipSeekBar';
+  }
+
+}
+
+/***/ }),
+
+/***/ "../player/src/plugins/create-clip-plugin/components/clip-timepoint-selector/clip-timepoint-selector-handle.ts":
+/*!*********************************************************************************************************************!*\
+  !*** ../player/src/plugins/create-clip-plugin/components/clip-timepoint-selector/clip-timepoint-selector-handle.ts ***!
+  \*********************************************************************************************************************/
+/*! exports provided: ClipTimepointSelectorHandle */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ClipTimepointSelectorHandle", function() { return ClipTimepointSelectorHandle; });
+/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ "../../../node_modules/video.js/dist/video.es.js");
+
+const Component = video_js__WEBPACK_IMPORTED_MODULE_0__["default"].getComponent('Component'); // tslint:disable-next-line
+
+const handleSvg = '<svg viewBox="0 0 5 14"><g id="Clips" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Clip-2" transform="translate(-835.000000, -632.000000)" fill="#FFFFFF"><g id="Video-Copy" transform="translate(275.000000, 96.000000)"><g id="Handles" transform="translate(560.000000, 536.000000)"><circle id="Oval" cx="1" cy="1" r="1"></circle><circle id="Oval-Copy-2" cx="1" cy="5" r="1"></circle><circle id="Oval-Copy-4" cx="1" cy="9" r="1"></circle><circle id="Oval-Copy-8" cx="1" cy="13" r="1"></circle><circle id="Oval-Copy" cx="4" cy="1" r="1"></circle><circle id="Oval-Copy-3" cx="4" cy="5" r="1"></circle><circle id="Oval-Copy-5" cx="4" cy="9" r="1"></circle><circle id="Oval-Copy-9" cx="4" cy="13" r="1"></circle></g></g></g></g></svg>';
+class ClipTimepointSelectorHandle extends Component {
+  buildCSSClass() {
+    return `cv-clip-timepoint-handle ${super.buildCSSClass()}`;
+  }
+
+  createEl(tagName, properties, attributes) {
+    return super.createEl(tagName, Object.assign(Object.assign({}, properties), {
+      className: this.buildCSSClass(),
+      innerHTML: handleSvg
+    }), attributes);
+  }
+
+  isEventTarget(e) {
+    return this.el().contains(e.target);
+  }
+
+}
+
+/***/ }),
+
+/***/ "../player/src/plugins/create-clip-plugin/components/clip-timepoint-selector/clip-timepoint-selector.scss":
+/*!****************************************************************************************************************!*\
+  !*** ../player/src/plugins/create-clip-plugin/components/clip-timepoint-selector/clip-timepoint-selector.scss ***!
+  \****************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
+/***/ "../player/src/plugins/create-clip-plugin/components/clip-timepoint-selector/clip-timepoint-selector.ts":
+/*!**************************************************************************************************************!*\
+  !*** ../player/src/plugins/create-clip-plugin/components/clip-timepoint-selector/clip-timepoint-selector.ts ***!
+  \**************************************************************************************************************/
+/*! exports provided: ClipTimepointSelector */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ClipTimepointSelector", function() { return ClipTimepointSelector; });
+/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ "../../../node_modules/video.js/dist/video.es.js");
+/* harmony import */ var _clip_timepoint_selector_handle__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./clip-timepoint-selector-handle */ "../player/src/plugins/create-clip-plugin/components/clip-timepoint-selector/clip-timepoint-selector-handle.ts");
+/* harmony import */ var _clip_timepoint_selector_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./clip-timepoint-selector.scss */ "../player/src/plugins/create-clip-plugin/components/clip-timepoint-selector/clip-timepoint-selector.scss");
+/* harmony import */ var _clip_timepoint_selector_scss__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_clip_timepoint_selector_scss__WEBPACK_IMPORTED_MODULE_2__);
+
+const Component = video_js__WEBPACK_IMPORTED_MODULE_0__["default"].getComponent('Component');
+
+
+class ClipTimepointSelector extends Component {
+  constructor(player, options) {
+    super(player, options);
+    this.dragStartActive = false;
+    this.dragEndActive = false;
+    this.dragSliderActive = false;
+    this.dragSliderCurrentPosition = null;
+    this.minDuration = Math.min(player.duration(), this.options_.minDuration);
+    this.setStartTime(options.startTime, false);
+    this.setEndTime(options.endTime, false);
+    this.startHandle = new _clip_timepoint_selector_handle__WEBPACK_IMPORTED_MODULE_1__["ClipTimepointSelectorHandle"](this.player(), options);
+    this.startHandle.addClass('cv-clip-start-handle');
+    this.addChild(this.startHandle);
+    this.endHandle = new _clip_timepoint_selector_handle__WEBPACK_IMPORTED_MODULE_1__["ClipTimepointSelectorHandle"](this.player(), options);
+    this.endHandle.addClass('cv-clip-end-handle');
+    this.addChild(this.endHandle);
+    this.on(this.player(), 'update:clip:start:time', ({
+      time
+    }) => this.setStartTime(time));
+    this.on(this.player(), 'update:clip:end:time', ({
+      time
+    }) => this.setEndTime(time));
+    this.bindDragListeners();
+    this.update();
+  }
+
+  createEl() {
+    return super.createEl('div', {
+      className: 'cv-clip-timepoint-selector'
+    }, {});
+  }
+
+  update() {
+    this.options_.onChangeStartTime(this.startTime);
+    this.options_.onChangeEndTime(this.endTime);
+    this.requestAnimationFrame(() => {
+      this.setStartOffset();
+      this.setWidth();
+    });
+  }
+
+  setStartTime(time, shouldUpdate = true) {
+    if (isNaN(time)) return;
+    const currentEndTime = this.endTime || this.player().duration();
+    const maxStartTime = currentEndTime - this.minDuration;
+    if (time > maxStartTime) time = maxStartTime;
+    if (time < 0) time = 0;
+    this.startTime = time;
+    if (this.endTime && this.endTime - this.startTime < this.minDuration) this.setEndTime(this.startTime + this.minDuration);
+    /**
+     * Seek player to the clip start time.
+     */
+
+    this.player().currentTime(this.startTime);
+    if (shouldUpdate) this.update();
+  }
+
+  setEndTime(time, shouldUpdate = true) {
+    if (isNaN(time)) return;
+    const currentStartTime = this.startTime || 0;
+    const minEndTime = currentStartTime + this.minDuration;
+    if (time < minEndTime) time = minEndTime;
+    if (time > this.player().duration()) time = this.player().duration();
+    this.endTime = time;
+    if (this.startTime && this.endTime - this.startTime < this.minDuration) this.setStartTime(this.endTime - this.minDuration);
+    if (shouldUpdate) this.update();
+  }
+
+  bindDragListeners() {
+    this.dragStart = this.dragStart.bind(this);
+    this.dragEnd = this.dragEnd.bind(this);
+    this.drag = this.drag.bind(this);
+
+    const bindListeners = el => {
+      const options = {
+        passive: true
+      };
+      el.addEventListener('touchstart', this.dragStart, options);
+      el.addEventListener('touchend', this.dragEnd, options);
+      el.addEventListener('touchmove', this.drag, options);
+      el.addEventListener('mousedown', this.dragStart, options);
+      el.addEventListener('mouseup', this.dragEnd, options);
+      el.addEventListener('mousemove', this.drag, options);
+      this.player().on('dispose', () => {
+        el.removeEventListener('touchstart', this.dragStart);
+        el.removeEventListener('touchend', this.dragEnd);
+        el.removeEventListener('touchmove', this.drag);
+        el.removeEventListener('mousedown', this.dragStart);
+        el.removeEventListener('mouseup', this.dragEnd);
+        el.removeEventListener('mousemove', this.drag);
+      });
+    };
+    /**
+     * Bind event listeners to control bar el so that we can continue
+     * to capture drag events if the cursor is dragged outside
+     * of this component.
+     */
+
+
+    bindListeners(this.player().controlBar.el());
+    bindListeners(this.el());
+  }
+
+  dragStart(e) {
+    if (this.startHandle.isEventTarget(e)) {
+      e.stopImmediatePropagation();
+      this.dragStartActive = true;
+    }
+
+    if (this.endHandle.isEventTarget(e)) {
+      e.stopImmediatePropagation();
+      this.dragEndActive = true;
+    }
+
+    if (e.target === this.el()) {
+      e.stopImmediatePropagation();
+      this.dragSliderActive = true;
+      this.dragSliderCurrentPosition = this.getPosition(e);
+    }
+  }
+
+  dragEnd() {
+    this.setStartTime(Math.floor(this.startTime));
+    this.setEndTime(Math.ceil(this.endTime));
+    this.dragStartActive = false;
+    this.dragEndActive = false;
+    this.dragSliderActive = false;
+    this.dragSliderCurrentPosition = null;
+  }
+
+  drag(e) {
+    if (!this.dragStartActive && !this.dragEndActive && !this.dragSliderActive || !video_js__WEBPACK_IMPORTED_MODULE_0__["default"].dom.isSingleLeftClick(e)) return;
+    const position = this.getPosition(e);
+    const timepoint = position * this.player().duration();
+    if (this.dragStartActive) this.handleStartHandleDrag(timepoint);
+    if (this.dragEndActive) this.handleEndHandleDrag(timepoint);
+    if (this.dragSliderActive) this.handleSliderDrag(position);
+  }
+
+  handleStartHandleDrag(timepoint) {
+    this.setStartTime(timepoint);
+  }
+
+  handleEndHandleDrag(timepoint) {
+    this.setEndTime(timepoint);
+  }
+
+  handleSliderDrag(position) {
+    const timeDifference = (position - this.dragSliderCurrentPosition) * this.player().duration();
+    const newStartTime = this.startTime + timeDifference;
+    const newEndTime = this.endTime + timeDifference;
+    /**
+     * Don't move if the clip is already at the beginning and/or end
+     * of the video.
+     */
+
+    if (newStartTime <= 0 || newEndTime >= this.player().duration()) return;
+    this.dragSliderCurrentPosition = position;
+    this.setStartTime(newStartTime);
+    this.setEndTime(newEndTime);
+  }
+
+  getPosition(e) {
+    return video_js__WEBPACK_IMPORTED_MODULE_0__["default"].dom.getPointerPosition(this.el_.parentNode, e).x;
+  }
+
+  setStartOffset() {
+    this.el_.style.marginLeft = `${this.getPercentage(this.startTime)}%`;
+  }
+
+  setWidth() {
+    this.el_.style.width = `${this.getPercentage(this.endTime - this.startTime)}%`;
+  }
+
+  getPercentage(time) {
+    return +(time / this.player().duration() * 100).toFixed(4);
+  }
+
+}
+
+/***/ }),
+
+/***/ "../player/src/plugins/create-clip-plugin/components/create-clip-seek-bar/create-clip-seek-bar.scss":
+/*!**********************************************************************************************************!*\
+  !*** ../player/src/plugins/create-clip-plugin/components/create-clip-seek-bar/create-clip-seek-bar.scss ***!
+  \**********************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
+/***/ "../player/src/plugins/create-clip-plugin/components/create-clip-seek-bar/create-clip-seek-bar.ts":
+/*!********************************************************************************************************!*\
+  !*** ../player/src/plugins/create-clip-plugin/components/create-clip-seek-bar/create-clip-seek-bar.ts ***!
+  \********************************************************************************************************/
+/*! exports provided: CreateClipSeekBar */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CreateClipSeekBar", function() { return CreateClipSeekBar; });
+/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ "../../../node_modules/video.js/dist/video.es.js");
+/* harmony import */ var _clip_timepoint_selector_clip_timepoint_selector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../clip-timepoint-selector/clip-timepoint-selector */ "../player/src/plugins/create-clip-plugin/components/clip-timepoint-selector/clip-timepoint-selector.ts");
+/* harmony import */ var _create_clip_seek_bar_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./create-clip-seek-bar.scss */ "../player/src/plugins/create-clip-plugin/components/create-clip-seek-bar/create-clip-seek-bar.scss");
+/* harmony import */ var _create_clip_seek_bar_scss__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_create_clip_seek_bar_scss__WEBPACK_IMPORTED_MODULE_2__);
+
+const SeekBar = video_js__WEBPACK_IMPORTED_MODULE_0__["default"].getComponent('SeekBar');
+
+
+class CreateClipSeekBar extends SeekBar {
+  constructor(player, options) {
+    super(player, options);
+    this.addClass('cv-create-clip-seek-bar');
+  }
+
+  initialize(options) {
+    const timepointSelector = new _clip_timepoint_selector_clip_timepoint_selector__WEBPACK_IMPORTED_MODULE_1__["ClipTimepointSelector"](this.player(), options);
+    this.addChild(timepointSelector);
+  }
+
+}
+CreateClipSeekBar.prototype.options_ = {
+  children: ['playProgressBar'],
+  barName: 'playProgressBar'
+}; // MouseTimeDisplay tooltips should not be added to a player on mobile devices
+
+if (!video_js__WEBPACK_IMPORTED_MODULE_0__["default"].browser.IS_IOS && !video_js__WEBPACK_IMPORTED_MODULE_0__["default"].browser.IS_ANDROID) {
+  CreateClipSeekBar.prototype.options_.children.splice(1, 0, 'mouseTimeDisplay');
+}
+
+video_js__WEBPACK_IMPORTED_MODULE_0__["default"].registerComponent('CreateClipSeekBar', CreateClipSeekBar);
+
+/***/ }),
+
+/***/ "../player/src/plugins/create-clip-plugin/create-clip-plugin.ts":
+/*!**********************************************************************!*\
+  !*** ../player/src/plugins/create-clip-plugin/create-clip-plugin.ts ***!
+  \**********************************************************************/
+/*! no exports provided */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var video_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! video.js */ "../../../node_modules/video.js/dist/video.es.js");
+/* harmony import */ var _components_create_clip_seek_bar_create_clip_seek_bar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/create-clip-seek-bar/create-clip-seek-bar */ "../player/src/plugins/create-clip-plugin/components/create-clip-seek-bar/create-clip-seek-bar.ts");
+
+
+const Plugin = video_js__WEBPACK_IMPORTED_MODULE_0__["default"].getPlugin('plugin');
+const DEFAULT_MIN_CLIP_DURATION = 3; // seconds;
+
+class CreateClipPlugin extends Plugin {
+  constructor(player, options) {
+    super(player, options);
+    this.options = options;
+    this.initCreateClipSeekBar = this.initCreateClipSeekBar.bind(this);
+    this.player.on('loadedmetadata', () => this.player.ready(this.initCreateClipSeekBar));
+  }
+
+  initCreateClipSeekBar() {
+    var _a;
+
+    const seekBar = (_a = this.player.controlBar.getChild('ProgressControl')) === null || _a === void 0 ? void 0 : _a.getChild('SeekBar');
+    if (!seekBar) return;
+    const startTime = !isNaN(this.options.startTime) && this.options.startTime >= 0 ? this.options.startTime : 0;
+    const endTime = !isNaN(this.options.endTime) && this.options.endTime <= this.player.duration() ? this.options.endTime : this.player.duration();
+    const minDuration = Math.min(this.options.minDuration || DEFAULT_MIN_CLIP_DURATION, this.player.duration());
+    seekBar.initialize({
+      startTime,
+      endTime,
+      minDuration,
+      onChangeStartTime: this.options.onChangeStartTime,
+      onChangeEndTime: this.options.onChangeEndTime
+    });
+  }
+
+  dispose() {
+    this.player.off('loadedmetadata', this.initCreateClipSeekBar);
+  }
+
+}
+
+video_js__WEBPACK_IMPORTED_MODULE_0__["default"].registerPlugin('createClipPlugin', CreateClipPlugin);
+
+/***/ }),
+
+/***/ "../player/src/react/CreateClipPlayer.tsx":
+/*!************************************************!*\
+  !*** ../player/src/react/CreateClipPlayer.tsx ***!
+  \************************************************/
+/*! exports provided: ClickViewCreateClipPlayer */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ClickViewCreateClipPlayer", function() { return ClickViewCreateClipPlayer; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _players_create_clip_player__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../players/create-clip-player */ "../player/src/players/create-clip-player.ts");
+
+
+function ClickViewCreateClipPlayer(props) {
+  const ref = react__WEBPACK_IMPORTED_MODULE_0___default.a.useRef();
+  const playerRef = react__WEBPACK_IMPORTED_MODULE_0___default.a.useRef();
+  react__WEBPACK_IMPORTED_MODULE_0___default.a.useEffect(() => {
+    playerRef.current = new _players_create_clip_player__WEBPACK_IMPORTED_MODULE_1__["CreateClipPlayer"](ref.current, props);
+  }, []);
+  react__WEBPACK_IMPORTED_MODULE_0___default.a.useEffect(() => {
+    var _a;
+
+    (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.trigger({
+      type: 'update:clip:start:time',
+      time: props.startTime
+    });
+  }, [props.startTime]);
+  react__WEBPACK_IMPORTED_MODULE_0___default.a.useEffect(() => {
+    var _a;
+
+    (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.trigger({
+      type: 'update:clip:end:time',
+      time: props.endTime
+    });
+  }, [props.endTime]);
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    ref: ref
+  });
+}
+
+/***/ }),
+
+/***/ "./src/shared/components/clip-time-form/ClipTimeForm.tsx":
+/*!***************************************************************!*\
+  !*** ./src/shared/components/clip-time-form/ClipTimeForm.tsx ***!
+  \***************************************************************/
+/*! exports provided: ClipTimeForm */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ClipTimeForm", function() { return ClipTimeForm; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../libs/common/src/backbone/services/LanguageService */ "../../libs/common/src/backbone/services/LanguageService.tsx");
+/* harmony import */ var _libs_shared_src_utils_DurationHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../libs/shared/src/utils/DurationHelper */ "../../libs/shared/src/utils/DurationHelper.ts");
+/* harmony import */ var _clip_time_form_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./clip-time-form.scss */ "./src/shared/components/clip-time-form/clip-time-form.scss");
+/* harmony import */ var _clip_time_form_scss__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_clip_time_form_scss__WEBPACK_IMPORTED_MODULE_3__);
+
+
+
+
+var namespace = 'shared.clipTimeForm';
+var getPhrase = _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_1__["LanguageService"].encloseNamespace(namespace);
+
+function TimeInput(props) {
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: 'position-relative'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("input", {
+    className: "form-control text-center ".concat(_clip_time_form_scss__WEBPACK_IMPORTED_MODULE_3__["timeInput"]),
+    value: _libs_shared_src_utils_DurationHelper__WEBPACK_IMPORTED_MODULE_2__["DurationHelper"].ToDisplayDuration(props.value * 1000),
+    onChange: function onChange() {}
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: _clip_time_form_scss__WEBPACK_IMPORTED_MODULE_3__["controlsContainer"]
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: _clip_time_form_scss__WEBPACK_IMPORTED_MODULE_3__["arrowContainer"],
+    onClick: function onClick() {
+      return props.setTime(props.value + 1);
+    }
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: _clip_time_form_scss__WEBPACK_IMPORTED_MODULE_3__["upArrow"]
+  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: _clip_time_form_scss__WEBPACK_IMPORTED_MODULE_3__["arrowContainer"],
+    onClick: function onClick() {
+      return props.setTime(props.value - 1);
+    }
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: _clip_time_form_scss__WEBPACK_IMPORTED_MODULE_3__["downArrow"]
+  }))));
+}
+
+function ClipTimeForm(props) {
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("form", {
+    className: 'form-inline justify-content-center pb-5'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: "form-group"
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](TimeInput, {
+    value: props.startTime,
+    setTime: props.setStartTime
+  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
+    className: 'px-2'
+  }, "-"), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: "form-group mr-2"
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](TimeInput, {
+    value: props.endTime,
+    setTime: props.setEndTime
+  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("strong", null, "Duration:"), " ", _libs_shared_src_utils_DurationHelper__WEBPACK_IMPORTED_MODULE_2__["DurationHelper"].ToDisplayDuration((props.endTime - props.startTime) * 1000))), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: "d-flex justify-content-end"
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("button", {
+    className: 'btn btn-link',
+    onClick: props.onCancel
+  }, getPhrase('cancel')), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("button", {
+    className: 'btn btn-primary',
+    onClick: props.onSubmit
+  }, getPhrase('next'))));
+}
+
+/***/ }),
+
+/***/ "./src/shared/components/clip-time-form/clip-time-form.scss":
+/*!******************************************************************!*\
+  !*** ./src/shared/components/clip-time-form/clip-time-form.scss ***!
+  \******************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"timeInput":"cv--timeInput--3f1zC","controlsContainer":"cv--controlsContainer--3zQGP","arrowContainer":"cv--arrowContainer--3wgxR","upArrow":"cv--upArrow--2qIEU","downArrow":"cv--downArrow--3Gl3V"};
+
+/***/ }),
+
+/***/ "./src/shared/flight-requests/ClipRequests.ts":
+/*!****************************************************!*\
+  !*** ./src/shared/flight-requests/ClipRequests.ts ***!
+  \****************************************************/
+/*! exports provided: ClipRequests */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ClipRequests", function() { return ClipRequests; });
+/* harmony import */ var _libs_common_src_backbone_enums_HttpVerbs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../libs/common/src/backbone/enums/HttpVerbs */ "../../libs/common/src/backbone/enums/HttpVerbs.ts");
+
+var ClipRequests = {
+  clip: function clip(id) {
+    return {
+      key: "clip:".concat(id),
+      url: "/api/domain/v2/objects/".concat(id, "?query=video[thumbnail],owner")
+    };
+  },
+  createClip: function createClip(videoId, data, success, error, always) {
+    return {
+      key: 'create:clip',
+      url: "/api/domain/v2/objects/".concat(videoId, "/clips"),
+      data: data,
+      type: _libs_common_src_backbone_enums_HttpVerbs__WEBPACK_IMPORTED_MODULE_0__["HttpVerbs"].POST,
+      success: success,
+      error: error,
+      always: always
+    };
+  },
+  updateClip: function updateClip(id, data, success, error, always) {
+    return {
+      key: "clip:".concat(id),
+      url: "/api/domain/v2/objects/".concat(id),
+      data: data,
+      type: _libs_common_src_backbone_enums_HttpVerbs__WEBPACK_IMPORTED_MODULE_0__["HttpVerbs"].PUT,
+      success: success,
+      error: error,
+      always: always
+    };
+  },
+  deleteClip: function deleteClip(id, videoId, success, error, always) {
+    return {
+      key: "clip:".concat(id),
+      url: "/api/domain/v2/objects/".concat(id),
+      type: _libs_common_src_backbone_enums_HttpVerbs__WEBPACK_IMPORTED_MODULE_0__["HttpVerbs"].DELETE,
+      invalidationKeys: ["videos:".concat(videoId)],
+      success: success,
+      error: error,
+      always: always
+    };
+  }
+};
+
+/***/ }),
+
+/***/ "./src/shared/views/edit-clip-timepoints/EditClipTimepointsView.tsx":
+/*!**************************************************************************!*\
+  !*** ./src/shared/views/edit-clip-timepoints/EditClipTimepointsView.tsx ***!
+  \**************************************************************************/
+/*! exports provided: EditClipTimepointsView */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "EditClipTimepointsView", function() { return EditClipTimepointsView; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _libs_common_src_react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../libs/common/src/react */ "../../libs/common/src/react/index.ts");
+/* harmony import */ var _libs_common_src_react_hooks_UseViewModel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../libs/common/src/react/hooks/UseViewModel */ "../../libs/common/src/react/hooks/UseViewModel.ts");
+/* harmony import */ var _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../libs/common/src/backbone */ "../../libs/common/src/backbone/index.ts");
+/* harmony import */ var _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../libs/common/src/backbone/services/LanguageService */ "../../libs/common/src/backbone/services/LanguageService.tsx");
+/* harmony import */ var _libs_common_src_react_hooks_UseSetPageTitle__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../../libs/common/src/react/hooks/UseSetPageTitle */ "../../libs/common/src/react/hooks/UseSetPageTitle.ts");
+/* harmony import */ var _libs_shared_src_flight_requests_PlayerRequests__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../../../libs/shared/src/flight-requests/PlayerRequests */ "../../libs/shared/src/flight-requests/PlayerRequests.ts");
+/* harmony import */ var _libs_shared_src_flight_requests_ConfigRequests__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../../../libs/shared/src/flight-requests/ConfigRequests */ "../../libs/shared/src/flight-requests/ConfigRequests.ts");
+/* harmony import */ var _player_src_react_CreateClipPlayer__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../../player/src/react/CreateClipPlayer */ "../player/src/react/CreateClipPlayer.tsx");
+/* harmony import */ var shared_constants_LiteViewModels__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! shared/constants/LiteViewModels */ "./src/shared/constants/LiteViewModels.ts");
+/* harmony import */ var shared_components_clip_time_form_ClipTimeForm__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! shared/components/clip-time-form/ClipTimeForm */ "./src/shared/components/clip-time-form/ClipTimeForm.tsx");
+/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
+/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
+/* harmony import */ var shared_utils_DialogHelper__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! shared/utils/DialogHelper */ "./src/shared/utils/DialogHelper.tsx");
+/* harmony import */ var shared_flight_requests_ClipRequests__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! shared/flight-requests/ClipRequests */ "./src/shared/flight-requests/ClipRequests.ts");
+/* harmony import */ var shared_flight_requests_VideoRequests__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! shared/flight-requests/VideoRequests */ "./src/shared/flight-requests/VideoRequests.ts");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var namespace = 'shared.editClipTimepoints';
+var getPhrase = _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_4__["LanguageService"].encloseNamespace(namespace);
+var DEFAULT_DURATION = 30;
+var MIN_DURATION = 5;
+
+function handleError(error) {
+  shared_utils_DialogHelper__WEBPACK_IMPORTED_MODULE_13__["DialogHelper"].render(react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("p", null, error), {
+    title: getPhrase('errorHeading'),
+    buttons: [{
+      variant: 'link',
+      buttonText: getPhrase('close')
+    }]
+  });
+}
+
+function EditClipTimepointsView(props) {
+  var _a, _b, _c, _d, _e, _f;
+
+  var _useViewModel = Object(_libs_common_src_react_hooks_UseViewModel__WEBPACK_IMPORTED_MODULE_2__["useViewModel"])(shared_constants_LiteViewModels__WEBPACK_IMPORTED_MODULE_9__["ViewModelKeys"].WEB_PLAYER_DATA),
+      _useViewModel2 = _slicedToArray(_useViewModel, 2),
+      playerData = _useViewModel2[0],
+      setPlayerData = _useViewModel2[1];
+
+  var initialStartTime = props.startTime || ((_c = (_b = (_a = playerData) === null || _a === void 0 ? void 0 : _a.playerRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.currentTime()) || 0;
+
+  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0__["useState"](initialStartTime),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      startTime = _React$useState2[0],
+      setStartTime = _React$useState2[1];
+
+  var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0__["useState"](props.startTime + DEFAULT_DURATION),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      endTime = _React$useState4[0],
+      setEndTime = _React$useState4[1];
+
+  var config = _libs_common_src_react__WEBPACK_IMPORTED_MODULE_1__["Flight"].useBasicFetch(_libs_shared_src_flight_requests_ConfigRequests__WEBPACK_IMPORTED_MODULE_7__["ConfigRequests"].config());
+  var clip = _libs_common_src_react__WEBPACK_IMPORTED_MODULE_1__["Flight"].useBasicFetch(!!props.id && shared_flight_requests_ClipRequests__WEBPACK_IMPORTED_MODULE_14__["ClipRequests"].clip(props.id));
+  var videoId = ((_e = (_d = clip.data) === null || _d === void 0 ? void 0 : _d.video) === null || _e === void 0 ? void 0 : _e.id) || props.videoId;
+  var viewKey = _libs_common_src_react__WEBPACK_IMPORTED_MODULE_1__["Flight"].useBasicFetch(!!videoId && _libs_shared_src_flight_requests_PlayerRequests__WEBPACK_IMPORTED_MODULE_6__["PlayerRequests"].createViewKey(videoId));
+  var video = _libs_common_src_react__WEBPACK_IMPORTED_MODULE_1__["Flight"].useBasicFetch(!!videoId && shared_flight_requests_VideoRequests__WEBPACK_IMPORTED_MODULE_15__["VideoRequests"].video(videoId));
+  Object(_libs_common_src_react_hooks_UseSetPageTitle__WEBPACK_IMPORTED_MODULE_5__["useSetPageTitle"])(props.id ? (_f = clip.data) === null || _f === void 0 ? void 0 : _f.name : video.data && getPhrase('defaultClipName', {
+    videoName: video.data.name
+  }));
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
+    setPlayerData('allowFloatingPlayer', false);
+  }, []);
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
+    if (!clip.data) return;
+    setStartTime(clip.data.startTime);
+    setEndTime(clip.data.endTime);
+  }, [clip.data]);
+
+  function onSubmit() {
+    var error = '';
+    if (startTime > endTime) error = getPhrase('startTimeGreaterThanEndTime');
+    if (endTime - startTime < MIN_DURATION) error = getPhrase('tooShort', {
+      minDuration: MIN_DURATION
+    });
+
+    if (error) {
+      handleError(error);
+      return;
+    }
+
+    _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_3__["Core"].AppLinkHelper.trigger({
+      application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_11__["AppChannels"].DEFAULT,
+      action: props.id ? shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_12__["Actions"].Default.EDIT_CLIP_DETAILS : shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_12__["Actions"].Default.CREATE_CLIP_DETAILS,
+      args: props.id ? [props.id] : [props.videoId],
+      params: {
+        startTime: startTime,
+        endTime: endTime
+      }
+    });
+  }
+
+  function onCancel() {
+    var _a, _b;
+
+    _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_3__["Core"].AppLinkHelper.trigger({
+      application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_11__["AppChannels"].DEFAULT,
+      action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_12__["Actions"].Default.PLAY_VIDEO,
+      args: [(_a = video.data) === null || _a === void 0 ? void 0 : _a.id, (_b = video.data) === null || _b === void 0 ? void 0 : _b.name]
+    });
+  }
+
+  if (!props.id && !props.videoId) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, !!config.data && !!viewKey.data && !!video.data && (!props.id || !!clip.data) && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: 'pb-3'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: 'mb-3'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_player_src_react_CreateClipPlayer__WEBPACK_IMPORTED_MODULE_8__["ClickViewCreateClipPlayer"], {
+    playerApi: new URL(config.data.playerApiUrl),
+    viewKey: viewKey.data.viewKey,
+    startTime: startTime,
+    endTime: endTime,
+    onChangeStartTime: setStartTime,
+    onChangeEndTime: setEndTime,
+    minDuration: MIN_DURATION,
+    autoplay: true
+  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](shared_components_clip_time_form_ClipTimeForm__WEBPACK_IMPORTED_MODULE_10__["ClipTimeForm"], {
+    startTime: Math.floor(startTime),
+    endTime: Math.ceil(endTime),
+    setStartTime: setStartTime,
+    setEndTime: setEndTime,
+    onSubmit: onSubmit,
+    onCancel: onCancel
+  })));
+}
+
+/***/ })
+
+}]);
+//# sourceMappingURL=15.chunk.js.map