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

Improve video playback stability and address issues with ad loading process

Browse Source 
Adds try/catch blocks for player disposal and initialization to handle errors, and simplifies ad plugin loading in video-modal.tsx.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 11420304-80a9-4ef2-adff-cbdaa418ffa8
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/11420304-80a9-4ef2-adff-cbdaa418ffa8/jU7cNe4
This commit is contained in:
sebastjanartic 2025-08-05 06:09:04 +00:00
parent 17b5c378fd
commit b6654c0ff9
1 changed files with 54 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,66 +89,76 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
// Clean up previous Video.js instance
if (playerRef.current) {
playerRef.current.dispose();
try {
playerRef.current.dispose();
} catch (e) {
console.log('Player cleanup error:', e);
}
playerRef.current = null;
}
const videoUrl = video.videoUrl;
console.log('Loading video with Video.js:', videoUrl);
// Initialize Video.js player with ads support
const player = videojs(videoElement, {
controls: true,
fluid: true,
responsive: true,
preload: 'metadata',
html5: {
hls: {
enableLowInitialPlaylist: true,
smoothQualityChange: true,
overrideNative: true
}
},
sources: [{
src: videoUrl,
type: videoUrl.includes('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'
}]
});
try {
// Initialize Video.js player with simplified configuration
const player = videojs(videoElement, {
controls: true,
fluid: true,
responsive: true,
preload: 'metadata',
html5: {
hls: {
enableLowInitialPlaylist: true,
smoothQualityChange: true,
overrideNative: false
}
},
sources: [{
src: videoUrl,
type: videoUrl.includes('.m3u8') ? 'application/x-mpegURL' : 'video/mp4'
}]
});
// Initialize ads plugin
player.ready(() => {
try {
// Initialize ads plugin
(player as any).ads();
player.ready(() => {
console.log('Video.js player ready');
// Configure IMA plugin for VAST ads
if ((player as any).ima) {
(player as any).ima({
id: video.id,
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=',
contribAdsSettings: {
prerollTimeout: 1000,
postrollTimeout: 1000,
debug: true
}
});
// Only initialize ads if plugins are properly loaded
if (typeof (player as any).ads === 'function') {
try {
(player as any).ads({
debug: false,
prerollTimeout: 1000
});
console.log('Ads plugin initialized');
} catch (error) {
console.log('Ads plugin initialization failed:', error);
}
}
} catch (error) {
console.log('Ads plugin not available, continuing without ads:', error);
}
});
});
player.on('error', (error: any) => {
console.error('Video.js player error:', error);
});
player.on('error', (error: any) => {
console.error('Video.js player error:', error);
});
playerRef.current = player;
player.on('play', () => {
handleVideoPlay();
});
playerRef.current = player;
} catch (error) {
console.error('Failed to initialize Video.js player:', error);
}
}
// Cleanup when modal closes
return () => {
if (playerRef.current) {
playerRef.current.dispose();
try {
playerRef.current.dispose();
} catch (e) {
console.log('Player cleanup error:', e);
}
playerRef.current = null;
}
};
@ -229,7 +239,6 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
ref={videoRef}
className="video-js vjs-default-skin w-full h-auto max-h-[80vh]"
data-setup="{}"
onPlay={handleVideoPlay}
data-testid="video-player"
crossOrigin="anonymous"
/>