@streamplace/components 0.7.2 → 0.7.7

package/dist/ui/index.js

@@ -0,0 +1,79 @@
+"use strict";
+/**
+ * @streamplace/components/ui - Streamplace ZeroCSS
+ *
+ * Clean export path for ZeroCSS styling utilities, design tokens, and atomic styles.
+ * ZeroCSS provides a zero-config, atomic styling system optimized for React Native.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.atomsNS = exports.theme = exports.useTheme = exports.usePlatformTypography = exports.lightTheme = exports.darkTheme = exports.createThemedStyles = exports.createThemeStyles = exports.createThemeIcons = exports.createThemeColors = exports.ThemeProvider = exports.responsiveValue = exports.platformStyle = exports.mergeStyles = exports.debounce = exports.typography = exports.spacing = exports.shadows = exports.colors = exports.breakpoints = exports.borderRadius = exports.w = exports.top = exports.text = exports.right = exports.r = exports.py = exports.px = exports.pt = exports.pr = exports.position = exports.pl = exports.pb = exports.p = exports.my = exports.mx = exports.mt = exports.mr = exports.ml = exports.mb = exports.m = exports.left = exports.layout = exports.h = exports.gap = exports.flex = exports.bottom = exports.borders = exports.bg = exports.atoms = void 0;
+exports.utils = exports.tokens = void 0;
+const tslib_1 = require("tslib");
+// Export the most commonly used ZeroCSS utilities
+var atoms_1 = require("../lib/theme/atoms");
+// Core atoms object
+Object.defineProperty(exports, "atoms", { enumerable: true, get: function () { return atoms_1.atoms; } });
+// Common shorthand utilities
+Object.defineProperty(exports, "bg", { enumerable: true, get: function () { return atoms_1.bg; } });
+// Border utilities
+Object.defineProperty(exports, "borders", { enumerable: true, get: function () { return atoms_1.borders; } });
+Object.defineProperty(exports, "bottom", { enumerable: true, get: function () { return atoms_1.bottom; } });
+// Flex utilities
+Object.defineProperty(exports, "flex", { enumerable: true, get: function () { return atoms_1.flex; } });
+// Gap utilities (React Native 0.71+)
+Object.defineProperty(exports, "gap", { enumerable: true, get: function () { return atoms_1.gap; } });
+Object.defineProperty(exports, "h", { enumerable: true, get: function () { return atoms_1.h; } });
+// Layout utilities
+Object.defineProperty(exports, "layout", { enumerable: true, get: function () { return atoms_1.layout; } });
+Object.defineProperty(exports, "left", { enumerable: true, get: function () { return atoms_1.left; } });
+Object.defineProperty(exports, "m", { enumerable: true, get: function () { return atoms_1.m; } });
+Object.defineProperty(exports, "mb", { enumerable: true, get: function () { return atoms_1.mb; } });
+Object.defineProperty(exports, "ml", { enumerable: true, get: function () { return atoms_1.ml; } });
+Object.defineProperty(exports, "mr", { enumerable: true, get: function () { return atoms_1.mr; } });
+Object.defineProperty(exports, "mt", { enumerable: true, get: function () { return atoms_1.mt; } });
+Object.defineProperty(exports, "mx", { enumerable: true, get: function () { return atoms_1.mx; } });
+Object.defineProperty(exports, "my", { enumerable: true, get: function () { return atoms_1.my; } });
+Object.defineProperty(exports, "p", { enumerable: true, get: function () { return atoms_1.p; } });
+Object.defineProperty(exports, "pb", { enumerable: true, get: function () { return atoms_1.pb; } });
+Object.defineProperty(exports, "pl", { enumerable: true, get: function () { return atoms_1.pl; } });
+// Position utilities
+Object.defineProperty(exports, "position", { enumerable: true, get: function () { return atoms_1.position; } });
+Object.defineProperty(exports, "pr", { enumerable: true, get: function () { return atoms_1.pr; } });
+Object.defineProperty(exports, "pt", { enumerable: true, get: function () { return atoms_1.pt; } });
+Object.defineProperty(exports, "px", { enumerable: true, get: function () { return atoms_1.px; } });
+Object.defineProperty(exports, "py", { enumerable: true, get: function () { return atoms_1.py; } });
+Object.defineProperty(exports, "r", { enumerable: true, get: function () { return atoms_1.r; } });
+Object.defineProperty(exports, "right", { enumerable: true, get: function () { return atoms_1.right; } });
+Object.defineProperty(exports, "text", { enumerable: true, get: function () { return atoms_1.text; } });
+Object.defineProperty(exports, "top", { enumerable: true, get: function () { return atoms_1.top; } });
+Object.defineProperty(exports, "w", { enumerable: true, get: function () { return atoms_1.w; } });
+// Export ZeroCSS design tokens
+var tokens_1 = require("../lib/theme/tokens");
+Object.defineProperty(exports, "borderRadius", { enumerable: true, get: function () { return tokens_1.borderRadius; } });
+Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return tokens_1.breakpoints; } });
+Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return tokens_1.colors; } });
+Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return tokens_1.shadows; } });
+Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return tokens_1.spacing; } });
+Object.defineProperty(exports, "typography", { enumerable: true, get: function () { return tokens_1.typography; } });
+// Export ZeroCSS utility functions
+var utils_1 = require("../lib/utils");
+Object.defineProperty(exports, "debounce", { enumerable: true, get: function () { return utils_1.debounce; } });
+Object.defineProperty(exports, "mergeStyles", { enumerable: true, get: function () { return utils_1.mergeStyles; } });
+Object.defineProperty(exports, "platformStyle", { enumerable: true, get: function () { return utils_1.platformStyle; } });
+Object.defineProperty(exports, "responsiveValue", { enumerable: true, get: function () { return utils_1.responsiveValue; } });
+// Export ZeroCSS theme system
+var theme_1 = require("../lib/theme/theme");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return theme_1.ThemeProvider; } });
+Object.defineProperty(exports, "createThemeColors", { enumerable: true, get: function () { return theme_1.createThemeColors; } });
+Object.defineProperty(exports, "createThemeIcons", { enumerable: true, get: function () { return theme_1.createThemeIcons; } });
+Object.defineProperty(exports, "createThemeStyles", { enumerable: true, get: function () { return theme_1.createThemeStyles; } });
+Object.defineProperty(exports, "createThemedStyles", { enumerable: true, get: function () { return theme_1.createThemedStyles; } });
+Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return theme_1.darkTheme; } });
+Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return theme_1.lightTheme; } });
+Object.defineProperty(exports, "usePlatformTypography", { enumerable: true, get: function () { return theme_1.usePlatformTypography; } });
+Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return theme_1.useTheme; } });
+// Namespace exports for power users
+exports.theme = tslib_1.__importStar(require("../lib/theme"));
+exports.atomsNS = tslib_1.__importStar(require("../lib/theme/atoms"));
+exports.tokens = tslib_1.__importStar(require("../lib/theme/tokens"));
+exports.utils = tslib_1.__importStar(require("../lib/utils"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.2",
+  "version": "0.7.7",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -28,11 +28,14 @@
   "dependencies": {
     "@atproto/api": "^0.15.7",
     "@atproto/crypto": "^0.4.4",
+    "@emoji-mart/react": "^1.1.1",
     "@gorhom/bottom-sheet": "^5.1.6",
     "@react-navigation/native": "^6.1.18",
     "@rn-primitives/dropdown-menu": "^1.2.0",
     "@rn-primitives/portal": "^1.3.0",
+    "@rn-primitives/slider": "^1.2.0",
     "class-variance-authority": "^0.6.1",
+    "expo-keep-awake": "~14.1.4",
     "expo-video": "~2.2.1",
     "hls.js": "^1.5.17",
     "lucide-react-native": "^0.514.0",
@@ -41,6 +44,7 @@
     "react-native-gesture-handler": "~2.26.0",
     "react-native-reanimated": "~3.18.0",
     "react-native-safe-area-context": "5.4.1",
+    "react-native-svg": "15.12.0",
     "react-native-webrtc": "git+https://github.com/streamplace/react-native-webrtc.git#6b8472a771ac47f89217d327058a8a4124a6ae56",
     "react-use-websocket": "^4.13.0",
     "streamplace": "0.7.2",
@@ -50,5 +54,5 @@
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "b07a68160ae6da34cf47aa397b4ef452248d79e5"
+  "gitHead": "8c2cad31c840efeda8aa7f797f91dddbedb95397"
 }

package/src/components/chat/chat-box.tsx

@@ -1,6 +1,7 @@
-import { X } from "lucide-react-native";
+import Picker from "@emoji-mart/react";
+import { AtSignIcon, ExternalLink, X } from "lucide-react-native";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Pressable, TextInput } from "react-native";
+import { Platform, Pressable, TextInput } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import {
   Button,
@@ -8,30 +9,60 @@ import {
   Text,
   useChat,
   useCreateChatMessage,
+  useLivestream,
   useReplyToMessage,
   useSetReplyToMessage,
   View,
 } from "../../";
-import { bg, flex, gap, h, layout, mb, pl, pr, w } from "../../lib/theme/atoms";
+import {
+  bg,
+  flex,
+  gap,
+  h,
+  layout,
+  mb,
+  mr,
+  pl,
+  pr,
+  py,
+  w,
+} from "../../lib/theme/atoms";
 import { usePDSAgent } from "../../streamplace-store/xrpc";
 import { Textarea } from "../ui/textarea";
 import { RenderChatMessage } from "./chat-message";
+import { EmojiData, EmojiSuggestions } from "./emoji-suggestions";
 import { MentionSuggestions } from "./mention-suggestions";
 
+const COOL_EMOJI_LIST = [
+  ..."😀🥸😍😘😁🥸😆🥸😜🥸😂😅🥸🙂🤫😱🥸🤣😗😄🥸😎🤓😲😯😰🥸😥🥸😣🥸😞😓🥸😩😩🥸😤🥱",
+];
+
 export function ChatBox({
   isPopout,
   chatBoxStyle,
+  emojiData,
+  setIsChatVisible,
 }: {
   isPopout?: boolean;
   chatBoxStyle?: any;
+  emojiData: EmojiData;
+  setIsChatVisible?: (visible: boolean) => void;
 }) {
   const [submitting, setSubmitting] = useState(false);
   const [message, setMessage] = useState("");
   const [showSuggestions, setShowSuggestions] = useState(false);
+  const [showEmojiSuggestions, setShowEmojiSuggestions] = useState(false);
+  const [showEmojiSelector, setShowEmojiSelector] = useState(false);
+  const [emojiIconIndex, setEmojiIconIndex] = useState(
+    Math.floor(Math.random() * COOL_EMOJI_LIST.length),
+  );
   const [highlightedIndex, setHighlightedIndex] = useState(0);
   const [filteredAuthors, setFilteredAuthors] = useState<Map<string, any>>(
     new Map(),
   );
+  const [filteredEmojis, setFilteredEmojis] = useState<any[]>([]);
+
+  let linfo = useLivestream();
 
   const chat = useChat();
   const createChatMessage = useCreateChatMessage();
@@ -63,25 +94,145 @@ export function ChatBox({
     setShowSuggestions(false);
   };
 
+  const handleEmojiSelect = (emoji: any) => {
+    const beforeColon = message.slice(0, message.lastIndexOf(":"));
+    setMessage(`${beforeColon}${emoji.skins[0]?.native} `);
+    setShowEmojiSuggestions(false);
+  };
+
   const updateSuggestions = (text: string) => {
+    // Handle mentions
     const atIndex = text.lastIndexOf("@");
-    if (atIndex === -1 || !authors) {
+    if (atIndex !== -1 && authors) {
+      const searchText = text.slice(atIndex + 1).toLowerCase();
+      const filteredAuthorsMap = new Map(
+        Array.from(authors.entries()).filter(([handle]) =>
+          handle.toLowerCase().includes(searchText),
+        ),
+      );
+      setFilteredAuthors(filteredAuthorsMap);
+      setHighlightedIndex(0);
+      setShowSuggestions(filteredAuthorsMap.size > 0);
+      setShowEmojiSuggestions(false);
+    } else {
       setShowSuggestions(false);
-      return;
     }
 
-    const searchText = text.slice(atIndex + 1).toLowerCase();
+    const colonIndex = text.lastIndexOf(":");
+    if (colonIndex !== -1) {
+      const searchText = text.slice(colonIndex + 1).toLowerCase();
+      if (searchText.length > 0) {
+        const aliasMatches = Object.entries(emojiData.aliases)
+          .map(([alias, emojiId]) => {
+            const aliasLower = alias.toLowerCase();
+            if (aliasLower === searchText) {
+              return { emojiId, alias, matchType: 0, index: 0 };
+            } else if (aliasLower.startsWith(searchText)) {
+              return { emojiId, alias, matchType: 1, index: 0 };
+            } else if (aliasLower.includes(searchText)) {
+              return {
+                emojiId,
+                alias,
+                matchType: 2,
+                index: aliasLower.indexOf(searchText),
+              }; // includes
+            }
+            return null;
+          })
+          .filter(Boolean);
+
+        // Map emojiId to best alias match info
+        const bestAliasMatch: Record<
+          string,
+          { matchType: number; index: number; alias: string }
+        > = {};
+        for (const match of aliasMatches) {
+          if (!match) continue;
+          const prev = bestAliasMatch[match.emojiId];
+          if (
+            !prev ||
+            match?.matchType < prev.matchType ||
+            (match.matchType === prev.matchType && match.index < prev.index)
+          ) {
+            bestAliasMatch[match.emojiId] = match;
+          }
+        }
 
-    const filteredAuthorsMap = new Map(
-      Array.from(authors.entries()).filter(([handle]) =>
-        handle.toLowerCase().includes(searchText),
-      ),
-    );
+        // Collect all matching emojis by id, name, keywords, or alias
+        const allEmojis = Object.values(emojiData.emojis);
+        const filtered = allEmojis
+          .map((emoji: any) => {
+            // Check alias match
+            const aliasMatch = bestAliasMatch[emoji.id];
+            if (aliasMatch) {
+              return {
+                emoji,
+                sort: [aliasMatch.matchType, aliasMatch.index, 0],
+              };
+            }
+            // Check id, name, keywords
+            if (emoji.id.toLowerCase() === searchText) {
+              return { emoji, sort: [3, 0, 0] }; // exact id
+            }
+            if (emoji.id.toLowerCase().startsWith(searchText)) {
+              return { emoji, sort: [4, 0, 0] }; // startsWith id
+            }
+            if (emoji.id.toLowerCase().includes(searchText)) {
+              return {
+                emoji,
+                sort: [5, emoji.id.toLowerCase().indexOf(searchText), 0],
+              }; // includes id
+            }
+            if (emoji.name.toLowerCase().includes(searchText)) {
+              return {
+                emoji,
+                sort: [6, emoji.name.toLowerCase().indexOf(searchText), 0],
+              };
+            }
+            if (
+              emoji.keywords &&
+              emoji.keywords.some((keyword: string) =>
+                keyword.toLowerCase().includes(searchText),
+              )
+            ) {
+              return { emoji, sort: [7, 0, 0] };
+            }
+            return null;
+          })
+          .filter(Boolean)
+          // Remove duplicates by emoji id (keep best match)
+          .reduce((acc: any[], curr: any) => {
+            if (!acc.find((e) => e.emoji.id === curr.emoji.id)) {
+              acc.push(curr);
+            }
+            return acc;
+          }, [])
+          // Sort by alias match type, then position, then fallback
+          .sort((a, b) => {
+            for (let i = 0; i < a.sort.length; ++i) {
+              if (a.sort[i] !== b.sort[i]) return a.sort[i] - b.sort[i];
+            }
+            return 0;
+          })
+          .slice(0, 10) // Limit to 10 results
+          .map((entry) => entry.emoji);
 
-    setFilteredAuthors(filteredAuthorsMap);
+        setFilteredEmojis(filtered);
+        setHighlightedIndex(0);
+        setShowEmojiSuggestions(filtered.length > 0);
+        setShowSuggestions(false);
+      } else {
+        setShowEmojiSuggestions(false);
+      }
+    } else {
+      setShowEmojiSuggestions(false);
+    }
 
-    setHighlightedIndex(0);
-    setShowSuggestions(filteredAuthorsMap.size > 0);
+    // If neither mention nor emoji, hide all suggestions
+    if (atIndex === -1 && colonIndex === -1) {
+      setShowSuggestions(false);
+      setShowEmojiSuggestions(false);
+    }
   };
 
   const submit = () => {
@@ -110,10 +261,11 @@ export function ChatBox({
             layout.flex.row,
             layout.flex.alignCenter,
             layout.flex.spaceBetween,
-            h[12],
             pl[2],
-            pr[10],
+            pr[6],
+            mr[6],
             mb[2],
+            py[1],
             bg.gray[800],
             { borderRadius: 16 },
           ]}
@@ -140,6 +292,35 @@ export function ChatBox({
           </Pressable>
         </View>
       )}
+      {showEmojiSelector && (
+        <>
+          {/* Overlay to catch outside clicks */}
+          <Pressable
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: 200,
+            }}
+            onPress={() => setShowEmojiSelector(false)}
+          />
+          <View
+            style={{
+              position: "absolute",
+              bottom: "100%",
+              left: 0,
+              zIndex: 2001,
+            }}
+          >
+            <Picker
+              data={emojiData}
+              onEmojiSelect={(e) => setMessage(message + e.native)}
+            />
+          </View>
+        </>
+      )}
       <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
         <Textarea
           ref={textAreaRef}
