From 16cf7dd5a86854852a0b4994113d2db5949b9319 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 4 Aug 2025 19:04:22 +0000
Subject: [PATCH] Play videos directly instead of using an embedded player for
 better experience

Refactor video playback in VideoModal to use direct CDN URL and update bunny.ts to use directUrl for HLS streaming.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 50814a1e-92e4-4968-856f-7bc7eedf5e8f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/50814a1e-92e4-4968-856f-7bc7eedf5e8f/Iu4fJAO
---
 client/src/components/video-modal.tsx | 35 +++++++++------------------
 server/bunny.ts                       | 10 ++++++--
 2 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index cffb1c6..30d9d78 100644
--- a/client/src/components/video-modal.tsx
+++ b/client/src/components/video-modal.tsx
@@ -180,29 +180,18 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
         </Button>
         
         <div className="relative bg-black rounded-lg overflow-hidden">
-          {video.videoUrl.includes('iframe.mediadelivery.net') ? (
-            <iframe
-              src={video.videoUrl}
-              className="w-full h-auto max-h-[80vh] aspect-video"
-              allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;"
-              allowFullScreen={true}
-              frameBorder="0"
-              onLoad={handleVideoPlay}
-              data-testid="video-iframe"
-            />
-          ) : (
-            <video
-              ref={videoRef}
-              className="w-full h-auto max-h-[80vh]"
-              controls
-              preload="metadata"
-              onPlay={handleVideoPlay}
-              data-testid="video-player"
-              crossOrigin="anonymous"
-            >
-              Your browser does not support the video tag.
-            </video>
-          )}
+          <video
+            ref={videoRef}
+            className="w-full h-auto max-h-[80vh] aspect-video"
+            controls
+            preload="metadata"
+            onPlay={handleVideoPlay}
+            data-testid="video-player"
+            crossOrigin="anonymous"
+            src={video.videoUrl}
+          >
+            Your browser does not support the video tag.
+          </video>
           
           <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
             <h3 
diff --git a/server/bunny.ts b/server/bunny.ts
index ea64ee4..3e25a26 100644
--- a/server/bunny.ts
+++ b/server/bunny.ts
@@ -55,15 +55,21 @@ export class BunnyService {
     // Use proxy endpoint for thumbnails to handle private access
     const thumbnailUrl = `/thumbnail/${bunnyVideo.guid}`;
 
-    // For private videos, use iframe embed which properly handles authentication
+    // Try direct CDN URL first - some videos might be accessible
+    const directUrl = `https://${this.hostname}/${bunnyVideo.guid}/playlist.m3u8`;
+    
+    // Fallback iframe embed for private videos
     const iframeUrl = `https://iframe.mediadelivery.net/embed/${this.libraryId}/${bunnyVideo.guid}?controls=true&autoplay=false`;
+    
+    // Use direct URL for HLS streaming
+    const videoUrl = directUrl;
 
     return {
       id: bunnyVideo.guid,
       title: bunnyVideo.title || 'Untitled Video',
       description: null, // Bunny API doesn't return description in list view
       thumbnailUrl,
-      videoUrl: iframeUrl, // Use iframe for reliable playback
+      videoUrl,
       duration: Math.floor(bunnyVideo.length || 0),
       views: bunnyVideo.views || 0,
       category: bunnyVideo.category || null,