From ce4017ab337163dd37b1fb62e1788c7475c7d8ec Mon Sep 17 00:00:00 2001
From: Bianca Nenciu <nbianca@users.noreply.github.com>
Date: Fri, 23 Apr 2021 16:56:13 +0300
Subject: [PATCH] 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/initializers/post-decorations.js      | 27 +++++++++++++++++++
 .../stylesheets/common/base/onebox.scss       | 20 ++++++++++++++
 config/locales/client.en.yml                  |  2 ++
 3 files changed, 49 insertions(+)

diff --git a/app/assets/javascripts/discourse/app/initializers/post-decorations.js b/app/assets/javascripts/discourse/app/initializers/post-decorations.js
index 88f045f1ff1..4d3465833ca 100644
--- a/app/assets/javascripts/discourse/app/initializers/post-decorations.js
+++ b/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" }
+      );
     });
   },
 };
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index ddbc7e63323..9e3c5440369 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/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%;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index b91131b93c7..d24a66485f8 100644
--- a/config/locales/client.en.yml
+++ b/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: "+"