@desynova-digital/player 4.0.1 → 4.0.3

package/shortcuts/Shortcut.js

@@ -1,662 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = require("react");
-var _propTypes = require("prop-types");
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-var propTypes = {
-  clickable: _propTypes.PropTypes.bool,
-  dblclickable: _propTypes.PropTypes.bool,
-  actions: _propTypes.PropTypes.instanceOf(Object),
-  player: _propTypes.PropTypes.instanceOf(Object),
-  shortcuts: _propTypes.PropTypes.arrayOf(Object),
-  markers: _propTypes.PropTypes.instanceOf(Object),
-  onAddMarker: _propTypes.PropTypes.func,
-  onDeleteMarker: _propTypes.PropTypes.func,
-  onMarkerSelect: _propTypes.PropTypes.func,
-  frameRate: _propTypes.PropTypes.number,
-  playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel'])
-};
-var defaultProps = {
-  clickable: true,
-  dblclickable: true,
-  actions: {},
-  player: {},
-  shortcuts: []
-};
-var Shortcut = /*#__PURE__*/function (_Component) {
-  _inherits(Shortcut, _Component);
-  var _super = _createSuper(Shortcut);
-  function Shortcut(props, context) {
-    var _this;
-    _classCallCheck(this, Shortcut);
-    _this = _super.call(this, props, context);
-    _this.intervalRewind = null;
-    _this.defaultShortcuts = [{
-      keyCode: 32,
-      // spacebar
-      handle: _this.togglePlay
-    }, {
-      keyCode: 75,
-      // k
-      handle: function handle(player, actions) {
-        var actionClick = player.actionClick;
-        actionClick({
-          action: 'pause'
-        });
-        actionClick({
-          action: 'playback_rate_change',
-          value: 1
-        });
-        _this.rewindVideo(false);
-        //   actions.pause({
-        //     action: 'pause',
-        //     source: 'shortcut'
-        //   });
-        //   actions.changeRate(1.0, {
-        //     action: 'fast-forward',
-        //     source: 'shortcut'
-        //   });
-        //   actions.handleVideoRewind(false);
-      }
-    }, {
-      keyCode: 70,
-      // f
-      handle: _this.toggleFullscreen
-    }, {
-      keyCode: 37,
-      // Left arrow
-      handle: function handle(player) {
-        var actionClick = player.actionClick,
-          frameRate = player.frameRate;
-        if (!player.hasStarted) {
-          return;
-        }
-        actionClick({
-          action: 'add_seconds',
-          value: -(1 / frameRate)
-        });
-        //   actions.replay(1, {
-        //     action: 'replay-1',
-        //     source: 'shortcut'
-        //   }); // Go back 1 seconds
-      }
-    }, {
-      keyCode: 74,
-      // j
-      handle: function handle(player, actions) {
-        var actionClick = player.actionClick;
-        actionClick({
-          action: 'playback_rate_change',
-          value: 1
-        });
-        _this.rewindVideo(true);
-      }
-    }, {
-      keyCode: 39,
-      // Right arrow
-      handle: function handle(player) {
-        var actionClick = player.actionClick,
-          frameRate = player.frameRate;
-        if (!player.hasStarted) {
-          return;
-        }
-        actionClick({
-          action: 'add_seconds',
-          value: 1 / frameRate
-        });
-        //   actions.forward(1 / frameRate, {
-        //     action: `forward-${1 / frameRate}`,
-        //     source: 'shortcut'
-        //   }); // Go forward 1 frame
-      }
-    }, {
-      keyCode: 76,
-      // l
-      handle: function handle(player, actions) {
-        var actionClick = player.actionClick;
-        if (player.paused && player.playbackRate === 1) {
-          actionClick({
-            action: 'play'
-          });
-          _this.rewindVideo(false);
-          // actions.handleVideoRewind(false);
-        } else {
-          _this.changePlaybackRate(player, actions);
-        }
-      }
-    }, {
-      keyCode: 36,
-      // Home
-      handle: function handle(player, actions) {
-        var actionClick = player.actionClick,
-          hasStarted = player.hasStarted;
-        if (!hasStarted) {
-          return;
-        }
-        actionClick({
-          action: 'seek',
-          value: 0
-        });
-        //   actions.seek(0); // Go to beginning of video
-      }
-    }, {
-      keyCode: 73,
-      // I Key
-      handle: function handle(player, actions) {
-        var markers = player.markers,
-          playerType = player.playerType,
-          onAddMarker = player.onAddMarker,
-          playerReadOnlyMode = player.playerReadOnlyMode,
-          disablePlayerActions = player.disablePlayerActions,
-          playerSelectedMarker = player.playerSelectedMarker,
-          seconds = player.currentTime.seconds;
-        if (playerReadOnlyMode || disablePlayerActions.includes('marking_controls')) {
-          return;
-        }
-        if (playerType !== 'panel') {
-          var createPoint = true;
-          if (markers && markers.length && markers[0].values && markers[0].values.length) {
-            var markerArr = markers[0].values;
-            if (Object.keys(playerSelectedMarker).length && playerSelectedMarker.data) {
-              markerArr = markerArr.filter(function (marker) {
-                return marker.start_time !== playerSelectedMarker.leftMarker && marker.end_time !== playerSelectedMarker.rightMarker;
-              });
-            }
-            markerArr.filter(function (marker) {
-              if (seconds >= marker.start_time && seconds <= marker.end_time || playerSelectedMarker.leftMarker > -1 && seconds > marker.start_time && playerSelectedMarker.leftMarker < marker.start_time || playerSelectedMarker.leftMarker > -1 && seconds < marker.start_time && playerSelectedMarker.leftMarker > marker.end_time) {
-                createPoint = false;
-              }
-            });
-          }
-          if (!createPoint && playerSelectedMarker.markerType === 'update' && seconds > player.selectedMarker.leftMarker && seconds < player.selectedMarker.rightMarker) {
-            createPoint = true;
-          }
-          if (createPoint) {
-            if (playerSelectedMarker.rightMarker < 0 || playerSelectedMarker.rightMarker > -1 && seconds < playerSelectedMarker.rightMarker) {
-              // actions.handleMarkerPointChange(
-              //   player.markerType !== 'update' ? 'add' : 'update',
-              //   'left',
-              //   seconds
-              // );
-              var data = {
-                markerType: playerSelectedMarker.markerType !== 'update' ? 'add' : 'update',
-                markerPos: 'left',
-                currentTime: seconds
-              };
-              onAddMarker(seconds, -1, '', true, data);
-              if (playerSelectedMarker.leftMarker > -1 && playerSelectedMarker.rightMarker > -1 && (!playerSelectedMarker.markerCreate || playerSelectedMarker.markerType === 'update')) {
-                onAddMarker(seconds, playerSelectedMarker.rightMarker, 'update');
-              }
-            }
-          }
-        }
-      }
-    }, {
-      keyCode: 79,
-      // O Key
-      handle: function handle(player, actions) {
-        var _this$props = _this.props,
-          markers = _this$props.markers,
-          onMarkerSelect = _this$props.onMarkerSelect,
-          playerType = _this$props.playerType,
-          onAddMarker = _this$props.onAddMarker,
-          playerReadOnlyMode = _this$props.playerReadOnlyMode,
-          disablePlayerActions = _this$props.disablePlayerActions,
-          playerSelectedMarker = _this$props.playerSelectedMarker,
-          seconds = _this$props.currentTime.seconds;
-        if (playerReadOnlyMode || disablePlayerActions.includes('marking_controls')) {
-          return;
-        }
-        var createPoint = true;
-        if (playerType !== 'panel') {
-          if (markers && markers.length && markers[0].values && markers[0].values.length) {
-            var markerArr = markers[0].values;
-            if (Object.keys(playerSelectedMarker).length && playerSelectedMarker.data) {
-              markerArr = markerArr.filter(function (marker) {
-                return marker.start_time !== player.selectedMarker.leftMarker && marker.end_time !== player.selectedMarker.rightMarker;
-              });
-            }
-            markerArr.filter(function (marker) {
-              if (seconds >= marker.start_time && seconds <= marker.end_time || playerSelectedMarker.leftMarker > -1 && seconds > marker.start_time && playerSelectedMarker.leftMarker < marker.start_time || playerSelectedMarker.leftMarker > -1 && seconds < marker.start_time && playerSelectedMarker.leftMarker > marker.end_time) {
-                createPoint = false;
-              }
-            });
-          }
-          if (!createPoint && playerSelectedMarker.markerType === 'update' && seconds > player.selectedMarker.leftMarker && seconds < player.selectedMarker.rightMarker) {
-            createPoint = true;
-          }
-          if (createPoint && playerSelectedMarker.leftMarker > -1 && seconds > playerSelectedMarker.leftMarker) {
-            // actions.handleMarkerPointChange(
-            //   markerType: player.markerType !== 'update' ? 'add' : 'update',
-            //   markerPos: 'right',
-            //   currentTime: seconds
-            // );
-            var data = {
-              markerType: playerSelectedMarker.markerType !== 'update' ? 'add' : 'update',
-              markerPos: 'right',
-              currentTime: seconds
-            };
-            if (playerSelectedMarker.leftMarker > -1 && playerSelectedMarker.rightMarker > -1 && (!playerSelectedMarker.markerCreate || playerSelectedMarker.markerType === 'update')) {
-              onAddMarker(playerSelectedMarker.leftMarker, seconds, 'update', false, data);
-            }
-            //Commented for CN-632.
-            // if (player.controlType === 'default') {
-            //   onMarkerSelect(player.leftMarker, seconds);
-            // }
-          }
-        }
-
-        if (playerSelectedMarker.leftMarker > -1 && seconds > -1 && playerSelectedMarker.markerCreate && createPoint && seconds > playerSelectedMarker.leftMarker) {
-          // actions.handleMarkerPointChange('create');
-          onAddMarker(playerSelectedMarker.leftMarker, seconds, '', false, {
-            markerType: 'create'
-          });
-        }
-      }
-    }, {
-      keyCode: 35,
-      // End
-      handle: function handle(player, actions) {
-        if (!player.hasStarted) {
-          return;
-        }
-        // Go to end of video
-        actions.seek(player.duration);
-      }
-    }, {
-      keyCode: 38,
-      // Up arrow
-      handle: function handle(player, actions) {
-        // Increase volume 5%
-        var actionClick = player.actionClick,
-          volume = player.volume;
-        var v = volume + 0.05;
-        if (v > 1) {
-          v = 1;
-        }
-        actionClick({
-          action: 'volume',
-          value: v
-        });
-        //   actions.changeVolume(v, {
-        //     action: 'volume-up',
-        //     source: 'shortcut'
-        //   });
-      }
-    }, {
-      keyCode: 40,
-      // Down arrow
-      handle: function handle(player, actions) {
-        // Decrease volume 5%
-        var actionClick = player.actionClick,
-          volume = player.volume;
-        var v = volume - 0.05;
-        if (v < 0) {
-          v = 0;
-        }
-        var action = v > 0 ? 'volume-down' : 'volume-off';
-        actionClick({
-          action: 'volume',
-          value: v
-        });
-      }
-    }, {
-      keyCode: 68,
-      // D Key
-      handle: function handle(player, actions) {
-        var playerSelectedMarker = player.playerSelectedMarker;
-        if (playerSelectedMarker.leftMarker > -1 || playerSelectedMarker.rightMarker > -1
-        // && playerSelectedMarker.markerType === 'create' //to-do
-        ) {
-          var onDeleteMarker = player.onDeleteMarker;
-          // actions.handleMarkerPointChange('delete');
-          onDeleteMarker();
-        }
-      }
-    }, {
-      keyCode: 27,
-      // Escape Key
-      handle: function handle(player, actions) {
-        var playerSelectedMarker = _this.props.playerSelectedMarker;
-        if (playerSelectedMarker.leftMarker > -1) {
-          var onDeleteMarker = _this.props.onDeleteMarker;
-          // actions.handleVideoPreview(false);
-          // actions.handleMarkerPointChange('delete');
-          onDeleteMarker();
-        } else {
-          return null;
-        }
-      }
-    }, {
-      keyCode: 77,
-      // M Key
-      handle: function handle(player, actions) {
-        // Mute Video
-        var actionClick = player.actionClick;
-        actionClick({
-          action: 'mute',
-          value: !player.muted
-        });
-        //   actions.mute(!player.muted);
-      }
-    }, {
-      keyCode: 81,
-      // Q Key
-      handle: function handle(player, actions) {
-        var _this$props2 = _this.props,
-          leftMarker = _this$props2.playerSelectedMarker.leftMarker,
-          actionClick = _this$props2.actionClick;
-        if (leftMarker > -1) {
-          actionClick({
-            action: 'seek',
-            value: leftMarker
-          });
-          // actions.seek(leftMarker);
-        }
-      }
-    }, {
-      keyCode: 87,
-      // W Key
-      handle: function handle(player, actions) {
-        var _this$props3 = _this.props,
-          rightMarker = _this$props3.playerSelectedMarker.rightMarker,
-          actionClick = _this$props3.actionClick;
-        if (rightMarker > -1) {
-          actionClick({
-            action: 'seek',
-            value: rightMarker
-          });
-          // actions.seek(rightMarker);
-        }
-      }
-    }];
-
-    _this.shortcuts = _toConsumableArray(_this.defaultShortcuts);
-    _this.mergeShortcuts = _this.mergeShortcuts.bind(_assertThisInitialized(_this));
-    _this.handleKeyPress = _this.handleKeyPress.bind(_assertThisInitialized(_this));
-    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
-    _this.handleDoubleClick = _this.handleDoubleClick.bind(_assertThisInitialized(_this));
-    _this.togglePlay = _this.togglePlay.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-  _createClass(Shortcut, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.mergeShortcuts();
-      document.addEventListener('keydown', this.handleKeyPress);
-      document.addEventListener('click', this.handleClick);
-      document.addEventListener('dblclick', this.handleDoubleClick);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$props4 = this.props,
-        shortcuts = _this$props4.shortcuts,
-        player = _this$props4.player,
-        frameRate = _this$props4.frameRate;
-      if (prevProps.shortcuts !== shortcuts) {
-        this.mergeShortcuts();
-      }
-      if (player.rewindActive !== prevProps.player.rewindActive) {
-        if (!this.intervalRewind) {
-          this.intervalRewind = setInterval(this.rewindVideo.bind(this), 1000 / frameRate);
-        }
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('keydown', this.handleKeyPress);
-      document.removeEventListener('click', this.handleClick);
-      document.removeEventListener('dblclick', this.handleDoubleClick);
-    }
-  }, {
-    key: "rewindVideo",
-    value: function rewindVideo(rewindActive, self) {
-      var _ref = this.props || self,
-        seconds = _ref.currentTime.seconds,
-        frameRate = _ref.frameRate,
-        actionClick = _ref.actionClick;
-      if (seconds == 0 || !rewindActive) {
-        clearInterval(this.intervalRewind);
-        this.intervalRewind = null;
-        actionClick({
-          action: 'pause'
-        });
-        //   actions.handleVideoRewind(false);
-      } else {
-        //   setInterval(() => {
-        //     actionClick({
-        //       action: 'add_seconds',
-        //       value: -(1 / frameRate)
-        //     });
-        //   }, 1000 / frameRate);
-      }
-    }
-
-    // merge the shortcuts from props
-  }, {
-    key: "mergeShortcuts",
-    value: function mergeShortcuts() {
-      var shortcuts = this.props.shortcuts;
-      var getShortcutKey = function getShortcutKey(_ref2) {
-        var _ref2$keyCode = _ref2.keyCode,
-          keyCode = _ref2$keyCode === void 0 ? 0 : _ref2$keyCode,
-          _ref2$ctrl = _ref2.ctrl,
-          ctrl = _ref2$ctrl === void 0 ? false : _ref2$ctrl,
-          _ref2$shift = _ref2.shift,
-          shift = _ref2$shift === void 0 ? false : _ref2$shift,
-          _ref2$alt = _ref2.alt,
-          alt = _ref2$alt === void 0 ? false : _ref2$alt;
-        return "".concat(keyCode, ":").concat(ctrl, ":").concat(shift, ":").concat(alt);
-      };
-      var defaultShortcuts = this.defaultShortcuts.reduce(function (shortcuts, shortcut) {
-        return Object.assign(shortcuts, _defineProperty({}, getShortcutKey(shortcut), shortcut));
-      }, {});
-      var mergedShortcuts = (shortcuts || []).reduce(function (shortcuts, shortcut) {
-        var keyCode = shortcut.keyCode,
-          handle = shortcut.handle;
-        if (keyCode && typeof handle === 'function') {
-          return Object.assign(shortcuts, _defineProperty({}, getShortcutKey(shortcut), shortcut));
-        }
-        return shortcuts;
-      }, defaultShortcuts);
-      var gradeShortcut = function gradeShortcut(s) {
-        var score = 0;
-        var ps = ['ctrl', 'shift', 'alt'];
-        ps.forEach(function (key) {
-          if (s[key]) {
-            score++;
-          }
-        });
-        return score;
-      };
-      this.shortcuts = Object.keys(mergedShortcuts).map(function (key) {
-        return mergedShortcuts[key];
-      }).sort(function (a, b) {
-        return gradeShortcut(b) - gradeShortcut(a);
-      });
-    }
-  }, {
-    key: "togglePlay",
-    value: function togglePlay(player, self) {
-      var paused = player.paused,
-        actionClick = player.actionClick;
-      if (self.rewindVideo) {
-        self.rewindVideo(false, self);
-      }
-      // if (this.intervalRewind) {
-      //   clearInterval(this.intervalRewind);
-      //   this.intervalRewind = null;
-      // }
-      // actions.handleVideoRewind(false);//to-do
-      if (paused) {
-        actionClick({
-          action: 'play'
-        });
-      } else {
-        actionClick({
-          action: 'pause'
-        });
-        //to-do
-        //   actions.changeRate(1.0, {
-        //     action: 'fast-forward',
-        //     source: 'shortcut'
-        //   });
-      }
-    }
-  }, {
-    key: "changePlaybackRate",
-    value: function changePlaybackRate(player, actions) {
-      var playbackRate = player.playbackRate;
-      var actionClick = player.actionClick;
-      if (playbackRate >= 2) {
-        playbackRate = 4;
-      } else if (playbackRate >= 1.5) {
-        playbackRate = 2;
-      } else if (playbackRate >= 1) {
-        playbackRate = 1.5;
-      }
-      /*
-       * else if (playbackRate >= 1.25) {
-       *   playbackRate = 1.5;
-       * } else if (playbackRate >= 1.0) {
-       *   playbackRate = 1.25;
-       * }
-       * else if (playbackRate >= 0.5) {
-       *   playbackRate = 1.0;
-       * }
-       * else if (playbackRate >= 0.25) {
-       *   playbackRate = 0.5;
-       * } else if (playbackRate >= 0) {
-       *   playbackRate = 0.25;
-       * }
-       */
-      actionClick({
-        action: 'playback_rate_change',
-        value: playbackRate
-      });
-      // actions.changeRate(playbackRate, {
-      //   action: 'fast-forward',
-      //   source: 'shortcut'
-      // });
-    }
-  }, {
-    key: "toggleFullscreen",
-    value: function toggleFullscreen(player) {
-      var playerType = player.playerType,
-        actionClick = player.actionClick;
-      if (playerType !== 'panel') {
-        actionClick({
-          action: 'toggle_fullscreen'
-        });
-        //   actions.toggleFullscreen(player);
-      }
-    }
-  }, {
-    key: "handleKeyPress",
-    value: function handleKeyPress(e) {
-      var _this$props5 = this.props,
-        isActive = _this$props5.isActive,
-        actions = _this$props5.actions,
-        frameRate = _this$props5.frameRate;
-      if (!isActive) {
-        return;
-      }
-      if (document.activeElement && (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA')) {
-        return;
-      }
-      var keyCode = e.keyCode || e.which;
-      var ctrl = e.ctrlKey || e.metaKey;
-      var shift = e.shiftKey;
-      var alt = e.altKey;
-      var shortcut = this.shortcuts.filter(function (s) {
-        if (!s.keyCode || s.keyCode - keyCode !== 0) {
-          return false;
-        }
-        if (s.ctrl !== undefined && s.ctrl !== ctrl || s.shift !== undefined && s.shift !== shift || s.alt !== undefined && s.alt !== alt) {
-          return false;
-        }
-        return true;
-      })[0];
-      if (shortcut) {
-        shortcut.handle(this.props, this);
-        e.preventDefault();
-      }
-    }
-
-    // only if player is active and player is ready
-  }, {
-    key: "canBeClicked",
-    value: function canBeClicked(player, e) {
-      if (!player.isActive || e.target.nodeName !== 'VIDEO' || player.readyState !== 4) {
-        return false;
-      }
-      return true;
-    }
-  }, {
-    key: "handleClick",
-    value: function handleClick(e) {
-      var _this$props6 = this.props,
-        player = _this$props6.player,
-        actions = _this$props6.actions,
-        clickable = _this$props6.clickable;
-      if (!this.canBeClicked(player, e) || !clickable) {
-        return;
-      }
-      this.togglePlay();
-      // e.preventDefault();
-    }
-  }, {
-    key: "handleDoubleClick",
-    value: function handleDoubleClick(e) {
-      var _this$props7 = this.props,
-        player = _this$props7.player,
-        actions = _this$props7.actions,
-        dblclickable = _this$props7.dblclickable;
-      if (!this.canBeClicked(player, e) || !dblclickable) {
-        return;
-      }
-      this.toggleFullscreen(player, actions);
-      // e.preventDefault();
-    }
-
-    /*
-     * this component dose not render anything
-     * it's just for the key down event
-     */
-  }, {
-    key: "render",
-    value: function render() {
-      return null;
-    }
-  }]);
-  return Shortcut;
-}(_react.Component);
-exports["default"] = Shortcut;
-Shortcut.propTypes = propTypes;
-Shortcut.defaultProps = defaultProps;
-Shortcut.displayName = 'Shortcut';