@streamlayer/react-ui 0.93.0 → 0.94.0

package/lib/ui/questions/insight/index.js

@@ -1,37 +1,21 @@
-import { jsxs as e, jsx as m } from "react/jsx-runtime";
-import { useMemo as T } from "react";
-import { VideoPlayer as v } from "../../video-player/index.js";
-import { isValidDate as b, formatDate as f, formatTime as x } from "../../../utils/common.js";
-import { Container as C, DateWrap as I, Image as j, Content as B, Title as M, Description as P } from "./styles.js";
+import { jsxs as c, jsx as d } from "react/jsx-runtime";
+import { VideoPlayer as u } from "../../video-player/index.js";
+import { Container as v, Image as b, Content as x, Title as C, Description as I } from "./styles.js";
+import "react";
 import "../../icons/index.js";
 import "@linaria/react";
 import "../../video-player/styles.js";
-const G = ({ created: d, instantView: r, isDetail: h, notification: o }) => {
-  const l = T(() => {
-    if (d) {
-      const p = new Date(d);
-      if (b(p))
-        return {
-          date: f(p),
-          time: x(p)
-        };
-    }
-    return null;
-  }, [d]), u = r == null ? void 0 : r.heading, c = r == null ? void 0 : r.body, g = u || c, y = o == null ? void 0 : o.title, D = o == null ? void 0 : o.body;
-  return /* @__PURE__ */ e(C, { children: [
-    l && /* @__PURE__ */ e(I, { children: [
-      l.date,
-      " · ",
-      l.time
-    ] }),
-    (r == null ? void 0 : r.video) && /* @__PURE__ */ m(v, { source: r.video.url, poster: r.video.thumbnailUrl }),
-    (r == null ? void 0 : r.image) && !(r != null && r.video) && /* @__PURE__ */ m(j, { src: r == null ? void 0 : r.image }),
-    /* @__PURE__ */ e(B, { children: [
-      /* @__PURE__ */ m(M, { children: h && g ? u : y }),
-      /* @__PURE__ */ m(P, { children: h && g ? c : D })
+const q = ({ instantView: r, isDetail: l, notification: o }) => {
+  const m = r == null ? void 0 : r.heading, p = r == null ? void 0 : r.body, h = m || p, g = o == null ? void 0 : o.title, y = o == null ? void 0 : o.body;
+  return /* @__PURE__ */ c(v, { children: [
+    (r == null ? void 0 : r.video) && /* @__PURE__ */ d(u, { source: r.video.url, poster: r.video.thumbnailUrl }),
+    (r == null ? void 0 : r.image) && !(r != null && r.video) && /* @__PURE__ */ d(b, { src: r == null ? void 0 : r.image }),
+    /* @__PURE__ */ c(x, { children: [
+      /* @__PURE__ */ d(C, { children: l && h ? m : g }),
+      /* @__PURE__ */ d(I, { children: l && h ? p : y })
     ] })
   ] });
 };
 export {
-  G as InsightContent
+  q as InsightContent
 };

package/lib/ui/questions/insight/styles.d.ts

@@ -3,5 +3,4 @@ export declare const Container: import("@linaria/react").StyledComponent<import(
 export declare const Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
 export declare const Description: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const DateWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Image: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;

package/lib/ui/questions/insight/styles.js

@@ -1,13 +1,13 @@
 import { styled as s } from "@linaria/react";
-const a = /* @__PURE__ */ s("div")({
+const n = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "cgn5uen",
   propsAsIs: !1
-}), n = /* @__PURE__ */ s("div")({
+}), t = /* @__PURE__ */ s("div")({
   name: "Content",
   class: "c1px8nt6",
   propsAsIs: !1
-}), t = /* @__PURE__ */ s("h3")({
+}), a = /* @__PURE__ */ s("h3")({
   name: "Title",
   class: "t5et2jt",
   propsAsIs: !1
@@ -15,20 +15,15 @@ const a = /* @__PURE__ */ s("div")({
   name: "Description",
   class: "d1i2kpk2",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
-  name: "DateWrap",
-  class: "dd3lh3p",
-  propsAsIs: !1
-}), c = /* @__PURE__ */ s("img")({
+}), p = /* @__PURE__ */ s("img")({
   name: "Image",
-  class: "i1gfjeu5",
+  class: "id3lh3p",
   propsAsIs: !1
 });
 export {
-  a as Container,
-  n as Content,
-  p as DateWrap,
+  n as Container,
+  t as Content,
   o as Description,
-  c as Image,
-  t as Title
+  p as Image,
+  a as Title
 };

package/lib/ui/questions/twitter/account/index.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 export type AccountProps = {
     image: string;
-    name: string;
+    name: string | undefined;
     userName: string;
     verified: boolean;
+    createdTweet?: string;
 };
 export declare const Account: React.FC<AccountProps>;

package/lib/ui/questions/twitter/account/index.js

@@ -1,25 +1,31 @@
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { SvgIcon as c } from "../../../icons/index.js";
-import { Container as m, ImageContainer as a, Image as d, TwitterIcon as l, Details as p, Name as s, UserName as h } from "./styles.js";
+import { SvgIcon as a } from "../../../icons/index.js";
+import { getTimeUntilNow as l } from "../../../../utils/common.js";
+import { Container as p, ImageContainer as s, Image as d, TwitterIcon as f, Details as h, Name as D, UserNameAndDate as I } from "./styles.js";
 import "@linaria/react";
 import "react";
-const j = ({ image: e, name: n, userName: i, verified: o }) => /* @__PURE__ */ r(m, { children: [
-  e && /* @__PURE__ */ r(a, { children: [
-    /* @__PURE__ */ t(d, { src: e }),
-    /* @__PURE__ */ t(l, { name: "twitter" })
-  ] }),
-  /* @__PURE__ */ r(p, { children: [
-    /* @__PURE__ */ r(s, { children: [
-      n,
-      " ",
-      o && /* @__PURE__ */ t(c, { name: "icon-twitter-verified" })
+const C = ({ image: i, name: o, userName: e, verified: c, createdTweet: n }) => {
+  const m = n && l(n);
+  return /* @__PURE__ */ r(p, { children: [
+    i && /* @__PURE__ */ r(s, { children: [
+      /* @__PURE__ */ t(d, { src: i }),
+      /* @__PURE__ */ t(f, { name: "twitter" })
     ] }),
-    i && /* @__PURE__ */ r(h, { children: [
-      "@",
-      i
+    /* @__PURE__ */ r(h, { children: [
+      o && /* @__PURE__ */ r(D, { children: [
+        o,
+        " ",
+        c && /* @__PURE__ */ t(a, { name: "icon-twitter-verified" })
+      ] }),
+      e && /* @__PURE__ */ r(I, { children: [
+        "@",
+        e,
+        " ",
+        m && `･ ${m}`
+      ] })
     ] })
-  ] })
-] });
+  ] });
+};
 export {
-  j as Account
+  C as Account
 };

package/lib/ui/questions/twitter/account/styles.d.ts

@@ -5,4 +5,4 @@ export declare const Image: import("@linaria/react").StyledComponent<import("rea
 export declare const TwitterIcon: any;
 export declare const Details: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Name: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const UserName: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const UserNameAndDate: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/questions/twitter/account/styles.js

@@ -27,7 +27,7 @@ const m = /* @__PURE__ */ s("div")({
   class: "nrxa4k8",
   propsAsIs: !1
 }), g = /* @__PURE__ */ s("div")({
-  name: "UserName",
+  name: "UserNameAndDate",
   class: "u1p051g3",
   propsAsIs: !1
 });
@@ -38,5 +38,5 @@ export {
   c as ImageContainer,
   I as Name,
   p as TwitterIcon,
-  g as UserName
+  g as UserNameAndDate
 };

package/lib/ui/questions/twitter/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { TweetHistory, FeedItem } from '@streamlayer/sdk-web-types';
+import { TweetHistory } from '@streamlayer/sdk-web-types';
 export type TwitterContentProps = TweetHistory & {
-    created?: FeedItem['created'];
+    isDetail?: boolean;
 };
 export declare const TwitterContent: React.FC<TwitterContentProps>;

package/lib/ui/questions/twitter/index.js

@@ -1,14 +1,36 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { Account as s } from "./account/index.js";
-import { Container as m, Details as p, Body as c } from "./styles.js";
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { VideoPlayer as v } from "../../video-player/index.js";
+import { Account as y } from "./account/index.js";
+import { Container as C, Details as T, Body as U, Image as j } from "./styles.js";
+import "react";
 import "../../icons/index.js";
 import "@linaria/react";
-import "react";
+import "../../video-player/styles.js";
+import "../../../utils/common.js";
 import "./account/styles.js";
-const a = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), d = (r) => r == null ? void 0 : r.replace(a, ""), j = ({ image: r, body: o, account: i, accountVerified: t }) => /* @__PURE__ */ e(m, { children: /* @__PURE__ */ n(p, { children: [
-  /* @__PURE__ */ e(s, { image: r, name: i, userName: i, verified: t }),
-  /* @__PURE__ */ e(c, { children: d(o) })
-] }) });
+const x = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), D = (i) => i == null ? void 0 : i.replace(x, ""), L = ({ image: i, body: f, account: h, accountVerified: u, tweet: o }) => {
+  var s, m, t, a, c, e, d;
+  const r = (m = (s = o == null ? void 0 : o.meta) == null ? void 0 : s.extendedEntities) == null ? void 0 : m.media, p = (e = (c = (a = (t = r == null ? void 0 : r[0]) == null ? void 0 : t.videoInfo) == null ? void 0 : a.variants) == null ? void 0 : c.find(
+    ({ contentType: g }) => g === "video/mp4"
+  )) == null ? void 0 : e.url;
+  return /* @__PURE__ */ l(C, { children: [
+    /* @__PURE__ */ l(T, { children: [
+      /* @__PURE__ */ n(
+        y,
+        {
+          image: i,
+          name: (d = o == null ? void 0 : o.meta) == null ? void 0 : d.accountName,
+          userName: h,
+          verified: u,
+          createdTweet: o == null ? void 0 : o.date
+        }
+      ),
+      /* @__PURE__ */ n(U, { children: D(f) }),
+      (r == null ? void 0 : r.length) && r[0].type === "photo" && /* @__PURE__ */ n(j, { src: r[0].mediaUrlHttps })
+    ] }),
+    (r == null ? void 0 : r.length) && (r[0].type === "video" || r[0].type === "animated_gif") && p && /* @__PURE__ */ n(v, { source: p, poster: r[0].mediaUrlHttps })
+  ] });
+};
 export {
-  j as TwitterContent
+  L as TwitterContent
 };

package/lib/ui/questions/twitter/styles.d.ts

@@ -2,3 +2,4 @@
 export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Details: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Body: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Image: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;

package/lib/ui/questions/twitter/styles.js

@@ -7,13 +7,18 @@ const e = /* @__PURE__ */ s("div")({
   name: "Details",
   class: "d9r1hf9",
   propsAsIs: !1
-}), t = /* @__PURE__ */ s("div")({
+}), n = /* @__PURE__ */ s("div")({
   name: "Body",
   class: "bezygt5",
   propsAsIs: !1
+}), t = /* @__PURE__ */ s("img")({
+  name: "Image",
+  class: "i1y8f7ym",
+  propsAsIs: !1
 });
 export {
-  t as Body,
+  n as Body,
   e as Container,
-  o as Details
+  o as Details,
+  t as Image
 };

package/lib/utils/common.js

@@ -1,15 +1,29 @@
-const o = (t) => t.split(/\s+/).map((e) => e[0]).join("").toUpperCase(), i = (t) => t ? t.toLocaleString("en-US") : "0", a = (t) => t.toLocaleDateString("en-US", {
+const I = (t) => t.split(/\s+/).map((n) => n[0]).join("").toUpperCase(), s = (t) => t ? t.toLocaleString("en-US") : "0", S = (t) => t.toLocaleDateString("en-US", {
   weekday: "short",
   month: "short",
   day: "numeric"
-}), n = (t) => t.toLocaleTimeString("en-US", {
+}), N = (t) => t.toLocaleTimeString("en-US", {
   hour: "2-digit",
   minute: "2-digit"
-}), r = (t) => !isNaN(t.getTime());
+}), c = (t) => !isNaN(t.getTime()), L = (t) => {
+  const o = new Date(t);
+  if (!o)
+    return "";
+  const r = /* @__PURE__ */ new Date(), e = Math.floor(r.getTime() - o.getTime());
+  return e < 6e4 ? `${Math.floor(e / 1e3)}s` : e < 36e5 ? `${Math.floor(e / 6e4)}m` : e < 864e5 ? `${Math.floor(e / 36e5)}h` : o.getFullYear() === r.getFullYear() ? `${o.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric"
+  })}` : `${o.toLocaleDateString("en-US", {
+    month: "2-digit",
+    day: "2-digit",
+    year: "2-digit"
+  })}`;
+};
 export {
-  o as abbreviate,
-  a as formatDate,
-  i as formatDecimals,
-  n as formatTime,
-  r as isValidDate
+  I as abbreviate,
+  S as formatDate,
+  s as formatDecimals,
+  N as formatTime,
+  L as getTimeUntilNow,
+  c as isValidDate
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.93.0",
+  "version": "0.94.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -36,24 +36,24 @@
   ],
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "*",
-    "@streamlayer/sl-eslib": "^5.64.1",
+    "@streamlayer/sl-eslib": "^5.66.0",
     "@types/lodash.throttle": "^4.1.9",
     "lodash.throttle": "^4.1.1",
     "react-infinite-scroller": "^1.2.6",
     "react-virtualized-auto-sizer": "^1.0.21",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.35.1",
-    "@streamlayer/sdk-web": "^0.30.2",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.34",
-    "@streamlayer/sdk-web-api": "^0.20.1",
-    "@streamlayer/sdk-web-core": "^0.18.2",
-    "@streamlayer/sdk-web-features": "^0.11.16",
-    "@streamlayer/sdk-web-interfaces": "^0.20.1",
-    "@streamlayer/sdk-web-notifications": "^0.13.7",
-    "@streamlayer/sdk-web-logger": "^0.5.12",
-    "@streamlayer/sdk-web-storage": "^0.3.12",
-    "@streamlayer/sdk-web-types": "^0.21.1"
+    "@streamlayer/feature-gamification": "^0.36.0",
+    "@streamlayer/sdk-web": "^0.31.0",
+    "@streamlayer/sdk-web-api": "^0.21.0",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.35",
+    "@streamlayer/sdk-web-core": "^0.19.0",
+    "@streamlayer/sdk-web-features": "^0.11.17",
+    "@streamlayer/sdk-web-interfaces": "^0.20.2",
+    "@streamlayer/sdk-web-logger": "^0.5.13",
+    "@streamlayer/sdk-web-notifications": "^0.13.8",
+    "@streamlayer/sdk-web-storage": "^0.4.0",
+    "@streamlayer/sdk-web-types": "^0.22.0"
   },
   "nx": {
     "implicitDependencies": [
@@ -94,6 +94,6 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^4.3.1",
-    "@streamlayer/react": "^0.37.1"
+    "@streamlayer/react": "^0.38.0"
   }
 }