@desynova-digital/player 3.9.7 → 4.0.0

package/control/SettingsMenuButton.jsx

@@ -0,0 +1,69 @@
+import { PropTypes } from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+import Menu from '../utils/Menu';
+import { Icon } from '@desynova-digital/components';
+import PlaybackRateControl from './PlayBackRateControl';
+
+const propTypes = {
+  player: PropTypes.instanceOf(Object),
+  actions: PropTypes.instanceOf(Object),
+  style: PropTypes.instanceOf(Object)
+};
+
+const SettingsMenuContainer = styled.div`
+  width: 100%;
+  position: relative;
+  .settings-menu-tile {
+    background: transparent;
+    div {
+      padding: 15px;
+      cursor: pointer;
+    }
+  }
+`;
+
+const SafeAreaBlock = styled('div')`
+  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;
+  }
+`;
+
+export default function SettingsMenuButton({ style, SDBorderActive, actionClick, playbackRate }) {
+  const handleClick = () => {
+    actionClick({
+      action: 'handle_sd_border_change',
+      value: !SDBorderActive
+    });
+  };
+
+  return (
+    <Menu icon="settings" position="left" style={style}>
+      <SettingsMenuContainer style={style}>
+        <div className="settings-menu-tile">
+          <SafeAreaBlock onClick={handleClick}>
+            <Icon name="safe-area" width={20} height={20} color={SDBorderActive ? '#00cec6' : '#333333'} />
+            <p style={SDBorderActive ? { color: '#00cec6' } : { color: '#333333' }}>4:3 Safe Area</p>
+          </SafeAreaBlock>
+        </div>
+        <div className="settings-menu-tile">
+          <PlaybackRateControl actionClick={actionClick} playbackRate={playbackRate} />
+        </div>
+      </SettingsMenuContainer>
+    </Menu>
+  );
+}
+
+SettingsMenuButton.propTypes = propTypes;
+SettingsMenuButton.displayName = 'SettingsMenuButton';

package/control/Slider.js

