diff --git a/client/src/components/video-companion-ad.tsx b/client/src/components/video-companion-ad.tsx new file mode 100644 index 0000000..46b7ea3 --- /dev/null +++ b/client/src/components/video-companion-ad.tsx @@ -0,0 +1,133 @@ +import { useState, useEffect } from 'react'; +import { X } from 'lucide-react'; +import AdSenseAd from './adsense-ad'; + +interface VideoCompanionAdProps { + isVideoPlaying: boolean; + showControls: boolean; + onClose?: () => void; + adSlot: string; + position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'; + autoHide?: number; // Auto hide after X seconds + size?: 'small' | 'medium'; +} + +export default function VideoCompanionAd({ + isVideoPlaying, + showControls, + onClose, + adSlot, + position = 'bottom-left', + autoHide = 0, // No auto-hide by default + size = 'small' +}: VideoCompanionAdProps) { + const [isVisible, setIsVisible] = useState(false); + const [shouldShow, setShouldShow] = useState(false); + + // Show ad after 3 seconds of video playing + useEffect(() => { + let showTimer: NodeJS.Timeout; + let hideTimer: NodeJS.Timeout; + + if (isVideoPlaying) { + // Show ad after 3 seconds + showTimer = setTimeout(() => { + setShouldShow(true); + setIsVisible(true); + }, 3000); + + // Auto hide if specified + if (autoHide > 0) { + hideTimer = setTimeout(() => { + setIsVisible(false); + }, (3 + autoHide) * 1000); + } + } else { + setShouldShow(false); + setIsVisible(false); + } + + return () => { + clearTimeout(showTimer); + clearTimeout(hideTimer); + }; + }, [isVideoPlaying, autoHide]); + + const handleClose = () => { + setIsVisible(false); + onClose?.(); + }; + + if (!shouldShow || !isVisible) return null; + + const getPositionClasses = () => { + switch (position) { + case 'top-left': + return 'top-4 left-4'; + case 'top-right': + return 'top-4 right-4'; + case 'bottom-left': + return 'bottom-20 left-4'; // Above video controls + case 'bottom-right': + return 'bottom-20 right-4'; // Above video controls + default: + return 'bottom-20 left-4'; + } + }; + + const getSizeClasses = () => { + switch (size) { + case 'small': + return { width: '200px', height: '150px' }; + case 'medium': + return { width: '300px', height: '200px' }; + default: + return { width: '200px', height: '150px' }; + } + }; + + const sizeStyle = getSizeClasses(); + + return ( +