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

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

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