@@ -0,0 +1,274 @@
+"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 _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../utils/colors"));
+var Dom = _interopRequireWildcard(require("../utils/dom"));
+var _templateObject;
+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 _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) } })); }
+var propTypes = {
+  onMouseDown: _propTypes.PropTypes.func,
+  onMouseMove: _propTypes.PropTypes.func,
+  stepForward: _propTypes.PropTypes.func,
+  stepBack: _propTypes.PropTypes.func,
+  sliderActive: _propTypes.PropTypes.func,
+  sliderInactive: _propTypes.PropTypes.func,
+  onMouseUp: _propTypes.PropTypes.func,
+  onFocus: _propTypes.PropTypes.func,
+  onBlur: _propTypes.PropTypes.func,
+  onClick: _propTypes.PropTypes.func,
+  getPercent: _propTypes.PropTypes.func,
+  vertical: _propTypes.PropTypes.bool,
+  children: _propTypes.PropTypes.node,
+  label: _propTypes.PropTypes.string,
+  valuenow: _propTypes.PropTypes.string,
+  valuetext: _propTypes.PropTypes.string
+};
+var defaultProps = {
+  onMouseDown: null,
+  onMouseMove: null,
+  stepForward: null,
+  stepBack: null,
+  sliderActive: null,
+  sliderInactive: null,
+  onMouseUp: null,
+  onFocus: null,
+  onBlur: null,
+  onClick: null,
+  getPercent: null,
+  vertical: false,
+  children: null,
+  label: '',
+  valuenow: '',
+  valuetext: ''
+};
+var SliderBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n  background: ", ";\n"])), _colors["default"].dark.base);
+var Slider = /*#__PURE__*/function (_Component) {
+  _inherits(Slider, _Component);
+  var _super = _createSuper(Slider);
+  function Slider(props, context) {
+    var _this;
+    _classCallCheck(this, Slider);
+    _this = _super.call(this, props, context);
+    _this.handleMouseDown = _this.handleMouseDown.bind(_assertThisInitialized(_this));
+    _this.handleMouseMove = _this.handleMouseMove.bind(_assertThisInitialized(_this));
+    _this.handleMouseUp = _this.handleMouseUp.bind(_assertThisInitialized(_this));
+    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
+    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
+    _this.handleKeyPress = _this.handleKeyPress.bind(_assertThisInitialized(_this));
+    _this.stepForward = _this.stepForward.bind(_assertThisInitialized(_this));
+    _this.stepBack = _this.stepBack.bind(_assertThisInitialized(_this));
+    _this.calculateDistance = _this.calculateDistance.bind(_assertThisInitialized(_this));
+    _this.getProgress = _this.getProgress.bind(_assertThisInitialized(_this));
+    _this.renderChildren = _this.renderChildren.bind(_assertThisInitialized(_this));
+    _this.state = {
+      // active: false,
+    };
+    return _this;
+  }
+  _createClass(Slider, [{
+    key: "getProgress",
+    value: function getProgress() {
+      var getPercent = this.props.getPercent;
+      if (!getPercent) {
+        return 0;
+      }
+      var progress = getPercent();
+
+      // Protect against no duration and other division issues
+      if (typeof progress !== 'number' || progress < 0 || progress === Infinity) {
+        progress = 0;
+      }
+      return progress;
+    }
+  }, {
+    key: "handleMouseDown",
+    value: function handleMouseDown(event) {
+      var _this$props = this.props,
+        onMouseDown = _this$props.onMouseDown,
+        sliderActive = _this$props.sliderActive;
+      /*
+       * event.preventDefault();
+       * event.stopPropagation();
+       */
+
+      document.addEventListener('mousemove', this.handleMouseMove, true);
+      document.addEventListener('mouseup', this.handleMouseUp, true);
+      document.addEventListener('touchmove', this.handleMouseMove, true);
+      document.addEventListener('touchend', this.handleMouseUp, true);
+      this.setState({
+        /*
+         *  active: true,
+         *  distance: 0
+         */
+      });
+      if (sliderActive) {
+        sliderActive(event);
+      }
+      this.handleMouseMove(event);
+      if (onMouseDown) {
+        onMouseDown(event);
+      }
+    }
+  }, {
+    key: "handleMouseMove",
+    value: function handleMouseMove(event) {
+      var onMouseMove = this.props.onMouseMove;
+      if (onMouseMove) {
+        onMouseMove(event);
+      }
+    }
+  }, {
+    key: "handleMouseUp",
+    value: function handleMouseUp(event) {
+      var _this$props2 = this.props,
+        onMouseUp = _this$props2.onMouseUp,
+        sliderInactive = _this$props2.sliderInactive;
+      document.removeEventListener('mousemove', this.handleMouseMove, true);
+      document.removeEventListener('mouseup', this.handleMouseUp, true);
+      document.removeEventListener('touchmove', this.handleMouseMove, true);
+      document.removeEventListener('touchend', this.handleMouseUp, true);
+      this.setState({
+        // active: false
+      });
+      if (sliderInactive) {
+        sliderInactive(event);
+      }
+      if (onMouseUp) {
+        onMouseUp(event);
+      }
+    }
+  }, {
+    key: "handleFocus",
+    value: function handleFocus(e) {
+      var onFocus = this.props.onFocus;
+      document.addEventListener('keydown', this.handleKeyPress, true);
+      if (onFocus) {
+        onFocus(e);
+      }
+    }
+  }, {
+    key: "handleBlur",
+    value: function handleBlur(e) {
+      var onBlur = this.props.onBlur;
+      document.removeEventListener('keydown', this.handleKeyPress, true);
+      if (onBlur) {
+        onBlur(e);
+      }
+    }
+  }, {
+    key: "handleClick",
+    value: function handleClick(event) {
+      var onClick = this.props.onClick;
+      event.preventDefault();
+      // event.stopPropagation();
+      if (onClick) {
+        onClick(event);
+      }
+    }
+  }, {
+    key: "handleKeyPress",
+    value: function handleKeyPress(event) {
+      if (event.which === 37 || event.which === 40) {
+        // Left and Down Arrows
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepBack();
+      } else if (event.which === 38 || event.which === 39) {
+        // Up and Right Arrows
+        event.preventDefault();
+        event.stopPropagation();
+        this.stepForward();
+      }
+    }
+  }, {
+    key: "stepForward",
+    value: function stepForward() {
+      var stepForward = this.props.stepForward;
+      if (stepForward) {
+        stepForward();
+      }
+    }
+  }, {
+    key: "stepBack",
+    value: function stepBack() {
+      var stepBack = this.props.stepBack;
+      if (stepBack) {
+        stepBack();
+      }
+    }
+  }, {
+    key: "calculateDistance",
+    value: function calculateDistance(event) {
+      var node = (0, _reactDom.findDOMNode)(this);
+      var position = Dom.getPointerPosition(node, event);
+      var vertical = this.props.vertical;
+      if (vertical) {
+        return position.y;
+      }
+      return position.x;
+    }
+  }, {
+    key: "renderChildren",
+    value: function renderChildren() {
+      var progress = this.getProgress();
+      var percentage = "".concat((progress * 100).toFixed(2), "%");
+      var children = this.props.children;
+      return _react["default"].Children.map(children, function (child) {
+        return /*#__PURE__*/_react["default"].cloneElement(child, {
+          progress: progress,
+          percentage: percentage
+        });
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+        label = _this$props3.label,
+        valuenow = _this$props3.valuenow,
+        valuetext = _this$props3.valuetext;
+      return /*#__PURE__*/_react["default"].createElement(SliderBlock, {
+        tabIndex: "0",
+        onMouseDown: this.handleMouseDown,
+        onTouchStart: this.handleMouseDown,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        onClick: this.handleClick,
+        "aria-label": label || '',
+        "aria-valuenow": valuenow || '',
+        "aria-valuetext": valuetext || '',
+        "aria-valuemin": 0,
+        "aria-valuemax": 100
+      }, this.renderChildren());
+    }
+  }]);
+  return Slider;
+}(_react.Component);
+exports["default"] = Slider;
+Slider.propTypes = propTypes;
+Slider.defaultProps = defaultProps;
+Slider.displayName = 'Slider';

package/control/Slider.jsx

@@ -0,0 +1,243 @@
+import { PropTypes } from 'prop-types';
+import React, { Component } from 'react';
+import { findDOMNode } from 'react-dom';
+import styled from 'styled-components';
+import colors from '../utils/colors';
+import * as Dom from '../utils/dom';
+
+const propTypes = {
+  onMouseDown: PropTypes.func,
+  onMouseMove: PropTypes.func,
+  stepForward: PropTypes.func,
+  stepBack: PropTypes.func,
+  sliderActive: PropTypes.func,
+  sliderInactive: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  getPercent: PropTypes.func,
+  vertical: PropTypes.bool,
+  children: PropTypes.node,
+  label: PropTypes.string,
+  valuenow: PropTypes.string,
+  valuetext: PropTypes.string
+};
+
+const defaultProps = {
+  onMouseDown: null,
+  onMouseMove: null,
+  stepForward: null,
+  stepBack: null,
+  sliderActive: null,
+  sliderInactive: null,
+  onMouseUp: null,
+  onFocus: null,
+  onBlur: null,
+  onClick: null,
+  getPercent: null,
+  vertical: false,
+  children: null,
+  label: '',
+  valuenow: '',
+  valuetext: ''
+};
+
+const SliderBlock = styled.div`
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  background: ${colors.dark.base};
+`;
+
+export default class Slider extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+    this.stepForward = this.stepForward.bind(this);
+    this.stepBack = this.stepBack.bind(this);
+    this.calculateDistance = this.calculateDistance.bind(this);
+    this.getProgress = this.getProgress.bind(this);
+    this.renderChildren = this.renderChildren.bind(this);
+
+    this.state = {
+      // active: false,
+    };
+  }
+
+  getProgress() {
+    const { getPercent } = this.props;
+    if (!getPercent) {
+      return 0;
+    }
+    let progress = getPercent();
+
+    // Protect against no duration and other division issues
+    if (typeof progress !== 'number' || progress < 0 || progress === Infinity) {
+      progress = 0;
+    }
+    return progress;
+  }
+
+  handleMouseDown(event) {
+    const { onMouseDown, sliderActive } = this.props;
+    /*
+     * event.preventDefault();
+     * event.stopPropagation();
+     */
+
+    document.addEventListener('mousemove', this.handleMouseMove, true);
+    document.addEventListener('mouseup', this.handleMouseUp, true);
+    document.addEventListener('touchmove', this.handleMouseMove, true);
+    document.addEventListener('touchend', this.handleMouseUp, true);
+
+    this.setState({
+      /*
+       *  active: true,
+       *  distance: 0
+       */
+    });
+
+    if (sliderActive) {
+      sliderActive(event);
+    }
+
+    this.handleMouseMove(event);
+
+    if (onMouseDown) {
+      onMouseDown(event);
+    }
+  }
+
+  handleMouseMove(event) {
+    const { onMouseMove } = this.props;
+
+    if (onMouseMove) {
+      onMouseMove(event);
+    }
+  }
+
+  handleMouseUp(event) {
+    const { onMouseUp, sliderInactive } = this.props;
+
+    document.removeEventListener('mousemove', this.handleMouseMove, true);
+    document.removeEventListener('mouseup', this.handleMouseUp, true);
+    document.removeEventListener('touchmove', this.handleMouseMove, true);
+    document.removeEventListener('touchend', this.handleMouseUp, true);
+
+    this.setState({
+      // active: false
+    });
+
+    if (sliderInactive) {
+      sliderInactive(event);
+    }
+
+    if (onMouseUp) {
+      onMouseUp(event);
+    }
+  }
+
+  handleFocus(e) {
+    const { onFocus } = this.props;
+    document.addEventListener('keydown', this.handleKeyPress, true);
+    if (onFocus) {
+      onFocus(e);
+    }
+  }
+
+  handleBlur(e) {
+    const { onBlur } = this.props;
+    document.removeEventListener('keydown', this.handleKeyPress, true);
+    if (onBlur) {
+      onBlur(e);
+    }
+  }
+
+  handleClick(event) {
+    const { onClick } = this.props;
+    event.preventDefault();
+    // event.stopPropagation();
+    if (onClick) {
+      onClick(event);
+    }
+  }
+
+  handleKeyPress(event) {
+    if (event.which === 37 || event.which === 40) {
+      // Left and Down Arrows
+      event.preventDefault();
+      event.stopPropagation();
+      this.stepBack();
+    } else if (event.which === 38 || event.which === 39) {
+      // Up and Right Arrows
+      event.preventDefault();
+      event.stopPropagation();
+      this.stepForward();
+    }
+  }
+
+  stepForward() {
+    const { stepForward } = this.props;
+    if (stepForward) {
+      stepForward();
+    }
+  }
+
+  stepBack() {
+    const { stepBack } = this.props;
+    if (stepBack) {
+      stepBack();
+    }
+  }
+
+  calculateDistance(event) {
+    const node = findDOMNode(this);
+    const position = Dom.getPointerPosition(node, event);
+    const { vertical } = this.props;
+    if (vertical) {
+      return position.y;
+    }
+    return position.x;
+  }
+
+  renderChildren() {
+    const progress = this.getProgress();
+    const percentage = `${(progress * 100).toFixed(2)}%`;
+    const { children } = this.props;
+    return React.Children.map(children, (child) => React.cloneElement(child, { progress, percentage }));
+  }
+
+  render() {
+    const { label, valuenow, valuetext } = this.props;
+
+    return (
+      <SliderBlock
+        tabIndex="0"
+        onMouseDown={this.handleMouseDown}
+        onTouchStart={this.handleMouseDown}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        onClick={this.handleClick}
+        aria-label={label || ''}
+        aria-valuenow={valuenow || ''}
+        aria-valuetext={valuetext || ''}
+        aria-valuemin={0}
+        aria-valuemax={100}>
+        {this.renderChildren()}
+      </SliderBlock>
+    );
+  }
+}
+
+Slider.propTypes = propTypes;
+Slider.defaultProps = defaultProps;
+Slider.displayName = 'Slider';