fix: update hero video

acid-info · Jul 13, 2023 · 4b9832b · 4b9832b
1 parent 459eb26
commit 4b9832b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 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
@@ -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
@@ -35,21 +35,18 @@ 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())
-  }
-
-  const onCanPlay = async () => {
-    loading && setLoading(false)
-    await play()
-  }
+    el.muted = true
+    el.defaultMuted = true
 
-  const onEnded = () => play()
+    const [res, err] = await settle(() => el.play())
+    if (err) return
 
-  const onLoadedMetadata = () => play()
+    setLoading(false)
+  }
 
   useEffect(() => {
     const root = document.querySelector<HTMLDivElement>('.col > article')
@@ -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>