@streamlayer/react-ui 1.13.4 → 1.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,7 +5,9 @@ export declare const AdvertisementUI: React.FC<{
|
|
|
5
5
|
layoutMode?: 'cover' | 'side-by-side';
|
|
6
6
|
sidebar?: 'left' | 'right';
|
|
7
7
|
banner?: 'top' | 'bottom';
|
|
8
|
-
open?: (
|
|
8
|
+
open?: (options?: {
|
|
9
|
+
fromNotification?: boolean;
|
|
10
|
+
}) => void;
|
|
9
11
|
close?: () => void;
|
|
10
12
|
markAsViewed?: () => void;
|
|
11
13
|
isNotification?: boolean;
|
|
@@ -1,60 +1,69 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { PromotionType as
|
|
3
|
-
import { Banner as
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { PromotionType as f } from "@streamlayer/sdk-web-types";
|
|
3
|
+
import { Banner as a } from "./banner/index.js";
|
|
4
4
|
import { Notification as q } from "./notification/index.js";
|
|
5
|
-
import { Overlay as
|
|
5
|
+
import { Overlay as _ } from "./overlay/index.js";
|
|
6
6
|
import { Sidebar as E } from "./sidebar/index.js";
|
|
7
7
|
import { OverlayContainer as G } from "./overlay/styles.js";
|
|
8
|
-
const O = (i) => (i == null ? void 0 : i.type) ===
|
|
8
|
+
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 = ({
|
|
9
9
|
advertisement: i,
|
|
10
|
-
close:
|
|
11
|
-
skipTypeCheck:
|
|
10
|
+
close: u,
|
|
11
|
+
skipTypeCheck: l,
|
|
12
12
|
skipAutoClose: I,
|
|
13
|
-
layoutMode:
|
|
13
|
+
layoutMode: h = "side-by-side",
|
|
14
14
|
sidebar: n,
|
|
15
|
-
isNotification:
|
|
16
|
-
banner:
|
|
17
|
-
markAsViewed:
|
|
18
|
-
open:
|
|
15
|
+
isNotification: M,
|
|
16
|
+
banner: t,
|
|
17
|
+
markAsViewed: c,
|
|
18
|
+
open: o,
|
|
19
19
|
externalAd: y,
|
|
20
|
-
controlVideo:
|
|
21
|
-
advertisementPaused:
|
|
20
|
+
controlVideo: A,
|
|
21
|
+
advertisementPaused: N,
|
|
22
22
|
togglePause: B
|
|
23
|
-
}) => i.promotion ?
|
|
24
|
-
|
|
23
|
+
}) => i.promotion ? M && i.notification ? /* @__PURE__ */ r(
|
|
24
|
+
q,
|
|
25
25
|
{
|
|
26
|
-
|
|
26
|
+
open: () => o == null ? void 0 : o({ fromNotification: !0 }),
|
|
27
|
+
notification: i.notification,
|
|
28
|
+
promotionId: i.question.id
|
|
29
|
+
}
|
|
30
|
+
) : !n && !t && (l || d(i.promotion)) ? /* @__PURE__ */ r(G, { className: "PromoOverlayContainer", children: /* @__PURE__ */ r(
|
|
31
|
+
_,
|
|
32
|
+
{
|
|
33
|
+
markAsViewed: c,
|
|
27
34
|
promotionId: i.question.id,
|
|
28
35
|
promotion: i.promotion,
|
|
29
|
-
onClose:
|
|
36
|
+
onClose: u,
|
|
37
|
+
open: o,
|
|
30
38
|
skipAutoClose: I,
|
|
31
39
|
externalAd: y,
|
|
32
|
-
controlVideo:
|
|
33
|
-
advertisementPaused:
|
|
40
|
+
controlVideo: A,
|
|
41
|
+
advertisementPaused: N,
|
|
34
42
|
togglePause: B
|
|
35
43
|
}
|
|
36
|
-
) }) : n && (
|
|
37
|
-
|
|
44
|
+
) }) : n && (l || O(i.promotion)) ? /* @__PURE__ */ r(E, { className: "PromoSidebarContainer", direction: n, hiding: !1, children: /* @__PURE__ */ r(
|
|
45
|
+
_,
|
|
38
46
|
{
|
|
39
|
-
markAsViewed:
|
|
47
|
+
markAsViewed: c,
|
|
40
48
|
promotionId: i.question.id,
|
|
41
49
|
promotion: i.promotion,
|
|
42
50
|
externalAd: y,
|
|
43
|
-
onClose:
|
|
44
|
-
|
|
51
|
+
onClose: u,
|
|
52
|
+
open: o,
|
|
53
|
+
controlVideo: A,
|
|
45
54
|
skipAutoClose: I,
|
|
46
|
-
advertisementPaused:
|
|
55
|
+
advertisementPaused: N,
|
|
47
56
|
togglePause: B
|
|
48
57
|
}
|
|
49
|
-
) }) :
|
|
50
|
-
|
|
58
|
+
) }) : t ? /* @__PURE__ */ r(
|
|
59
|
+
a,
|
|
51
60
|
{
|
|
52
61
|
promotionId: i.question.id,
|
|
53
62
|
hiding: !1,
|
|
54
63
|
promotion: i.promotion,
|
|
55
|
-
direction:
|
|
64
|
+
direction: t
|
|
56
65
|
}
|
|
57
66
|
) : null : null;
|
|
58
67
|
export {
|
|
59
|
-
|
|
68
|
+
P as AdvertisementUI
|
|
60
69
|
};
|
|
@@ -1,81 +1,82 @@
|
|
|
1
1
|
import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
2
|
-
import { cx as
|
|
3
|
-
import { useEffect as
|
|
4
|
-
import { eventBus as
|
|
5
|
-
import { PromotionType as
|
|
6
|
-
import { CloseButton as
|
|
7
|
-
import { VideoPlayer as
|
|
8
|
-
import { ExternalAdOverlay as
|
|
9
|
-
import { PromoOverlay as
|
|
10
|
-
import { OverlayContainer as
|
|
11
|
-
const
|
|
12
|
-
var
|
|
2
|
+
import { cx as J } from "@linaria/core";
|
|
3
|
+
import { useEffect as u } from "react";
|
|
4
|
+
import { eventBus as eo } from "@streamlayer/sdk-web-interfaces";
|
|
5
|
+
import { PromotionType as K, PromotionLogoMode as s, AutoPlayVideo as ro, PromotionButtonType as to } from "@streamlayer/sdk-web-types";
|
|
6
|
+
import { CloseButton as no } from "../../close-btn/index.js";
|
|
7
|
+
import { VideoPlayer as ao } from "../../video-player/index.js";
|
|
8
|
+
import { ExternalAdOverlay as lo } from "./externalAd/index.js";
|
|
9
|
+
import { PromoOverlay as io, Header as so, HeaderContent as mo, headerContentShift as co, SponsorLogo as Q, Sponsor as po, 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 vo, hideOnMobile as No, Description as Po, ActionBtnWrap as xo, ActionButton as Bo } from "./styles.js";
|
|
10
|
+
import { OverlayContainer as ko } from "./styles.js";
|
|
11
|
+
const Ro = (f) => {
|
|
12
|
+
var A, T, v, N, P, x, B, C, g, E, O, M, L, S, I, D, R, U, _, k, F, V, j, G, H, w, W, $, q, z;
|
|
13
13
|
const {
|
|
14
14
|
promotion: o,
|
|
15
|
-
|
|
15
|
+
open: d,
|
|
16
|
+
advertisementPaused: Y,
|
|
16
17
|
togglePause: r,
|
|
17
18
|
controlVideo: n,
|
|
18
|
-
skipAutoClose:
|
|
19
|
+
skipAutoClose: Z,
|
|
19
20
|
promotionId: l,
|
|
20
|
-
onClose:
|
|
21
|
-
markAsViewed:
|
|
22
|
-
externalAd:
|
|
23
|
-
} =
|
|
24
|
-
if (
|
|
25
|
-
r == null || r(
|
|
26
|
-
}, []),
|
|
27
|
-
l && o.type &&
|
|
28
|
-
}, [l, o.type,
|
|
21
|
+
onClose: oo,
|
|
22
|
+
markAsViewed: m,
|
|
23
|
+
externalAd: b
|
|
24
|
+
} = f, c = o.type === K.INGAME_IAB11_LBAR || o.type === K.INGAME_IAB11, p = ((A = o.sponsor) == null ? void 0 : A.logo) && o.logoMode === s.CENTER, h = !!((v = (T = o.banner) == null ? void 0 : T.video) != null && v.url), i = o.autoPlayVideo === ro.ENABLED;
|
|
25
|
+
if (u(() => {
|
|
26
|
+
r == null || r(h || i), d == null || d();
|
|
27
|
+
}, []), u(() => {
|
|
28
|
+
l && o.type && m && m();
|
|
29
|
+
}, [l, o.type, m]), u(() => () => {
|
|
29
30
|
n == null || n({ muted: !1 });
|
|
30
|
-
}, [n]),
|
|
31
|
-
return /* @__PURE__ */ e(
|
|
32
|
-
let a = (
|
|
31
|
+
}, [n]), b)
|
|
32
|
+
return /* @__PURE__ */ e(lo, { ...f, externalAd: b });
|
|
33
|
+
let a = (N = o.banner) == null ? void 0 : N.url;
|
|
33
34
|
a && a.indexOf("http") !== 0 && (a = `https://${a}`);
|
|
34
|
-
let
|
|
35
|
-
return
|
|
36
|
-
/* @__PURE__ */ t(
|
|
37
|
-
/* @__PURE__ */ t(
|
|
38
|
-
((
|
|
35
|
+
let y = !0;
|
|
36
|
+
return h && (!Y || !i ? y = !0 : y = !1), /* @__PURE__ */ t(io, { className: "PromoOverlay", children: [
|
|
37
|
+
/* @__PURE__ */ t(so, { children: [
|
|
38
|
+
/* @__PURE__ */ t(mo, { className: J(!p && co), children: [
|
|
39
|
+
((P = o.sponsor) == null ? void 0 : P.logo) && o.logoMode === s.LEFT && /* @__PURE__ */ e(Q, { src: (x = o.sponsor) == null ? void 0 : x.logo, alt: "promo" }),
|
|
39
40
|
/* @__PURE__ */ t(
|
|
40
41
|
po,
|
|
41
42
|
{
|
|
42
43
|
style: {
|
|
43
|
-
paddingLeft: (
|
|
44
|
+
paddingLeft: (B = o.sponsor) != null && B.logo && o.logoMode === s.LEFT ? "0px" : "8px"
|
|
44
45
|
},
|
|
45
46
|
children: [
|
|
46
|
-
((
|
|
47
|
-
/* @__PURE__ */ t(
|
|
48
|
-
/* @__PURE__ */ e(
|
|
49
|
-
/* @__PURE__ */ e(
|
|
47
|
+
((C = o.sponsor) == null ? void 0 : C.logo) && o.logoMode === s.LEFT && /* @__PURE__ */ e(yo, { children: (g = o.sponsor) == null ? void 0 : g.name }),
|
|
48
|
+
/* @__PURE__ */ t(uo, { className: "SponsorText", children: [
|
|
49
|
+
/* @__PURE__ */ e(fo, { children: "AD" }),
|
|
50
|
+
/* @__PURE__ */ e(bo, { children: "SPONSORED" })
|
|
50
51
|
] })
|
|
51
52
|
]
|
|
52
53
|
}
|
|
53
54
|
)
|
|
54
55
|
] }),
|
|
55
56
|
/* @__PURE__ */ e(
|
|
56
|
-
|
|
57
|
+
no,
|
|
57
58
|
{
|
|
58
59
|
className: "ClosePromoIcon",
|
|
59
|
-
close:
|
|
60
|
-
autoClose: (
|
|
61
|
-
duration:
|
|
62
|
-
isPlaying:
|
|
60
|
+
close: oo,
|
|
61
|
+
autoClose: (E = o.closeTimer) == null ? void 0 : E.auto,
|
|
62
|
+
duration: Z ? 0 : (O = o.closeTimer) == null ? void 0 : O.seconds,
|
|
63
|
+
isPlaying: y
|
|
63
64
|
}
|
|
64
65
|
)
|
|
65
66
|
] }),
|
|
66
|
-
/* @__PURE__ */ t(
|
|
67
|
-
p && /* @__PURE__ */ e(
|
|
68
|
-
/* @__PURE__ */ e(
|
|
69
|
-
|
|
67
|
+
/* @__PURE__ */ t(ho, { children: [
|
|
68
|
+
p && /* @__PURE__ */ e(Q, { className: Ao, src: (M = o.sponsor) == null ? void 0 : M.logo, alt: "promo" }),
|
|
69
|
+
/* @__PURE__ */ e(X, { children: (S = (L = o.banner) == null ? void 0 : L.video) != null && S.url ? /* @__PURE__ */ e(
|
|
70
|
+
ao,
|
|
70
71
|
{
|
|
71
|
-
source: (
|
|
72
|
-
poster: (
|
|
73
|
-
aspectRatio:
|
|
72
|
+
source: (D = (I = o.banner) == null ? void 0 : I.video) == null ? void 0 : D.url,
|
|
73
|
+
poster: (U = (R = o.banner) == null ? void 0 : R.video) == null ? void 0 : U.thumbnailUrl,
|
|
74
|
+
aspectRatio: c ? "1/1" : "16/9",
|
|
74
75
|
onPause: () => {
|
|
75
76
|
i && (r == null || r(!0));
|
|
76
77
|
},
|
|
77
78
|
onPlay: () => {
|
|
78
|
-
|
|
79
|
+
eo.emit("advertisement", {
|
|
79
80
|
action: "videoPlay",
|
|
80
81
|
payload: {
|
|
81
82
|
id: l,
|
|
@@ -86,30 +87,30 @@ const Do = (u) => {
|
|
|
86
87
|
controlVideo: n,
|
|
87
88
|
autoPlay: i
|
|
88
89
|
}
|
|
89
|
-
) : (
|
|
90
|
-
!
|
|
91
|
-
((
|
|
92
|
-
((
|
|
90
|
+
) : (_ = o.banner) != null && _.imageUrl ? /* @__PURE__ */ e(To, { style: c ? { aspectRatio: "1/1" } : {}, src: (k = o.banner) == null ? void 0 : k.imageUrl, alt: "promo" }) : null }),
|
|
91
|
+
!c && /* @__PURE__ */ t(X, { children: [
|
|
92
|
+
((F = o.banner) == null ? void 0 : F.title) && /* @__PURE__ */ e(vo, { className: J("AdvTitle", p && No), children: (V = o.banner) == null ? void 0 : V.title }),
|
|
93
|
+
((j = o.banner) == null ? void 0 : j.body) && /* @__PURE__ */ e(Po, { className: "AdvDescription", children: (G = o.banner) == null ? void 0 : G.body })
|
|
93
94
|
] })
|
|
94
95
|
] }),
|
|
95
|
-
o.buttonType !==
|
|
96
|
-
|
|
96
|
+
o.buttonType !== to.NO_BUTTON && /* @__PURE__ */ e(xo, { children: /* @__PURE__ */ e(
|
|
97
|
+
Bo,
|
|
97
98
|
{
|
|
98
99
|
href: a,
|
|
99
100
|
style: {
|
|
100
|
-
backgroundColor: ((
|
|
101
|
-
color: ((
|
|
101
|
+
backgroundColor: ((w = (H = o.banner) == null ? void 0 : H.ctaButton) == null ? void 0 : w.color) || "#009dc4",
|
|
102
|
+
color: (($ = (W = o.banner) == null ? void 0 : W.ctaButton) == null ? void 0 : $.textColor) || "#fff"
|
|
102
103
|
},
|
|
103
104
|
"data-analytics": "button",
|
|
104
105
|
"data-promo-id": l,
|
|
105
106
|
"data-promo-type": o.type,
|
|
106
107
|
target: "_blank",
|
|
107
|
-
children: (
|
|
108
|
+
children: (z = (q = o.banner) == null ? void 0 : q.ctaButton) == null ? void 0 : z.label
|
|
108
109
|
}
|
|
109
110
|
) })
|
|
110
111
|
] });
|
|
111
112
|
};
|
|
112
113
|
export {
|
|
113
|
-
|
|
114
|
-
|
|
114
|
+
Ro as Overlay,
|
|
115
|
+
ko as OverlayContainer
|
|
115
116
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@streamlayer/react-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./src/index.js",
|
|
6
6
|
"typings": "./lib/index.d.ts",
|
|
@@ -59,18 +59,18 @@
|
|
|
59
59
|
"react-virtualized-auto-sizer": "^1.0.24",
|
|
60
60
|
"react-window": "^1.8.10",
|
|
61
61
|
"react-window-infinite-loader": "^1.0.9",
|
|
62
|
-
"@streamlayer/feature-gamification": "^1.
|
|
63
|
-
"@streamlayer/sdk-web
|
|
64
|
-
"@streamlayer/sdk-web": "^1.
|
|
65
|
-
"@streamlayer/sdk-web-anonymous-auth": "^1.1.
|
|
66
|
-
"@streamlayer/sdk-web-api": "^1.6.
|
|
67
|
-
"@streamlayer/sdk-web-core": "^1.8.
|
|
68
|
-
"@streamlayer/sdk-web-features": "^1.0.
|
|
69
|
-
"@streamlayer/sdk-web-interfaces": "^1.
|
|
70
|
-
"@streamlayer/sdk-web-logger": "^1.0.
|
|
71
|
-
"@streamlayer/sdk-web-notifications": "^1.2.
|
|
72
|
-
"@streamlayer/sdk-web-storage": "^1.0.
|
|
73
|
-
"@streamlayer/sdk-web-types": "^1.8.
|
|
62
|
+
"@streamlayer/feature-gamification": "^1.12.1",
|
|
63
|
+
"@streamlayer/sdk-web": "^1.6.6",
|
|
64
|
+
"@streamlayer/sdk-web-analytics": "^1.5.1",
|
|
65
|
+
"@streamlayer/sdk-web-anonymous-auth": "^1.1.14",
|
|
66
|
+
"@streamlayer/sdk-web-api": "^1.6.14",
|
|
67
|
+
"@streamlayer/sdk-web-core": "^1.8.3",
|
|
68
|
+
"@streamlayer/sdk-web-features": "^1.0.35",
|
|
69
|
+
"@streamlayer/sdk-web-interfaces": "^1.4.1",
|
|
70
|
+
"@streamlayer/sdk-web-logger": "^1.0.35",
|
|
71
|
+
"@streamlayer/sdk-web-notifications": "^1.2.14",
|
|
72
|
+
"@streamlayer/sdk-web-storage": "^1.0.35",
|
|
73
|
+
"@streamlayer/sdk-web-types": "^1.8.8"
|
|
74
74
|
},
|
|
75
75
|
"nx": {
|
|
76
76
|
"implicitDependencies": [
|
|
@@ -78,8 +78,8 @@
|
|
|
78
78
|
]
|
|
79
79
|
},
|
|
80
80
|
"devDependencies": {
|
|
81
|
-
"@connectrpc/connect": "^1.
|
|
82
|
-
"@connectrpc/connect-web": "^1.
|
|
81
|
+
"@connectrpc/connect": "^1.6.1",
|
|
82
|
+
"@connectrpc/connect-web": "^1.6.1",
|
|
83
83
|
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
|
|
84
84
|
"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
|
|
85
85
|
"@linaria/babel-preset": "^5.0.4",
|
|
@@ -111,6 +111,6 @@
|
|
|
111
111
|
"vite-plugin-svgr": "^4.2.0",
|
|
112
112
|
"vite-svg-loader": "^5.1.0",
|
|
113
113
|
"vite-tsconfig-paths": "^5.0.1",
|
|
114
|
-
"@streamlayer/react": "^1.9.
|
|
114
|
+
"@streamlayer/react": "^1.9.6"
|
|
115
115
|
}
|
|
116
116
|
}
|