@streamlayer/react 0.0.1-debug.1

package/lib/es/pause-ad.js

@@ -0,0 +1,253 @@
+import { jsx as o, jsxs as I } from "react/jsx-runtime";
+import { j as K, k as V, s as p, e as L, l as F, n as M, f as _, u as $, d as j, h as q } from "./provider.js";
+import "nanostores";
+import { useRef as x, useCallback as k, useState as C, useEffect as b, Component as z } from "react";
+import "lodash.throttle";
+import "react-dom";
+import "react-countup";
+import { c as N } from "./vast-client.min-B0NUra1B.js";
+const G = {}, H = new N(), w = V(G), E = K("ui:gam-static"), R = (r) => new Promise((e, n) => {
+  const s = new Image();
+  s.onload = () => e(r), s.onerror = () => n(), s.src = r;
+}), D = () => {
+  const r = x(0);
+  return [k(async (e) => {
+    var n, s, c, a, l, t, u, i, h, m, f;
+    if ((n = w.get()[e]) != null && n.imageSrc)
+      return { success: !0 };
+    const v = Date.now();
+    r.current = v, w.setKey(e, { url: e });
+    try {
+      const d = await H.get(e);
+      if (E.debug(d, "parsedVAST"), r.current === v && w.get()[e].url) {
+        const y = d.ads.find((g) => g.creatives.length > 0);
+        if (y) {
+          E.debug(y, "validAd");
+          const g = y.creatives.find((S) => S.type === "nonlinear");
+          if (g) {
+            E.debug(g, "nonlinear");
+            const S = (c = (s = g.variations) == null ? void 0 : s[0]) == null ? void 0 : c.staticResource, B = (l = (a = g.variations) == null ? void 0 : a[0]) == null ? void 0 : l.nonlinearClickThroughURLTemplate;
+            if (S)
+              return await R(S), w.setKey(e, { url: e, imageSrc: S, adUrl: B }), { success: !0 };
+          }
+          const A = y.creatives.find((S) => S.type === "companion");
+          E.debug(A, "companion");
+          const T = (h = (i = (u = (t = A == null ? void 0 : A.variations) == null ? void 0 : t[0]) == null ? void 0 : u.staticResources) == null ? void 0 : i[0]) == null ? void 0 : h.url, P = (f = (m = A == null ? void 0 : A.variations) == null ? void 0 : m[0]) == null ? void 0 : f.companionClickThroughURLTemplate;
+          if (T)
+            return await R(T), w.setKey(e, { url: e, imageSrc: T, adUrl: P }), { success: !0 };
+        }
+      }
+    } catch (d) {
+      console.error("Error parsing VAST", d);
+    }
+    return { success: !1 };
+  }, []), w];
+}, O = /* @__PURE__ */ p("div")({
+  name: "PauseAdOverlay",
+  class: "pw9gih8",
+  propsAsIs: !1
+}), J = /* @__PURE__ */ p("div")({
+  name: "PauseAdContent",
+  class: "p8lpomy",
+  propsAsIs: !1
+}), Q = /* @__PURE__ */ p("div")({
+  name: "PauseAdGradientRight",
+  class: "pv7u167",
+  propsAsIs: !1
+}), W = /* @__PURE__ */ p("div")({
+  name: "PauseAdGradientBottom",
+  class: "p1kh2yb0",
+  propsAsIs: !1
+}), X = /* @__PURE__ */ p("div")({
+  name: "PauseAdTopLeft",
+  class: "pl8f94x",
+  propsAsIs: !1
+}), Y = /* @__PURE__ */ p("h2")({
+  name: "PauseAdTitle",
+  class: "p1m6zmrt",
+  propsAsIs: !1
+}), Z = /* @__PURE__ */ p("p")({
+  name: "PauseAdCaption",
+  class: "pm3vwfa",
+  propsAsIs: !1
+}), ee = /* @__PURE__ */ p("div")({
+  name: "PauseAdBottomLeft",
+  class: "p1tibuhw",
+  propsAsIs: !1
+}), re = /* @__PURE__ */ p("button")({
+  name: "PauseAdPlayButton",
+  class: "ptqqrqd",
+  propsAsIs: !1
+}), se = /* @__PURE__ */ p("div")({
+  name: "PauseAdSidebar",
+  class: "p14estxv",
+  propsAsIs: !1
+}), te = /* @__PURE__ */ p("span")({
+  name: "PauseAdTitleDescription",
+  class: "p1dpvfl1",
+  propsAsIs: !1
+}), U = /* @__PURE__ */ p("img")({
+  name: "ExternalAdContainer",
+  class: "ezfmabr",
+  propsAsIs: !1
+}), ne = ({ vastUrl: r }) => {
+  var e;
+  const [, n] = D(), s = _(n, { keys: [r] });
+  return (e = s == null ? void 0 : s[r]) != null && e.imageSrc ? s[r].adUrl ? /* @__PURE__ */ o("a", { href: s[r].adUrl, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ o(U, { src: s[r].imageSrc }) }) : /* @__PURE__ */ o(U, { src: s[r].imageSrc }) : null;
+}, oe = ({ isClosing: r, title: e, caption: n, onPlay: s, onClose: c, vastUrl: a, options: l }) => {
+  const t = (l == null ? void 0 : l.showPauseButton) ?? !0, { ref: u, focusSelf: i } = F.useFocusable({
+    focusKey: "sl-pause-ad-play",
+    onEnterRelease: s,
+    isFocusBoundary: !0,
+    forceFocus: !0
+  });
+  return b(() => {
+    u.current && i();
+  }, [u, i]), b(() => {
+    const h = (m) => {
+      const f = m.keyCode;
+      if (f === 461 || f === 10009 || f === 27 || f === 8) {
+        m.preventDefault(), m.stopPropagation(), m.stopImmediatePropagation(), c == null || c();
+        return;
+      }
+    };
+    return window.addEventListener("keydown", h, { capture: !0 }), () => window.removeEventListener("keydown", h, { capture: !0 });
+  }, [c]), /* @__PURE__ */ o(O, { className: M(r && "pause-ad-closing"), children: /* @__PURE__ */ I(J, { children: [
+    /* @__PURE__ */ o(Q, {}),
+    /* @__PURE__ */ o(W, {}),
+    /* @__PURE__ */ I(X, { children: [
+      /* @__PURE__ */ o(Y, { children: e }),
+      /* @__PURE__ */ o(Z, { children: n })
+    ] }),
+    t && /* @__PURE__ */ o(ee, { children: /* @__PURE__ */ o(
+      re,
+      {
+        ref: u,
+        onClick: s,
+        onMouseEnter: () => u.current.focus(),
+        "aria-label": "Resume playback"
+      }
+    ) }),
+    /* @__PURE__ */ I(se, { children: [
+      a && /* @__PURE__ */ o(ne, { vastUrl: a }),
+      /* @__PURE__ */ o(te, { children: "ADVERTISEMENT" })
+    ] })
+  ] }) });
+}, ae = ({
+  showPauseAd: r,
+  vastUrls: e,
+  title: n,
+  caption: s,
+  onPlay: c,
+  onClose: a,
+  onRender: l,
+  options: t
+}) => {
+  const u = (t == null ? void 0 : t.pauseAdDelay) ?? 5e3, [i, h] = C(!1), [m, f] = C(!1), v = x(), d = e == null ? void 0 : e[0].url, y = x(d);
+  y.current = d;
+  const [g, A] = D();
+  return b(() => {
+    if (r && d) {
+      L.emit("exposedPauseAd", {
+        action: "enabled",
+        payload: {}
+      }), g(d).then((P) => {
+        y.current === d && (P == null ? void 0 : P.success) !== !0 && (clearTimeout(v.current), a == null || a());
+      }).catch(() => {
+        y.current === d && (clearTimeout(v.current), a == null || a());
+      });
+      const T = () => {
+        var P;
+        (P = A.get()[y.current]) != null && P.imageSrc ? (clearTimeout(v.current), f(!1), h(!0), L.emit("exposedPauseAd", {
+          action: "rendered",
+          payload: {}
+        })) : v.current = setTimeout(() => {
+          T();
+        }, 200);
+      };
+      v.current = setTimeout(() => {
+        T();
+      }, u);
+    } else
+      L.emit("exposedPauseAd", {
+        action: "disabled",
+        payload: {}
+      }), f(!0), v.current = setTimeout(() => {
+        h(!1);
+      }, 400);
+    return () => {
+      v.current && clearTimeout(v.current);
+    };
+  }, [A, g, a, u, r, d]), b(() => {
+    l == null || l({ rendered: i });
+  }, [i, l]), b(() => () => {
+    l == null || l({ rendered: !1 });
+  }, [l]), i ? /* @__PURE__ */ o(
+    oe,
+    {
+      onClose: a,
+      isClosing: m,
+      title: n,
+      caption: s,
+      onPlay: c,
+      vastUrl: d,
+      options: t
+    }
+  ) : null;
+}, le = ({
+  showPauseAd: r,
+  pauseAdVastUrl: e,
+  videoPlayerController: n,
+  onRenderPauseAd: s,
+  onClosePauseAd: c,
+  children: a,
+  options: l
+}) => {
+  const t = $(), u = j(), i = x(), h = k(() => {
+    c == null || c();
+  }, [c]), m = k(() => {
+    t == null || t.controlVideoPlayer({ play: !0 });
+  }, [t]);
+  return b(() => t ? (n && (i.current = n, t.addVideoPlayerController(i.current)), () => {
+    i.current && t.removeVideoPlayerController(i.current);
+  }) : () => {
+  }, [t, n]), t ? /* @__PURE__ */ o("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ I(
+    q,
+    {
+      style: { position: "relative" },
+      customTheme: u.theme,
+      themeMode: u.themeMode,
+      children: [
+        a,
+        e && /* @__PURE__ */ o(
+          ae,
+          {
+            showPauseAd: r,
+            vastUrls: e,
+            onClose: h,
+            onRender: s,
+            onPlay: m,
+            options: l
+          }
+        )
+      ]
+    }
+  ) }) : a;
+};
+class fe extends z {
+  constructor(e) {
+    super(e), this.state = { hasError: !1 };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: !0 };
+  }
+  componentDidCatch(e, n) {
+    console.error(e, n.componentStack);
+  }
+  render() {
+    return this.state.hasError ? this.props.children : /* @__PURE__ */ o(le, { ...this.props });
+  }
+}
+export {
+  fe as StreamLayerPauseAd
+};

