From 7a9b55ef051ff42a2a09666ee2fa904078d7e3b5 Mon Sep 17 00:00:00 2001 From: Zita Szupera Date: Tue, 5 Nov 2024 12:04:19 +0100 Subject: [PATCH] feat: display scraped video metadata --- package-lock.json | 14 +++--- package.json | 2 +- .../attachment-list.component.html | 39 ++++++++++----- .../attachment-list.component.spec.ts | 47 +++++++++++++++++++ .../attachment-list.component.ts | 5 +- 5 files changed, 86 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index 31e9c9bd..113fd694 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,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", @@ -5427,9 +5427,9 @@ } }, "node_modules/@stream-io/stream-chat-css": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/@stream-io/stream-chat-css/-/stream-chat-css-5.1.0.tgz", - "integrity": "sha512-mPR40FzkuCRwSwzPRxOCfvmN6PUTO4DWJVX/VWtFUS8/OXnMOOcHlR1elV9zz/6p2DQEuEjkIFQB9d8wWWKM1A==" + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/@stream-io/stream-chat-css/-/stream-chat-css-5.3.0.tgz", + "integrity": "sha512-3jdDc8Q8zacLs25MmXhKv8hq8GnQ8v5E8o5i+oDOHotnRsXvDFQTixcJi7TC4heOQcVCqLoy5dOfdg9IZuyObw==" }, "node_modules/@stream-io/transliterate": { "version": "1.5.2", @@ -27794,9 +27794,9 @@ "dev": true }, "@stream-io/stream-chat-css": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/@stream-io/stream-chat-css/-/stream-chat-css-5.1.0.tgz", - "integrity": "sha512-mPR40FzkuCRwSwzPRxOCfvmN6PUTO4DWJVX/VWtFUS8/OXnMOOcHlR1elV9zz/6p2DQEuEjkIFQB9d8wWWKM1A==" + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/@stream-io/stream-chat-css/-/stream-chat-css-5.3.0.tgz", + "integrity": "sha512-3jdDc8Q8zacLs25MmXhKv8hq8GnQ8v5E8o5i+oDOHotnRsXvDFQTixcJi7TC4heOQcVCqLoy5dOfdg9IZuyObw==" }, "@stream-io/transliterate": { "version": "1.5.2", diff --git a/package.json b/package.json index 613e7966..944e3591 100644 --- a/package.json +++ b/package.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", diff --git a/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.html b/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.html index cb95b589..cea45d63 100644 --- a/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.html +++ b/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.html @@ -334,17 +334,34 @@ *ngIf="attachmentConfiguration.url" class="str-chat__message-attachment-card--header" > - {{ attachmentConfiguration.url }} + + +
+ + + + {{ attachmentConfiguration.url }} +
diff --git a/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.spec.ts b/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.spec.ts index 99615b41..68942e4b 100644 --- a/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.spec.ts +++ b/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.spec.ts @@ -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 }); diff --git a/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts b/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts index 3ce94f68..85becae4 100644 --- a/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts +++ b/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts @@ -152,7 +152,7 @@ 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 ); } @@ -160,7 +160,8 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy { return ( !attachment.type || (attachment.type === 'image' && !this.isImage(attachment)) || - attachment.type === 'giphy' + attachment.type === 'giphy' || + (attachment.type === 'video' && attachment.og_scrape_url) ); }