@gamelearn/arcade-components 0.2.0

package/dist/components/video-visor/components/VideoControllers/BufferBar.js

@@ -0,0 +1,130 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var BufferBar = function BufferBar(_ref) {
+  var time = _ref.time,
+      setTimePoint = _ref.setTimePoint;
+  var barPercentage = Math.trunc(time.current * 1000 / time.duration) / 10;
+
+  var barRef = /*#__PURE__*/_react.default.createRef();
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      moving = _useState2[0],
+      move = _useState2[1];
+
+  var remainingMinutes = Math.trunc(time.current / 60) < 10 ? ['0', Math.trunc(time.current / 60)].join('').trim() : Math.trunc(time.current / 60);
+  var remainingSeconds = Math.trunc(time.current % 60) < 10 ? ['0', Math.trunc(time.current % 60)].join('').trim() : Math.trunc(time.current % 60);
+
+  var onMove = function onMove(event, buffer) {
+    move(true);
+    var position = event.offsetX;
+
+    if (event.changedTouches) {
+      position = event.changedTouches[0].clientX;
+    }
+
+    var offsetRight = buffer.offsetWidth + buffer.offsetLeft;
+
+    if (position <= offsetRight && position >= buffer.offsetLeft) {
+      setTimePoint(position, buffer.offsetWidth, buffer.offsetLeft);
+    }
+  };
+
+  var windowMoveEnd = function windowMoveEnd() {
+    window.onmousemove = null;
+    window.onmouseup = null;
+    move(false);
+  };
+
+  var windowMove = function windowMove(volumeBar) {
+    window.onmousemove = function (e) {
+      return onMove(e, volumeBar);
+    };
+
+    window.onmouseup = function (e) {
+      return windowMoveEnd(e);
+    };
+  };
+
+  var _onMouseDown = function onMouseDown(event, buffer) {
+    event.preventDefault();
+    setTimePoint(event.clientX, buffer.offsetWidth, buffer.offsetLeft);
+    windowMove(buffer);
+    move(true);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "buffer",
+    ref: barRef,
+    className: "video--controls__bar",
+    onMouseDown: function onMouseDown(mouseEvent) {
+      var buffer = barRef.current;
+
+      _onMouseDown(mouseEvent, buffer);
+    },
+    onTouchMove: function onTouchMove(event) {
+      var buffer = barRef.current;
+      onMove(event, buffer);
+    },
+    onTouchStart: function onTouchStart(event) {
+      var buffer = barRef.current;
+      move(true);
+      setTimePoint(event.changedTouches[0].clientX, buffer.offsetWidth, buffer.offsetLeft);
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "video--controls__progress",
+    style: {
+      width: "".concat(barPercentage, "%")
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: moving ? 'video--controls__handle active' : 'video--controls__handle'
+  }, moving ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "video--current__time active"
+  }, remainingMinutes, ":", remainingSeconds) : null)));
+};
+
+BufferBar.defaultProps = {
+  time: {
+    current: 0,
+    duration: 0
+  },
+  setTimePoint: function setTimePoint() {}
+};
+BufferBar.propTypes = {
+  time: _propTypes.default.shape({
+    current: _propTypes.default.number,
+    duration: _propTypes.default.number
+  }),
+  setTimePoint: _propTypes.default.func
+};
+var _default = BufferBar;
+exports.default = _default;

package/dist/components/video-visor/components/VideoControllers/ControlButtons.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ControlButtons = function ControlButtons(_ref) {
+  var pauseVideo = _ref.pauseVideo,
+      paused = _ref.paused;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "video--controls__buttons"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: !paused ? 'icon-pause' : 'icon-play',
+    onClick: function onClick() {
+      pauseVideo();
+    }
+  })));
+};
+
+ControlButtons.defaultProps = {
+  paused: false,
+  pauseVideo: function pauseVideo() {}
+};
+ControlButtons.propTypes = {
+  paused: _propTypes.default.bool,
+  pauseVideo: _propTypes.default.func
+};
+var _default = ControlButtons;
+exports.default = _default;

package/dist/components/video-visor/components/VideoControllers/FinishedVideoButtons.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var FinishedVideoButtons = function FinishedVideoButtons(_ref) {
+  var restart = _ref.restart,
+      finished = _ref.finished;
+
+  if (!finished) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "video--extra__actions video--extra__actions--widthTransparencyLayer position--absolute z-index1"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onClick: function onClick() {
+      restart();
+    },
+    className: "gat--btn gat--btn__secondary"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-rewind"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    id: "video.replay"
+  })));
+};
+
+FinishedVideoButtons.defaultProps = {
+  restart: function restart() {},
+  finished: false
+};
+FinishedVideoButtons.propTypes = {
+  restart: _propTypes.default.func,
+  finished: _propTypes.default.bool
+};
+var _default = FinishedVideoButtons;
+exports.default = _default;

