From 4b9832b71fafd3417d1cd255817e48ee68589eaa Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Thu, 13 Jul 2023 21:09:18 +0330
Subject: [PATCH] fix: update hero video

---
 .../components/mdx/HeroVideo/HeroVideo.scss   |  1 -
 .../components/mdx/HeroVideo/HeroVideo.tsx    | 28 +++++++++----------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss
index 511760f..63491db 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.scss
@@ -60,7 +60,6 @@
 .mdx-hero-video--loading {
   .mdx-hero-video__video {
     opacity: 0;
-    visibility: hidden;
   }
 
   .mdx-hero-video__placeholder {
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
index 4442ee8..4f87a65 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroVideo/HeroVideo.tsx
@@ -35,22 +35,19 @@ export const HeroVideo: React.FC<HeroVideoProps> = ({
   const ref = useRef<HTMLVideoElement>(null)
   const [loading, setLoading] = useState(true)
 
-  const play = async () => {
+  const onPlay = async () => {
     const el = ref.current
     if (!el) return
 
-    await settle(() => el.play())
+    el.muted = true
+    el.defaultMuted = true
+
+    const [res, err] = await settle(() => el.play())
+    if (err) return
+
+    setLoading(false)
   }
 
-  const onCanPlay = async () => {
-    loading && setLoading(false)
-    await play()
-  }
-
-  const onEnded = () => play()
-
-  const onLoadedMetadata = () => play()
-
   useEffect(() => {
     const root = document.querySelector<HTMLDivElement>('.col > article')
     if (!root) return
@@ -92,12 +89,13 @@ export const HeroVideo: React.FC<HeroVideoProps> = ({
         <div className="mdx-hero-video__video">
           {hydrated && (
             <video
+              ref={ref}
+              loop
               muted
               autoPlay
-              onEnded={onEnded}
-              onCanPlay={onCanPlay}
-              onLoadedMetadata={onLoadedMetadata}
-              ref={ref}
+              playsInline
+              onCanPlay={onPlay}
+              onLoadedMetadata={onPlay}
             >
               {children}
             </video>