sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Play videos directly instead of using an embedded player for better experience

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-04 19:04:22 +00:00
parent 8417409cc6
commit 16cf7dd5a8
2 changed files with 20 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
client/src/components/video-modal.tsx
View File

@ -180,29 +180,18 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
</Button> </Button>
<div className="relative bg-black rounded-lg overflow-hidden"> <div className="relative bg-black rounded-lg overflow-hidden">
{video.videoUrl.includes('iframe.mediadelivery.net') ? ( <video
<iframe ref={videoRef}
src={video.videoUrl} className="w-full h-auto max-h-[80vh] aspect-video"
className="w-full h-auto max-h-[80vh] aspect-video" controls
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;" preload="metadata"
allowFullScreen={true} onPlay={handleVideoPlay}
frameBorder="0" data-testid="video-player"
onLoad={handleVideoPlay} crossOrigin="anonymous"
data-testid="video-iframe" src={video.videoUrl}
/> >
) : ( Your browser does not support the video tag.
<video </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>
)}
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6"> <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
<h3 <h3

10
server/bunny.ts
View File

@ -55,15 +55,21 @@ export class BunnyService {
// Use proxy endpoint for thumbnails to handle private access // Use proxy endpoint for thumbnails to handle private access
const thumbnailUrl = `/thumbnail/${bunnyVideo.guid}`; 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`; 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 { return {
id: bunnyVideo.guid, id: bunnyVideo.guid,
title: bunnyVideo.title || 'Untitled Video', title: bunnyVideo.title || 'Untitled Video',
description: null, // Bunny API doesn't return description in list view description: null, // Bunny API doesn't return description in list view
thumbnailUrl, thumbnailUrl,
videoUrl: iframeUrl, // Use iframe for reliable playback videoUrl,
duration: Math.floor(bunnyVideo.length || 0), duration: Math.floor(bunnyVideo.length || 0),
views: bunnyVideo.views || 0, views: bunnyVideo.views || 0,
category: bunnyVideo.category || null, category: bunnyVideo.category || null,