@@ -160,16 +341,40 @@ export function ChatBox({
                 if (handles.length > 0) {
                   handleMentionSelect(handles[highlightedIndex]);
                 }
-              } else submit();
+              } else if (showEmojiSuggestions) {
+                k.preventDefault();
+                if (filteredEmojis.length > 0) {
+                  handleEmojiSelect(filteredEmojis[highlightedIndex]);
+                }
+              } else {
+                submit();
+              }
             } else if (k.nativeEvent.key === "ArrowUp") {
-              setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+              if (showSuggestions || showEmojiSuggestions) {
+                k.preventDefault();
+                setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+              }
             } else if (k.nativeEvent.key === "ArrowDown") {
-              setHighlightedIndex((prev) =>
-                Math.min(
-                  prev + 1,
-                  Array.from(filteredAuthors.keys()).length - 1,
-                ),
-              );
+              if (showSuggestions) {
+                k.preventDefault();
+                setHighlightedIndex((prev) =>
+                  Math.min(
+                    prev + 1,
+                    Array.from(filteredAuthors.keys()).length - 1,
+                  ),
+                );
+              } else if (showEmojiSuggestions) {
+                k.preventDefault();
+                setHighlightedIndex((prev) =>
+                  Math.min(prev + 1, filteredEmojis.length - 1),
+                );
+              }
+            } else if (k.nativeEvent.key === "Escape") {
+              if (showSuggestions || showEmojiSuggestions) {
+                k.preventDefault();
+                setShowSuggestions(false);
+                setShowEmojiSuggestions(false);
+              }
             }
           }}
           style={[chatBoxStyle]}
