@streamlayer/react-ui 1.24.0 → 1.25.0

package/lib/ui/advertisement/index.js

@@ -1,67 +1,67 @@
 import { jsx as r } from "react/jsx-runtime";
 import { PromotionType as f } from "@streamlayer/sdk-web-types";
-import { Banner as a } from "./banner/index.js";
-import { Notification as q } from "./notification/index.js";
-import { Overlay as _ } from "./overlay/index.js";
-import { Sidebar as E } from "./sidebar/index.js";
-import { OverlayContainer as G } from "./overlay/styles.js";
-const O = (i) => (i == null ? void 0 : i.type) === f.INGAME_IAB11_LBAR || (i == null ? void 0 : i.type) === f.INGAME_IAB21_LBAR, d = (i) => (i == null ? void 0 : i.type) === f.INGAME_IAB11 || (i == null ? void 0 : i.type) === f.INGAME_IAB21, P = ({
+import { Banner as G } from "./banner/index.js";
+import { Notification as S } from "./notification/index.js";
+import { Overlay as E } from "./overlay/index.js";
+import { Sidebar as q } from "./sidebar/index.js";
+import { OverlayContainer as O } from "./overlay/styles.js";
+const M = (i) => (i == null ? void 0 : i.type) === f.INGAME_IAB11_LBAR || (i == null ? void 0 : i.type) === f.INGAME_IAB21_LBAR, R = (i) => (i == null ? void 0 : i.type) === f.INGAME_IAB11_SIDEBAR || (i == null ? void 0 : i.type) === f.INGAME_IAB21_SIDEBAR, a = (i) => (i == null ? void 0 : i.type) === f.INGAME_IAB11 || (i == null ? void 0 : i.type) === f.INGAME_IAB21, P = ({
   advertisement: i,
-  close: u,
-  skipTypeCheck: l,
-  skipAutoClose: I,
+  close: l,
+  skipTypeCheck: y,
+  skipAutoClose: c,
   layoutMode: h = "side-by-side",
-  sidebar: n,
-  isNotification: M,
-  banner: t,
-  markAsViewed: c,
-  open: o,
-  externalAd: y,
-  controlVideo: A,
-  advertisementPaused: N,
-  togglePause: B
-}) => i.promotion ? M && i.notification ? /* @__PURE__ */ r(
-  q,
+  sidebar: u,
+  isNotification: o,
+  banner: A,
+  markAsViewed: B,
+  open: I,
+  externalAd: _,
+  controlVideo: N,
+  advertisementPaused: n,
+  togglePause: t
+}) => i.promotion ? o && i.notification ? /* @__PURE__ */ r(
+  S,
   {
-    open: () => o == null ? void 0 : o({ fromNotification: !0 }),
+    open: () => I == null ? void 0 : I({ fromNotification: !0 }),
     notification: i.notification,
     promotionId: i.question.id
   }
-) : !n && !t && (l || d(i.promotion)) ? /* @__PURE__ */ r(G, { className: "PromoOverlayContainer", children: /* @__PURE__ */ r(
-  _,
+) : !u && !A && (y || a(i.promotion)) ? /* @__PURE__ */ r(O, { className: "PromoOverlayContainer", children: /* @__PURE__ */ r(
+  E,
   {
-    markAsViewed: c,
+    markAsViewed: B,
     promotionId: i.question.id,
     promotion: i.promotion,
-    onClose: u,
-    open: o,
-    skipAutoClose: I,
-    externalAd: y,
-    controlVideo: A,
-    advertisementPaused: N,
-    togglePause: B
+    onClose: l,
+    open: I,
+    skipAutoClose: c,
+    externalAd: _,
+    controlVideo: N,
+    advertisementPaused: n,
+    togglePause: t
   }
-) }) : n && (l || O(i.promotion)) ? /* @__PURE__ */ r(E, { className: "PromoSidebarContainer", direction: n, hiding: !1, children: /* @__PURE__ */ r(
-  _,
+) }) : u && (y || M(i.promotion) || R(i.promotion)) ? /* @__PURE__ */ r(q, { className: "PromoSidebarContainer", direction: u, hiding: !1, children: /* @__PURE__ */ r(
+  E,
   {
-    markAsViewed: c,
+    markAsViewed: B,
     promotionId: i.question.id,
     promotion: i.promotion,
-    externalAd: y,
-    onClose: u,
-    open: o,
-    controlVideo: A,
-    skipAutoClose: I,
-    advertisementPaused: N,
-    togglePause: B
+    externalAd: _,
+    onClose: l,
+    open: I,
+    controlVideo: N,
+    skipAutoClose: c,
+    advertisementPaused: n,
+    togglePause: t
   }
-) }) : t ? /* @__PURE__ */ r(
-  a,
+) }) : A && M(i.promotion) ? /* @__PURE__ */ r(
+  G,
   {
     promotionId: i.question.id,
     hiding: !1,
     promotion: i.promotion,
-    direction: t
+    direction: A
   }
 ) : null : null;
 export {

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

@@ -1,15 +1,15 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { cx as J } from "@linaria/core";
+import { cx as K } from "@linaria/core";
 import { useEffect as u } from "react";
 import { eventBus as eo } from "@streamlayer/sdk-web-interfaces";
-import { PromotionType as K, PromotionLogoMode as s, AutoPlayVideo as ro, PromotionButtonType as to } from "@streamlayer/sdk-web-types";
+import { PromotionType as f, PromotionLogoMode as s, AutoPlayVideo as ro, PromotionButtonType as to } from "@streamlayer/sdk-web-types";
 import { CloseButton as no } from "../../close-btn/index.js";
 import { VideoPlayer as ao } from "../../video-player/index.js";
 import { ExternalAdOverlay as lo } from "./externalAd/index.js";
-import { PromoOverlay as io, Header as so, HeaderContent as mo, headerContentShift as po, SponsorLogo as Q, Sponsor as co, SponsorName as yo, SponsorText as uo, ADLogo as fo, SponsoredText as bo, Media as ho, shiftMedia as Ao, Content as X, PromoImg as To, Title as No, hideOnMobile as Po, Description as vo, ActionBtnWrap as xo, ActionButton as go } from "./styles.js";
-import { OverlayContainer as ko } from "./styles.js";
-const Ro = (f) => {
-  var A, T, N, P, v, x, g, B, C, E, O, L, M, S, I, D, R, U, _, k, F, V, j, G, H, w, W, $, q, z;
+import { PromoOverlay as io, Header as so, HeaderContent as mo, headerContentShift as po, SponsorLogo as Q, Sponsor as co, SponsorName as yo, SponsorText as uo, ADLogo as fo, SponsoredText as ho, Media as bo, shiftMedia as Ao, Content as X, PromoImg as vo, Title as Po, hideOnMobile as Bo, Description as No, ActionBtnWrap as To, ActionButton as xo } from "./styles.js";
+import { OverlayContainer as Fo } from "./styles.js";
+const Ro = (h) => {
+  var v, P, B, N, T, x, C, E, g, I, S, M, L, O, D, R, _, k, F, U, V, G, j, H, w, W, $, q, z, J;
   const {
     promotion: o,
     open: d,
@@ -21,96 +21,98 @@ const Ro = (f) => {
     onClose: oo,
     markAsViewed: m,
     externalAd: b
-  } = f, p = o.type === K.INGAME_IAB11_LBAR || o.type === K.INGAME_IAB11, c = ((A = o.sponsor) == null ? void 0 : A.logo) && o.logoMode === s.CENTER, h = !!((N = (T = o.banner) == null ? void 0 : T.video) != null && N.url), i = o.autoPlayVideo === ro.ENABLED;
+  } = h, p = o.type === f.INGAME_IAB11_LBAR || o.type === f.INGAME_IAB11 || o.type === f.INGAME_IAB11_SIDEBAR, c = ((v = o.sponsor) == null ? void 0 : v.logo) && o.logoMode === s.CENTER, A = !!((B = (P = o.banner) == null ? void 0 : P.video) != null && B.url), i = o.autoPlayVideo === ro.ENABLED;
   if (u(() => {
-    r == null || r(h || i), d == null || d();
+    r == null || r(A || i), d == null || d();
   }, []), u(() => {
     l && o.type && m && m();
   }, [l, o.type, m]), u(() => () => {
     n == null || n({ muted: !1 });
   }, [n]), b)
-    return /* @__PURE__ */ e(lo, { ...f, externalAd: b });
-  let a = (P = o.banner) == null ? void 0 : P.url;
+    return /* @__PURE__ */ e(lo, { ...h, externalAd: b });
+  let a = (N = o.banner) == null ? void 0 : N.url;
   a && a.indexOf("http") !== 0 && (a = `https://${a}`);
   let y = !0;
-  return h && (!Y || !i ? y = !0 : y = !1), /* @__PURE__ */ t(io, { className: "PromoOverlay", children: [
-    /* @__PURE__ */ t(so, { children: [
-      /* @__PURE__ */ t(mo, { className: J(!c && po), children: [
-        ((v = o.sponsor) == null ? void 0 : v.logo) && o.logoMode === s.LEFT && /* @__PURE__ */ e(Q, { className: "PromoSponsorLogo", src: (x = o.sponsor) == null ? void 0 : x.logo, alt: "promo" }),
-        /* @__PURE__ */ t(
-          co,
+  return A && (!Y || !i ? y = !0 : y = !1), /* @__PURE__ */ t(io, { className: "PromoOverlay", children: [
+    /* @__PURE__ */ t("div", { children: [
+      /* @__PURE__ */ t(so, { children: [
+        /* @__PURE__ */ t(mo, { className: K(!c && po), children: [
+          ((T = o.sponsor) == null ? void 0 : T.logo) && o.logoMode === s.LEFT && /* @__PURE__ */ e(Q, { className: "PromoSponsorLogo", src: (x = o.sponsor) == null ? void 0 : x.logo, alt: "promo" }),
+          /* @__PURE__ */ t(
+            co,
+            {
+              style: {
+                paddingLeft: (C = o.sponsor) != null && C.logo && o.logoMode === s.LEFT ? "0px" : "8px"
+              },
+              children: [
+                ((E = o.sponsor) == null ? void 0 : E.logo) && o.logoMode === s.LEFT && /* @__PURE__ */ e(yo, { children: (g = o.sponsor) == null ? void 0 : g.name }),
+                /* @__PURE__ */ t(uo, { className: "SponsorText", children: [
+                  /* @__PURE__ */ e(fo, { children: "AD" }),
+                  /* @__PURE__ */ e(ho, { children: "SPONSORED" })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          no,
           {
-            style: {
-              paddingLeft: (g = o.sponsor) != null && g.logo && o.logoMode === s.LEFT ? "0px" : "8px"
-            },
-            children: [
-              ((B = o.sponsor) == null ? void 0 : B.logo) && o.logoMode === s.LEFT && /* @__PURE__ */ e(yo, { children: (C = o.sponsor) == null ? void 0 : C.name }),
-              /* @__PURE__ */ t(uo, { className: "SponsorText", children: [
-                /* @__PURE__ */ e(fo, { children: "AD" }),
-                /* @__PURE__ */ e(bo, { children: "SPONSORED" })
-              ] })
-            ]
+            className: "ClosePromoIcon",
+            close: oo,
+            autoClose: (I = o.closeTimer) == null ? void 0 : I.auto,
+            duration: Z ? 0 : (S = o.closeTimer) == null ? void 0 : S.seconds,
+            isPlaying: y
           }
         )
       ] }),
-      /* @__PURE__ */ e(
-        no,
-        {
-          className: "ClosePromoIcon",
-          close: oo,
-          autoClose: (E = o.closeTimer) == null ? void 0 : E.auto,
-          duration: Z ? 0 : (O = o.closeTimer) == null ? void 0 : O.seconds,
-          isPlaying: y
-        }
-      )
-    ] }),
-    /* @__PURE__ */ t(ho, { children: [
-      c && /* @__PURE__ */ e(Q, { className: Ao, src: (L = o.sponsor) == null ? void 0 : L.logo, alt: "promo" }),
-      /* @__PURE__ */ e(X, { children: (S = (M = o.banner) == null ? void 0 : M.video) != null && S.url ? /* @__PURE__ */ e(
-        ao,
-        {
-          source: (D = (I = o.banner) == null ? void 0 : I.video) == null ? void 0 : D.url,
-          poster: (U = (R = o.banner) == null ? void 0 : R.video) == null ? void 0 : U.thumbnailUrl,
-          aspectRatio: p ? "1/1" : "16/9",
-          onPause: () => {
-            i && (r == null || r(!0));
-          },
-          onPlay: () => {
-            eo.emit("advertisement", {
-              action: "videoPlay",
-              payload: {
-                id: l,
-                type: o.type
-              }
-            }), r == null || r(!1);
-          },
-          controlVideo: n,
-          autoPlay: i
-        }
-      ) : (_ = o.banner) != null && _.imageUrl ? /* @__PURE__ */ e(To, { style: p ? { aspectRatio: "1/1" } : {}, src: (k = o.banner) == null ? void 0 : k.imageUrl, alt: "promo" }) : null }),
-      !p && /* @__PURE__ */ t(X, { children: [
-        ((F = o.banner) == null ? void 0 : F.title) && /* @__PURE__ */ e(No, { className: J("AdvTitle", c && Po), children: (V = o.banner) == null ? void 0 : V.title }),
-        ((j = o.banner) == null ? void 0 : j.body) && /* @__PURE__ */ e(vo, { className: "AdvDescription", children: (G = o.banner) == null ? void 0 : G.body })
+      /* @__PURE__ */ t(bo, { children: [
+        c && /* @__PURE__ */ e(Q, { className: Ao, src: (M = o.sponsor) == null ? void 0 : M.logo, alt: "promo" }),
+        /* @__PURE__ */ e(X, { children: (O = (L = o.banner) == null ? void 0 : L.video) != null && O.url ? /* @__PURE__ */ e(
+          ao,
+          {
+            source: (R = (D = o.banner) == null ? void 0 : D.video) == null ? void 0 : R.url,
+            poster: (k = (_ = o.banner) == null ? void 0 : _.video) == null ? void 0 : k.thumbnailUrl,
+            aspectRatio: p ? "1/1" : "2/1",
+            onPause: () => {
+              i && (r == null || r(!0));
+            },
+            onPlay: () => {
+              eo.emit("advertisement", {
+                action: "videoPlay",
+                payload: {
+                  id: l,
+                  type: o.type
+                }
+              }), r == null || r(!1);
+            },
+            controlVideo: n,
+            autoPlay: i
+          }
+        ) : (F = o.banner) != null && F.imageUrl ? /* @__PURE__ */ e(vo, { style: p ? { aspectRatio: "1/1" } : {}, src: (U = o.banner) == null ? void 0 : U.imageUrl, alt: "promo" }) : null }),
+        !p && /* @__PURE__ */ t(X, { children: [
+          ((V = o.banner) == null ? void 0 : V.title) && /* @__PURE__ */ e(Po, { className: K("AdvTitle", c && Bo), children: (G = o.banner) == null ? void 0 : G.title }),
+          ((j = o.banner) == null ? void 0 : j.body) && /* @__PURE__ */ e(No, { className: "AdvDescription", children: (H = o.banner) == null ? void 0 : H.body })
+        ] })
       ] })
     ] }),
-    o.buttonType !== to.NO_BUTTON && /* @__PURE__ */ e(xo, { children: /* @__PURE__ */ e(
-      go,
+    o.buttonType === to.BASIC && /* @__PURE__ */ e(To, { children: /* @__PURE__ */ e(
+      xo,
       {
         href: a,
         style: {
-          backgroundColor: ((w = (H = o.banner) == null ? void 0 : H.ctaButton) == null ? void 0 : w.color) || "#009dc4",
-          color: (($ = (W = o.banner) == null ? void 0 : W.ctaButton) == null ? void 0 : $.textColor) || "#fff"
+          backgroundColor: ((W = (w = o.banner) == null ? void 0 : w.ctaButton) == null ? void 0 : W.color) || "#009dc4",
+          color: ((q = ($ = o.banner) == null ? void 0 : $.ctaButton) == null ? void 0 : q.textColor) || "#fff"
         },
         "data-a": "button",
         "data-promo-id": l,
         "data-promo-type": o.type,
         target: "_blank",
-        children: (z = (q = o.banner) == null ? void 0 : q.ctaButton) == null ? void 0 : z.label
+        children: (J = (z = o.banner) == null ? void 0 : z.ctaButton) == null ? void 0 : J.label
       }
     ) })
   ] });
 };
 export {
   Ro as Overlay,
-  ko as OverlayContainer
+  Fo as OverlayContainer
 };

package/lib/ui/theme/theme.js

@@ -67,6 +67,7 @@ const x = `
 
   --insight-image-ratio: 16/9;
   --adv-side-indents: 16px;
+  --adv-promo-padding-bottom: 36px;
   --adv-top-indent: 12px;
   --adv-header-height: 52px;
   --adv-media-row-gap: 24px;
@@ -87,6 +88,7 @@ const x = `
 
   .mobile-view {
     --adv-side-indents: 16px;
+    --adv-promo-padding-bottom: 36px;
     --adv-hide-on-mobile: none;
     --adv-header-shift: -10px;
     --adv-media-shift: -10px;
@@ -149,7 +151,7 @@ const x = `
 
   --display-question-container: initial;
   --justify-content-question-container: initial;
-`, h = "StreamLayerCSSReset", m = "ttkj0ah", g = () => /* @__PURE__ */ t("table", {
+`, m = "StreamLayerCSSReset", h = "ttkj0ah", g = () => /* @__PURE__ */ t("table", {
   children: /* @__PURE__ */ i("table", {
     children: [/* @__PURE__ */ t("thead", {
       children: /* @__PURE__ */ i("tr", {
@@ -175,7 +177,7 @@ const x = `
 });
 export {
   g as ThemeVariables,
-  h as resetCss,
-  m as theme,
+  m as resetCss,
+  h as theme,
   x as themeStr
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.24.0",
+  "version": "1.25.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -15,6 +15,11 @@
       "default": "./lib/app/masters/masters.js",
       "types": "./lib/app/masters/masters.d.ts"
     },
+    "./tv": {
+      "import": "./lib/app/tvos/index.js",
+      "default": "./lib/app/tvos/index.js",
+      "types": "./lib/app/tvos/index.d.ts"
+    },
     "./mastersPoints": {
       "import": "./lib/app/masters/Points/index.js",
       "default": "./lib/app/masters/Points/index.js",
@@ -61,7 +66,7 @@
   ],
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.4",
-    "@streamlayer/sl-eslib": "^5.163.2",
+    "@streamlayer/sl-eslib": "^5.168.0",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
     "react-infinite-scroller": "^1.2.6",
@@ -69,19 +74,19 @@
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
     "uuid": "^11.1.0",
-    "@streamlayer/feature-gamification": "^1.17.0",
-    "@streamlayer/react-polyfills": "^0.1.22",
-    "@streamlayer/sdk-web": "^1.11.0",
-    "@streamlayer/sdk-web-analytics": "^1.8.0",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.1.41",
-    "@streamlayer/sdk-web-api": "^1.9.0",
-    "@streamlayer/sdk-web-core": "^1.12.0",
-    "@streamlayer/sdk-web-features": "^1.0.62",
-    "@streamlayer/sdk-web-interfaces": "^1.6.0",
-    "@streamlayer/sdk-web-logger": "^1.0.62",
-    "@streamlayer/sdk-web-notifications": "^1.3.24",
-    "@streamlayer/sdk-web-storage": "^1.0.62",
-    "@streamlayer/sdk-web-types": "^1.11.0"
+    "@streamlayer/feature-gamification": "^1.18.0",
+    "@streamlayer/react-polyfills": "^0.1.23",
+    "@streamlayer/sdk-web": "^1.12.0",
+    "@streamlayer/sdk-web-analytics": "^1.9.0",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.42",
+    "@streamlayer/sdk-web-api": "^1.10.0",
+    "@streamlayer/sdk-web-core": "^1.13.0",
+    "@streamlayer/sdk-web-features": "^1.0.63",
+    "@streamlayer/sdk-web-interfaces": "^1.6.1",
+    "@streamlayer/sdk-web-logger": "^1.0.63",
+    "@streamlayer/sdk-web-notifications": "^1.3.25",
+    "@streamlayer/sdk-web-storage": "^1.0.63",
+    "@streamlayer/sdk-web-types": "^1.12.0"
   },
   "nx": {
     "implicitDependencies": [
@@ -121,12 +126,13 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.16.0"
+    "@streamlayer/react": "^1.17.0"
   },
   "dependencies": {
     "@dailymotion/vast-client": "^6.2.0",
     "@types/vast-client": "^3.0.4",
     "@types/vmap": "^2.2.4",
+    "react-qr-code": "^2.0.16",
     "swiper": "^11.2.6",
     "video.js": "^8.21.0",
     "videojs-contrib-ads": "^7.5.2",