From 3ad34ee5fbbb212f70f551b3a4d4987de17a44f5 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Wed, 12 Aug 2026 13:39:22 -0700
Subject: [PATCH 1/4] fix(contest): render update messages with
 UserGeneratedTextV2
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes two bugs reported Aug 12 (Michael Cullen) when posting contest winner
announcements:

- Spacing broken: plain <Text> has no white-space:pre-wrap, so newlines typed
  by the host collapse to a single space on render.
- Links not clickable: <Text> renders raw strings; URLs are visible but not
  parsed into <a> tags.

UserGeneratedTextV2 applies white-space:pre-wrap and detects URLs (including
external links such as stream/prize URLs) + @mentions, rendering them as
clickable TextLinks. No internalLinksOnly restriction — contest host
announcements routinely link to external platforms.
---
 .../contest-page/components/ContestCommentsTile.tsx      | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/pages/contest-page/components/ContestCommentsTile.tsx b/packages/web/src/pages/contest-page/components/ContestCommentsTile.tsx
index f41da6aabe7..2c02b937cdd 100644
--- a/packages/web/src/pages/contest-page/components/ContestCommentsTile.tsx
+++ b/packages/web/src/pages/contest-page/components/ContestCommentsTile.tsx
@@ -34,6 +34,7 @@ import { useQueryClient } from '@tanstack/react-query'
 
 import { ComposerInput } from 'components/composer-input/ComposerInput'
 import { UserLink } from 'components/link/UserLink'
+import { UserGeneratedTextV2 } from 'components/user-generated-text/UserGeneratedTextV2'
 import { VideoEmbed } from 'components/video-embed/VideoEmbed'
 import { useProfilePicture } from 'hooks/useProfilePicture'
 import { useRequiresAccountCallback } from 'hooks/useRequiresAccount'
@@ -637,9 +638,9 @@ const ContestCommentRow = ({
             </Box>
           ) : null}
         </Flex>
-        <Text variant='body' size='s'>
+        <UserGeneratedTextV2 variant='body' size='s' mentions={(comment as any).mentions ?? []}>
           {comment.message}
