feat: use vimeo player instance to add custom icon and control video (#…

…1729)

* feat: use vimeo player instance to add custom icon and control video

* feat: import vimeo player only if client is browser

src/components/VimeoPlayer/VimeoPlayer.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useRef, useState } from "react";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+
+const VimeoPlayer = ({ videoId }) => {
+  const playerRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  let player = null;
+  const isBrowser = useIsBrowser();
+
+  useEffect(() => {
+    const loadVimeoPlayer = async () => {
+      try {
+        if (isBrowser && videoId) {
+          const { default: Player } = await import("@vimeo/player");
+
+          player = new Player(playerRef.current, {
+            url: `https://vimeo.com/${videoId}`,
+          });
+        }
+      } catch (error) {
+        console.error("Error loading Vimeo Player:", error);
+      }
+    };
+
+    loadVimeoPlayer();
+  }, [isBrowser, videoId]);
+
+  const handlePlay = () => {
+    if (!isPlaying && player && typeof player.play === "function") {
+      player.play();
+      setIsPlaying(true);
+    }
+  };
+
+  return (
+    <div>
+      <div ref={playerRef} />
+      {!isPlaying && (
+        <div onClick={handlePlay}>
+          <div className="cursor-pointer play-container w-16 h-16 md:w-24 md:h-24 rounded-full bg-primary-500 flex justify-center items-center focus-visible:outline-none">
+            <img
+              src="/img/landing/play-icon.webp"
+              className="w-6 h-6 md:w-10 md:h-10"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default VimeoPlayer;

src/modules/index-header/index.tsx

@@ -1,10 +1,8 @@
-import React, { useEffect, useRef, useState } from "react";
-import Player from "@vimeo/player";
+import React from "react";
 import SubHeading from "../../components/ui/SubHeading";
 import Hero from "../../components/ui/Hero";
 import Button from "../../components/ui/Button";
-import ReactModal from "react-modal";
-import { LiteYoutubeEmbed } from "react-lite-yt-embed";
+import VimeoPlayer from "../../components/VimeoPlayer/VimeoPlayer";
 
 export const Header = () => {
   return (
@@ -44,14 +42,7 @@ export const Header = () => {
         <div className="w-100 mx-auto">
           <div className="product-explainer-video hero-figure p-3 rounded-lg">
             <div className="embed-container">
-              <iframe
-                className="product-explainer-video-frame"
-                src="https://player.vimeo.com/video/944340217"
-                frameborder="0"
-                webkitAllowFullScreen
-                mozallowfullscreen
-                allowFullScreen
-              ></iframe>
+              <VimeoPlayer videoId="944340217" />
             </div>
           </div>
         </div>