@desynova-digital/player 3.9.7 → 4.0.1

package/control/PlayBackRateControl.js

@@ -0,0 +1,106 @@
+"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 _components = require("@desynova-digital/components");
+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 = {
+  actions: _propTypes.PropTypes.instanceOf(Object),
+  player: _propTypes.PropTypes.instanceOf(Object)
+};
+var PlaybackRateBlock = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  background: transparent;\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  text-transform: uppercase;\n  align-items: center;\n  padding: 0 !important;\n  .playback-block {\n    display: flex;\n    justify-content: flex-start;\n    border-bottom: 1px solid #eeeeee;\n    p {\n      margin-left: 10px;\n      white-space: nowrap;\n    }\n  }\n  .playback-rate-body {\n    padding: 0 !important;\n    display: flex;\n    justify-content: space-between;\n    .playback-rate {\n      border-right: 1px solid #eeeeee;\n      &:last-child {\n        border: none;\n      }\n      &:hover {\n        background: rgba(0, 206, 198, 0.1);\n      }\n      &.active {\n        pointer-events: none;\n        color: #00cec6;\n      }\n    }\n  }\n"])));
+var PlaybackRateControl = /*#__PURE__*/function (_Component) {
+  _inherits(PlaybackRateControl, _Component);
+  var _super = _createSuper(PlaybackRateControl);
+  function PlaybackRateControl(props) {
+    var _this;
+    _classCallCheck(this, PlaybackRateControl);
+    _this = _super.call(this, props);
+    _this.changePlaybackRate = _this.changePlaybackRate.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+  _createClass(PlaybackRateControl, [{
+    key: "changePlaybackRate",
+    value: function changePlaybackRate(playbackRate) {
+      var actionClick = this.props.actionClick;
+      actionClick({
+        action: 'playback_rate_change',
+        value: playbackRate
+      });
+      // actions.changeRate(playbackRate, {
+      //   action: 'fast-forward',
+      //   source: 'shortcut'
+      // });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var playbackRate = this.props.playbackRate;
+      return /*#__PURE__*/_react["default"].createElement(PlaybackRateBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "playback-block"
+      }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+        name: "playback-rate",
+        width: 14,
+        height: 14,
+        color: "#182738"
+      }), /*#__PURE__*/_react["default"].createElement("p", {
+        style: {
+          color: '#182738'
+        }
+      }, "Playback Speed")), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "playback-rate-body"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: playbackRate === 1 ? 'playback-rate active' : 'playback-rate',
+        onClick: function onClick() {
+          return _this2.changePlaybackRate(1);
+        },
+        role: "presentation"
+      }, "1x"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: playbackRate === 1.5 ? 'playback-rate active' : 'playback-rate',
+        onClick: function onClick() {
+          return _this2.changePlaybackRate(1.5);
+        },
+        role: "presentation"
+      }, "1.5x"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: playbackRate === 2 ? 'playback-rate active' : 'playback-rate',
+        onClick: function onClick() {
+          return _this2.changePlaybackRate(2);
+        },
+        role: "presentation"
+      }, "2x"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: 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/control/PlayBackRateControl.jsx

@@ -0,0 +1,106 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { PropTypes } from 'prop-types';
+import { Icon } from '@desynova-digital/components';
+
+const propTypes = {
+  actions: PropTypes.instanceOf(Object),
+  player: PropTypes.instanceOf(Object)
+};
+
+const PlaybackRateBlock = styled('div')`
+  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;
+      }
+    }
+  }
+`;
+
+export default class PlaybackRateControl extends Component {
+  constructor(props) {
+    super(props);
+    this.changePlaybackRate = this.changePlaybackRate.bind(this);
+  }
+
+  changePlaybackRate(playbackRate) {
+    const { actionClick } = this.props;
+    actionClick({
+      action: 'playback_rate_change',
+      value: playbackRate
+    });
+    // actions.changeRate(playbackRate, {
+    //   action: 'fast-forward',
+    //   source: 'shortcut'
+    // });
+  }
+
+  render() {
+    const { playbackRate } = this.props;
+    return (
+      <PlaybackRateBlock>
+        <div className="playback-block">
+          <Icon name="playback-rate" width={14} height={14} color="#182738" />
+          <p style={{ color: '#182738' }}>Playback Speed</p>
+        </div>
+        <div className="playback-rate-body">
+          <div
+            className={playbackRate === 1 ? 'playback-rate active' : 'playback-rate'}
+            onClick={() => this.changePlaybackRate(1)}
+            role="presentation">
+            1x
+          </div>
+          <div
+            className={playbackRate === 1.5 ? 'playback-rate active' : 'playback-rate'}
+            onClick={() => this.changePlaybackRate(1.5)}
+            role="presentation">
+            1.5x
+          </div>
+          <div
+            className={playbackRate === 2 ? 'playback-rate active' : 'playback-rate'}
+            onClick={() => this.changePlaybackRate(2)}
+            role="presentation">
+            2x
+          </div>
+          <div
+            className={playbackRate === 4 ? 'playback-rate active' : 'playback-rate'}
+            onClick={() => this.changePlaybackRate(4)}
+            role="presentation">
+            4x
+          </div>
+        </div>
+      </PlaybackRateBlock>
+    );
+  }
+}
+
+PlaybackRateControl.propTypes = propTypes;
+PlaybackRateControl.displayName = 'PlaybackRateControl';

package/control/PlayProgressBar.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PlayProgressBar;
+var _propTypes = require("prop-types");
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _colors = _interopRequireDefault(require("../utils/colors"));
+var _templateObject;
+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 = {
+  currentTime: _propTypes.PropTypes.number,
+  duration: _propTypes.PropTypes.number,
+  percentage: _propTypes.PropTypes.string,
+  player: _propTypes.PropTypes.instanceOf(Object),
+  playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel']),
+  assetType: _propTypes.PropTypes.oneOf(['fc', 'rc']),
+  controlType: _propTypes.PropTypes.oneOf(['default', 'advanced'])
+};
+var defaultProps = {
+  playerType: 'default',
+  controlType: 'default'
+};
+var ProgressBarBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 0px;\n  height: 100%;\n  left: 0;\n  top: 0;\n  background: ", ";\n  &:after {\n    content: '';\n    width: 12px;\n    height: 12px;\n    position: absolute;\n    background: ", ";\n    border-radius: 100%;\n    right: -6px;\n    top: -5px;\n    box-shadow: 0 0 14px 1px ", ";\n  }\n  &:before {\n    content: '';\n    width: 2px;\n    height: 46px;\n    position: absolute;\n    background: ", ";\n    right: -1px;\n    top: 4px;\n    display: ", ";\n  }\n"])), function (props) {
+  return _colors["default"].common.video[props.assetType].base;
+}, function (props) {
+  return _colors["default"].common.video[props.assetType].base;
+}, function (props) {
+  return _colors["default"].common.video[props.assetType].base;
+}, function (props) {
+  return _colors["default"].common.video[props.assetType].base;
+}, function (props) {
+  return props.controlType === 'advanced' && !props.isFullscreen ? 'block' : 'none';
+});
+// Shows play progress
+function PlayProgressBar(_ref) {
+  var currentTime = _ref.currentTime,
+    duration = _ref.duration,
+    percentage = _ref.percentage,
+    playerType = _ref.playerType,
+    assetType = _ref.assetType,
+    controlType = _ref.controlType,
+    isFullscreen = _ref.isFullscreen;
+  return /*#__PURE__*/_react["default"].createElement(ProgressBarBlock, {
+    "data-current-time": (0, _utils.formatTime)(currentTime, duration),
+    style: {
+      width: percentage
+    },
+    playerType: playerType,
+    assetType: assetType,
+    controlType: controlType,
+    isFullscreen: isFullscreen
+  });
+}
+PlayProgressBar.propTypes = propTypes;
+PlayProgressBar.defaultProps = defaultProps;
+PlayProgressBar.displayName = 'PlayProgressBar';

