@desynova-digital/player 3.9.7 → 4.0.0

package/control/PointersBar.js

@@ -0,0 +1,231 @@
+"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 _lodash = _interopRequireDefault(require("lodash"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 _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 { colors } from '@desynova-digital/tokens';
+ * import colors from '../colors';
+ */
+
+var propTypes = {
+  player: _propTypes.PropTypes.instanceOf(Object),
+  actions: _propTypes.PropTypes.instanceOf(Object),
+  markers: _propTypes.PropTypes.instanceOf(Array),
+  onTagClick: _propTypes.PropTypes.func
+};
+var defaultProps = {
+  player: {}
+};
+var PointersContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var PointerBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 20px;\n  position: relative;\n  border-top: 1px solid #333333;\n  border-bottom: 1px solid #333333;\n  .empty-pointers-msg {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    p {\n      font-family: SFUIText-Medium;\n      font-size: 11px;\n      color: #aaaaaa;\n    }\n    ", " {\n      margin: 0 5px;\n    }\n  }\n"])), _components.Icon.Element);
+var MarkerTagsBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 100px;\n  max-width: 100px;\n  position: relative;\n  height: 100%;\n  .tags-block {\n    height: 20px;\n    font-family: SFUIText-Medium;\n    font-size: 10px;\n    color: #ffffff;\n    text-transform: uppercase;\n    border-top: 1px solid #333333;\n    border-bottom: 1px solid #333333;\n    p {\n      line-height: 18px;\n      padding: 0 10px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])));
+var ToolTipStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 2;\n  height: 18px;\n  transition: left 0.1s ease-in-out;\n\n  .tooltip-container {\n    border-radius: 0.25rem;\n    padding: 5px;\n    width: fit-content;\n    background: #ffffff;\n    color: #666666;\n\n    h4 {\n      white-space: nowrap;\n      font-size: 12px;\n    }\n\n    &:after {\n      content: '';\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n      border-top: 5px solid white;\n      ", "\n      left: 50%;\n      transform: translateX(-50%);\n    }\n  }\n"])), function (props) {
+  return props.multiline ? 'bottom: -21px;' : 'bottom: -9px;';
+});
+var PointersBar = /*#__PURE__*/function (_Component) {
+  _inherits(PointersBar, _Component);
+  var _super = _createSuper(PointersBar);
+  function PointersBar(props) {
+    var _this;
+    _classCallCheck(this, PointersBar);
+    _this = _super.call(this, props);
+    _this.getPointerStyle = _this.getPointerStyle.bind(_assertThisInitialized(_this));
+    _this.state = {
+      tooltip: {
+        isVisible: false
+      }
+    };
+    _this._tooltipRef = /*#__PURE__*/_react["default"].createRef();
+    _this.renderComp = 0;
+    return _this;
+  }
+  _createClass(PointersBar, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (_lodash["default"].isEqual(nextProps.markers, this.props.markers) && !this.renderComp) {
+        return false;
+      }
+      this.renderComp = 0;
+      return true;
+    }
+  }, {
+    key: "onMarkerClick",
+    value: function onMarkerClick(e, marker) {
+      var _this$props = this.props,
+        onTagClick = _this$props.onTagClick,
+        actionClick = _this$props.actionClick;
+      var start_time = parseFloat(e.target.getAttribute('leftpos'));
+      var end_time = parseFloat(e.target.getAttribute('rightpos'));
+      // actions.handleMarkerUpdate(start_time, end_time);
+      actionClick({
+        action: 'pause'
+      });
+      // actions.pause();
+      actionClick({
+        action: 'seek',
+        value: start_time
+      });
+      // actions.seek(start_time);
+      onTagClick(start_time, end_time, marker);
+    }
+  }, {
+    key: "getPointerStyle",
+    value: function getPointerStyle(leftMarker, rightMarker, index) {
+      var duration = this.props.duration;
+      var left = leftMarker / duration.seconds * 100;
+      var right = rightMarker / duration.seconds * 100;
+      var width = right - left;
+      var style = {
+        left: "".concat(left, "%"),
+        position: 'absolute',
+        bottom: 0,
+        height: '100%',
+        width: "".concat(width, "%"),
+        cursor: 'pointer',
+        backgroundColor: index % 2 === 0 ? '#00cec6' : '#146778',
+        opacity: 0.8,
+        minWidth: '0.3px'
+      };
+      return style;
+    }
+  }, {
+    key: "setTooltipData",
+    value: function setTooltipData(e, title) {
+      var _this2 = this;
+      var tooltip = this.state.tooltip;
+      tooltip.isVisible = false;
+      tooltip.text = title;
+      tooltip.bottom = window.innerHeight - e.target.getBoundingClientRect().top; // e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height - 10;
+      tooltip.bottom = title.line1 ? tooltip.bottom + 22 : tooltip.bottom + 10;
+      tooltip.left = e.target.getBoundingClientRect().left + (e.target.getBoundingClientRect().right - e.target.getBoundingClientRect().left) / 2;
+      this.renderComp = 1;
+      this.setState(_objectSpread({}, tooltip), function () {
+        var tooltip = _this2.state.tooltip;
+        var tooltipRefOffset = _this2._tooltipRef.current && _this2._tooltipRef.current.offsetWidth ? _this2._tooltipRef.current.offsetWidth / 2 : 0;
+        tooltip.isVisible = true;
+        tooltip.left = tooltip.left - tooltipRefOffset;
+        _this2.renderComp = 1;
+        _this2.setState(_objectSpread({}, tooltip));
+      });
+    }
+  }, {
+    key: "getTitle",
+    value: function getTitle(marker) {
+      var data = marker.segment_title || marker.word || '';
+      if (!data.length && marker.line1) {
+        return {
+          line1: marker.line1,
+          line2: marker.line2
+        };
+      }
+      return data;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var markers = this.props.markers;
+      var _this$state$tooltip = this.state.tooltip,
+        isVisible = _this$state$tooltip.isVisible,
+        text = _this$state$tooltip.text,
+        left = _this$state$tooltip.left,
+        bottom = _this$state$tooltip.bottom;
+      var self = this;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, markers && markers.length ? markers.map(function (marker_obj) {
+        return /*#__PURE__*/_react["default"].createElement(PointersContainer, {
+          key: marker_obj.name
+        }, /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, {
+          key: "".concat(marker_obj.name, "-tags-block")
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "tags-block"
+        }, /*#__PURE__*/_react["default"].createElement("p", null, marker_obj.name))), /*#__PURE__*/_react["default"].createElement(PointerBlock, {
+          key: "".concat(marker_obj.name, "-key-tags-block")
+        }, marker_obj && marker_obj.values && marker_obj.values.length ? marker_obj.values.map(function (marker, index) {
+          var style = self.getPointerStyle(marker.start_time, marker.end_time, index);
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: "marker-blocks",
+            onClick: function onClick(e) {
+              _this3.onMarkerClick(e, marker);
+            },
+            onMouseOver: function onMouseOver(e) {
+              self.setTooltipData(e, _this3.getTitle(marker));
+            },
+            onMouseOut: function onMouseOut() {
+              var tooltip = _this3.state.tooltip;
+              tooltip.isVisible = false;
+              tooltip.text = null;
+              _this3.renderComp = 1;
+              // tooltip.left = null;
+              _this3.setState(_objectSpread({}, tooltip));
+            },
+            role: "button",
+            tabIndex: "-1",
+            style: style,
+            leftpos: marker.start_time,
+            rightpos: marker.end_time,
+            key: "".concat(marker.start_time, "-").concat(marker.end_time, "-").concat(index)
+          });
+        }) : /*#__PURE__*/_react["default"].createElement("div", {
+          className: "empty-pointers-msg"
+        }, /*#__PURE__*/_react["default"].createElement("p", null, "Mark In"), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+          name: "in-marker",
+          stroke: "#fff",
+          width: 7,
+          height: 11
+        }), /*#__PURE__*/_react["default"].createElement("p", null, "and Mark Out"), /*#__PURE__*/_react["default"].createElement(_components.Icon, {
+          name: "out-marker",
+          stroke: "#fff",
+          width: 7,
+          height: 11
+        }), /*#__PURE__*/_react["default"].createElement("p", null, "to create ", marker_obj.name, " in the selected range. "))), /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "tags-block"
+        }, /*#__PURE__*/_react["default"].createElement("p", null))));
+      }) : null, text && /*#__PURE__*/_react["default"].createElement(ToolTipStyles, {
+        multiline: !!text.line1,
+        ref: this._tooltipRef,
+        style: {
+          left: left || 0,
+          bottom: bottom || 0,
+          visibility: isVisible ? 'visible' : 'hidden'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "tooltip-container"
+      }, text.line1 && /*#__PURE__*/_react["default"].createElement("h4", null, text.line1), text.line2 && /*#__PURE__*/_react["default"].createElement("h4", null, text.line2), !text.line1 && /*#__PURE__*/_react["default"].createElement("h4", null, text))), /*#__PURE__*/_react["default"].createElement("div", {
+        id: "dummy-container"
+      }));
+    }
+  }]);
+  return PointersBar;
+}(_react.Component);
+exports["default"] = PointersBar;
+PointersBar.propTypes = propTypes;
+PointersBar.defaultProps = defaultProps;
+PointersBar.displayName = 'PointersBar';

