@streamlayer/react 1.21.3 → 1.22.1

package/lib/es/utils.js

@@ -0,0 +1,76 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useState as s, useMemo as c, useEffect as p } from "react";
+const u = `
+  .sl-hide-on-modal {
+    height: 0 !important;
+    opacity: 0 !important;
+    overflow: hidden !important;
+    transition: none;
+  }
+`, m = ({
+  containerId: o = "SlLayoutContainer",
+  url: e
+}) => `
+  #${o || "SlLayoutContainer"},
+  #${o || "SlLayoutContainer"} .StreamLayerSDK>.StreamLayerSDKTheme > * {
+    --color-sdk-container-bg: transparent !important;
+  }
+
+  #${o || "SlLayoutContainer"}::before {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #1a1a1a;
+    background-size: cover !important;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+    background-image: ${e} !important;
+    z-index: 0;
+
+    opacity: 0;
+    animation: fade-sl-bg-in 0.3s linear forwards;
+  }
+
+  #${o || "SlLayoutContainer"} > div {
+    position: relative;
+    z-index: 1;
+  }
+
+  @keyframes fade-sl-bg-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  ${u}
+`, g = ({
+  containerId: o,
+  landscapeUrl: e,
+  portraitUrl: r
+}) => {
+  const [a, i] = s(!1), t = c(() => {
+    const n = window.innerWidth, d = window.innerHeight;
+    return i(!1), n > d ? e : r;
+  }, [e, r]);
+  return p(() => {
+    if (t) {
+      const n = new Image();
+      n.src = t, n.onload = function() {
+        i(!0);
+      };
+    }
+  }, [t]), c(() => {
+    const n = t ? `url("${t}")` : void 0;
+    return n && a ? /* @__PURE__ */ l("style", { children: m({ containerId: o, url: n }) }) : null;
+  }, [o, t, a]);
+};
+export {
+  u,
+  g as y
+};