feat(playlist): add additional images webp format support

- add webp for additional images - fix tests
jwplayer · Jan 31, 2023 · 579cd0c · 579cd0c
1 parent 01ad7ca
commit 579cd0c
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 12 deletions.
diff --git a/src/utils/image.test.ts b/src/utils/image.test.ts
@@ -21,7 +21,7 @@ describe('image utils', () => {
       const images = generateImageData(config, 'shelfImage', playlist.playlist[0], playlistWithProperty);
 
       expect(images).toEqual({
-        image: 'https://img.jwplayer.com/v1/media/uB8aRnu6/images/playlist_label.jpg?width=640',
+        image: 'https://img.jwplayer.com/v1/media/uB8aRnu6/images/playlist_label.webp?width=640',
         fallbackImage: 'https://cdn.jwplayer.com/v2/media/uB8aRnu6/poster.jpg?width=640',
       });
     });
@@ -31,16 +31,16 @@ describe('image utils', () => {
       const images = generateImageData(config, 'shelfImage', playlist.playlist[0], playlistWithProperty, 1280);
 
       expect(images).toEqual({
-        image: 'https://img.jwplayer.com/v1/media/uB8aRnu6/images/playlist_label.jpg?width=1280',
+        image: 'https://img.jwplayer.com/v1/media/uB8aRnu6/images/playlist_label.webp?width=1280',
         fallbackImage: 'https://cdn.jwplayer.com/v2/media/uB8aRnu6/poster.jpg?width=1280',
       });
     });
   });
 
   describe('generateAlternateImageURL', () => {
     test('generates a correct image URL', () => {
-      expect(generateAlternateImageURL('123456', 'label', 640)).toEqual('https://img.jwplayer.com/v1/media/123456/images/label.jpg?width=640');
-      expect(generateAlternateImageURL('654321', 'shelf', 1280)).toEqual('https://img.jwplayer.com/v1/media/654321/images/shelf.jpg?width=1280');
+      expect(generateAlternateImageURL('123456', 'label', 640)).toEqual('https://img.jwplayer.com/v1/media/123456/images/label.webp?width=640');
+      expect(generateAlternateImageURL('654321', 'shelf', 1280)).toEqual('https://img.jwplayer.com/v1/media/654321/images/shelf.webp?width=1280');
     });
   });
 });
diff --git a/src/utils/image.ts b/src/utils/image.ts
@@ -3,7 +3,7 @@ import type { Playlist, PlaylistItem } from '#types/playlist';
 import { findPlaylistImageForWidth } from '#src/utils/collection';
 
 export const generateAlternateImageURL = (mediaid: string, imageLabel: string, width: number) =>
