@desynova-digital/player 3.9.7 → 4.0.0

package/components/control-bar/EditorControlMenuButton.js

@@ -1,412 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-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 _propTypes = require('prop-types');
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _components = require('@desynova-digital/components');
-
-var _Menu = require('../Menu');
-
-var _Menu2 = _interopRequireDefault(_Menu);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 = {
-  player: _propTypes.PropTypes.instanceOf(Object),
-  actions: _propTypes.PropTypes.instanceOf(Object),
-  style: _propTypes.PropTypes.instanceOf(Object),
-  onEditAction: _propTypes.PropTypes.func,
-  assetType: _propTypes.PropTypes.oneOf(['fc', 'rc']),
-  contentType: _propTypes.PropTypes.string,
-  playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel'])
-};
-
-var EditContainer = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'EditorControlMenuButton__EditContainer',
-  componentId: 'sc-yoq9bd-0'
-})(['position:relative;']);
-
-var EditBlock = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'EditorControlMenuButton__EditBlock',
-  componentId: 'sc-yoq9bd-1'
-})(['display:flex;background:transparent;font-family:SFUIText-Medium;font-size:12px;text-transform:uppercase;justify-content:flex-start;align-items:center;border-bottom:1px solid #eeeeee;box-sizing:border-box;height:', ';padding:', ';transition:all 250ms ease-in-out;opacity:', ';pointer-events:', ';overflow:hidden;&:last-child{border:none;}&:hover,&:focus{svg path{fill:#00cec6;}p{color:#00cec6;}}svg path{fill:#afb2ba;}p{margin-left:10px;white-space:nowrap;color:#999999;}'], function (props) {
-  return props.active ? '45px' : '0px';
-}, function (props) {
-  return props.active ? '15px' : '0px';
-}, function (props) {
-  return props.leftMarker > -1 && props.rightMarker > -1 ? 1 : 0.5;
-}, function (props) {
-  return props.leftMarker > -1 && props.rightMarker > -1 ? 'all' : 'none';
-});
-
-var CommentBlock = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'EditorControlMenuButton__CommentBlock',
-  componentId: 'sc-yoq9bd-2'
-})(['position:relative;width:', ';padding:', ';height:', ';overflow:hidden;transition:all 250ms ease-in-out;', '{border:none;resize:none;}'], function (props) {
-  return props.active ? '300px' : '0px';
-}, function (props) {
-  return props.active ? '15px 45px 15px 15px' : '0px';
-}, function (props) {
-  return props.active ? '100px' : '0px';
-}, _components.Textarea.Element);
-
-var BackButton = (0, _styledComponents2.default)(_components.Button).withConfig({
-  displayName: 'EditorControlMenuButton__BackButton',
-  componentId: 'sc-yoq9bd-3'
-})(['background:transparent;border:none;margin:0 !important;width:20px;height:20px;padding:0;right:15px;top:10px;position:absolute;&:hover,&:focus{background:transparent;}', '{transform:translate(-50%,-50%);top:50%;left:50%;position:absolute;svg path{fill:#000;}}'], _components.Icon.Element);
-
-var SendButton = (0, _styledComponents2.default)(_components.Button).withConfig({
-  displayName: 'EditorControlMenuButton__SendButton',
-  componentId: 'sc-yoq9bd-4'
-})(['background:rgba(0,206,198,0.1);border:none;margin:0 !important;width:30px;height:30px;padding:0;position:absolute;right:15px;top:calc(100% - 45px);&:hover,&:focus{background:rgba(0,206,198,0.1);}', '{transform:translate(-50%,-50%);top:50%;left:50%;position:absolute;svg path{fill:#00cec6;}}'], _components.Icon.Element);
-
-var EditorControlMenuButton = function (_Component) {
-  _inherits(EditorControlMenuButton, _Component);
-
-  function EditorControlMenuButton(props) {
-    _classCallCheck(this, EditorControlMenuButton);
-
-    var _this = _possibleConstructorReturn(this, (EditorControlMenuButton.__proto__ || Object.getPrototypeOf(EditorControlMenuButton)).call(this, props));
-
-    _this.state = {
-      comment: '',
-      commentActive: false,
-      commentType: ''
-    };
-    _this.onClick = _this.onClick.bind(_this);
-    return _this;
-  }
-
-  _createClass(EditorControlMenuButton, [{
-    key: 'onClick',
-    value: function onClick(type) {
-      switch (type) {
-        case 'edit_out':
-        case 'mute':
-        case 'mute-beep':
-        case 'no_smoking':
-        case 'no_drinking':
-        case 'comment':
-        case 'blur':
-          this.setState({
-            commentActive: true,
-            commentType: type
-          }, function () {
-            var inputElem = document.querySelectorAll('.menu-list textarea')[0];
-            if (inputElem) {
-              inputElem.focus();
-            }
-          });
-          break;
-      }
-    }
-  }, {
-    key: 'onCommentEnter',
-    value: function onCommentEnter() {
-      var _props = this.props,
-          _props$player = _props.player,
-          leftMarker = _props$player.leftMarker,
-          rightMarker = _props$player.rightMarker,
-          onEditAction = _props.onEditAction,
-          actions = _props.actions;
-      var _state = this.state,
-          commentType = _state.commentType,
-          comment = _state.comment;
-
-      var title = '';
-      var subTitle = '';
-      switch (commentType) {
-        case 'comment':
-          title = 'Comment';
-          subTitle = comment;
-          break;
-        case 'blur':
-          title = 'Blur';
-          subTitle = comment;
-          break;
-        case 'edit_out':
-          title = 'Edit Out';
-          subTitle = comment;
-          break;
-        case 'mute':
-          title = 'Mute';
-          subTitle = comment;
-          break;
-        case 'mute-beep':
-          title = 'Beep';
-          subTitle = comment;
-          break;
-        case 'no_smoking':
-          title = 'Smoking Disclaimer';
-          subTitle = comment;
-          break;
-        case 'no_drinking':
-          title = 'Drinking Disclaimer';
-          subTitle = comment;
-          break;
-      }
-      var data = {
-        type: commentType,
-        icon: commentType,
-        value: {
-          title: title,
-          sub_title: subTitle,
-          in_time: leftMarker,
-          out_time: rightMarker,
-          is_selected: false
-        }
-      };
-      this.onCommentClose();
-      onEditAction(data);
-      actions.handleMarkerPointChange('delete');
-    }
-  }, {
-    key: 'onCommentClose',
-    value: function onCommentClose() {
-      this.setState({
-        commentActive: false,
-        commentType: '',
-        comment: ''
-      });
-    }
-  }, {
-    key: 'updateComment',
-    value: function updateComment(value) {
-      this.setState({
-        comment: value
-      });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      var _props2 = this.props,
-          player = _props2.player,
-          actions = _props2.actions,
-          style = _props2.style,
-          playerType = _props2.playerType,
-          assetType = _props2.assetType,
-          contentType = _props2.contentType;
-      var _state2 = this.state,
-          comment = _state2.comment,
-          commentActive = _state2.commentActive,
-          commentType = _state2.commentType;
-
-      return _react2.default.createElement(
-        _react2.default.Fragment,
-        null,
-        playerType === 'snp_edit' || playerType === 'dubbing_review' ? _react2.default.createElement(
-          _Menu2.default,
-          {
-            icon: 'editor',
-            player: player,
-            actions: actions,
-            style: style,
-            active: commentActive
-          },
-          _react2.default.createElement(
-            EditContainer,
-            null,
-            _react2.default.createElement(
-              CommentBlock,
-              { active: commentActive },
-              _react2.default.createElement(BackButton, _extends({
-                display: 'rounded',
-                appearance: 'cta',
-                icon: 'cross',
-                width: 20,
-                height: 20,
-                iconWidth: 10,
-                iconHeight: 10,
-                tabIndex: '0',
-                onClick: function onClick() {
-                  return _this2.onCommentClose();
-                }
-              }, this.props)),
-              _react2.default.createElement(_components.Textarea, {
-                type: 'text',
-                label: commentType.split('_').join(' '),
-                value: comment,
-                resize: false,
-                onChange: function onChange(e) {
-                  return _this2.updateComment(e.target.value);
-                },
-                placeholder: commentType.split('_').join(' ')
-              }),
-              _react2.default.createElement(SendButton, _extends({
-                display: 'rounded',
-                appearance: 'cta',
-                icon: 'send',
-                width: 30,
-                height: 30,
-                iconWidth: 12,
-                iconHeight: 11,
-                tabIndex: '0',
-                onClick: function onClick() {
-                  return _this2.onCommentEnter();
-                }
-              }, this.props))
-            ),
-            _react2.default.createElement(
-              EditBlock,
-              {
-                active: !commentActive,
-                leftMarker: player.leftMarker,
-                rightMarker: player.rightMarker,
-                onClick: function onClick() {
-                  return _this2.onClick('comment');
-                }
-              },
-              _react2.default.createElement(_components.Icon, { name: 'comment', width: 14, height: 14 }),
-              _react2.default.createElement(
-                'p',
-                null,
-                'Comment'
-              )
-            ),
-            playerType === 'snp_edit' && assetType === 'fc' && contentType !== 'promo' && _react2.default.createElement(
-              EditBlock,
-              {
-                active: !commentActive,
-                leftMarker: player.leftMarker,
-                rightMarker: player.rightMarker,
-                onClick: function onClick() {
-                  return _this2.onClick('edit_out');
-                }
-              },
-              _react2.default.createElement(_components.Icon, { name: 'cut', width: 14, height: 14 }),
-              _react2.default.createElement(
-                'p',
-                null,
-                'Edit Out'
-              )
-            ),
-            (playerType === 'snp_edit' && assetType === 'fc' && contentType !== 'promo' || playerType === 'dubbing_review') && _react2.default.createElement(
-              _react2.default.Fragment,
-              null,
-              _react2.default.createElement(
-                EditBlock,
-                {
-                  active: !commentActive,
-                  leftMarker: player.leftMarker,
-                  rightMarker: player.rightMarker,
-                  onClick: function onClick() {
-                    return _this2.onClick('mute');
-                  }
-                },
-                _react2.default.createElement(_components.Icon, { name: 'mute', width: 14, height: 14 }),
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  'Mute'
-                )
-              ),
-              _react2.default.createElement(
-                EditBlock,
-                {
-                  active: !commentActive,
-                  leftMarker: player.leftMarker,
-                  rightMarker: player.rightMarker,
-                  onClick: function onClick() {
-                    return _this2.onClick('mute-beep');
-                  }
-                },
-                _react2.default.createElement(_components.Icon, { name: 'mute-beep', width: 14, height: 14 }),
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  'Beep'
-                )
-              )
-            ),
-            playerType === 'snp_edit' && assetType === 'fc' && contentType !== 'promo' && _react2.default.createElement(
-              _react2.default.Fragment,
-              null,
-              _react2.default.createElement(
-                EditBlock,
-                {
-                  active: !commentActive,
-                  leftMarker: player.leftMarker,
-                  rightMarker: player.rightMarker,
-                  onClick: function onClick() {
-                    return _this2.onClick('blur');
-                  }
-                },
-                _react2.default.createElement(_components.Icon, { name: 'blur', width: 14, height: 14 }),
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  'Blur'
-                )
-              ),
-              _react2.default.createElement(
-                EditBlock,
-                {
-                  active: !commentActive,
-                  leftMarker: player.leftMarker,
-                  rightMarker: player.rightMarker,
-                  onClick: function onClick() {
-                    return _this2.onClick('no_smoking');
-                  }
-                },
-                _react2.default.createElement(_components.Icon, { name: 'no_smoking', width: 14, height: 14 }),
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  'Smoking Disclaimer'
-                )
-              ),
-              _react2.default.createElement(
-                EditBlock,
-                {
-                  active: !commentActive,
-                  leftMarker: player.leftMarker,
-                  rightMarker: player.rightMarker,
-                  onClick: function onClick() {
-                    return _this2.onClick('no_drinking');
-                  }
-                },
-                _react2.default.createElement(_components.Icon, { name: 'no_drinking', width: 14, height: 14 }),
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  'Drinking Disclaimer'
-                )
-              )
-            )
-          )
-        ) : null
-      );
-    }
-  }]);
-
-  return EditorControlMenuButton;
-}(_react.Component);
-
-exports.default = EditorControlMenuButton;
-
-
-EditorControlMenuButton.propTypes = propTypes;
-EditorControlMenuButton.displayName = 'EditorControlMenuButton';

