@desynova-digital/player 3.9.7 → 4.0.0

package/components/ImageViewer.js

@@ -1,318 +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 _propTypes = require('prop-types');
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _CommentsButton = require('./control-bar/CommentsButton');
-
-var _CommentsButton2 = _interopRequireDefault(_CommentsButton);
-
-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 linebreak-style */
-
-
-/*
- * import { colors } from '@desynova-digital/tokens';
- * import colors from '../colors';
- */
-
-var propTypes = {
-  src: _propTypes.PropTypes.string
-};
-
-var ImageContainer = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'ImageViewer__ImageContainer',
-  componentId: 'sc-5q95u9-0'
-})(['position:relative;overflow:hidden;']);
-
-var ImageBlock = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'ImageViewer__ImageBlock',
-  componentId: 'sc-5q95u9-1'
-})(['position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:calc(100% - 50px);img{position:relative;transition:all 350ms ease-in-out;&.moving{transition:none;}}']);
-
-var ImageControls = (0, _styledComponents2.default)('div').withConfig({
-  displayName: 'ImageViewer__ImageControls',
-  componentId: 'sc-5q95u9-2'
-})(['position:relative;height:50px;background:#000;display:flex;justify-content:flex-start;align-items:center;padding:0 20px;.zoom-in,.zoom-out{width:20px;height:20px;position:relative;cursor:pointer;&:after{content:\'\';position:absolute;width:14px;height:2px;top:50%;left:50%;transform:translate(-50%,-50%);background:#afb2ba;}}.zoom-in{&:before{content:\'\';position:absolute;width:2px;height:14px;top:50%;left:50%;transform:translate(-50%,-50%);background:#afb2ba;}}.percent{font-size:14px;font-family:SFUIText-Regular;color:#fff;margin:0 15px;}']);
-
-var ImageViewer = function (_Component) {
-  _inherits(ImageViewer, _Component);
-
-  function ImageViewer(props) {
-    _classCallCheck(this, ImageViewer);
-
-    var _this = _possibleConstructorReturn(this, (ImageViewer.__proto__ || Object.getPrototypeOf(ImageViewer)).call(this, props));
-
-    _this.state = {
-      minWidth: 0,
-      minHeight: 0,
-      maxWidth: '100%',
-      maxHeight: '100%',
-      currentHeight: 'auto',
-      currentWidth: 'auto',
-      draggable: false
-    };
-    _this.currentX;
-    _this.currentY;
-    _this.initialX;
-    _this.initialY;
-    _this.xOffset = 0;
-    _this.yOffset = 0;
-
-    return _this;
-  }
-
-  _createClass(ImageViewer, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {}
-  }, {
-    key: 'onMouseDown',
-    value: function onMouseDown() {
-      this.initialX = event.offsetX;
-      this.initialY = event.offsetY;
-      this.setState({
-        moving: true
-      });
-    }
-  }, {
-    key: 'onMouseUp',
-    value: function onMouseUp() {
-      this.setState({
-        moving: false
-      });
-    }
-  }, {
-    key: 'onMouseMove',
-    value: function onMouseMove() {
-      var _state = this.state,
-          moving = _state.moving,
-          draggable = _state.draggable,
-          currentWidth = _state.currentWidth,
-          currentHeight = _state.currentHeight,
-          imageTop = _state.imageTop,
-          imageLeft = _state.imageLeft;
-
-
-      if (moving && draggable) {
-        this.currentX = event.offsetX - this.initialX;
-        this.currentY = event.offsetY - this.initialY;
-        var newLeft = imageLeft;
-        var newTop = imageTop;
-        if (currentWidth > this.imageBlock.offsetWidth) {
-          var minLeft = 0;
-          var maxLeft = this.imageBlock.offsetWidth - currentWidth;
-          newLeft = this.imageRef.offsetLeft + this.currentX;
-          if (newLeft > minLeft) {
-            newLeft = minLeft;
-          } else if (newLeft < maxLeft) {
-            newLeft = maxLeft;
-          }
-        }
-        if (currentHeight > this.imageBlock.offsetHeight) {
-          var minTop = 0;
-          var maxTop = this.imageBlock.offsetHeight - currentHeight;
-          newTop = this.imageRef.offsetTop + this.currentY;
-          if (newTop > minTop) {
-            newTop = minTop;
-          } else if (newTop < maxTop) {
-            newTop = maxTop;
-          }
-        }
-        this.setState({
-          imageLeft: newLeft,
-          imageTop: newTop
-        });
-      }
-    }
-  }, {
-    key: 'handleImageLoaded',
-    value: function handleImageLoaded() {
-      var percentage = Math.round(this.imageRef.offsetHeight / this.imageRef.naturalHeight * 100);
-      var imageLeft = (this.imageBlock.offsetWidth - this.imageRef.offsetWidth) / 2;
-      var imageTop = (this.imageBlock.offsetHeight - this.imageRef.offsetHeight) / 2;
-
-      this.setState({
-        minWidth: this.imageRef.offsetWidth,
-        minHeight: this.imageRef.offsetHeight,
-        maxWidth: this.imageRef.naturalWidth,
-        maxHeight: this.imageRef.naturalHeight,
-        currentWidth: this.imageRef.offsetWidth,
-        currentHeight: this.imageRef.offsetHeight,
-        percentage: percentage,
-        imageLeft: imageLeft,
-        imageTop: imageTop
-      });
-    }
-  }, {
-    key: 'zoomIn',
-    value: function zoomIn() {
-      var _state2 = this.state,
-          maxWidth = _state2.maxWidth,
-          maxHeight = _state2.maxHeight,
-          percentage = _state2.percentage;
-
-      if (percentage < 100) {
-        var newPercentage = Math.round(percentage / 10) * 10 + 10;
-        newPercentage = newPercentage > 100 ? 100 : newPercentage;
-        var newWidth = newPercentage * maxWidth / 100;
-        var newHeight = newPercentage * maxHeight / 100;
-        var imageLeft = (this.imageBlock.offsetWidth - newWidth) / 2;
-        var imageTop = (this.imageBlock.offsetHeight - newHeight) / 2;
-        this.setState({
-          percentage: newPercentage,
-          currentWidth: newWidth,
-          currentHeight: newHeight,
-          draggable: true,
-          imageLeft: imageLeft,
-          imageTop: imageTop
-        });
-      }
-    }
-  }, {
-    key: 'zoomOut',
-    value: function zoomOut() {
-      var _state3 = this.state,
-          minWidth = _state3.minWidth,
-          maxWidth = _state3.maxWidth,
-          maxHeight = _state3.maxHeight,
-          percentage = _state3.percentage;
-
-      if (percentage) {
-        var minPercent = Math.round(minWidth / maxWidth * 100);
-        var newPercentage = Math.round(percentage / 10) * 10 - 10;
-        newPercentage = newPercentage < minPercent ? minPercent : newPercentage;
-        var newWidth = newPercentage * maxWidth / 100;
-        var newHeight = newPercentage * maxHeight / 100;
-        var imageLeft = (this.imageBlock.offsetWidth - newWidth) / 2;
-        var imageTop = (this.imageBlock.offsetHeight - newHeight) / 2;
-        var stateObj = {
-          percentage: newPercentage,
-          currentWidth: newWidth,
-          currentHeight: newHeight,
-          draggable: true,
-          imageLeft: imageLeft,
-          imageTop: imageTop
-        };
-        if (minPercent === newPercentage) {
-          stateObj = _extends({}, stateObj, {
-            draggable: false
-          });
-        }
-        this.setState(stateObj);
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      var _state4 = this.state,
-          minWidth = _state4.minWidth,
-          minHeight = _state4.minHeight,
-          maxWidth = _state4.maxWidth,
-          maxHeight = _state4.maxHeight,
-          currentWidth = _state4.currentWidth,
-          currentHeight = _state4.currentHeight,
-          percentage = _state4.percentage,
-          imageTop = _state4.imageTop,
-          imageLeft = _state4.imageLeft,
-          draggable = _state4.draggable,
-          moving = _state4.moving;
-      var src = this.props.src;
-
-      return _react2.default.createElement(
-        ImageContainer,
-        null,
-        _react2.default.createElement(
-          ImageBlock,
-          {
-            ref: function ref(imageBlock) {
-              return _this2.imageBlock = imageBlock;
-            }
-          },
-          _react2.default.createElement('img', {
-            role: 'presentation',
-            style: {
-              minWidth: minWidth,
-              minHeight: minHeight,
-              maxWidth: maxWidth,
-              maxHeight: maxHeight,
-              width: currentWidth,
-              height: currentHeight,
-              top: imageTop,
-              left: imageLeft,
-              cursor: draggable ? 'grab' : 'default'
-            },
-            draggable: false,
-            ref: function ref(imageRef) {
-              return _this2.imageRef = imageRef;
-            },
-            onLoad: this.handleImageLoaded.bind(this),
-            onMouseDown: this.onMouseDown.bind(this),
-            onMouseMove: this.onMouseMove.bind(this),
-            onMouseUp: this.onMouseUp.bind(this),
-            alt: 'WILD_magazine_Polar_bear_final_00635',
-            src: src,
-            className: moving ? 'moving' : ''
-            // src='https://www.nginx.com/wp-content/uploads/2015/04/nginx-plus-dashboard_R6.png'
-          })
-        ),
-        _react2.default.createElement(
-          ImageControls,
-          null,
-          _react2.default.createElement('p', {
-            className: 'zoom-in',
-            role: 'presentation',
-            onClick: function onClick() {
-              return _this2.zoomIn();
-            }
-          }),
-          _react2.default.createElement(
-            'p',
-            {
-              className: 'percent'
-            },
-            percentage,
-            '%'
-          ),
-          _react2.default.createElement('p', {
-            className: 'zoom-out',
-            role: 'presentation',
-            onClick: function onClick() {
-              return _this2.zoomOut();
-            }
-          }),
-          _react2.default.createElement(_CommentsButton2.default, _extends({}, this.props, { key: 'comments-button', order: 6.01 }))
-        )
-      );
-    }
-  }]);
-
-  return ImageViewer;
-}(_react.Component);
-
-exports.default = ImageViewer;
-
-
-ImageViewer.propTypes = propTypes;
-ImageViewer.displayName = 'ImageViewer';

