From f8692ed48075a3c11f56b94fe5678f5a5c64226d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sun, 8 Jan 2023 15:13:03 +0100
Subject: [PATCH] fix: ensure video element is ready before playing (#871)

---
 components/status/StatusAttachment.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue
index 721b3d43..3a23625d 100644
--- a/components/status/StatusAttachment.vue
+++ b/components/status/StatusAttachment.vue
@@ -65,14 +65,23 @@ const video = ref<HTMLVideoElement | undefined>()
 const prefersReducedMotion = usePreferredReducedMotion()
 
 useIntersectionObserver(video, (entries) => {
-  if (prefersReducedMotion.value === 'reduce')
+  const ready = video.value?.dataset.ready === 'true'
+  if (prefersReducedMotion.value === 'reduce') {
+    if (ready && !video.value?.paused)
+      video.value?.pause()
+
     return
+  }
 
   entries.forEach((entry) => {
-    if (entry.intersectionRatio <= 0.75)
-      !video.value!.paused && video.value!.pause()
-    else
-      video.value!.play()
+    if (entry.intersectionRatio <= 0.75) {
+      ready && !video.value?.paused && video.value?.pause()
+    }
+    else {
+      video.value?.play().then(() => {
+        video.value!.dataset.ready = 'true'
+      }).catch(noop)
+    }
   })
 }, { threshold: 0.75 })
 </script>