From b41387f04fc69f93fbe5c33cef35ffdbf05c5e42 Mon Sep 17 00:00:00 2001 From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com> Date: Thu, 25 Sep 2025 20:28:39 +0000 Subject: [PATCH] Add live video streaming functionality with interactive player controls Implement a new page for live video streaming using Video.js. The player includes standard controls, responsive design, HLS support, and autoplay functionality. Metadata for SEO and social sharing is also configured. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 45a1dcfc-f8a2-475a-a6b9-96fbb841dc27 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/45a1dcfc-f8a2-475a-a6b9-96fbb841dc27/CdguB3F --- client/src/pages/LivePage.tsx | 373 ++++++++++++++++++++++++++++++++++ 1 file changed, 373 insertions(+) create mode 100644 client/src/pages/LivePage.tsx diff --git a/client/src/pages/LivePage.tsx b/client/src/pages/LivePage.tsx new file mode 100644 index 0000000..54ecd84 --- /dev/null +++ b/client/src/pages/LivePage.tsx @@ -0,0 +1,373 @@ +import { useState, useEffect, useRef } from 'react'; +import { ChevronLeft, Maximize, Volume2, VolumeX, Radio } from 'lucide-react'; +import { Link } from 'wouter'; +import { Button } from '@/components/ui/button'; +import AdSenseAd from '@/components/adsense-ad'; + +interface VideoJSPlayer { + ready: (callback: () => void) => void; + src: (source?: any) => any; + dispose: () => void; + play: () => Promise; + pause: () => void; + currentTime: (time?: number) => number; + duration: () => number; + volume: (vol?: number) => number; + muted: (mute?: boolean) => boolean; + requestFullscreen: () => void; + on: (event: string, handler: any) => void; + off: (event: string, handler?: any) => void; + tech: (deep?: boolean) => any; +} + +declare global { + interface Window { + videojs: any; + } +} + +export default function LivePage() { + const videoRef = useRef(null); + const playerRef = useRef(null); + const [isLoading, setIsLoading] = useState(true); + const [isPlaying, setIsPlaying] = useState(false); + const [volume, setVolume] = useState(1); + const [isMuted, setIsMuted] = useState(false); + const [isFullscreen, setIsFullscreen] = useState(false); + + // HLS stream URL + const streamUrl = 'https://cdne.folxplay.tv/fxt/streams/ch-4/master.m3u8'; + + useEffect(() => { + // Set page meta tags + document.title = 'LIVE Stream | video.folx.tv'; + + const metaDescription = document.querySelector('meta[name="description"]'); + if (metaDescription) { + metaDescription.setAttribute('content', 'Živý prenos na video.folx.tv - sledujte exkluzívny obsah v reálnom čase.'); + } + + const updateMetaTag = (property: string, content: string) => { + let meta = document.querySelector(`meta[property="${property}"]`); + if (!meta) { + meta = document.createElement('meta'); + meta.setAttribute('property', property); + document.head.appendChild(meta); + } + meta.setAttribute('content', content); + }; + + updateMetaTag('og:title', 'LIVE Stream - video.folx.tv'); + updateMetaTag('og:description', 'Živý prenos na video.folx.tv - sledujte exkluzívny obsah v reálnom čase.'); + updateMetaTag('og:type', 'video.other'); + }, []); + + useEffect(() => { + let player: VideoJSPlayer | null = null; + + const initializePlayer = async () => { + if (!videoRef.current) return; + + // Load Video.js dynamically + if (!window.videojs) { + const script = document.createElement('script'); + script.src = 'https://vjs.zencdn.net/8.8.0/video.min.js'; + script.async = true; + document.head.appendChild(script); + + const link = document.createElement('link'); + link.href = 'https://vjs.zencdn.net/8.8.0/video-js.css'; + link.rel = 'stylesheet'; + document.head.appendChild(link); + + await new Promise((resolve) => { + script.onload = resolve; + }); + } + + try { + player = window.videojs(videoRef.current, { + controls: true, + fluid: true, + responsive: true, + aspectRatio: '16:9', + playbackRates: [0.5, 1, 1.25, 1.5, 2], + html5: { + hls: { + enableLowInitialPlaylist: true, + smoothQualityChange: true, + overrideNative: true + } + }, + techOrder: ['html5'], + sources: [{ + src: streamUrl, + type: 'application/x-mpegURL' + }] + }); + + player.ready(() => { + console.log('🔴 Live stream player ready'); + setIsLoading(false); + + // Auto-play live stream + player?.play().catch((error: any) => { + console.log('Live stream autoplay prevented:', error); + }); + }); + + // Event listeners + player.on('play', () => { + console.log('🔴 Live stream started'); + setIsPlaying(true); + }); + + player.on('pause', () => { + console.log('⏸️ Live stream paused'); + setIsPlaying(false); + }); + + player.on('volumechange', () => { + if (player) { + const vol = player.volume(); + const muted = player.muted(); + setVolume(vol); + setIsMuted(muted); + console.log('🔊 Live stream volume change:', { volume: vol, muted }); + } + }); + + player.on('fullscreenchange', () => { + setIsFullscreen(!!player?.isFullscreen()); + }); + + player.on('error', (e: any) => { + console.error('🚨 Live stream error:', e); + setIsLoading(false); + }); + + playerRef.current = player; + + } catch (error) { + console.error('Failed to initialize live stream player:', error); + setIsLoading(false); + } + }; + + initializePlayer(); + + return () => { + if (player) { + player.dispose(); + } + }; + }, []); + + const togglePlayPause = () => { + if (playerRef.current) { + if (isPlaying) { + playerRef.current.pause(); + } else { + playerRef.current.play(); + } + } + }; + + const toggleMute = () => { + if (playerRef.current) { + playerRef.current.muted(!isMuted); + } + }; + + const toggleFullscreen = () => { + if (playerRef.current) { + playerRef.current.requestFullscreen(); + } + }; + + if (isLoading) { + return ( +
+
+
+ +
+

video.folx.tv

+

Connecting to live stream...

+
+
+ ); + } + + return ( +
+ {/* Header */} +
+
+
+ + + + +
+
+
+ LIVE +
+
+
+
+
+ +
+
+ {/* Main Video Player */} +
+
+
+
+
+ + {/* Stream Info */} +
+
+
+

+ FOLX TV Live Stream +

+
+ +

+ Sledujte živý prenos FOLX TV s exkluzívnym obsahom a najnovšími videoami. + Stream prebieha 24/7 s najlepšími hitmi a videoklipmi. +

+ +
+ + + Live Stream + + Channel 4 + HD Quality +
+
+
+ + {/* Sidebar */} +
+ {/* Ad Space */} +
+ +
+ + {/* Live Chat or Additional Content */} +
+

+ + Live Info +

+ +
+
+ Status: + ● LIVE +
+
+ Quality: + Auto (HD) +
+
+ Channel: + CH-4 +
+
+ Format: + HLS +
+
+
+ + {/* Navigation Links */} +
+

Explore

+
+ + ← Back to Home + + + FOLX STADL Episodes + + + Geschichte des Liedes + + + Gipfelstammtisch + +
+
+
+
+
+
+ ); +} \ No newline at end of file