package/control/PointersBar.jsx

@@ -0,0 +1,286 @@
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable react/no-array-index-key */
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { PropTypes } from 'prop-types';
+import { Icon } from '@desynova-digital/components';
+import _ from 'lodash';
+
+/*
+ * import { colors } from '@desynova-digital/tokens';
+ * import colors from '../colors';
+ */
+
+const propTypes = {
+  player: PropTypes.instanceOf(Object),
+  actions: PropTypes.instanceOf(Object),
+  markers: PropTypes.instanceOf(Array),
+  onTagClick: PropTypes.func
+};
+
+const defaultProps = {
+  player: {}
+};
+
+const PointersContainer = styled.div`
+  display: flex;
+`;
+
+const PointerBlock = styled.div`
+  width: 100%;
+  height: 20px;
+  position: relative;
+  border-top: 1px solid #333333;
+  border-bottom: 1px solid #333333;
+  .empty-pointers-msg {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    p {
+      font-family: SFUIText-Medium;
+      font-size: 11px;
+      color: #aaaaaa;
+    }
+    ${Icon.Element} {
+      margin: 0 5px;
+    }
+  }
+`;
+const MarkerTagsBlock = styled.div`
+  min-width: 100px;
+  max-width: 100px;
+  position: relative;
+  height: 100%;
+  .tags-block {
+    height: 20px;
+    font-family: SFUIText-Medium;
+    font-size: 10px;
+    color: #ffffff;
+    text-transform: uppercase;
+    border-top: 1px solid #333333;
+    border-bottom: 1px solid #333333;
+    p {
+      line-height: 18px;
+      padding: 0 10px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+`;
+
+const ToolTipStyles = styled.div`
+  position: absolute;
+  z-index: 2;
+  height: 18px;
+  transition: left 0.1s ease-in-out;
+
+  .tooltip-container {
+    border-radius: 0.25rem;
+    padding: 5px;
+    width: fit-content;
+    background: #ffffff;
+    color: #666666;
+
+    h4 {
+      white-space: nowrap;
+      font-size: 12px;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 5px solid white;
+      ${(props) => {
+        return props.multiline ? 'bottom: -21px;' : 'bottom: -9px;';
+      }}
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+`;
+
+export default class PointersBar extends Component {
+  constructor(props) {
+    super(props);
+    this.getPointerStyle = this.getPointerStyle.bind(this);
+    this.state = {
+      tooltip: {
+        isVisible: false
+      }
+    };
+    this._tooltipRef = React.createRef();
+    this.renderComp = 0;
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    if (_.isEqual(nextProps.markers, this.props.markers) && !this.renderComp) {
+      return false;
+    }
+    this.renderComp = 0;
+    return true;
+  }
+  onMarkerClick(e, marker) {
+    const { onTagClick, actionClick } = this.props;
+    const start_time = parseFloat(e.target.getAttribute('leftpos'));
+    const end_time = parseFloat(e.target.getAttribute('rightpos'));
+    // actions.handleMarkerUpdate(start_time, end_time);
+    actionClick({
+      action: 'pause'
+    });
+    // actions.pause();
+    actionClick({
+      action: 'seek',
+      value: start_time
+    });
+    // actions.seek(start_time);
+    onTagClick(start_time, end_time, marker);
+  }
+
+  getPointerStyle(leftMarker, rightMarker, index) {
+    const { duration } = this.props;
+    const left = (leftMarker / duration.seconds) * 100;
+    const right = (rightMarker / duration.seconds) * 100;
+    const width = right - left;
+    const style = {
+      left: `${left}%`,
+      position: 'absolute',
+      bottom: 0,
+      height: '100%',
+      width: `${width}%`,
+      cursor: 'pointer',
+      backgroundColor: index % 2 === 0 ? '#00cec6' : '#146778',
+      opacity: 0.8,
+      minWidth: '0.3px'
+    };
+    return style;
+  }
+
+  setTooltipData(e, title) {
+    const { tooltip } = this.state;
+    tooltip.isVisible = false;
+    tooltip.text = title;
+    tooltip.bottom = window.innerHeight - e.target.getBoundingClientRect().top; // e.target.getBoundingClientRect().top - e.target.getBoundingClientRect().height - 10;
+    tooltip.bottom = title.line1 ? tooltip.bottom + 22 : tooltip.bottom + 10;
+    tooltip.left =
+      e.target.getBoundingClientRect().left +
+      (e.target.getBoundingClientRect().right - e.target.getBoundingClientRect().left) / 2;
+    this.renderComp = 1;
+    this.setState({ ...tooltip }, () => {
+      const { tooltip } = this.state;
+      const tooltipRefOffset =
+        this._tooltipRef.current && this._tooltipRef.current.offsetWidth ? this._tooltipRef.current.offsetWidth / 2 : 0;
+      tooltip.isVisible = true;
+      tooltip.left = tooltip.left - tooltipRefOffset;
+      this.renderComp = 1;
+      this.setState({
+        ...tooltip
+      });
+    });
+  }
+
+  getTitle(marker) {
+    let data = marker.segment_title || marker.word || '';
+    if (!data.length && marker.line1) {
+      return {
+        line1: marker.line1,
+        line2: marker.line2
+      };
+    }
+    return data;
+  }
+
+  render() {
+    const { markers } = this.props;
+    const {
+      tooltip: { isVisible, text, left, bottom }
+    } = this.state;
+    const self = this;
+    return (
+      <React.Fragment>
+        {markers && markers.length
+          ? markers.map((marker_obj) => {
+              return (
+                <PointersContainer key={marker_obj.name}>
+                  <MarkerTagsBlock key={`${marker_obj.name}-tags-block`}>
+                    <div className="tags-block">
+                      <p>{marker_obj.name}</p>
+                    </div>
+                  </MarkerTagsBlock>
+                  <PointerBlock key={`${marker_obj.name}-key-tags-block`}>
+                    {marker_obj && marker_obj.values && marker_obj.values.length ? (
+                      marker_obj.values.map((marker, index) => {
+                        const style = self.getPointerStyle(marker.start_time, marker.end_time, index);
+                        return (
+                          <div
+                            className="marker-blocks"
+                            onClick={(e) => {
+                              this.onMarkerClick(e, marker);
+                            }}
+                            onMouseOver={(e) => {
+                              self.setTooltipData(e, this.getTitle(marker));
+                            }}
+                            onMouseOut={() => {
+                              const { tooltip } = this.state;
+                              tooltip.isVisible = false;
+                              tooltip.text = null;
+                              this.renderComp = 1;
+                              // tooltip.left = null;
+                              this.setState({ ...tooltip });
+                            }}
+                            role="button"
+                            tabIndex="-1"
+                            style={style}
+                            leftpos={marker.start_time}
+                            rightpos={marker.end_time}
+                            key={`${marker.start_time}-${marker.end_time}-${index}`}
+                          />
+                        );
+                      })
+                    ) : (
+                      <div className="empty-pointers-msg">
+                        <p>Mark In</p>
+                        <Icon name="in-marker" stroke="#fff" width={7} height={11} />
+                        <p>and Mark Out</p>
+                        <Icon name="out-marker" stroke="#fff" width={7} height={11} />
+                        <p>to create {marker_obj.name} in the selected range. </p>
+                        {/* <p>Then press</p>
+                        <Icon name="add" stroke="#fff" width={10} height={10} />
+                        <p>to create {marker_obj.name}.</p> */}
+                      </div>
+                    )}
+                  </PointerBlock>
+                  <MarkerTagsBlock>
+                    <div className="tags-block">
+                      <p />
+                    </div>
+                  </MarkerTagsBlock>
+                </PointersContainer>
+              );
+            })
+          : null}
+        {text && (
+          <ToolTipStyles
+            multiline={!!text.line1}
+            ref={this._tooltipRef}
+            style={{ left: left || 0, bottom: bottom || 0, visibility: isVisible ? 'visible' : 'hidden' }}>
+            <div className="tooltip-container">
+              {text.line1 && <h4>{text.line1}</h4>}
+              {text.line2 && <h4>{text.line2}</h4>}
+              {!text.line1 && <h4>{text}</h4>}
+            </div>
+          </ToolTipStyles>
+        )}
+        <div id="dummy-container"></div>
+      </React.Fragment>
+    );
+  }
+}
+
+PointersBar.propTypes = propTypes;
+PointersBar.defaultProps = defaultProps;
+PointersBar.displayName = 'PointersBar';

