[Docs] Idk apple fix hopefully(Aargh)

documentation/src/components/Player/index.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import ReactPlayer from "react-player";
 import { Icon } from "@iconify/react";
-import fullscreen from "screenfull";
+import screenfull from "screenfull";
+import debounce from "lodash.debounce";
 
 interface PlayerProps {
   url: string;
@@ -10,19 +11,40 @@ interface PlayerProps {
 export default function Player({ url }: PlayerProps) {
   const [progress, setProgress] = useState(0);
   const [playing, setPlaying] = useState(true);
+  const [isFullscreen, setIsFullscreen] = useState(false);
   const playerRef = useRef<ReactPlayer>(null);
-  const playerContainerRef = useRef(null);
+  const playerContainerRef = useRef<HTMLDivElement>(null);
 
   const togglePlayPause = () => {
     setPlaying((prev) => !prev);
   };
 
-  const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSeek = debounce((e: React.ChangeEvent<HTMLInputElement>) => {
     const newProgress = parseFloat(e.target.value);
     setProgress(newProgress);
     playerRef.current?.seekTo(newProgress / 100, "fraction");
+  }, 200);
+
+  const handleFullscreenToggle = () => {
+    if (screenfull.isEnabled) {
+      screenfull.toggle(playerContainerRef.current);
+    }
   };
 
+  useEffect(() => {
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        setIsFullscreen(screenfull.isFullscreen);
+      });
+
+      return () => {
+        screenfull.off("change", () => {
+          setIsFullscreen(screenfull.isFullscreen);
+        });
+      };
+    }
+  }, []);
+
   return (
     <div ref={playerContainerRef} className="relative w-full h-full">
       <ProgressBar progress={progress} onSeek={handleSeek} />
@@ -32,34 +54,35 @@ export default function Player({ url }: PlayerProps) {
         playing={playing}
         loop
         muted
+        playsInline={true}
         controls={false}
         width="100%"
         height="100%"
         progressInterval={100}
         onProgress={(state) => setProgress(state.played * 100)}
       />
       <div className="opacity-0 hover:opacity-100 transition-opacity duration-300 w-full h-full flex items-center justify-center">
-          <div
-      className="absolute bottom-0 left-0 right-0 flex items-center justify-center cursor-pointer h-[97%]"
-      onClick={togglePlayPause}
-    >
-      <div className="">
-        <Icon
-          icon={playing ? "mdi:pause-circle" : "mdi:play-circle"}
-          fontSize={50}
-          color="white"
-        />
-      </div>
-    </div>
-      <div className="absolute bottom-2 right-2 p-2">
-        <Icon
-          onClick={() => fullscreen.toggle(playerContainerRef.current)}
-          className="cursor-pointer hover:scale-110 transition duration-150"
-          icon={fullscreen.isFullscreen ? "mdi:fullscreen-exit" : "mdi:fullscreen"}
-          fontSize={40}
-          color="white"
-        />
-      </div>
+        <div
+          className="absolute bottom-0 left-0 right-0 flex items-center justify-center cursor-pointer h-[97%]"
+          onClick={togglePlayPause}
+        >
+          <div>
+            <Icon
+              icon={playing ? "mdi:pause-circle" : "mdi:play-circle"}
+              fontSize={50}
+              color="white"
+            />
+          </div>
+        </div>
+        <div className="absolute bottom-2 right-2 p-2">
+          <Icon
+            onClick={handleFullscreenToggle}
+            className="cursor-pointer hover:scale-110 transition duration-150"
+            icon={isFullscreen ? "mdi:fullscreen-exit" : "mdi:fullscreen"}
+            fontSize={40}
+            color="white"
+          />
+        </div>
       </div>
     </div>
   );
@@ -95,12 +118,16 @@ function Bar({ progress, onSeek }: BarProps) {
         value={progress}
         onChange={onSeek}
         className="absolute top-0 left-0 w-full h-[5px] opacity-0 cursor-pointer"
-        style={{ WebkitAppearance: "none" }}
+        style={{
+          WebkitAppearance: "none",
+          MozAppearance: "none",
+          appearance: "none",
+        }}
       />
       <div
-        className="h-full bg-primary transition-width duration-200 pb-2"
+        className="h-full bg-primary transition-width duration-200"
         style={{ width: `${progress}%` }}
       />
     </div>
   );
-}
+}