@desynova-digital/player 3.9.7 → 4.0.0

package/components/PointersBar.js

@@ -1,299 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || 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; };
-
-var _createClass = 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, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _components = require('@desynova-digital/components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* 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 { 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 = _styledComponents2.default.div.withConfig({
-  displayName: 'PointersBar__PointersContainer',
-  componentId: 'sc-b8687a-0'
-})(['display:flex;']);
-
-var PointerBlock = _styledComponents2.default.div.withConfig({
-  displayName: 'PointersBar__PointerBlock',
-  componentId: 'sc-b8687a-1'
-})(['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;}', '{margin:0 5px;}}'], _components.Icon.Element);
-var MarkerTagsBlock = _styledComponents2.default.div.withConfig({
-  displayName: 'PointersBar__MarkerTagsBlock',
-  componentId: 'sc-b8687a-2'
-})(['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;}}']);
-
-var ToolTipStyles = _styledComponents2.default.div.withConfig({
-  displayName: 'PointersBar__ToolTipStyles',
-  componentId: 'sc-b8687a-3'
-})(['position:absolute;z-index:2;height:18px;transition:left .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;', ' left:50%;transform:translateX(-50%);}}'], function (props) {
-  return props.multiline ? "bottom: -21px;" : "bottom: -9px;";
-});
-
-var PointersBar = function (_Component) {
-  _inherits(PointersBar, _Component);
-
-  function PointersBar(props) {
-    _classCallCheck(this, PointersBar);
-
-    var _this = _possibleConstructorReturn(this, (PointersBar.__proto__ || Object.getPrototypeOf(PointersBar)).call(this, props));
-
-    _this.getPointerStyle = _this.getPointerStyle.bind(_this);
-    _this.state = {
-      tooltip: {
-        isVisible: false
-      }
-    };
-    _this._tooltipRef = _react2.default.createRef();
-    return _this;
-  }
-
-  _createClass(PointersBar, [{
-    key: 'onMarkerClick',
-    value: function onMarkerClick(e, marker) {
-      var _props = this.props,
-          onTagClick = _props.onTagClick,
-          actions = _props.actions;
-
-      var start_time = parseFloat(e.target.getAttribute('leftpos'));
-      var end_time = parseFloat(e.target.getAttribute('rightpos'));
-      actions.handleMarkerUpdate(start_time, end_time);
-      actions.pause();
-      actions.seek(start_time);
-      onTagClick(start_time, end_time, marker);
-    }
-  }, {
-    key: 'getPointerStyle',
-    value: function getPointerStyle(leftMarker, rightMarker, index) {
-      var player = this.props.player;
-
-      var left = leftMarker / player.duration * 100;
-      var right = rightMarker / player.duration * 100;
-      var width = right - left;
-      var 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;
-    }
-  }, {
-    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.setState(_extends({}, 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.setState(_extends({}, 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 _state$tooltip = this.state.tooltip,
-          isVisible = _state$tooltip.isVisible,
-          text = _state$tooltip.text,
-          left = _state$tooltip.left,
-          bottom = _state$tooltip.bottom;
-
-      var self = this;
-      return _react2.default.createElement(
-        _react2.default.Fragment,
-        null,
-        markers && markers.length ? markers.map(function (marker_obj) {
-          return _react2.default.createElement(
-            PointersContainer,
-            { key: marker_obj.name },
-            _react2.default.createElement(
-              MarkerTagsBlock,
-              null,
-              _react2.default.createElement(
-                'div',
-                { className: 'tags-block' },
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  marker_obj.name
-                )
-              )
-            ),
-            _react2.default.createElement(
-              PointerBlock,
-              null,
-              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 _react2.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;
-                    // tooltip.left = null;
-                    _this3.setState(_extends({}, tooltip));
-                  },
-                  role: 'button',
-                  tabIndex: '-1',
-                  style: style,
-                  leftpos: marker.start_time,
-                  rightpos: marker.end_time,
-                  key: marker.start_time + '-' + marker.end_time + '-' + index
-                });
-              }) : _react2.default.createElement(
-                'div',
-                { className: 'empty-pointers-msg' },
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  'Mark In'
-                ),
-                _react2.default.createElement(_components.Icon, {
-                  name: 'in-marker',
-                  stroke: '#fff',
-                  width: 7,
-                  height: 11
-                }),
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  'and Mark Out'
-                ),
-                _react2.default.createElement(_components.Icon, {
-                  name: 'out-marker',
-                  stroke: '#fff',
-                  width: 7,
-                  height: 11
-                }),
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  'to create ',
-                  marker_obj.name,
-                  ' in the selected range. '
-                )
-              )
-            ),
-            _react2.default.createElement(
-              MarkerTagsBlock,
-              null,
-              _react2.default.createElement(
-                'div',
-                { className: 'tags-block' },
-                _react2.default.createElement('p', null)
-              )
-            )
-          );
-        }) : null,
-        text && _react2.default.createElement(
-          ToolTipStyles,
-          { multiline: !!text.line1, ref: this._tooltipRef, style: { left: left || 0, bottom: bottom || 0, visibility: isVisible ? "visible" : "hidden" } },
-          _react2.default.createElement(
-            'div',
-            { className: 'tooltip-container' },
-            text.line1 && _react2.default.createElement(
-              'h4',
-              null,
-              text.line1
-            ),
-            text.line2 && _react2.default.createElement(
-              'h4',
-              null,
-              text.line2
-            ),
-            !text.line1 && _react2.default.createElement(
-              'h4',
-              null,
-              text
-            )
-          )
-        ),
-        _react2.default.createElement('div', { id: 'dummy-container' })
-      );
-    }
-  }]);
-
-  return PointersBar;
-}(_react.Component);
-
-exports.default = PointersBar;
-
-
-PointersBar.propTypes = propTypes;
-PointersBar.defaultProps = defaultProps;
-PointersBar.displayName = 'PointersBar';