package/components/MarkerBar.js

@@ -1,138 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-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 _propTypes = require('prop-types');
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-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; }
-
-/*
- * import { colors } from '@desynova-digital/tokens';
- * import colors from '../colors';
- */
-
-var propTypes = {
-  player: _propTypes.PropTypes.instanceOf(Object),
-  controlType: _propTypes.PropTypes.string
-};
-
-var defaultProps = {
-  player: {}
-};
-
-var MarkerBlock = _styledComponents2.default.div.withConfig({
-  displayName: 'MarkerBar__MarkerBlock',
-  componentId: 'sc-yn9zkf-0'
-})(['width:100%;height:30px;position:', ';bottom:', ';.marker{position:absolute;width:2px;height:20px;p{font-family:SFUIText-Medium;font-size:10px;color:#ffffff;position:absolute;left:50%;transform:translateX(-50%);}', '{position:absolute;display:block;left:50%;top:10px;transform:translateX(-50%);}}'], function (props) {
-  return props.controlType === 'advanced' && !props.isFullscreen ? 'relative' : 'absolute';
-}, function (props) {
-  return props.controlType === 'advanced' && !props.isFullscreen ? '0px' : '5px';
-}, _components.Icon.Element);
-
-var MarkerBar = function (_Component) {
-  _inherits(MarkerBar, _Component);
-
-  function MarkerBar(props) {
-    _classCallCheck(this, MarkerBar);
-
-    var _this = _possibleConstructorReturn(this, (MarkerBar.__proto__ || Object.getPrototypeOf(MarkerBar)).call(this, props));
-
-    _this.getMarkerPosition = _this.getMarkerPosition.bind(_this);
-    _this.getTimePos = _this.getTimePos.bind(_this);
-    return _this;
-  }
-
-  _createClass(MarkerBar, [{
-    key: 'getMarkerPosition',
-    value: function getMarkerPosition(timePos) {
-      var player = this.props.player;
-
-      var percent = timePos / player.duration;
-      return percent >= 1 ? 1 : percent;
-    }
-  }, {
-    key: 'getTimePos',
-    value: function getTimePos(markerPos) {
-      var leftMarker = document.getElementsByClassName('marker-left')[0];
-      var rightMarker = document.getElementsByClassName('marker-right')[0];
-      if (leftMarker && rightMarker) {
-        var leftOffset = leftMarker.offsetLeft;
-        var rightOffset = rightMarker.offsetLeft;
-        var offsetDiff = rightOffset - leftOffset;
-        var position = '50%';
-        if (offsetDiff < 61) {
-          switch (markerPos) {
-            case 'left':
-              position = '-20px';
-              break;
-            case 'right':
-              position = '20px';
-              break;
-          }
-        }
-        return position;
-      }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          player = _props.player,
-          controlType = _props.controlType,
-          playerSelectedMarker = _props.playerSelectedMarker;
-
-      var leftMarkerPosition = (this.getMarkerPosition(playerSelectedMarker.leftMarker) * 100).toFixed(2) + '%';
-      var rightMarkerPosition = (this.getMarkerPosition(playerSelectedMarker.rightMarker) * 100).toFixed(2) + '%';
-
-      return _react2.default.createElement(
-        MarkerBlock,
-        { controlType: controlType, isFullscreen: player.isFullscreen },
-        playerSelectedMarker.leftMarker > -1 ? _react2.default.createElement(
-          'div',
-          {
-            className: 'marker marker-left',
-            style: { left: leftMarkerPosition }
-          },
-          _react2.default.createElement(_components.Icon, { name: 'marker', width: 8, height: 7, color: '#00cec6' })
-        ) : null,
-        playerSelectedMarker.rightMarker > -1 ? _react2.default.createElement(
-          'div',
-          {
-            className: 'marker marker-right',
-            style: { left: rightMarkerPosition }
-          },
-          _react2.default.createElement(_components.Icon, { name: 'marker', width: 8, height: 7, color: '#00cec6' })
-        ) : null
-      );
-    }
-  }]);
-
-  return MarkerBar;
-}(_react.Component);
-
-exports.default = MarkerBar;
-
-
-MarkerBar.propTypes = propTypes;
-MarkerBar.defaultProps = defaultProps;
-MarkerBar.displayName = 'MarkerBar';

