@gamelearn/arcade-components 2.41.1 → 3.0.2

package/dist/components/video-component/components/VideoComponent.js

@@ -1,73 +0,0 @@
-"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 _videoVisor = _interopRequireDefault(require("../../video-visor"));
-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; }
-var VideoComponent = function VideoComponent(_ref) {
-  var emitEvent = _ref.emitEvent,
-    name = _ref.name,
-    documentType = _ref.documentType,
-    document = _ref.document,
-    documentIdLabel = _ref.documentId_labelId,
-    soundActions = _ref.soundActions,
-    required = _ref.required,
-    viewed = _ref.viewed,
-    visible = _ref.visible,
-    img = _ref.img,
-    imgIdLabel = _ref.imgId_labelId,
-    keyboardControl = _ref.keyboardControl;
-  var translate = function translate(id) {
-    return emitEvent({
-      type: 'translate',
-      payload: id
-    });
-  };
-  var url = document.url;
-  var item = (0, _react.useMemo)(function () {
-    return {
-      documentId: documentIdLabel,
-      imgId: imgIdLabel,
-      required: required,
-      name: name,
-      type: 'video',
-      viewed: viewed,
-      documentType: documentType
-    };
-  }, [documentIdLabel, imgIdLabel, required, name, viewed, documentType]);
-  var _endVideo = (0, _react.useCallback)(function () {
-    emitEvent({
-      type: 'finishMedia',
-      payload: item
-    });
-  }, [emitEvent, item]);
-  (0, _react.useEffect)(function () {
-    if (!visible) {
-      _endVideo();
-    }
-  }, [_endVideo, visible]);
-  if (!visible) {
-    return null;
-  }
-  keyboardControl(null, !viewed ? _endVideo : null, !viewed ? _endVideo : null);
-  return /*#__PURE__*/_react.default.createElement(_videoVisor.default, {
-    backgroundImage: img === null || img === void 0 ? void 0 : img.url,
-    url: url,
-    soundActions: soundActions,
-    documentType: documentType,
-    required: required,
-    viewed: viewed,
-    endVideo: function endVideo() {
-      return _endVideo();
-    },
-    translate: translate
-  });
-};
-var _default = VideoComponent;
-exports.default = _default;