package/control/PlayProgressBar.jsx

@@ -0,0 +1,92 @@
+import { PropTypes } from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+import { formatTime } from '../utils';
+import colors from '../utils/colors';
+
+const propTypes = {
+  currentTime: PropTypes.number,
+  duration: PropTypes.number,
+  percentage: PropTypes.string,
+  player: PropTypes.instanceOf(Object),
+  playerType: PropTypes.oneOf([
+    'dubbing_review',
+    'clipping_default',
+    'default',
+    'tagging',
+    'qc',
+    'subtitle',
+    'snp_edit',
+    'archive',
+    'restore',
+    'clipping',
+    'storyboard',
+    'panel'
+  ]),
+  assetType: PropTypes.oneOf(['fc', 'rc']),
+  controlType: PropTypes.oneOf(['default', 'advanced'])
+};
+
+const defaultProps = {
+  playerType: 'default',
+  controlType: 'default'
+};
+
+const ProgressBarBlock = styled.div`
+  position: absolute;
+  width: 0px;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: ${(props) => colors.common.video[props.assetType].base};
+  &:after {
+    content: '';
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    background: ${(props) => colors.common.video[props.assetType].base};
+    border-radius: 100%;
+    right: -6px;
+    top: -5px;
+    box-shadow: 0 0 14px 1px ${(props) => colors.common.video[props.assetType].base};
+  }
+  &:before {
+    content: '';
+    width: 2px;
+    height: 46px;
+    position: absolute;
+    background: ${(props) => colors.common.video[props.assetType].base};
+    right: -1px;
+    top: 4px;
+    display: ${(props) => {
+      return props.controlType === 'advanced' && !props.isFullscreen ? 'block' : 'none';
+    }};
+  }
+`;
+// Shows play progress
+export default function PlayProgressBar({
+  currentTime,
+  duration,
+  percentage,
+  playerType,
+  assetType,
+  controlType,
+  isFullscreen
+}) {
+  return (
+    <ProgressBarBlock
+      data-current-time={formatTime(currentTime, duration)}
+      style={{
+        width: percentage
+      }}
+      playerType={playerType}
+      assetType={assetType}
+      controlType={controlType}
+      isFullscreen={isFullscreen}
+    />
+  );
+}
+
+PlayProgressBar.propTypes = propTypes;
+PlayProgressBar.defaultProps = defaultProps;
+PlayProgressBar.displayName = 'PlayProgressBar';