package/dist/components/video-visor/components/VideoControllers/PlayInitButton.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var PlayInitButton = function PlayInitButton(_ref) {
+  var play = _ref.play,
+      finished = _ref.finished,
+      paused = _ref.paused;
+
+  if (finished || !paused) {
+    return /*#__PURE__*/_react.default.createElement("div", null);
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "video--extra__actions position--absolute z-index1"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onClick: function onClick() {
+      play();
+    },
+    className: "play--video__button"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-play-outline"
+  })));
+};
+
+PlayInitButton.defaultProps = {
+  play: function play() {},
+  finished: false,
+  paused: false
+};
+PlayInitButton.propTypes = {
+  play: _propTypes.default.func,
+  finished: _propTypes.default.bool,
+  paused: _propTypes.default.bool
+};
+var _default = PlayInitButton;
+exports.default = _default;

package/dist/components/video-visor/components/VideoControllers/SkipButton.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var skipButton = function skipButton(_ref) {
+  var viewed = _ref.viewed,
+      mandatory = _ref.mandatory,
+      finished = _ref.finished,
+      skip = _ref.skip;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mandatory && viewed || !mandatory || finished ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "position--absolute right top z-index1"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "gat--btn__round",
+    onClick: function onClick() {
+      skip();
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-close"
+  }))) : null);
+};
+
+skipButton.defaultProps = {
+  mandatory: false,
+  viewed: false,
+  finished: false,
+  skip: function skip() {}
+};
+skipButton.propTypes = {
+  mandatory: _propTypes.default.bool,
+  viewed: _propTypes.default.bool,
+  finished: _propTypes.default.bool,
+  skip: _propTypes.default.func
+};
+var _default = skipButton;
+exports.default = _default;

package/dist/components/video-visor/components/VideoControllers/Timer.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Timer = function Timer(_ref) {
+  var time = _ref.time;
+  var remainingMinutes = Math.trunc(time.current / 60) < 10 ? ['0', Math.trunc(time.current / 60)].join('').trim() : Math.trunc(time.current / 60);
+  var remainingSeconds = Math.trunc(time.current % 60) < 10 ? ['0', Math.trunc(time.current % 60)].join('').trim() : Math.trunc(time.current % 60);
+  var totalMinutes = Math.trunc(time.duration / 60) < 10 ? ['0', Math.trunc(time.duration / 60)].join('').trim() : Math.trunc(time.duration / 60);
+  var totalSeconds = Math.trunc(time.duration % 60) < 10 ? ['0', Math.trunc(time.duration % 60)].join('').trim() : Math.trunc(time.duration % 60);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "video--time"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "time"
+  }, remainingMinutes, ":", remainingSeconds), /*#__PURE__*/_react.default.createElement("span", {
+    className: "duration"
+  }, totalMinutes, ":", totalSeconds));
+};
+
+Timer.defaultProps = {
+  time: {
+    current: 0,
+    duration: 0
+  }
+};
+Timer.propTypes = {
+  time: _propTypes.default.shape({
+    current: _propTypes.default.number,
+    duration: _propTypes.default.number
+  })
+};
+var _default = Timer;
+exports.default = _default;

package/dist/components/video-visor/components/VideoControllers/VolumeBar.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+var VolumeBar = function VolumeBar(_ref) {
+  var volume = _ref.volume,
+      muted = _ref.muted,
+      setVolume = _ref.setVolume,
+      mute = _ref.mute;
+
+  var barRef = /*#__PURE__*/_react.default.createRef();
+
+  var barPercentage = muted ? 0 : Math.floor(volume * 100);
+
+  var onMove = function onMove(event, volumeBar) {
+    var offsetRight = volumeBar.offsetWidth + volumeBar.offsetLeft;
+    var position = event.clientX;
+
+    if (event.changedTouches) {
+      position = event.changedTouches[0].clientX;
+    }
+
+    if (position <= offsetRight && position >= volumeBar.offsetLeft) {
+      setVolume(position, volumeBar.offsetWidth, volumeBar.offsetLeft);
+    }
+  };
+
+  var windowMoveEnd = function windowMoveEnd() {
+    window.onmousemove = null;
+    window.onmouseup = null;
+  };
+
+  var windowMove = function windowMove(volumeBar) {
+    window.onmousemove = function (e) {
+      return onMove(e, volumeBar);
+    };
+
+    window.onmouseup = function (e) {
+      return windowMoveEnd(e);
+    };
+  };
+
+  var _onMouseDown = function onMouseDown(event, volumeBar) {
+    event.preventDefault();
+    setVolume(event.clientX, volumeBar.offsetWidth, volumeBar.offsetLeft);
+    windowMove(volumeBar);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "video--sound"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    onClick: function onClick() {
+      return mute();
+    },
+    className: barPercentage === 0 ? 'icon-sound-off' : 'icon-sound'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: barRef,
+    onMouseDown: function onMouseDown(event) {
+      var volumeBar = barRef.current;
+
+      _onMouseDown(event, volumeBar);
+    },
+    onTouchMove: function onTouchMove(event) {
+      var volumeBar = barRef.current;
+      onMove(event, volumeBar);
+    },
+    onTouchStart: function onTouchStart(event) {
+      var volumeBar = barRef.current;
+      setVolume(event.changedTouches[0].clientX, volumeBar.offsetWidth, volumeBar.offsetLeft);
+    },
+    id: "volume",
+    className: "video--sound__level"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      width: "".concat(barPercentage < 10 ? 10 : barPercentage, "%")
+    },
+    className: "video--sound__progress"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "video--handle"
+  }))));
+};
+
+VolumeBar.defaultProps = {
+  volume: 0,
+  muted: false,
+  setVolume: function setVolume() {},
+  mute: function mute() {}
+};
+VolumeBar.propTypes = {
+  volume: _propTypes.default.number,
+  setVolume: _propTypes.default.func,
+  mute: _propTypes.default.func,
+  muted: _propTypes.default.bool
+};
+var _default = VolumeBar;
+exports.default = _default;