-        </Text>
+        </UserGeneratedTextV2>
         {videoUrl ? (
           <Box mt='xs'>
             {/* Updates only accept YouTube / Vimeo URLs (set via the
@@ -867,9 +868,9 @@ const ContestCommentReplyRow = ({
             ) : null}
           </Flex>
         </Flex>
-        <Text variant='body' size='s'>
+        <UserGeneratedTextV2 variant='body' size='s' mentions={reply.mentions ?? []}>
           {reply.message}
-        </Text>
+        </UserGeneratedTextV2>
         <Flex gap='m' alignItems='center' pt='xs'>
           <Flex
             gap='xs'

From 681f0520aecaf0c3daa5d96037fcf51f217334b6 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Wed, 12 Aug 2026 13:39:24 -0700
Subject: [PATCH 2/4] fix(contest): use UserGeneratedTextV2 + VideoEmbed in
 ContestCommentsSection

Same spacing/link fix as ContestCommentsTile applied to the legacy section
component (used on mobile web / feed mode).

Also replaces native <video src> with <VideoEmbed> so YouTube/Vimeo attached
videos actually render (native <video> can't play yt/vimeo page URLs).
---
 .../components/ContestCommentsSection.tsx     | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/web/src/pages/contest-page/components/ContestCommentsSection.tsx b/packages/web/src/pages/contest-page/components/ContestCommentsSection.tsx
index 07a059251a9..be86695ec0d 100644
--- a/packages/web/src/pages/contest-page/components/ContestCommentsSection.tsx
+++ b/packages/web/src/pages/contest-page/components/ContestCommentsSection.tsx
@@ -23,6 +23,8 @@ import {
 } from '@audius/harmony'
 
 import { UserLink } from 'components/link/UserLink'
+import { UserGeneratedTextV2 } from 'components/user-generated-text/UserGeneratedTextV2'
+import { VideoEmbed } from 'components/video-embed/VideoEmbed'
 
 const messages = {
   heading: 'Contest Feed',
@@ -358,20 +360,13 @@ const ContestCommentRow = ({
           </Text>
         ) : null}
       </Flex>
-      <Text variant='body' size='m'>
+      <UserGeneratedTextV2 variant='body' size='m' mentions={(comment as any).mentions ?? []}>
         {comment.message}
-      </Text>
+      </UserGeneratedTextV2>
       {videoUrl ? (
-        <video
-          controls
-          src={videoUrl}
-          style={{
-            width: '100%',
-            maxHeight: 340,
-            borderRadius: 8,
-            backgroundColor: '#000'
-          }}
-        />
+        <Box mt='xs'>
+          <VideoEmbed url={videoUrl} />
+        </Box>
       ) : null}
     </Paper>
   )

From 79495a6bf908e1f558a2bbb48f1c678165f9e449 Mon Sep 17 00:00:00 2001
From: Dylan Audius <dylan@audius.co>
Date: Wed, 12 Aug 2026 13:58:08 -0700
Subject: [PATCH 3/4] fix(contest): use UserGeneratedText for comment.message
 on mobile

Mobile ContestCommentRow was rendering comment.message with plain <Text>,
same spacing/link bug as the web components fixed in this PR.

Replace with <UserGeneratedText mentions={...}> so newlines are preserved
and URLs + @mentions are clickable. VideoEmbed was already correct on mobile
(no change needed there).
---
 .../src/screens/contest-screen/ContestCommentsList.tsx   | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/mobile/src/screens/contest-screen/ContestCommentsList.tsx b/packages/mobile/src/screens/contest-screen/ContestCommentsList.tsx
index c9d87e286d9..2177d6cea4d 100644
--- a/packages/mobile/src/screens/contest-screen/ContestCommentsList.tsx
+++ b/packages/mobile/src/screens/contest-screen/ContestCommentsList.tsx
@@ -36,6 +36,7 @@ import { ActionDrawerWithoutRedux } from '../../components/action-drawer'
 import { Timestamp } from '../../components/comments/Timestamp'
 import { ComposerInput } from '../../components/composer-input'
 import { ProfilePicture } from '../../components/core/ProfilePicture'
+import { UserGeneratedText } from 'app/components/core'
 import { UserLink } from '../../components/user-link'
 
 const messages = {
@@ -475,9 +476,13 @@ const ContestCommentRow = ({
             />
           ) : null}
         </Flex>
-        <Text variant='body' size='s'>
+        <UserGeneratedText
+          variant='body'
+          size='s'
+          mentions={(comment as any).mentions ?? []}
+        >
           {comment.message}
-        </Text>
+        </UserGeneratedText>
         {videoUrl ? (
           <View style={{ marginTop: 4 }}>
             {/* Updates store YouTube / Vimeo URLs (set via the

From 05877a44343297ae6e53c5ab957d9327482c7594 Mon Sep 17 00:00:00 2001
From: Dylan Audius <dylan@audius.co>
Date: Thu, 13 Aug 2026 17:05:07 -0700
Subject: [PATCH 4/4] fix(contest): satisfy prettier and drop unneeded any
 casts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Format the UserGeneratedText JSX props across multiple lines to match
prettier, move the mobile `app/components/core` import into the alias
import group, and drop the `(comment as any)` casts — `mentions` is a
real property on the Comment model, so the cast was hiding nothing.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../screens/contest-screen/ContestCommentsList.tsx   |  4 ++--
 .../components/ContestCommentsSection.tsx            |  6 +++++-
 .../contest-page/components/ContestCommentsTile.tsx  | 12 ++++++++++--
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/mobile/src/screens/contest-screen/ContestCommentsList.tsx b/packages/mobile/src/screens/contest-screen/ContestCommentsList.tsx
index 2177d6cea4d..914734013a9 100644
--- a/packages/mobile/src/screens/contest-screen/ContestCommentsList.tsx
+++ b/packages/mobile/src/screens/contest-screen/ContestCommentsList.tsx
@@ -30,13 +30,13 @@ import {
   SelectablePill,
   Text
 } from '@audius/harmony-native'
+import { UserGeneratedText } from 'app/components/core'
 import { VideoEmbed } from 'app/components/video-embed/VideoEmbed'
 
 import { ActionDrawerWithoutRedux } from '../../components/action-drawer'
 import { Timestamp } from '../../components/comments/Timestamp'
 import { ComposerInput } from '../../components/composer-input'
 import { ProfilePicture } from '../../components/core/ProfilePicture'
-import { UserGeneratedText } from 'app/components/core'
 import { UserLink } from '../../components/user-link'
 
 const messages = {
@@ -479,7 +479,7 @@ const ContestCommentRow = ({
         <UserGeneratedText
           variant='body'
           size='s'
-          mentions={(comment as any).mentions ?? []}
+          mentions={comment.mentions ?? []}
         >
           {comment.message}
         </UserGeneratedText>
diff --git a/packages/web/src/pages/contest-page/components/ContestCommentsSection.tsx b/packages/web/src/pages/contest-page/components/ContestCommentsSection.tsx
index be86695ec0d..3f058db39a9 100644
--- a/packages/web/src/pages/contest-page/components/ContestCommentsSection.tsx
+++ b/packages/web/src/pages/contest-page/components/ContestCommentsSection.tsx
@@ -360,7 +360,11 @@ const ContestCommentRow = ({
           </Text>
         ) : null}
       </Flex>
-      <UserGeneratedTextV2 variant='body' size='m' mentions={(comment as any).mentions ?? []}>
+      <UserGeneratedTextV2
+        variant='body'
+        size='m'
+        mentions={comment.mentions ?? []}
+      >
         {comment.message}
       </UserGeneratedTextV2>
       {videoUrl ? (
diff --git a/packages/web/src/pages/contest-page/components/ContestCommentsTile.tsx b/packages/web/src/pages/contest-page/components/ContestCommentsTile.tsx
index 2c02b937cdd..e8210188441 100644
--- a/packages/web/src/pages/contest-page/components/ContestCommentsTile.tsx
+++ b/packages/web/src/pages/contest-page/components/ContestCommentsTile.tsx
@@ -638,7 +638,11 @@ const ContestCommentRow = ({
             </Box>
           ) : null}
         </Flex>
-        <UserGeneratedTextV2 variant='body' size='s' mentions={(comment as any).mentions ?? []}>
+        <UserGeneratedTextV2
+          variant='body'
+          size='s'
+          mentions={comment.mentions ?? []}
+        >
           {comment.message}
         </UserGeneratedTextV2>
         {videoUrl ? (
@@ -868,7 +872,11 @@ const ContestCommentReplyRow = ({
             ) : null}
           </Flex>
         </Flex>
-        <UserGeneratedTextV2 variant='body' size='s' mentions={reply.mentions ?? []}>
+        <UserGeneratedTextV2
+          variant='body'
+          size='s'
+          mentions={reply.mentions ?? []}
+        >
           {reply.message}
         </UserGeneratedTextV2>
         <Flex gap='m' alignItems='center' pt='xs'>