Story not loading in player after exiting the lightbox #13241

LuckynaSan · 2023-04-26T14:35:48Z

Bug Description

A user reported the story player is not loading or displaying as a black screen after viewing it and closing out of the lightbox.

Expected Behaviour

Story loads in player after closing out of lightbox or viewing it again.

Steps to Reproduce

Go to site https://newsmaker.com.ar/
Click on story
Skip through each story
Close out of lightbox
View first story again
Notice black screen

Screenshots

Screen.Recording.2023-04-26.at.10.34.56.AM.mov

Additional Context

Related support topic: https://wordpress.org/support/topic/more-than-2-stories-black-screen-second-time/

Plugin Version: 1.31.0
WordPress Version:
Operating System:
Browser:

udaykanths · 2023-07-25T04:17:35Z

Hi team,

Is there any option to revert to the earlier version?
My site ( https://sareeing.com/web-stories/ ) is currently on "Version 1.33.0" , and facing the issue repeatedly.

I have my other site which is working absolutely perfect.
It is running on “Version 1.32.0” ( https://telugu.sareeing.com/web-stories/ )

It seems the issue is from quite a long time & it creating problem on my site ‘s performance.

Please give some solution.

swissspidy · 2023-08-06T08:54:42Z

What you are describing is an entirely issue from what is being tracked here. Please open a new support topic on WordPress.org so that we can assist you with that.

AnuragVasanwala · 2023-11-01T13:25:44Z

Previous Finding

@swissspidy Initially, after a lot of debugging I came to conclusion that amp-story-player had bug while setting up iframe src:
https://github.com/ampproject/amphtml/blob/4ce3cd79520dbeaf5ed5364cbff58d3d71dee40e/src/amp-story-player/amp-story-player-impl.js#L1268-L1270

Later on, after so many testing - I found AMP didn't have any bug related. I also crated a sample HTML page to demonstrate story with Lightbox. Working HTML page is attached here:

📄 Expand: HTML WebStory with Lightbox


    <html>

    <head>
    <title>Lightbox Example</title>

    <script async src="https://cdn.ampproject.org/amp-story-player-v0.js"></script>
    <link href="https://cdn.ampproject.org/amp-story-player-v0.css" rel="stylesheet" type="text/css">

    <link href="https://fonts.googleapis.com/css2?family=Poppins&amp;display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>
        .entry-point-container {      
        margin-top: 40px;
        margin-bottom: 50px;
        margin-left: auto;
        margin-right: auto;
        }

        .entry-point-card-title {      
        margin-top: 10px;
        font-weight: 500;
        font-family: Poppins;
        font-size: 11px;
        line-height: 15px;
        text-align: center;
        display: block;
        color: #fff;
        width: 100px;
        margin-left: auto;
        margin-right: auto;
        }

        .lightbox {
        position: absolute;
        background-color: rgb(0, 0, 0, 0.7);
        z-index: -99999;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: visibility 0.2s linear, opacity 0.2s linear;
        }

        .lightbox.show {
        visibility: visible;
        z-index: 99999;
        opacity: 1;
        }

        amp-story-player.my-player {
        width: 100%;
        height: 100%;
        /*   margin: 70px auto; */
        }

        .entry-points {
        width: 100%;
        display: flex;
        left: -20px;
        padding: 0px 60px;
        padding-bottom: 10px;
        }

        .circular-entry-point {
        overflow-x: auto;
        overflow-y: hidden;
        }

        .circular-entry-point img {
        cursor: pointer;
        width: 100px;
        height: 100px;
        border-radius: 100%;
        background-clip: content-box;
        border: 2px solid;
        padding: 3px;
        }

        .entry-point-card-container {
        position: relative;
        padding-right: 25px;
        transition: transform 0.3s;
        }

        /* Extra stuff that makes sample aesthetic. */

        body h1 {
        font-weight: 600;
        font-size: 18px;
        line-height: 27px;
        color: white;
        font-family: Poppins;
        margin-bottom: 35px;
        margin-left: 20px;
        }

        .fake-content {
        width: 320px;
        height: 427px;
        top: -178px;
        margin: auto;

        background: #24242d;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
        border-radius: 16px;
        }

        .viewport {
        /* position: absolute; */
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        padding: 20px;
        margin: auto;
        /* width: 360px;
        height: 800px; */
        background-color: #202029;
        /* overflow: hidden; */
        }
    </style>
    </head>

    <body>
    <div class="viewport">
        <div class="fake-content"></div>
        <div class="entry-point-container">
        <h1> Web Stories </h1>
        <div class="circular-entry-point">
            <div class="entry-points">
            <div class="entry-point-card-container">
                <img src="https://assets.codepen.io/1780597/4.png" style="border-color:#FF6F32">
                <span class="entry-point-card-title">Q&A with ZOE Newman</span>
            </div>
            <div class="entry-point-card-container">
                <img src="https://assets.codepen.io/1780597/1.png" style="border-color:#E6AD1C">
                <span class="entry-point-card-title">24 Hours in New York City</span>
            </div>
            <div class="entry-point-card-container">
                <img src="https://assets.codepen.io/1780597/3.png" style="border-color:#466FFF">
                <span class="entry-point-card-title">The Next King of the Sea</span>
            </div>
            <div class="entry-point-card-container">
                <img src="https://assets.codepen.io/1780597/2.png" style="border-color:#4CA47C">
                <span class="entry-point-card-title">Spark a Passion for Reading</span>
            </div>
            </div>
        </div>
        </div>
        <div class="lightbox">
        <amp-story-player class="my-player">
            <script type="application/json">
            {
                "behavior": {
                "autoplay": false,
                "pageScroll": false
                },
                "controls": [{
                "name": "close",
                "position": "start"
                }]
            }
            </script>

            <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s1"></a>
            <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s2"></a>
            <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s3"></a>
            <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s4"></a>
        </amp-story-player>
        </div>
    </div>
    <script>
        const player = document.body.querySelector("amp-story-player");
        const lightboxEl = document.querySelector(".lightbox");

        if (player.isReady) {
        initializeCarousel();
        } else {
        player.addEventListener("ready", () => {
            initializeCarousel();
        });
        }

        function initializeCarousel() {
        const stories = player.getStories();

        const thumbnails = document.querySelectorAll(
            ".entry-point-card-container img"
        );

        thumbnails.forEach((img, idx) => {
            img.addEventListener("click", () => {
            player.show(stories[idx].href);
            player.play();
            lightboxEl.classList.toggle("show");
            });
        });
        }

        player.addEventListener("amp-story-player-close", () => {
        player.pause();
        lightboxEl.classList.toggle("show");
        });

    </script>
    </body>

    </html>

Recent Finding

@swissspidy It seems like this LightBox issue started after fixing #12999 issue.

Commenting out following browser history lines solves the issue:

web-stories-wp/packages/stories-lightbox/src/web-stories-lightbox.js

Line 61 in a3c73c2

history.pushState({}, '', storyObject.href);

web-stories-wp/packages/stories-lightbox/src/web-stories-lightbox.js

Line 130 in a3c73c2

history.pushState({}, '', storyObject.href);

Seems like pushing storyObject.href to history is having some conflict with AMP 🤔

swissspidy · 2023-11-01T14:03:34Z

Ah, interesting, we're onto something! 👀

LuckynaSan added the Type: Bug Something isn't working label Apr 26, 2023

swissspidy added the Group: Blocks Issues related to the provided Gutenberg Blocks label Apr 26, 2023

swissspidy added this to the 1.33.0 milestone May 2, 2023

swissspidy added the P2 Should do soon label May 10, 2023

AnuragVasanwala self-assigned this Jun 20, 2023

swissspidy modified the milestones: 1.33.0, 1.34.0 Jun 20, 2023

This comment was marked as off-topic.

Sign in to view

swissspidy modified the milestones: 1.34.0, 1.35.0 Aug 30, 2023

swissspidy added the AMP Format Issues that need to be addressed in the AMP story format label Sep 1, 2023

swissspidy removed this from the 1.35.0 milestone Oct 3, 2023

swissspidy added P3 Nice to have and removed P2 Should do soon labels Oct 3, 2023

AnuragVasanwala linked a pull request Nov 2, 2023 that will close this issue

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

Merged

7 tasks

AnuragVasanwala mentioned this issue Nov 2, 2023

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

Merged

7 tasks

swissspidy closed this as completed in #13493 Nov 2, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Story not loading in player after exiting the lightbox #13241

Story not loading in player after exiting the lightbox #13241

LuckynaSan commented Apr 26, 2023

udaykanths commented Jul 25, 2023

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

swissspidy commented Aug 6, 2023

AnuragVasanwala commented Nov 1, 2023 •

edited

Loading

swissspidy commented Nov 1, 2023

Story not loading in player after exiting the lightbox #13241

Story not loading in player after exiting the lightbox #13241

Comments

LuckynaSan commented Apr 26, 2023

Bug Description

Expected Behaviour

Steps to Reproduce

Screenshots

Additional Context

udaykanths commented Jul 25, 2023

This comment was marked as off-topic.

This comment was marked as off-topic.

This comment was marked as off-topic.

swissspidy commented Aug 6, 2023

AnuragVasanwala commented Nov 1, 2023 • edited Loading

Previous Finding

Recent Finding

swissspidy commented Nov 1, 2023

AnuragVasanwala commented Nov 1, 2023 •

edited

Loading