@streamlayer/react-ui 1.5.0 → 1.6.0

package/lib/ui/advertisement/index.js

@@ -1,20 +1,29 @@
-import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import { useStore as n } from "@nanostores/react";
-import { PromotionType as d } from "@streamlayer/sdk-web-types";
-import { Banner as u } from "./banner/index.js";
-import { Overlay as t } from "./overlay/index.js";
-import { Sidebar as s } from "./sidebar/index.js";
-import { OverlayContainer as f } from "./overlay/styles.js";
-const y = (r) => (r == null ? void 0 : r.type) === d.INGAME_IAB11_LBAR || (r == null ? void 0 : r.type) === d.INGAME_IAB21_LBAR, I = (r) => (r == null ? void 0 : r.type) === d.INGAME_IAB11 || (r == null ? void 0 : r.type) === d.INGAME_IAB21, E = ({ advertisement: r, skipTypeCheck: c, layoutMode: A = "side-by-side", sidebar: e, banner: a }) => {
-  const l = n(r.data);
-  return !l.data && l.loading ? null : l.error ? /* @__PURE__ */ o("div", { children: [
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { useStore as f } from "@nanostores/react";
+import { PromotionType as t } from "@streamlayer/sdk-web-types";
+import { Banner as s } from "./banner/index.js";
+import { Notification as u } from "./notification/index.js";
+import { Overlay as c } from "./overlay/index.js";
+import { Sidebar as I } from "./sidebar/index.js";
+import { OverlayContainer as y } from "./overlay/styles.js";
+const A = (r) => (r == null ? void 0 : r.type) === t.INGAME_IAB11_LBAR || (r == null ? void 0 : r.type) === t.INGAME_IAB21_LBAR, h = (r) => (r == null ? void 0 : r.type) === t.INGAME_IAB11 || (r == null ? void 0 : r.type) === t.INGAME_IAB21, G = ({ advertisement: r, skipTypeCheck: d, layoutMode: m = "side-by-side", sidebar: n, isNotification: e, banner: l }) => {
+  const o = f(r.data);
+  return !o.data && o.loading ? null : o.error ? /* @__PURE__ */ a("div", { children: [
     "error ",
     /* @__PURE__ */ i("button", { onClick: r.close, children: "close" })
-  ] }) : l.data ? !e && !a && (c || I(l.data)) ? /* @__PURE__ */ i(f, { className: "PromoOverlayContainer", children: /* @__PURE__ */ i(t, { promotionId: r.id, promotion: l.data, onClose: r.close }) }) : e && (c || y(l.data)) ? /* @__PURE__ */ i(s, { className: "PromoSidebarContainer", direction: e, hiding: r.hiding, children: /* @__PURE__ */ i(t, { promotionId: r.id, promotion: l.data, onClose: r.close }) }) : a ? /* @__PURE__ */ i(u, { promotionId: r.id, hiding: r.hiding, promotion: l.data, direction: a }) : null : /* @__PURE__ */ o("div", { children: [
+  ] }) : o.data ? e ? /* @__PURE__ */ i(u, { notification: o.data.notification, promotionId: r.id }) : !n && !l && (d || h(o.data.promotions)) ? /* @__PURE__ */ i(y, { className: "PromoOverlayContainer", children: /* @__PURE__ */ i(c, { promotionId: r.id, promotion: o.data.promotions, onClose: r.close }) }) : n && (d || A(o.data.promotions)) ? /* @__PURE__ */ i(I, { className: "PromoSidebarContainer", direction: n, hiding: r.hiding, children: /* @__PURE__ */ i(c, { promotionId: r.id, promotion: o.data.promotions, onClose: r.close }) }) : l ? /* @__PURE__ */ i(
+    s,
+    {
+      promotionId: r.id,
+      hiding: r.hiding,
+      promotion: o.data.promotions,
+      direction: l
+    }
+  ) : null : /* @__PURE__ */ a("div", { children: [
     "empty promo ",
     /* @__PURE__ */ i("button", { onClick: r.close, children: "close" })
   ] });
 };
 export {
-  E as AdvertisementUI
+  G as AdvertisementUI
 };

package/lib/ui/advertisement/notification/index.d.ts

@@ -0,0 +1,7 @@
+import { QuestionNotification } from '@streamlayer/sdk-web-types';
+export declare const Notification: React.FC<{
+    notification?: QuestionNotification;
+    promotionId: string;
+    direction?: 'left' | 'right';
+    hiding?: boolean;
+}>;

package/lib/ui/advertisement/notification/index.js

@@ -0,0 +1,31 @@
+import { jsx as i, jsxs as t } from "react/jsx-runtime";
+import { NotificationPromotionImagePosition as e, NotificationEnabled as h, NotificationSponsorLogoMode as O } from "@streamlayer/sdk-web-types";
+import { SlideIn as M } from "../../slide-in/index.js";
+import { MediaImgFit as l, MediaImgCentered as T, MediaImgBottom as C, MediaImgSolid as f, MediaImgMiddle as E, NotificationContainer as L, Logo as S, NotificationContent as b, Body as x, Title as D, Text as P, Button as _, StyledChevronRight as y } from "./styles.js";
+const F = {
+  [e.UNSET]: l,
+  [e.FIT]: l,
+  [e.CENTERED]: T,
+  [e.BOTTOM]: C,
+  [e.SOLID]: f,
+  [e.MIDDLE]: E
+}, u = ({ notification: r, promotionId: R, hiding: m, direction: s = "left" }) => {
+  if (!r || !r.promotion || r.enabled !== h.NOTIFICATION_ENABLED)
+    return null;
+  const { title: n, body: d, image: c, promotion: I } = r, { sponsorLogo: a, sponsorLogoMode: g, imagePosition: N, ctaButton: o } = I, p = F[N];
+  return /* @__PURE__ */ i(M, { direction: s, hiding: m, children: /* @__PURE__ */ t(L, { children: [
+    g !== O.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ i(S, { children: /* @__PURE__ */ i("img", { src: a, alt: n }) }),
+    /* @__PURE__ */ t(b, { children: [
+      /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i("img", { src: c, alt: "" }) }),
+      /* @__PURE__ */ t(x, { children: [
+        n && /* @__PURE__ */ i(D, { children: n }),
+        d && /* @__PURE__ */ i(P, { children: d })
+      ] }),
+      /* @__PURE__ */ i(_, { name: "promo-button", style: { color: o == null ? void 0 : o.textColor, backgroundColor: o == null ? void 0 : o.color }, children: (o == null ? void 0 : o.label) || "Open" }),
+      /* @__PURE__ */ i(y, { name: "chevronRight" })
+    ] })
+  ] }) });
+};
+export {
+  u as Notification
+};

package/lib/ui/advertisement/notification/styles.d.ts

@@ -0,0 +1,35 @@
+export declare const CardContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const NotificationContent: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const NotificationContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Body: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Title: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Text: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Media: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const MediaImgFit: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const MediaImgCentered: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const MediaImgBottom: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const MediaImgSolid: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const MediaImgMiddle: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const Button: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const StyledChevronRight: any;
+export declare const Logo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/advertisement/notification/styles.js

@@ -0,0 +1,80 @@
+import { styled as s } from "@linaria/react";
+import { SvgIcon as t } from "../../icons/index.js";
+const d = /* @__PURE__ */ s("div")({
+  name: "CardContainer",
+  class: "cghcyv4",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("div")({
+  name: "NotificationContent",
+  class: "n1ku6hz",
+  propsAsIs: !1
+}), g = /* @__PURE__ */ s("div")({
+  name: "NotificationContainer",
+  class: "nbxqmol",
+  propsAsIs: !1
+}), v = /* @__PURE__ */ s("div")({
+  name: "Body",
+  class: "b1gu3eml",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "t1u17zva",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("div")({
+  name: "Text",
+  class: "t10ko1g",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("div")({
+  name: "Media",
+  class: "mntc42e",
+  propsAsIs: !1
+}), n = () => e, M = /* @__PURE__ */ s(n())({
+  name: "MediaImgFit",
+  class: "ml060eo",
+  propsAsIs: !0
+}), a = () => e, o = /* @__PURE__ */ s(a())({
+  name: "MediaImgCentered",
+  class: "m1vqlvig",
+  propsAsIs: !0
+}), i = () => o, u = /* @__PURE__ */ s(i())({
+  name: "MediaImgBottom",
+  class: "m1e7tvi5",
+  propsAsIs: !0
+}), c = () => e, C = /* @__PURE__ */ s(c())({
+  name: "MediaImgSolid",
+  class: "mqvntt2",
+  propsAsIs: !0
+}), m = () => o, x = /* @__PURE__ */ s(m())({
+  name: "MediaImgMiddle",
+  class: "m12jtj3u",
+  propsAsIs: !0
+}), h = /* @__PURE__ */ s("button")({
+  name: "Button",
+  class: "bkq1frv",
+  propsAsIs: !1
+}), p = () => t, y = /* @__PURE__ */ s(p())({
+  name: "StyledChevronRight",
+  class: "sis90pl",
+  propsAsIs: !0
+}), B = /* @__PURE__ */ s("div")({
+  name: "Logo",
+  class: "l9mjmz3",
+  propsAsIs: !1
+});
+export {
+  v as Body,
+  h as Button,
+  d as CardContainer,
+  B as Logo,
+  e as Media,
+  u as MediaImgBottom,
+  o as MediaImgCentered,
+  M as MediaImgFit,
+  x as MediaImgMiddle,
+  C as MediaImgSolid,
+  g as NotificationContainer,
+  I as NotificationContent,
+  y as StyledChevronRight,
+  A as Text,
+  f as Title
+};

package/lib/ui/advertisement/overlay/index.js

@@ -1,26 +1,26 @@
 import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { cx as R } from "@linaria/core";
+import { cx as D } from "@linaria/core";
 import { eventBus as U } from "@streamlayer/sdk-web-interfaces";
-import { PromotionType as D, PromotionLogoMode as n } from "@streamlayer/sdk-web-types";
+import { PromotionType as R, PromotionLogoMode as l } from "@streamlayer/sdk-web-types";
 import { VideoPlayer as j } from "../../video-player/index.js";
-import { PromoOverlay as G, Header as H, HeaderContent as W, headerContentShift as V, SponsorLogo as F, Sponsor as q, SponsorName as w, SponsorText as z, ADLogo as J, SponsoredText as K, CloseIconWrap as Q, CloseIcon as X, Media as Y, shiftMedia as Z, Content as _, PromoImg as $, Title as ee, hideOnMobile as re, Description as ae, ActionBtnWrap as ne, ActionButton as le } from "./styles.js";
+import { PromoOverlay as G, Header as H, HeaderContent as W, headerContentShift as V, SponsorLogo as F, Sponsor as q, SponsorName as w, SponsorText as z, ADLogo as J, SponsoredText as K, CloseIconWrap as Q, CloseIcon as X, Media as Y, shiftMedia as Z, Content as _, PromoImg as $, Title as ee, hideOnMobile as re, Description as ae, ActionBtnWrap as le, ActionButton as ne } from "./styles.js";
 import { OverlayContainer as ge } from "./styles.js";
-const he = ({ promotion: e, promotionId: t, onClose: k }) => {
-  var s, c, d, i, h, b, y, g, f, p, u, v, m, C, x, M, A, B, N, P, T, E, I, L, S, O;
-  const l = e.type === D.INGAME_IAB11_LBAR || e.type === D.INGAME_IAB11, o = ((s = e.sponsor) == null ? void 0 : s.logo) && e.logoMode === n.CENTER;
+const he = ({ promotion: e, promotionId: s, onClose: k }) => {
+  var t, c, d, i, h, b, y, g, p, m, f, u, v, C, N, x, A, T, M, P, B, I, S, E, L, O;
+  const n = e.type === R.INGAME_IAB11_LBAR || e.type === R.INGAME_IAB11, o = ((t = e.sponsor) == null ? void 0 : t.logo) && e.logoMode === l.CENTER;
   return /* @__PURE__ */ a(G, { className: "PromoOverlay", children: [
     /* @__PURE__ */ a(H, { children: [
-      /* @__PURE__ */ a(W, { className: R(!o && V), children: [
-        ((c = e.sponsor) == null ? void 0 : c.logo) && e.logoMode === n.LEFT && /* @__PURE__ */ r(F, { src: (d = e.sponsor) == null ? void 0 : d.logo, alt: "promo" }),
+      /* @__PURE__ */ a(W, { className: D(!o && V), children: [
+        ((c = e.sponsor) == null ? void 0 : c.logo) && e.logoMode === l.LEFT && /* @__PURE__ */ r(F, { src: (d = e.sponsor) == null ? void 0 : d.logo, alt: "promo" }),
         /* @__PURE__ */ a(
           q,
           {
             style: {
-              paddingLeft: (i = e.sponsor) != null && i.logo && e.logoMode === n.LEFT ? "0px" : "8px"
+              paddingLeft: (i = e.sponsor) != null && i.logo && e.logoMode === l.LEFT ? "0px" : "8px"
             },
             children: [
-              ((h = e.sponsor) == null ? void 0 : h.logo) && e.logoMode === n.LEFT && /* @__PURE__ */ r(w, { children: (b = e.sponsor) == null ? void 0 : b.name }),
-              /* @__PURE__ */ a(z, { children: [
+              ((h = e.sponsor) == null ? void 0 : h.logo) && e.logoMode === l.LEFT && /* @__PURE__ */ r(w, { children: (b = e.sponsor) == null ? void 0 : b.name }),
+              /* @__PURE__ */ a(z, { className: "SponsorText", children: [
                 /* @__PURE__ */ r(J, { children: "AD" }),
                 /* @__PURE__ */ r(K, { children: "SPONSORED" })
               ] })
@@ -28,45 +28,45 @@ const he = ({ promotion: e, promotionId: t, onClose: k }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ r(Q, { onClick: k, children: /* @__PURE__ */ r(X, { name: "icon-cross" }) })
+      /* @__PURE__ */ r(Q, { className: "ClosePromoIcon", onClick: k, children: /* @__PURE__ */ r(X, { name: "icon-cross" }) })
     ] }),
     /* @__PURE__ */ a(Y, { children: [
       o && /* @__PURE__ */ r(F, { className: Z, src: (y = e.sponsor) == null ? void 0 : y.logo, alt: "promo" }),
-      /* @__PURE__ */ r(_, { children: (f = (g = e.banner) == null ? void 0 : g.video) != null && f.url ? /* @__PURE__ */ r(
+      /* @__PURE__ */ r(_, { children: (p = (g = e.banner) == null ? void 0 : g.video) != null && p.url ? /* @__PURE__ */ r(
         j,
         {
-          source: (u = (p = e.banner) == null ? void 0 : p.video) == null ? void 0 : u.url,
-          poster: (m = (v = e.banner) == null ? void 0 : v.video) == null ? void 0 : m.thumbnailUrl,
-          aspectRatio: l ? "1/1" : "16/9",
+          source: (f = (m = e.banner) == null ? void 0 : m.video) == null ? void 0 : f.url,
+          poster: (v = (u = e.banner) == null ? void 0 : u.video) == null ? void 0 : v.thumbnailUrl,
+          aspectRatio: n ? "1/1" : "16/9",
           onPlay: () => {
             U.emit("advertisement", {
               action: "videoPlay",
               payload: {
-                advertisementId: t,
+                advertisementId: s,
                 advertisementType: e.type
               }
             });
           }
         }
-      ) : (C = e.banner) != null && C.imageUrl ? /* @__PURE__ */ r($, { style: l ? { aspectRatio: "1/1" } : {}, src: (x = e.banner) == null ? void 0 : x.imageUrl, alt: "promo" }) : null }),
-      !l && /* @__PURE__ */ a(_, { children: [
-        ((M = e.banner) == null ? void 0 : M.title) && /* @__PURE__ */ r(ee, { className: R(o && re), children: (A = e.banner) == null ? void 0 : A.title }),
-        ((B = e.banner) == null ? void 0 : B.body) && /* @__PURE__ */ r(ae, { children: (N = e.banner) == null ? void 0 : N.body })
+      ) : (C = e.banner) != null && C.imageUrl ? /* @__PURE__ */ r($, { style: n ? { aspectRatio: "1/1" } : {}, src: (N = e.banner) == null ? void 0 : N.imageUrl, alt: "promo" }) : null }),
+      !n && /* @__PURE__ */ a(_, { children: [
+        ((x = e.banner) == null ? void 0 : x.title) && /* @__PURE__ */ r(ee, { className: D("AdvTitle", o && re), children: (A = e.banner) == null ? void 0 : A.title }),
+        ((T = e.banner) == null ? void 0 : T.body) && /* @__PURE__ */ r(ae, { className: "AdvDescription", children: (M = e.banner) == null ? void 0 : M.body })
       ] })
     ] }),
-    /* @__PURE__ */ r(ne, { children: /* @__PURE__ */ r(
-      le,
+    /* @__PURE__ */ r(le, { children: /* @__PURE__ */ r(
+      ne,
       {
         href: (P = e.banner) == null ? void 0 : P.url,
         style: {
-          backgroundColor: ((E = (T = e.banner) == null ? void 0 : T.ctaButton) == null ? void 0 : E.color) || "#009dc4",
-          color: ((L = (I = e.banner) == null ? void 0 : I.ctaButton) == null ? void 0 : L.textColor) || "#fff"
+          backgroundColor: ((I = (B = e.banner) == null ? void 0 : B.ctaButton) == null ? void 0 : I.color) || "#009dc4",
+          color: ((E = (S = e.banner) == null ? void 0 : S.ctaButton) == null ? void 0 : E.textColor) || "#fff"
         },
         "data-analytics": "button",
-        "data-promo-id": t,
+        "data-promo-id": s,
         "data-promo-type": e.type,
         target: "_blank",
-        children: (O = (S = e.banner) == null ? void 0 : S.ctaButton) == null ? void 0 : O.label
+        children: (O = (L = e.banner) == null ? void 0 : L.ctaButton) == null ? void 0 : O.label
       }
     ) })
   ] });

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

@@ -48,6 +48,8 @@ export declare const icons: {
     twitter: any;
     iconUp: any;
     iconCopySuccess: any;
+    chevronRight: any;
+    noImageIcon: any;
 };
 export declare const Icon: React.FC<{
     name: keyof typeof icons;