Fade in videos after load

Author: satya164

docusaurus.config.js

@@ -16,7 +16,11 @@ export default {
   projectName: 'react-navigation.github.io',
   onBrokenAnchors: 'throw',
   onBrokenMarkdownLinks: 'throw',
-  scripts: ['/js/snack-helpers.js', '/js/toc-fixes.js'],
+  scripts: [
+    '/js/snack-helpers.js',
+    '/js/toc-fixes.js',
+    '/js/video-playback.js',
+  ],
   themeConfig: {
     colorMode: {
       defaultMode: 'light',

static/js/video-playback.js

@@ -0,0 +1,46 @@
+function fadeInOnLoad(video) {
+  if (video.readyState >= 3) {
+    video.style.transition = 'opacity 1s';
+    video.style.opacity = '1';
+  } else {
+    video.style.transition = 'opacity 1s';
+    video.style.opacity = '0';
+
+    video.addEventListener('canplaythrough', () => {
+      video.style.opacity = '1';
+    });
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const observer = new MutationObserver(() => {
+    const videos = document.querySelectorAll('video');
+
+    videos.forEach((video) => {
+      if (video.dataset.seen) {
+        return;
+      }
+
+      video.dataset.seen = true;
+
+      if (video.hasAttribute('playsinline')) {
+        video.addEventListener('click', () => {
+          if (video.paused) {
+            video.play();
+          } else {
+            video.pause();
+          }
+        });
+      }
+
+      fadeInOnLoad(video);
+    });
+  });
+
+  observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+  });
+});
+
+console.log('Video playback script loaded');