@desynova-digital/player 3.9.7 → 4.0.0

package/components/progress-bar/SeekBar.js

@@ -1,261 +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 _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _Slider = require('../Slider');
-
-var _Slider2 = _interopRequireDefault(_Slider);
-
-var _PlayProgressBar = require('./PlayProgressBar');
-
-var _PlayProgressBar2 = _interopRequireDefault(_PlayProgressBar);
-
-var _utils = require('../../utils');
-
-var _Timeline = require('./Timeline');
-
-var _Timeline2 = _interopRequireDefault(_Timeline);
-
-var _MarkerBar = require('../MarkerBar');
-
-var _MarkerBar2 = _interopRequireDefault(_MarkerBar);
-
-var _TagsBar = require('../TagsBar');
-
-var _TagsBar2 = _interopRequireDefault(_TagsBar);
-
-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; }
-
-// import AudioWaveform from './AudioWaveform';
-
-
-// import MouseTimeDisplay from './MouseTimeDisplay';
-
-var AdvancedControlBlock = _styledComponents2.default.div.withConfig({
-  displayName: 'SeekBar__AdvancedControlBlock',
-  componentId: 'sc-1rz7p7m-0'
-})(['width:100%;height:46px;position:relative;cursor:pointer;z-index:1;']);
-
-var SliderBlock = _styledComponents2.default.div.withConfig({
-  displayName: 'SeekBar__SliderBlock',
-  componentId: 'sc-1rz7p7m-1'
-})(['width:100%;height:4px;position:relative;cursor:pointer;z-index:2;']);
-
-var propTypes = {
-  actions: _propTypes.PropTypes.instanceOf(Object),
-  player: _propTypes.PropTypes.instanceOf(Object),
-  controlType: _propTypes.PropTypes.string,
-  tagsMarker: _propTypes.PropTypes.instanceOf(Array),
-  mouseTime: _propTypes.PropTypes.instanceOf(Object),
-  assetType: _propTypes.PropTypes.oneOf(['fc', 'rc']),
-  playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel'])
-};
-
-var SeekBar = function (_Component) {
-  _inherits(SeekBar, _Component);
-
-  function SeekBar(props, context) {
-    _classCallCheck(this, SeekBar);
-
-    var _this = _possibleConstructorReturn(this, (SeekBar.__proto__ || Object.getPrototypeOf(SeekBar)).call(this, props, context));
-
-    _this.getPercent = _this.getPercent.bind(_this);
-    _this.getNewTime = _this.getNewTime.bind(_this);
-    _this.stepForward = _this.stepForward.bind(_this);
-    _this.stepBack = _this.stepBack.bind(_this);
-
-    _this.handleMouseDown = _this.handleMouseDown.bind(_this);
-    _this.handleMouseMove = _this.handleMouseMove.bind(_this);
-    _this.handleMouseUp = _this.handleMouseUp.bind(_this);
-
-    _this.state = {
-      sliderActive: false
-    };
-    return _this;
-  }
-
-  _createClass(SeekBar, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {}
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {}
-
-    /**
-     * Get percentage of video played
-     *
-     * @return {Number} Percentage played
-     * @method getPercent
-     */
-
-  }, {
-    key: 'getPercent',
-    value: function getPercent() {
-      var _props$player = this.props.player,
-          currentTime = _props$player.currentTime,
-          seekingTime = _props$player.seekingTime,
-          duration = _props$player.duration;
-
-      var time = seekingTime || currentTime;
-      var percent = time / duration;
-      return percent >= 1 ? 1 : percent;
-    }
-  }, {
-    key: 'getNewTime',
-    value: function getNewTime(event) {
-      var duration = this.props.player.duration;
-
-      var distance = this.slider.calculateDistance(event);
-      var newTime = distance * duration;
-
-      // Don't let video end while scrubbing.
-      return newTime === duration ? newTime - 0.1 : newTime;
-    }
-  }, {
-    key: 'handleMouseDown',
-    value: function handleMouseDown() {
-      console.log('handleMouse handleMouseDown');
-      this.setState({ sliderActive: true });
-    }
-  }, {
-    key: 'handleMouseUp',
-    value: function handleMouseUp(event) {
-      console.log('handleMouse handleMouseUp');
-      var actions = this.props.actions;
-
-      var newTime = this.getNewTime(event);
-      // Set new time (tell video to seek to new time)
-      actions.seek(newTime);
-      actions.handleEndSeeking(newTime);
-      this.setState({ sliderActive: false });
-    }
-  }, {
-    key: 'handleMouseMove',
-    value: function handleMouseMove(event) {
-      var sliderActive = this.state.sliderActive;
-
-      if (sliderActive) {
-        var actions = this.props.actions;
-
-        var newTime = this.getNewTime(event);
-        actions.handleSeekingTime(newTime);
-      }
-    }
-  }, {
-    key: 'stepForward',
-    value: function stepForward() {
-      var actions = this.props.actions;
-
-      actions.forward(0.04);
-    }
-  }, {
-    key: 'stepBack',
-    value: function stepBack() {
-      var actions = this.props.actions;
-
-      actions.replay(0.04);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      var _props = this.props,
-          _props$player2 = _props.player,
-          currentTime = _props$player2.currentTime,
-          seekingTime = _props$player2.seekingTime,
-          duration = _props$player2.duration,
-          isFullscreen = _props$player2.isFullscreen,
-          controlType = _props.controlType,
-          playerType = _props.playerType,
-          tagsMarker = _props.tagsMarker,
-          assetType = _props.assetType;
-
-      var time = seekingTime || currentTime;
-      return _react2.default.createElement(
-        _react2.default.Fragment,
-        null,
-        _react2.default.createElement(_MarkerBar2.default, this.props),
-        tagsMarker && tagsMarker.length ? _react2.default.createElement(_TagsBar2.default, this.props) : null,
-        _react2.default.createElement(
-          'div',
-          {
-            onMouseDown: this.handleMouseDown,
-            onMouseMove: this.handleMouseMove,
-            onMouseUp: this.handleMouseUp
-          },
-          _react2.default.createElement(
-            SliderBlock,
-            null,
-            _react2.default.createElement(
-              _Slider2.default,
-              {
-                ref: function ref(input) {
-                  _this2.slider = input;
-                },
-                label: 'video progress bar',
-                valuenow: (this.getPercent() * 100).toFixed(2),
-                valuetext: (0, _utils.formatTime)(time, duration)
-                // onMouseDown={this.handleMouseDown}
-                // onMouseMove={this.handleMouseMove}
-                // onMouseUp={this.handleMouseUp}
-                , getPercent: this.getPercent,
-                stepForward: this.stepForward,
-                stepBack: this.stepBack
-              },
-              _react2.default.createElement(_PlayProgressBar2.default, _extends({
-                currentTime: time,
-                duration: duration,
-                playerType: playerType,
-                assetType: assetType
-              }, this.props))
-            )
-          ),
-          controlType === 'advanced' && !isFullscreen ? _react2.default.createElement(
-            _react2.default.Fragment,
-            null,
-            _react2.default.createElement(
-              AdvancedControlBlock,
-              null,
-              _react2.default.createElement(_Timeline2.default, _extends({}, this.props, {
-                ref: function ref(c) {
-                  _this2.timeline = c;
-                }
-              }))
-            )
-          ) : null
-        )
-      );
-    }
-  }]);
-
-  return SeekBar;
-}(_react.Component);
-
-exports.default = SeekBar;
-
-
-SeekBar.displayName = 'SeekBar';
-SeekBar.propTypes = propTypes;

