Display reactions in streamer mode

src/common/pretty.js

@@ -132,3 +132,11 @@ export function buildReactionFromUrl(reaction) {
 
     return reaction.from_info?.service_external_url;
 }
+
+export function truncateString(str, countDots = null) {
+    if (!str || str.length <= 1) {
+        return str;
+    }
+
+    return str[0] + '.'.repeat(countDots || str.length - 1);
+}

src/entries/contentScript/App.jsx

@@ -172,9 +172,7 @@ function App() {
 
             <ReactionPolicyNotice />
 
-            {state !== STATE_LIVE && (
-                <ReactionsHistoryNotice />
-            )}
+            <ReactionsHistoryNotice truncateNames={state === STATE_LIVE} />
 
             {state !== STATE_LIVE && (
                 <SubmitSuggestionNotice />

src/entries/contentScript/components/ReactionsHistoryNotice.jsx

@@ -2,6 +2,7 @@
 import React, { useMemo, Fragment } from 'react';
 import moment from 'moment';
 import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
 import Card from '~/entries/contentScript/components/Card';
 import { useReactions } from '~/common/bridge';
 import { reactionShape } from '~/shapes';
@@ -11,10 +12,14 @@
 import { hasSubscriptionFeature } from '~/entries/contentScript/hooks/useSubscription';
 import { subscriptionIds, subscriptionFeatures } from '~/enums';
 import PremiumCtaLabel from '~/entries/contentScript/components/PremiumCtaLabel';
-import { buildReactionFromUrl } from '~/common/pretty';
+import { buildReactionFromUrl, truncateString } from '~/common/pretty';
 import imageOnError from '~/common/imageOnError';
+import TruncatedString from '~/entries/contentScript/components/TruncatedString';
 
-function ReactionPreview({ reaction }) {
+function ReactionPreview({
+    reaction,
+    truncateNames = false,
+}) {
     const { t } = useTranslation();
 
     const showAvatar = useMemo(() => reaction.from_info?.avatar_url, [reaction]);
@@ -56,7 +61,9 @@
                     rel="noreferrer"
                     className="font-bold text-primary-gradient-hc-from dark:text-primary-gradient-from"
                 >
-                    {reaction.from_info?.display_name}
+                    {truncateNames
+                        ? <TruncatedString value={reaction.from_info?.display_name} />
+                        : reaction.from_info?.display_name}
                 </a>
 
                 {' '}
@@ -106,9 +113,12 @@
 
 ReactionPreview.propTypes = {
     reaction: reactionShape.isRequired,
+    truncateNames: PropTypes.bool,
 };
 
-function ReactionsHistoryNotice() {
+function ReactionsHistoryNotice({
+    truncateNames = false,
+}) {
     const { t } = useTranslation();
     const currentUrl = useAppStore((state) => state.currentUrl);
     const compact = useAppStore((state) => state.isCompact);
@@ -196,7 +206,10 @@
                             <div className="flex flex-col gap-1">
                                 {videoReactions.map((reaction) => (
                                     <Fragment key={reaction.id}>
-                                        <ReactionPreview reaction={reaction} />
+                                        <ReactionPreview
+                                            reaction={reaction}
+                                            truncateNames={truncateNames}
+                                        />
                                     </Fragment>
                                 ))}
                             </div>
@@ -212,7 +225,10 @@
                             <div className="flex flex-col gap-1">
                                 {liveReactions.map((reaction) => (
                                     <Fragment key={reaction.id}>
-                                        <ReactionPreview reaction={reaction} />
+                                        <ReactionPreview
+                                            reaction={reaction}
+                                            truncateNames={truncateNames}
+                                        />
                                     </Fragment>
                                 ))}
                             </div>
@@ -224,7 +240,9 @@
     );
 }
 
-ReactionsHistoryNotice.propTypes = {};
+ReactionsHistoryNotice.propTypes = {
+    truncateNames: PropTypes.bool,
+};
 
 ReactionsHistoryNotice.defaultProps = {};
 

src/entries/contentScript/components/TruncatedString.jsx

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { truncateString } from '~/common/pretty';
+
+function TruncatedString({ value }) {
+    const truncated = useMemo(() => truncateString(value, 100), [value]);
+
+    return (
+        <span className="group/tstr relative overflow-hidden">
+            <span className="invisible group-hover/tstr:visible">{value}</span>
+            <span className="visible absolute left-0 w-full overflow-hidden group-hover/tstr:invisible">{truncated}</span>
+        </span>
+    );
+}
+
+TruncatedString.propTypes = {
+    value: PropTypes.string,
+};
+
+export default TruncatedString;