Stop video/audio playback in modal when the modal is closed

[geealbers]

Before proceeding, make sure there isn’t an existing issue for this bug.

• I have searched the existing issues and determined this is a new bug.

Expected Behavior

If a user starts playing a video or audio in the lightbox modal (thought the youtube, vimeo, or soundcloud embeds), the video should stop playing when they close the modal or move to another figure.

Actual Behavior

The video / audio keeps playing

Steps to Reproduce

1. Start a new project
2. Run quire preview and navigate in your browser to http://localhost:8080/essay/
3. Open the first video on the page in the modal
4. Play the video
5. Close the modal before the video is complete

Version Numbers

quire-cli 1.0.0-rc.33
quire-11ty 1.0.0-rc.35

Web Browser

No response

Relevant Terminal/Shell Output

Supporting Information

This issue was originally posted in Jira on 30/Sep/22 by @geealbers as DEV-13306

[geealbers]

On 28/Oct/22, @anderspollack commented:

This will require some refactoring of the video figures to use Youtube and Vimeo's iframe API to control playback remotely. Both APIs assume you are adding a client <script> tag to use, which we can add to _includes/components/scripts.js, but the logic to instantiate each player as a global variable / something the modal can hook into needs to be in the player template string (with the <iframe> itself), which feels a bit icky composing javascript with javascript: `(_includes/components/figure/element.js)

  youtube({ id, mediaId }) {
    if (!mediaId) {
      error(`Cannot render Youtube component without 'media_id'. Check that figures data for id: ${id} has a valid 'media_id'`)
      return ''
    }

    return html`
      <script>
      // player instantiation code goes somewhere here in a script tag, inside a string...
      </script>
      <iframe
        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
        class="q-figure-video-element q-figure-video-element--embed"
        frameborder="0"
        src="https://www.youtube-nocookie.com/embed/${mediaId}"
      ></iframe>
    `

We can definitely extract the player-specific code into separate modules to keep it clean, but I can't think of another way to do this since the APIs won't be available during build. Unless there are node-friendly versions of these that I am unaware of.

API reference:
https://developers.google.com/youtube/iframe_api_reference
https://developer.vimeo.com/player/sdk/embed
https://stackoverflow.com/questions/49052401/how-to-use-youtube-api-on-existing-iframe

[geealbers]

This issue was originally only for the video embeds, but @jenpark-getty found the same issue with the audio (soundcloud) embed. In DEV-13019 on 15/Oct/25 she commented:

When playing audio in modal, clicking into lightbox does not stop the audio. Audio keeps playing, and lightbox does not reflect the playback time. Exiting back into the page shows the accurate playback time in modal.

When playing audio in lightbox, closing the lightbox does not stop the audio. Audio keeps playing, and modal does not reflect the playback time. Clicking into the lightbox again shows the accurate playback time.

Soundcloud playback for modal and lightbox is kept track of separately.

Audio stops when toggling between pages.