@streamlayer/react-ui 1.19.0 → 1.20.0

package/lib/ui/modal/index.js

@@ -1,58 +1,62 @@
-import { jsxs as p, jsx as i } from "react/jsx-runtime";
-import { styled as w } from "@linaria/react";
-import { useState as c, useEffect as d } from "react";
-import { r as a } from "../../index-DALxy-8N.js";
-import { BREAKPOINTS as u } from "../theme/constants.js";
-const h = /* @__PURE__ */ w("div")({
+import { jsxs as c, Fragment as h, jsx as l } from "react/jsx-runtime";
+import { styled as y } from "@linaria/react";
+import { useState as d, useEffect as a } from "react";
+import { r as u } from "../../index-DALxy-8N.js";
+import { BREAKPOINTS as m } from "../theme/constants.js";
+const O = /* @__PURE__ */ y("div")({
   name: "StaticContainer",
   class: "svm502q",
   propsAsIs: !1
-}), y = `
+}), f = `
   .sl-hide-on-modal {
     height: 0 !important;
     opacity: 0 !important;
     overflow: hidden !important;
   }
-`, O = `
+`, S = `
   .sl-pill-button {
     display: none !important;
   }
-`, m = () => window.innerWidth >= u.lg && window.innerWidth < u.xl ? 76 : 53, f = (o) => {
-  var e;
-  const t = m();
-  return Math.round((((e = o.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) - t) <= 0;
+`, w = () => window.innerWidth >= m.lg && window.innerWidth < m.xl ? 76 : 53, p = (e) => {
+  var n;
+  const t = w();
+  return Math.round((((n = e.current) == null ? void 0 : n.getBoundingClientRect().y) || 0) - t) <= 0;
 }, x = ({
-  children: o,
+  children: e,
   container: t,
-  useContainer: e
+  useContainer: n
 }) => {
-  const [l] = c(() => f(t)), [n, s] = c(!1);
-  return d(() => {
-    if (!t.current || !l)
-      return s(!0), () => {
+  const [s] = d(() => p(t)), [r, i] = d(!1);
+  return a(() => {
+    if (!t.current || !s)
+      return i(!0), () => {
       };
-    const r = window.scrollY;
-    return s(!0), () => {
-      f(t) && window.scrollTo({
-        top: r,
+    const o = window.scrollY;
+    return i(!0), () => {
+      p(t) && window.scrollTo({
+        top: o,
         behavior: "instant"
       });
     };
-  }, []), d(() => {
-    if (n && t.current && l) {
-      const r = m();
+  }, []), a(() => {
+    if (r && t.current && s) {
+      const o = w();
       window.scrollTo({
-        top: t.current.offsetTop - r,
+        top: t.current.offsetTop - o,
         behavior: "instant"
       });
     }
-  }, [n]), !t.current || !n ? null : e ? a.createPortal(/* @__PURE__ */ p(h, {
-    children: [o, /* @__PURE__ */ i("style", {
-      children: y
-    }), /* @__PURE__ */ i("style", {
-      children: O
+  }, [r]), !t.current || !r ? null : n ? u.createPortal(/* @__PURE__ */ c(O, {
+    children: [e, /* @__PURE__ */ l("style", {
+      children: f
+    }), /* @__PURE__ */ l("style", {
+      children: S
     })]
-  }), t.current, "modal-node") : a.createPortal(o, t.current, "modal-node");
+  }), t.current, "modal-node") : u.createPortal(/* @__PURE__ */ c(h, {
+    children: [/* @__PURE__ */ l("style", {
+      children: f
+    }), e]
+  }), t.current, "modal-node");
 };
 export {
   x as ModalPortal

package/lib/ui/show-in/index.js

@@ -1,54 +1,54 @@
 import { jsx as c } from "react/jsx-runtime";
-import { cx as h } from "@linaria/core";
+import { cx as g } from "@linaria/core";
 import { styled as p } from "@linaria/react";
-import { useRef as l, useMemo as a } from "react";
-const w = /* @__PURE__ */ p("div")({
+import { useRef as l } from "react";
+const u = /* @__PURE__ */ p("div")({
   name: "Container",
   class: "c1pgyo67",
   propsAsIs: !1
-}), f = "sx17qu6", d = "h1692c5m", x = ({
+}), h = "sx17qu6", w = "h1692c5m", f = ({
   children: r,
   style: e,
-  className: n,
-  enabled: o = !0,
+  className: o,
+  enabled: t = !0,
   hiding: s,
-  onAnimationEnd: t
-}) => /* @__PURE__ */ c(w, {
+  onAnimationEnd: n
+}) => /* @__PURE__ */ c(u, {
   style: e,
-  className: h(n, o && f, o && s && d),
-  onAnimationEnd: t,
+  className: g(o, t && h, t && s && w),
+  onAnimationEnd: n,
   children: r
-}), y = () => x, C = /* @__PURE__ */ p(y())({
+}), d = () => f, y = /* @__PURE__ */ p(d())({
   name: "GrowingContainer",
   class: "gck55ev",
   propsAsIs: !0
-}), G = ({
+}), v = ({
   children: r,
   style: e,
-  enabled: n,
-  animate: o,
+  enabled: o,
+  animate: t,
   ...s
 }) => {
-  const t = l(null), u = a(() => {
-    const m = t == null ? void 0 : t.current, i = m && window.getComputedStyle(m), g = i == null ? void 0 : i.getPropertyValue("height");
-    return n ? {
-      height: o ? g : 0
-    } : {};
-  }, [n, o]);
-  return /* @__PURE__ */ c(C, {
+  const n = l(null);
+  return /* @__PURE__ */ c(y, {
     ...s,
-    enabled: n && o,
+    enabled: o && t,
     style: {
       ...e,
-      ...u
+      ...(() => {
+        const m = n == null ? void 0 : n.current, i = m && window.getComputedStyle(m), a = i == null ? void 0 : i.getPropertyValue("height");
+        return o ? {
+          height: t ? a : 0
+        } : {};
+      })()
     },
     children: /* @__PURE__ */ c("div", {
-      ref: t,
+      ref: n,
       children: r
     })
   });
 };
 export {
-  G as GrowingShowIn,
-  x as ShowIn
+  v as GrowingShowIn,
+  f as ShowIn
 };

package/lib/ui/theme/masters-theme.js

@@ -1,7 +1,7 @@
 import { breakpoints as n } from "./breakpoints.js";
-import { COLORS as i, FONT as t } from "./constants.js";
+import { COLORS as r, FONT as t } from "./constants.js";
 const c = {
-  ...i,
+  ...r,
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error
   BG_TRANSPARENT: "rgba(0,0,0, .8)",
@@ -73,9 +73,9 @@ const c = {
   SERIF1: "'Tiempos', 'Tiempos Headline', Times New Roman, serif",
   COLOR: "#fff",
   WEIGHT_DEFAULT: "500"
-}, f = Object.entries(c).reduce((o, [a, r]) => `
+}, f = Object.entries(c).reduce((o, [a, i]) => `
     ${o}
-    --color-${a.toLowerCase().replaceAll("_", "-")}: ${r};
+    --color-${a.toLowerCase().replaceAll("_", "-")}: ${i};
   `, ""), _ = `
   ${f}
   --font-family: ${e.REGULAR};
@@ -179,6 +179,7 @@ const c = {
   --path-fill-vote-answer-indicator: #107D57;
   --font-weight-percentage: normal;
   --margin-left-percentage: 8px;
+  --question-content-max-width: unset;
   --line-height-percentage: 17px;
   --line-height-percentage: 1.55em;
   --border-color-btn-correct: #107D57;
@@ -189,6 +190,9 @@ const c = {
   --vote-options-margin-bottom: 0px;
   --fw-feedback: inherit;
   --letter-spacing-question-title: normal;
+  --margin-left-pts: 0px;
+  --display-question-container: initial;
+  --justify-content-question-container: initial;
 
   .betPack {
     --padding-question-content: 0.8em 0.8em 0em 0.8em;
@@ -228,6 +232,7 @@ const c = {
     --path-fill-vote-answer-indicator: #fff;
     --font-weight-percentage: 500;
     --margin-left-percentage: 0.72em;
+    --question-content-max-width: 500px;
     --line-height-percentage: 1.55em;
     --border-color-btn-correct: #fff;
     --border-color-btn-voted: #fff;
@@ -244,6 +249,9 @@ const c = {
     --vote-options-margin-bottom: 0.5em;
     --fw-feedback: 600;
     --letter-spacing-question-title: -0.03em;
+    --margin-left-pts: 0.72em;
+    --display-question-container: flex;
+    --justify-content-question-container: center;
   }
 `, p = "m1ojpy2l";
 export {

package/lib/ui/theme/theme.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import { breakpoints as n } from "./breakpoints.js";
+import { breakpoints as a } from "./breakpoints.js";
 import { colors as p, colorsAdvertisement as s, FONT as e } from "./constants.js";
 const l = `
   ${p}
@@ -54,11 +54,11 @@ const l = `
   --promo-animation-duration: 0.5s;
   --promo-animation-function: ease-in;
 
-  ${n.down("xl")`
+  ${a.down("xl")`
     --header-offset: 0px;
   `}
 
-  ${n.intermediate("xl", "lg")`
+  ${a.intermediate("xl", "lg")`
     --header-offset: 0px;
   `}
 
@@ -129,6 +129,7 @@ const l = `
   --path-fill-vote-answer-indicator: #107D57;
   --font-weight-percentage: normal;
   --margin-left-percentage: 8px;
+  --question-content-max-width: unset;
   --line-height-percentage: 17px;
   --line-height-percentage: 1.55em;
   --border-color-btn-correct: #107D57;
@@ -139,7 +140,10 @@ const l = `
   --vote-options-margin-bottom: 0px;
   --fw-feedback: inherit;
   --letter-spacing-question-title: normal;
+  --margin-left-pts: 0px;
 
+  --display-question-container: initial;
+  --justify-content-question-container: initial;
 `, h = "StreamLayerCSSReset", m = "ttkj0ah", g = () => /* @__PURE__ */ t("table", {
   children: /* @__PURE__ */ i("table", {
     children: [/* @__PURE__ */ t("thead", {
@@ -152,14 +156,14 @@ const l = `
       })
     }), /* @__PURE__ */ t("tbody", {
       children: l.split(";").map((o) => {
-        const a = o.trim(), [r, d] = a.split(":");
+        const n = o.trim(), [r, d] = n.split(":");
         return /* @__PURE__ */ i("tr", {
           children: [/* @__PURE__ */ t("td", {
             children: r
           }), /* @__PURE__ */ t("td", {
             children: d
           })]
-        }, a);
+        }, n);
       })
     })]
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -64,24 +64,24 @@
     "@streamlayer/sl-eslib": "^5.149.1",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
-    "nanoid": "3.3.7",
     "react-infinite-scroller": "^1.2.6",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^1.15.0",
-    "@streamlayer/sdk-web": "^1.9.0",
-    "@streamlayer/sdk-web-analytics": "^1.6.2",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.1.24",
-    "@streamlayer/sdk-web-core": "^1.11.0",
-    "@streamlayer/sdk-web-api": "^1.7.2",
-    "@streamlayer/sdk-web-features": "^1.0.45",
-    "@streamlayer/react-polyfills": "^0.1.5",
-    "@streamlayer/sdk-web-interfaces": "^1.4.11",
-    "@streamlayer/sdk-web-logger": "^1.0.45",
-    "@streamlayer/sdk-web-notifications": "^1.3.7",
-    "@streamlayer/sdk-web-storage": "^1.0.45",
-    "@streamlayer/sdk-web-types": "^1.10.2"
+    "uuid": "^11.1.0",
+    "@streamlayer/feature-gamification": "^1.16.0",
+    "@streamlayer/react-polyfills": "^0.1.7",
+    "@streamlayer/sdk-web": "^1.10.0",
+    "@streamlayer/sdk-web-analytics": "^1.7.0",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.26",
+    "@streamlayer/sdk-web-api": "^1.8.0",
+    "@streamlayer/sdk-web-core": "^1.11.2",
+    "@streamlayer/sdk-web-features": "^1.0.47",
+    "@streamlayer/sdk-web-interfaces": "^1.4.13",
+    "@streamlayer/sdk-web-logger": "^1.0.47",
+    "@streamlayer/sdk-web-notifications": "^1.3.9",
+    "@streamlayer/sdk-web-storage": "^1.0.47",
+    "@streamlayer/sdk-web-types": "^1.10.4"
   },
   "nx": {
     "implicitDependencies": [
@@ -123,6 +123,12 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.13.0"
+    "@streamlayer/react": "^1.14.0"
+  },
+  "dependencies": {
+    "@dailymotion/vast-client": "^6.2.0",
+    "video.js": "^8.21.0",
+    "videojs-contrib-ads": "^7.5.2",
+    "vpaid-html5-client": "^0.1.14"
   }
 }

package/lib/index-BEm7B1u1.js

@@ -1,72 +0,0 @@
-let t = [], v = (r, u) => {
-  let i = [], e = {
-    get() {
-      return e.lc || e.listen(() => {
-      })(), e.value;
-    },
-    l: u || 0,
-    lc: 0,
-    listen(n, f) {
-      return e.lc = i.push(n, f || e.l) / 2, () => {
-        let a = i.indexOf(n);
-        ~a && (i.splice(a, 2), --e.lc || e.off());
-      };
-    },
-    notify(n, f) {
-      let a = !t.length;
-      for (let l = 0; l < i.length; l += 2)
-        t.push(
-          i[l],
-          i[l + 1],
-          e.value,
-          n,
-          f
-        );
-      if (a) {
-        for (let l = 0; l < t.length; l += 5) {
-          let o;
-          for (let s = l + 1; !o && (s += 5) < t.length; )
-            t[s] < t[l + 1] && (o = t.push(
-              t[l],
-              t[l + 1],
-              t[l + 2],
-              t[l + 3],
-              t[l + 4]
-            ));
-          o || t[l](
-            t[l + 2],
-            t[l + 3],
-            t[l + 4]
-          );
-        }
-        t.length = 0;
-      }
-    },
-    /* It will be called on last listener unsubscribing.
-       We will redefine it in onMount and onStop. */
-    off() {
-    },
-    set(n) {
-      let f = e.value;
-      f !== n && (e.value = n, e.notify(f));
-    },
-    subscribe(n, f) {
-      let a = e.listen(n, f);
-      return n(e.value), a;
-    },
-    value: r
-  };
-  return e;
-}, p = (r = {}) => {
-  let u = v(r);
-  return u.setKey = function(i, e) {
-    let n = u.value;
-    typeof e > "u" && i in u.value ? (u.value = { ...u.value }, delete u.value[i], u.notify(n, i)) : u.value[i] !== e && (u.value = {
-      ...u.value,
-      [i]: e
-    }, u.notify(n, i));
-  }, u;
-};
-export {
-  p as m
-};