@streamlayer/react-ui 1.32.0 → 1.32.2

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.
Files changed (5) hide show
  1. package/lib/app/webos/ExposedPauseAd/PauseAd.js +50 -52
  2. package/lib/app/webos/ExposedPauseAd/styles.d.ts +1 -2
  3. package/lib/app/webos/ExposedPauseAd/styles.js +26 -31
  4. package/lib/assets/style.css +1 -1
  5. package/package.json +15 -15
package/lib/app/webos/ExposedPauseAd/PauseAd.js CHANGED
@@ -1,40 +1,40 @@
1
- import { jsx as r, jsxs as x } from "react/jsx-runtime";
2
- import { cx as M } from "@linaria/core";
3
- import { useFocusable as F } from "@noriginmedia/norigin-spatial-navigation";
4
- import { useState as b, useRef as B, useCallback as D, useEffect as P } from "react";
1
+ import { jsx as a, jsxs as x } from "react/jsx-runtime";
2
+ import { cx as F } from "@linaria/core";
3
+ import { useFocusable as G } from "@noriginmedia/norigin-spatial-navigation";
4
+ import { useState as w, useRef as L, useCallback as B, useEffect as P } from "react";
5
5
  import { useStore as I } from "@streamlayer/react-polyfills";
6
- import { eventBus as g } from "@streamlayer/sdk-web-interfaces";
6
+ import { eventBus as S } from "@streamlayer/sdk-web-interfaces";
7
7
  import { useLoadGAMStatic as C } from "../../../ui/advertisement/overlay/externalAd/vast-player/useGAMStatic.js";
