@streamlayer/react-ui 1.26.1 → 1.27.0

package/lib/app/app/story/styles.js

@@ -1,29 +1,49 @@
 import { styled as s } from "@linaria/react";
-const o = /* @__PURE__ */ s("div")({
-  name: "PointsContainer",
-  class: "p10yam33",
+const a = /* @__PURE__ */ s("div")({
+  name: "VideoContainer",
+  class: "v10yam33",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("button")({
+  name: "VideoMuteButton",
+  class: "v13be41a",
   propsAsIs: !1
 }), n = /* @__PURE__ */ s("div")({
+  name: "PointsContainer",
+  class: "p18d3gas",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
   name: "VideoPlayerWrap",
-  class: "v13be41a",
+  class: "v1aq3x2u",
   propsAsIs: !1
-}), e = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "VideoFrame",
-  class: "v18d3gas",
+  class: "v6hlblg",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("a")({
+}), r = /* @__PURE__ */ s("a")({
   name: "LinkToLogin",
-  class: "l1aq3x2u",
+  class: "l1ir4g01",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("video")({
+  name: "VideoTag",
+  class: "vq35lm3",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("iframe")({
+  name: "VideoIFrame",
+  class: "v1trv37l",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
-  name: "NotificationContainer",
-  class: "n6hlblg",
+}), d = /* @__PURE__ */ s("div")({
+  name: "Preload",
+  class: "plx7e50",
   propsAsIs: !1
 });
 export {
-  i as LinkToLogin,
-  r as NotificationContainer,
-  o as PointsContainer,
-  e as VideoFrame,
-  n as VideoPlayerWrap
+  r as LinkToLogin,
+  n as PointsContainer,
+  d as Preload,
+  a as VideoContainer,
+  l as VideoFrame,
+  p as VideoIFrame,
+  o as VideoMuteButton,
+  i as VideoPlayerWrap,
+  t as VideoTag
 };

package/lib/app/app/story/video.d.ts

@@ -1 +1,5 @@
-export declare const Video: React.FC;
+export { VideoContainer, VideoMuteButton } from './styles';
+export declare const Video: React.FC<{
+    muted: boolean;
+    toggleMute: (flag: boolean) => void;
+}>;

package/lib/app/app/story/video.js

@@ -1,35 +1,70 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { useState as l, useCallback as m, useEffect as s } from "react";
-import { useStreamLayer as d } from "@streamlayer/react";
-import { StreamLayerSDKNotification as p } from "../InApp/index.js";
-import { StreamLayerSDKPoints as c } from "../Points/index.js";
-import { VideoFrame as u, PointsContainer as f, VideoPlayerWrap as h, NotificationContainer as y, LinkToLogin as g } from "./styles.js";
-const P = () => {
-  const e = d(), [i, a] = l(!0), o = m(({ muted: n }) => {
-    a(n);
-  }, []);
-  return s(() => (e == null || e.addVideoPlayerController(o), () => {
-    e == null || e.removeVideoPlayerController(o);
-  }), [e, o]), /* @__PURE__ */ t(u, { "data-testid": "video-frame", children: [
-    e && /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(c, { sdk: e }) }),
-    /* @__PURE__ */ t(h, { children: [
-      /* @__PURE__ */ r(
-        "video",
-        {
-          src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
-          muted: i,
-          width: "100%",
-          height: "100%",
-          autoplay: "autoplay",
-          loop: !0,
-          playsInline: !0,
-          playing: !0
-        }
-      ),
-      e && /* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(p, { sdk: e }) })
-    ] }),
-    /* @__PURE__ */ r(
-      g,
+import { jsxs as S, jsx as t } from "react/jsx-runtime";
+import p from "hls.js";
+import { useRef as y, useState as h, useCallback as P, useEffect as a } from "react";
+import { useStreamLayer as V } from "@streamlayer/react";
+import { StreamLayerSDKPoints as b } from "../Points/index.js";
+import { VideoFrame as w, PointsContainer as v, VideoPlayerWrap as C, LinkToLogin as L, Preload as x, VideoIFrame as k, VideoTag as I } from "./styles.js";
+import { VideoContainer as K, VideoMuteButton as W } from "./styles.js";
+const R = ({ muted: l, toggleMute: i }) => {
+  const e = y(), c = y(), o = V(), [n, u] = h(""), [m, g] = h(!1), s = P(
+    ({ muted: r }) => {
+      i(r), e.current.mute = r;
+    },
+    [i]
+  );
+  return a(() => (o == null || o.addVideoPlayerController(s), () => {
+    o == null || o.removeVideoPlayerController(s);
+  }), [o, s]), a(() => o ? o.streamSummary().subscribe((r) => {
+    var d, f;
+    (f = (d = r.data) == null ? void 0 : d.summary) != null && f.stream && u(r.data.summary.stream);
+  }) : () => {
+  }, [o]), a(() => () => {
+    c.current && clearTimeout(c.current);
+  }, []), a(() => {
+    if (n && n.includes("m3u8"))
+      if (p.isSupported() && e.current) {
+        const r = new p({
+          debug: !1
+        });
+        r.loadSource(n), r.attachMedia(e.current);
+      } else
+        u("");
+    e.current && (e.current.volume = 0.1, e.current.play().then(() => setInteracted(!0)).catch(() => {
+      g(!0);
+    }));
+  }, [n]), a(() => {
+    var r;
+    m && ((r = e.current) == null || r.play());
+  }, [m]), n ? n.includes("player.castr.com") ? /* @__PURE__ */ t(
+    k,
+    {
+      src: `${n}?loop=on&fullscreen=off&airplay=off&cast=off&pip=off`,
+      width: "100%",
+      height: "100%",
+      frameBorder: "0",
+      scrolling: "no",
+      allow: "autoplay"
+    }
+  ) : /* @__PURE__ */ t(
+    I,
+    {
+      src: n,
+      ref: e,
+      muted: l,
+      autoPlay: !0,
+      loop: !0,
+      playsInline: !0,
+      controls: !0,
+      controlsList: "nodownload nofullscreen noremoteplayback"
+    }
+  ) : /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t("img", { src: "https://cdn.streamlayer.io/sdk-web-demo/loader.png", alt: "" }) });
+}, M = ({ muted: l, toggleMute: i }) => {
+  const e = V();
+  return /* @__PURE__ */ S(w, { "data-testid": "video-frame", children: [
+    e && /* @__PURE__ */ t(v, { children: /* @__PURE__ */ t(b, { sdk: e }) }),
+    /* @__PURE__ */ t(C, { children: /* @__PURE__ */ t(R, { muted: l, toggleMute: i }) }),
+    /* @__PURE__ */ t(
+      L,
       {
         href: "./iframe.html?args=&globals=viewport:appDesktop&id=app-login--login&viewMode=story",
         rel: "noreferrer",
@@ -39,5 +74,7 @@ const P = () => {
   ] });
 };
 export {
-  P as Video
+  M as Video,
+  K as VideoContainer,
+  W as VideoMuteButton
 };

package/lib/app/app/useApp.d.ts

@@ -1,7 +1,6 @@
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import { FeatureType } from '@streamlayer/sdk-web-types';
 export declare const useAppApp: (sdk: StreamLayerSDK) => {
     sdkReady: boolean;
-    activeFeature: FeatureType | undefined;
+    activeFeature: any;
     isLogged: boolean;
 };

package/lib/app/masters/BetPack/BetPackContent/StartScreen/styles.d.ts

@@ -1,4 +1,10 @@
 export declare const NextButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
-export declare const IconArrowRight: any;
+export declare const IconArrowRight: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../../../../ui/icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;
 export declare const StartScreenSponsor: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const StartScreenNote: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;