diff --git a/projects/packages/videopress/changelog/update-videopress-avoid-requesting-unneeded-video-preview b/projects/packages/videopress/changelog/update-videopress-avoid-requesting-unneeded-video-preview new file mode 100644 index 000000000000..9f222cfba7f2 --- /dev/null +++ b/projects/packages/videopress/changelog/update-videopress-avoid-requesting-unneeded-video-preview @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +VideoPress: avoid requesting unneeded preview when block mounts diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-player/index.js b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-player/index.js index b43a1143c25f..4e22e7c9fc0f 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-player/index.js +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-player/index.js @@ -95,7 +95,7 @@ export default function VideoPressPlayer( { } // Once the video is loaded, delegate the height to the player (iFrame) - if ( preview ) { + if ( preview.html ) { // Hack to mitigate the flickr when the player is setTimeout( () => { setVideoPlayerTemporaryHeightState( 'auto' ); @@ -126,6 +126,7 @@ export default function VideoPressPlayer( { // Set video is loaded as False when `html` is not available. useEffect( () => { if ( html ) { + setIsVideoPlayerLoaded( true ); return; } diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx b/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx index 4b77a4027d91..e1a0328519a8 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx @@ -199,10 +199,18 @@ export default function VideoPressEdit( { const { filename } = videoData; // Get video preview status. + const defaultPreview = { html: null, scripts: [], width: null, height: null }; const { preview, isRequestingEmbedPreview } = useSelect( select => { + if ( ! videoPressUrl ) { + return { + preview: defaultPreview, + isRequestingEmbedPreview: false, + }; + } + return { - preview: select( coreStore ).getEmbedPreview( videoPressUrl ) || false, + preview: select( coreStore ).getEmbedPreview( videoPressUrl ) || defaultPreview, isRequestingEmbedPreview: select( coreStore ).isRequestingEmbedPreview( videoPressUrl ) || false, }; @@ -211,9 +219,7 @@ export default function VideoPressEdit( { ); // Pick video properties from preview. - const { html: previewHtml, scripts, width: previewWidth, height: previewHeight } = preview - ? preview - : { html: null, scripts: [], width: null, height: null }; + const { html: previewHtml, scripts, width: previewWidth, height: previewHeight } = preview; /* * Store the preview markup and video thumbnail image @@ -285,40 +291,49 @@ export default function VideoPressEdit( { } useEffect( () => { - // Attempts limit achieved. Bail early. + debug( 'Generating preview β‘ Attemp %o π', generatingPreviewCounter ); if ( generatingPreviewCounter >= VIDEO_PREVIEW_ATTEMPTS_LIMIT ) { + debug( 'Generating preview β‘ attempts number reached out πͺ', generatingPreviewCounter ); return cleanRegeneratingProcessTimer(); } // VideoPress URL is not defined. Bail early and cleans the time. if ( ! videoPressUrl ) { + debug( 'Generating preview β‘ No URL Provided ππ»' ); return cleanRegeneratingProcessTimer(); } // Bail early (clean the timer) if the preview is already being requested. if ( isRequestingEmbedPreview ) { + debug( 'Generating preview β‘ Requestingβ¦ β' ); return cleanRegeneratingProcessTimer(); } // Bail early (clean the timer) when preview is defined. - if ( preview ) { - setGeneratingPreviewCounter( 0 ); // reset counter. + if ( preview.html ) { + debug( 'Generating preview β‘ Preview achieved π %o', preview ); return cleanRegeneratingProcessTimer(); } // Bail early when it has been already started. if ( rePreviewAttemptTimer?.current ) { + debug( 'Generating preview β‘ Process already requested β' ); return; } rePreviewAttemptTimer.current = setTimeout( () => { // Abort whether the preview is already defined. - if ( preview ) { + if ( preview.html ) { + debug( 'Generating preview β‘ Preview already achieved π %o', preview ); setGeneratingPreviewCounter( 0 ); // reset counter. return; } setGeneratingPreviewCounter( v => v + 1 ); + debug( + 'Generating preview β‘ Not achieved so far. Start attempt %o π₯', + generatingPreviewCounter + 1 // +1 because the counter is updated after the effect. + ); invalidateCachedEmbedPreview(); }, 2000 ); @@ -400,7 +415,7 @@ export default function VideoPressEdit( { // Generating video preview. if ( - ( isRequestingEmbedPreview || ! preview ) && + ( isRequestingEmbedPreview || ! preview.html ) && generatingPreviewCounter > 0 && generatingPreviewCounter < VIDEO_PREVIEW_ATTEMPTS_LIMIT ) { @@ -418,7 +433,7 @@ export default function VideoPressEdit( { } // 5 - Generating video preview failed. - if ( generatingPreviewCounter >= VIDEO_PREVIEW_ATTEMPTS_LIMIT && ! preview ) { + if ( generatingPreviewCounter >= VIDEO_PREVIEW_ATTEMPTS_LIMIT && ! preview.html ) { return (