package/components/control-bar/ForwardControl.js

@@ -1,17 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _ForwardReplayControl = require('./ForwardReplayControl');
-
-var _ForwardReplayControl2 = _interopRequireDefault(_ForwardReplayControl);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// Pass mode into parent function
-var ForwardControl = (0, _ForwardReplayControl2.default)('forward');
-
-ForwardControl.displayName = 'ForwardControl';
-exports.default = ForwardControl;

package/components/control-bar/ForwardReplayControl.js

@@ -1,122 +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 _propTypes = require('prop-types');
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _components = require('@desynova-digital/components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 = {
-  actions: _propTypes.PropTypes.instanceOf(Object),
-  seconds: _propTypes.PropTypes.number
-};
-
-var defaultProps = {
-  actions: {},
-  seconds: 0.04
-};
-
-var ForwardReplayButton = (0, _styledComponents2.default)(_components.Button).withConfig({
-  displayName: 'ForwardReplayControl__ForwardReplayButton',
-  componentId: 'sc-s2rlry-0'
-})(['background:transparent;border:none;margin:0 10px;&:hover,&:focus{background:transparent;}']);
-
-exports.default = function (mode) {
-  var ForwardReplayControl = function (_Component) {
-    _inherits(ForwardReplayControl, _Component);
-
-    function ForwardReplayControl(props, context) {
-      _classCallCheck(this, ForwardReplayControl);
-
-      var _this = _possibleConstructorReturn(this, (ForwardReplayControl.__proto__ || Object.getPrototypeOf(ForwardReplayControl)).call(this, props, context));
-
-      _this.handleClick = _this.handleClick.bind(_this);
-      return _this;
-    }
-
-    _createClass(ForwardReplayControl, [{
-      key: 'getIcon',
-      value: function getIcon() {
-        var icon = '';
-        var seconds = this.props.seconds;
-
-        if (mode === 'forward') {
-          if (seconds === 10) {
-            icon = 'forward-10';
-          } else {
-            icon = 'triangle-double-right';
-          }
-        } else {
-          if (seconds === 10) {
-            icon = 'rewind-10';
-          } else {
-            icon = 'triangle-double-left';
-          }
-        }
-
-        return icon;
-      }
-    }, {
-      key: 'handleClick',
-      value: function handleClick() {
-        var _props = this.props,
-            actions = _props.actions,
-            seconds = _props.seconds;
-        // Depends mode to implement different actions
-
-        if (mode === 'forward') {
-          actions.forward(seconds);
-        } else {
-          actions.replay(seconds);
-        }
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        var _this2 = this;
-
-        var seconds = this.props.seconds;
-
-        return _react2.default.createElement(ForwardReplayButton, {
-          display: 'rounded',
-          appearance: 'cta',
-          icon: this.getIcon(),
-          iconWidth: seconds === 10 ? 22 : 14,
-          iconHeight: seconds === 10 ? 22 : 14,
-          width: 20,
-          height: 20,
-          ref: function ref(c) {
-            _this2.button = c;
-          },
-          onClick: this.handleClick
-        });
-      }
-    }]);
-
-    return ForwardReplayControl;
-  }(_react.Component);
-
-  ForwardReplayControl.propTypes = propTypes;
-  ForwardReplayControl.defaultProps = defaultProps;
-  return ForwardReplayControl;
-};

