@desynova-digital/player 3.9.7 → 4.0.0

package/control/Timeline.js

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

package/control/Timeline.jsx

@@ -0,0 +1,131 @@
+import React, { Component } from 'react';
+import { findDOMNode } from 'react-dom';
+import styled from 'styled-components';
+import { PropTypes } from 'prop-types';
+import { Icon } from '@desynova-digital/components';
+import { secondsToTime } from '../utils';
+
+const propTypes = {
+  player: PropTypes.instanceOf(Object),
+  initialTime: PropTypes.number,
+  frameRate: PropTypes.number
+};
+
+const TimelineBlock = styled.div`
+  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;
+      ${Icon.Element} {
+        display: none;
+      }
+      p {
+        left: auto;
+        right: 0px;
+      }
+    }
+    ${Icon.Element} {
+      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;
+    }
+  }
+`;
+
+export default class Timeline extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      timeArray: []
+    };
+    this.generateTimeline = this.generateTimeline.bind(this);
+  }
+
+  componentDidMount() {
+    this.generateTimeline();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.duration?.seconds !== this.props.duration?.seconds) {
+      this.generateTimeline();
+    }
+  }
+
+  generateTimeline() {
+    const {
+      duration: { seconds }
+    } = this.props;
+    const timelineBlock = findDOMNode(this.timelineBlock);
+    const perTimeWidth = 100;
+    const sliderWidth = timelineBlock.offsetWidth;
+    const timeBlocks = parseInt(sliderWidth / perTimeWidth, 10);
+    const timeDistance = parseInt(seconds / timeBlocks, 10);
+    const timeArray = [0];
+    for (let i = 0; i < timeBlocks; i++) {
+      const lastValue = timeArray[timeArray.length - 1];
+      const currentTime = lastValue + timeDistance;
+      if (currentTime + timeDistance < seconds) {
+        timeArray.push(currentTime);
+      } else {
+        timeArray.push(seconds);
+        break;
+      }
+    }
+    this.setState({ timeArray });
+  }
+
+  render() {
+    const { initialTime, frameRate } = this.props;
+    const { timeArray } = this.state;
+    return (
+      <TimelineBlock
+        ref={(c) => {
+          this.timelineBlock = c;
+        }}>
+        {timeArray.map((time) => {
+          const formattedTime = secondsToTime(time, frameRate, initialTime);
+          return (
+            <div
+              className="player-time"
+              ref={(c) => {
+                this.timelineContainer = c;
+              }}
+              key={time}>
+              <p>{formattedTime}</p>
+              <Icon name="timeline" stroke="#aaa" />
+            </div>
+          );
+        })}
+      </TimelineBlock>
+    );
+  }
+}
+
+Timeline.propTypes = propTypes;
+Timeline.displayName = 'Timeline';

package/control/VolumeBar.js