package/lib/es/points.js

@@ -0,0 +1,76 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { useState as u, useEffect as d } from "react";
+import "nanostores";
+import { s as a, B as y, m as h, i as S, f, F as c, e as r, u as v, d as g, h as k } from "./provider.js";
+import "lodash.throttle";
+import "react-dom";
+import "react-countup";
+import { S as A } from "./useStreamLayerApp2.js";
+const I = /* @__PURE__ */ a("div")({
+  name: "PointsContainer",
+  class: "psiob9b",
+  propsAsIs: !1
+}), P = /* @__PURE__ */ a("div")({
+  name: "PointsIcon",
+  class: "p1gqe4lh",
+  propsAsIs: !1
+}), b = () => y, T = /* @__PURE__ */ a(b())({
+  name: "PointsSvg",
+  class: "p15syg2y",
+  propsAsIs: !0
+}), F = /* @__PURE__ */ a("div")({
+  name: "PointsBody",
+  class: "p12n4f2h",
+  propsAsIs: !1
+}), L = /* @__PURE__ */ a("div")({
+  name: "PointsTitle",
+  class: "poqmx89",
+  propsAsIs: !1
+}), x = /* @__PURE__ */ a("div")({
+  name: "PointsValue",
+  class: "prj9b3v",
+  propsAsIs: !1
+}), B = ({ points: s, onClick: e }) => /* @__PURE__ */ m(I, { className: h, onClick: e, children: [
+  /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(T, { name: "icon-trophy-solid" }) }),
+  /* @__PURE__ */ m(F, { children: [
+    /* @__PURE__ */ t(L, { children: "Total points" }),
+    /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(S, { value: s }) })
+  ] })
+] }), C = ({ gamification: s }) => {
+  const e = s.userSummary.$store, [o, l] = u(0);
+  return d(() => {
+    const n = e.subscribe((i) => {
+      var p;
+      (p = i == null ? void 0 : i.summary) != null && p.points && l(i.summary.points);
+    });
+    return () => {
+      n();
+    };
+  }, [e]), /* @__PURE__ */ t(B, { points: o, onClick: () => {
+    const n = s.status.get();
+    n === c.Suspended ? (s.openFeature(), r.emit("app", {
+      action: "open",
+      payload: {}
+    }), r.emit("interactions", {
+      action: "tap",
+      payload: {}
+    })) : n === c.Ready && (s.closeFeature(!1), r.emit("app", {
+      action: "close",
+      payload: {}
+    }), r.emit("interactions", {
+      action: "tap",
+      payload: {}
+    }));
+  } });
+}, j = ({ sdk: s }) => {
+  if (!f(s.featuresList.getStore()))
+    return null;
+  const e = s.getFeature(A.GAMES);
+  return e ? /* @__PURE__ */ t(C, { gamification: e }) : null;
+}, R = ({ theme: s }) => {
+  const e = v(), o = g();
+  return e ? /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ t(k, { customTheme: s ?? o.theme, themeMode: o.themeMode, children: /* @__PURE__ */ t(j, { sdk: e }) }) }) : null;
+};
+export {
+  R as StreamLayerSDKPoints
+};