@desynova-digital/player 3.9.6 → 4.0.0

package/components/Shortcut.js

@@ -1,621 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _createClass = 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _propTypes = require('prop-types');
-
-function _defineProperty(obj, key, value) { 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) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-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 = function (_Component) {
-  _inherits(Shortcut, _Component);
-
-  function Shortcut(props, context) {
-    _classCallCheck(this, Shortcut);
-
-    var _this = _possibleConstructorReturn(this, (Shortcut.__proto__ || Object.getPrototypeOf(Shortcut)).call(this, props, context));
-
-    _this.intervalRewind = null;
-    _this.defaultShortcuts = [{
-      keyCode: 32, // spacebar
-      handle: _this.togglePlay
-    }, {
-      keyCode: 75, // k
-      handle: function handle(player, actions) {
-        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, actions, frameRate) {
-        if (!player.hasStarted) {
-          return;
-        }
-        actions.replay(1 / frameRate, {
-          action: 'forward-' + 1 / frameRate,
-          source: 'shortcut'
-        }); // Go back 1 frame
-      }
-    }, {
-      keyCode: 37, // Left arrow
-      shift: true,
-      handle: function handle(player, actions) {
-        if (!player.hasStarted) {
-          return;
-        }
-        actions.replay(1, {
-          action: 'replay-1',
-          source: 'shortcut'
-        }); // Go back 1 seconds
-      }
-    }, {
-      keyCode: 74, // j
-      handle: function handle(player, actions) {
-        actions.changeRate(1.0, {
-          action: 'change-rate',
-          source: 'shortcut'
-        });
-        actions.handleVideoRewind(true);
-      }
-    }, {
-      keyCode: 39, // Right arrow
-      handle: function handle(player, actions, frameRate) {
-        if (!player.hasStarted) {
-          return;
-        }
-        actions.forward(1 / frameRate, {
-          action: 'forward-' + 1 / frameRate,
-          source: 'shortcut'
-        }); // Go forward 1 frame
-      }
-    }, {
-      keyCode: 39, // Right arrow
-      shift: true,
-      handle: function handle(player, actions) {
-        if (!player.hasStarted) {
-          return;
-        }
-        actions.forward(1, {
-          action: 'forward-1',
-          source: 'shortcut'
-        }); // Go forward 1 seconds
-      }
-    }, {
-      keyCode: 76, // l
-      handle: function handle(player, actions) {
-        if (player.paused && player.playbackRate === 1) {
-          actions.play({
-            action: 'play',
-            source: 'shortcut'
-          });
-          actions.handleVideoRewind(false);
-        } else {
-          _this.changePlaybackRate(player, actions);
-        }
-      }
-    }, {
-      keyCode: 36, // Home
-      handle: function handle(player, actions) {
-        if (!player.hasStarted) {
-          return;
-        }
-        actions.seek(0); // Go to beginning of video
-      }
-    }, {
-      keyCode: 73, // I Key
-      handle: function handle(player, actions) {
-        var _this$props = _this.props,
-            markers = _this$props.markers,
-            playerType = _this$props.playerType,
-            onAddMarker = _this$props.onAddMarker,
-            playerReadOnlyMode = _this$props.playerReadOnlyMode,
-            disablePlayerActions = _this$props.disablePlayerActions,
-            playerSelectedMarker = _this$props.playerSelectedMarker;
-
-        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(player.selectedMarker).length) {
-              markerArr = markerArr.filter(function (marker) {
-                return marker.start_time !== player.selectedMarker.leftMarker && marker.end_time !== player.selectedMarker.rightMarker;
-              });
-            }
-            markerArr.filter(function (marker) {
-              if (player.currentTime >= marker.start_time && player.currentTime <= marker.end_time || playerSelectedMarker.leftMarker > -1 && player.currentTime > marker.start_time && playerSelectedMarker.leftMarker < marker.start_time || playerSelectedMarker.leftMarker > -1 && player.currentTime < marker.start_time && playerSelectedMarker.leftMarker > marker.end_time) {
-                createPoint = false;
-              }
-            });
-          }
-          if (!createPoint && playerSelectedMarker.markerType === 'update' && player.currentTime > player.selectedMarker.leftMarker && player.currentTime < player.selectedMarker.rightMarker) {
-            createPoint = true;
-          }
-          if (createPoint) {
-            if (playerSelectedMarker.rightMarker < 0 || playerSelectedMarker.rightMarker > -1 && player.currentTime < playerSelectedMarker.rightMarker) {
-              // actions.handleMarkerPointChange(
-              //   player.markerType !== 'update' ? 'add' : 'update',
-              //   'left',
-              //   player.currentTime
-              // );
-              var data = {
-                markerType: playerSelectedMarker.markerType !== 'update' ? 'add' : 'update',
-                markerPos: 'left',
-                currentTime: player.currentTime
-              };
-              onAddMarker(player.currentTime, -1, '', true, data);
-              if (playerSelectedMarker.leftMarker > -1 && playerSelectedMarker.rightMarker > -1 && (!playerSelectedMarker.markerCreate || playerSelectedMarker.markerType === 'update')) {
-                onAddMarker(player.currentTime, playerSelectedMarker.rightMarker, 'update');
-              }
-            }
-          }
-        }
-      }
-    }, {
-      keyCode: 79, // O Key
-      handle: function handle(player, actions) {
-        var _this$props2 = _this.props,
-            markers = _this$props2.markers,
-            onMarkerSelect = _this$props2.onMarkerSelect,
-            playerType = _this$props2.playerType,
-            onAddMarker = _this$props2.onAddMarker,
-            playerReadOnlyMode = _this$props2.playerReadOnlyMode,
-            disablePlayerActions = _this$props2.disablePlayerActions,
-            playerSelectedMarker = _this$props2.playerSelectedMarker;
-
-        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(player.selectedMarker).length) {
-              markerArr = markerArr.filter(function (marker) {
-                return marker.start_time !== player.selectedMarker.leftMarker && marker.end_time !== player.selectedMarker.rightMarker;
-              });
-            }
-            markerArr.filter(function (marker) {
-              if (player.currentTime >= marker.start_time && player.currentTime <= marker.end_time || playerSelectedMarker.leftMarker > -1 && player.currentTime > marker.start_time && playerSelectedMarker.leftMarker < marker.start_time || playerSelectedMarker.leftMarker > -1 && player.currentTime < marker.start_time && playerSelectedMarker.leftMarker > marker.end_time) {
-                createPoint = false;
-              }
-            });
-          }
-          if (!createPoint && playerSelectedMarker.markerType === 'update' && player.currentTime > player.selectedMarker.leftMarker && player.currentTime < player.selectedMarker.rightMarker) {
-            createPoint = true;
-          }
-          if (createPoint && playerSelectedMarker.leftMarker > -1 && player.currentTime > playerSelectedMarker.leftMarker) {
-            // actions.handleMarkerPointChange(
-            //   markerType: player.markerType !== 'update' ? 'add' : 'update',
-            //   markerPos: 'right',
-            //   currentTime: player.currentTime
-            // );
-            var data = {
-              markerType: playerSelectedMarker.markerType !== 'update' ? 'add' : 'update',
-              markerPos: 'right',
-              currentTime: player.currentTime
-            };
-            if (playerSelectedMarker.leftMarker > -1 && playerSelectedMarker.rightMarker > -1 && (!playerSelectedMarker.markerCreate || playerSelectedMarker.markerType === 'update')) {
-              onAddMarker(playerSelectedMarker.leftMarker, player.currentTime, 'update', false, data);
-            }
-            //Commented for CN-632.
-            // if (player.controlType === 'default') {
-            //   onMarkerSelect(player.leftMarker, player.currentTime);
-            // }
-          }
-        }
-        if (playerSelectedMarker.leftMarker > -1 && player.currentTime > -1 && playerSelectedMarker.markerCreate && createPoint && player.currentTime > playerSelectedMarker.leftMarker) {
-          // actions.handleMarkerPointChange('create');
-          onAddMarker(playerSelectedMarker.leftMarker, player.currentTime, '', 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 v = player.volume + 0.05;
-        if (v > 1) {
-          v = 1;
-        }
-        actions.changeVolume(v, {
-          action: 'volume-up',
-          source: 'shortcut'
-        });
-      }
-    }, {
-      keyCode: 40, // Down arrow
-      handle: function handle(player, actions) {
-        // Decrease volume 5%
-        var v = player.volume - 0.05;
-        if (v < 0) {
-          v = 0;
-        }
-        var action = v > 0 ? 'volume-down' : 'volume-off';
-        actions.changeVolume(v, {
-          action: action,
-          source: 'shortcut'
-        });
-      }
-    }, {
-      keyCode: 68, // D Key
-      handle: function handle(player, actions) {
-        var playerSelectedMarker = _this.props.playerSelectedMarker;
-
-        if ((playerSelectedMarker.leftMarker > -1 || playerSelectedMarker.rightMarker > -1) && playerSelectedMarker.markerType === 'create') {
-          var onDeleteMarker = _this.props.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
-        actions.mute(!player.muted);
-      }
-    }, {
-      keyCode: 81, // Q Key
-      handle: function handle(player, actions) {
-        var leftMarker = _this.props.playerSelectedMarker.leftMarker;
-
-        if (leftMarker > -1) {
-          actions.seek(leftMarker);
-        }
-      }
-    }, {
-      keyCode: 87, // W Key
-      handle: function handle(player, actions) {
-        var rightMarker = _this.props.playerSelectedMarker.rightMarker;
-
-        if (rightMarker > -1) {
-          actions.seek(rightMarker);
-        }
-      }
-    }];
-
-    _this.shortcuts = [].concat(_toConsumableArray(_this.defaultShortcuts));
-
-    _this.mergeShortcuts = _this.mergeShortcuts.bind(_this);
-    _this.handleKeyPress = _this.handleKeyPress.bind(_this);
-    _this.handleClick = _this.handleClick.bind(_this);
-    _this.handleDoubleClick = _this.handleDoubleClick.bind(_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 _props = this.props,
-          shortcuts = _props.shortcuts,
-          player = _props.player,
-          frameRate = _props.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() {
-      var _props2 = this.props,
-          player = _props2.player,
-          actions = _props2.actions,
-          frameRate = _props2.frameRate;
-
-      if (player.currentTime == 0 || !player.rewindActive) {
-        clearInterval(this.intervalRewind);
-        this.intervalRewind = null;
-        actions.pause({
-          action: 'pause',
-          source: 'shortcut'
-        });
-        actions.handleVideoRewind(false);
-      } else {
-        var time = 1 / frameRate;
-        actions.replay(time, {
-          action: 'forward-' + 1 / frameRate,
-          source: 'shortcut'
-        });
-      }
-    }
-
-    // merge the shortcuts from props
-
-  }, {
-    key: 'mergeShortcuts',
-    value: function mergeShortcuts() {
-      var shortcuts = this.props.shortcuts;
-
-      var getShortcutKey = function getShortcutKey(_ref) {
-        var _ref$keyCode = _ref.keyCode,
-            keyCode = _ref$keyCode === undefined ? 0 : _ref$keyCode,
-            _ref$ctrl = _ref.ctrl,
-            ctrl = _ref$ctrl === undefined ? false : _ref$ctrl,
-            _ref$shift = _ref.shift,
-            shift = _ref$shift === undefined ? false : _ref$shift,
-            _ref$alt = _ref.alt,
-            alt = _ref$alt === undefined ? false : _ref$alt;
-        return keyCode + ':' + ctrl + ':' + shift + ':' + 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, actions) {
-      if (this.intervalRewind) {
-        clearInterval(this.intervalRewind);
-        this.intervalRewind = null;
-      }
-      actions.handleVideoRewind(false);
-      if (player.paused) {
-        actions.play({
-          action: 'play',
-          source: 'shortcut'
-        });
-      } else {
-        actions.pause({
-          action: 'pause',
-          source: 'shortcut'
-        });
-        actions.changeRate(1.0, {
-          action: 'fast-forward',
-          source: 'shortcut'
-        });
-      }
-    }
-  }, {
-    key: 'changePlaybackRate',
-    value: function changePlaybackRate(player, actions) {
-      var playbackRate = player.playbackRate;
-      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;
-       * }
-       */
-      actions.changeRate(playbackRate, {
-        action: 'fast-forward',
-        source: 'shortcut'
-      });
-    }
-  }, {
-    key: 'toggleFullscreen',
-    value: function toggleFullscreen(player, actions) {
-      var playerType = this.props.playerType;
-
-      if (playerType !== 'panel') {
-        actions.toggleFullscreen(player);
-      }
-    }
-  }, {
-    key: 'handleKeyPress',
-    value: function handleKeyPress(e) {
-      var _props3 = this.props,
-          player = _props3.player,
-          actions = _props3.actions,
-          frameRate = _props3.frameRate;
-
-      if (!player.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(player, actions, frameRate);
-        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 _props4 = this.props,
-          player = _props4.player,
-          actions = _props4.actions,
-          clickable = _props4.clickable;
-
-      if (!this.canBeClicked(player, e) || !clickable) {
-        return;
-      }
-      this.togglePlay(player, actions);
-      // e.preventDefault();
-    }
-  }, {
-    key: 'handleDoubleClick',
-    value: function handleDoubleClick(e) {
-      var _props5 = this.props,
-          player = _props5.player,
-          actions = _props5.actions,
-          dblclickable = _props5.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';