@streamlayer/react-ui 0.95.1 → 0.96.1

package/lib/ui/gamification/onboarding/index.js

@@ -1,14 +1,17 @@
-import { jsx as t, jsxs as O } from "react/jsx-runtime";
-import { useState as c, useEffect as j, useMemo as H, useCallback as z } from "react";
-import E from "react-virtualized-auto-sizer";
-import { Skeleton as F } from "../../skeleton/index.js";
-import { OnboardingInstructions as G } from "./slides/onboarding-instructions/index.js";
-import { OnboardingInviteCard as M } from "./slides/onboarding-invite-card/index.js";
-import { OnboardingRules as P } from "./slides/onboarding-rules/index.js";
-import { OnboardingTerms as R } from "./slides/onboarding-terms/index.js";
-import { Container as q, OnboardingHeader as J, CloseBtn as K, IconClose as Q, Content as U, OnboardingFooter as V, OnboardingActionBtn as W } from "./styles.js";
+import { jsx as t, jsxs as y } from "react/jsx-runtime";
+import { useState as h, useEffect as s, useMemo as E, useCallback as F } from "react";
+import G from "react-virtualized-auto-sizer";
+import { Skeleton as M } from "../../skeleton/index.js";
+import { OnboardingInstructions as P } from "./slides/onboarding-instructions/index.js";
+import { OnboardingInviteCard as R } from "./slides/onboarding-invite-card/index.js";
+import { OnboardingRules as U } from "./slides/onboarding-rules/index.js";
+import { OnboardingTerms as q } from "./slides/onboarding-terms/index.js";
+import { Container as J, OnboardingHeader as K, CloseBtn as Q, IconClose as V, Content as W, OnboardingFooter as X, OnboardingActionBtn as Y } from "./styles.js";
 import "../../skeleton/styles.js";
 import "@linaria/react";
+import "./invitingUser/index.js";
+import "../../../utils/common.js";
+import "./invitingUser/styles.js";
 import "./slides/onboarding-instructions/styles.js";
 import "../../app/useClipboardCopy.js";
 import "../../../index-jRXrW6ie.js";
