@streamlayer/react 1.24.6 → 1.24.8-pre.11da316

package/lib/es/utils.js

@@ -1,22 +1,63 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useState as d, useMemo as c, useEffect as p } from "react";
-const u = `
+import { jsx as p } from "react/jsx-runtime";
+import { useState as m, useMemo as l, useEffect as u } from "react";
+const f = `
   .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 > * {
+`, g = ({
+  containerId: r = "SlLayoutContainer",
+  url: i,
+  isOverlay: s = !1,
+  hiding: e = !1
+}) => {
+  const t = r || "SlLayoutContainer", a = e ? "fade-sl-bg-out 750ms cubic-bezier(0.66, 0, 0.34, 1) forwards" : "fade-sl-bg-in 750ms cubic-bezier(0.66, 0, 0.34, 1) forwards";
+  return s ? `
+      .PromoOverlayContainer {
+        position: relative;
+      }
+
+      .PromoOverlayContainer::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: ${i} !important;
+        z-index: 0;
+
+        opacity: ${e ? 1 : 0};
+        animation: ${a};
+      }
+
+      .PromoOverlayContainer > div {
+        position: relative;
+        z-index: 1;
+      }
+
+      @keyframes fade-sl-bg-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+
+      @keyframes fade-sl-bg-out {
+        from { opacity: 1; }
+        to { opacity: 0; }
+      }
+    ` : `
+  #${t},
+  #${t} .StreamLayerSDK>.StreamLayerSDKTheme > * {
     --color-sdk-container-bg: transparent !important;
   }
 
-  #${o || "SlLayoutContainer"}::before {
+  #${t}::before {
     content: '';
     display: block;
     position: absolute;
@@ -27,50 +68,54 @@ const u = `
     background-size: cover !important;
     background-position: center !important;
     background-repeat: no-repeat !important;
-    background-image: ${e} !important;
+    background-image: ${i} !important;
     z-index: 0;
 
-    opacity: 0;
-    animation: fade-sl-bg-in 0.3s linear forwards;
+    opacity: ${e ? 1 : 0};
+    animation: ${a};
   }
 
-  #${o || "SlLayoutContainer"} > div {
+  #${t} > div {
     position: relative;
     z-index: 1;
   }
 
   @keyframes fade-sl-bg-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
+    from { opacity: 0; }
+    to { opacity: 1; }
   }
 
-  ${u}
-`, g = ({
-  containerId: o,
-  landscapeUrl: e,
-  portraitUrl: r
+  @keyframes fade-sl-bg-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+
+  ${f}
+`;
+}, k = ({
+  containerId: r,
+  landscapeUrl: i,
+  portraitUrl: s,
+  isOverlay: e = !1,
+  hiding: t = !1
 }) => {
-  const [a, i] = d(!1), t = c(() => {
-    const n = window.innerWidth, l = window.innerHeight;
-    return i(!1), n > l ? e : r;
-  }, [e, r]);
-  return p(() => {
-    if (t) {
-      const n = new Image();
-      n.src = t, n.onload = function() {
-        i(!0);
-      };
+  const [a, c] = m(!1), n = l(() => {
+    const o = window.innerWidth, d = window.innerHeight;
+    return c(!1), o > d ? i : s;
+  }, [i, s]);
+  return u(() => {
+    if (n) {
+      const o = new Image();
+      o.onload = function() {
+        c(!0);
+      }, o.src = n;
     }
-  }, [t]), c(() => {
-    const n = t ? `url("${t}")` : void 0;
-    return n && a ? /* @__PURE__ */ s("style", { children: m({ containerId: o, url: n }) }) : null;
-  }, [o, t, a]);
+  }, [n]), l(() => {
+    const o = n ? `url("${n}")` : void 0;
+    return o && a ? /* @__PURE__ */ p("style", { children: g({ containerId: r, url: o, hiding: t, isOverlay: e }) }) : (console.log("bg empty", { url: o, loaded: a }), null);
+  }, [r, n, a, t, e]);
 };
 export {
-  u,
-  g as y
+  f,
+  k
 };