package/components/PosterImage.js

@@ -1,61 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _propTypes = require('prop-types');
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var propTypes = {
-  poster: _propTypes.PropTypes.string,
-  player: _propTypes.PropTypes.instanceOf(Object),
-  actions: _propTypes.PropTypes.instanceOf(Object)
-};
-
-var defaultProps = {
-  poster: '',
-  player: {},
-  actions: {}
-};
-
-function PosterImage(_ref) {
-  var poster = _ref.poster,
-      player = _ref.player,
-      actions = _ref.actions;
-
-  if (!poster || player.hasStarted) {
-    return null;
-  }
-
-  return _react2.default.createElement('div', {
-    role: 'presentation',
-    style: {
-      backgroundImage: 'url("' + poster + '")',
-      backgroundSize: 'auto 100%',
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      backgroundPosition: '50% 50%'
-    },
-    onClick: function onClick() {
-      if (player.paused) {
-        actions.play();
-        actions.handleVideoRewind(false);
-      }
-    }
-  });
-}
-
-PosterImage.propTypes = propTypes;
-PosterImage.defaultProps = defaultProps;
-PosterImage.displayName = 'PosterImage';
-
-exports.default = PosterImage;

package/components/SDOutline.js

@@ -1,68 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = SDOutline;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _colors = require('../colors');
-
-var _colors2 = _interopRequireDefault(_colors);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var propTypes = {
-  player: _propTypes.PropTypes.instanceOf(Object),
-  actions: _propTypes.PropTypes.instanceOf(Object)
-};
-
-var SDPlayerBorder = _styledComponents2.default.div.withConfig({
-  displayName: 'SDOutline__SDPlayerBorder',
-  componentId: 'sc-85r8e3-0'
-})(['opacity:0.3;border:solid 1px ', ';top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);position:absolute;padding-left:75%;height:100%;'], _colors2.default.common.base.white);
-
-var SDBorderText = (0, _styledComponents2.default)('p').withConfig({
-  displayName: 'SDOutline__SDBorderText',
-  componentId: 'sc-85r8e3-1'
-})(['color:#fff;padding-top:25%;position:absolute;font-family:SFUIText-Regular;text-shadow:0 0 4px rgba(0,0,0,0.5);font-size:12px;top:20%;transform:translate(-50%,-50%) rotate(-90deg);']);
-
-function SDOutline(_ref) {
-  var player = _ref.player,
-      actions = _ref.actions;
-
-  return _react2.default.createElement(
-    _react2.default.Fragment,
-    null,
-    _react2.default.createElement(SDPlayerBorder, {
-      style: !player.SDBorderActive ? { display: 'none' } : { display: 'block' },
-      onClick: function onClick() {
-        if (player.paused) {
-          actions.play();
-        } else {
-          actions.pause();
-        }
-        actions.handleVideoRewind(false);
-      }
-    }),
-    _react2.default.createElement(
-      SDBorderText,
-      {
-        style: !player.SDBorderActive ? { display: 'none' } : { display: 'block' }
-      },
-      '4:3 Safe Area'
-    )
-  );
-}
-
-SDOutline.propTypes = propTypes;
-SDOutline.displayName = 'SDOutline';