@streamlayer/react 1.22.2 → 1.23.0

package/lib/es/index12.js

@@ -1,183 +1,319 @@
-import { s } from "./sl-types.js";
-import { Q as n } from "./useStreamLayerApp2.js";
-import { jsxs as a, jsx as i, Fragment as O } from "react/jsx-runtime";
-import { memo as b, useMemo as x } from "react";
-import { E as C } from "./index13.js";
-import { B as H } from "./index6.js";
-const ae = {
-  [n.TWEET]: { label: "Insight", iconName: "icon-insight" },
-  [n.PROMOTION]: { label: "Insight", iconName: "icon-insight" },
-  [n.UNSET]: void 0,
-  [n.FACTOID]: { label: "Insight", iconName: "icon-insight" },
-  [n.POLL]: { label: "Poll", iconName: "icon-poll" },
-  [n.TRIVIA]: { label: "Trivia", iconName: "icon-trivia" },
-  [n.PREDICTION]: { label: "Prediction", iconName: "icon-prediction" }
-}, ne = {
-  [n.TWEET]: "Learn more",
-  [n.FACTOID]: "Learn more",
-  [n.POLL]: "Answer",
-  [n.TRIVIA]: "Answer",
-  [n.PREDICTION]: "Answer",
-  [n.PROMOTION]: "",
-  [n.UNSET]: ""
-}, le = (t) => t.split(/\s+/).map((l) => l[0]).join("").toUpperCase(), oe = (t) => t ? t.toLocaleString("en-US") : "0", P = (t) => {
-  const l = new Date(t);
-  if (!l)
-    return "";
-  const m = /* @__PURE__ */ new Date(), o = Math.floor(m.getTime() - l.getTime());
-  return o < 6e4 ? `${Math.floor(o / 1e3)}s` : o < 36e5 ? `${Math.floor(o / 6e4)}m` : o < 864e5 ? `${Math.floor(o / 36e5)}h` : l.getFullYear() === m.getFullYear() ? `${l.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric"
-  })}` : `${l.toLocaleDateString("en-US", {
-    month: "2-digit",
-    day: "2-digit",
-    year: "2-digit"
-  })}`;
-}, M = /* @__PURE__ */ s("div")({
-  name: "Container",
-  class: "cjq447q",
-  propsAsIs: !1
-}), R = /* @__PURE__ */ s("div")({
-  name: "ImageContainer",
-  class: "i14egogb",
+import { jsxs as S, jsx as e, Fragment as re } from "react/jsx-runtime";
+import { s as o, c as X } from "./sl-types.js";
+import { useState as I, useEffect as b, useCallback as w, forwardRef as ce, useRef as L } from "react";
+import { B as f } from "./index6.js";
+import { G as ie, d as ue, O as de } from "./index13.js";
+import { C as pe } from "./useStreamLayerApp2.js";
+const me = /* @__PURE__ */ o("div")({
+  name: "CloseIconWrap",
+  class: "c3v6bv6",
   propsAsIs: !1
-}), F = /* @__PURE__ */ s("img")({
-  name: "Image",
-  class: "i2g9g4l",
+}), ye = /* @__PURE__ */ o("div")({
+  name: "TimerWrap",
+  class: "teuhmro",
   propsAsIs: !1
-}), j = () => H, V = /* @__PURE__ */ s(j())({
-  name: "TwitterIcon",
-  class: "t1c454nm",
+}), he = () => f, fe = /* @__PURE__ */ o(he())({
+  name: "Icon",
+  class: "i17rfxv5",
   propsAsIs: !0
-}), _ = /* @__PURE__ */ s("div")({
-  name: "Details",
-  class: "d11nigc3",
-  propsAsIs: !1
-}), z = /* @__PURE__ */ s("div")({
-  name: "Name",
-  class: "nrxa4k8",
-  propsAsIs: !1
-}), B = /* @__PURE__ */ s("div")({
-  name: "UserNameAndDate",
-  class: "u1p051g3",
-  propsAsIs: !1
-}), k = ({ image: t, name: l, userName: m, verified: o, createdTweet: p }) => {
-  const r = p && P(p);
-  return /* @__PURE__ */ a(M, { children: [
-    t && /* @__PURE__ */ a(R, { children: [
-      /* @__PURE__ */ i(F, { className: "SL_AccountImage", src: t }),
-      /* @__PURE__ */ i(V, { name: "twitter" })
-    ] }),
-    /* @__PURE__ */ a(_, { children: [
-      l && /* @__PURE__ */ a(z, { className: "SL_TweetAccountName", children: [
-        l,
-        " ",
-        o && /* @__PURE__ */ i(H, { name: "icon-twitter-verified" })
-      ] }),
-      m && /* @__PURE__ */ a(B, { className: "SL_TweetAccountUserName", children: [
-        "@",
-        m,
-        " ",
-        r && `･ ${r}`
-      ] })
-    ] })
-  ] });
-}, q = /* @__PURE__ */ s("div")({
+}), Ye = ({
+  close: n,
+  className: a,
+  timerClassName: s,
+  skipIcon: l,
+  isPlaying: u = !0,
+  duration: i = 0,
+  autoClose: d
+}) => {
+  const [p, m] = I(i === 0);
+  b(() => {
+    m(!i);
+  }, [i]);
+  const P = w(() => {
+    d === pe.ENABLED ? n == null || n() : m(!0);
+  }, [d, n]);
+  return p ? /* @__PURE__ */ S(me, {
+    "data-a": "intr",
+    onClick: n,
+    className: a,
+    style: l ? {
+      width: "auto"
+    } : {},
+    children: [l && /* @__PURE__ */ e("span", {
+      "data-a": "intr",
+      children: "Skip"
+    }), /* @__PURE__ */ e(fe, {
+      "data-a": "intr",
+      name: l ? "iconSkip" : "icon-cross"
+    })]
+  }) : /* @__PURE__ */ e(ye, {
+    children: /* @__PURE__ */ e(ie, {
+      className: s,
+      isPlaying: u,
+      duration: i,
+      onTimerExpired: P
+    })
+  });
+}, ge = /* @__PURE__ */ o("div")({
   name: "Container",
-  class: "c1kzqw87",
+  class: "c1bgb86j",
   propsAsIs: !1
-}), Q = /* @__PURE__ */ s("div")({
-  name: "Details",
-  class: "d9r1hf9",
+}), Ie = /* @__PURE__ */ o("video")({
+  name: "Player",
+  class: "p6703cq",
   propsAsIs: !1
-}), W = /* @__PURE__ */ s("div")({
-  name: "Body",
-  class: "bezygt5",
+}), be = /* @__PURE__ */ o("img")({
+  name: "Poster",
+  class: "p12ow7zo",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("div")({
-  name: "ImagesContainer",
-  class: "i1y8f7ym",
+}), R = /* @__PURE__ */ o("div")({
+  name: "Control",
+  class: "cdpal9o",
   propsAsIs: !1
-}), v = /* @__PURE__ */ s("div")({
-  name: "ImagesBlock",
-  class: "i18gwonx",
+}), Pe = "t1xke4ml", ve = "h1yzxv57", Ae = /* @__PURE__ */ o("div")({
+  name: "VideoControls",
+  class: "vxo8xch",
   propsAsIs: !1
-}), L = /* @__PURE__ */ s("img")({
-  name: "Image",
-  class: "i3g0xjd",
+}), $ = /* @__PURE__ */ o("button")({
+  name: "ControlBtn",
+  class: "coyuzu0",
   propsAsIs: !1
-}), Y = () => L, c = /* @__PURE__ */ s(Y())({
-  name: "ImageFullSize",
-  class: "io8rt7p",
+}), Ce = () => $, we = /* @__PURE__ */ o(Ce())({
+  name: "MuteIcon",
+  class: "musmi9a",
+  propsAsIs: !0
+}), Me = () => $, ke = /* @__PURE__ */ o(Me())({
+  name: "PauseIcon",
+  class: "p1qe7rum",
   propsAsIs: !0
-}), G = () => L, I = /* @__PURE__ */ s(G())({
-  name: "ImageHalfSize",
-  class: "i4hn3ox",
+}), Ee = () => $, xe = /* @__PURE__ */ o(Ee())({
+  name: "PlayIcon",
+  class: "psevery",
   propsAsIs: !0
-}), J = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), K = (t) => t == null ? void 0 : t.replace(J, ""), re = b(
-  ({ image: t, body: l, muted: m, account: o, accountVerified: p, tweet: r, isDetail: h, controlVideo: S }) => {
-    var A, f, T, N, U;
-    const e = (f = (A = r == null ? void 0 : r.meta) == null ? void 0 : A.extendedEntities) == null ? void 0 : f.media, g = e == null ? void 0 : e.find(({ type: u }) => u === "photo"), $ = x(() => {
-      var u, w, D, y;
-      return (y = (D = (w = (u = e == null ? void 0 : e[0]) == null ? void 0 : u.videoInfo) == null ? void 0 : w.variants) == null ? void 0 : D.findLast(({ contentType: E }) => E === "video/mp4")) == null ? void 0 : y.url;
-    }, [e]);
-    return /* @__PURE__ */ a(q, { children: [
-      /* @__PURE__ */ a(Q, { children: [
-        /* @__PURE__ */ i(
-          k,
-          {
-            image: t,
-            name: (T = r == null ? void 0 : r.meta) == null ? void 0 : T.accountName,
-            userName: o,
-            verified: p,
-            createdTweet: r == null ? void 0 : r.date
-          }
-        ),
-        /* @__PURE__ */ i(W, { children: K(l) }),
-        !h && g && /* @__PURE__ */ i(d, { children: /* @__PURE__ */ i(c, { src: e == null ? void 0 : e[0].mediaUrlHttps }) }),
-        h && g && /* @__PURE__ */ a(O, { children: [
-          (e == null ? void 0 : e.length) === 1 && /* @__PURE__ */ i(d, { children: /* @__PURE__ */ i(c, { src: e[0].mediaUrlHttps }) }),
-          (e == null ? void 0 : e.length) === 2 && /* @__PURE__ */ a(d, { children: [
-            /* @__PURE__ */ i(I, { src: e[0].mediaUrlHttps }),
-            /* @__PURE__ */ i(I, { src: e[1].mediaUrlHttps })
-          ] }),
-          (e == null ? void 0 : e.length) === 3 && /* @__PURE__ */ a(d, { children: [
-            /* @__PURE__ */ i(I, { src: e[0].mediaUrlHttps }),
-            /* @__PURE__ */ a(v, { children: [
-              /* @__PURE__ */ i(c, { src: e[1].mediaUrlHttps }),
-              /* @__PURE__ */ i(c, { src: e[2].mediaUrlHttps })
-            ] })
-          ] }),
-          (e == null ? void 0 : e.length) === 4 && /* @__PURE__ */ a(d, { children: [
-            /* @__PURE__ */ a(v, { children: [
-              /* @__PURE__ */ i(c, { src: e[0].mediaUrlHttps }),
-              /* @__PURE__ */ i(c, { src: e[1].mediaUrlHttps })
-            ] }),
-            /* @__PURE__ */ a(v, { children: [
-              /* @__PURE__ */ i(c, { src: e[2].mediaUrlHttps }),
-              /* @__PURE__ */ i(c, { src: e[3].mediaUrlHttps })
-            ] })
-          ] })
-        ] })
-      ] }),
-      !g && (((N = e == null ? void 0 : e[0]) == null ? void 0 : N.type) === "video" || ((U = e == null ? void 0 : e[0]) == null ? void 0 : U.type) === "animated_gif") && $ && /* @__PURE__ */ i(
-        C,
-        {
-          muted: m,
-          source: $,
-          poster: e[0].mediaUrlHttps,
-          controlVideo: S
+}), Y = /* @__PURE__ */ o("button")({
+  name: "WebOSIconButton",
+  class: "w1q3u7py",
+  propsAsIs: !1
+}), Be = () => Y, T = /* @__PURE__ */ o(Be())({
+  name: "WebOSIconButtonAnimation",
+  class: "wdlqvum",
+  propsAsIs: !0
+}), Oe = () => T, We = /* @__PURE__ */ o(Oe())({
+  name: "WebOSIconButtonPlay",
+  class: "w1ylz9ea",
+  propsAsIs: !0
+}), Ne = () => T, Ve = /* @__PURE__ */ o(Ne())({
+  name: "WebOSIconButtonPause",
+  class: "w1iylt55",
+  propsAsIs: !0
+}), Le = () => T, Re = /* @__PURE__ */ o(Le())({
+  name: "WebOSIconButtonMute",
+  class: "w8h4h7",
+  propsAsIs: !0
+}), Se = () => T, Te = /* @__PURE__ */ o(Se())({
+  name: "WebOSIconButtonUnmute",
+  class: "w12l12kt",
+  propsAsIs: !0
+}), Ue = (n) => {
+  for (const a of n)
+    a.isIntersecting ? a.target instanceof HTMLVideoElement && a.target.autoplay && a.target.play() : a.target instanceof HTMLVideoElement && !a.target.paused && a.target.pause();
+}, Z = new IntersectionObserver(Ue, { threshold: 0.5 }), D = /* @__PURE__ */ new Set(), je = (n) => {
+  Z.observe(n), D.add(n);
+}, qe = (n) => {
+  Z.unobserve(n), D.delete(n);
+}, ze = () => {
+  for (const n of D)
+    n instanceof HTMLVideoElement && !n.paused && n.pause();
+};
+function He(...n) {
+  return w(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (a) => {
+      for (const s of n)
+        s !== null && (typeof s == "function" ? s(a) : s && (s.current = a));
+    },
+    // Re-run the callback if the array of refs changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [...n]
+  );
+}
+const $e = de(ge), De = ({ loading: n, autoPlay: a, played: s, playing: l, isMuted: u, unmute: i, mute: d, togglePlaying: p }) => !n && !a && !s ? /* @__PURE__ */ e(R, { children: l ? /* @__PURE__ */ e(f, { name: "icon-pause" }) : /* @__PURE__ */ e(f, { name: "icon-play" }) }) : s ? /* @__PURE__ */ S(Ae, { children: [
+  l ? /* @__PURE__ */ e(ke, { onClick: p }) : /* @__PURE__ */ e(xe, { onClick: p }),
+  /* @__PURE__ */ e(we, { className: X(!u && "muted"), onClick: u ? i : d })
+] }) : null, Fe = ({
+  loading: n,
+  autoPlay: a,
+  playMuted: s,
+  playing: l,
+  played: u,
+  unmute: i,
+  mute: d,
+  isMuted: p,
+  hasNotPausedVideo: m,
+  hasInteractedWithAudio: P
+}) => /* @__PURE__ */ S(re, { children: [
+  !n && !(a && s) && /* @__PURE__ */ e(R, { "data-control-btn": "true", children: l ? m ? null : /* @__PURE__ */ e(We, { children: /* @__PURE__ */ e(f, { name: "icon-play" }) }) : u ? /* @__PURE__ */ e(Ve, { children: /* @__PURE__ */ e(f, { name: "icon-pause" }) }) : /* @__PURE__ */ e(Y, { "data-control-icon": "true", children: /* @__PURE__ */ e(f, { name: "icon-play" }) }) }),
+  !n && a && s && P && /* @__PURE__ */ e(R, { children: p ? /* @__PURE__ */ e(Re, { onClick: i, children: /* @__PURE__ */ e(f, { name: "iconMute" }) }) : /* @__PURE__ */ e(Te, { onClick: d, children: /* @__PURE__ */ e(f, { name: "iconUnMute" }) }) })
+] }), Ze = ce(
+  ({
+    poster: n,
+    source: a,
+    aspectRatio: s,
+    controlVideo: l,
+    onReplay: u,
+    onPlay: i,
+    onPause: d,
+    onEnd: p,
+    onRender: m,
+    onMute: P,
+    onQuartile: v,
+    autoPlay: M,
+    playMuted: k,
+    className: ee,
+    muted: E,
+    webos: B,
+    hasNotPausedVideo: ne
+  }, te) => {
+    const c = L(null), ae = He(c, te), U = L(!1), j = L(!1), y = L(/* @__PURE__ */ new Set()), [F, G] = I(!1), [O, W] = I(!1), [q, Q] = I(!1), [_, N] = I(!0), [z, V] = I(k), [H, oe] = I(!1);
+    b(() => {
+      a && (V(k), G(!1));
+    }, [a]);
+    const A = w(() => {
+      l == null || l({ muted: !1 });
+    }, [l]), J = w(() => {
+      l == null || l({ muted: !0 });
+    }, [l]), C = w((t) => {
+      t == null || t.stopPropagation(), c.current && (c.current.muted = !0), V(!0);
+    }, []), x = w(
+      (t) => {
+        t == null || t.stopPropagation(), c.current && (c.current.muted = !1), V(!1), H || oe(!0);
+      },
+      [H]
+    );
+    b(() => {
+      E !== void 0 && (E ? C() : x());
+    }, [C, E, x]);
+    const K = (t) => {
+      var r;
+      (r = t.stopPropagation) == null || r.call(t);
+      const g = c == null ? void 0 : c.current;
+      if (g)
+        if (O)
+          g.pause();
+        else {
+          const h = c == null ? void 0 : c.current;
+          if (!h)
+            return;
+          ze(), h.play().catch((le) => console.log(le)), N(!1);
         }
-      )
-    ] });
+    }, se = () => {
+      var t;
+      (t = c == null ? void 0 : c.current) == null || t.load(), N(!0);
+    };
+    return b(() => () => {
+      A();
+    }, [A]), b(() => {
+      const t = c.current;
+      return t ? (j.current = t.muted, V(t.muted), je(t), () => {
+        qe(t);
+      }) : () => {
+      };
+    }, []), b(() => {
+      m == null || m();
+    }, [m]), b(() => {
+      y.current.clear(), U.current = !1;
+    }, [a]), /* @__PURE__ */ S(
+      $e,
+      {
+        webos: B,
+        onClick: M && k ? z ? x : C : K,
+        "data-a": "intr",
+        autoFocus: !0,
+        options: { focusKey: "video-play-btn" },
+        className: X(O && !B && Pe, M && ve, ee),
+        style: s ? { aspectRatio: s } : {},
+        children: [
+          /* @__PURE__ */ e(
+            Ie,
+            {
+              ref: ae,
+              src: a,
+              autoPlay: M,
+              onPlay: () => {
+                G(!0), U.current && (u == null || u(), y.current.clear()), W(!0), N(!1), i == null || i(), k ? C() : J();
+              },
+              onTimeUpdate: (t) => {
+                const r = t.target.duration, g = t.target.currentTime;
+                if (r && g) {
+                  const h = Math.floor(g / r * 100);
+                  h >= 25 && h < 50 && !y.current.has(25) ? (v == null || v(25), y.current.add(25)) : h >= 50 && h < 75 && !y.current.has(50) ? (v == null || v(50), y.current.add(50)) : h >= 75 && !y.current.has(75) && (v == null || v(75), y.current.add(75));
+                }
+              },
+              onVolumeChange: (t) => {
+                const r = t.target.muted;
+                j.current !== r && (P == null || P(r), j.current = r, (r !== E || E === void 0) && (r ? A() : J()));
+              },
+              onError: async (t) => {
+                try {
+                  if (t.target instanceof HTMLVideoElement) {
+                    Q(!0);
+                    const r = await (await fetch(t.target.src)).blob(), g = URL.createObjectURL(r);
+                    t.target.src = g;
+                  }
+                } catch (r) {
+                  console.error("video fallback fetch failed", r), W(!0), N(!0);
+                } finally {
+                  Q(!1), A();
+                }
+              },
+              onPause: () => {
+                W(!1), d == null || d(), A();
+              },
+              onEnded: () => {
+                W(!1), U.current = !0, se(), p == null || p(), A();
+              },
+              style: { visibility: _ ? "hidden" : "visible" },
+              controls: !1,
+              playsInline: !0
+            }
+          ),
+          /* @__PURE__ */ e(be, { src: n, style: { visibility: _ ? "visible" : "hidden" } }),
+          !B && /* @__PURE__ */ e(
+            De,
+            {
+              loading: q,
+              autoPlay: M,
+              played: F,
+              playing: O,
+              isMuted: z,
+              unmute: x,
+              mute: C,
+              togglePlaying: K
+            }
+          ),
+          B && /* @__PURE__ */ e(
+            Fe,
+            {
+              loading: q,
+              autoPlay: M,
+              playMuted: k,
+              playing: O,
+              played: F,
+              unmute: x,
+              mute: C,
+              isMuted: z,
+              hasNotPausedVideo: ne,
+              hasInteractedWithAudio: H
+            }
+          ),
+          q && /* @__PURE__ */ e(R, { children: /* @__PURE__ */ e(ue, {}) })
+        ]
+      }
+    );
   }
 );
 export {
-  k as D,
-  le as I,
-  K as a,
-  re as b,
-  ae as e,
-  ne as o,
-  oe as s
+  Ze as E,
+  ze as w,
+  Ye as y
 };