From 8bd44157b4935ab3a084e86387a7faf08f00ba67 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Mon, 10 Jul 2023 15:49:52 +0330
Subject: [PATCH] fix: render video after client rehydration; refs #89

---
 .../components/mdx/HeroVideo/HeroVideo.tsx    | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

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 91d18b8..5f13477 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
@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react'
 import { makeStyle } from '../../../lib/makeStyle'
 import { settle } from '../../../lib/settle'
+import { useHydrated } from '../../../lib/useHydrated'
 import { useHero } from '../Hero/Hero.context'
 import './HeroVideo.scss'
 
@@ -28,6 +29,7 @@ export const HeroVideo: React.FC<HeroVideoProps> = ({
   ...props
 }) => {
   const ctx = useHero()
+  const hydrated = useHydrated()
   const ref = useRef<HTMLVideoElement>(null)
   const [loading, setLoading] = useState(true)
 
@@ -81,16 +83,18 @@ export const HeroVideo: React.FC<HeroVideoProps> = ({
           <img src={placeholderSrc} alt="" />
         </div>
         <div className="mdx-hero-video__video">
-          <video
-            muted
-            autoPlay
-            onEnded={onEnded}
-            onCanPlay={onCanPlay}
-            onLoadedMetadata={onLoadedMetadata}
-            ref={ref}
-          >
-            {children}
-          </video>
+          {hydrated && (
+            <video
+              muted
+              autoPlay
+              onEnded={onEnded}
+              onCanPlay={onCanPlay}
+              onLoadedMetadata={onLoadedMetadata}
+              ref={ref}
+            >
+              {children}
+            </video>
+          )}
         </div>
       </div>
     </>