package/components/progress-bar/Timeline.js

@@ -1,134 +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 _reactDom = require('react-dom');
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _components = require('@desynova-digital/components');
-
-var _utils = require('../../utils');
-
-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),
-  initialTime: _propTypes.PropTypes.number,
-  frameRate: _propTypes.PropTypes.number
-};
-
-var TimelineBlock = _styledComponents2.default.div.withConfig({
-  displayName: 'Timeline__TimelineBlock',
-  componentId: 'sc-1qvrkuc-0'
-})(['display:flex;justify-content:space-between;align-items:stretch;position:absolute;width:100%;height:100%;top:0px;left:0;.player-time{width:100%;position:relative;height:46px;user-select:none;&:first-child{p{left:0px;}}&:last-child{width:10px;', '{display:none;}p{left:auto;right:0px;}}', '{position:absolute;left:0;bottom:0;}p{color:#aaa;font-size:10px;font-family:SFUIText-Regular;left:-28px;top:10px;letter-spacing:0.5px;position:absolute;user-select:none;}}'], _components.Icon.Element, _components.Icon.Element);
-
-var Timeline = function (_Component) {
-  _inherits(Timeline, _Component);
-
-  function Timeline(props, context) {
-    _classCallCheck(this, Timeline);
-
-    var _this = _possibleConstructorReturn(this, (Timeline.__proto__ || Object.getPrototypeOf(Timeline)).call(this, props, context));
-
-    _this.state = {
-      timeArray: []
-    };
-    _this.generateTimeline = _this.generateTimeline.bind(_this);
-    return _this;
-  }
-
-  _createClass(Timeline, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.generateTimeline();
-    }
-  }, {
-    key: 'generateTimeline',
-    value: function generateTimeline() {
-      var player = this.props.player;
-
-      var timelineBlock = (0, _reactDom.findDOMNode)(this.timelineBlock);
-      var perTimeWidth = 100;
-      var sliderWidth = timelineBlock.offsetWidth;
-      var timeBlocks = parseInt(sliderWidth / perTimeWidth, 10);
-      var timeDistance = parseInt(player.duration / timeBlocks, 10);
-      var timeArray = [0];
-      for (var i = 0; i < timeBlocks; i++) {
-        var lastValue = timeArray[timeArray.length - 1];
-        var currentTime = lastValue + timeDistance;
-        if (currentTime + timeDistance < player.duration) {
-          timeArray.push(currentTime);
-        } else {
-          timeArray.push(player.duration);
-          break;
-        }
-      }
-      this.setState({ timeArray: timeArray });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      var _props = this.props,
-          initialTime = _props.initialTime,
-          frameRate = _props.frameRate;
-      var timeArray = this.state.timeArray;
-
-      return _react2.default.createElement(
-        TimelineBlock,
-        {
-          ref: function ref(c) {
-            _this2.timelineBlock = c;
-          }
-        },
-        timeArray.map(function (time) {
-          var formattedTime = (0, _utils.secondsToTime)(time, frameRate, initialTime);
-          return _react2.default.createElement(
-            'div',
-            {
-              className: 'player-time',
-              ref: function ref(c) {
-                _this2.timelineContainer = c;
-              },
-              key: time
-            },
-            _react2.default.createElement(
-              'p',
-              null,
-              formattedTime
-            ),
-            _react2.default.createElement(_components.Icon, { name: 'timeline', stroke: '#aaa' })
-          );
-        })
-      );
-    }
-  }]);
-
-  return Timeline;
-}(_react.Component);
-
-exports.default = Timeline;
-
-
-Timeline.propTypes = propTypes;
-Timeline.displayName = 'Timeline';

