@streamlayer/react 1.23.0 → 1.23.2

package/lib/es/index12.js

@@ -1,319 +1,188 @@
-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
-}), ye = /* @__PURE__ */ o("div")({
-  name: "TimerWrap",
-  class: "teuhmro",
-  propsAsIs: !1
-}), he = () => f, fe = /* @__PURE__ */ o(he())({
-  name: "Icon",
-  class: "i17rfxv5",
-  propsAsIs: !0
-}), 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")({
+import { s as styled_default } from "./sl-types.js";
+import { Q as QuestionType } from "./useStreamLayerApp2.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { E as Et } from "./index13.js";
+import { B as B1 } from "./index6.js";
+const e$1 = {
+  [QuestionType.TWEET]: { label: "Insight", iconName: "icon-insight" },
+  [QuestionType.PROMOTION]: { label: "Insight", iconName: "icon-insight" },
+  [QuestionType.UNSET]: void 0,
+  [QuestionType.FACTOID]: { label: "Insight", iconName: "icon-insight" },
+  [QuestionType.POLL]: { label: "Poll", iconName: "icon-poll" },
+  [QuestionType.TRIVIA]: { label: "Trivia", iconName: "icon-trivia" },
+  [QuestionType.PREDICTION]: { label: "Prediction", iconName: "icon-prediction" }
+}, o$1 = {
+  [QuestionType.TWEET]: "Learn more",
+  [QuestionType.FACTOID]: "Learn more",
+  [QuestionType.POLL]: "Answer",
+  [QuestionType.TRIVIA]: "Answer",
+  [QuestionType.PREDICTION]: "Answer",
+  [QuestionType.PROMOTION]: "",
+  [QuestionType.UNSET]: ""
+};
+const I = (t2) => t2.split(/\s+/).map((n) => n[0]).join("").toUpperCase(), s = (t2) => t2 ? t2.toLocaleString("en-US") : "0", L = (t2) => {
+  const o2 = new Date(t2);
+  if (!o2)
+    return "";
+  const r2 = /* @__PURE__ */ new Date(), e2 = Math.floor(r2.getTime() - o2.getTime());
+  return e2 < 6e4 ? `${Math.floor(e2 / 1e3)}s` : e2 < 36e5 ? `${Math.floor(e2 / 6e4)}m` : e2 < 864e5 ? `${Math.floor(e2 / 36e5)}h` : o2.getFullYear() === r2.getFullYear() ? `${o2.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric"
+  })}` : `${o2.toLocaleDateString("en-US", {
+    month: "2-digit",
+    day: "2-digit",
+    year: "2-digit"
+  })}`;
+};
+const t$1 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
-  class: "c1bgb86j",
-  propsAsIs: !1
-}), Ie = /* @__PURE__ */ o("video")({
-  name: "Player",
-  class: "p6703cq",
-  propsAsIs: !1
-}), be = /* @__PURE__ */ o("img")({
-  name: "Poster",
-  class: "p12ow7zo",
-  propsAsIs: !1
-}), R = /* @__PURE__ */ o("div")({
-  name: "Control",
-  class: "cdpal9o",
-  propsAsIs: !1
-}), Pe = "t1xke4ml", ve = "h1yzxv57", Ae = /* @__PURE__ */ o("div")({
-  name: "VideoControls",
-  class: "vxo8xch",
-  propsAsIs: !1
-}), $ = /* @__PURE__ */ o("button")({
-  name: "ControlBtn",
-  class: "coyuzu0",
-  propsAsIs: !1
-}), Ce = () => $, we = /* @__PURE__ */ o(Ce())({
-  name: "MuteIcon",
-  class: "musmi9a",
-  propsAsIs: !0
-}), Me = () => $, ke = /* @__PURE__ */ o(Me())({
-  name: "PauseIcon",
-  class: "p1qe7rum",
-  propsAsIs: !0
-}), Ee = () => $, xe = /* @__PURE__ */ o(Ee())({
-  name: "PlayIcon",
-  class: "psevery",
-  propsAsIs: !0
-}), 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();
+  class: "cjq447q",
+  propsAsIs: false
+}), r$1 = /* @__PURE__ */ styled_default("div")({
+  name: "ImageContainer",
+  class: "i14egogb",
+  propsAsIs: false
+}), c$1 = /* @__PURE__ */ styled_default("img")({
+  name: "Image",
+  class: "i2g9g4l",
+  propsAsIs: false
+}), a$1 = () => B1, m$1 = /* @__PURE__ */ styled_default(a$1())({
+  name: "TwitterIcon",
+  class: "t1c454nm",
+  propsAsIs: true
+}), i$1 = /* @__PURE__ */ styled_default("div")({
+  name: "Details",
+  class: "d11nigc3",
+  propsAsIs: false
+}), p$1 = /* @__PURE__ */ styled_default("div")({
+  name: "Name",
+  class: "nrxa4k8",
+  propsAsIs: false
+}), l$1 = /* @__PURE__ */ styled_default("div")({
+  name: "UserNameAndDate",
+  class: "u1p051g3",
+  propsAsIs: false
+});
+const D$1 = ({ image: r2, name: c2, userName: n, verified: a2, createdTweet: o2 }) => {
+  const i2 = o2 && L(o2);
+  return /* @__PURE__ */ jsxs(t$1, { children: [
+    r2 && /* @__PURE__ */ jsxs(r$1, { children: [
+      /* @__PURE__ */ jsx(c$1, { className: "SL_AccountImage", src: r2 }),
+      /* @__PURE__ */ jsx(m$1, { name: "twitter" })
+    ] }),
+    /* @__PURE__ */ jsxs(i$1, { children: [
+      c2 && /* @__PURE__ */ jsxs(p$1, { className: "SL_TweetAccountName", children: [
+        c2,
+        " ",
+        a2 && /* @__PURE__ */ jsx(B1, { name: "icon-twitter-verified" })
+      ] }),
+      n && /* @__PURE__ */ jsxs(l$1, { className: "SL_TweetAccountUserName", children: [
+        "@",
+        n,
+        " ",
+        i2 && `･ ${i2}`
+      ] })
+    ] })
+  ] });
 };