@@ -0,0 +1,198 @@
+"use strict";
+
+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 _colors = _interopRequireDefault(require("../utils/colors"));
+var _Slider = _interopRequireDefault(require("./Slider"));
+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 _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); }
+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 _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) } })); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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); }
+var propTypes = {
+  actions: _propTypes.PropTypes.instanceOf(Object),
+  player: _propTypes.PropTypes.instanceOf(Object),
+  vertical: _propTypes.PropTypes.bool,
+  onFocus: _propTypes.PropTypes.func,
+  onBlur: _propTypes.PropTypes.func
+};
+var defaultProps = _defineProperty({
+  actions: {},
+  player: {},
+  vertical: false,
+  onFocus: null,
+  onBlur: null,
+  percentage: '100%'
+}, "vertical", false);
+var VolumeControlBar = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 85%;\n  position: absolute;\n  cursor: pointer;\n  z-index: 1;\n  width: 2px;\n  margin: 0 auto;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
+var VolumeLevelBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  left: 0;\n  top: ", ";\n  bottom: ", ";\n  background: ", ";\n  &:after {\n    content: '';\n    width: 8px;\n    height: 8px;\n    position: absolute;\n    background: ", ";\n    border-radius: 100%;\n    right: -3px;\n    top: -4px;\n    box-shadow: 0 0 14px 1px ", ";\n  }\n"])), function (props) {
+  return props.vertical ? '100%' : '0px';
+}, function (props) {
+  return props.vertical ? '0' : '100%';
+}, function (props) {
+  return props.vertical ? 'initial' : '0px';
+}, function (props) {
+  return props.vertical ? '0px' : 'initial';
+}, 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;
+});
+var VolumeBar = /*#__PURE__*/function (_Component) {
+  _inherits(VolumeBar, _Component);
+  var _super = _createSuper(VolumeBar);
+  function VolumeBar(props, context) {
+    var _this;
+    _classCallCheck(this, VolumeBar);
+    _this = _super.call(this, props, context);
+    _this.state = {
+      percentage: '0%'
+    };
+    _this.handleMouseMove = _this.handleMouseMove.bind(_assertThisInitialized(_this));
+    _this.handlePercentageChange = _this.handlePercentageChange.bind(_assertThisInitialized(_this));
+    _this.checkMuted = _this.checkMuted.bind(_assertThisInitialized(_this));
+    _this.getPercent = _this.getPercent.bind(_assertThisInitialized(_this));
+    _this.stepForward = _this.stepForward.bind(_assertThisInitialized(_this));
+    _this.stepBack = _this.stepBack.bind(_assertThisInitialized(_this));
+    // this.handleFocus = this.handleFocus.bind(this);
+    // this.handleBlur = this.handleBlur.bind(this);
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+  _createClass(VolumeBar, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {}
+  }, {
+    key: "getPercent",
+    value: function getPercent() {
+      var _this$props = this.props,
+        muted = _this$props.muted,
+        volume = _this$props.volume;
+      if (muted) {
+        return 0;
+      }
+      return volume;
+    }
+  }, {
+    key: "checkMuted",
+    value: function checkMuted() {
+      var _this$props2 = this.props,
+        actionClick = _this$props2.actionClick,
+        muted = _this$props2.muted;
+      if (muted) {
+        actionClick({
+          action: 'mute',
+          value: false
+        });
+      }
+    }
+  }, {
+    key: "handleMouseMove",
+    value: function handleMouseMove(event) {
+      var actionClick = this.props.actionClick;
+      this.checkMuted();
+      var distance = this.slider.calculateDistance(event);
+      actionClick({
+        action: 'volume',
+        value: distance
+      });
+    }
+  }, {
+    key: "stepForward",
+    value: function stepForward() {
+      var volume = this.props.volume;
+      this.checkMuted();
+      actions.changeVolume(volume + 0.1);
+    }
+  }, {
+    key: "stepBack",
+    value: function stepBack() {
+      var volume = this.props.volume;
+      this.checkMuted();
+      actions.changeVolume(volume - 0.1);
+    }
+  }, {
+    key: "handlePercentageChange",
+    value: function handlePercentageChange(percent) {
+      var percentage = this.state.percentage;
+      if (percent !== percentage) {
+        this.setState({
+          percentage: percent
+        });
+      }
+    }
+  }, {
+    key: "handleClick",
+    value: function handleClick(event) {
+      event.stopPropagation();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props3 = this.props,
+        vertical = _this$props3.vertical,
+        assetType = _this$props3.assetType,
+        playerType = _this$props3.playerType,
+        volume = _this$props3.volume;
+      var style = {};
+      if (vertical) {
+        style.height = this.getPercent() * 100;
+      } else {
+        style.width = this.getPercent() * 100;
+      }
+      var volumeData = (volume * 100).toFixed(2);
+      return /*#__PURE__*/_react["default"].createElement(VolumeControlBar, null, /*#__PURE__*/_react["default"].createElement(_Slider["default"], _extends({
+        ref: function ref(c) {
+          _this2.slider = c;
+        },
+        label: "volume level",
+        valuenow: volumeData,
+        valuetext: "".concat(volumeData, "%"),
+        onMouseMove: this.handleMouseMove,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        onClick: this.handleClick,
+        sliderActive: this.handleFocus,
+        sliderInactive: this.handleBlur,
+        getPercent: this.getPercent,
+        onPercentageChange: this.handlePercentageChange,
+        stepForward: this.stepForward,
+        stepBack: this.stepBack
+      }, this.props), /*#__PURE__*/_react["default"].createElement(VolumeLevelBar, {
+        style: style,
+        assetType: assetType,
+        playerType: playerType,
+        vertical: vertical
+      })));
+    }
+  }]);
+  return VolumeBar;
+}(_react.Component);
+VolumeBar.propTypes = propTypes;
+VolumeBar.defaultProps = defaultProps;
+VolumeBar.displayName = 'VolumeBar';
+var _default = VolumeBar;
+exports["default"] = _default;

package/control/VolumeBar.jsx

