Loading radio...

Connecting

); }; // Helper function to get play/pause button props based on state const getPlayButtonProps = ( isLoading: boolean, isPlaying: boolean, togglePlay: () => void ) => { if (isLoading) { return { icon: PulsingLinesIcon, disabled: true, onClick: undefined, 'aria-label': 'Radio Playbar: Loading', }; } if (isPlaying) { return { icon: PauseIcon, disabled: false, onClick: togglePlay, 'aria-label': 'Radio Playbar: Pause', }; } return { icon: PlayIcon, disabled: false, onClick: togglePlay, 'aria-label': 'Radio Playbar: Play', }; }; // Component for desktop playback controls const RadioPlaybackControls: React.FC = () => { const { isPlaying, isLoading, togglePlay } = useContext(LiveRadioContext); const playButtonProps = getPlayButtonProps(isLoading, isPlaying, togglePlay); return (

); }; // Component for volume control interface RadioVolumeControlProps { volume: number; onToggleSlider: (rect: DOMRect) => void; buttonRef: React.RefObject; } const RadioVolumeControl: React.FC = ({ volume, onToggleSlider, buttonRef, }) => { return (

); }; // Component for action buttons (share, open radio) interface RadioActionButtonsProps { onShare: () => void; onNavigate: () => void; } const RadioActionButtons: React.FC = ({ onShare, onNavigate, }) => { return ( <> {/* Share Button */} ); }; // Component for mobile controls const RadioMobileControls: React.FC = () => { const { isPlaying, isLoading, togglePlay } = useContext(LiveRadioContext); const buttonProps = getPlayButtonProps(isLoading, isPlaying, togglePlay); return (

); }; // Component for volume slider portal interface RadioVolumeSliderPortalProps { isOpen: boolean; buttonRect: DOMRect | null; volume: number; onVolumeChange: (volume: number) => void; } const RadioVolumeSliderPortal: React.FC = ({ isOpen, buttonRect, volume, onVolumeChange, }) => { if (!isOpen || !buttonRect) return null; return createPortal(

160 ? { top: `${buttonRect.top - 150}px` } : { top: `${buttonRect.bottom + 10}px` }), transform: 'translateX(-50%)', }} >

, document.body ); }; // Component for floating messages interface FloatingMessage { id: string; text: string; clientId?: string; timestamp: number; } interface FloatingMessageDisplayProps { message: FloatingMessage; onAnimationComplete: (id: string) => void; } const FloatingMessageDisplay: React.FC = ({ message, onAnimationComplete, }) => { // Calculate animation duration based on window width const [animationDuration, setAnimationDuration] = useState(() => { const width = window.innerWidth; if (width < TAILWIND_SMALL_MIN_WIDTH) return 6000; // 6s for mobile if (width < TAILWIND_LARGE_MIN_WIDTH) return 8000; // 8s for tablet if (width < TAILWIND_XXL_MIN_WIDTH) return 10000; // 10s for smaller desktop return 12000; // 12s for large desktop }); // Update animation duration on window resize useEffect(() => { const handleResize = () => { const width = window.innerWidth; if (width < TAILWIND_SMALL_MIN_WIDTH) setAnimationDuration(6000); // 6s for mobile else if (width < TAILWIND_LARGE_MIN_WIDTH) setAnimationDuration(8000); // 8s for tablet else if (width < TAILWIND_XXL_MIN_WIDTH) setAnimationDuration(10000); // 10s for smaller desktop else setAnimationDuration(12000); // 12s for large desktop }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); useEffect(() => { const timer = setTimeout(() => { onAnimationComplete(message.id); }, animationDuration); return () => clearTimeout(timer); }, [message.id, onAnimationComplete, animationDuration]); // Parse clientId JSON to get user data let clientIdData: { handle?: string; avatar_image_url?: string; } | null = null; try { if (message.clientId && typeof message.clientId === 'string') { clientIdData = JSON.parse(message.clientId); } } catch (error) { // Silent fail, will use defaults } // Use clientId data if available, otherwise use defaults const avatarUrl = isValidResourceUrl(clientIdData?.avatar_image_url) ? clientIdData?.avatar_image_url : FALLBACK_IMAGE_URL; const displayName = clientIdData?.handle || 'Anonymous'; return (