@@ -25,71 +28,76 @@ const m = {
   steps: !1,
   rules: !1,
   inviteCard: !1
-}, bi = ({
-  gamification: S,
+}, si = ({
+  gamification: v,
   steps: i,
   rules: r,
-  rulesBtnLabel: a,
-  rulesTitle: y,
-  termsTitle: s,
-  termsText: f,
-  primaryColor: g,
-  inviteLink: v,
-  socialLinks: T,
+  rulesBtnLabel: d,
+  rulesTitle: I,
+  termsTitle: T,
+  termsText: p,
+  primaryColor: u,
+  inviteLink: x,
+  socialLinks: D,
   inviteCardTitle: k,
-  inviteCardSubtext: x,
-  inviteCardBtnLabel: h,
-  loading: u,
-  renderToNode: I,
-  onClose: N
+  inviteCardSubtext: w,
+  inviteCardBtnLabel: g,
+  loading: a,
+  renderToNode: A,
+  inviterName: c,
+  sdk: b,
+  onClose: j
 }) => {
-  const [o, p] = c(0), [l, b] = c(!1), [n, e] = c(m);
-  j(() => {
+  const [o, C] = h(0), [l, O] = h(!1), [n, e] = h(m);
+  s(() => {
     i != null && i.length ? e({ ...m, steps: !0 }) : r != null && r.length ? e({ ...m, rules: !0 }) : e({ ...m, inviteCard: !0 });
   }, []);
-  const w = H(() => n.steps && o === 0 ? "Continue" : n.rules ? l || !a ? "Got it" : a : n.inviteCard ? h || "Play Now" : "Next", [n, o, l, a, h]), A = z(() => {
-    i != null && i.length && o < i.length - 1 ? p((d) => ++d) : r != null && r.length && n.steps ? e({ ...m, rules: !0 }) : n.rules && e({ ...m, inviteCard: !0 });
-  }, [o, i == null ? void 0 : i.length, r == null ? void 0 : r.length, n, p, e]), D = async () => {
-    n.inviteCard ? await S.onboardingStatus.submitInplay() : n.rules && l ? b(!1) : A();
+  const H = E(() => n.steps && o === 0 ? "Continue" : n.rules ? l || !d ? "Got it" : d : n.inviteCard ? g || "Play Now" : "Next", [n, o, l, d, g]), N = F(() => {
+    i != null && i.length && o < i.length - 1 ? C((f) => ++f) : r != null && r.length && n.steps ? e({ ...m, rules: !0 }) : n.rules && e({ ...m, inviteCard: !0 });
+  }, [o, i == null ? void 0 : i.length, r == null ? void 0 : r.length, n, C, e]), z = async () => {
+    n.inviteCard ? await v.onboardingStatus.submitInplay() : n.rules && l ? O(!1) : N();
   };
-  return /* @__PURE__ */ t(E, { children: ({ width: d, height: C }) => /* @__PURE__ */ O(q, { style: { width: d, height: C, maxHeight: C }, children: [
-    /* @__PURE__ */ t(J, { children: /* @__PURE__ */ t(K, { onClick: N, children: /* @__PURE__ */ t(Q, { name: "icon-close-btn-gray" }) }) }),
-    /* @__PURE__ */ O(U, { children: [
+  return s(() => {
+    !a && c && b.inviteDisplayed();
+  }, [a, c, b]), /* @__PURE__ */ t(G, { children: ({ width: f, height: S }) => /* @__PURE__ */ y(J, { style: { width: f, height: S, maxHeight: S }, children: [
+    /* @__PURE__ */ t(K, { children: /* @__PURE__ */ t(Q, { onClick: j, children: /* @__PURE__ */ t(V, { name: "icon-close-btn-gray" }) }) }),
+    /* @__PURE__ */ y(W, { children: [
       n.steps && (i == null ? void 0 : i.length) && /* @__PURE__ */ t(
-        G,
+        P,
         {
-          loading: u,
+          loading: a,
           stepsCount: i.length,
           currentStep: o,
+          inviterName: c,
           ...i[o]
         }
       ),
       n.rules && !l && /* @__PURE__ */ t(
-        P,
+        U,
         {
           rules: r,
-          rulesTitle: y,
-          termsText: f,
-          primaryColor: g,
-          openTerms: () => b(!0)
+          rulesTitle: I,
+          termsText: p,
+          primaryColor: u,
+          openTerms: () => O(!0)
         }
       ),
-      n.rules && l && /* @__PURE__ */ t(R, { termsTitle: s, termsText: f }),
+      n.rules && l && /* @__PURE__ */ t(q, { termsTitle: T, termsText: p }),
       n.inviteCard && /* @__PURE__ */ t(
-        M,
+        R,
         {
-          inviteLink: v,
+          inviteLink: x,
           inviteCardTitle: k,
-          inviteCardSubtext: x,
-          primaryColor: g,
-          socialLinks: T,
-          renderToNode: I
+          inviteCardSubtext: w,
+          primaryColor: u,
+          socialLinks: D,
+          renderToNode: A
         }
       )
     ] }),
-    /* @__PURE__ */ t(V, { children: /* @__PURE__ */ t(F, { loading: u, style: { width: "100%" }, children: /* @__PURE__ */ t(W, { onClick: D, children: w }) }) })
+    /* @__PURE__ */ t(X, { children: /* @__PURE__ */ t(M, { loading: a, style: { width: "100%" }, children: /* @__PURE__ */ t(Y, { onClick: z, children: H }) }) })
   ] }) });
 };
 export {
-  bi as Onboarding
+  si as OnboardingUI
 };

package/lib/ui/gamification/onboarding/invitingUser/index.js

@@ -1,16 +1,18 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import { Container as t, Avatar as e, Content as s, Name as m } from "./styles.js";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { abbreviate as t } from "../../../../utils/common.js";
+import { Container as n, Avatar as c, AvatarPlaceholder as m, Content as s, Name as l } from "./styles.js";
 import "@linaria/react";
-const f = ({ avatar: i, name: n }) => /* @__PURE__ */ r(t, { children: [
-  i && /* @__PURE__ */ o(e, { src: i }),
-  /* @__PURE__ */ r(s, { children: [
-    /* @__PURE__ */ r(m, { children: [
-      n,
+const a = ({ avatar: r, name: o }) => /* @__PURE__ */ i(n, { children: [
+  r && /* @__PURE__ */ e(c, { src: r }),
+  !r && /* @__PURE__ */ e(m, { children: t(o || "") }),
+  /* @__PURE__ */ i(s, { children: [
+    /* @__PURE__ */ i(l, { children: [
+      o,
       " "
     ] }),
     "is waiting for you!"
   ] })
 ] });
 export {
-  f as InvitingUser
+  a as InvitingUser
 };

package/lib/ui/gamification/onboarding/invitingUser/styles.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Avatar: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const AvatarPlaceholder: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Name: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

package/lib/ui/gamification/onboarding/invitingUser/styles.js

@@ -1,24 +1,29 @@
 import { styled as s } from "@linaria/react";
-const n = /* @__PURE__ */ s("div")({
+const e = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "cl51m2q",
   propsAsIs: !1
-}), e = /* @__PURE__ */ s("img")({
+}), n = /* @__PURE__ */ s("img")({
   name: "Avatar",
   class: "a2yhhhr",
   propsAsIs: !1
 }), t = /* @__PURE__ */ s("div")({
+  name: "AvatarPlaceholder",
+  class: "a1dtxxlr",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
   name: "Content",
-  class: "c1dtxxlr",
+  class: "c12clm3w",
   propsAsIs: !1
 }), o = /* @__PURE__ */ s("span")({
   name: "Name",
-  class: "n12clm3w",
+  class: "n14lctn7",
   propsAsIs: !1
 });
 export {
-  e as Avatar,
-  n as Container,
-  t as Content,
+  n as Avatar,
+  t as AvatarPlaceholder,
+  e as Container,
+  l as Content,
   o as Name
 };

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/index.d.ts

@@ -3,6 +3,7 @@ type OnboardingInstructionsProps = OnboardingStep & {
     loading: boolean;
     stepsCount: number;
     currentStep: number;
+    inviterName?: string;
 };
 export type OnboardingStep = {
     graphicSrc: string;

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/index.js

@@ -1,21 +1,26 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { Skeleton as c } from "../../../../skeleton/index.js";
-import { Container as m, Content as p, Graphic as s, Headline as a, StepsContainer as l, StepIndicator as x } from "./styles.js";
-import "../../../../skeleton/styles.js";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { InvitingUser as s } from "../../invitingUser/index.js";
+import { Skeleton as p } from "../../../../skeleton/index.js";
+import { Container as h, Content as a, Graphic as l, Headline as f, InvitingUserWrap as x, StepsContainer as g, StepIndicator as y } from "./styles.js";
+import "../../../../../utils/common.js";
+import "../../invitingUser/styles.js";
 import "@linaria/react";
-const v = ({
-  loading: t,
-  graphicSrc: d,
-  headline: i,
-  stepsCount: h,
-  currentStep: e
-}) => /* @__PURE__ */ o(m, { children: [
-  /* @__PURE__ */ o(p, { "data-centered": e === 0, children: [
-    /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(c, { loading: t, style: { width: "80px", height: "80px" }, children: /* @__PURE__ */ r("img", { src: d, alt: i }) }) }),
-    i && /* @__PURE__ */ r(c, { loading: t, children: /* @__PURE__ */ r(a, { children: i }) })
+import "../../../../skeleton/styles.js";
+const G = ({
+  loading: i,
+  graphicSrc: c,
+  headline: t,
+  stepsCount: d,
+  currentStep: n,
+  inviterName: e
+}) => /* @__PURE__ */ m(h, { children: [
+  /* @__PURE__ */ m(a, { "data-centered": n === 0, children: [
+    /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(p, { loading: i, style: { width: "80px", height: "80px" }, children: /* @__PURE__ */ r("img", { src: c, alt: t }) }) }),
+    t && /* @__PURE__ */ r(p, { loading: i, children: /* @__PURE__ */ r(f, { children: t }) })
   ] }),
-  /* @__PURE__ */ r(l, { style: t ? { visibility: "hidden" } : {}, children: Array.from({ length: h }).map((f, n) => /* @__PURE__ */ r(x, { "data-active": e === n }, n)) })
+  e && n === 0 && /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(s, { name: e }) }),
+  /* @__PURE__ */ r(g, { style: i ? { visibility: "hidden" } : {}, children: Array.from({ length: d }).map((I, o) => /* @__PURE__ */ r(y, { "data-active": n === o }, o)) })
 ] });
 export {
-  v as OnboardingInstructions
+  G as OnboardingInstructions
 };

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/styles.d.ts

@@ -5,3 +5,4 @@ export declare const Headline: import("@linaria/react").StyledComponent<import("
 export declare const Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const StepsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const StepIndicator: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const InvitingUserWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/styles.js

@@ -7,7 +7,7 @@ const a = /* @__PURE__ */ s("div")({
   name: "Graphic",
   class: "gjyzpp7",
   propsAsIs: !1
-}), o = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "Headline",
   class: "h16mldgz",
   propsAsIs: !1
@@ -15,20 +15,25 @@ const a = /* @__PURE__ */ s("div")({
   name: "Content",
   class: "c69js65",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
+}), o = /* @__PURE__ */ s("div")({
   name: "StepsContainer",
   class: "smm7qmo",
   propsAsIs: !1
-}), c = /* @__PURE__ */ s("span")({
+}), i = /* @__PURE__ */ s("span")({
   name: "StepIndicator",
   class: "s17knuw2",
   propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "InvitingUserWrap",
+  class: "i1b74psg",
+  propsAsIs: !1
 });
 export {
   a as Container,
   t as Content,
   e as Graphic,
-  o as Headline,
-  c as StepIndicator,
-  p as StepsContainer
+  p as Headline,
+  r as InvitingUserWrap,
+  i as StepIndicator,
+  o as StepsContainer
 };

package/lib/ui/gamification/question/insight/index.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import { InsightContentProps } from '../../../questions/insight';
-export declare const Insight: React.FC<{
+import { VideoPlayerProps } from '../../../video-player';
+type InsightProps = InsightContentProps & {
     openInsight?: (questionId: string) => void;
-} & InsightContentProps>;
+    controlVideo: VideoPlayerProps['controlVideo'];
+};
+export declare const Insight: React.FC<InsightProps>;
+export {};

package/lib/ui/gamification/question/insight/index.js

@@ -1,20 +1,17 @@
 import { jsxs as m, jsx as i } from "react/jsx-runtime";
 import { InsightContent as n } from "../../../questions/insight/index.js";
 import { Container as p, ActionBtn as c } from "./styles.js";
+import "@streamlayer/sdk-web-types";
 import "../../../video-player/index.js";
 import "react";
 import "../../../icons/index.js";
 import "@linaria/react";
 import "../../../video-player/styles.js";
 import "../../../questions/insight/styles.js";
-const a = ({
-  openInsight: r,
-  questionId: t,
-  ...o
-}) => /* @__PURE__ */ m(p, { children: [
+const d = ({ openInsight: r, questionId: t, ...o }) => /* @__PURE__ */ m(p, { children: [
   /* @__PURE__ */ i(n, { questionId: t, ...o }),
   r && /* @__PURE__ */ i(c, { onClick: () => r(t), children: "View Insight" })
 ] });
 export {
-  a as Insight
+  d as Insight
 };

package/lib/ui/gamification/question/list/index.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import type { Gamification } from '@streamlayer/feature-gamification';
+import { VideoPlayerProps } from '../../../video-player';
 type FeedItem = Exclude<Awaited<ReturnType<Exclude<Gamification['feedList'], undefined>['getValue']>>, undefined>;
 interface QuestionListProps {
     questions: FeedItem;
     openQuestion: (questionId: string) => void;
+    controlVideo: VideoPlayerProps['controlVideo'];
 }
 export declare const QuestionList: React.FC<QuestionListProps>;
 export {};

package/lib/ui/gamification/question/list/index.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import { Question as s } from "../index.js";
-import { Insight as b } from "../insight/index.js";
-import { Twitter as p } from "../twitter/index.js";
-import { QuestionsContainer as c } from "./styles.js";
+import { Question as b } from "../index.js";
+import { Insight as p } from "../insight/index.js";
+import { Twitter as c } from "../twitter/index.js";
+import { QuestionsContainer as f } from "./styles.js";
 import "@streamlayer/sdk-web-types";
 import "../../constants.js";
 import "../styles.js";
@@ -22,22 +22,31 @@ import "../../../questions/twitter/styles.js";
 import "../twitter/styles.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
-const H = ({ questions: e, openQuestion: m }) => /* @__PURE__ */ r(c, { children: e == null ? void 0 : e.map((t) => {
-  var o, u, n;
-  if (t.type === "question" && ((o = t.attributes) == null ? void 0 : o.attributes.case) === "question") {
+const J = ({ questions: e, openQuestion: m, controlVideo: o }) => /* @__PURE__ */ r(f, { children: e == null ? void 0 : e.map((t) => {
+  var u, a, n;
+  if (t.type === "question" && ((u = t.attributes) == null ? void 0 : u.attributes.case) === "question") {
     const i = t.attributes.attributes.value;
-    return /* @__PURE__ */ r(s, { openQuestion: m, ...i }, i.questionId);
+    return /* @__PURE__ */ r(b, { openQuestion: m, ...i }, i.questionId);
   }
-  if (t.type === "insight" && ((u = t.attributes) == null ? void 0 : u.attributes.case) === "insight") {
+  if (t.type === "insight" && ((a = t.attributes) == null ? void 0 : a.attributes.case) === "insight") {
     const i = t.attributes.attributes.value;
-    return /* @__PURE__ */ r(b, { openInsight: m, ...i }, i.questionId);
+    return /* @__PURE__ */ r(p, { openInsight: m, controlVideo: o, ...i }, i.questionId);
   }
   if (t.type === "tweet" && ((n = t.attributes) == null ? void 0 : n.attributes.case) === "tweet") {
-    const i = t.attributes.attributes.value, a = t.attributes.id;
-    return /* @__PURE__ */ r(p, { openTweet: m, ...i, tweetId: a }, a);
+    const i = t.attributes.attributes.value, s = t.attributes.id;
+    return /* @__PURE__ */ r(
+      c,
+      {
+        openTweet: m,
+        controlVideo: o,
+        ...i,
+        tweetId: s
+      },
+      s
+    );
   }
   return null;
 }) });
 export {
-  H as QuestionList
+  J as QuestionList
 };

package/lib/ui/gamification/question/notification/index.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import type { Notification as NotificationProps } from '@streamlayer/sdk-web-notifications';
-export declare const Notification: React.FC<NotificationProps>;
+import { VideoPlayerProps } from '../../../video-player';
+export declare const Notification: React.FC<NotificationProps & Pick<VideoPlayerProps, 'controlVideo'>>;

package/lib/ui/gamification/question/notification/index.js

@@ -1,9 +1,9 @@
-import { jsxs as a, jsx as o, Fragment as c } from "react/jsx-runtime";
+import { jsxs as a, jsx as o, Fragment as d } from "react/jsx-runtime";
 import { QuestionType as t } from "@streamlayer/sdk-web-types";
-import { QuestionTypeData as d } from "../../constants.js";
-import { Insight as T } from "./insight/index.js";
-import { Container as f, CloseIconWrap as h, CloseIcon as E, Header as I, TypeIcon as C, TypeName as s, Question as A, AnswerButton as W } from "./styles.js";
-import { Tweet as x } from "./tweet/index.js";
+import { QuestionTypeData as T } from "../../constants.js";
+import { Insight as f } from "./insight/index.js";
+import { Container as h, CloseIconWrap as E, CloseIcon as I, Header as C, TypeIcon as s, TypeName as A, Question as W, AnswerButton as x } from "./styles.js";
+import { Tweet as D } from "./tweet/index.js";
 import "../../../video-player/index.js";
 import "react";
 import "../../../icons/index.js";
@@ -16,36 +16,37 @@ import "../../../../utils/common.js";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "./tweet/styles.js";
-const z = ({
+const G = ({
   close: n,
   action: i,
-  data: { questionType: r, question: m, insight: l, tweet: e }
+  controlVideo: l,
+  data: { questionType: r, question: m, insight: e, tweet: c }
 }) => {
-  const p = d[r];
-  return p ? /* @__PURE__ */ a(f, { style: r === t.TWEET ? { paddingTop: "12px" } : {}, children: [
-    /* @__PURE__ */ o(h, { onClick: n, children: /* @__PURE__ */ o(E, { name: "icon-cross" }) }),
-    r !== t.TWEET && /* @__PURE__ */ a(I, { children: [
+  const p = T[r];
+  return p ? /* @__PURE__ */ a(h, { style: r === t.TWEET ? { paddingTop: "12px" } : {}, children: [
+    /* @__PURE__ */ o(E, { onClick: n, children: /* @__PURE__ */ o(I, { name: "icon-cross" }) }),
+    r !== t.TWEET && /* @__PURE__ */ a(C, { children: [
       /* @__PURE__ */ o(
-        C,
+        s,
         {
           "data-type-trivia": r === t.TRIVIA,
           "data-type-poll": r === t.POLL,
           name: p.iconName
         }
       ),
-      /* @__PURE__ */ o(s, { children: p.label })
+      /* @__PURE__ */ o(A, { children: p.label })
     ] }),
-    r === t.FACTOID && /* @__PURE__ */ o(T, { ...l, action: i }),
+    r === t.FACTOID && /* @__PURE__ */ o(f, { ...e, action: i, controlVideo: l }),
     r === t.TWEET && // ToDo: connect with real Api data
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    /* @__PURE__ */ o(x, { ...e, action: i }),
-    r !== t.FACTOID && r !== t.TWEET && /* @__PURE__ */ a(c, { children: [
-      /* @__PURE__ */ o(A, { children: m == null ? void 0 : m.title }),
-      /* @__PURE__ */ o(W, { onClick: i, children: "Answer" })
+    /* @__PURE__ */ o(D, { ...c, action: i }),
+    r !== t.FACTOID && r !== t.TWEET && /* @__PURE__ */ a(d, { children: [
+      /* @__PURE__ */ o(W, { children: m == null ? void 0 : m.title }),
+      /* @__PURE__ */ o(x, { onClick: i, children: "Answer" })
     ] })
   ] }) : null;
 };
 export {
-  z as Notification
+  G as Notification
 };

package/lib/ui/gamification/question/notification/insight/index.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import type { Notification } from '@streamlayer/sdk-web-notifications';
 import { InsightHistory, InstantView } from '@streamlayer/sdk-web-types';
+import { VideoPlayerProps } from '../../../../video-player';
 export type InsightProps = InstantView & {
-    imageMode: InsightHistory['imageMode'];
+    imageMode?: InsightHistory['imageMode'];
     action: Notification['action'];
+    controlVideo: VideoPlayerProps['controlVideo'];
 };
 export declare const Insight: React.FC<InsightProps>;

package/lib/ui/gamification/question/notification/insight/index.js

@@ -1,20 +1,20 @@
 import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { QuestionImages as c } from "@streamlayer/sdk-web-types";
-import { VideoPlayer as p } from "../../../../video-player/index.js";
-import { InsightContainer as e, ImageContainer as h, Image as u, InsightContent as a, Title as I, Description as g, ActionBtn as f } from "./styles.js";
+import { QuestionImages as p } from "@streamlayer/sdk-web-types";
+import { VideoPlayer as e } from "../../../../video-player/index.js";
+import { InsightContainer as h, ImageContainer as u, Image as a, InsightContent as I, Title as g, Description as f, ActionBtn as C } from "./styles.js";
 import "react";
 import "../../../../icons/index.js";
 import "@linaria/react";
 import "../../../../video-player/styles.js";
-const w = ({ video: r, image: n, imageMode: s, heading: i, body: o, action: l }) => /* @__PURE__ */ m(e, { children: [
-  (r == null ? void 0 : r.url) && /* @__PURE__ */ t(p, { source: r.url, poster: r.thumbnailUrl }),
-  n && !(r != null && r.url) && /* @__PURE__ */ t(h, { "data-rounded": s === c.ROUNDED, children: /* @__PURE__ */ t(u, { src: n, alt: i }) }),
-  /* @__PURE__ */ m(a, { children: [
-    /* @__PURE__ */ t(I, { children: i }),
-    /* @__PURE__ */ t(g, { children: o }),
-    l && /* @__PURE__ */ t(f, { onClick: l, children: "View Insight" })
+const y = ({ video: r, image: n, imageMode: s, heading: i, body: o, action: l, controlVideo: c }) => /* @__PURE__ */ m(h, { children: [
+  (r == null ? void 0 : r.url) && /* @__PURE__ */ t(e, { source: r.url, poster: r.thumbnailUrl, controlVideo: c }),
+  n && !(r != null && r.url) && /* @__PURE__ */ t(u, { "data-rounded": s === p.ROUNDED, children: /* @__PURE__ */ t(a, { src: n, alt: i }) }),
+  /* @__PURE__ */ m(I, { children: [
+    /* @__PURE__ */ t(g, { children: i }),
+    /* @__PURE__ */ t(f, { children: o }),
+    l && /* @__PURE__ */ t(C, { onClick: l, children: "View Insight" })
   ] })
 ] });
 export {
-  w as Insight
+  y as Insight
 };

package/lib/ui/gamification/question/twitter/index.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import { type TwitterContentProps } from '../../../questions/twitter';
-export declare const Twitter: React.FC<TwitterContentProps & {
+import { VideoPlayerProps } from '../../../video-player';
+type TwitterProps = TwitterContentProps & {
     openTweet?: (questionId: string) => void;
-}>;
+    controlVideo: VideoPlayerProps['controlVideo'];
+};
+export declare const Twitter: React.FC<TwitterProps>;
+export {};

package/lib/ui/gamification/question/twitter/index.js

@@ -12,10 +12,7 @@ import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
-const k = ({
-  openTweet: o,
-  ...t
-}) => /* @__PURE__ */ r(e, { children: [
+const k = ({ openTweet: o, ...t }) => /* @__PURE__ */ r(e, { children: [
   t.title && /* @__PURE__ */ i(n, { children: t.title }),
   /* @__PURE__ */ i(m, { ...t }),
   o && /* @__PURE__ */ i(p, { onClick: () => o(t.tweetId), children: "View Insight" })

package/lib/ui/gamification/vote/insight-details/index.js

@@ -1,19 +1,20 @@
 import { jsxs as o, jsx as m } from "react/jsx-runtime";
-import { SvgIcon as p } from "../../../icons/index.js";
+import { SvgIcon as l } from "../../../icons/index.js";
 import { InsightContent as b } from "../../../questions/insight/index.js";
 import { Container as k, WebLinkBtn as c } from "./styles.js";
 import "@linaria/react";
 import "react";
+import "@streamlayer/sdk-web-types";
 import "../../../video-player/index.js";
 import "../../../video-player/styles.js";
 import "../../../questions/insight/styles.js";
-const j = ({ instantView: r, ...l }) => /* @__PURE__ */ o(k, { children: [
-  /* @__PURE__ */ m(b, { instantView: r, ...l, isDetail: !0 }),
+const C = ({ instantView: r, ...p }) => /* @__PURE__ */ o(k, { children: [
+  /* @__PURE__ */ m(b, { instantView: r, ...p, isDetail: !0 }),
   (r == null ? void 0 : r.webLink) && /* @__PURE__ */ o(c, { href: r == null ? void 0 : r.webLink.url, target: "_blank", children: [
     r == null ? void 0 : r.webLink.label,
-    /* @__PURE__ */ m(p, { name: "icon-external-link" })
+    /* @__PURE__ */ m(l, { name: "icon-external-link" })
   ] })
 ] });
 export {
-  j as InsightDetails
+  C as InsightDetails
 };

package/lib/ui/modal/index.d.ts

@@ -1,9 +1,14 @@
 /// <reference types="react" />
 type ModalProps = {
-    Modal: React.ReactNode;
+    children: React.ReactNode;
     container: React.MutableRefObject<HTMLDivElement | null>;
     fixedView: boolean;
     useContainer: boolean;
 };
-export declare const createModal: ({ Modal, container, fixedView, useContainer }: ModalProps) => import("react").ReactPortal | null;
+/**
+ * ModalPortal is a component that renders the Modal into the portal on the container provided in the props.
+ * It also handles the fixed view of the modal, when the modal is open in fullscreen view.
+ * the fixedView prop is used to initiate the fixed view of the modal.
+ */
+export declare const ModalPortal: React.FC<ModalProps>;
 export {};