FEATURE: Show a notice if video cannot be rendered (#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.

app/assets/javascripts/discourse/app/initializers/post-decorations.js

@@ -1,3 +1,5 @@
+import { later } from "@ember/runloop";
+import I18n from "I18n";
 import highlightSyntax from "discourse/lib/highlight-syntax";
 import lightbox from "discourse/lib/lightbox";
 import { iconHTML } from "discourse-common/lib/icon-library";
@@ -110,6 +112,31 @@ export default {
         },
         { id: "onebox-source-icons" }
       );
+
+      api.decorateCookedElement(
+        (element) => {
+          element
+            .querySelectorAll(".video-container")
+            .forEach((videoContainer) => {
+              const video = videoContainer.getElementsByTagName("video")[0];
+              video.addEventListener("loadeddata", () => {
+                later(() => {
+                  if (video.videoWidth === 0 || video.videoHeight === 0) {
+                    const notice = document.createElement("div");
+                    notice.className = "notice";
+                    notice.innerHTML =
+                      iconHTML("exclamation-triangle") +
+                      " " +
+                      I18n.t("cannot_render_video");
+
+                    videoContainer.appendChild(notice);
+                  }
+                }, 500);
+              });
+            });
+        },
+        { id: "discourse-video-codecs" }
+      );
     });
   },
 };

app/assets/stylesheets/common/base/onebox.scss

@@ -768,6 +768,26 @@ aside.onebox.stackexchange .onebox-body {
   }
 }
 
+.video-container {
+  .notice {
+    background-color: var(--highlight-medium);
+    padding: 10px 20px;
+    position: absolute;
+    width: calc(100% - 40px);
+    animation: 0.5s fadeIn;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
 .onebox-placeholder-container {
   position: relative;
   width: 100%;

config/locales/client.en.yml

@@ -3451,6 +3451,8 @@ en:
       content_load_error: '<a href="%url%">The content</a> could not be loaded.'
       image_load_error: '<a href="%url%">The image</a> could not be loaded.'
 
+    cannot_render_video: This video cannot be rendered because your browser does not support the codec.
+
     keyboard_shortcuts_help:
       shortcut_key_delimiter_comma: ", "
       shortcut_key_delimiter_plus: "+"