From ced199640dddbb880a486ead2a3539f97cc921d4 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Tue, 19 Dec 2023 10:22:15 +0100
Subject: [PATCH] fix: youtube preview image

---
 .../ItaliaTheme/Blocks/VideoGallery/Block/ViewBlock.jsx   | 2 +-
 src/components/ItaliaTheme/View/Commons/EmbeddedVideo.jsx | 2 +-
 src/helpers/videoUrlHelper.js                             | 8 +++-----
 src/helpers/videoUrlHelper.test.js                        | 2 +-
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/Block/ViewBlock.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/Block/ViewBlock.jsx
index 49d34e8e9..19eeafa25 100644
--- 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
index 9d2d30d25..607600052 100644
--- 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
index 1ecc16c42..bbb7e86dd 100644
--- 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
index e3c125e6b..a8ad34b01 100644
--- 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 () => {