8
- import { PauseAdOverlay as j, PauseAdContent as K, PauseAdGradientRight as N, PauseAdGradientBottom as O, PauseAdTopLeft as V, PauseAdTitle as $, PauseAdCaption as q, PauseAdBottomLeft as z, PauseAdPlayButton as H, PauseAdSidebar as J, PauseAdTitleDescription as Q, ExternalAdContainer as L } from "./styles.js";
9
- const W = ({ vastUrl: t, isDesktop: n }) => {
8
+ import { PauseAdOverlay as N, PauseAdContent as j, PauseAdTopLeft as K, PauseAdTitle as O, PauseAdCaption as V, PauseAdBottomLeft as $, PauseAdPlayButton as _, PauseAdSidebarGradient as q, PauseAdSidebar as z, PauseAdTitleDescription as H, ExternalAdContainer as D } from "./styles.js";
9
+ const J = ({ vastUrl: r, isDesktop: n }) => {
10
10
  var u;
11
- const [, y] = C(), e = I(y, { keys: [t] });
11
+ const [, y] = C(), e = I(y, { keys: [r] });
12
12
  return P(() => {
13
- e && e[t] && e[t].imageSrc && e[t].id && g.emit("exposedPauseAd", {
13
+ e && e[r] && e[r].imageSrc && e[r].id && S.emit("exposedPauseAd", {
14
14
  action: "rendered",
15
15
  payload: {
16
- id: e[t].id
16
+ id: e[r].id
17
17
  }
18
18
  });
19
- }, [e, t]), (u = e == null ? void 0 : e[t]) != null && u.imageSrc ? !e[t].adUrl || !n ? /* @__PURE__ */ r(L, { src: e[t].imageSrc }) : /* @__PURE__ */ r(
19
+ }, [e, r]), (u = e == null ? void 0 : e[r]) != null && u.imageSrc ? !e[r].adUrl || !n ? /* @__PURE__ */ a(D, { src: e[r].imageSrc }) : /* @__PURE__ */ a(
20
20
  "a",
21
21
  {
22
22
  onClick: () => {
23
- g.emit("exposedPauseAd", {
23
+ S.emit("exposedPauseAd", {
24
24
  action: "navigated",
25
25
  payload: {
26
- id: e[t].id
26
+ id: e[r].id
27
27
  }
28
28
  });
29
29
  },
30
- href: e[t].adUrl,
30
+ href: e[r].adUrl,
31
31
  target: "_blank",
32
32
  rel: "noopener noreferrer",
33
- children: /* @__PURE__ */ r(L, { src: e[t].imageSrc })
33
+ children: /* @__PURE__ */ a(D, { src: e[r].imageSrc })
34
34
  }
35
35
  ) : null;
36
- }, X = ({ isClosing: t, title: n, caption: y, onPlay: e, onClose: u, vastUrl: f, options: a, isDesktop: m }) => {
37
- const T = (a == null ? void 0 : a.showPauseButton) ?? !0, { ref: d, focusSelf: p } = F({
36
+ }, Q = ({ isClosing: r, title: n, caption: y, onPlay: e, onClose: u, vastUrl: f, options: t, isDesktop: m }) => {
37
+ const T = (t == null ? void 0 : t.showPauseButton) ?? !0, { ref: d, focusSelf: p } = G({
38
38
  focusKey: "sl-pause-ad-play",
39
39
  onEnterRelease: e,
40
40
  isFocusBoundary: !0,
@@ -54,15 +54,13 @@ const W = ({ vastUrl: t, isDesktop: n }) => {
54
54
  }
55
55
  };
56
56
  return window.addEventListener("keydown", h, { capture: !0 }), () => window.removeEventListener("keydown", h, { capture: !0 });
57
- }, [u]), /* @__PURE__ */ r(j, { className: M("SL_PauseAdOverlay", t && "pause-ad-closing"), children: /* @__PURE__ */ x(K, { children: [
58
- /* @__PURE__ */ r(N, {}),
59
- /* @__PURE__ */ r(O, {}),
60
- /* @__PURE__ */ x(V, { children: [
61
- /* @__PURE__ */ r($, { children: n }),
62
- /* @__PURE__ */ r(q, { children: y })
57
+ }, [u]), /* @__PURE__ */ a(N, { className: F("SL_PauseAdOverlay", r && "pause-ad-closing"), children: /* @__PURE__ */ x(j, { children: [
58
+ /* @__PURE__ */ x(K, { children: [
59
+ /* @__PURE__ */ a(O, { children: n }),
60
+ /* @__PURE__ */ a(V, { children: y })
63
61
  ] }),
64
- T && /* @__PURE__ */ r(z, { children: /* @__PURE__ */ r(
65
- H,
62
+ T && /* @__PURE__ */ a($, { children: /* @__PURE__ */ a(
63
+ _,
66
64
  {
67
65
  ref: d,
68
66
  onClick: e,
@@ -70,43 +68,43 @@ const W = ({ vastUrl: t, isDesktop: n }) => {
70
68
  "aria-label": "Resume playback"
71
69
  }
72
70
  ) }),
73
- /* @__PURE__ */ x(J, { children: [
74
- f && /* @__PURE__ */ r(W, { isDesktop: m, vastUrl: f }),
75
- /* @__PURE__ */ r(Q, { children: "ADVERTISEMENT" })
76
- ] })
71
+ /* @__PURE__ */ a(q, { className: "SL_PauseAdSidebar", children: /* @__PURE__ */ x(z, { children: [
72
+ f && /* @__PURE__ */ a(J, { isDesktop: m, vastUrl: f }),
73
+ /* @__PURE__ */ a(H, { children: "ADVERTISEMENT" })
74
+ ] }) })
77
75
  ] }) });
78
- }, re = ({ showPauseAd: t, vastUrls: n, title: y, caption: e, sdk: u, onClose: f, onRender: a, options: m, isDesktop: T }) => {
79
- const d = (m == null ? void 0 : m.pauseAdDelay) ?? 5e3, [p, h] = b(!1), [A, s] = b(!1), c = B(), i = n == null ? void 0 : n[0].url, S = B(i);
80
- S.current = i;
81
- const [E, k] = C(), o = D(() => {
82
- f && (g.emit("exposedPauseAd", {
76
+ }, re = ({ showPauseAd: r, vastUrls: n, title: y, caption: e, sdk: u, onClose: f, onRender: t, options: m, isDesktop: T }) => {
77
+ const d = (m == null ? void 0 : m.pauseAdDelay) ?? 5e3, [p, h] = w(!1), [A, s] = w(!1), c = L(), i = n == null ? void 0 : n[0].url, g = L(i);
78
+ g.current = i;
79
+ const [b, E] = C(), o = B(() => {
80
+ f && (S.emit("exposedPauseAd", {
83
81
  action: "closed",
84
82
  payload: {}
85
83
  }), f());
86
- }, [f]), G = D(() => {
84
+ }, [f]), M = B(() => {
87
85
  u.controlVideoPlayer({ play: !0 });
88
86
  }, [u]);
89
87
  return P(() => {
90
- if (t && i) {
91
- g.emit("exposedPauseAd", {
88
+ if (r && i) {
89
+ S.emit("exposedPauseAd", {
92
90
  action: "enabled",
93
91
  payload: {}
94
- }), E(i).then((l) => {
95
- S.current === i && (l == null ? void 0 : l.success) !== !0 && (clearTimeout(c.current), o == null || o());
92
+ }), b(i).then((l) => {
93
+ g.current === i && (l == null ? void 0 : l.success) !== !0 && (clearTimeout(c.current), o == null || o());
96
94
  }).catch(() => {
97
- S.current === i && (clearTimeout(c.current), o == null || o());
95
+ g.current === i && (clearTimeout(c.current), o == null || o());
98
96
  });
99
- const w = () => {
100
- const l = k.get()[S.current];
97
+ const k = () => {
98
+ const l = E.get()[g.current];
101
99
  l != null && l.imageSrc ? (clearTimeout(c.current), s(!1), h(!0)) : c.current = setTimeout(() => {
102
- w();
100
+ k();
103
101
  }, 200);
104
102
  };
105
103
  c.current = setTimeout(() => {
106
- w();
104
+ k();
107
105
  }, d);
108
106
  } else
109
- g.emit("exposedPauseAd", {
107
+ S.emit("exposedPauseAd", {
110
108
  action: "disabled",
111
109
  payload: {}
112
110
  }), s(!0), c.current = setTimeout(() => {
@@ -115,18 +113,18 @@ const W = ({ vastUrl: t, isDesktop: n }) => {
115
113
  return () => {
116
114
  c.current && clearTimeout(c.current);
117
115
  };
118
- }, [k, E, o, d, t, i]), P(() => {
119
- a == null || a({ rendered: p });
120
- }, [p, a]), P(() => () => {
121
- a == null || a({ rendered: !1 });
122
- }, [a]), p ? /* @__PURE__ */ r(
123
- X,
116
+ }, [E, b, o, d, r, i]), P(() => {
117
+ t == null || t({ rendered: p });
118
+ }, [p, t]), P(() => () => {
119
+ t == null || t({ rendered: !1 });
120
+ }, [t]), p ? /* @__PURE__ */ a(
121
+ Q,
124
122
  {
125
123
  onClose: o,
126
124
  isClosing: A,
127
125
  title: y,
128
126
  caption: e,
129
- onPlay: G,
127
+ onPlay: M,
130
128
  vastUrl: i,
131
129
  options: m,
132
130
  isDesktop: T
package/lib/app/webos/ExposedPauseAd/styles.d.ts CHANGED
@@ -1,12 +1,11 @@
1
1
  export declare const PauseAdOverlay: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
2
2
  export declare const PauseAdContent: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
3
- export declare const PauseAdGradientRight: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
4
- export declare const PauseAdGradientBottom: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
5
3
  export declare const PauseAdTopLeft: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
6
4
  export declare const PauseAdTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLHeadingElement> & import('react').HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
7
5
  export declare const PauseAdCaption: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLParagraphElement> & import('react').HTMLAttributes<HTMLParagraphElement> & Record<never, unknown>>;
8
6
  export declare const PauseAdBottomLeft: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
9
7
  export declare const PauseAdPlayButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
8
+ export declare const PauseAdSidebarGradient: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
10
9
  export declare const PauseAdSidebar: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
11
10
  export declare const PauseAdTitleDescription: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
12
11
  export declare const ExternalAdContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
package/lib/app/webos/ExposedPauseAd/styles.js CHANGED
@@ -7,58 +7,53 @@ const e = /* @__PURE__ */ s("div")({
7
7
  name: "PauseAdContent",
8
8
  class: "p8lpomy",
9
9
  propsAsIs: !1
10
- }), o = /* @__PURE__ */ s("div")({
11
- name: "PauseAdGradientRight",
10
+ }), p = /* @__PURE__ */ s("div")({
11
+ name: "PauseAdTopLeft",
12
12
  class: "pv7u167",
13
13
  propsAsIs: !1
14
- }), p = /* @__PURE__ */ s("div")({
15
- name: "PauseAdGradientBottom",
14
+ }), o = /* @__PURE__ */ s("h2")({
15
+ name: "PauseAdTitle",
16
16
  class: "p1kh2yb0",
17
17
  propsAsIs: !1
18
- }), n = /* @__PURE__ */ s("div")({
19
- name: "PauseAdTopLeft",
18
+ }), n = /* @__PURE__ */ s("p")({
19
+ name: "PauseAdCaption",
20
20
  class: "pl8f94x",
21
21
  propsAsIs: !1
22
- }), d = /* @__PURE__ */ s("h2")({
23
- name: "PauseAdTitle",
22
+ }), d = /* @__PURE__ */ s("div")({
23
+ name: "PauseAdBottomLeft",
24
24
  class: "p1m6zmrt",
25
25
  propsAsIs: !1
26
- }), l = /* @__PURE__ */ s("p")({
27
- name: "PauseAdCaption",
26
+ }), l = /* @__PURE__ */ s("button")({
27
+ name: "PauseAdPlayButton",
28
28
  class: "pm3vwfa",
29
29
  propsAsIs: !1
30
30
  }), A = /* @__PURE__ */ s("div")({
31
- name: "PauseAdBottomLeft",
31
+ name: "PauseAdSidebarGradient",
32
32
  class: "p1tibuhw",
33
33
  propsAsIs: !1
34
- }), r = /* @__PURE__ */ s("button")({
35
- name: "PauseAdPlayButton",
36
- class: "ptqqrqd",
37
- propsAsIs: !1
38
- }), i = /* @__PURE__ */ s("div")({
34
+ }), r = /* @__PURE__ */ s("div")({
39
35
  name: "PauseAdSidebar",
40
- class: "p14estxv",
36
+ class: "ptqqrqd",
41
37
  propsAsIs: !1
42
- }), u = /* @__PURE__ */ s("span")({
38
+ }), i = /* @__PURE__ */ s("span")({
43
39
  name: "PauseAdTitleDescription",
44
- class: "p1dpvfl1",
40
+ class: "p14estxv",
45
41
  propsAsIs: !1
46
- }), c = /* @__PURE__ */ s("img")({
42
+ }), u = /* @__PURE__ */ s("img")({
47
43
  name: "ExternalAdContainer",
48
- class: "ezfmabr",
44
+ class: "e1dpvfl1",
49
45
  propsAsIs: !1
50
46
  });
51
47
  export {
52
- c as ExternalAdContainer,
53
- A as PauseAdBottomLeft,
54
- l as PauseAdCaption,
48
+ u as ExternalAdContainer,
49
+ d as PauseAdBottomLeft,
50
+ n as PauseAdCaption,
55
51
  t as PauseAdContent,
56
- p as PauseAdGradientBottom,
57
- o as PauseAdGradientRight,
58
52
  e as PauseAdOverlay,
59
- r as PauseAdPlayButton,
60
- i as PauseAdSidebar,
61
- d as PauseAdTitle,
62
- u as PauseAdTitleDescription,
63
- n as PauseAdTopLeft
53
+ l as PauseAdPlayButton,
54
+ r as PauseAdSidebar,
55
+ A as PauseAdSidebarGradient,
56
+ o as PauseAdTitle,
57
+ i as PauseAdTitleDescription,
58
+ p as PauseAdTopLeft
64
59
  };