@streamlayer/react 1.24.5 → 1.24.6

package/lib/es/index14.js

@@ -1,820 +1,321 @@
-import { jsx as e, jsxs as o, Fragment as B } from "react/jsx-runtime";
-import { useState as $, useRef as ee, useEffect as _, useCallback as N, useLayoutEffect as ze, useMemo as K } from "react";
-import { s, c as pe } from "./sl-types.js";
-import { i as le } from "./index10.js";
-import { B as E } from "./index8.js";
-import { Q as t, a as se, d as G, A as Ye } from "./useStreamLayerApp2.js";
-import { b as Me, L as Ue } from "./index9.js";
-import { p as Ce } from "./index5.js";
-const On = /* @__PURE__ */ s("div")({
-  name: "SDKContainer",
-  class: "sopqfe6",
-  propsAsIs: !1
-}), Ke = /* @__PURE__ */ s("div")({
-  name: "SDKScrollContainer",
-  class: "s102vcph",
-  propsAsIs: !1
-}), $e = /* @__PURE__ */ s("div")({
-  name: "SDKContentContainer",
-  class: "s1meqjjv",
-  propsAsIs: !1
-}), _e = () => $e, Ee = /* @__PURE__ */ s(_e())({
-  name: "SDKWhiteContainer",
-  class: "s1burm22",
-  propsAsIs: !0
-}), He = () => Ee, Sn = /* @__PURE__ */ s(He())({
-  name: "SDKSummaryContainer",
-  class: "sm5r3j5",
-  propsAsIs: !0
-}), Vn = /* @__PURE__ */ s("div")({
-  name: "TabsContainer",
-  class: "tysxwr6",
-  propsAsIs: !1
-}), Ze = () => $e, Ln = /* @__PURE__ */ s(Ze())({
-  name: "LeaderboardContainer",
-  class: "l9er3b1",
-  propsAsIs: !0
-}), Ge = () => Ee, jn = /* @__PURE__ */ s(Ge())({
-  name: "TabsNavContainer",
-  class: "t19dtrb3",
-  propsAsIs: !0
-}), Qn = /* @__PURE__ */ s("div")({
-  name: "UserSummaryContainer",
-  class: "u1552n3j",
-  propsAsIs: !1
-});
-let Je = class {
-  observers = /* @__PURE__ */ new Set();
-  subscribe(a) {
-    this.observers.add(a);
-  }
-  unsubscribe(a) {
-    this.observers.delete(a);
-  }
-  notify(a) {
-    this.observers.forEach((c) => c(a));
-  }
-};
-const J = new Je(), Xe = { hiding: !1, finished: !1 }, es = () => {
-  const [n, a] = $(Xe), c = ee(null);
-  _(() => {
-    const p = (h) => {
-      a(h);
-    };
-    return J.subscribe(p), () => {
-      J.unsubscribe(p);
-    };
-  }, []);
-  const l = N((p) => {
-    const h = { hiding: !0, finished: !1 };
-    c.current && clearTimeout(c.current), p?.delay ? c.current = setTimeout(() => {
-      J.notify(h);
-    }, p?.delay) : J.notify(h);
-  }, []), r = N(() => {
-    n.hiding && (c.current = null, J.notify({ hiding: !1, finished: !0 }));
-  }, [n.hiding]);
-  return {
-    ...n,
-    runAnimation: l,
-    onAnimationEnd: r
-  };
-}, ss = /* @__PURE__ */ s("div")({
-  name: "Container",
-  class: "c1pgyo67",
-  propsAsIs: !1
-}), ns = "sx17qu6", ts = "h1692c5m", be = ({
-  children: n,
-  style: a,
-  className: c,
-  enabled: l = !0,
-  hiding: r,
-  onAnimationEnd: p
-}) => /* @__PURE__ */ e(ss, {
-  style: a,
-  className: pe(c, l && ns, l && r && ts),
-  onAnimationEnd: p,
-  children: n
-}), rs = () => be, as = /* @__PURE__ */ s(rs())({
-  name: "GrowingContainer",
-  class: "gck55ev",
+import { jsxs as T, jsx as e, Fragment as le } from "react/jsx-runtime";
+import { s as n, c as Z } from "./feature.js";
+import { useState as I, useEffect as b, useCallback as v, forwardRef as ce, useRef as B } from "react";
+import { B as f } from "./index8.js";
+import { G as ue, d as ie, b as de } from "./index9.js";
+import { C as pe } from "./useStreamLayerApp2.js";
+const me = /* @__PURE__ */ n("div")({
+  name: "CloseIconWrap",
+  class: "c3v6bv6",
+  propsAsIs: !1
+}), fe = /* @__PURE__ */ n("div")({
+  name: "TimerWrap",
+  class: "teuhmro",
+  propsAsIs: !1
+}), ye = () => f, ge = /* @__PURE__ */ n(ye())({
+  name: "Icon",
+  class: "i17rfxv5",
   propsAsIs: !0
-}), we = ({
-  children: n,
-  style: a,
-  enabled: c,
-  animate: l,
-  ...r
+}), Ze = ({
+  close: t,
+  className: a,
+  timerClassName: o,
+  skipIcon: l,
+  isPlaying: i = !0,
+  duration: c = 0,
+  autoClose: d
 }) => {
-  const p = ee(null);
-  return /* @__PURE__ */ e(as, {
-    ...r,
-    enabled: c && l,
-    style: {
-      ...a,
-      ...(() => {
-        const h = p?.current, v = (h && window.getComputedStyle(h))?.getPropertyValue("height");
-        return c ? {
-          height: l ? v : 0
-        } : {};
-      })()
-    },
-    children: /* @__PURE__ */ e("div", {
-      ref: p,
-      children: n
+  const [p, y] = I(c === 0);
+  b(() => {
+    y(!c);
+  }, [c]);
+  const C = v(() => {
+    d === pe.ENABLED ? t?.() : y(!0);
+  }, [d, t]);
+  return p ? /* @__PURE__ */ T(me, {
+    "data-a": "intr",
+    onClick: t,
+    className: a,
+    style: l ? {
+      width: "auto"
+    } : {},
+    children: [l && /* @__PURE__ */ e("span", {
+      "data-a": "intr",
+      children: "Skip"
+    }), /* @__PURE__ */ e(ge, {
+      "data-a": "intr",
+      name: l ? "iconSkip" : "icon-cross"
+    })]
+  }) : /* @__PURE__ */ e(fe, {
+    children: /* @__PURE__ */ e(ue, {
+      className: o,
+      isPlaying: i,
+      duration: c,
+      onTimerExpired: C
     })
   });
-}, is = /* @__PURE__ */ s("div")({
+}, he = /* @__PURE__ */ n("div")({
   name: "Container",
-  class: "c1gcvmcj",
+  class: "c1bgb86j",
   propsAsIs: !1
-}), os = /* @__PURE__ */ s("div")({
-  name: "Title",
-  class: "tnr592a",
+}), Ie = /* @__PURE__ */ n("video")({
+  name: "Player",
+  class: "p6703cq",
   propsAsIs: !1
-}), cs = /* @__PURE__ */ s("div")({
-  name: "Description",
-  class: "d1e8jqpv",
+}), be = /* @__PURE__ */ n("img")({
+  name: "Poster",
+  class: "p12ow7zo",
   propsAsIs: !1
-}), ls = () => E, ds = /* @__PURE__ */ s(ls())({
-  name: "Icon",
-  class: "i1vs651k",
-  propsAsIs: !0
-}), ps = ({ icon: n, title: a, description: c }) => /* @__PURE__ */ o(is, { children: [
-  /* @__PURE__ */ e(ds, { name: n }),
-  /* @__PURE__ */ e(os, { children: a }),
-  /* @__PURE__ */ e(cs, { children: c })
-] }), us = () => we, ms = /* @__PURE__ */ s(us())({
-  name: "ShowInContainer",
-  class: "s16sbdnm",
-  propsAsIs: !0
-}), Q = /* @__PURE__ */ s("div")({
-  name: "FeedbackContainer",
-  class: "fbhorgl",
+}), R = /* @__PURE__ */ n("div")({
+  name: "Control",
+  class: "cdpal9o",
   propsAsIs: !1
-}), Ae = "s1g20ja7", hs = /* @__PURE__ */ s("div")({
-  name: "Container",
-  class: "c455ozj",
+}), Pe = "t1xke4ml", Ae = "h1yzxv57", ve = /* @__PURE__ */ n("div")({
+  name: "VideoControls",
+  class: "vxo8xch",
   propsAsIs: !1
-}), Is = () => E, ve = /* @__PURE__ */ s(Is())({
-  name: "IconPrediction",
-  class: "i1913njx",
-  propsAsIs: !0
-}), X = /* @__PURE__ */ s("div")({
-  name: "FeedbackIconWrap",
-  class: "fzfk69z",
-  propsAsIs: !1
-}), te = /* @__PURE__ */ s("div")({
-  name: "FeedbackHeader",
-  class: "fx87qaj",
-  propsAsIs: !1
-}), fs = /* @__PURE__ */ s("span")({
-  name: "FeedbackTitle",
-  class: "fvek9ew",
-  propsAsIs: !1
-}), W = /* @__PURE__ */ s("span")({
-  name: "FeedbackDescription",
-  class: "f1kbtp09",
-  propsAsIs: !1
-}), As = /* @__PURE__ */ s("div")({
-  name: "FeedbackTitleWrap",
-  class: "f4i8rro",
-  propsAsIs: !1
-}), vs = /* @__PURE__ */ s("div")({
-  name: "FeedbackResultDescriptionWrap",
-  class: "fqyssr",
-  propsAsIs: !1
-}), ys = () => W, Ts = /* @__PURE__ */ s(ys())({
-  name: "FeedbackDynamicDescription",
-  class: "fyv794i",
-  propsAsIs: !0
-}), Cs = () => W, $s = /* @__PURE__ */ s(Cs())({
-  name: "FeedbackResultDescription",
-  class: "f1jkj9vx",
-  propsAsIs: !0
-}), de = /* @__PURE__ */ s("div")({
-  name: "FeedbackText",
-  class: "f1pxh3a6",
-  propsAsIs: !1
-}), Es = /* @__PURE__ */ s("span")({
-  name: "DynamicWrap",
-  class: "d1afvufn",
-  propsAsIs: !1
-}), bs = /* @__PURE__ */ s("div")({
-  name: "EarlyFeedbackDescription",
-  class: "eq8u24d",
-  propsAsIs: !1
-}), ye = ({
-  feedbackMessages: n,
-  questionVotedCorrectly: a,
-  questionVoted: c,
-  questionType: l,
-  hasCorrectAnswer: r,
-  showExpiredNotification: p,
-  showClosedNotificationTrivia: h,
-  votedInCurrentRender: v,
-  votedAfterQuestionClosed: i,
-  voteErrorMessage: m,
-  enteredAnActiveQuestion: b,
-  marketClosed: g,
-  percentsAnimated: y,
-  votedAnswer: O,
-  isEarlyPrediction: I,
-  correctAnswer: T,
-  onAnimationEnd: q
-}) => {
-  const P = c && (l === t.TRIVIA || l === t.PREDICTION), k = l === t.PREDICTION && !r, S = g && l === t.PREDICTION && !c || l === t.PREDICTION && i && v && b, C = P && k, V = P && r, f = l === t.PREDICTION && c && v && r, F = c && l === t.POLL && v, w = a ? "correct" : "incorrect", L = a ? n?.correctFeedback : n?.incorrectFeedback;
-  return p || h || C || V || S || F || f || m ? /* @__PURE__ */ e(
-    ms,
-    {
-      enabled: v,
-      animate: !m && p ? !0 : y,
-      onAnimationEnd: q,
-      children: /* @__PURE__ */ o(hs, { "data-prediction": k, children: [
-        m && !S && /* @__PURE__ */ o(Q, { children: [
-          !I && /* @__PURE__ */ e(ve, { name: "questionExpired" }),
-          /* @__PURE__ */ e(W, { children: m })
-        ] }),
-        !m && p && /* @__PURE__ */ o(Q, { children: [
-          !I && /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(E, { name: "questionExpired" }) }),
-          /* @__PURE__ */ o("div", { children: [
-            /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e(W, { children: "Question Expired" }) }),
-            /* @__PURE__ */ e(de, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
-          ] })
-        ] }),
-        !m && h && /* @__PURE__ */ o(Q, { className: pe(Ae), children: [
-          /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(E, { name: "questionExpired" }) }),
-          /* @__PURE__ */ o("div", { children: [
-            /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e(W, { children: "Question Closed" }) }),
-            /* @__PURE__ */ e(de, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
-          ] })
-        ] }),
-        S && /* @__PURE__ */ o(Q, { children: [
-          !I && /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(E, { name: "questionExpired" }) }),
-          /* @__PURE__ */ o("div", { children: [
-            /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e(W, { children: I ? r ? "The results are already in!" : "Question is Closed" : "Question Closed" }) }),
-            /* @__PURE__ */ e(de, { children: I ? /* @__PURE__ */ e(bs, { children: r ? `Correct: ${T?.text}` : "Event affecting the outcome has occurred." }) : "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
-          ] })
-        ] }),
-        !m && C && /* @__PURE__ */ o(Q, { children: [
-          !I && /* @__PURE__ */ e(ve, { name: "icon-prediction" }),
-          /* @__PURE__ */ o(Ts, { children: [
-            "Your pick has been recorded. ",
-            /* @__PURE__ */ e(Es, { children: "We’ll notify you of the result." })
-          ] })
-        ] }),
-        !m && F && /* @__PURE__ */ o(Q, { children: [
-          !I && /* @__PURE__ */ e(X, { "data-feedback-type": "correct", children: /* @__PURE__ */ e(E, { name: "correct" }) }),
-          /* @__PURE__ */ e(W, { children: "Thanks for answering. Please stay tuned for the next question." })
-        ] }),
-        !m && (V || f) && /* @__PURE__ */ o(Q, { className: pe(h && Ae), children: [
-          !I && /* @__PURE__ */ e(X, { "data-feedback-type": w, children: /* @__PURE__ */ e(E, { name: w }) }),
-          /* @__PURE__ */ e("div", { children: /* @__PURE__ */ o(te, { children: [
-            I ? /* @__PURE__ */ e(As, { children: w === "incorrect" ? /* @__PURE__ */ o(B, { children: [
-              /* @__PURE__ */ e("div", { children: "So close!" }),
-              /* @__PURE__ */ e("div", { children: "Better luck next time" })
-            ] }) : /* @__PURE__ */ o(B, { children: [
-              /* @__PURE__ */ e("div", { children: "That’s correct!" }),
-              /* @__PURE__ */ e("div", { children: "You chose wisely." })
-            ] }) }) : /* @__PURE__ */ e(fs, { "data-feedback-type": w, children: L?.title }),
-            I ? /* @__PURE__ */ o(vs, { children: [
-              /* @__PURE__ */ o("div", { children: [
-                "Your pick: ",
-                O?.text
-              ] }),
-              /* @__PURE__ */ e("div", { children: w === "incorrect" ? `Correct: ${T?.text}` : "" })
-            ] }) : /* @__PURE__ */ e($s, { children: L?.description })
-          ] }) })
-        ] })
-      ] })
-    }
-  ) : null;
-}, ws = /* @__PURE__ */ s("div")({
-  name: "Container",
-  class: "c1hygj0s",
-  propsAsIs: !1
-}), gs = /* @__PURE__ */ s("div")({
-  name: "Title",
-  class: "t1r84tez",
+}), D = /* @__PURE__ */ n("button")({
+  name: "ControlBtn",
+  class: "coyuzu0",
   propsAsIs: !1
-}), Ps = /* @__PURE__ */ s("div")({
-  name: "Description",
-  class: "d1aj1a7k",
-  propsAsIs: !1
-}), Rs = /* @__PURE__ */ s("div")({
-  name: "AdditionalDescription",
-  class: "ax09ezs",
-  propsAsIs: !1
-}), Ds = () => E, qs = /* @__PURE__ */ s(Ds())({
-  name: "Icon",
-  class: "inkrac",
+}), Ce = () => D, Me = /* @__PURE__ */ n(Ce())({
+  name: "MuteIcon",
+  class: "musmi9a",
   propsAsIs: !0
-}), ks = ({ icon: n, title: a, description: c, additionalDescription: l }) => /* @__PURE__ */ o(ws, { children: [
-  n && /* @__PURE__ */ e(qs, { name: n }),
-  /* @__PURE__ */ e(gs, { children: a }),
-  /* @__PURE__ */ e(Ps, { children: c }),
-  l && /* @__PURE__ */ e(Rs, { children: l })
-] }), ge = /* @__PURE__ */ s("div")({
-  name: "Container",
-  class: "c14ielyq",
-  propsAsIs: !1
-}), xs = () => Ke, Ns = /* @__PURE__ */ s(xs())({
-  name: "QuestionScrollContainer",
-  class: "q1tlqx57",
+}), ke = () => D, we = /* @__PURE__ */ n(ke())({
+  name: "PauseIcon",
+  class: "p1qe7rum",
   propsAsIs: !0
-}), Os = /* @__PURE__ */ s("div")({
-  name: "TopShadow",
-  class: "t1hq58md",
-  propsAsIs: !1
-}), Ss = /* @__PURE__ */ s("div")({
-  name: "BottomShadow",
-  class: "b1c8nxcx",
-  propsAsIs: !1
-}), Vs = /* @__PURE__ */ s("div")({
-  name: "SponsorLogo",
-  class: "siozuc3",
-  propsAsIs: !1
-}), Pe = /* @__PURE__ */ s("div")({
-  name: "Content",
-  class: "cpnc44r",
-  propsAsIs: !1
-}), Ls = /* @__PURE__ */ s("div")({
-  name: "Title",
-  class: "tq7p3w0",
-  propsAsIs: !1
-}), js = /* @__PURE__ */ s("div")({
-  name: "OptionsWrap",
-  class: "o1jlfj9g",
-  propsAsIs: !1
-}), Re = /* @__PURE__ */ s("div")({
-  name: "Options",
-  class: "o84pmnd",
-  propsAsIs: !1
-}), Qs = () => be, Te = /* @__PURE__ */ s(Qs())({
-  name: "AlertContainer",
-  class: "a1dybjw9",
+}), Ve = () => D, xe = /* @__PURE__ */ n(Ve())({
+  name: "PlayIcon",
+  class: "psevery",
   propsAsIs: !0
-}), Ws = /* @__PURE__ */ s("div")({
-  name: "EarlyPrediction",
-  class: "e1l05ict",
+}), Y = /* @__PURE__ */ n("button")({
+  name: "WebOSIconButton",
+  class: "w1q3u7py",
   propsAsIs: !1
-}), Bs = () => E, Fs = /* @__PURE__ */ s(Bs())({
-  name: "EarlyPredictionIcon",
-  class: "ez9juex",
+}), Ee = () => Y, L = /* @__PURE__ */ n(Ee())({
+  name: "WebOSIconButtonAnimation",
+  class: "wdlqvum",
   propsAsIs: !0
-}), zs = () => E, Ys = /* @__PURE__ */ s(zs())({
-  name: "SponsorIcon",
-  class: "s8p4aob",
+}), Ne = () => L, Oe = /* @__PURE__ */ n(Ne())({
+  name: "WebOSIconButtonPlay",
+  class: "w1ylz9ea",
   propsAsIs: !0
-}), Ms = /* @__PURE__ */ s("button")({
-  name: "ButtonContainer",
-  class: "b1b6dl8t",
-  propsAsIs: !1
-}), Us = /* @__PURE__ */ s("div")({
-  name: "ButtonPctWrap",
-  class: "b4iik8i",
-  propsAsIs: !1
-}), Ks = /* @__PURE__ */ s("div")({
-  name: "ButtonPct",
-  class: "b1gq1lnf",
-  propsAsIs: !1
-}), _s = /* @__PURE__ */ s("span")({
-  name: "ButtonBody",
-  class: "b1j65z51",
-  propsAsIs: !1
-}), Hs = /* @__PURE__ */ s("div")({
-  name: "IconContainer",
-  class: "i19tpfua",
-  propsAsIs: !1
-}), Zs = /* @__PURE__ */ s("div")({
-  name: "IconWrap",
-  class: "i1tubmma",
-  propsAsIs: !1
-}), De = /* @__PURE__ */ s("img")({
-  name: "Icon",
-  class: "i1grrgwj",
-  propsAsIs: !1
-}), Gs = () => De, Js = /* @__PURE__ */ s(Gs())({
-  name: "IconDefault",
-  class: "ibemyq8",
+}), Se = () => L, We = /* @__PURE__ */ n(Se())({
+  name: "WebOSIconButtonPause",
+  class: "w1iylt55",
   propsAsIs: !0
-}), Xs = () => De, en = /* @__PURE__ */ s(Xs())({
-  name: "IconCircle",
-  class: "i1dceht",
+}), Be = () => L, Re = /* @__PURE__ */ n(Be())({
+  name: "WebOSIconButtonMute",
+  class: "w8h4h7",
   propsAsIs: !0
-}), sn = /* @__PURE__ */ s("span")({
-  name: "Title",
-  class: "t116q4vq",
-  propsAsIs: !1
-}), nn = /* @__PURE__ */ s("span")({
-  name: "Indicators",
-  class: "i17ajcu2",
-  propsAsIs: !1
-}), tn = /* @__PURE__ */ s("div")({
-  name: "PtsWrap",
-  class: "pu9kmlb",
-  propsAsIs: !1
-}), rn = /* @__PURE__ */ s("span")({
-  name: "Pts",
-  class: "p1j2j0s0",
-  propsAsIs: !1
-}), an = /* @__PURE__ */ s("span")({
-  name: "Percentage",
-  class: "p1mzj1sj",
-  propsAsIs: !1
-}), on = () => E, cn = /* @__PURE__ */ s(on())({
-  name: "CheckIcon",
-  class: "cichgz8",
+}), Te = () => L, Le = /* @__PURE__ */ n(Te())({
+  name: "WebOSIconButtonUnmute",
+  class: "w12l12kt",
   propsAsIs: !0
-}), ln = {
-  [G.CENTERED]: (n) => /* @__PURE__ */ e(Js, { "data-testid": "vote-icon", alt: "option-icon", src: n }),
-  [G.TRANSPARENT]: (n) => /* @__PURE__ */ e(Hs, { "data-testid": "vote-icon", children: /* @__PURE__ */ e(Zs, { style: { backgroundImage: `url(${n})` } }) }),
-  [G.ROUNDED]: (n) => /* @__PURE__ */ e(en, { "data-testid": "vote-icon", alt: "option-icon", src: n }),
-  [G.NONE]: () => null,
-  [G.UNSET]: () => null
-}, dn = ({ questionType: n, hasCorrectAnswer: a, correct: c, youVoted: l, questionVoted: r }) => {
-  if (n === t.POLL && l)
-    return "voted";
-  if (n === t.PREDICTION) {
-    if (!a && r)
-      return l ? "voted" : "unset";
-    if (a && r)
-      return l ? c ? "correct" : "incorrect" : "unset";
-    if (l)
-      return "correct";
-  }
-  return n === t.TRIVIA && r && l ? c ? "correct" : "incorrect" : "unset";
-}, pn = ({
-  questionType: n,
-  questionVoted: a,
-  correct: c,
-  hasCorrectAnswer: l,
-  questionStatus: r
-}) => n === t.TRIVIA ? a && c : n === t.PREDICTION ? a && c && l || r === se.RESOLVED && c : !1, un = Me(Ms), mn = (n) => {
-  const {
-    // option props
-    id: a,
-    icon: c,
-    text: l,
-    percentageDecimal: r,
-    points: p,
-    // extra props
-    onVote: h,
-    markThatVoted: v,
-    firstOption: i,
-    onPercentsAnimated: m,
-    youSelected: b,
-    youVoted: g,
-    questionVoted: y,
-    imageMode: O,
-    answerTimeExpired: I,
-    questionStatus: T,
-    isLoading: q,
-    questionType: P,
-    correct: k,
-    hasCorrectAnswer: S,
-    marketClosed: C,
-    isEarlyPrediction: V,
-    isAd: f,
-    webos: F
-  } = n, [w, L] = $(0), z = dn(n), H = pn({ questionType: P, questionVoted: y, correct: k, hasCorrectAnswer: S, questionStatus: T }), x = C && P === t.PREDICTION, ne = y || x, Y = P === t.PREDICTION && !y && !C && !f, Z = y && !b && z !== "incorrect" && !g;
-  return ze(() => {
-    L(0), requestAnimationFrame(() => {
-      L(r);
-    });
-  }, [r]), /* @__PURE__ */ o(
-    un,
-    {
-      value: a,
-      webos: F,
-      autoFocus: i,
-      "data-selected": b,
-      "data-answer-state": z,
-      disabled: y || q || I || x,
-      "data-is-not-checked": Z,
-      "data-a": "intr",
-      onClick: (re) => {
-        v(
-          P === t.PREDICTION ? C : T === se.RESOLVED
-        ), h(re);
-      },
-      "data-is-ad": f,
-      children: [
-        /* @__PURE__ */ e(Us, { children: /* @__PURE__ */ e(
-          Ks,
-          {
-            "data-answer-state": z,
-            "data-is-not-checked": Z,
-            style: { width: `${ne ? w : 0}%` },
-            onTransitionEnd: () => {
-              x || m?.();
-            },
-            "data-is-ad": f
-          }
-        ) }),
-        /* @__PURE__ */ o(_s, { "data-a": "intr", children: [
-          c && O && ln[O]?.(c),
-          /* @__PURE__ */ e(sn, { "data-a": "intr", children: l }),
-          Y && /* @__PURE__ */ o(tn, { children: [
-            p,
-            /* @__PURE__ */ e(rn, { children: "pts" })
-          ] }),
-          ne && /* @__PURE__ */ o(nn, { children: [
-            H && /* @__PURE__ */ e(cn, { name: V ? "selectedBetPack" : "selected" }),
-            /* @__PURE__ */ e(an, { children: /* @__PURE__ */ e(Ce, { value: r, suffix: "%" }) })
-          ] })
-        ] })
-      ]
-    }
+}), Ue = (t) => {
+  for (const a of t)
+    a.isIntersecting ? a.target instanceof HTMLVideoElement && a.target.autoplay && a.target.play() : a.target instanceof HTMLVideoElement && !a.target.paused && a.target.pause();
+}, ee = new IntersectionObserver(Ue, { threshold: 0.5 }), F = /* @__PURE__ */ new Set(), je = (t) => {
+  ee.observe(t), F.add(t);
+}, ze = (t) => {
+  ee.unobserve(t), F.delete(t);
+}, He = () => {
+  for (const t of F)
+    t instanceof HTMLVideoElement && !t.paused && t.pause();
+};
+function qe(...t) {
+  return v(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (a) => {
+      for (const o of t)
+        o !== null && (typeof o == "function" ? o(a) : o && (o.current = a));
+    },
+    // Re-run the callback if the array of refs changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [...t]
   );
-}, hn = () => we, In = /* @__PURE__ */ s(hn())({
-  name: "ShowInContainer",
-  class: "sie6cqo",
-  propsAsIs: !0
-}), fn = /* @__PURE__ */ s("div")({
-  name: "WinBarContainer",
-  class: "wgizw4u",
-  propsAsIs: !1
-}), An = /* @__PURE__ */ s("div")({
-  name: "Content",
-  class: "c1l3ucjp",
-  propsAsIs: !1
-}), vn = /* @__PURE__ */ s("div")({
-  name: "Title",
-  class: "tx7j799",
-  propsAsIs: !1
-}), yn = () => E, Tn = /* @__PURE__ */ s(yn())({
-  name: "WinIcon",
-  class: "w4lwuj0",
-  propsAsIs: !0
-}), Cn = /* @__PURE__ */ s("div")({
-  name: "Points",
-  class: "po9i64o",
-  propsAsIs: !1
-}), $n = /* @__PURE__ */ s("span")({
-  name: "PointsCount",
-  class: "pe5g05h",
-  propsAsIs: !1
-}), En = /* @__PURE__ */ s("span")({
-  name: "PointsUnits",
-  class: "p1hdtpmb",
-  propsAsIs: !1
-}), bn = ({
-  title: n,
-  points: a,
-  isPlayingTimer: c,
-  isTimer: l,
-  animatePoints: r,
-  questionType: p,
-  timerDuration: h,
-  votedInCurrentRender: v,
-  percentsAnimated: i,
-  onTimerExpired: m
-}) => /* @__PURE__ */ e(
-  In,
-  {
-    enabled: p === t.PREDICTION && v,
-    animate: i,
-    children: /* @__PURE__ */ o(
-      fn,
+}
+const $e = de(he), De = ({ loading: t, autoPlay: a, played: o, playing: l, isMuted: i, unmute: c, mute: d, togglePlaying: p }) => !t && !a && !o ? /* @__PURE__ */ e(R, { children: l ? /* @__PURE__ */ e(f, { name: "icon-pause" }) : /* @__PURE__ */ e(f, { name: "icon-play" }) }) : o ? /* @__PURE__ */ T(ve, { children: [
+  l ? /* @__PURE__ */ e(we, { onClick: p }) : /* @__PURE__ */ e(xe, { onClick: p }),
+  /* @__PURE__ */ e(Me, { className: Z(!i && "muted"), onClick: i ? c : d })
+] }) : null, Fe = ({
+  loading: t,
+  autoPlay: a,
+  playMuted: o,
+  playing: l,
+  played: i,
+  unmute: c,
+  mute: d,
+  isMuted: p,
+  hasNotPausedVideo: y,
+  hasInteractedWithAudio: C
+}) => /* @__PURE__ */ T(le, { children: [
+  !t && !(a && o) && /* @__PURE__ */ e(R, { "data-control-btn": "true", children: l ? y ? null : /* @__PURE__ */ e(Oe, { children: /* @__PURE__ */ e(f, { name: "icon-play" }) }) : i ? /* @__PURE__ */ e(We, { children: /* @__PURE__ */ e(f, { name: "icon-pause" }) }) : /* @__PURE__ */ e(Y, { "data-control-icon": "true", children: /* @__PURE__ */ e(f, { name: "icon-play" }) }) }),
+  !t && a && o && C && /* @__PURE__ */ e(R, { children: p ? /* @__PURE__ */ e(Re, { onClick: c, children: /* @__PURE__ */ e(f, { name: "iconMute" }) }) : /* @__PURE__ */ e(Le, { onClick: d, children: /* @__PURE__ */ e(f, { name: "iconUnMute" }) }) })
+] }), Ye = ce(
+  ({
+    poster: t,
+    source: a,
+    aspectRatio: o,
+    controlVideo: l,
+    onReplay: i,
+    onPlay: c,
+    onPause: d,
+    onEnd: p,
+    onRender: y,
+    onMute: C,
+    onMuteClick: x,
+    onQuartile: U,
+    autoPlay: M,
+    playMuted: k,
+    className: te,
+    muted: w,
+    webos: E,
+    hasNotPausedVideo: ae
+  }, se) => {
+    const u = B(null), ne = qe(u, se), j = B(!1), z = B(!1), m = B(/* @__PURE__ */ new Set()), [G, K] = I(!1), [N, O] = I(!1), [H, _] = I(!1), [J, S] = I(!0), [q, W] = I(k), [$, oe] = I(!1);
+    b(() => {
+      a && (W(k), K(!1));
+    }, [a]);
+    const P = v(() => {
+      l?.({ muted: !1 });
+    }, [l]), Q = v(() => {
+      l?.({ muted: !0 });
+    }, [l]), A = v(
+      (s) => {
+        s?.stopPropagation(), u.current && (u.current.muted = !0), W(!0), s && x?.(!0);
+      },
+      [x]
+    ), V = v(
+      (s) => {
+        s?.stopPropagation(), u.current && (u.current.muted = !1), W(!1), $ || oe(!0), s && x?.(!1);
+      },
+      [$, x]
+    );
+    b(() => {
+      w !== void 0 && (w ? A() : V());
+    }, [A, w, V]);
+    const X = (s) => {
+      s.stopPropagation?.();
+      const r = u?.current;
+      if (r)
+        if (N)
+          r.pause();
+        else {
+          const g = u?.current;
+          if (!g)
+            return;
+          He(), g.play().catch((h) => console.log(h)), S(!1);
+        }
+    }, re = () => {
+      u?.current?.load(), S(!0);
+    };
+    return b(() => () => {
+      P();
+    }, [P]), b(() => {
+      const s = u.current;
+      return s ? (z.current = s.muted, W(s.muted), je(s), () => {
+        ze(s);
+      }) : () => {
+      };
+    }, []), b(() => {
+      y?.();
+    }, [y]), b(() => {
+      m.current.clear(), j.current = !1;
+    }, [a]), /* @__PURE__ */ T(
+      $e,
       {
-        style: {
-          justifyContent: p === t.PREDICTION ? "center" : "space-between"
-        },
+        webos: E,
+        onClick: M && k ? q ? V : A : X,
+        "data-a": "intr",
+        autoFocus: !0,
+        options: { focusKey: "video-play-btn" },
+        className: Z(N && !E && Pe, M && Ae, te),
+        style: o ? { aspectRatio: o } : {},
         children: [
-          /* @__PURE__ */ o(An, { children: [
-            n && /* @__PURE__ */ e(vn, { children: n }),
-            a !== void 0 && p !== t.POLL && /* @__PURE__ */ o(B, { children: [
-              /* @__PURE__ */ e(Tn, { name: "icon-trophy" }),
-              /* @__PURE__ */ o(Cn, { children: [
-                /* @__PURE__ */ e($n, { children: r ? /* @__PURE__ */ e(Ce, { value: a, delay: 0.3 }) : a }),
-                /* @__PURE__ */ e(En, { children: "PTS" })
-              ] })
-            ] })
-          ] }),
-          l && p !== t.PREDICTION && /* @__PURE__ */ e(Ue, { isPlaying: c, onTimerExpired: m, duration: h })
+          /* @__PURE__ */ e(
+            Ie,
+            {
+              ref: ne,
+              src: a,
+              autoPlay: M,
+              onPlay: () => {
+                K(!0), j.current && (i?.(), m.current.clear()), O(!0), S(!1), c?.(), k ? A() : Q();
+              },
+              onTimeUpdate: (s) => {
+                const r = s.target.duration, g = s.target.currentTime;
+                if (r && g) {
+                  const h = Math.floor(g / r * 100);
+                  h >= 25 && h < 50 && !m.current.has(25) ? (U?.(25), m.current.add(25)) : h >= 50 && h < 75 && !m.current.has(50) ? (U?.(50), m.current.add(50)) : h >= 75 && !m.current.has(75) && (U?.(75), m.current.add(75));
+                }
+              },
+              onVolumeChange: (s) => {
+                const r = s.target.muted;
+                z.current !== r && (C?.(r), z.current = r, (r !== w || w === void 0) && (r ? P() : Q()));
+              },
+              onError: async (s) => {
+                try {
+                  if (s.target instanceof HTMLVideoElement) {
+                    _(!0);
+                    const r = await (await fetch(s.target.src)).blob(), g = URL.createObjectURL(r);
+                    s.target.src = g;
+                  }
+                } catch (r) {
+                  console.error("video fallback fetch failed", r), O(!0), S(!0);
+                } finally {
+                  _(!1), P();
+                }
+              },
+              onPause: () => {
+                O(!1), d?.(), P();
+              },
+              onEnded: () => {
+                O(!1), j.current = !0, re(), p?.(), P();
+              },
+              style: { visibility: J ? "hidden" : "visible" },
+              controls: !1,
+              playsInline: !0
+            }
+          ),
+          /* @__PURE__ */ e(be, { src: t, style: { visibility: J ? "visible" : "hidden" } }),
+          !E && /* @__PURE__ */ e(
+            De,
+            {
+              loading: H,
+              autoPlay: M,
+              played: G,
+              playing: N,
+              isMuted: q,
+              unmute: V,
+              mute: A,
+              togglePlaying: X
+            }
+          ),
+          E && /* @__PURE__ */ e(
+            Fe,
+            {
+              loading: H,
+              autoPlay: M,
+              playMuted: k,
+              playing: N,
+              played: G,
+              unmute: V,
+              mute: A,
+              isMuted: q,
+              hasNotPausedVideo: ae,
+              hasInteractedWithAudio: $
+            }
+          ),
+          H && /* @__PURE__ */ e(R, { children: /* @__PURE__ */ e(ie, {}) })
         ]
       }
-    )
+    );
   }
-), wn = (n, a) => n === "already_voted" ? a === t.POLL ? "You’ve already answered this question on another device." : "You’ve already answered this question on another device. So the points for this answer won't tally." : "Something went wrong, please try again", Bn = () => /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ o(Pe, { children: [
-  /* @__PURE__ */ e(le, { loading: !0, style: { height: "40px", borderRadius: "100px" } }),
-  /* @__PURE__ */ e(le, { loading: !0, style: { height: "24px", margin: "16px 0" } }),
-  /* @__PURE__ */ e(Re, { children: Array.from({ length: 5 }).map((n, a) => /* @__PURE__ */ e(le, { loading: !0, style: { height: "44px" } }, a)) })
-] }) }), Fn = ({
-  openedQuestion: n,
-  isLoading: a,
-  vote: c,
-  close: l,
-  isEarlyPrediction: r,
-  mastersApp: p,
-  webos: h
-}) => {
-  const v = n.subject, i = n.type, m = n.status, b = n.options?.options, g = n.marketClosed, y = n.id, O = ee(), I = ee(), T = p ? !1 : n?.adUnit === Ye.STANDART, [q, P] = $(!1), [k, S] = $(!1), [C, V] = $(!0), [f, F] = $(!1), [w, L] = $(!1), [z, H] = $(""), [x, ne] = $(""), [Y, Z] = $(!1), [re, qe] = $(!1), [ue, ke] = $(!1), { runAnimation: M, finished: me } = es();
-  _(() => {
-    me && l(y);
-  }, [l, me]), _(() => {
-    i === t.PREDICTION ? g && V(!1) : m === se.RESOLVED && V(!1);
-  }, []);
-  const xe = N((u) => {
-    S(u), P(!0);
-  }, []), Ne = N(() => {
-    r && P(!1);
-  }, [r]), ae = ee(!1), he = N(() => {
-    I.current && clearTimeout(I.current), I.current = setTimeout(() => {
-      ke(!0), M({ delay: 5500 });
-    }, 4e3);
-  }, [M]), Ie = N(
-    async (u) => {
-      if (!ae.current && (ae.current = !0, y)) {
-        const D = u.currentTarget.value;
-        H(D);
-        try {
-          await c(y, D), T && he();
-        } catch (U) {
-          ne(wn(U.message, i)), H(""), console.error("Error while voting", U), ae.current = !1;
-        }
-      }
-    },
-    [i, y, H, c, T, he]
-  ), Oe = N(() => {
-    F(!0), M({ delay: 3500 });
-  }, [M]), Se = N(() => {
-    L(!0), M({ delay: 3500 });
-  }, [M]), d = n?.answers.find((u) => u.youVoted === !0), A = K(
-    () => !!n?.answers.find((u) => u.correct === !0),
-    [n]
-  ), R = K(
-    () => n?.answers.find((u) => u.correct === !0),
-    [n]
-  );
-  _(() => {
-    d && q && !re && (O.current = setTimeout(Se, 1e4), qe(!0));
-  }, [d]), _(() => () => {
-    clearTimeout(O.current), clearTimeout(I.current);
-  }, []);
-  const ie = K(() => n ? n.answers.map((u) => ({
-    ...u,
-    questionVoted: !!d,
-    youSelected: z === u.id,
-    isLoading: a,
-    hasCorrectAnswer: A,
-    questionType: n.type,
-    answerTimeExpired: f,
-    questionStatus: m,
-    imageMode: n.appearance?.images,
-    onVote: Ie
-  })) : [], [
-    A,
-    f,
-    a,
-    n,
-    d,
-    m,
-    Ie,
-    z
-  ]);
-  _(() => {
-    const u = ie.some(({ percentageDecimal: U }) => U !== 0), D = d && i === t.PREDICTION;
-    x && (r || !u || g && D) && Z(!0);
-  }, [ie, x, r, g, i, d]);
-  const fe = b && (b.case === "trivia" || b.case === "prediction") ? b.value : void 0, j = m === se.RESOLVED && i === t.TRIVIA && !d && !C, oe = i === t.TRIVIA && k, ce = K(() => T ? !1 : i === t.PREDICTION ? r ? !1 : !!(d && !A || d && A && R?.youVoted) : !0, [i, d, A, R, r, T]), Ve = K(() => {
-    if (i === t.PREDICTION && d && (!A || A && R?.youVoted))
-      return d.points;
-    if (!(j || f))
-      return d ? d.correct ? d.pointsEarned : 0 : R?.points;
-  }, [f, d, R, j, i, A]), Le = K(() => i === t.PREDICTION && d ? A ? A && R?.youVoted ? "You won" : "" : "To win" : j || f ? "Time expired" : i === t.POLL ? "Time remaining" : d ? "You won" : "To win", [f, i, d, j, A, R]), je = !ce || ce && i === t.PREDICTION && q && !Y, Qe = (i === t.TRIVIA || i === t.PREDICTION) && d && A && R?.youVoted, We = d || j || oe || i === t.TRIVIA && m === se.RESOLVED && C, Be = !r && (f || w) || ue, Fe = () => {
-    const u = () => i === t.TRIVIA ? d?.correct ? `That's correct!
-You chose wisely.` : `So close!
-Better luck next time.` : i === t.POLL ? `Thanks for answering.
-Please stay tuned for the next question.` : i === t.PREDICTION ? "Stay tuned to see if your prediction was correct." : "", D = () => i === t.TRIVIA ? `Your Pick: ${R?.text}` : i === t.POLL || i === t.PREDICTION ? `Your Pick: ${d?.text}` : "", U = () => i === t.TRIVIA && b?.case === "trivia" ? b?.value.explanation : i === t.PREDICTION ? v : "";
-    return ue ? /* @__PURE__ */ e(Te, { children: /* @__PURE__ */ e(
-      ks,
-      {
-        title: u(),
-        description: D(),
-        ...d?.correct || i === t.POLL || i === t.PREDICTION ? { icon: "icon-correct" } : {},
-        ...i === t.TRIVIA || i === t.PREDICTION ? { additionalDescription: U() } : {}
-      }
-    ) }) : !r && (f || w) ? /* @__PURE__ */ e(Te, { children: /* @__PURE__ */ e(
-      ps,
-      {
-        icon: "icon-check-circle",
-        title: "More to come...",
-        description: w ? /* @__PURE__ */ o(B, { children: [
-          "Stay tuned for more questions ",
-          /* @__PURE__ */ e("br", {}),
-          " and insights."
-        ] }) : /* @__PURE__ */ o(B, { children: [
-          "Watch for additional enhanced stream ",
-          /* @__PURE__ */ e("br", {}),
-          " interactive experience."
-        ] })
-      }
-    ) }) : null;
-  };
-  return /* @__PURE__ */ o(Ns, { children: [
-    r && /* @__PURE__ */ e(Os, {}),
-    /* @__PURE__ */ e(ge, { style: r ? { marginTop: "-40px" } : {}, children: /* @__PURE__ */ o(Pe, { children: [
-      !r && !T && /* @__PURE__ */ e(
-        ye,
-        {
-          feedbackMessages: fe,
-          questionVoted: !!d,
-          questionVotedCorrectly: d?.correct,
-          questionType: i,
-          hasCorrectAnswer: A,
-          showExpiredNotification: j,
-          showClosedNotificationTrivia: oe,
-          votedInCurrentRender: q,
-          votedAfterQuestionClosed: k,
-          enteredAnActiveQuestion: C,
-          marketClosed: g,
-          percentsAnimated: Y,
-          voteErrorMessage: x,
-          votedAnswer: d
-        }
-      ),
-      ce && /* @__PURE__ */ e(
-        bn,
-        {
-          title: Le,
-          points: Ve,
-          onTimerExpired: Oe,
-          questionType: n.type,
-          isTimer: !a,
-          isPlayingTimer: !d,
-          animatePoints: Qe,
-          timerDuration: We ? 0 : Number(n?.appearance?.autoHideInterval || "30"),
-          votedInCurrentRender: q,
-          percentsAnimated: Y
-        }
-      ),
-      Be ? Fe() : /* @__PURE__ */ o(B, { children: [
-        r && /* @__PURE__ */ o(Ws, { children: [
-          /* @__PURE__ */ e(Fs, { name: "iconEarlyPrediction" }),
-          "EARLY PREDICTION"
-        ] }),
-        /* @__PURE__ */ e(Ls, { style: je ? { marginTop: 0 } : {}, children: v }),
-        r && /* @__PURE__ */ e(
-          ye,
-          {
-            feedbackMessages: fe,
-            questionVoted: !!d,
-            questionVotedCorrectly: d?.correct,
-            questionType: i,
-            hasCorrectAnswer: A,
-            showExpiredNotification: j,
-            showClosedNotificationTrivia: oe,
-            votedInCurrentRender: q,
-            votedAfterQuestionClosed: k,
-            enteredAnActiveQuestion: C,
-            marketClosed: g,
-            percentsAnimated: Y,
-            voteErrorMessage: x,
-            isEarlyPrediction: r,
-            correctAnswer: R,
-            votedAnswer: d,
-            onAnimationEnd: Ne
-          }
-        ),
-        /* @__PURE__ */ o(js, { children: [
-          /* @__PURE__ */ e(Re, { children: ie.sort((u, D) => u.id > D.id ? 1 : -1).map((u, D) => /* @__PURE__ */ e(
-            mn,
-            {
-              ...u,
-              firstOption: D === 0,
-              markThatVoted: xe,
-              onPercentsAnimated: () => Z(!0),
-              votedAfterQuestionClosed: k,
-              enteredAnActiveQuestion: C,
-              marketClosed: g,
-              isEarlyPrediction: r,
-              isAd: T,
-              webos: h
-            },
-            u.id
-          )) }),
-          r && /* @__PURE__ */ o(B, { children: [
-            /* @__PURE__ */ e(Ss, {}),
-            /* @__PURE__ */ e(Vs, { children: /* @__PURE__ */ e(Ys, { name: "mastersLogoWhite" }) })
-          ] })
-        ] })
-      ] })
-    ] }) })
-  ] });
-};
+);
 export {
-  Ln as C,
-  Fn as Q,
-  jn as S,
-  Bn as Z,
-  Ee as a,
-  Ke as c,
-  Qn as d,
-  be as f,
-  Vn as l,
-  Sn as m,
-  $e as n,
-  On as p,
-  es as y
+  He as O,
+  Ye as V,
+  Ze as y
 };