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

Use a standard video player with signed URLs to play videos on the platform

Browse Source 
Refactor video playback to use <video> tag with HLS.js and signed URLs for secure Bunny.net streaming.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aa92e7e2-ec62-4c92-b21b-02ef78a664c2
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/aa92e7e2-ec62-4c92-b21b-02ef78a664c2/bwzbqEX
This commit is contained in:
sebastjanartic 2025-08-04 20:30:36 +00:00
parent ecb86b1873
commit 1d2c533a6d
2 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -180,15 +180,30 @@ 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">
<iframe <video
src={video.videoUrlIframe || `https://iframe.mediadelivery.net/embed/${process.env.BUNNY_LIBRARY_ID}/${video.id}`} ref={videoRef}
className="w-full h-auto max-h-[80vh] aspect-video" className="w-full h-auto max-h-[80vh]"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen" controls
allowFullScreen preload="metadata"
onLoad={handleVideoPlay} onPlay={handleVideoPlay}
data-testid="video-iframe" data-testid="video-player"
title={video.title} crossOrigin="anonymous"
/> >
<source src={video.videoUrl} type="application/x-mpegURL" />
Your browser does not support the video tag.
</video>
{/* Fallback button for iframe if HLS fails */}
<div className="absolute top-4 right-4">
<Button
onClick={() => window.open(video.videoUrlIframe, '_blank')}
variant="secondary"
size="sm"
data-testid="button-iframe-fallback"
>
Open in Bunny Player
</Button>
</div>
<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

20
server/bunny.ts
View File

@ -55,9 +55,8 @@ export class BunnyService {
// Generate thumbnail URL from CDN (thumbnails are usually public) // Generate thumbnail URL from CDN (thumbnails are usually public)
const thumbnailUrl = `https://${this.hostname}/${bunnyVideo.guid}/thumbnail.jpg`; const thumbnailUrl = `https://${this.hostname}/${bunnyVideo.guid}/thumbnail.jpg`;
// Try HLS stream first, then fallback to iframe // Generate signed HLS URL for private video access
const hlsUrl = `https://${this.hostname}/${bunnyVideo.guid}/playlist.m3u8`; const hlsUrl = this.generateSignedUrl(bunnyVideo.guid);
const mp4Url = `https://${this.hostname}/${bunnyVideo.guid}/play_${bunnyVideo.guid}.mp4`;
const iframeUrl = `https://iframe.mediadelivery.net/embed/${this.libraryId}/${bunnyVideo.guid}`; const iframeUrl = `https://iframe.mediadelivery.net/embed/${this.libraryId}/${bunnyVideo.guid}`;
return { return {
@ -65,8 +64,8 @@ export class BunnyService {
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: hlsUrl, // Try HLS first videoUrl: hlsUrl, // Signed HLS URL
videoUrlMp4: mp4Url, // MP4 fallback videoUrlMp4: undefined, // Remove MP4 since it likely won't work for private videos
videoUrlIframe: iframeUrl, // iframe fallback videoUrlIframe: iframeUrl, // iframe fallback
duration: Math.floor(bunnyVideo.length || 0), duration: Math.floor(bunnyVideo.length || 0),
views: bunnyVideo.views || 0, views: bunnyVideo.views || 0,
@ -121,4 +120,15 @@ export class BunnyService {
return []; return [];
} }
} }
// Generate signed URL for private video access
generateSignedUrl(videoId: string, expirationTime: number = 3600): string {
const baseUrl = `https://${this.hostname}/${videoId}/playlist.m3u8`;
const expires = Math.floor(Date.now() / 1000) + expirationTime;
// Simple token generation (in production, use proper HMAC signing)
const token = Buffer.from(`${videoId}:${expires}:${this.apiKey.substring(0, 8)}`).toString('base64');
return `${baseUrl}?token=${token}&expires=${expires}`;
}
} }