Merge pull request #661 from GetStream/og-video

feat: display scraped video metadata

Author: szuperaz

package-lock.json

@@ -114,7 +114,7 @@
     "@ctrl/ngx-emoji-mart": "^8.2.0",
     "@floating-ui/dom": "^1.6.3",
     "@ngx-translate/core": "^14.0.0",
-    "@stream-io/stream-chat-css": "5.1.0",
+    "@stream-io/stream-chat-css": "5.3.0",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "1.4.0",
     "dayjs": "^1.11.10",

package.json

@@ -334,17 +334,34 @@
               *ngIf="attachmentConfiguration.url"
               class="str-chat__message-attachment-card--header"
             >
-              <img
-                fetchpriority="low"
-                loading="lazy"
-                data-testclass="card-img"
-                alt="{{ attachmentConfiguration.url }}"
-                src="{{ attachmentConfiguration.url }}"
-                [ngStyle]="{
-                  height: attachmentConfiguration.height,
-                  width: attachmentConfiguration.width
-                }"
-              />
+              <a
+                *ngIf="attachmentContext.type === 'video'; else cardImage"
+                [href]="
+                  attachmentContext.title_link ||
+                  attachmentContext.og_scrape_url
+                "
+                target="_blank"
+                data-testclass="scraped-video"
+              >
+                <ng-content *ngTemplateOutlet="cardImage"></ng-content>
+                <div
+                  class="str-chat__message-attachment-card--video-play"
+                ></div>
+                <stream-icon-placeholder icon="play"></stream-icon-placeholder>
+              </a>
+              <ng-template #cardImage>
+                <img
+                  fetchpriority="low"
+                  loading="lazy"
+                  data-testclass="card-img"
+                  alt="{{ attachmentConfiguration.url }}"
+                  src="{{ attachmentConfiguration.url }}"
+                  [ngStyle]="{
+                    height: attachmentConfiguration.height,
+                    width: attachmentConfiguration.width
+                  }"
+                />
+              </ng-template>
             </div>
             <div class="str-chat__message-attachment-card--content">
               <div class="str-chat__message-attachment-card--flex">

projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.html

@@ -47,6 +47,7 @@ describe('AttachmentListComponent', () => {
   let queryGallery: () => HTMLElement | null;
   let queryVideos: () => HTMLVideoElement[];
   let queryVideoContainers: () => HTMLElement[];
+  let queryScrapedVideos: () => HTMLLinkElement[];
   let sendAction: jasmine.Spy;
 
   beforeEach(async () => {
@@ -130,6 +131,10 @@ describe('AttachmentListComponent', () => {
           '[data-testclass="video-attachment-parent"]'
         )
       );
+    queryScrapedVideos = () =>
+      Array.from(
+        nativeElement.querySelectorAll('[data-testclass=scraped-video]')
+      );
   }));
 
   it('should display received #attachments ordered', () => {
@@ -205,6 +210,48 @@ describe('AttachmentListComponent', () => {
     expect(component.orderedAttachments.length).toBe(1);
   });
 
+  it('should display scraped videos', () => {
+    const scrapedVideoAttachments = [
+      {
+        type: 'video',
+        author_name: 'YouTube',
+        title: 'Rachmaninoff - Prelude in C Sharp Minor (Op. 3 No. 2)',
+        title_link: 'https://www.youtube.com/watch?v=sCtixpIWBto',
+        text: 'Rachmaninoff - Prelude in C Sharp Minor (Op. 3 No. 2) Click the 🔔bell to always be notified on new uploads! ♫ Listen on Spotify: http://spoti.fi/2LdpqK7 ♫ MI...',
+        image_url: 'https://i.ytimg.com/vi/sCtixpIWBto/maxresdefault.jpg',
+        thumb_url: 'https://i.ytimg.com/vi/sCtixpIWBto/maxresdefault.jpg',
+        asset_url: 'https://www.youtube.com/embed/sCtixpIWBto',
+        og_scrape_url: 'https://www.youtube.com/watch?v=sCtixpIWBto',
+      },
+      {
+        type: 'video',
+        author_name: 'Twitch',
+        title: 'ledo_drito - Twitch',
+        title_link: 'https://www.twitch.tv/ledo_drito',
+        text: 'GG',
+        image_url:
+          'https://static-cdn.jtvnw.net/jtv_user_pictures/ae659572-9c29-4f91-867f-d7de167b982f-profile_image-300x300.png',
+        thumb_url:
+          'https://static-cdn.jtvnw.net/jtv_user_pictures/ae659572-9c29-4f91-867f-d7de167b982f-profile_image-300x300.png',
+        asset_url:
+          'https://player.twitch.tv/?channel=ledo_drito&player=facebook&autoplay=true&parent=meta.tag',
+        og_scrape_url: 'https://www.twitch.tv/ledo_drito',
+      },
+    ];
+
+    component.attachments = scrapedVideoAttachments;
+    component.ngOnChanges({ attachments: {} as SimpleChange });
+    fixture.detectChanges();
+
+    const scrapedVideos = queryScrapedVideos();
+
+    expect(scrapedVideos.length).toBe(2);
+
+    scrapedVideos.forEach((video, index) => {
+      expect(video.href).toBe(scrapedVideoAttachments[index].og_scrape_url);
+    });
+  });
+
   it('should display voice recording', () => {
     component.attachments = [mockVoiceRecording];
     component.ngOnChanges({ attachments: {} as SimpleChange });

projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.spec.ts

@@ -152,15 +152,16 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
     return (
       attachment.type === 'video' &&
       attachment.asset_url &&
-      !attachment.og_scrape_url // links from video share services (such as YouTube or Facebook) are can't be played
+      !attachment.og_scrape_url
     );
   }
 
   isCard(attachment: Attachment) {
     return (
       !attachment.type ||
       (attachment.type === 'image' && !this.isImage(attachment)) ||
-      attachment.type === 'giphy'
+      attachment.type === 'giphy' ||
+      (attachment.type === 'video' && attachment.og_scrape_url)
     );
   }