@desynova-digital/player 3.9.6 → 4.0.0

package/utils/Menu.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Menu;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _propTypes = require("prop-types");
+var _components = require("@desynova-digital/components");
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var propTypes = {
+  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 = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 20px;\n  position: relative;\n  &:hover {\n    .menu-popup {\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n  .menu-popup {\n    visibility: hidden;\n    opacity: 0;\n    position: absolute;\n    bottom: 20px;\n    padding-bottom: 16px;\n    z-index: 10;\n    transition: all 350ms ease-in-out;\n    &.right {\n      left: -10px;\n      &:after {\n        left: 15px;\n      }\n    }\n    &.center {\n      left: 50%;\n      transform: translateX(-50%);\n      &:after {\n        left: 50%;\n        transform: translateX(-50%);\n      }\n    }\n    &.left {\n      right: -10px;\n      &:after {\n        right: 15px;\n      }\n    }\n    &.active {\n      visibility: visible;\n      opacity: 1;\n    }\n    &:after {\n      content: '';\n      border-left: 6px solid transparent;\n      position: absolute;\n      border-right: 6px solid transparent;\n      border-top: 6px solid rgb(0, 206, 198);\n      bottom: 10px;\n    }\n    .menu-list {\n      border-radius: 10px;\n      background: #fff;\n      min-width: 175px;\n      max-height: 500px;\n      transition: all 250ms ease-in-out;\n      overflow: auto;\n      max-height: 400px;\n    }\n  }\n"])));
+var MenuIcon = (0, _styledComponents["default"])(_components.Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  margin: 0px;\n  &:hover,\n  &:focus {\n    background: transparent;\n    svg path {\n      fill: #00cec6;\n    }\n  }\n"])));
+function Menu(_ref) {
+  var style = _ref.style,
+    children = _ref.children,
+    icon = _ref.icon,
+    active = _ref.active,
+    position = _ref.position;
+  return /*#__PURE__*/_react["default"].createElement(MenuContainer, {
+    style: style
+  }, /*#__PURE__*/_react["default"].createElement(MenuIcon, {
+    display: "rounded",
+    appearance: "cta",
+    icon: icon,
+    iconWidth: 16,
+    iconHeight: 16,
+    width: 20,
+    height: 20
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: active ? "menu-popup active ".concat(position) : "menu-popup ".concat(position)
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "menu-list"
+  }, children)));
+}
+Menu.propTypes = propTypes;
+Menu.defaultProps = defaultProps;
+Menu.displayName = 'Menu';

package/utils/Menu.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import styled from 'styled-components';
+import { PropTypes } from 'prop-types';
+import { Button } from '@desynova-digital/components';
+
+const propTypes = {
+  children: PropTypes.arrayOf(PropTypes.element),
+  icon: PropTypes.string,
+  style: PropTypes.instanceOf(Object),
+  active: PropTypes.bool,
+  position: PropTypes.string
+};
+
+const defaultProps = {
+  position: 'center'
+};
+
+const MenuContainer = styled.div`
+  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;
+    }
+  }
+`;
+
+const MenuIcon = styled(Button)`
+  background: transparent;
+  border: none;
+  margin: 0px;
+  &:hover,
+  &:focus {
+    background: transparent;
+    svg path {
+      fill: #00cec6;
+    }
+  }
+`;
+
+export default function Menu({ style, children, icon, active, position }) {
+  return (
+    <MenuContainer style={style}>
+      <MenuIcon display="rounded" appearance="cta" icon={icon} iconWidth={16} iconHeight={16} width={20} height={20} />
+      <div className={active ? `menu-popup active ${position}` : `menu-popup ${position}`}>
+        <div className="menu-list">{children}</div>
+      </div>
+    </MenuContainer>
+  );
+}
+
+Menu.propTypes = propTypes;
+Menu.defaultProps = defaultProps;
+Menu.displayName = 'Menu';

package/{colors.js → utils/colors.js}

@@ -1,8 +1,9 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports["default"] = void 0;
 var colors = {
   common: {
     base: {
@@ -10,22 +11,22 @@ var colors = {
       black: '#000000',
       dark: '#303f51',
       light: '#FFF',
-      default: '#f5f5f5',
+      "default": '#f5f5f5',
       transparent: '#0000004D'
     },
     text: {
-      default: '#212121',
+      "default": '#212121',
       inputs: '#555',
       secondary: '#757575',
       subtle: '#BDBDBD',
       error: '#FF0000'
     },
-    break: {
+    "break": {
       border: '#dddddd',
       text: '#666666'
     },
     icon: {
-      default: '#FFFFFF'
+      "default": '#FFFFFF'
     },
     input: {
       background: '#FFF',
@@ -56,7 +57,7 @@ var colors = {
       shadowDisabled: 'rgba(0,0,0,0.0)'
     },
     video: {
-      default: {
+      "default": {
         base: '#00cec6',
         buttonGradient: 'linear-gradient(to right, #00c8e799, #00e6b999)'
       },
@@ -109,7 +110,7 @@ var colors = {
   dark: {
     base: '#121d29',
     status: {
-      default: {
+      "default": {
         background: '#303D55',
         text: '#FFFFFF'
       },
@@ -174,7 +175,7 @@ var colors = {
       }
     },
     button: {
-      default: {
+      "default": {
         background: '#F1F1F1',
         backgroundHover: '#56BFBA',
         backgroundFocus: '#56BFBA',
@@ -273,7 +274,7 @@ var colors = {
   light: {
     base: '#ffffff',
     status: {
-      default: {
+      "default": {
         background: '#F5F5F5',
         text: '#FFFFFF'
       },
@@ -321,7 +322,7 @@ var colors = {
       }
     },
     button: {
-      default: {
+      "default": {
         background: '#ffffff',
         backgroundHover: '#33D7CE',
         text: '#666666',
@@ -430,7 +431,6 @@ var colors = {
       monthChangeIconBackground: '#eeeeee',
       monthChangeIconBackgroundHover: '#31cfc6',
       dayNameColor: '#666666',
-
       dayDefaultColor: '#666666',
       dayDisabledColor: '#c1c1c1',
       dayOtherMonthDisabledColor: '#dedede',
@@ -443,5 +443,5 @@ var colors = {
     }
   }
 };
-
-exports.default = colors;
+var _default = colors;
+exports["default"] = _default;

package/utils/index.js

@@ -1,25 +1,52 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mediaProperties = undefined;
-
-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; };
-
-exports.secondsToTime = secondsToTime;
-exports.timeToSeconds = timeToSeconds;
 exports.formatTime = formatTime;
-exports.isVideoChild = isVideoChild;
 exports.mergeAndSortChildren = mergeAndSortChildren;
-exports.deprecatedWarning = deprecatedWarning;
-exports.throttle = throttle;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+exports.secondsToTime = secondsToTime;
+exports.timeToSeconds = timeToSeconds;
+var _react = require("react");
+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 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 _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); }
+/*
+ * merge default children
+ * sort them by `order` property
+ * filter them by `disabled` property
+ */
+function mergeAndSortChildren(defaultChildren) {
+  var _children = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var _parentProps = arguments.length > 2 ? arguments[2] : undefined;
+  var defaultOrder = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  /*
+   * const children = React.Children.toArray(_children);
+   * const parentProps = { ..._parentProps };
+   */
+  return _children.filter(function (e) {
+    return !e.props.disabled;
+  }) // filter the disabled components
+  .concat(defaultChildren.filter(function (c) {
+    return !find(children, function (component) {
+      return isTypeEqual(component, c);
+    });
+  })).map(function (element) {
+    var defaultComponent = find(defaultChildren, function (c) {
+      return isTypeEqual(c, element);
+    });
+    delete parentProps.order;
+    var defaultProps = defaultComponent ? defaultComponent.props : {};
+    var props = _objectSpread(_objectSpread(_objectSpread({}, parentProps), defaultProps), element.props);
+    var e = _react.React.cloneElement(element, props, element.props.children);
+    return e;
+  }).sort(function (a, b) {
+    return (a.props.order || defaultOrder) - (b.props.order || defaultOrder);
+  });
+}
 
 /**
  * @file seconds-to-time.js
@@ -37,10 +64,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 function secondsToTime() {
   var _seconds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
-  var frameRate = arguments[1];
-  var initialTime = arguments[2];
-
+  var frameRate = arguments.length > 1 ? arguments[1] : undefined;
+  var initialTime = arguments.length > 2 ? arguments[2] : undefined;
   var time = '00:00:00:00';
   _seconds = parseFloat(_seconds);
   if (_seconds > -1) {
@@ -49,25 +74,21 @@ function secondsToTime() {
     }
     var date = new Date(null);
     var currentFrame = Math.floor(_seconds * frameRate % frameRate);
-    var paddedFrame = currentFrame < 10 ? '0' + currentFrame : currentFrame;
+    var paddedFrame = currentFrame < 10 ? "0".concat(currentFrame) : currentFrame;
     date.setSeconds(_seconds);
     var timeString = date.toISOString().substr(11, 8);
-    var timeWithFrame = timeString + ':' + paddedFrame;
+    var timeWithFrame = "".concat(timeString, ":").concat(paddedFrame);
     time = timeWithFrame;
   }
-
   return time;
 }
-
 function timeToSeconds() {
   var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '00:00:00:00';
-  var frameRate = arguments[1];
-
+  var frameRate = arguments.length > 1 ? arguments[1] : undefined;
   var timeObj = time.split(':'); // split it at the colons
 
   // minutes are worth 60 seconds. Hours are worth 60 minutes.
   var seconds = +timeObj[0] * 60 * 60 + +timeObj[1] * 60 + +timeObj[2];
-
   if (timeObj.length > 3 && frameRate) {
     var frames = timeObj[3] * (1 / frameRate);
     seconds += frames;
@@ -91,7 +112,6 @@ function timeToSeconds() {
 function formatTime() {
   var seconds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var guide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : seconds;
-
   var s = Math.floor(seconds % 60);
   var m = Math.floor(seconds / 60 % 60);
   var h = Math.floor(seconds / 3600);
@@ -110,105 +130,15 @@ function formatTime() {
   }
 
   // Check if we need to show hours
-  h = h > 0 || gh > 0 ? h + ':' : '';
+  h = h > 0 || gh > 0 ? "".concat(h, ":") : '';
 
   /*
    * If hours are showing, we may need to add a leading zero.
    * Always show at least one digit of minutes.
    */
-  m = ((h || gm >= 10) && m < 10 ? '0' + m : m) + ':';
+  m = "".concat((h || gm >= 10) && m < 10 ? "0".concat(m) : m, ":");
 
   // Check if leading zero is need for seconds
-  s = s < 10 ? '0' + s : s;
-
+  s = s < 10 ? "0".concat(s) : s;
   return h + m + s;
-}
-
-/*
- * Check if the element belongs to a video element
- * only accept <source />, <track />,
- * <MyComponent isVideoChild />
- * elements
- */
-function isVideoChild(c) {
-  if (c.props && c.props.isVideoChild) {
-    return true;
-  }
-  return c.type === 'source' || c.type === 'track';
-}
-
-var find = function find(elements, func) {
-  return elements.filter(func)[0];
-};
-
-// check if two components are the same type
-var isTypeEqual = function isTypeEqual(component1, component2) {
-  var type1 = component1.type;
-  var type2 = component2.type;
-
-  if (typeof type1 === 'string' || typeof type2 === 'string') {
-    return type1 === type2;
-  }
-
-  if (typeof type1 === 'function' && typeof type2 === 'function') {
-    return type1.displayName === type2.displayName;
-  }
-
-  return false;
-};
-
-/*
- * merge default children
- * sort them by `order` property
- * filter them by `disabled` property
- */
-function mergeAndSortChildren(defaultChildren, _children, _parentProps) {
-  var defaultOrder = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
-
-  var children = _react2.default.Children.toArray(_children);
-  var parentProps = _extends({}, _parentProps);
-  return children.filter(function (e) {
-    return !e.props.disabled;
-  }) // filter the disabled components
-  .concat(defaultChildren.filter(function (c) {
-    return !find(children, function (component) {
-      return isTypeEqual(component, c);
-    });
-  })).map(function (element) {
-    var defaultComponent = find(defaultChildren, function (c) {
-      return isTypeEqual(c, element);
-    });
-    delete parentProps.order;
-    var defaultProps = defaultComponent ? defaultComponent.props : {};
-    var props = _extends({}, parentProps, defaultProps, element.props);
-    var e = _react2.default.cloneElement(element, props, element.props.children);
-    return e;
-  }).sort(function (a, b) {
-    return (a.props.order || defaultOrder) - (b.props.order || defaultOrder);
-  });
-}
-
-/**
- * Temporary utility for generating the warnings
- */
-function deprecatedWarning(oldMethodCall, newMethodCall) {
-  // eslint-disable-next-line no-console
-  console.warn('WARNING: ' + oldMethodCall + ' will be deprecated soon!\n    Please use ' + newMethodCall + ' instead.');
-}
-
-function throttle(callback, limit) {
-  var _arguments = arguments;
-
-  var wait = false;
-  return function () {
-    if (!wait) {
-      callback.apply(undefined, _arguments);
-      wait = true;
-      setTimeout(function () {
-        wait = false;
-      }, limit);
-    }
-  };
-}
-
-var mediaProperties = exports.mediaProperties = ['error', 'src', 'srcObject', 'currentSrc', 'crossOrigin', 'networkState', 'preload', 'buffered', 'readyState', 'seeking', 'currentTime', 'duration', 'paused', 'defaultPlaybackRate', 'playbackRate', 'played', 'seekable', 'ended', 'autoplay', 'loop', 'mediaGroup', 'controller', 'controls', 'volume', 'muted', 'defaultMuted', 'audioTracks', 'videoTracks', 'textTracks', 'width', 'height', 'videoWidth', 'videoHeight', 'poster'];
+}

package/Manager.js

@@ -1,124 +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 _redux = require('redux');
-
-var _reducers = require('./reducers');
-
-var _reducers2 = _interopRequireDefault(_reducers);
-
-var _player = require('./actions/player');
-
-var playerActions = _interopRequireWildcard(_player);
-
-var _video = require('./actions/video');
-
-var videoActions = _interopRequireWildcard(_video);
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-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"); } }
-
-var Manager = function () {
-  function Manager(store) {
-    _classCallCheck(this, Manager);
-
-    this.store = store || (0, _redux.createStore)(_reducers2.default);
-
-    this.video = null;
-    this.rootElement = null;
-  }
-
-  _createClass(Manager, [{
-    key: 'getActions',
-    value: function getActions() {
-      var manager = this;
-      var dispatch = this.store.dispatch;
-
-      var actions = _extends({}, playerActions, videoActions);
-
-      function bindActionCreator(actionCreator) {
-        return function bindAction() {
-          // eslint-disable-next-line prefer-rest-params
-          var action = actionCreator.apply(manager, arguments);
-          if (typeof action !== 'undefined') {
-            dispatch(action);
-          }
-        };
-      }
-
-      return Object.keys(actions).filter(function (key) {
-        return typeof actions[key] === 'function';
-      }).reduce(function (boundActions, key) {
-        boundActions[key] = bindActionCreator(actions[key]);
-        return boundActions;
-      }, {});
-    }
-  }, {
-    key: 'getState',
-    value: function getState() {
-      return this.store.getState();
-    }
-
-    // subscribe state change
-
-  }, {
-    key: 'subscribeToStateChange',
-    value: function subscribeToStateChange(listener, getState) {
-      if (!getState) {
-        getState = this.getState.bind(this);
-      }
-
-      var prevState = getState();
-
-      var handleChange = function handleChange() {
-        var state = getState();
-        if (state === prevState) {
-          return;
-        }
-        var prevStateCopy = prevState;
-        prevState = state;
-        listener(state, prevStateCopy);
-      };
-
-      return this.store.subscribe(handleChange);
-    }
-
-    // subscribe to operation state change
-
-  }, {
-    key: 'subscribeToOperationStateChange',
-    value: function subscribeToOperationStateChange(listener) {
-      var _this = this;
-
-      return this.subscribeToStateChange(listener, function () {
-        return _this.getState().operation;
-      });
-    }
-
-    // subscribe to player state change
-
-  }, {
-    key: 'subscribeToPlayerStateChange',
-    value: function subscribeToPlayerStateChange(listener) {
-      var _this2 = this;
-
-      return this.subscribeToStateChange(listener, function () {
-        return _this2.getState().player;
-      });
-    }
-  }]);
-
-  return Manager;
-}();
-
-exports.default = Manager;