@desynova-digital/player 3.9.6 → 4.0.0

package/control/ProgressControl.jsx

@@ -0,0 +1,155 @@
+import { PropTypes } from 'prop-types';
+import React, { Component } from 'react';
+import { findDOMNode } from 'react-dom';
+import styled from 'styled-components';
+import * as Dom from '../utils/dom';
+import SeekBar from './SeekBar';
+import PointersBar from './PointersBar';
+import colors from '../utils/colors';
+
+const propTypes = {
+  player: PropTypes.instanceOf(Object),
+  controlType: PropTypes.string,
+  playerType: PropTypes.oneOf([
+    'dubbing_review',
+    'clipping_default',
+    'default',
+    'tagging',
+    'qc',
+    'subtitle',
+    'snp_edit',
+    'archive',
+    'restore',
+    'clipping',
+    'storyboard',
+    'panel'
+  ])
+};
+
+const defaultProps = {};
+
+const ProgressControlBlock = styled.div`
+  width: 100%;
+  height: ${(props) => (props.controlType === 'advanced' && !props.isFullscreen ? '80px' : '4px')};
+  position: relative;
+  overflow: ${(props) => (props.controlType === 'advanced' && !props.isFullscreen ? 'none' : 'visible')};
+  padding-top: 0px;
+  background: #000000;
+  background: ${colors.common.base.black};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 250ms ease-in-out;
+  bottom: ${(props) => (props.player === 'panel' && props.active ? '50px' : 'initial')};
+`;
+
+const SeekControlBar = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+  z-index: ${(props) => (props.controlType === 'advanced' && !props.isFullscreen ? '2' : '1')};
+`;
+
+const MarkerTagsBlock = styled.div`
+  min-width: 100px;
+  max-width: 100px;
+  position: relative;
+  height: 100%;
+  .empty-block {
+    height: calc(100% - 20px);
+  }
+  .tags-block {
+    height: 20px;
+    font-family: SFUIText-Medium;
+    font-size: 12px;
+    color: #ffffff;
+    text-transform: uppercase;
+    border-top: 1px solid #333333;
+    border-bottom: 1px solid #333333;
+    p {
+      line-height: 18px;
+      padding-left: 10px;
+    }
+  }
+`;
+
+export default class ProgressControl extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      mouseTime: {
+        time: null,
+        position: 0,
+        stateZoom: null
+      }
+    };
+
+    this.handleMouseMoveThrottle = this.handleMouseMove.bind(this);
+  }
+
+  handleMouseMove(event) {
+    // if (!event.pageX) {
+    //   return;
+    // }
+    // const {
+    //   duration: { seconds }
+    // } = this.props;
+    // const node = findDOMNode(this.seekBar);
+    // const newTime = Dom.getPointerPosition(node, event).x * seconds;
+    // const position = event.pageX - Dom.findElPosition(node).left;
+    // this.setState({
+    //   mouseTime: {
+    //     time: newTime,
+    //     position
+    //   }
+    // });
+  }
+
+  render() {
+    const { controlType, playerType, isFullscreen, userActivity } = this.props;
+    const { mouseTime } = this.state;
+    return (
+      <React.Fragment>
+        <ProgressControlBlock
+          controlType={controlType}
+          player={playerType}
+          active={userActivity}
+          isFullscreen={isFullscreen}
+          ref={(c) => {
+            this.progressControlBlock = c;
+          }}>
+          {controlType === 'advanced' && !isFullscreen ? (
+            <MarkerTagsBlock>
+              <div className="empty-block" />
+            </MarkerTagsBlock>
+          ) : null}
+          <SeekControlBar
+            ref={(c) => {
+              this.seekControlBar = c;
+            }}
+            onMouseMove={this.handleMouseMoveThrottle}>
+            <SeekBar
+              mouseTime={mouseTime}
+              ref={(c) => {
+                this.seekBar = c;
+              }}
+              {...this.props}
+            />
+          </SeekControlBar>
+          {controlType === 'advanced' && !isFullscreen ? (
+            <MarkerTagsBlock>
+              <div className="empty-block" />
+            </MarkerTagsBlock>
+          ) : null}
+        </ProgressControlBlock>
+        {controlType === 'advanced' && !isFullscreen ? <PointersBar {...this.props} /> : null}
+      </React.Fragment>
+    );
+  }
+}
+
+ProgressControl.propTypes = propTypes;
+ProgressControl.defaultProps = defaultProps;
+ProgressControl.displayName = 'ProgressControl';

package/control/SeekBar.js

@@ -0,0 +1,204 @@
+"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 = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _propTypes = require("prop-types");
+var _Slider = _interopRequireDefault(require("./Slider"));
+var _PlayProgressBar = _interopRequireDefault(require("./PlayProgressBar"));
+var _utils = require("../utils");
+var _Timeline = _interopRequireDefault(require("./Timeline"));
+var _MarkerBar = _interopRequireDefault(require("./MarkerBar"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
+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); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+// import TagsBar from '../TagsBar';
+// import MouseTimeDisplay from './MouseTimeDisplay';
+
+var AdvancedControlBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 46px;\n  position: relative;\n  cursor: pointer;\n  z-index: 1;\n"])));
+var SliderBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 4px;\n  position: relative;\n  cursor: pointer;\n  z-index: 2;\n"])));
+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 = /*#__PURE__*/function (_Component) {
+  _inherits(SeekBar, _Component);
+  var _super = _createSuper(SeekBar);
+  function SeekBar(props, context) {
+    var _this;
+    _classCallCheck(this, SeekBar);
+    _this = _super.call(this, props, context);
+    _this.getPercent = _this.getPercent.bind(_assertThisInitialized(_this));
+    _this.getNewTime = _this.getNewTime.bind(_assertThisInitialized(_this));
+    _this.stepForward = _this.stepForward.bind(_assertThisInitialized(_this));
+    _this.stepBack = _this.stepBack.bind(_assertThisInitialized(_this));
+    _this.handleMouseDown = _this.handleMouseDown.bind(_assertThisInitialized(_this));
+    _this.handleMouseMove = _this.handleMouseMove.bind(_assertThisInitialized(_this));
+    _this.handleMouseUp = _this.handleMouseUp.bind(_assertThisInitialized(_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 _this$props = this.props,
+        seconds = _this$props.currentTime.seconds,
+        seekingTime = _this$props.seekingTime,
+        duration = _this$props.duration;
+      var time = seekingTime || seconds;
+      var percent = time / duration.seconds;
+      return percent >= 1 ? 1 : percent;
+    }
+  }, {
+    key: "getNewTime",
+    value: function getNewTime(event) {
+      var seconds = this.props.duration.seconds;
+      var distance = this.slider.calculateDistance(event);
+      var newTime = distance * seconds;
+
+      // Don't let video end while scrubbing.
+      return newTime === seconds ? 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 actionClick = this.props.actionClick;
+      var newTime = this.getNewTime(event);
+      // Set new time (tell video to seek to new time)
+      actionClick({
+        action: 'seek',
+        value: newTime
+      });
+      // actions.handleEndSeeking(newTime);//todo check if needed
+      this.setState({
+        sliderActive: false
+      });
+    }
+  }, {
+    key: "handleMouseMove",
+    value: function handleMouseMove(event) {
+      var sliderActive = this.state.sliderActive;
+      if (sliderActive) {
+        var actionClick = this.props.actionClick;
+        var newTime = this.getNewTime(event);
+        actionClick({
+          action: 'seeking_time',
+          value: newTime
+        });
+      }
+    }
+  }, {
+    key: "stepForward",
+    value: function stepForward() {
+      var actionClick = this.props.actionClick;
+      actionClick({
+        action: 'add_seconds',
+        value: '0.04'
+      });
+    }
+  }, {
+    key: "stepBack",
+    value: function stepBack() {
+      var actionClick = this.props.actionClick;
+      actionClick({
+        action: 'add_seconds',
+        value: '-0.04'
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props2 = this.props,
+        seconds = _this$props2.currentTime.seconds,
+        seekingTime = _this$props2.seekingTime,
+        duration = _this$props2.duration,
+        isFullscreen = _this$props2.isFullscreen,
+        controlType = _this$props2.controlType,
+        playerType = _this$props2.playerType,
+        tagsMarker = _this$props2.tagsMarker,
+        assetType = _this$props2.assetType;
+      var time = seekingTime || seconds;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MarkerBar["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
+        onMouseDown: this.handleMouseDown,
+        onMouseMove: this.handleMouseMove,
+        onMouseUp: this.handleMouseUp
+      }, /*#__PURE__*/_react["default"].createElement(SliderBlock, null, /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+        ref: function ref(input) {
+          _this2.slider = input;
+        },
+        label: "video progress bar",
+        valuenow: (this.getPercent() * 100).toFixed(2),
+        valuetext: (0, _utils.formatTime)(time, duration.seconds)
+        // onMouseDown={this.handleMouseDown}
+        // onMouseMove={this.handleMouseMove}
+        // onMouseUp={this.handleMouseUp}
+        ,
+        getPercent: this.getPercent,
+        stepForward: this.stepForward,
+        stepBack: this.stepBack
+      }, /*#__PURE__*/_react["default"].createElement(_PlayProgressBar["default"], _extends({
+        currentTime: time,
+        duration: duration.seconds,
+        playerType: playerType,
+        assetType: assetType
+      }, this.props)))), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(AdvancedControlBlock, null, /*#__PURE__*/_react["default"].createElement(_Timeline["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/control/SeekBar.jsx

@@ -0,0 +1,229 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { PropTypes } from 'prop-types';
+
+// import AudioWaveform from './AudioWaveform';
+import Slider from './Slider';
+import PlayProgressBar from './PlayProgressBar';
+import { formatTime } from '../utils';
+import Timeline from './Timeline';
+import MarkerBar from './MarkerBar';
+// import TagsBar from '../TagsBar';
+// import MouseTimeDisplay from './MouseTimeDisplay';
+
+const AdvancedControlBlock = styled.div`
+  width: 100%;
+  height: 46px;
+  position: relative;
+  cursor: pointer;
+  z-index: 1;
+`;
+
+const SliderBlock = styled.div`
+  width: 100%;
+  height: 4px;
+  position: relative;
+  cursor: pointer;
+  z-index: 2;
+`;
+
+const propTypes = {
+  actions: PropTypes.instanceOf(Object),
+  player: PropTypes.instanceOf(Object),
+  controlType: PropTypes.string,
+  tagsMarker: PropTypes.instanceOf(Array),
+  mouseTime: PropTypes.instanceOf(Object),
+  assetType: PropTypes.oneOf(['fc', 'rc']),
+  playerType: PropTypes.oneOf([
+    'dubbing_review',
+    'clipping_default',
+    'default',
+    'tagging',
+    'qc',
+    'subtitle',
+    'snp_edit',
+    'archive',
+    'restore',
+    'clipping',
+    'storyboard',
+    'panel'
+  ])
+};
+
+export default class SeekBar extends Component {
+  constructor(props, context) {
+    super(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
+    };
+  }
+
+  componentDidMount() {}
+
+  componentDidUpdate() {}
+
+  /**
+   * Get percentage of video played
+   *
+   * @return {Number} Percentage played
+   * @method getPercent
+   */
+  getPercent() {
+    const {
+      currentTime: { seconds },
+      seekingTime,
+      duration
+    } = this.props;
+    const time = seekingTime || seconds;
+    const percent = time / duration.seconds;
+    return percent >= 1 ? 1 : percent;
+  }
+
+  getNewTime(event) {
+    const {
+      duration: { seconds }
+    } = this.props;
+    const distance = this.slider.calculateDistance(event);
+    const newTime = distance * seconds;
+
+    // Don't let video end while scrubbing.
+    return newTime === seconds ? newTime - 0.1 : newTime;
+  }
+
+  handleMouseDown() {
+    console.log('handleMouse handleMouseDown');
+    this.setState({ sliderActive: true });
+  }
+
+  handleMouseUp(event) {
+    console.log('handleMouse handleMouseUp');
+    const { actionClick } = this.props;
+    const newTime = this.getNewTime(event);
+    // Set new time (tell video to seek to new time)
+    actionClick({
+      action: 'seek',
+      value: newTime
+    });
+    // actions.handleEndSeeking(newTime);//todo check if needed
+    this.setState({ sliderActive: false });
+  }
+
+  handleMouseMove(event) {
+    const { sliderActive } = this.state;
+    if (sliderActive) {
+      const { actionClick } = this.props;
+      const newTime = this.getNewTime(event);
+      actionClick({
+        action: 'seeking_time',
+        value: newTime
+      });
+    }
+  }
+
+  stepForward() {
+    const { actionClick } = this.props;
+    actionClick({
+      action: 'add_seconds',
+      value: '0.04'
+    });
+  }
+
+  stepBack() {
+    const { actionClick } = this.props;
+    actionClick({
+      action: 'add_seconds',
+      value: '-0.04'
+    });
+  }
+
+  render() {
+    const {
+      currentTime: { seconds },
+      seekingTime,
+      duration,
+      isFullscreen,
+      controlType,
+      playerType,
+      tagsMarker,
+      assetType
+      // mouseTime
+    } = this.props;
+    const time = seekingTime || seconds;
+    return (
+      <React.Fragment>
+        <MarkerBar {...this.props} />
+        {/* {tagsMarker && tagsMarker.length ? <TagsBar {...this.props} /> : null} */}
+        {/* {controlType === 'advanced' ? <MarkerBar {...this.props} /> : null} */}
+        <div onMouseDown={this.handleMouseDown} onMouseMove={this.handleMouseMove} onMouseUp={this.handleMouseUp}>
+          <SliderBlock>
+            <Slider
+              ref={(input) => {
+                this.slider = input;
+              }}
+              label="video progress bar"
+              valuenow={(this.getPercent() * 100).toFixed(2)}
+              valuetext={formatTime(time, duration.seconds)}
+              // onMouseDown={this.handleMouseDown}
+              // onMouseMove={this.handleMouseMove}
+              // onMouseUp={this.handleMouseUp}
+              getPercent={this.getPercent}
+              stepForward={this.stepForward}
+              stepBack={this.stepBack}>
+              {/* <LoadProgressBar
+                buffered={buffered}
+                currentTime={time}
+                duration={duration}
+                playerType={this.props.playerType}
+              />
+              <MouseTimeDisplay
+                duration={duration}
+                mouseTime={mouseTime}
+                playerType={playerType}
+              />*/}
+              <PlayProgressBar
+                currentTime={time}
+                duration={duration.seconds}
+                playerType={playerType}
+                assetType={assetType}
+                {...this.props}
+              />
+            </Slider>
+          </SliderBlock>
+          {controlType === 'advanced' && !isFullscreen ? (
+            <React.Fragment>
+              <AdvancedControlBlock>
+                {/* 
+                  <AudioWaveform
+                    {...this.props}
+                    ref={(c) => {
+                      this.audioWaveform = c;
+                    }}
+                  />
+                */}
+                <Timeline
+                  {...this.props}
+                  ref={(c) => {
+                    this.timeline = c;
+                  }}
+                />
+              </AdvancedControlBlock>
+            </React.Fragment>
+          ) : null}
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+SeekBar.displayName = 'SeekBar';
+SeekBar.propTypes = propTypes;

package/control/SettingsMenuButton.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = SettingsMenuButton;
+var _propTypes = require("prop-types");
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Menu = _interopRequireDefault(require("../utils/Menu"));
+var _components = require("@desynova-digital/components");
+var _PlayBackRateControl = _interopRequireDefault(require("./PlayBackRateControl"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var propTypes = {
+  player: _propTypes.PropTypes.instanceOf(Object),
+  actions: _propTypes.PropTypes.instanceOf(Object),
+  style: _propTypes.PropTypes.instanceOf(Object)
+};
+var SettingsMenuContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  .settings-menu-tile {\n    background: transparent;\n    div {\n      padding: 15px;\n      cursor: pointer;\n    }\n  }\n"])));
+var SafeAreaBlock = (0, _styledComponents["default"])('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  background: transparent;\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  text-transform: uppercase;\n  justify-content: flex-start;\n  align-items: center;\n  &:hover {\n    background: rgba(0, 206, 198, 0.1);\n  }\n  p {\n    margin-left: 10px;\n    white-space: nowrap;\n  }\n"])));
+function SettingsMenuButton(_ref) {
+  var style = _ref.style,
+    SDBorderActive = _ref.SDBorderActive,
+    actionClick = _ref.actionClick,
+    playbackRate = _ref.playbackRate;
+  var handleClick = function handleClick() {
+    actionClick({
+      action: 'handle_sd_border_change',
+      value: !SDBorderActive
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+    icon: "settings",
+    position: "left",
+    style: style
+  }, /*#__PURE__*/_react["default"].createElement(SettingsMenuContainer, {
+    style: style
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "settings-menu-tile"
+  }, /*#__PURE__*/_react["default"].createElement(SafeAreaBlock, {
+    onClick: handleClick
+  }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+    name: "safe-area",
+    width: 20,
+    height: 20,
+    color: SDBorderActive ? '#00cec6' : '#333333'
+  }), /*#__PURE__*/_react["default"].createElement("p", {
+    style: SDBorderActive ? {
+      color: '#00cec6'
+    } : {
+      color: '#333333'
+    }
+  }, "4:3 Safe Area"))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "settings-menu-tile"
+  }, /*#__PURE__*/_react["default"].createElement(_PlayBackRateControl["default"], {
+    actionClick: actionClick,
+    playbackRate: playbackRate
+  }))));
+}
+SettingsMenuButton.propTypes = propTypes;
+SettingsMenuButton.displayName = 'SettingsMenuButton';