@livepeer-frameworks/player-react 0.1.0 → 0.1.2

package/dist/esm/components/IdleScreen.js

@@ -0,0 +1,582 @@
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import DvdLogo from './DvdLogo.js';
+import logomarkAsset from '../assets/logomark.svg.js';
+
+var AnimatedBubble = function AnimatedBubble(_ref) {
+  var index = _ref.index;
+  var _useState = useState({
+      top: 0,
+      left: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  var _useState3 = useState(40),
+    _useState4 = _slicedToArray(_useState3, 2),
+    size = _useState4[0],
+    setSize = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    opacity = _useState6[0],
+    setOpacity = _useState6[1];
+  var getRandomPosition = function getRandomPosition() {
+    return {
+      top: Math.random() * 80 + 10,
+      left: Math.random() * 80 + 10
+    };
+  };
+  var getRandomSize = function getRandomSize() {
+    return Math.random() * 60 + 30;
+  };
+  useEffect(function () {
+    setPosition(getRandomPosition());
+    setSize(getRandomSize());
+    var _animationCycle = function animationCycle() {
+      setOpacity(0.15);
+      setTimeout(function () {
+        setOpacity(0);
+        setTimeout(function () {
+          setPosition(getRandomPosition());
+          setSize(getRandomSize());
+          setTimeout(function () {
+            _animationCycle();
+          }, 200);
+        }, 1500);
+      }, 4000 + Math.random() * 3000);
+    };
+    var timeout = setTimeout(_animationCycle, index * 500);
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [index]);
+  var bubbleColors = ["rgba(122, 162, 247, 0.2)", "rgba(187, 154, 247, 0.2)", "rgba(158, 206, 106, 0.2)", "rgba(115, 218, 202, 0.2)", "rgba(125, 207, 255, 0.2)", "rgba(247, 118, 142, 0.2)", "rgba(224, 175, 104, 0.2)", "rgba(42, 195, 222, 0.2)"];
+  return jsx("div", {
+    style: {
+      position: "absolute",
+      top: "".concat(position.top, "%"),
+      left: "".concat(position.left, "%"),
+      width: "".concat(size, "px"),
+      height: "".concat(size, "px"),
+      borderRadius: "50%",
+      background: bubbleColors[index % bubbleColors.length],
+      opacity: opacity,
+      transition: "opacity 1s ease-in-out",
+      pointerEvents: "none",
+      userSelect: "none"
+    }
+  });
+};
+var CenterLogo = function CenterLogo(_ref2) {
+  var containerRef = _ref2.containerRef,
+    _ref2$scale = _ref2.scale,
+    scale = _ref2$scale === void 0 ? 0.2 : _ref2$scale,
+    onHitmarker = _ref2.onHitmarker;
+  var _useState7 = useState(100),
+    _useState8 = _slicedToArray(_useState7, 2),
+    logoSize = _useState8[0],
+    setLogoSize = _useState8[1];
+  var _useState9 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState0 = _slicedToArray(_useState9, 2),
+    offset = _useState0[0],
+    setOffset = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    isHovered = _useState10[0],
+    setIsHovered = _useState10[1];
+  useEffect(function () {
+    if (containerRef.current) {
+      var containerWidth = containerRef.current.clientWidth;
+      var containerHeight = containerRef.current.clientHeight;
+      var minDimension = Math.min(containerWidth, containerHeight);
+      setLogoSize(minDimension * scale);
+    }
+  }, [containerRef, scale]);
+  var handleLogoClick = function handleLogoClick(e) {
+    e.stopPropagation();
+    if (onHitmarker) {
+      onHitmarker({
+        clientX: e.clientX,
+        clientY: e.clientY
+      });
+    }
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    if (!containerRef.current) return;
+    var rect = containerRef.current.getBoundingClientRect();
+    var centerX = rect.left + rect.width / 2;
+    var centerY = rect.top + rect.height / 2;
+    var deltaX = e.clientX - centerX;
+    var deltaY = e.clientY - centerY;
+    var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    var maxDistance = logoSize * 1.5;
+    if (distance < maxDistance && distance > 0) {
+      var pushStrength = (maxDistance - distance) / maxDistance;
+      var pushDistance = 50 * pushStrength;
+      var pushX = -(deltaX / distance) * pushDistance;
+      var pushY = -(deltaY / distance) * pushDistance;
+      setOffset({
+        x: pushX,
+        y: pushY
+      });
+      setIsHovered(true);
+    } else {
+      setOffset({
+        x: 0,
+        y: 0
+      });
+      setIsHovered(false);
+    }
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    setOffset({
+      x: 0,
+      y: 0
+    });
+    setIsHovered(false);
+  };
+  useEffect(function () {
+    if (containerRef.current) {
+      var container = containerRef.current;
+      container.addEventListener("mousemove", handleMouseMove);
+      container.addEventListener("mouseleave", handleMouseLeave);
+      return function () {
+        container.removeEventListener("mousemove", handleMouseMove);
+        container.removeEventListener("mouseleave", handleMouseLeave);
+      };
+    }
+  }, [logoSize, containerRef]);
+  return jsxs("div", {
+    style: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%) translate(".concat(offset.x, "px, ").concat(offset.y, "px)"),
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 10,
+      transition: "transform 0.3s ease-out",
+      userSelect: "none"
+    },
+    children: [jsx("div", {
+      style: {
+        position: "absolute",
+        width: "".concat(logoSize * 1.4, "px"),
+        height: "".concat(logoSize * 1.4, "px"),
+        borderRadius: "50%",
+        background: "rgba(122, 162, 247, 0.15)",
+        animation: isHovered ? "logoPulse 1s ease-in-out infinite" : "logoPulse 3s ease-in-out infinite",
+        transform: isHovered ? "scale(1.2)" : "scale(1)",
+        transition: "transform 0.3s ease-out",
+        pointerEvents: "none"
+      }
+    }), jsx("img", {
+      src: logomarkAsset,
+      alt: "FrameWorks Logo",
+      onClick: handleLogoClick,
+      style: {
+        width: "".concat(logoSize, "px"),
+        height: "".concat(logoSize, "px"),
+        position: "relative",
+        zIndex: 1,
+        filter: isHovered ? "drop-shadow(0 6px 12px rgba(36, 40, 59, 0.4)) brightness(1.1)" : "drop-shadow(0 4px 8px rgba(36, 40, 59, 0.3))",
+        transform: isHovered ? "scale(1.1)" : "scale(1)",
+        transition: "all 0.3s ease-out",
+        cursor: isHovered ? "pointer" : "default",
+        userSelect: "none",
+        WebkitUserDrag: "none"
+      }
+    })]
+  });
+};
+function StatusIcon(_ref3) {
+  var status = _ref3.status;
+  var iconClass = "w-5 h-5";
+  // Spinner for loading states
+  if (status === "INITIALIZING" || status === "BOOTING" || status === "WAITING_FOR_DATA" || !status) {
+    return jsxs("svg", {
+      className: "".concat(iconClass, " animate-spin"),
+      fill: "none",
+      viewBox: "0 0 24 24",
+      style: {
+        color: "hsl(var(--tn-yellow, 40 95% 64%))"
+      },
+      children: [jsx("circle", {
+        className: "opacity-25",
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor",
+        strokeWidth: "4"
+      }), jsx("path", {
+        className: "opacity-75",
+        fill: "currentColor",
+        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      })]
+    });
+  }
+  // Offline icon
+  if (status === "OFFLINE") {
+    return jsx("svg", {
+      className: iconClass,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      style: {
+        color: "hsl(var(--tn-red, 348 100% 72%))"
+      },
+      children: jsx("path", {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
+      })
+    });
+  }
+  // Error icon
+  if (status === "ERROR" || status === "INVALID") {
+    return jsx("svg", {
+      className: iconClass,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      style: {
+        color: "hsl(var(--tn-red, 348 100% 72%))"
+      },
+      children: jsx("path", {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+      })
+    });
+  }
+  // Default spinner
+  return jsxs("svg", {
+    className: "".concat(iconClass, " animate-spin"),
+    fill: "none",
+    viewBox: "0 0 24 24",
+    style: {
+      color: "hsl(var(--tn-cyan, 193 100% 75%))"
+    },
+    children: [jsx("circle", {
+      className: "opacity-25",
+      cx: "12",
+      cy: "12",
+      r: "10",
+      stroke: "currentColor",
+      strokeWidth: "4"
+    }), jsx("path", {
+      className: "opacity-75",
+      fill: "currentColor",
+      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    })]
+  });
+}
+var StatusOverlay = function StatusOverlay(_ref4) {
+  var status = _ref4.status,
+    message = _ref4.message,
+    percentage = _ref4.percentage,
+    error = _ref4.error,
+    onRetry = _ref4.onRetry;
+  var showRetry = (status === "ERROR" || status === "INVALID") && onRetry;
+  var showProgress = status === "INITIALIZING" && percentage !== undefined;
+  var displayMessage = error || message;
+  return jsxs("div", {
+    style: {
+      position: "absolute",
+      bottom: "16px",
+      left: "50%",
+      transform: "translateX(-50%)",
+      zIndex: 20,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "8px",
+      maxWidth: "280px",
+      textAlign: "center"
+    },
+    children: [jsxs("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        color: "#787c99",
+        fontSize: "13px",
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+      },
+      children: [jsx(StatusIcon, {
+        status: status
+      }), jsx("span", {
+        children: displayMessage
+      })]
+    }), showProgress && jsx("div", {
+      style: {
+        width: "160px",
+        height: "4px",
+        background: "rgba(65, 72, 104, 0.4)",
+        borderRadius: "2px",
+        overflow: "hidden"
+      },
+      children: jsx("div", {
+        style: {
+          width: "".concat(Math.min(100, percentage), "%"),
+          height: "100%",
+          background: "hsl(var(--tn-cyan, 193 100% 75%))",
+          transition: "width 0.3s ease-out"
+        }
+      })
+    }), showRetry && jsx("button", {
+      type: "button",
+      onClick: onRetry,
+      style: {
+        padding: "6px 16px",
+        background: "transparent",
+        border: "1px solid rgba(122, 162, 247, 0.4)",
+        borderRadius: "4px",
+        color: "#7aa2f7",
+        fontSize: "11px",
+        fontWeight: 500,
+        cursor: "pointer",
+        transition: "all 0.2s ease",
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+      },
+      onMouseEnter: function onMouseEnter(e) {
+        e.currentTarget.style.background = "rgba(122, 162, 247, 0.1)";
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        e.currentTarget.style.background = "transparent";
+      },
+      children: "Retry"
+    })]
+  });
+};
+var playHitmarkerSound = function playHitmarkerSound() {
+  try {
+    // Embedded hitmarker sound as base64 data URL
+    var hitmarkerDataUrl = "data:audio/mpeg;base64,SUQzBAAAAAAANFRDT04AAAAHAAADT3RoZXIAVFNTRQAAAA8AAANMYXZmNTcuODMuMTAwAAAAAAAAAAAA" + "AAD/+1QAAAAAAAAAAAAAAAAAAAAA" + "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" + "qqqqqqqqqqqqqqqqqqqqqqqqqqo=";
+    var audio = new Audio(hitmarkerDataUrl);
+    audio.volume = 0.3;
+    audio.play()["catch"](function () {
+      return createSyntheticHitmarkerSound();
+    });
+  } catch (_unused) {
+    createSyntheticHitmarkerSound();
+  }
+};
+var createSyntheticHitmarkerSound = function createSyntheticHitmarkerSound() {
+  try {
+    var audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    var oscillator1 = audioContext.createOscillator();
+    var oscillator2 = audioContext.createOscillator();
+    var gainNode1 = audioContext.createGain();
+    var gainNode2 = audioContext.createGain();
+    var masterGain = audioContext.createGain();
+    oscillator1.connect(gainNode1);
+    oscillator2.connect(gainNode2);
+    gainNode1.connect(masterGain);
+    gainNode2.connect(masterGain);
+    masterGain.connect(audioContext.destination);
+    oscillator1.frequency.setValueAtTime(1800, audioContext.currentTime);
+    oscillator1.frequency.exponentialRampToValueAtTime(900, audioContext.currentTime + 0.08);
+    oscillator2.frequency.setValueAtTime(3600, audioContext.currentTime);
+    oscillator2.frequency.exponentialRampToValueAtTime(1800, audioContext.currentTime + 0.04);
+    oscillator1.type = "triangle";
+    oscillator2.type = "sine";
+    gainNode1.gain.setValueAtTime(0, audioContext.currentTime);
+    gainNode1.gain.linearRampToValueAtTime(0.4, audioContext.currentTime + 0.002);
+    gainNode1.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.12);
+    gainNode2.gain.setValueAtTime(0, audioContext.currentTime);
+    gainNode2.gain.linearRampToValueAtTime(0.3, audioContext.currentTime + 0.001);
+    gainNode2.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.06);
+    masterGain.gain.setValueAtTime(0.5, audioContext.currentTime);
+    var startTime = audioContext.currentTime;
+    var stopTime = startTime + 0.15;
+    oscillator1.start(startTime);
+    oscillator2.start(startTime);
+    oscillator1.stop(stopTime);
+    oscillator2.stop(stopTime);
+  } catch (_unused2) {
+    // Audio context not available
+  }
+};
+var IdleScreen = function IdleScreen(_ref5) {
+  var status = _ref5.status,
+    _ref5$message = _ref5.message,
+    message = _ref5$message === void 0 ? "Waiting for stream..." : _ref5$message,
+    percentage = _ref5.percentage,
+    error = _ref5.error,
+    onRetry = _ref5.onRetry;
+  var containerRef = useRef(null);
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    hitmarkers = _useState12[0],
+    setHitmarkers = _useState12[1];
+  var createHitmarker = function createHitmarker(e) {
+    if (!containerRef.current) return;
+    var rect = containerRef.current.getBoundingClientRect();
+    var x = e.clientX - rect.left;
+    var y = e.clientY - rect.top;
+    var newHitmarker = {
+      id: Date.now() + Math.random(),
+      x: x,
+      y: y
+    };
+    setHitmarkers(function (prev) {
+      return [].concat(_toConsumableArray(prev), [newHitmarker]);
+    });
+    playHitmarkerSound();
+    setTimeout(function () {
+      setHitmarkers(function (prev) {
+        return prev.filter(function (h) {
+          return h.id !== newHitmarker.id;
+        });
+      });
+    }, 600);
+  };
+  // Inject CSS animations
+  useEffect(function () {
+    var styleId = "idle-screen-animations";
+    if (!document.getElementById(styleId)) {
+      var style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = "\n        @keyframes fadeInOut {\n          0%, 100% { opacity: 0.6; }\n          50% { opacity: 0.9; }\n        }\n        @keyframes logoPulse {\n          0%, 100% { opacity: 0.15; transform: scale(1); }\n          50% { opacity: 0.25; transform: scale(1.05); }\n        }\n        @keyframes floatUp {\n          0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }\n          10% { opacity: 0.6; }\n          90% { opacity: 0.6; }\n          100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }\n        }\n        @keyframes gradientShift {\n          0%, 100% { background-position: 0% 50%; }\n          50% { background-position: 100% 50%; }\n        }\n        @keyframes hitmarkerFade45 {\n          0% { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(0.5); }\n          20% { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1.2); }\n          100% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(1); }\n        }\n        @keyframes hitmarkerFadeNeg45 {\n          0% { opacity: 1; transform: translate(-50%, -50%) rotate(-45deg) scale(0.5); }\n          20% { opacity: 1; transform: translate(-50%, -50%) rotate(-45deg) scale(1.2); }\n          100% { opacity: 0; transform: translate(-50%, -50%) rotate(-45deg) scale(1); }\n        }\n      ";
+      document.head.appendChild(style);
+    }
+  }, []);
+  return jsxs("div", {
+    ref: containerRef,
+    className: "fw-player-root",
+    style: {
+      position: "absolute",
+      inset: 0,
+      zIndex: 5,
+      background: "\n          linear-gradient(135deg,\n            hsl(var(--tn-bg-dark, 235 21% 11%)) 0%,\n            hsl(var(--tn-bg, 233 23% 17%)) 25%,\n            hsl(var(--tn-bg-dark, 235 21% 11%)) 50%,\n            hsl(var(--tn-bg, 233 23% 17%)) 75%,\n            hsl(var(--tn-bg-dark, 235 21% 11%)) 100%\n          )\n        ",
+      backgroundSize: "400% 400%",
+      animation: "gradientShift 16s ease-in-out infinite",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "hidden",
+      borderRadius: "0",
+      userSelect: "none"
+    },
+    children: [hitmarkers.map(function (hitmarker) {
+      return jsxs("div", {
+        style: {
+          position: "absolute",
+          left: "".concat(hitmarker.x, "px"),
+          top: "".concat(hitmarker.y, "px"),
+          transform: "translate(-50%, -50%)",
+          pointerEvents: "none",
+          zIndex: 100,
+          width: "40px",
+          height: "40px"
+        },
+        children: [jsx("div", {
+          style: {
+            position: "absolute",
+            top: "25%",
+            left: "25%",
+            width: "12px",
+            height: "3px",
+            backgroundColor: "#ffffff",
+            transform: "translate(-50%, -50%) rotate(45deg)",
+            animation: "hitmarkerFade45 0.6s ease-out forwards",
+            boxShadow: "0 0 8px rgba(255, 255, 255, 0.8)",
+            borderRadius: "1px"
+          }
+        }), jsx("div", {
+          style: {
+            position: "absolute",
+            top: "25%",
+            left: "75%",
+            width: "12px",
+            height: "3px",
+            backgroundColor: "#ffffff",
+            transform: "translate(-50%, -50%) rotate(-45deg)",
+            animation: "hitmarkerFadeNeg45 0.6s ease-out forwards",
+            boxShadow: "0 0 8px rgba(255, 255, 255, 0.8)",
+            borderRadius: "1px"
+          }
+        }), jsx("div", {
+          style: {
+            position: "absolute",
+            top: "75%",
+            left: "25%",
+            width: "12px",
+            height: "3px",
+            backgroundColor: "#ffffff",
+            transform: "translate(-50%, -50%) rotate(-45deg)",
+            animation: "hitmarkerFadeNeg45 0.6s ease-out forwards",
+            boxShadow: "0 0 8px rgba(255, 255, 255, 0.8)",
+            borderRadius: "1px"
+          }
+        }), jsx("div", {
+          style: {
+            position: "absolute",
+            top: "75%",
+            left: "75%",
+            width: "12px",
+            height: "3px",
+            backgroundColor: "#ffffff",
+            transform: "translate(-50%, -50%) rotate(45deg)",
+            animation: "hitmarkerFade45 0.6s ease-out forwards",
+            boxShadow: "0 0 8px rgba(255, 255, 255, 0.8)",
+            borderRadius: "1px"
+          }
+        })]
+      }, hitmarker.id);
+    }), _toConsumableArray(Array(12)).map(function (_, index) {
+      return jsx("div", {
+        style: {
+          position: "absolute",
+          left: "".concat(Math.random() * 100, "%"),
+          width: "".concat(Math.random() * 4 + 2, "px"),
+          height: "".concat(Math.random() * 4 + 2, "px"),
+          borderRadius: "50%",
+          background: ["#7aa2f7", "#bb9af7", "#9ece6a", "#73daca", "#7dcfff", "#f7768e", "#e0af68", "#2ac3de"][index % 8],
+          opacity: 0,
+          animation: "floatUp ".concat(8 + Math.random() * 4, "s linear infinite"),
+          animationDelay: "".concat(Math.random() * 8, "s"),
+          pointerEvents: "none"
+        }
+      }, "particle-".concat(index));
+    }), _toConsumableArray(Array(8)).map(function (_, index) {
+      return jsx(AnimatedBubble, {
+        index: index
+      }, index);
+    }), jsx(CenterLogo, {
+      containerRef: containerRef,
+      onHitmarker: createHitmarker
+    }), jsx(DvdLogo, {
+      parentRef: containerRef,
+      scale: 0.08
+    }), jsx(StatusOverlay, {
+      status: status,
+      message: message,
+      percentage: percentage,
+      error: error,
+      onRetry: onRetry
+    }), jsx("div", {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: "\n            radial-gradient(circle at 20% 80%, rgba(122, 162, 247, 0.03) 0%, transparent 50%),\n            radial-gradient(circle at 80% 20%, rgba(187, 154, 247, 0.03) 0%, transparent 50%),\n            radial-gradient(circle at 40% 40%, rgba(158, 206, 106, 0.02) 0%, transparent 50%)\n          ",
+        pointerEvents: "none"
+      }
+    })]
+  });
+};
+
+export { IdleScreen, IdleScreen as default };
+//# sourceMappingURL=IdleScreen.js.map