Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VideoPress: avoid requesting unneeded preview when block mounts #28311

Merged
merged 3 commits into from
Jan 12, 2023
Merged

VideoPress: avoid requesting unneeded preview when block mounts #28311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
804ad0c
avoid unneeded preview when block mounts
retrofox Jan 12, 2023
6ee07fa
changelog
retrofox Jan 12, 2023
4272adb
minor changes in debug() logs
retrofox Jan 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ...s/packages/videopress/changelog/update-videopress-avoid-requesting-unneeded-video-preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

VideoPress: avoid requesting unneeded preview when block mounts
3 changes: 2 additions & 1 deletion ...ges/videopress/src/client/block-editor/blocks/video/components/videopress-player/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand Down Expand Up @@ -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;
}

Expand Down
35 changes: 25 additions & 10 deletions projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
Expand All @@ -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
Expand Down Expand Up @@ -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 );

Expand Down Expand Up @@ -400,7 +415,7 @@ export default function VideoPressEdit( {

// Generating video preview.
if (
( isRequestingEmbedPreview || ! preview ) &&
( isRequestingEmbedPreview || ! preview.html ) &&
generatingPreviewCounter > 0 &&
generatingPreviewCounter < VIDEO_PREVIEW_ATTEMPTS_LIMIT
) {
Expand All @@ -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 (
<div { ...blockProps } className={ blockMainClassName }>
<PlaceholderWrapper
Expand Down