@@ -185,11 +390,76 @@ export function ChatBox({
       </View>
       {showSuggestions && (
         <MentionSuggestions
-          authors={filteredAuthors || []}
+          authors={filteredAuthors || new Map()}
           highlightedIndex={highlightedIndex}
           onSelect={handleMentionSelect}
         />
       )}
+      {showEmojiSuggestions && (
+        <EmojiSuggestions
+          emojis={filteredEmojis}
+          highlightedIndex={highlightedIndex}
+          onSelect={handleEmojiSelect}
+        />
+      )}
+      {Platform.OS === "web" && (
+        <View
+          style={[
+            layout.flex.row,
+            mb[2],
+            gap.all[2],
+            { justifyContent: "flex-end" },
+          ]}
+        >
+          <Button
+            variant="secondary"
+            style={{ borderRadius: 16, height: 36, maxWidth: 36 }}
+            onPress={() => {
+              // if the last character is not @, add it
+              !message.endsWith("@") && setMessage(message + "@");
+              // get all the text after the last @
+              const atIndex = message.lastIndexOf("@");
+              const searchText = message.slice(atIndex + 1).toLowerCase();
+              updateSuggestions(searchText);
+              setShowSuggestions(true);
+              // focus the textarea
+              textAreaRef.current?.focus();
+            }}
+          >
+            <AtSignIcon size={20} color="white" />
+          </Button>
+          <Pressable
+            onHoverOut={() => {
+              setEmojiIconIndex(
+                Math.floor(Math.random() * COOL_EMOJI_LIST.length),
+              );
+            }}
+          >
+            <Button
+              variant="secondary"
+              style={{ borderRadius: 16, height: 36, maxWidth: 36 }}
+              onPress={() => setShowEmojiSelector(!showEmojiSelector)}
+            >
+              <Text>{COOL_EMOJI_LIST[emojiIconIndex]}</Text>
+            </Button>
+          </Pressable>
+          {!isPopout && (
+            <Button
+              variant="secondary"
+              style={{ borderRadius: 16, height: 36, maxWidth: 36 }}
+              onPress={() => {
+                if (!linfo) return;
+                const u = new URL(window.location.href);
+                u.pathname = `/chat-popout/${linfo?.author?.did}`;
+                window.open(u.toString(), "_blank", "popup=true");
+                setIsChatVisible?.(false);
+              }}
+            >
+              <ExternalLink size={16} />
+            </Button>
+          )}
+        </View>
+      )}
     </View>
   );
 }