package/control/PlayToggle.js

@@ -0,0 +1,56 @@
+"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 _styledComponents = _interopRequireDefault(require("styled-components"));
+var _components = require("@desynova-digital/components");
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var propTypes = {
+  actions: _propTypes.PropTypes.instanceOf(Object),
+  player: _propTypes.PropTypes.instanceOf(Object)
+};
+var defaultProps = {
+  actions: {},
+  player: {}
+};
+var PlayPauseButton = (0, _styledComponents["default"])(_components.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  margin: 0 10px;\n  &:hover,\n  &:focus {\n    background: transparent;\n  }\n"])));
+var PlayToggle = function PlayToggle(_ref) {
+  var paused = _ref.paused,
+    actionClick = _ref.actionClick;
+  var handleClick = function handleClick() {
+    if (paused) {
+      actionClick({
+        action: 'play'
+      });
+    } else {
+      actionClick({
+        action: 'pause'
+      });
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(PlayPauseButton, {
+    display: "rounded",
+    appearance: "cta",
+    icon: paused ? 'play' : 'pause',
+    iconWidth: paused ? 12 : 25,
+    iconHeight: paused ? 15 : 25,
+    width: 20,
+    height: 20,
+    tabIndex: "0",
+    onClick: handleClick
+  });
+};
+var _default = PlayToggle;
+exports["default"] = _default;
+PlayToggle.propTypes = propTypes;
+PlayToggle.defaultProps = defaultProps;
+PlayToggle.displayName = 'PlayToggle';

package/control/PlayToggle.jsx

@@ -0,0 +1,57 @@
+import { PropTypes } from 'prop-types';
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { Button } from '@desynova-digital/components';
+
+const propTypes = {
+  actions: PropTypes.instanceOf(Object),
+  player: PropTypes.instanceOf(Object)
+};
+
+const defaultProps = {
+  actions: {},
+  player: {}
+};
+
+const PlayPauseButton = styled(Button)`
+  background: transparent;
+  border: none;
+  margin: 0 10px;
+  &:hover,
+  &:focus {
+    background: transparent;
+  }
+`;
+
+const PlayToggle = ({ paused, actionClick }) => {
+  const handleClick = () => {
+    if (paused) {
+      actionClick({
+        action: 'play'
+      });
+    } else {
+      actionClick({
+        action: 'pause'
+      });
+    }
+  };
+
+  return (
+    <PlayPauseButton
+      display="rounded"
+      appearance="cta"
+      icon={paused ? 'play' : 'pause'}
+      iconWidth={paused ? 12 : 25}
+      iconHeight={paused ? 15 : 25}
+      width={20}
+      height={20}
+      tabIndex="0"
+      onClick={handleClick}
+    />
+  );
+};
+
+export default PlayToggle;
+PlayToggle.propTypes = propTypes;
+PlayToggle.defaultProps = defaultProps;
+PlayToggle.displayName = 'PlayToggle';