@@ -0,0 +1,174 @@
+import { PropTypes } from 'prop-types';
+import React, { Component } from 'react';
+import styled from 'styled-components';
+// import VolumeLevel from './VolumeLevel';
+import colors from '../utils/colors';
+import Slider from './Slider';
+
+const propTypes = {
+  actions: PropTypes.instanceOf(Object),
+  player: PropTypes.instanceOf(Object),
+  vertical: PropTypes.bool,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func
+};
+
+const defaultProps = {
+  actions: {},
+  player: {},
+  vertical: false,
+  onFocus: null,
+  onBlur: null,
+  percentage: '100%',
+  vertical: false
+};
+
+const VolumeControlBar = styled.div`
+  height: 85%;
+  position: absolute;
+  cursor: pointer;
+  z-index: 1;
+  width: 2px;
+  margin: 0 auto;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+const VolumeLevelBar = styled.div`
+  position: absolute;
+  width: ${(props) => (props.vertical ? '100%' : '0px')};
+  height: ${(props) => (props.vertical ? '0' : '100%')};
+  left: 0;
+  top: ${(props) => (props.vertical ? 'initial' : '0px')};
+  bottom: ${(props) => (props.vertical ? '0px' : 'initial')};
+  background: ${(props) => colors.common.video[props.assetType].base};
+  &:after {
+    content: '';
+    width: 8px;
+    height: 8px;
+    position: absolute;
+    background: ${(props) => colors.common.video[props.assetType].base};
+    border-radius: 100%;
+    right: -3px;
+    top: -4px;
+    box-shadow: 0 0 14px 1px ${(props) => colors.common.video[props.assetType].base};
+  }
+`;
+
+class VolumeBar extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      percentage: '0%'
+    };
+
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handlePercentageChange = this.handlePercentageChange.bind(this);
+    this.checkMuted = this.checkMuted.bind(this);
+    this.getPercent = this.getPercent.bind(this);
+    this.stepForward = this.stepForward.bind(this);
+    this.stepBack = this.stepBack.bind(this);
+    // this.handleFocus = this.handleFocus.bind(this);
+    // this.handleBlur = this.handleBlur.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  componentDidMount() {}
+
+  getPercent() {
+    const { muted, volume } = this.props;
+    if (muted) {
+      return 0;
+    }
+    return volume;
+  }
+
+  checkMuted() {
+    const { actionClick, muted } = this.props;
+    if (muted) {
+      actionClick({
+        action: 'mute',
+        value: false
+      });
+    }
+  }
+
+  handleMouseMove(event) {
+    const { actionClick } = this.props;
+    this.checkMuted();
+    const distance = this.slider.calculateDistance(event);
+    actionClick({
+      action: 'volume',
+      value: distance
+    });
+  }
+
+  stepForward() {
+    const { volume } = this.props;
+    this.checkMuted();
+    actions.changeVolume(volume + 0.1);
+  }
+
+  stepBack() {
+    const { volume } = this.props;
+    this.checkMuted();
+    actions.changeVolume(volume - 0.1);
+  }
+
+  handlePercentageChange(percent) {
+    const { percentage } = this.state;
+    if (percent !== percentage) {
+      this.setState({
+        percentage: percent
+      });
+    }
+  }
+
+  handleClick(event) {
+    event.stopPropagation();
+  }
+
+  render() {
+    const { vertical, assetType, playerType, volume } = this.props;
+    const style = {};
+    if (vertical) {
+      style.height = this.getPercent() * 100;
+    } else {
+      style.width = this.getPercent() * 100;
+    }
+
+    const volumeData = (volume * 100).toFixed(2);
+    return (
+      <VolumeControlBar>
+        <Slider
+          ref={(c) => {
+            this.slider = c;
+          }}
+          label="volume level"
+          valuenow={volumeData}
+          valuetext={`${volumeData}%`}
+          onMouseMove={this.handleMouseMove}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+          onClick={this.handleClick}
+          sliderActive={this.handleFocus}
+          sliderInactive={this.handleBlur}
+          getPercent={this.getPercent}
+          onPercentageChange={this.handlePercentageChange}
+          stepForward={this.stepForward}
+          stepBack={this.stepBack}
+          {...this.props}>
+          <VolumeLevelBar style={style} assetType={assetType} playerType={playerType} vertical={vertical} />
+        </Slider>
+      </VolumeControlBar>
+    );
+  }
+}
+
+VolumeBar.propTypes = propTypes;
+VolumeBar.defaultProps = defaultProps;
+VolumeBar.displayName = 'VolumeBar';
+
+export default VolumeBar;