package/control/ProgressControl.js

@@ -0,0 +1,127 @@
+"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 Dom = _interopRequireWildcard(require("../utils/dom"));
+var _SeekBar = _interopRequireDefault(require("./SeekBar"));
+var _PointersBar = _interopRequireDefault(require("./PointersBar"));
+var _colors = _interopRequireDefault(require("../utils/colors"));
+var _templateObject, _templateObject2, _templateObject3;
+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) } })); }
+var propTypes = {
+  player: _propTypes.PropTypes.instanceOf(Object),
+  controlType: _propTypes.PropTypes.string,
+  playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel'])
+};
+var defaultProps = {};
+var ProgressControlBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  position: relative;\n  overflow: ", ";\n  padding-top: 0px;\n  background: #000000;\n  background: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: all 250ms ease-in-out;\n  bottom: ", ";\n"])), function (props) {
+  return props.controlType === 'advanced' && !props.isFullscreen ? '80px' : '4px';
+}, function (props) {
+  return props.controlType === 'advanced' && !props.isFullscreen ? 'none' : 'visible';
+}, _colors["default"].common.base.black, function (props) {
+  return props.player === 'panel' && props.active ? '50px' : 'initial';
+});
+var SeekControlBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  cursor: pointer;\n  z-index: ", ";\n"])), function (props) {
+  return props.controlType === 'advanced' && !props.isFullscreen ? '2' : '1';
+});
+var MarkerTagsBlock = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 100px;\n  max-width: 100px;\n  position: relative;\n  height: 100%;\n  .empty-block {\n    height: calc(100% - 20px);\n  }\n  .tags-block {\n    height: 20px;\n    font-family: SFUIText-Medium;\n    font-size: 12px;\n    color: #ffffff;\n    text-transform: uppercase;\n    border-top: 1px solid #333333;\n    border-bottom: 1px solid #333333;\n    p {\n      line-height: 18px;\n      padding-left: 10px;\n    }\n  }\n"])));
+var ProgressControl = /*#__PURE__*/function (_Component) {
+  _inherits(ProgressControl, _Component);
+  var _super = _createSuper(ProgressControl);
+  function ProgressControl(props, context) {
+    var _this;
+    _classCallCheck(this, ProgressControl);
+    _this = _super.call(this, props, context);
+    _this.state = {
+      mouseTime: {
+        time: null,
+        position: 0,
+        stateZoom: null
+      }
+    };
+    _this.handleMouseMoveThrottle = _this.handleMouseMove.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+  _createClass(ProgressControl, [{
+    key: "handleMouseMove",
+    value: function 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
+      //   }
+      // });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        controlType = _this$props.controlType,
+        playerType = _this$props.playerType,
+        isFullscreen = _this$props.isFullscreen,
+        userActivity = _this$props.userActivity;
+      var mouseTime = this.state.mouseTime;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ProgressControlBlock, {
+        controlType: controlType,
+        player: playerType,
+        active: userActivity,
+        isFullscreen: isFullscreen,
+        ref: function ref(c) {
+          _this2.progressControlBlock = c;
+        }
+      }, controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "empty-block"
+      })) : null, /*#__PURE__*/_react["default"].createElement(SeekControlBar, {
+        ref: function ref(c) {
+          _this2.seekControlBar = c;
+        },
+        onMouseMove: this.handleMouseMoveThrottle
+      }, /*#__PURE__*/_react["default"].createElement(_SeekBar["default"], _extends({
+        mouseTime: mouseTime,
+        ref: function ref(c) {
+          _this2.seekBar = c;
+        }
+      }, this.props))), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(MarkerTagsBlock, null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "empty-block"
+      })) : null), controlType === 'advanced' && !isFullscreen ? /*#__PURE__*/_react["default"].createElement(_PointersBar["default"], this.props) : null);
+    }
+  }]);
+  return ProgressControl;
+}(_react.Component);
+exports["default"] = ProgressControl;
+ProgressControl.propTypes = propTypes;
+ProgressControl.defaultProps = defaultProps;
+ProgressControl.displayName = 'ProgressControl';