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.

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

Block: Fix issues with stories not appearing in lightbox #13493

Conversation

AnuragVasanwala
Copy link
Collaborator

@AnuragVasanwala AnuragVasanwala commented Nov 2, 2023

The goal of the PR is to fix LightBox issue where story won't load after finishing navigating stories (applies to the number of stories > 2).

If history state is pushed before story is loaded, it will fail (sanitizedUrlsAreEquals_ conditional check return into false) which will result into not updating to the requested story src in the player.

Reference:
https://github.com/ampproject/amphtml/blob/4ce3cd79520dbeaf5ed5364cbff58d3d71dee40e/src/amp-story-player/amp-story-player-impl.js#L1268-L1270

Summary

The PR fixes such issue by checking for story flag storyContentLoaded and when it is true it will push history state. This will make sure that window href won't get updated until story is already ready.

Refer sanitizedUrlsAreEquals_ function which is comparing storyUrl with story.iframe.src and if they are equal, it will not update it. In our case, our story is not already loaded so we won't update history till the story is ready.

User-facing changes

Not applicable.

Testing Instructions

Refer issue #13241 for testing instruction.

Reviews

Does this PR have a security-related impact?

No.

Does this PR change what data or activity we track or use?

No.

Does this PR have a legal-related impact?

No.

Checklist

  • This PR addresses an existing issue and I have linked this PR to it
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #13241

This fix is required because story was not fully loaded when history state is pushed.