{/* User avatar */}

{/* Message content */}

{displayName} {message.text}

); }; // Inner component that uses the occupancy hook const RadioPlaybarContent: React.FC = observer( ({ stationId: _stationId = STATION_ID }) => { const isCommentsEnabled = useGateValue('living-radio-playbar-comments'); const router = useRouter(); const playbarRef = useRef(null); const volumeButtonRef = useRef(null); const lastMessageTimeRef = useRef(0); // Get live listener count from Ably occupancy const { connections } = useOccupancy(); const { currentSong, volume, setVolume } = useContext(LiveRadioContext); // State management for UI only const [isVolumeSliderOpen, setIsVolumeSliderOpen] = useState(false); const [volumeButtonRect, setVolumeButtonRect] = useState( null ); const [floatingMessages, setFloatingMessages] = useState( [] ); const [showMessagePanel, setShowMessagePanel] = useState(false); const [isPanelAnimatingOut, setIsPanelAnimatingOut] = useState(false); // Listen for messages useMessages({ listener: (message) => { const now = Date.now(); // Rate limit: only show one message every 2 seconds if (now - lastMessageTimeRef.current < 2000) { return; } if ( message.message && message.message.text && typeof message.message.text === 'string' ) { lastMessageTimeRef.current = now; const floatingMessage: FloatingMessage = { id: `${message.message.serial || Date.now()}`, text: message.message.text, clientId: message.message.clientId || undefined, timestamp: now, }; setFloatingMessages((prev) => [...prev, floatingMessage]); setShowMessagePanel(true); } }, }); // Remove completed floating messages const removeFloatingMessage = useCallback((id: string) => { setFloatingMessages((prev) => { const newMessages = prev.filter((msg) => msg.id !== id); // If this was the last message, start hide animation if (newMessages.length === 0) { setIsPanelAnimatingOut(true); setTimeout(() => { setShowMessagePanel(false); setIsPanelAnimatingOut(false); }, 300); // Match animation duration } return newMessages; }); }, []); const handleVolumeChange = useCallback( (newVolume: number) => { // CustomVolumeSlider expects 0-1 range, but context uses 0-100 const clampedVolume = Math.max(0, Math.min(100, newVolume * 100)); setVolume(clampedVolume); }, [setVolume] ); const handleShare = useCallback(async () => { const shareData = { title: 'Suno Living Radio', text: 'Listening to Deep Focus Beats on Suno Living Radio', url: window.location.origin + '/live-radio', }; if (navigator.share) { await navigator.share(shareData); } else { await navigator.clipboard.writeText(shareData.url); toast({ title: 'Copied to clipboard', description: 'Share radio with your friends', status: 'success', }); } }, []); const handleNavigateToRadio = useCallback(() => { router.push('/live-radio'); }, [router]); const handleToggleVolumeSlider = useCallback( (rect: DOMRect) => { setVolumeButtonRect(rect); setIsVolumeSliderOpen(!isVolumeSliderOpen); }, [isVolumeSliderOpen] ); // Close volume slider when clicking outside useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( isVolumeSliderOpen && volumeButtonRef.current && !volumeButtonRef.current.contains(event.target as Node) && !document .querySelector('.volume-slider-portal') ?.contains(event.target as Node) ) { setIsVolumeSliderOpen(false); } }; document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, [isVolumeSliderOpen]); // Update button rect when window resizes useEffect(() => { if (!isVolumeSliderOpen || !volumeButtonRef.current) return; const handleResize = () => { if (volumeButtonRef.current) { setVolumeButtonRect(volumeButtonRef.current.getBoundingClientRect()); } }; window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }, [isVolumeSliderOpen]); return ( <>

{/* Floating Messages Container */} {showMessagePanel && isCommentsEnabled && (

{floatingMessages.map((message) => ( ))}

)}

{!!currentSong ? ( ) : ( )} {/* Desktop controls - center */} {/* Right side controls */}

{/* Volume Control */} {/* Action Buttons */}

{/* Mobile controls */}

{/* Volume Slider Portal */} ); } ); const RadioPlaybar: React.FC = ({ stationId = STATION_ID, }) => { return ( <> {/* CSS Animation for floating messages */} ); }; export default RadioPlaybar;