-  `https://img.jwplayer.com/v1/media/${mediaid}/images/${imageLabel}.jpg?width=${width}`;
+  `https://img.jwplayer.com/v1/media/${mediaid}/images/${imageLabel}.webp?width=${width}`;
 
 export const generateImageData = (config: Config, propertyName: string, item: PlaylistItem, playlist?: Playlist, width = 640) => {
   const posterImage = findPlaylistImageForWidth(item, width);

diff --git a/test-e2e/tests/home_test.ts b/test-e2e/tests/home_test.ts
@@ -130,8 +130,8 @@ Scenario('I can slide within non-featured shelves', async ({ I }) => {
 Scenario('I can see alternate shelf images for the `All Films` shelf', async ({ I }) => {
   // scroll to shelf to make it visible and for screenshot
   await I.scrollToShelf(ShelfId.allFilms);
-  await I.seeCardImageSrc('Agent 327', ShelfId.allFilms, 'https://img.jwplayer.com/v1/media/uB8aRnu6/images/shelf.jpg?width=320');
-  await I.seeCardImageSrc('Big Buck Bunny', ShelfId.allFilms, 'https://img.jwplayer.com/v1/media/awWEFyPu/images/shelf.jpg?width=320');
+  await I.seeCardImageSrc('Agent 327', ShelfId.allFilms, 'https://img.jwplayer.com/v1/media/uB8aRnu6/images/shelf.webp?width=320');
+  await I.seeCardImageSrc('Big Buck Bunny', ShelfId.allFilms, 'https://img.jwplayer.com/v1/media/awWEFyPu/images/shelf.webp?width=320');
 });
 
 Scenario('I can see poster images for the `All courses` shelf', async ({ I }) => {
@@ -147,5 +147,5 @@ Scenario('I can see the footer', ({ I }) => {
   I.see('jwplayer.com');
   I.click('jwplayer.com');
   I.switchToNextTab();
-  I.seeCurrentUrlEquals('https://www.jwplayer.com/');
+  I.seeCurrentUrlEquals('https://jwplayer.com/');
 });
diff --git a/test-e2e/tests/live_channel_test.ts b/test-e2e/tests/live_channel_test.ts
@@ -220,7 +220,7 @@ Scenario('I can navigate through the epg', async ({ I }) => {
 
 Scenario('I can see an alternate channel logo for Channel 1', async ({ I }) => {
   await I.openVideoCard('Channel 1');
-  await I.seeEpgChannelLogoImage('Uh7zcqVm', 'https://img.jwplayer.com/v1/media/Uh7zcqVm/images/channel_logo.jpg?width=320');
+  await I.seeEpgChannelLogoImage('Uh7zcqVm', 'https://img.jwplayer.com/v1/media/Uh7zcqVm/images/channel_logo.webp?width=320');
 });
 
 Scenario('I can see the default channel logo for Channel 2', async ({ I }) => {
@@ -230,7 +230,7 @@ Scenario('I can see the default channel logo for Channel 2', async ({ I }) => {
 
 Scenario('I can see an alternate background image for Channel 3', async ({ I }) => {
   await I.openVideoCard('Channel 3');
-  await I.seeVideoDetailsBackgroundImage('Channel 3', 'https://img.jwplayer.com/v1/media/wewsVyR7/images/background.jpg?width=1280');
+  await I.seeVideoDetailsBackgroundImage('Channel 3', 'https://img.jwplayer.com/v1/media/wewsVyR7/images/background.webp?width=1280');
 });
 
 Scenario('I can see the default background image for Channel 4', async ({ I }) => {

diff --git a/test-e2e/tests/series_test.ts b/test-e2e/tests/series_test.ts
@@ -80,5 +80,5 @@ Scenario('I can play other episodes from the series', async ({ I }) => {
 Scenario('I can see an alternate background image for Fantasy Vehicle Creation', async ({ I }) => {
   await I.openVideoCard(constants.fantasyVehicleTitle, ShelfId.allCourses);
   I.see('Fantasy Vehicle Creation (Free)');
-  await I.seeVideoDetailsBackgroundImage('Fantasy Vehicle Creation (Free)', 'https://img.jwplayer.com/v1/media/0t21PUiy/images/background.jpg?width=1280');
+  await I.seeVideoDetailsBackgroundImage('Fantasy Vehicle Creation (Free)', 'https://img.jwplayer.com/v1/media/0t21PUiy/images/background.webp?width=1280');
 });
diff --git a/test-e2e/tests/video_detail_test.ts b/test-e2e/tests/video_detail_test.ts
@@ -32,7 +32,7 @@ Scenario('Video detail screen loads', async ({ I }) => {
 
 Scenario('I can see an alternate background image for Agent 327', async ({ I }) => {
   await I.openVideoCard('Agent 327');
-  await I.seeVideoDetailsBackgroundImage('Agent 327', 'https://img.jwplayer.com/v1/media/uB8aRnu6/images/background.jpg?width=1280');
+  await I.seeVideoDetailsBackgroundImage('Agent 327', 'https://img.jwplayer.com/v1/media/uB8aRnu6/images/background.webp?width=1280');
 });
 
 Scenario('I can see the default background image for Elephants Dream', async ({ I }) => {