From 2ba5f0b87e49c4d2c034f9aed75bd261a665db44 Mon Sep 17 00:00:00 2001
From: Marten Mrfc <101009922+Marten-Mrfc@users.noreply.github.com>
Date: Sun, 15 Sep 2024 14:21:32 +0200
Subject: [PATCH] [Docs] Fix playbar not showing

---
 documentation/src/components/Player/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/documentation/src/components/Player/index.tsx b/documentation/src/components/Player/index.tsx
index fd1af54b1b..2a3d48cc7c 100644
--- a/documentation/src/components/Player/index.tsx
+++ b/documentation/src/components/Player/index.tsx
@@ -2,7 +2,6 @@ import React, { useState, useRef, useEffect } from "react";
 import ReactPlayer from "react-player";
 import { Icon } from "@iconify/react";
 import screenfull from "screenfull";
-import debounce from "lodash.debounce";
 
 interface PlayerProps {
   url: string;
@@ -19,11 +18,11 @@ export default function Player({ url }: PlayerProps) {
     setPlaying((prev) => !prev);
   };
 
-  const handleSeek = debounce((e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newProgress = parseFloat(e.target.value);
     setProgress(newProgress);
     playerRef.current?.seekTo(newProgress / 100, "fraction");
-  }, 200);
+  };
 
   const handleFullscreenToggle = () => {
     if (screenfull.isEnabled) {
@@ -55,6 +54,7 @@ export default function Player({ url }: PlayerProps) {
         loop
         muted
         playsInline={true}
+        playsinline={true}
         controls={false}
         width="100%"
         height="100%"
@@ -125,7 +125,7 @@ function Bar({ progress, onSeek }: BarProps) {
         }}
       />
       <div
-        className="h-full bg-primary transition-width duration-200"
+        className="h-full bg-primary transition-width duration-200 pb-2"
         style={{ width: `${progress}%` }}
       />
     </div>