-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);
+const l = /* @__PURE__ */ styled_default("div")({
+  name: "Container",
+  class: "c1kzqw87",
+  propsAsIs: false
+}), t = /* @__PURE__ */ styled_default("div")({
+  name: "Details",
+  class: "d9r1hf9",
+  propsAsIs: false
+}), i = /* @__PURE__ */ styled_default("div")({
+  name: "Body",
+  class: "bezygt5",
+  propsAsIs: false
+}), m = /* @__PURE__ */ styled_default("div")({
+  name: "ImagesContainer",
+  class: "i1y8f7ym",
+  propsAsIs: false
+}), c = /* @__PURE__ */ styled_default("div")({
+  name: "ImagesBlock",
+  class: "i18gwonx",
+  propsAsIs: false
+}), e = /* @__PURE__ */ styled_default("img")({
+  name: "Image",
+  class: "i3g0xjd",
+  propsAsIs: false
+}), a = () => e, p = /* @__PURE__ */ styled_default(a())({
+  name: "ImageFullSize",
+  class: "io8rt7p",
+  propsAsIs: true
+}), o = () => e, r = /* @__PURE__ */ styled_default(o())({
+  name: "ImageHalfSize",
+  class: "i4hn3ox",
+  propsAsIs: true
+});
+const A = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), D = (c2) => c2 == null ? void 0 : c2.replace(A, ""), b = memo(
+  ({ image: c$12, body: y, muted: C, account: z, accountVerified: F, tweet: n, isDetail: d, controlVideo: T }) => {
+    var h, g, H, U, f;
+    const r$12 = (g = (h = n == null ? void 0 : n.meta) == null ? void 0 : h.extendedEntities) == null ? void 0 : g.media, i$12 = r$12 == null ? void 0 : r$12.find(({ type: e2 }) => e2 === "photo"), m$12 = useMemo(() => {
+      var e2, u, v, I2;
+      return (I2 = (v = (u = (e2 = r$12 == null ? void 0 : r$12[0]) == null ? void 0 : e2.videoInfo) == null ? void 0 : u.variants) == null ? void 0 : v.findLast(({ contentType: j }) => j === "video/mp4")) == null ? void 0 : I2.url;
+    }, [r$12]);
+    return /* @__PURE__ */ jsxs(l, { children: [
+      /* @__PURE__ */ jsxs(t, { children: [
+        /* @__PURE__ */ jsx(
+          D$1,
+          {
+            image: c$12,
+            name: (H = n == null ? void 0 : n.meta) == null ? void 0 : H.accountName,
+            userName: z,
+            verified: F,
+            createdTweet: n == null ? void 0 : n.date
+          }
+        ),
+        /* @__PURE__ */ jsx(i, { children: D(y) }),
+        !d && i$12 && /* @__PURE__ */ jsx(m, { children: /* @__PURE__ */ jsx(p, { src: r$12 == null ? void 0 : r$12[0].mediaUrlHttps }) }),
+        d && i$12 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          (r$12 == null ? void 0 : r$12.length) === 1 && /* @__PURE__ */ jsx(m, { children: /* @__PURE__ */ jsx(p, { src: r$12[0].mediaUrlHttps }) }),
+          (r$12 == null ? void 0 : r$12.length) === 2 && /* @__PURE__ */ jsxs(m, { children: [
+            /* @__PURE__ */ jsx(r, { src: r$12[0].mediaUrlHttps }),
+            /* @__PURE__ */ jsx(r, { src: r$12[1].mediaUrlHttps })
+          ] }),
+          (r$12 == null ? void 0 : r$12.length) === 3 && /* @__PURE__ */ jsxs(m, { children: [
+            /* @__PURE__ */ jsx(r, { src: r$12[0].mediaUrlHttps }),
+            /* @__PURE__ */ jsxs(c, { children: [
+              /* @__PURE__ */ jsx(p, { src: r$12[1].mediaUrlHttps }),
+              /* @__PURE__ */ jsx(p, { src: r$12[2].mediaUrlHttps })
+            ] })
+          ] }),
+          (r$12 == null ? void 0 : r$12.length) === 4 && /* @__PURE__ */ jsxs(m, { children: [
+            /* @__PURE__ */ jsxs(c, { children: [
+              /* @__PURE__ */ jsx(p, { src: r$12[0].mediaUrlHttps }),
+              /* @__PURE__ */ jsx(p, { src: r$12[1].mediaUrlHttps })
+            ] }),
+            /* @__PURE__ */ jsxs(c, { children: [
+              /* @__PURE__ */ jsx(p, { src: r$12[2].mediaUrlHttps }),
+              /* @__PURE__ */ jsx(p, { src: r$12[3].mediaUrlHttps })
+            ] })
+          ] })
+        ] })
+      ] }),
+      !i$12 && (((U = r$12 == null ? void 0 : r$12[0]) == null ? void 0 : U.type) === "video" || ((f = r$12 == null ? void 0 : r$12[0]) == null ? void 0 : f.type) === "animated_gif") && m$12 && /* @__PURE__ */ jsx(
+        Et,
+        {
+          muted: C,
+          source: m$12,
+          poster: r$12[0].mediaUrlHttps,
+          controlVideo: T
         }
-    }, 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 {
-  Ze as E,
-  ze as w,
-  Ye as y
+  D$1 as D,
+  I,
+  D as a,
+  b,
+  e$1 as e,
+  o$1 as o,
+  s
 };