package/dist/components/video-component/index.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _VideoComponent = _interopRequireDefault(require("./components/VideoComponent"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _VideoComponent.default;
-exports.default = _default;

package/dist/components/video-component/mocks/mockForStory.js

@@ -1,94 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.mockProps = exports.default = void 0;
-var _mocker = require("helpers/mocker");
-var mockProps = [{
-  emitEvent: _mocker.emitEvent,
-  soundActions: _mocker.soundActions,
-  keyboardControl: _mocker.keyboardControl,
-  name: 'video',
-  required: true,
-  isLesson: true,
-  visible: true,
-  nodeId: '@gamelearn/video-component-game',
-  document: {
-    url: 'https://www.youtube.com/embed/5KcuphEhO8Q',
-    resourceId: '1234'
-  },
-  viewed: false
-}, {
-  emitEvent: _mocker.emitEvent,
-  soundActions: _mocker.soundActions,
-  keyboardControl: _mocker.keyboardControl,
-  name: 'video2',
-  required: true,
-  isLesson: true,
-  visible: true,
-  nodeId: 'xxas',
-  document: {
-    url: 'https://min.gamelearn.io/statics.triskelion/triskelion-statics/videos/ada_hack.mp4',
-    resourceId: '1234'
-  }
-}, {
-  emitEvent: _mocker.emitEvent,
-  soundActions: _mocker.soundActions,
-  keyboardControl: _mocker.keyboardControl,
-  name: 'video3',
-  required: true,
-  isLesson: true,
-  visible: true,
-  nodeId: 'xxas',
-  document: {
-    url: 'https://www.youtube.com/embed/5KcuphEhO8Q',
-    resourceId: '1234'
-  }
-}, {
-  emitEvent: _mocker.emitEvent,
-  soundActions: _mocker.soundActions,
-  keyboardControl: _mocker.keyboardControl,
-  name: 'video4',
-  required: true,
-  isLesson: true,
-  visible: true,
-  nodeId: 'xxas',
-  document: {
-    url: 'https://player.vimeo.com/video/144094036',
-    resourceId: '1234'
-  }
-}, {
-  emitEvent: _mocker.emitEvent,
-  soundActions: _mocker.soundActions,
-  keyboardControl: _mocker.keyboardControl,
-  name: 'video5',
-  required: true,
-  isLesson: true,
-  visible: true,
-  nodeId: 'xxas',
-  document: {
-    url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/documents/Cat-sound.mp3',
-    resourceId: '1234'
-  }
-}, {
-  emitEvent: _mocker.emitEvent,
-  soundActions: _mocker.soundActions,
-  keyboardControl: _mocker.keyboardControl,
-  name: 'video6',
-  required: true,
-  isLesson: true,
-  visible: true,
-  nodeId: 'xxas',
-  img: {
-    url: 'https://min.int.gamelearn.io/statics/gamelearn/resources/writer-puzzle/bg_email2.jpg',
-    resourceId: 'test'
-  },
-  document: {
-    url: 'https://min.int.gamelearn.io/cooked.gl-lms-storage/clients/58dccfba26561500117caf53/documents/Cat-sound.mp3',
-    resourceId: '1234'
-  }
-}];
-exports.mockProps = mockProps;
-var _default = mockProps;
-exports.default = _default;

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

@@ -1,108 +0,0 @@
-"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 _propTypes = _interopRequireDefault(require("prop-types"));
-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 _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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */
-var BufferBar = function BufferBar(_ref) {
-  var time = _ref.time,
-    setTimePoint = _ref.setTimePoint,
-    mandatory = _ref.mandatory,
-    mandatoryHasBeenViewed = _ref.mandatoryHasBeenViewed,
-    viewed = _ref.viewed;
-  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) {
-    if (!mandatory || mandatory && mandatoryHasBeenViewed || viewed) {
-      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

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var ControlButtons = function ControlButtons(_ref) {
-  var pauseVideo = _ref.pauseVideo,
-    paused = _ref.paused,
-    translate = _ref.translate;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "video--controls__buttons"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    id: "playPause",
-    "aria-label": !paused ? translate('storylines.misc.pause') : translate('storylines.misc.play'),
-    className: !paused ? 'unset-button icon-pause' : 'unset-button icon-play',
-    type: "button",
-    onClick: function onClick() {
-      pauseVideo();
-      document.querySelector('#playPause').blur();
-    }
-  }));
-};
-ControlButtons.defaultProps = {
-  paused: false,
-  pauseVideo: function pauseVideo() {}
-};
-var _default = ControlButtons;
-exports.default = _default;

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

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var FinishedVideoButtons = function FinishedVideoButtons(_ref) {
-  var restart = _ref.restart,
-    translate = _ref.translate;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "video--extra__actions video--extra__actions--widthTransparencyLayer position--absolute z-index1"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    onClick: function onClick() {
-      restart();
-    },
-    className: "gat--btn gat--btn__secondary",
-    "aria-label": translate('video.replay')
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon-rewind"
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    id: "video.replay"
-  })));
-};
-FinishedVideoButtons.defaultProps = {
-  restart: function restart() {},
-  finished: false
-};
-var _default = FinishedVideoButtons;
-exports.default = _default;

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

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-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", {
-    role: "button",
-    tabIndex: 0,
-    "aria-label": "play video",
-    onKeyUp: function onKeyUp() {},
-    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
-};
-var _default = PlayInitButton;
-exports.default = _default;

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

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-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,
-    mandatoryHasBeenViewed = _ref.mandatoryHasBeenViewed,
-    translate = _ref.translate;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mandatory && viewed || !mandatory || finished || mandatoryHasBeenViewed ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "position--absolute right top z-index2"
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    className: "gat--btn__round gat--btn__close",
-    type: "button",
-    "aria-label": translate('storylines.misc.closePiece'),
-    onKeyUp: function onKeyUp() {},
-    onClick: function onClick() {
-      skip();
-    }
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "icon-close"
-  }))) : null);
-};
-skipButton.defaultProps = {
-  mandatory: false,
-  viewed: false,
-  finished: false,
-  skip: function skip() {}
-};
-var _default = skipButton;
-exports.default = _default;

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

@@ -1,37 +0,0 @@
-"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

@@ -1,92 +0,0 @@
-"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;