<script src="../../../../../resources/js-test-pre.js"></script>
<script src="/media-resources/modern-media-controls/resources/media-controls-loader.js"></script>
<script src="/media-resources/modern-media-controls/resources/media-controls-utils.js"></script>
<body>
<video src="../../resources/hls/test-live.py" style="width: 400px; height: 300px;" autoplay controls></video>
<div id="shadow"></div>
<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing that we do not show the seeking controls in fullscreen with a live broadcast video and instead show the status label.");

const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
const media = document.querySelector("video");
const mediaController = createControls(shadowRoot, media, null);

media.addEventListener("webkitfullscreenchange", () => {
    shouldBeTrue("media.webkitDisplayingFullscreen");
    shouldBecomeEqual("media.duration", "Number.POSITIVE_INFINITY", () => {
        shouldBeFalse("mediaController.controls.rewindButton.enabled");
        shouldBeFalse("mediaController.controls.forwardButton.enabled");
        shouldBe("mediaController.controls.timeControl.parent", "null");
        shouldBe("mediaController.controls.statusLabel.parent", "mediaController.controls.bottomControlsBar");

        debug("");
        media.remove();
        shadowRoot.host.remove();
        finishJSTest();
    });
}, { once: true });

media.addEventListener("play", () => {
    media.pause();

    const button = document.body.appendChild(document.createElement("button"));
    button.textContent = "Enter fullscreen";
    button.addEventListener("click", event => media.webkitEnterFullscreen());
    pressOnElement(button);
    button.remove();
});

</script>
<script src="../../../../../resources/js-test-post.js"></script>
</body>