package/src/components/chat/chat-message.tsx

@@ -17,7 +17,7 @@ import {
   pl,
   w,
 } from "../../lib/theme/atoms";
-import { atoms, layout } from "../ui";
+import { atoms, colors, layout } from "../ui";
 
 interface Facet {
   index: {
@@ -35,7 +35,7 @@ import { useLivestreamStore } from "../../livestream-store";
 import { Text } from "../ui/text";
 
 const getRgbColor = (color?: { red: number; green: number; blue: number }) =>
-  color ? `rgb(${color.red}, ${color.green}, ${color.blue})` : "$accentColor";
+  color ? `rgb(${color.red}, ${color.green}, ${color.blue})` : colors.gray[500];
 
 const segmentedObject = (
   obj: RichtextSegment,
@@ -59,7 +59,6 @@ const segmentedObject = (
     } else if (ftr.$type === "app.bsky.richtext.facet#mention") {
       let mtnftr = ftr as $Typed<Mention>;
       const profile = userCache?.[mtnftr.did];
-      console.log(profile, mtnftr.did, userCache);
       return (
         <Text
           key={`mention-${index}`}
@@ -115,7 +114,6 @@ export const RenderChatMessage = memo(
         hour12: false,
       });
     }, []);
-
     return (
       <>
         {item.replyTo && showReply && (
@@ -142,7 +140,7 @@ export const RenderChatMessage = memo(
               </Text>{" "}
               <Text
                 style={{
-                  color: atoms.colors.gray[300],
+                  color: colors.gray[300],
                   fontStyle: "italic",
                 }}
               >
@@ -156,7 +154,7 @@ export const RenderChatMessage = memo(
             <Text
               style={{
                 fontVariant: ["tabular-nums"],
-                color: atoms.colors.gray[300],
+                color: colors.gray[400],
               }}
             >
               {formatTime(item.record.createdAt)}
@@ -186,7 +184,8 @@ export const RenderChatMessage = memo(
   (prevProps, nextProps) => {
     return (
       prevProps.item.author.handle === nextProps.item.author.handle &&
-      prevProps.item.record.text === nextProps.item.record.text
+      prevProps.item.record.text === nextProps.item.record.text &&
+      prevProps.item.uri === nextProps.item.uri
     );
   },
 );