From 579cd0cde5d8c48933867ef3371e542252bdbbb7 Mon Sep 17 00:00:00 2001 From: Anton Lantukh Date: Tue, 31 Jan 2023 10:56:54 +0100 Subject: [PATCH] feat(playlist): add additional images webp format support - add webp for additional images - fix tests --- src/utils/image.test.ts | 8 ++++---- src/utils/image.ts | 2 +- test-e2e/tests/home_test.ts | 6 +++--- test-e2e/tests/live_channel_test.ts | 4 ++-- test-e2e/tests/series_test.ts | 2 +- test-e2e/tests/video_detail_test.ts | 2 +- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/utils/image.test.ts b/src/utils/image.test.ts index 5ac1c5cb8..1af57efe1 100644 --- 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,7 +31,7 @@ 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', }); }); @@ -39,8 +39,8 @@ describe('image utils', () => { 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 index 63de75ab3..b6f598ebe 100644 --- 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 index 0c2bb7b37..6d636d060 100644 --- 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 index d3aa2c273..f38461e7e 100644 --- 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 index c3793f8b2..a6ae7920a 100644 --- 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 index 25dd35a93..f32d473d4 100644 --- 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 }) => {