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

Display videos reliably and improve the appearance of shared content

Browse Source 
Replaces HLS.js with iframe embeds for Bunny.net videos and updates thumbnail generation.

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/q65IwWw
This commit is contained in:
sebastjanartic 2025-08-04 19:32:22 +00:00
parent fd78ef1545
commit ea9dbe1b2f
3 changed files with 36 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,74 +68,14 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
};
}, [isOpen, onClose]);
// Initialize HLS when video is available
// Since we're now using iframe embeds for Bunny.net videos, we don't need HLS.js
useEffect(() => {
if (isOpen && video && videoRef.current) {
const videoElement = videoRef.current;
// Clean up previous HLS instance
if (hlsRef.current) {
hlsRef.current.destroy();
hlsRef.current = null;
}
const videoUrl = video.videoUrl;
console.log('Loading video:', videoUrl);
// Check if the video URL is HLS (.m3u8)
if (videoUrl.includes('.m3u8')) {
if (Hls.isSupported()) {
// Use HLS.js for browsers that don't support HLS natively
const hls = new Hls({
debug: true,
enableWorker: false,
lowLatencyMode: true,
backBufferLength: 90
});
hls.loadSource(videoUrl);
hls.attachMedia(videoElement);
hls.on(Hls.Events.MANIFEST_PARSED, () => {
console.log('HLS manifest loaded successfully');
});
hls.on(Hls.Events.ERROR, (event, data) => {
console.error('HLS error:', data);
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
console.log('Network error, trying to recover...');
hls.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
console.log('Media error, trying to recover...');
hls.recoverMediaError();
break;
default:
console.log('Fatal error, destroying HLS instance...');
hls.destroy();
break;
}
}
});
hlsRef.current = hls;
} else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
// For Safari that supports HLS natively
videoElement.src = videoUrl;
console.log('Using native HLS support');
} else {
console.error('HLS is not supported in this browser');
}
} else {
// For regular MP4 videos
videoElement.src = videoUrl;
console.log('Using native video support for MP4');
}
// Just log for debugging
if (isOpen && video) {
console.log('Video modal opened with:', video.videoUrl);
}
// Cleanup when modal closes
// Cleanup if needed
return () => {
if (hlsRef.current) {
hlsRef.current.destroy();
@ -180,18 +120,29 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
</Button>
<div className="relative bg-black rounded-lg overflow-hidden">
<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>
{video.videoUrl.includes('iframe.mediadelivery.net') ? (
<iframe
src={video.videoUrl}
className="w-full h-auto max-h-[80vh] aspect-video"
frameBorder="0"
allowFullScreen={true}
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
data-testid="video-player-iframe"
></iframe>
) : (
<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

13
server/bunny.ts
View File

@ -83,16 +83,11 @@ export class BunnyService {
}
private bunnyVideoToVideo(bunnyVideo: BunnyVideo): Video {
// Generate signed URLs for private video access
const videoPath = `/${bunnyVideo.guid}/playlist.m3u8`;
const thumbnailPath = `/${bunnyVideo.guid}/${bunnyVideo.thumbnailFileName || 'thumbnail.jpg'}`;
// Since Bunny.net private library token authentication is not working,
// use iframe embed approach for reliable video playback
const videoUrl = `https://iframe.mediadelivery.net/embed/${this.libraryId}/${bunnyVideo.guid}?controls=true&autoplay=false`;
const videoUrl = this.generateSignedUrl(videoPath);
// For thumbnails, try direct signed URL for now to debug the issue
const directThumbnailUrl = this.generateSignedUrl(thumbnailPath);
// Use proxy endpoint for social sharing compatibility
// Use proxy endpoint for social sharing compatibility
const thumbnailUrl = `/thumbnail/${bunnyVideo.guid}`;
return {

6
server/routes.ts
View File

@ -128,9 +128,9 @@ export async function registerRoutes(app: Express): Promise<Server> {
const video = await storage.getVideo(videoId);
if (video) {
// For now, redirect to a video-themed placeholder with appropriate dimensions for social media
// This ensures consistent sharing experience while Bunny.net authentication is being resolved
const placeholderUrl = `https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&h=630&q=80`;
// Generate a dynamic thumbnail using the video title for better social sharing
const encodedTitle = encodeURIComponent(video.title);
const placeholderUrl = `https://images.unsplash.com/photo-1611162617474-5b21e879e113?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&h=630&q=80&text=${encodedTitle}`;
res.redirect(placeholderUrl);
} else {
// Video not found, use generic video placeholder