package/components/control-bar/FullscreenToggle.js

@@ -1,101 +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 _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _components = require('@desynova-digital/components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 = {
-  actions: _propTypes.PropTypes.instanceOf(Object),
-  player: _propTypes.PropTypes.instanceOf(Object),
-  playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel'])
-};
-
-var defaultProps = {
-  actions: {},
-  player: {}
-};
-
-var FullscreenToggleButton = (0, _styledComponents2.default)(_components.Button).withConfig({
-  displayName: 'FullscreenToggle__FullscreenToggleButton',
-  componentId: 'sc-3sxzvl-0'
-})(['background:transparent;border:none;margin:0 10px;&:hover,&:focus{background:transparent;svg path{fill:#00cec6;}}']);
-
-var FullscreenToggle = function (_Component) {
-  _inherits(FullscreenToggle, _Component);
-
-  function FullscreenToggle(props, context) {
-    _classCallCheck(this, FullscreenToggle);
-
-    var _this = _possibleConstructorReturn(this, (FullscreenToggle.__proto__ || Object.getPrototypeOf(FullscreenToggle)).call(this, props, context));
-
-    _this.handleClick = _this.handleClick.bind(_this);
-    return _this;
-  }
-
-  _createClass(FullscreenToggle, [{
-    key: 'handleClick',
-    value: function handleClick() {
-      var _props = this.props,
-          player = _props.player,
-          actions = _props.actions;
-
-      actions.toggleFullscreen(player);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      var playerType = this.props.playerType;
-
-      return _react2.default.createElement(
-        _react2.default.Fragment,
-        null,
-        playerType !== 'panel' ? _react2.default.createElement(FullscreenToggleButton, {
-          display: 'rounded',
-          appearance: 'cta',
-          icon: 'fullscreen',
-          ref: function ref(c) {
-            _this2.button = c;
-          },
-          onClick: this.handleClick,
-          iconWidth: 14,
-          iconHeight: 14,
-          width: 20,
-          height: 20
-        }) : null
-      );
-    }
-  }]);
-
-  return FullscreenToggle;
-}(_react.Component);
-
-exports.default = FullscreenToggle;
-
-
-FullscreenToggle.propTypes = propTypes;
-FullscreenToggle.defaultProps = defaultProps;
-FullscreenToggle.displayName = 'FullscreenToggle';