package/dist/components/video-visor/components/VideoControllers/index.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _BufferBar = _interopRequireDefault(require("./BufferBar"));
+
+var _Timer = _interopRequireDefault(require("./Timer"));
+
+var _ControlButtons = _interopRequireDefault(require("./ControlButtons"));
+
+var _FinishedVideoButtons = _interopRequireDefault(require("./FinishedVideoButtons"));
+
+var _PlayInitButton = _interopRequireDefault(require("./PlayInitButton"));
+
+var _SkipButton = _interopRequireDefault(require("./SkipButton"));
+
+var _VolumeBar = _interopRequireDefault(require("./VolumeBar"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var VideoControllers = function VideoControllers(_ref) {
+  var pause = _ref.pause,
+      mandatory = _ref.mandatory,
+      viewed = _ref.viewed,
+      skip = _ref.skip,
+      rewind = _ref.rewind,
+      paused = _ref.paused,
+      time = _ref.time,
+      finished = _ref.finished,
+      restart = _ref.restart,
+      volume = _ref.volume,
+      muted = _ref.muted,
+      mute = _ref.mute,
+      setVolume = _ref.setVolume,
+      setTimePoint = _ref.setTimePoint,
+      audioAnimation = _ref.audioAnimation;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, audioAnimation ? null : /*#__PURE__*/_react.default.createElement(_PlayInitButton.default, {
+    play: pause,
+    paused: paused,
+    finished: finished
+  }), /*#__PURE__*/_react.default.createElement(_FinishedVideoButtons.default, {
+    finished: finished,
+    restart: restart
+  }), /*#__PURE__*/_react.default.createElement(_SkipButton.default, {
+    mandatory: mandatory,
+    finished: finished,
+    viewed: viewed,
+    skip: skip,
+    rewind: rewind
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "video--controls"
+  }, /*#__PURE__*/_react.default.createElement(_BufferBar.default, {
+    time: time,
+    setTimePoint: setTimePoint
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "video--controls__actions"
+  }, /*#__PURE__*/_react.default.createElement(_Timer.default, {
+    time: time
+  }), audioAnimation ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "audio-animation-wrap"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "audio-animation ".concat(paused ? 'audio-animation--notAnimate ' : null)
+  })) : null, /*#__PURE__*/_react.default.createElement(_ControlButtons.default, {
+    paused: paused,
+    pauseVideo: pause
+  }), /*#__PURE__*/_react.default.createElement(_VolumeBar.default, {
+    muted: muted,
+    mute: mute,
+    volume: volume,
+    setVolume: setVolume
+  }))));
+};
+
+VideoControllers.defaultProps = {
+  audioAnimation: false,
+  paused: false,
+  mandatory: false,
+  viewed: false,
+  volume: 0,
+  muted: false,
+  finished: false,
+  restart: function restart() {},
+  pause: function pause() {},
+  skip: function skip() {},
+  rewind: function rewind() {},
+  setTimePoint: function setTimePoint() {},
+  setVolume: function setVolume() {},
+  mute: function mute() {},
+  time: {
+    current: 0,
+    duration: 0
+  }
+};
+VideoControllers.propTypes = {
+  audioAnimation: _propTypes.default.bool,
+  paused: _propTypes.default.bool,
+  mandatory: _propTypes.default.bool,
+  muted: _propTypes.default.bool,
+  volume: _propTypes.default.number,
+  viewed: _propTypes.default.bool,
+  pause: _propTypes.default.func,
+  finished: _propTypes.default.bool,
+  restart: _propTypes.default.func,
+  skip: _propTypes.default.func,
+  rewind: _propTypes.default.func,
+  mute: _propTypes.default.func,
+  setTimePoint: _propTypes.default.func,
+  setVolume: _propTypes.default.func,
+  time: _propTypes.default.shape({
+    current: _propTypes.default.number,
+    duration: _propTypes.default.number
+  })
+};
+var _default = VideoControllers;
+exports.default = _default;