package/components/Menu.js

@@ -1,77 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Menu;
-
-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 }; }
-
-var propTypes = {
-  children: _propTypes.PropTypes.arrayOf(_propTypes.PropTypes.element),
-  icon: _propTypes.PropTypes.string,
-  style: _propTypes.PropTypes.instanceOf(Object),
-  active: _propTypes.PropTypes.bool,
-  position: _propTypes.PropTypes.string
-};
-
-var defaultProps = {
-  position: 'center'
-};
-
-var MenuContainer = _styledComponents2.default.div.withConfig({
-  displayName: 'Menu__MenuContainer',
-  componentId: 'sc-183o83v-0'
-})(['width:20px;position:relative;&:hover{.menu-popup{visibility:visible;opacity:1;}}.menu-popup{visibility:hidden;opacity:0;position:absolute;bottom:20px;padding-bottom:16px;z-index:10;transition:all 350ms ease-in-out;&.right{left:-10px;&:after{left:15px;}}&.center{left:50%;transform:translateX(-50%);&:after{left:50%;transform:translateX(-50%);}}&.left{right:-10px;&:after{right:15px;}}&.active{visibility:visible;opacity:1;}&:after{content:\'\';border-left:6px solid transparent;position:absolute;border-right:6px solid transparent;border-top:6px solid rgb(0,206,198);bottom:10px;}.menu-list{border-radius:10px;background:#fff;min-width:175px;max-height:500px;transition:all 250ms ease-in-out;overflow:auto;max-height:400px;}}']);
-
-var MenuIcon = (0, _styledComponents2.default)(_components.Button).withConfig({
-  displayName: 'Menu__MenuIcon',
-  componentId: 'sc-183o83v-1'
-})(['background:transparent;border:none;margin:0px;&:hover,&:focus{background:transparent;svg path{fill:#00cec6;}}']);
-
-function Menu(_ref) {
-  var style = _ref.style,
-      children = _ref.children,
-      icon = _ref.icon,
-      active = _ref.active,
-      position = _ref.position;
-
-  return _react2.default.createElement(
-    MenuContainer,
-    { style: style },
-    _react2.default.createElement(MenuIcon, {
-      display: 'rounded',
-      appearance: 'cta',
-      icon: icon,
-      iconWidth: 16,
-      iconHeight: 16,
-      width: 20,
-      height: 20
-    }),
-    _react2.default.createElement(
-      'div',
-      { className: active ? 'menu-popup active ' + position : 'menu-popup ' + position },
-      _react2.default.createElement(
-        'div',
-        { className: 'menu-list' },
-        children
-      )
-    )
-  );
-}
-
-Menu.propTypes = propTypes;
-Menu.defaultProps = defaultProps;
-Menu.displayName = 'Menu';