package/components/settings-menu-control/PlaybackRateControl.js

@@ -1,147 +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 _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-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)
-};
-
-var PlaybackRateBlock = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'PlaybackRateControl__PlaybackRateBlock',
-  componentId: 'sc-1ji9ti-0'
-})(['display:block;background:transparent;font-family:SFUIText-Medium;font-size:12px;text-transform:uppercase;align-items:center;padding:0 !important;.playback-block{display:flex;justify-content:flex-start;border-bottom:1px solid #eeeeee;p{margin-left:10px;white-space:nowrap;}}.playback-rate-body{padding:0 !important;display:flex;justify-content:space-between;.playback-rate{border-right:1px solid #eeeeee;&:last-child{border:none;}&:hover{background:rgba(0,206,198,0.1);}&.active{pointer-events:none;color:#00cec6;}}}']);
-
-var PlaybackRateControl = function (_Component) {
-  _inherits(PlaybackRateControl, _Component);
-
-  function PlaybackRateControl(props) {
-    _classCallCheck(this, PlaybackRateControl);
-
-    var _this = _possibleConstructorReturn(this, (PlaybackRateControl.__proto__ || Object.getPrototypeOf(PlaybackRateControl)).call(this, props));
-
-    _this.changePlaybackRate = _this.changePlaybackRate.bind(_this);
-    return _this;
-  }
-
-  _createClass(PlaybackRateControl, [{
-    key: 'changePlaybackRate',
-    value: function changePlaybackRate(playbackRate) {
-      var actions = this.props.actions;
-
-      actions.changeRate(playbackRate, {
-        action: 'fast-forward',
-        source: 'shortcut'
-      });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      var player = this.props.player;
-
-      return _react2.default.createElement(
-        PlaybackRateBlock,
-        null,
-        _react2.default.createElement(
-          'div',
-          { className: 'playback-block' },
-          _react2.default.createElement(_components.Icon, {
-            name: 'playback-rate',
-            width: 14,
-            height: 14,
-            color: '#182738'
-          }),
-          _react2.default.createElement(
-            'p',
-            {
-              style: { color: '#182738' }
-            },
-            'Playback Speed'
-          )
-        ),
-        _react2.default.createElement(
-          'div',
-          { className: 'playback-rate-body' },
-          _react2.default.createElement(
-            'div',
-            {
-              className: player.playbackRate === 1 ? 'playback-rate active' : 'playback-rate',
-              onClick: function onClick() {
-                return _this2.changePlaybackRate(1);
-              },
-              role: 'presentation'
-            },
-            '1x'
-          ),
-          _react2.default.createElement(
-            'div',
-            {
-              className: player.playbackRate === 1.5 ? 'playback-rate active' : 'playback-rate',
-              onClick: function onClick() {
-                return _this2.changePlaybackRate(1.5);
-              },
-              role: 'presentation'
-            },
-            '1.5x'
-          ),
-          _react2.default.createElement(
-            'div',
-            {
-              className: player.playbackRate === 2 ? 'playback-rate active' : 'playback-rate',
-              onClick: function onClick() {
-                return _this2.changePlaybackRate(2);
-              },
-              role: 'presentation'
-            },
-            '2x'
-          ),
-          _react2.default.createElement(
-            'div',
-            {
-              className: player.playbackRate === 4 ? 'playback-rate active' : 'playback-rate',
-              onClick: function onClick() {
-                return _this2.changePlaybackRate(4);
-              },
-              role: 'presentation'
-            },
-            '4x'
-          )
-        )
-      );
-    }
-  }]);
-
-  return PlaybackRateControl;
-}(_react.Component);
-
-exports.default = PlaybackRateControl;
-
-
-PlaybackRateControl.propTypes = propTypes;
-PlaybackRateControl.displayName = 'PlaybackRateControl';

