@gamelearn/arcade-components 0.2.0

package/dist/components/video-visor/components/VideoVisor.js

@@ -0,0 +1,308 @@
+"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 _hls = _interopRequireDefault(require("hls.js"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _VideoControllers = _interopRequireDefault(require("./VideoControllers"));
+
+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 _extends() { _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; }; return _extends.apply(this, arguments); }
+
+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 defaultBgImageForAudio = "https://min.gamelearn.io/css-resources/gamelearn/resources/bgAudioPiece.jpg";
+
+var VideoVisor = function VideoVisor(_ref) {
+  var documentType = _ref.documentType,
+      url = _ref.url,
+      required = _ref.required,
+      viewed = _ref.viewed,
+      imgId = _ref.imgId,
+      endVideo = _ref.endVideo;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      duration = _useState2[0],
+      setDuration = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loadedPercentage = _useState4[0],
+      setLoadedPercentage = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      loading = _useState6[0],
+      setLoading = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(true),
+      _useState8 = _slicedToArray(_useState7, 2),
+      paused = _useState8[0],
+      setPaused = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isFinish = _useState10[0],
+      setIsFinish = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(),
+      _useState12 = _slicedToArray(_useState11, 2),
+      videoPlayer = _useState12[0],
+      setVideo = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(0),
+      _useState14 = _slicedToArray(_useState13, 2),
+      volume = _useState14[0],
+      setVolume = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      hiddenControls = _useState16[0],
+      hideControls = _useState16[1];
+
+  var isHls = url && url.match(/\.m3u8(\?.+=.+)*$/i) && _hls.default.isSupported();
+
+  var isEmbeddedVideo = url && (url.match(/youtube/i) || url.match(/vimeo/i));
+  var isAudio = url && (url.match(/.mp3/i) || url.match(/.ogg/i) || url.match(/.wav/i));
+  var videoProps = {
+    ref: function ref(videoRef) {
+      setVideo(videoRef);
+    },
+    src: url,
+    style: {
+      height: "100%",
+      width: "100%"
+    }
+  };
+
+  var onEnded = function onEnded() {
+    setLoading(false);
+    videoPlayer.pause();
+    setPaused(true);
+    setIsFinish(true);
+    hideControls(false);
+
+    if (documentType !== "document" && documentType !== "lesson") {
+      endVideo();
+    }
+  };
+
+  var onError = function onError() {
+    endVideo();
+  };
+
+  var onPlaying = function onPlaying() {
+    setPaused(false);
+    setLoading(false);
+  };
+
+  var onWaiting = function onWaiting() {
+    setLoading(true);
+  };
+
+  var onCanPlay = function onCanPlay() {
+    setLoading(false);
+    setDuration(videoPlayer.duration);
+  };
+
+  (0, _react.useEffect)(function () {
+    var hls;
+
+    if (videoPlayer) {
+      if (isHls) {
+        hls = new _hls.default();
+        var URL_RAND = "".concat(url, "?v=").concat(Math.floor(Math.random() * 99999999));
+        hls.loadSource(URL_RAND);
+        hls.attachMedia(videoPlayer);
+        hls.on(_hls.default.Events.FRAG_LOAD_PROGRESS, function (_, data) {
+          var stats = data.stats;
+          setLoadedPercentage(stats.loaded * 100 / stats.total);
+        });
+      }
+
+      return function () {
+        if (hls) {
+          hls.destroy();
+        }
+
+        hls = null;
+      };
+    }
+
+    return undefined;
+  }, [isHls, url, videoPlayer]);
+
+  var rewind = function rewind() {
+    var timeRewind = 15;
+    videoPlayer.currentTime -= timeRewind;
+  };
+
+  var pause = function pause() {
+    if (paused) {
+      videoPlayer.play();
+      setIsFinish(false);
+    } else {
+      videoPlayer.pause();
+    }
+
+    setPaused(!paused);
+  };
+
+  var setTimePoint = function setTimePoint(client, width, pos) {
+    setIsFinish(false);
+    videoPlayer.currentTime = parseFloat((client - pos) / width * videoPlayer.duration);
+  };
+
+  var restart = function restart() {
+    setIsFinish(false);
+    videoPlayer.currentTime = 0;
+    pause();
+  };
+
+  var mute = function mute() {
+    videoPlayer.muted = !videoPlayer.muted;
+  };
+
+  var updateVolume = function updateVolume(client, width, pos) {
+    videoPlayer.muted = false;
+    var volumePlayer = client - pos >= 0 ? (client - pos) / width : 0;
+    videoPlayer.volume = volumePlayer * 100 > 10 ? volumePlayer : 0;
+    setVolume(videoPlayer.volume);
+  };
+
+  (0, _react.useEffect)(function () {
+    var timeout;
+
+    if (!hiddenControls && !paused) {
+      timeout = setTimeout(function () {
+        hideControls(true);
+        clearTimeout(timeout);
+      }, 3000);
+    }
+
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [hiddenControls, paused]);
+
+  var handleHideControls = function handleHideControls() {
+    if (hiddenControls) {
+      hideControls(false);
+    }
+  };
+
+  var audioBackgroundImage = imgId || defaultBgImageForAudio;
+  var CoverOrContain = audioBackgroundImage === defaultBgImageForAudio ? "cover" : "contain";
+  var configForAudio = {
+    backgroundImage: "url(\"".concat(audioBackgroundImage, "\")"),
+    backgroundSize: CoverOrContain,
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center center"
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "video",
+    style: isAudio ? configForAudio : null
+  }, !isEmbeddedVideo ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !hiddenControls && /*#__PURE__*/_react.default.createElement(_VideoControllers.default, {
+    audioAnimation: !!isAudio,
+    skip: endVideo,
+    mandatory: required,
+    viewed: viewed,
+    volume: videoPlayer ? videoPlayer.volume : 0,
+    mute: mute,
+    muted: videoPlayer ? videoPlayer.muted : false,
+    paused: paused,
+    isFinish: isFinish,
+    restart: restart,
+    setTimePoint: setTimePoint,
+    time: {
+      duration: duration,
+      current: videoPlayer ? videoPlayer.currentTime : 0
+    },
+    rewind: rewind,
+    pause: pause,
+    volumeState: volume,
+    setVolume: updateVolume
+  }), /*#__PURE__*/_react.default.createElement("video", _extends({
+    onMouseMove: function onMouseMove() {
+      return handleHideControls();
+    },
+    onClick: function onClick() {
+      return handleHideControls();
+    },
+    onCanPlayThrough: onCanPlay,
+    onWaiting: onWaiting,
+    onEnded: onEnded,
+    onError: onError,
+    onPlaying: onPlaying
+  }, videoProps), /*#__PURE__*/_react.default.createElement("track", {
+    kind: "captions"
+  })), loading ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "video-loading-container",
+    style: {
+      top: 0,
+      left: 0
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "video-loading-container-bg opacity-wrapper"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "popup-alert warning"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "popup-message"
+  }, /*#__PURE__*/_react.default.createElement("p", null, Math.floor(loadedPercentage))))) : null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "position--absolute right top z-index1"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "gat--btn__round",
+    onClick: endVideo
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon-close"
+  }))), /*#__PURE__*/_react.default.createElement("iframe", _extends({
+    className: "embeddedVideo",
+    title: "title"
+  }, videoProps))));
+};
+
+VideoVisor.defaultProps = {
+  url: "",
+  name: "",
+  imgId: null,
+  documentType: "",
+  required: false,
+  viewed: false,
+  endVideo: function endVideo() {}
+};
+VideoVisor.propTypes = {
+  endVideo: _propTypes.default.func,
+  url: _propTypes.default.string,
+  documentType: _propTypes.default.string,
+  name: _propTypes.default.string,
+  imgId: _propTypes.default.string,
+  required: _propTypes.default.bool,
+  viewed: _propTypes.default.bool
+};
+var _default = VideoVisor;
+exports.default = _default;

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

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

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockProps = void 0;
+var path = 'https://s3-eu-west-1.amazonaws.com/statics.triskelion.gamelearn.io';
+var cloudfront = 'https://dszv2c8p7i9xo.cloudfront.net/';
+var mockProps = [{
+  name: 'video',
+  required: true,
+  documentType: 'document',
+  url: "".concat(cloudfront, "10fdf3ba-8bcb-49ef-b6fd-2cdd083b8e0d/hls/radio.m3u8"),
+  viewed: false
+}, {
+  url: "".concat(path, "/triskelion-statics/videos/ada_hack.mp4")
+}, {
+  url: "https://www.youtube.com/embed/5KcuphEhO8Q"
+}, {
+  url: 'https://player.vimeo.com/video/144094036'
+}, {
+  url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/documents/Cat-sound.mp3'
+}, {
+  imgId: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/image/60224b7a901f3e0012350158/vista-vertical-torre-eiffel-paris-francia_1258-3169.jpg',
+  url: 'https://s3-eu-west-1.amazonaws.com/gl-lms-storage/development/clients/58dccfba26561500117caf53/documents/Cat-sound.mp3'
+}];
+exports.mockProps = mockProps;

