FEATURE: Show a notice if video cannot be rendered (PR #12718)

Not all videos can be rendered everywhere because some browser may be missing some codecs. This commit adds a notice on top of video to let the user know about it.


You should never use setTimeout inside Discourse code, always later

Is there’s a specific reason for not just doing:

element.querySelectorAll(".video-container").forEach(videoContainer => {
  const video = videoContainer.querySelector("video");
  // ...

Yes, ‘forEach’ is not defined for ‘HTMLCollection’, the object returned by ‘querySelectorAll’.

it is, querySelectorAll doesn’t return an HTMLCollection but NodeList - Web APIs | MDN which implements NodeList.prototype.forEach() - Web APIs | MDN

Ah, I mistook querySelectorAll for getElementsByClassName.

We should check if we still have video in the view, what happens if you navigate away from the topic during the 500ms ?

try to put a longer delay like 5seconds, and you should see an error in the console

What error do you see? I do not see any. I tried as you said, set a timeout of 5 seconds and then navigated to the homepage.

I don’t see any error, I expected there would be one, because you don’t cancel the later block when navigating away:

- display topic
- shows warning
- navigate away from topic before later is done
- attempts to do something with video element, but not in DOM anymore: ERROR

well if not the case, ignore my comment, :+1:

I think it’s safe to assume if either is 0, there’s no video?

                  if (video.videoWidth === 0 || video.videoHeight === 0) {