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

Improve video viewing experience and address issues with ad loading

Browse Source 
Fixes Google Ads initialization and video sharing, adds fallback for video playback.

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/bVyBC8U
This commit is contained in:
sebastjanartic 2025-08-04 20:48:52 +00:00
parent c3d91de2b7
commit d4703f6167
1 changed files with 27 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

@ -175,19 +175,32 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
if (isOpen && video && adContainerRef.current) { if (isOpen && video && adContainerRef.current) {
// Initialize Google Ads Manager // Initialize Google Ads Manager
const loadGoogleAdsManager = () => { const loadGoogleAdsManager = () => {
// Check if Google IMA SDK is loaded // Check if Google IMA SDK is loaded and properly initialized
if (window.google && window.google.ima) { if (window.google && window.google.ima && window.google.ima.AdDisplayContainer) {
// Initialize ads display try {
const adsManager = new window.google.ima.AdsManager(); // Create ad display container
// Configure ads for video content const adDisplayContainer = new window.google.ima.AdDisplayContainer(
adContainerRef.current,
videoRef.current
);
console.log('Google Ads Manager initialized for video:', video.id); console.log('Google Ads Manager initialized for video:', video.id);
} catch (error) {
console.log('Google Ads Manager initialization skipped:', error);
}
} else { } else {
// Load Google IMA SDK // Load Google IMA SDK if not already loaded
if (!document.querySelector('script[src*="ima3.js"]')) {
const script = document.createElement('script'); const script = document.createElement('script');
script.src = 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'; script.src = 'https://imasdk.googleapis.com/js/sdkloader/ima3.js';
script.onload = loadGoogleAdsManager; script.onload = () => {
setTimeout(loadGoogleAdsManager, 100); // Small delay to ensure full SDK load
};
script.onerror = () => {
console.log('Google IMA SDK failed to load');
};
document.head.appendChild(script); document.head.appendChild(script);
} }
}
}; };
loadGoogleAdsManager(); loadGoogleAdsManager();
@ -205,7 +218,8 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
}; };
const getShareUrl = () => { const getShareUrl = () => {
return `${window.location.origin}?video=${video?.id}`; if (!video?.id) return window.location.origin;
return `${window.location.origin}?video=${video.id}`;
}; };
const copyToClipboard = async () => { const copyToClipboard = async () => {
@ -277,7 +291,6 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<FacebookShareButton <FacebookShareButton
url={getShareUrl()} url={getShareUrl()}
quote={`Watch: ${video.title}`}
className="flex items-center gap-2 p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" className="flex items-center gap-2 p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
> >
<FacebookIcon size={24} round /> <FacebookIcon size={24} round />
@ -317,7 +330,7 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
{/* Fallback button for iframe if HLS fails */} {/* Fallback button for iframe if HLS fails */}
<Button <Button
onClick={() => window.open(video.videoUrlIframe, '_blank')} onClick={() => video.videoUrlIframe && window.open(video.videoUrlIframe, '_blank')}
variant="secondary" variant="secondary"
size="sm" size="sm"
data-testid="button-iframe-fallback" data-testid="button-iframe-fallback"