package/dist/helpers/LightSet.js

@@ -0,0 +1,39 @@
+"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 LightSet = function LightSet() {
+  return /*#__PURE__*/_react.default.createElement("group", null, /*#__PURE__*/_react.default.createElement("pointLight", {
+    position: [-2.29, 17.35, 2.56],
+    color: 16773785,
+    intensity: 12,
+    power: 150,
+    distance: 0,
+    decay: 1,
+    castShadow: true,
+    shadowBias: -0.002
+  }), /*#__PURE__*/_react.default.createElement("pointLight", {
+    position: [2.25, 16.57, -1.9],
+    color: 4234239,
+    intensity: 20,
+    power: 250,
+    distance: 0,
+    decay: 1,
+    shadowBias: -0.002
+  }), /*#__PURE__*/_react.default.createElement("hemisphereLight", {
+    color: 7918828,
+    groundColor: 7429837,
+    intensity: 4,
+    position: [0, 500, 0]
+  }));
+};
+
+var _default = LightSet;
+exports.default = _default;

package/dist/helpers/LodController.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _drei = require("@react-three/drei");
+
+var _react = require("react");
+
+var _fiber = require("@react-three/fiber");
+
+var _drawLOD = _interopRequireDefault(require("./drawLOD"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var LodController = function LodController() {
+  var scene = (0, _fiber.useThree)(function (state) {
+    return state.scene;
+  });
+
+  var _useProgress = (0, _drei.useProgress)(),
+      active = _useProgress.active;
+
+  (0, _react.useEffect)(function () {
+    if (!active) {
+      setTimeout(function () {
+        (0, _drawLOD.default)(scene);
+      }, 0); // 'Asynchronize' me to let useProgress getting aware of new elements loading
+    }
+  }, [active, scene]);
+  return null;
+};
+
+var _default = LodController;
+exports.default = _default;