From c117e26bbd020097e039e1652d01b32378a6ba89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20B=C3=A4uerle?= <alex@a13x.io>
Date: Mon, 8 Jan 2024 16:16:08 +0100
Subject: [PATCH] fix: show video controls only on hover not when play starts
 (#67)

---
 src/components/Demo/Demo.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/Demo/Demo.tsx b/src/components/Demo/Demo.tsx
index 2546cf8..545ff8a 100644
--- a/src/components/Demo/Demo.tsx
+++ b/src/components/Demo/Demo.tsx
@@ -2,10 +2,26 @@ import React from "react";
 import styles from "./index.module.css";
 
 export function Demo() {
+  const videoRef = React.useRef<HTMLVideoElement>(null);
+
   return (
-    <div style={{ paddingBottom: "30px", paddingTop: "20px", textAlign: "center" }}>
-      <video controls autoPlay={true} loop className={styles.demo} muted>
-        <source src={require("@site/static/img/teaser.mp4").default} type="video/mp4"></source>
+    <div
+      style={{ paddingBottom: "30px", paddingTop: "20px", textAlign: "center" }}
+    >
+      <video
+        playsInline
+        autoPlay={true}
+        loop
+        className={styles.demo}
+        muted
+        onMouseOver={() => (videoRef.current.controls = true)}
+        onMouseOut={() => (videoRef.current.controls = false)}
+        ref={videoRef}
+      >
+        <source
+          src={require("@site/static/img/teaser.mp4").default}
+          type="video/mp4"
+        ></source>
       </video>
     </div>
   );