fix: youtube preview image

RedTurtle · Dec 19, 2023 · ced1996 · ced1996
1 parent 6f407bd
commit ced1996
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 8 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/Block/ViewBlock.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/Block/ViewBlock.jsx
@@ -47,7 +47,7 @@ const ViewBlock = ({ data, index, isEditMode = false }) => {
       const videoID = data.url.match(/.be\//)
         ? data.url.match(/^.*\.be\/(.*)/)?.[1]
         : data.url.match(/^.*\?v=(.*)$/)?.[1];
-      placeholder = 'https://img.youtube.com/vi/' + videoID + '/sddefault.jpg';
+      placeholder = 'https://img.youtube.com/vi/' + videoID + '/hqdefault.jpg';
     } else if (data.url.match('vimeo')) {
       const videoID = data.url.match(/^.*\.com\/(.*)/)[1];
       placeholder = 'https://vumbnail.com/' + videoID + '.jpg';

diff --git a/src/components/ItaliaTheme/View/Commons/EmbeddedVideo.jsx b/src/components/ItaliaTheme/View/Commons/EmbeddedVideo.jsx
@@ -56,7 +56,7 @@ const EmbeddedVideo = ({ video_url, title, id }) => {
     defaultActive: false,
     autoplay: false,
     aspectRatio: '16:9',
-    placeholder: 'https://img.youtube.com/vi/' + video_id + '/sddefault.jpg',
+    placeholder: 'https://img.youtube.com/vi/' + video_id + '/hqdefault.jpg',
     tabIndex: 0,
     onKeyPress: onKeyDown,
     ref: ref,

diff --git a/src/helpers/videoUrlHelper.js b/src/helpers/videoUrlHelper.js
@@ -4,13 +4,11 @@ import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
 // test against all yt link formats I am aware of, not easy, can't find official docs.
 // Try all possible formats, match an alphanumeric token in the expected position, length should be 10-20 chars, that's the ID.
 // Reference sheet used and improved with support to shorts: https://gist.github.com/rodrigoborgesdeoliveira/987683cfbfcc8d800192da1e73adc486
-const ytReg =
-  /^(?:http|https?:)?(?:\/\/)?(?:(?:www\.|m\.)?youtube(?:-nocookie)?\.com\/(?:(?:watch)?\?(?:feature=\w*&)?vi?=|embed\/|vi?\/|e\/|shorts\/)|youtu.be\/)([\w\-]{10,20})/i;
+const ytReg = /^(?:http|https?:)?(?:\/\/)?(?:(?:www\.|m\.)?youtube(?:-nocookie)?\.com\/(?:(?:watch)?\?(?:feature=\w*&)?vi?=|embed\/|vi?\/|e\/|shorts\/)|youtu.be\/)([\w\-]{10,20})/i;
 
 // Vimeo IDs should be only digits, let's try to get only a group of digits and suppose that's the video ID, scrap everything after.
 // Docs link, watch for changes https://developer.vimeo.com/api/common-formats
-const vimeoReg =
-  /(?:http|https)?:?\/?\/?(?:www\.)?(?:player\.)?vimeo\.com\/(?:(?:channels\/(?:[\w*\/]*\/))|(?:groups\/(?:[\w*\/]*\/))|(?:videos\/|video\/|albums\/))?(\d+)/i;
+const vimeoReg = /(?:http|https)?:?\/?\/?(?:www\.)?(?:player\.)?vimeo\.com\/(?:(?:channels\/(?:[\w*\/]*\/))|(?:groups\/(?:[\w*\/]*\/))|(?:videos\/|video\/|albums\/))?(\d+)/i;
 
 // Use regex against url to get video ID, video urls supported are youtube and vimeo.
 // Return videoID and placeholder (if needed), null if no match found.
@@ -25,7 +23,7 @@ export const videoUrlHelper = (url, previewImage) => {
   if (ytVideoMatch) {
     videoID = ytVideoMatch[1];
     if (!placeholder)
-      placeholder = 'https://img.youtube.com/vi/' + videoID + '/sddefault.jpg';
+      placeholder = 'https://img.youtube.com/vi/' + videoID + '/hqdefault.jpg';
 
     return [videoID, placeholder];
   } else {

diff --git a/src/helpers/videoUrlHelper.test.js b/src/helpers/videoUrlHelper.test.js
@@ -294,7 +294,7 @@ describe('videoUrlHelper', () => {
     );
 
     expect(placeholder).toBe(
-      'https://img.youtube.com/vi/' + YT_TEST_ID + '/sddefault.jpg',
+      'https://img.youtube.com/vi/' + YT_TEST_ID + '/hqdefault.jpg',
     );
   });
   it('generates vimeo placeholder correctly', async () => {