Kleine fout in de console na het klikken in een geladen video

Arkshine · 26 oktober 2023 om 23:15

Related to:

DEV: Prevent videos from preloading metadata by oblakeerickson · Pull Request #23807 · discourse/discourse · GitHub
DEV: Show a loading spinner on video placeholders by oblakeerickson · Pull Request #24039 · discourse/discourse · GitHub

Here is a small video showing the issue:

It looks like removing the click listener here doesn’t work. The next time a click happens, the video-placeholder-container doesn’t exist anymore:

github.com

discourse/discourse/blob/main/app/assets/javascripts/discourse/app/instance-initializers/video-placeholder.js#L16


      
          
          export default {
            initialize(owner) {
              withPluginApi("0.8.7", (api) => {
                function handleVideoPlaceholderClick(helper, event) {
                  const parentDiv = event.target.closest(".video-placeholder-container");
                  const wrapper = parentDiv.querySelector(".video-placeholder-wrapper");
                  const overlay = wrapper.querySelector(".video-placeholder-overlay");
          
                  parentDiv.style.cursor = "";
                  overlay.innerHTML = spinnerHTML;
          
                  const videoHTML = `
                  <video width="100%" height="100%" preload="metadata" controls style="display:none">
                    <source src="${parentDiv.dataset.videoSrc}" ${parentDiv.dataset.origSrc}>
                    <a href="${parentDiv.dataset.videoSrc}">${parentDiv.dataset.videoSrc}</a>
                  </video>`;
                  parentDiv.insertAdjacentHTML("beforeend", videoHTML);
                  parentDiv.classList.add("video-container");
          
                  const video = parentDiv.querySelector("video");

Probably because of bind usage here:

github.com

discourse/discourse/blob/main/app/assets/javascripts/discourse/app/instance-initializers/video-placeholder.js#L85


      
          if (!helper) {
            return;
          }
          
          const containers = post.querySelectorAll(
            ".video-placeholder-container"
          );
          
          containers.forEach((container) => {
            // Add video thumbnail image
            if (container.dataset.thumbnailSrc) {
              const thumbnail = new Image();
              thumbnail.onload = function () {
                container.style.backgroundImage = "url('" + thumbnail.src + "')";
              };
              thumbnail.src = container.dataset.thumbnailSrc;
            }
          
            const wrapper = document.createElement("div"),
              overlay = document.createElement("div");

Maybe an easy solution would be to use { once: true } in addEventListener instead?

Arkshine · 27 oktober 2023 om 16:05

Thanks for the fix @blake!

blake · 27 oktober 2023 om 16:07

My pleasure! Thank you for reporting it and for the suggestion

Topic		Antwoorden	Weergaven
Stop HTML5 video from autoloading Feature	3	973	3 april 2017
Video thumbnails not generated for uploaded videos in Discourse forum Support	6	601	13 december 2023
Weird...videos changed in my topic Site feedback	4	138	8 augustus 2024
Embedded Youtube videos sometimes need to be clicked twice to start playing Bug video	5	2432	10 november 2022
"Picture in Picture" with oneboxes? Feature	12	1723	6 april 2017

Kleine fout in de console na het klikken in een geladen video

Gerelateerde topics