If history state is pushed before story is loaded, it will fail (`sanitizedUrlsAreEquals_` conditional check return into `false` which will result into not updating to the story src in player.

Reference:
https://github.com/ampproject/amphtml/blob/4ce3cd79520dbeaf5ed5364cbff58d3d71dee40e/src/amp-story-player/amp-story-player-impl.js#L1268-L1270
@AnuragVasanwala AnuragVasanwala added Type: Bug Something isn't working AMP Format Issues that need to be addressed in the AMP story format P3 Nice to have Group: Blocks Issues related to the provided Gutenberg Blocks labels Nov 2, 2023
@AnuragVasanwala AnuragVasanwala self-assigned this Nov 2, 2023
@AnuragVasanwala AnuragVasanwala linked an issue Nov 2, 2023 that may be closed by this pull request
Copy link
Contributor

github-actions bot commented Nov 2, 2023

Size Change: +86 B (0%)

Total Size: 2.77 MB

ℹ️ View Unchanged
Filename Size Change
assets/css/web-stories-block-rtl.css 4.6 kB 0 B
assets/css/web-stories-block.css 4.63 kB 0 B
assets/css/web-stories-carousel-rtl.css 702 B 0 B
assets/css/web-stories-carousel.css 701 B 0 B
assets/css/web-stories-dashboard-rtl.css 657 B 0 B
assets/css/web-stories-dashboard.css 659 B 0 B
assets/css/web-stories-editor-rtl.css 769 B 0 B
assets/css/web-stories-editor.css 771 B 0 B
assets/css/web-stories-embed-rtl.css 655 B 0 B
assets/css/web-stories-embed.css 656 B 0 B
assets/css/web-stories-list-styles-rtl.css 2.39 kB 0 B
assets/css/web-stories-list-styles.css 2.42 kB 0 B
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B 0 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B 0 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 251 B 0 B
assets/css/web-stories-theme-style-twentyfifteen.css 251 B 0 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 287 B 0 B
assets/css/web-stories-theme-style-twentyfourteen.css 287 B 0 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 288 B 0 B
assets/css/web-stories-theme-style-twentyseventeen.css 288 B 0 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 224 B 0 B
assets/css/web-stories-theme-style-twentysixteen.css 224 B 0 B
assets/css/web-stories-theme-style-twentyten-rtl.css 143 B 0 B
assets/css/web-stories-theme-style-twentyten.css 143 B 0 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 256 B 0 B
assets/css/web-stories-theme-style-twentytwelve.css 256 B 0 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 326 B 0 B
assets/css/web-stories-theme-style-twentytwentyone.css 326 B 0 B
assets/css/web-stories-widget-rtl.css 486 B 0 B
assets/css/web-stories-widget.css 486 B 0 B
assets/js/1622.js 216 kB 0 B
assets/js/2443.js 4.73 kB 0 B
assets/js/3583.js 97.9 kB 0 B
assets/js/3669.js 38.6 kB 0 B
assets/js/3780.js 26.3 kB 0 B
assets/js/4422.js 49.1 kB 0 B
assets/js/649.js 8.19 kB 0 B
assets/js/7357.js 92 B 0 B
assets/js/7480.js 12.8 kB 0 B
assets/js/chunk-colorthief.js 2.62 kB 0 B
assets/js/chunk-ffmpeg.js 5.98 kB 0 B
assets/js/chunk-html-to-image.js 4.51 kB 0 B
assets/js/chunk-media-gallery.js 6.13 kB 0 B
assets/js/chunk-mediainfo.js 96 B 0 B
assets/js/chunk-opentype.js 96 B 0 B
assets/js/chunk-react-calendar.js 10.8 kB 0 B
assets/js/chunk-react-color.js 25.7 kB 0 B
assets/js/chunk-selfie-segmentation.js 16.3 kB 0 B
assets/js/chunk-web-stories-template-0-metaData.js 546 B 0 B
assets/js/chunk-web-stories-template-0.js 11 kB 0 B
assets/js/chunk-web-stories-template-1-metaData.js 540 B 0 B
assets/js/chunk-web-stories-template-1.js 9.27 kB 0 B
assets/js/chunk-web-stories-template-10-metaData.js 532 B 0 B
assets/js/chunk-web-stories-template-10.js 7.23 kB 0 B
assets/js/chunk-web-stories-template-11-metaData.js 539 B 0 B
assets/js/chunk-web-stories-template-11.js 8.87 kB 0 B
assets/js/chunk-web-stories-template-12-metaData.js 496 B 0 B
assets/js/chunk-web-stories-template-12.js 8.67 kB 0 B
assets/js/chunk-web-stories-template-13-metaData.js 525 B 0 B
assets/js/chunk-web-stories-template-13.js 6.9 kB 0 B
assets/js/chunk-web-stories-template-14-metaData.js 582 B 0 B
assets/js/chunk-web-stories-template-14.js 7.26 kB 0 B
assets/js/chunk-web-stories-template-15-metaData.js 544 B 0 B
assets/js/chunk-web-stories-template-15.js 8.77 kB 0 B
assets/js/chunk-web-stories-template-16-metaData.js 588 B 0 B
assets/js/chunk-web-stories-template-16.js 10.5 kB 0 B
assets/js/chunk-web-stories-template-17-metaData.js 540 B 0 B
assets/js/chunk-web-stories-template-17.js 9.05 kB 0 B
assets/js/chunk-web-stories-template-18-metaData.js 587 B 0 B
assets/js/chunk-web-stories-template-18.js 9.31 kB 0 B
assets/js/chunk-web-stories-template-19-metaData.js 501 B 0 B
assets/js/chunk-web-stories-template-19.js 9.17 kB 0 B
assets/js/chunk-web-stories-template-2-metaData.js 586 B 0 B
assets/js/chunk-web-stories-template-2.js 9.02 kB 0 B
assets/js/chunk-web-stories-template-20-metaData.js 548 B 0 B
assets/js/chunk-web-stories-template-20.js 8.72 kB 0 B
assets/js/chunk-web-stories-template-21-metaData.js 536 B 0 B
assets/js/chunk-web-stories-template-21.js 9.48 kB 0 B
assets/js/chunk-web-stories-template-22-metaData.js 525 B 0 B
assets/js/chunk-web-stories-template-22.js 7.44 kB 0 B
assets/js/chunk-web-stories-template-23-metaData.js 605 B 0 B
assets/js/chunk-web-stories-template-23.js 6.95 kB 0 B
assets/js/chunk-web-stories-template-24-metaData.js 517 B 0 B
assets/js/chunk-web-stories-template-24.js 11.2 kB 0 B
assets/js/chunk-web-stories-template-25-metaData.js 543 B 0 B
assets/js/chunk-web-stories-template-25.js 6.79 kB 0 B
assets/js/chunk-web-stories-template-26-metaData.js 600 B 0 B
assets/js/chunk-web-stories-template-26.js 6.97 kB 0 B
assets/js/chunk-web-stories-template-27-metaData.js 542 B 0 B
assets/js/chunk-web-stories-template-27.js 7.66 kB 0 B
assets/js/chunk-web-stories-template-28-metaData.js 532 B 0 B
assets/js/chunk-web-stories-template-28.js 8.76 kB 0 B
assets/js/chunk-web-stories-template-29-metaData.js 561 B 0 B
assets/js/chunk-web-stories-template-29.js 8.94 kB 0 B
assets/js/chunk-web-stories-template-3-metaData.js 539 B 0 B
assets/js/chunk-web-stories-template-3.js 8.24 kB 0 B
assets/js/chunk-web-stories-template-30-metaData.js 576 B 0 B
assets/js/chunk-web-stories-template-30.js 7.43 kB 0 B
assets/js/chunk-web-stories-template-31-metaData.js 503 B 0 B
assets/js/chunk-web-stories-template-31.js 9.93 kB 0 B
assets/js/chunk-web-stories-template-32-metaData.js 552 B 0 B
assets/js/chunk-web-stories-template-32.js 12.3 kB 0 B
assets/js/chunk-web-stories-template-33-metaData.js 491 B 0 B
assets/js/chunk-web-stories-template-33.js 8.9 kB 0 B
assets/js/chunk-web-stories-template-34-metaData.js 570 B 0 B
assets/js/chunk-web-stories-template-34.js 7.43 kB 0 B
assets/js/chunk-web-stories-template-35-metaData.js 565 B 0 B
assets/js/chunk-web-stories-template-35.js 8.7 kB 0 B
assets/js/chunk-web-stories-template-36-metaData.js 575 B 0 B
assets/js/chunk-web-stories-template-36.js 12.1 kB 0 B
assets/js/chunk-web-stories-template-37-metaData.js 529 B 0 B
assets/js/chunk-web-stories-template-37.js 6.13 kB 0 B
assets/js/chunk-web-stories-template-38-metaData.js 572 B 0 B
assets/js/chunk-web-stories-template-38.js 7.63 kB 0 B
assets/js/chunk-web-stories-template-39-metaData.js 589 B 0 B
assets/js/chunk-web-stories-template-39.js 7.79 kB 0 B
assets/js/chunk-web-stories-template-4-metaData.js 564 B 0 B
assets/js/chunk-web-stories-template-4.js 11.8 kB 0 B
assets/js/chunk-web-stories-template-40-metaData.js 556 B 0 B
assets/js/chunk-web-stories-template-40.js 9.85 kB 0 B
assets/js/chunk-web-stories-template-41-metaData.js 573 B 0 B
assets/js/chunk-web-stories-template-41.js 7.45 kB 0 B
assets/js/chunk-web-stories-template-42-metaData.js 521 B 0 B
assets/js/chunk-web-stories-template-42.js 6.82 kB 0 B
assets/js/chunk-web-stories-template-43-metaData.js 557 B 0 B
assets/js/chunk-web-stories-template-43.js 8.49 kB 0 B
assets/js/chunk-web-stories-template-44-metaData.js 583 B 0 B
assets/js/chunk-web-stories-template-44.js 10.8 kB 0 B
assets/js/chunk-web-stories-template-45-metaData.js 565 B 0 B
assets/js/chunk-web-stories-template-45.js 7.15 kB 0 B
assets/js/chunk-web-stories-template-46-metaData.js 531 B 0 B
assets/js/chunk-web-stories-template-46.js 5.1 kB 0 B
assets/js/chunk-web-stories-template-47-metaData.js 591 B 0 B
assets/js/chunk-web-stories-template-47.js 8.97 kB 0 B
assets/js/chunk-web-stories-template-48-metaData.js 556 B 0 B
assets/js/chunk-web-stories-template-48.js 8.78 kB 0 B
assets/js/chunk-web-stories-template-49-metaData.js 518 B 0 B
assets/js/chunk-web-stories-template-49.js 8.58 kB 0 B
assets/js/chunk-web-stories-template-5-metaData.js 556 B 0 B
assets/js/chunk-web-stories-template-5.js 9.53 kB 0 B
assets/js/chunk-web-stories-template-50-metaData.js 503 B 0 B
assets/js/chunk-web-stories-template-50.js 8.93 kB 0 B
assets/js/chunk-web-stories-template-51-metaData.js 526 B 0 B
assets/js/chunk-web-stories-template-51.js 10.1 kB 0 B
assets/js/chunk-web-stories-template-52-metaData.js 601 B 0 B
assets/js/chunk-web-stories-template-52.js 9.97 kB 0 B
assets/js/chunk-web-stories-template-53-metaData.js 551 B 0 B
assets/js/chunk-web-stories-template-53.js 5.65 kB 0 B
assets/js/chunk-web-stories-template-54-metaData.js 547 B 0 B
assets/js/chunk-web-stories-template-54.js 7.46 kB 0 B
assets/js/chunk-web-stories-template-55-metaData.js 574 B 0 B
assets/js/chunk-web-stories-template-55.js 6.95 kB 0 B
assets/js/chunk-web-stories-template-56-metaData.js 542 B 0 B
assets/js/chunk-web-stories-template-56.js 9.54 kB 0 B
assets/js/chunk-web-stories-template-57-metaData.js 528 B 0 B
assets/js/chunk-web-stories-template-57.js 14.5 kB 0 B
assets/js/chunk-web-stories-template-58-metaData.js 554 B 0 B
assets/js/chunk-web-stories-template-58.js 5.43 kB 0 B
assets/js/chunk-web-stories-template-59-metaData.js 590 B 0 B
assets/js/chunk-web-stories-template-59.js 8.73 kB 0 B
assets/js/chunk-web-stories-template-6-metaData.js 568 B 0 B
assets/js/chunk-web-stories-template-6.js 6.93 kB 0 B
assets/js/chunk-web-stories-template-60-metaData.js 509 B 0 B
assets/js/chunk-web-stories-template-60.js 8.94 kB 0 B
assets/js/chunk-web-stories-template-7-metaData.js 569 B 0 B
assets/js/chunk-web-stories-template-7.js 7.15 kB 0 B
assets/js/chunk-web-stories-template-8-metaData.js 569 B 0 B
assets/js/chunk-web-stories-template-8.js 8.34 kB 0 B
assets/js/chunk-web-stories-template-9-metaData.js 580 B 0 B
assets/js/chunk-web-stories-template-9.js 8.25 kB 0 B
assets/js/chunk-web-stories-templates.js 906 B 0 B
assets/js/chunk-web-stories-textset-0.js 4.59 kB 0 B
assets/js/chunk-web-stories-textset-1.js 5.61 kB 0 B
assets/js/chunk-web-stories-textset-2.js 6.83 kB 0 B
assets/js/chunk-web-stories-textset-3.js 12.8 kB 0 B
assets/js/chunk-web-stories-textset-4.js 3.91 kB 0 B
assets/js/chunk-web-stories-textset-5.js 5.27 kB 0 B
assets/js/chunk-web-stories-textset-6.js 4.99 kB 0 B
assets/js/chunk-web-stories-textset-7.js 8.9 kB 0 B
assets/js/generateBlurhash.worker.worker.js 1.1 kB 0 B
assets/js/web-stories-activation-notice.js 26.2 kB 0 B
assets/js/web-stories-block.js 28.1 kB 0 B
assets/js/web-stories-carousel.js 9.71 kB 0 B
assets/js/web-stories-dashboard.js 63.8 kB 0 B
assets/js/web-stories-editor.js 1.46 MB 0 B
assets/js/web-stories-embed.js 20 B 0 B
assets/js/web-stories-lightbox.js 7.22 kB +86 B (+1%)
assets/js/web-stories-tinymce-button.js 9.63 kB 0 B
assets/js/web-stories-widget.js 587 B 0 B

compressed-size-action

@googleforcreators-bot
Copy link
Collaborator

Plugin builds for ff95895 are ready 🛎️!

Copy link
Collaborator

@swissspidy swissspidy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice find! This works very well.

@swissspidy swissspidy changed the title Fix: 🐛 History state should be pushed after story is loaded Block: Fix issues with stories not appearing in lightbox Nov 2, 2023
@swissspidy swissspidy added this to the 1.35.0 milestone Nov 2, 2023
@swissspidy swissspidy merged commit 6c5edfe into main Nov 2, 2023
43 of 47 checks passed
@swissspidy swissspidy deleted the fix/13241-story-not-loading-in-player-after-exiting-the-lightbox branch November 2, 2023 16:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
AMP Format Issues that need to be addressed in the AMP story format Group: Blocks Issues related to the provided Gutenberg Blocks P3 Nice to have Type: Bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Story not loading in player after exiting the lightbox
3 participants