From 97c184f868798726d99549252bfe00dc390f20c6 Mon Sep 17 00:00:00 2001
From: Anurag Vasanwala <75766877+AnuragVasanwala@users.noreply.github.com>
Date: Thu, 2 Nov 2023 19:03:16 +0530
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20History=20state=20will=20be?=
 =?UTF-8?q?=20pushed=20after=20story=20loaded?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../src/web-stories-lightbox.js               | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/stories-lightbox/src/web-stories-lightbox.js b/packages/stories-lightbox/src/web-stories-lightbox.js
index 322741c000c5..b8583dce1687 100644
--- a/packages/stories-lightbox/src/web-stories-lightbox.js
+++ b/packages/stories-lightbox/src/web-stories-lightbox.js
@@ -58,7 +58,10 @@ class Lightbox {
     this.player.addEventListener('navigation', (event) => {
       const storyObject = this.stories[event.detail.index];
       if (storyObject && storyObject.href !== document.location.href) {
-        history.pushState({}, '', storyObject.href);
+        //history.pushState({}, '', storyObject.href);
+        this.storyContentReady(storyObject, () => {
+          history.pushState({}, '', storyObject.href);
+        });
       }
     });
 
@@ -119,7 +122,7 @@ class Lightbox {
     );
 
     cards.forEach((card) => {
-      card.addEventListener('click', (event) => {
+      card.addEventListener('click', async (event) => {
         event.preventDefault();
         const storyObject = this.stories.find(
           (story) => story.href === card.querySelector('a').href
@@ -127,13 +130,34 @@ class Lightbox {
         this.player.show(storyObject.href);
         this.player.play();
 
-        history.pushState({}, '', storyObject.href);
+        this.storyContentReady(storyObject, () => {
+          history.pushState({}, '', storyObject.href);
+        });
 
         this.lightboxElement.classList.toggle('show');
         document.body.classList.toggle('web-stories-lightbox-open');
       });
     });
   }
+
+  /**
+   * Executes supplied `callback` after the story is fully loaded into player.
+   *
+   * @param {*} storyObject Story object to check for. Reference: https://github.com/ampproject/amphtml/blob/4ce3cd79520dbeaf5ed5364cbff58d3d71dee40e/src/amp-story-player/amp-story-player-impl.js#L115-L129.
+   * @param {*} callback Callback to execute when story is loaded fully.
+   * @param {number} maxRetries Number of tries to check for.
+   */
+  storyContentReady(storyObject, callback, maxRetries = 5) {
+    const stateIntervalObj = setInterval(() => {
+      if (storyObject.storyContentLoaded === true) {
+        window.clearInterval(stateIntervalObj);
+        callback();
+      }
+      if (!--maxRetries) {
+        window.clearInterval(stateIntervalObj);
+      }
+    }, 250);
+  }
 }
 
 export default function initializeWebStoryLightbox() {

From ff95895faa23bb2224989c0fd882e20ddcf4ddae Mon Sep 17 00:00:00 2001
From: Anurag Vasanwala <75766877+AnuragVasanwala@users.noreply.github.com>
Date: Thu, 2 Nov 2023 19:14:35 +0530
Subject: [PATCH 2/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/stories-lightbox/src/web-stories-lightbox.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/stories-lightbox/src/web-stories-lightbox.js b/packages/stories-lightbox/src/web-stories-lightbox.js
index b8583dce1687..8265ba727f61 100644
--- a/packages/stories-lightbox/src/web-stories-lightbox.js
+++ b/packages/stories-lightbox/src/web-stories-lightbox.js
@@ -58,7 +58,6 @@ class Lightbox {
     this.player.addEventListener('navigation', (event) => {
       const storyObject = this.stories[event.detail.index];
       if (storyObject && storyObject.href !== document.location.href) {
-        //history.pushState({}, '', storyObject.href);
         this.storyContentReady(storyObject, () => {
           history.pushState({}, '', storyObject.href);
         });
@@ -122,7 +121,7 @@ class Lightbox {
     );
 
     cards.forEach((card) => {
-      card.addEventListener('click', async (event) => {
+      card.addEventListener('click', (event) => {
         event.preventDefault();
         const storyObject = this.stories.find(
           (story) => story.href === card.querySelector('a').href