package/components/settings-menu-control/SafeAreaControl.js

@@ -1,92 +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 _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-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)
-};
-
-var SafeAreaBlock = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'SafeAreaControl__SafeAreaBlock',
-  componentId: 'sc-zvok24-0'
-})(['display:flex;background:transparent;font-family:SFUIText-Medium;font-size:12px;text-transform:uppercase;justify-content:flex-start;align-items:center;&:hover{background:rgba(0,206,198,0.1);}p{margin-left:10px;white-space:nowrap;}']);
-
-var SafeAreaControl = function (_Component) {
-  _inherits(SafeAreaControl, _Component);
-
-  function SafeAreaControl(props) {
-    _classCallCheck(this, SafeAreaControl);
-
-    var _this = _possibleConstructorReturn(this, (SafeAreaControl.__proto__ || Object.getPrototypeOf(SafeAreaControl)).call(this, props));
-
-    _this.handleClick = _this.handleClick.bind(_this);
-    return _this;
-  }
-
-  _createClass(SafeAreaControl, [{
-    key: 'handleClick',
-    value: function handleClick() {
-      var _props = this.props,
-          player = _props.player,
-          actions = _props.actions;
-
-      actions.handleSDBorderChange(!player.SDBorderActive);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var player = this.props.player;
-
-      return _react2.default.createElement(
-        SafeAreaBlock,
-        { onClick: this.handleClick },
-        _react2.default.createElement(_components.Icon, {
-          name: 'safe-area',
-          width: 20,
-          height: 20,
-          color: player.SDBorderActive ? '#00cec6' : '#333333'
-        }),
-        _react2.default.createElement(
-          'p',
-          {
-            style: player.SDBorderActive ? { color: '#00cec6' } : { color: '#333333' }
-          },
-          '4:3 Safe Area'
-        )
-      );
-    }
-  }]);
-
-  return SafeAreaControl;
-}(_react.Component);
-
-exports.default = SafeAreaControl;
-
-
-SafeAreaControl.propTypes = propTypes;
-SafeAreaControl.displayName = 'SafeAreaControl';