From b744eb1bf573aff6b5c854b0d8fa83c54ed6a010 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 17:43:05 +0000
Subject: [PATCH] Integrate Bunny.net iframe player for video playback

Replace HLS.js video player with Bunny.net iframe embed in VideoPage.tsx to utilize their CDN for video streaming.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/52uJ2fJ
---
 client/src/pages/VideoPage.tsx | 33 ++++++++++-----------------------
 1 file changed, 10 insertions(+), 23 deletions(-)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 598a611..7806204 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -255,30 +255,17 @@ export default function VideoPage() {
         <div className="flex flex-col lg:flex-row gap-6 relative z-10">
           {/* Main video section */}
           <div className="flex-1">
-            {/* Video player with HLS.js */}
+            {/* Bunny.net iframe player */}
             <div className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4">
-              <video
-                ref={(video) => {
-                  if (video && currentVideo) {
-                    const videoSrc = `https://vz-b9208a4c-8c8.b-cdn.net/${currentVideo.id}/playlist.m3u8`;
-                    
-                    if (Hls.isSupported()) {
-                      const hls = new Hls();
-                      hls.loadSource(videoSrc);
-                      hls.attachMedia(video);
-                      hls.on(Hls.Events.MANIFEST_PARSED, () => {
-                        console.log('HLS video ready');
-                      });
-                    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-                      video.src = videoSrc;
-                    }
-                  }
-                }}
-                controls
-                className="absolute inset-0 w-full h-full object-contain"
-                onPlay={handleVideoPlay}
-                preload="metadata"
-                data-testid="video-player"
+              <iframe
+                src={`https://iframe.mediadelivery.net/embed/${process.env.BUNNY_LIBRARY_ID || "384105"}/${currentVideo.id}?preroll=false&postroll=false&ads=false`}
+                className="absolute inset-0 w-full h-full"
+                frameBorder="0"
+                allowFullScreen
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                onLoad={handleVideoPlay}
+                title={currentVideo.title}
+                referrerPolicy="origin"
               />
             </div>