@linktr.ee/messaging-react 4.4.4 → 4.4.5-rc-1788226564

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.4.4",
+  "version": "4.4.5-rc-1788226564",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,8 +50,8 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "^2.6.0",
-    "@linktr.ee/messaging-taxonomy": "^0.11.0",
+    "@linktr.ee/messaging-core": "2.6.0-rc-1788226564",
+    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1788226564",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/CustomMessage/StreamAttachmentMessage.test.tsx

@@ -49,6 +49,19 @@ describe('linkCardPropsFromStreamAttachment', () => {
     ).toBe('classic')
   })
 
+  it('drops the audio clip when artwork exists so the card keeps its link', () => {
+    expect(
+      linkCardPropsFromStreamAttachment({
+        type: 'audio',
+        og_scrape_url:
+          'https://open.spotify.com/episode/61syKMXdpkEnkHr43ZsrG2',
+        asset_url: 'https://p.scdn.co/mp3-preview/abc123',
+        image_url: 'https://i.scdn.co/image/artwork.jpg',
+        mime_type: 'audio/mpeg',
+      }).sourceUrl
+    ).toBeUndefined()
+  })
+
   it('keeps the featured layout for a playable clip with no thumbnail so the player renders', () => {
     expect(
       linkCardPropsFromStreamAttachment({
@@ -266,6 +279,39 @@ describe('StreamAttachmentMessage', () => {
     )
   })
 
+  it('renders a scraped page typed audio by its og:audio preview as a link card', () => {
+    // Spotify episode: enrichment types it `audio` and puts the 30s clip in
+    // `asset_url`, but the shared thing is still a link (MES-1359).
+    renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage
+        message={message([
+          {
+            type: 'audio',
+            og_scrape_url:
+              'https://open.spotify.com/episode/61syKMXdpkEnkHr43ZsrG2',
+            asset_url: 'https://p.scdn.co/mp3-preview/abc123',
+            image_url: 'https://i.scdn.co/image/artwork.jpg',
+            mime_type: 'audio/mpeg',
+            title: 'The Lazarus Heist S1: Trailer',
+            text: 'Cyber Hack · Episode',
+          },
+        ])}
+      />
+    )
+
+    expect(
+      screen.getByRole('link', { name: /lazarus heist/i })
+    ).toHaveAttribute(
+      'href',
+      'https://open.spotify.com/episode/61syKMXdpkEnkHr43ZsrG2'
+    )
+    expect(screen.getByRole('img', { name: /lazarus heist/i })).toBeVisible()
+    expect(screen.queryByTestId('audio-attachment')).toBeNull()
+    expect(screen.queryByTestId('card-thumbnail-audio')).toBeNull()
+  })
+
   it('renders the accompanying message text next to a media attachment', () => {
     renderWithProviders(
       <StreamAttachmentMessage

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -9,7 +9,10 @@ import {
 
 import { optimizeMessagingAttachmentUrl } from '../../utils/cdnImageUrl'
 import LinkAttachment from '../LinkAttachment'
-import { isPlayableMedia } from '../LinkAttachment/components/_shared/CardThumbnail'
+import {
+  isPlayableAudio,
+  isPlayableMedia,
+} from '../LinkAttachment/components/_shared/CardThumbnail'
 import { isLinkAttachment } from '../MediaMessage'
 import MessageAttachment from '../MessageAttachment'
 import type { BubbleGroupPosition } from '../MessageAttachment/types'
@@ -85,8 +88,13 @@ export function linkCardPropsFromStreamAttachment(a: Attachment) {
   const thumbnailUrl =
     trimToUndefined((a as { image_url?: string }).image_url) ??
     trimToUndefined((a as { thumb_url?: string }).thumb_url)
-  const sourceUrl = trimToUndefined(a.asset_url)
   const mimeType = trimToUndefined(a.mime_type)
+  const assetUrl = trimToUndefined(a.asset_url)
+  // The audio hero replaces the artwork *and* the card's own link with a bare
+  // player, so a scraped page that has artwork (Spotify) keeps the artwork and
+  // stays navigable; a thumbnail-less clip still plays (MES-947).
+  const sourceUrl =
+    thumbnailUrl && isPlayableAudio(mimeType, assetUrl) ? undefined : assetUrl
 
   return {
     title: trimToUndefined((a as { title?: string }).title),

package/src/components/MediaMessage/index.tsx

@@ -2,9 +2,11 @@ import type { Attachment } from 'stream-chat'
 
 /**
  * True when an attachment is a link preview (OG card) rather than media:
- * either Stream's native `link` type, or a non-empty (trimmed) `og_scrape_url`
- * with no `asset_url`. A whitespace-only `og_scrape_url` is not a link.
+ * either Stream's native `link` type, or a non-empty (trimmed) `og_scrape_url`.
+ * A whitespace-only `og_scrape_url` is not a link. Only enrichment sets
+ * `og_scrape_url`, so it stays authoritative even when the scrape also filled
+ * `asset_url` with a preview clip (Spotify).
  */
 export function isLinkAttachment(a: Attachment): boolean {
-  return a.type === 'link' || (!!a.og_scrape_url?.trim() && !a.asset_url)
+  return a.type === 'link' || !!a.og_scrape_url?.trim()
 }

package/src/components/MediaMessage/isLinkAttachment.test.ts

@@ -18,10 +18,22 @@ describe('isLinkAttachment', () => {
     expect(isLinkAttachment({ og_scrape_url: '   ' } as Attachment)).toBe(false)
   })
 
-  it('is false when og_scrape_url accompanies an asset_url (media, not a link)', () => {
+  it('is true for a scraped page whose og:audio preview typed it as audio', () => {
+    // Spotify: the clip lands in `asset_url`, but it's still a link (MES-1359).
     expect(
       isLinkAttachment({
-        og_scrape_url: 'https://example.com',
+        type: 'audio',
+        og_scrape_url:
+          'https://open.spotify.com/episode/61syKMXdpkEnkHr43ZsrG2',
+        asset_url: 'https://p.scdn.co/mp3-preview/abc123',
+      } as Attachment)
+    ).toBe(true)
+  })
+
+  it('is false for uploaded media, which never carries an og_scrape_url', () => {
+    expect(
+      isLinkAttachment({
+        type: 'video',
         asset_url: 'https://cdn.example.com/file.mp4',
       } as Attachment)
     ).toBe(false)