Issues loading video with `loadVideo` and `setCurrentTime`

[badlydrawnrob]

Sorry if this is a duplicate issue but these seem to be long-standing problems and am hoping to get some advice on a reliable way forward! Issues #1024 #645 and #131 are very similar and I'm trying to load a different video in a modal window using the HTMLDialogElement API. I'm also having the unfortunate situation where some combinations of the above stop the modal window from opening.

I'm happy to go back to my original code, where I didn't use loadVideo and new Vimeo.Player("vimeo-player", options); and setCurrentTime were scoped to the onOpen() function rather than globally. That was working well when play() was run, but the onClose() function didn't have access to player. I'm not a javascript developer and couldn't get player.pause() to work with that setup (player not found).

The current code works well with the modal window, but sometimes a video will start from 0 seconds rather than it's data-time setting (especially when changing videos). I'm also getting some occasional weirdness with console.log("Paused", data); which prints out multiple times for some reason.

The people watching the video are non-technical, so whatever solution I use must be reliable!

Current code

<!-- video 1 -->
<ul>
  <li><a href="#" class="open-modal" data-id="1117122366" data-time="0">Create an account</a></li>
  <li><a href="#" class="open-modal" data-id="1117122366" data-time="75">Dashboard and map</a></li>
</ul>

<!-- video 2 -->
<ul>
  <li><a href="#" class="open-modal" data-id="1117122538" data-time="0">Tower climb</a></li>
  <li><a href="#" class="open-modal" data-id="1117122538" data-time="355">Escalation</a></li>
  <li><a href="#" class="open-modal" data-id="1117122538" data-time="778">Stairway to mastery</a></li>
</ul>

<!-- Modal -->
<dialog class="video-modal">
  <form method="dialog">
    <button class="video-modal-close">Close</button>
  </form>
  <div id="vimeo-player"></div>
  <script src="https://player.vimeo.com/api/player.js"></script>
</dialog>

const elements = document.getElementsByClassName("open-modal");
const modal = document.querySelector(".video-modal");
const video = document.querySelector(".video-modal video");

// Initial video with the Vimeo API
// --------------------------------
// 1. A video ID must be passed, so set any one
// 2. You can change ID with `.loadVideo()` within the modal function
// 3. We need to have `player` in global scope so `onClose()` can pause it!
//
// Issues
// ------
// > Using `loadVideo` and `setCurrentTime` together is NOT reliable and can
// > either gray out (with spinning wheel) or restart from the beginning. Some
// > combinations also result in the modal window not opening.

const options = {
    id: 1117122366,
    width: 640,
};
const player = new Vimeo.Player("vimeo-player", options);

function onOpen(element) {
    // Grab the video id and load player
    const video_id = element.getAttribute("data-id");
    console.log("ID:", video_id);

    // Set the video time (in seconds)
    const video_time = element.getAttribute("data-time");
    console.log("Time:", video_time);

    // .showModal() is part of the HTMLDialogElement API
    modal.showModal();

    // Using `.loadVideo` and `.setCurrentTime` together ...
    // -----------------------------------------------------
    // When using these methods together, it is essential to wait for each promise
    // to resolve before proceeding to the next step to ensure proper sequencing.
    // Using either nested `.then()` calls or the `async/await` syntax for cleaner,
    // more readable code ...
    player.loadVideo(video_id).then(function () {
        return player.setCurrentTime(video_time).then(function () {
            return player.play();
        });
    });
}

// Cycle through all `open-modal` links, pass "this" element to function,
// and add an on click event handler.
Array.from(elements).forEach(function (element) {
    element.addEventListener("click", () => onOpen(element));
});

modal.addEventListener("close", function onClose() {
    // Inside the form triggers "close" on dialog because of [method="dialog"]
    //
    // We can't use `video.pause() with HTMLMediaElement API directly, as it's
    // wrapped within an iframe (and I can't be bothered to figure out how to use
    // `<video>` directly with the Vimeo API.
    //
    // We need access to the player object and use `player.close()`.
    player.pause();
    player.on("pause", function (data) {
        console.log("Paused", data);
    });
});

[badlydrawnrob]

Forgot to add the modal window. Have edited the above code example! Any suggestions would be welcomed 👍