From 6cb76d5b6106ed0af4aa66fc7b2acaeca26272db Mon Sep 17 00:00:00 2001
From: Kakabay <2kakabayashyrberdyew@gmail.com>
Date: Thu, 12 Sep 2024 15:51:17 +0500
Subject: [PATCH] img layout shift prevented and audio on play views

---
 components/VideoPlayer.tsx | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/components/VideoPlayer.tsx b/components/VideoPlayer.tsx
index 64ef34c..a19a6b1 100644
--- a/components/VideoPlayer.tsx
+++ b/components/VideoPlayer.tsx
@@ -52,16 +52,6 @@ const VideoPlayer = ({ maxHeight, maxWidth, video_id }: IProps) => {
       {hasWindow ? (
         data?.data.content_url.endsWith('.mp4') ? (
           <div className="lg:w-[700px] md:w-[550px] w-full h-[200px] sm:h-[250px] md:h-[350px] lg:h-[420px]">
-            {/* <ReactPlayer
-              height={'100%'}
-              width={'100%'}
-              controls
-              playsInline
-              playing={true}
-              light={data?.data.banner_url}
-              url={data!.data.video_stream_url}
-              onStart={() => onPlayHandler()}
-            /> */}
             <video
               controls
               src={data!.data.video_stream_url}
@@ -74,10 +64,10 @@ const VideoPlayer = ({ maxHeight, maxWidth, video_id }: IProps) => {
           <div className="flex flex-col gap-4 h-fit">
             <div className="relative lg:w-[700px] md:w-[550px] w-full h-[200px] sm:h-[400px]  md:h-[420px]">
               {data?.data.banner_url ? (
-                <Image src={data?.data.banner_url} fill alt={'image'} />
+                <Image src={data?.data.banner_url} width={700} height={420} alt={'image'} />
               ) : null}
             </div>
-            <audio controls className="w-full rounded bg-white" onLoadStart={() => onPlayHandler()}>
+            <audio controls className="w-full rounded bg-white" onPlay={() => onPlayHandler()}>
               <source src={data?.data.content_url} />
             </audio>
           </div>