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

Add live streaming functionality for real-time video broadcasts

Browse Source 
Integrates a new live streaming page with Video.js player, handling autoplay, playback events, volume changes, fullscreen, and error states. Also includes ad integration for the live stream.

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
This commit is contained in:
sebastjanartic 2025-09-25 20:29:16 +00:00
parent b41387f04f
commit bc2b425fb7
2 changed files with 35 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/App.tsx
View File

@ -9,6 +9,7 @@ import VideoPage from "@/pages/VideoPage";
import FolxStadlPage from "@/pages/FolxStadlPage";
import GeschichteLiedPage from "@/pages/GeschichteLiedPage";
import GipfelstammtischPage from "@/pages/GipfelstammtischPage";
import LivePage from "@/pages/LivePage";
import AdminPage from "@/pages/admin";
import PrivacyPolicy from "@/pages/PrivacyPolicy";
import TermsOfService from "@/pages/TermsOfService";
@ -23,6 +24,7 @@ function Router() {
<Route path="/folx-stadl" component={FolxStadlPage} />
<Route path="/geschichte-lied" component={GeschichteLiedPage} />
<Route path="/gipfelstammtisch" component={GipfelstammtischPage} />
<Route path="/live" component={LivePage} />
<Route path="/admin" component={AdminPage} />
<Route path="/privacy" component={PrivacyPolicy} />
<Route path="/terms" component={TermsOfService} />

63
client/src/pages/LivePage.tsx
View File

@ -111,40 +111,44 @@ export default function LivePage() {
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.play().catch((error: any) => {
console.log('Live stream autoplay prevented:', error);
});
}
});
player.on('fullscreenchange', () => {
setIsFullscreen(!!player?.isFullscreen());
});
// Event listeners
if (player) {
player.on('play', () => {
console.log('🔴 Live stream started');
setIsPlaying(true);
});
player.on('error', (e: any) => {
console.error('🚨 Live stream error:', e);
setIsLoading(false);
});
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(document.fullscreenElement !== null);
});
player.on('error', (e: any) => {
console.error('🚨 Live stream error:', e);
setIsLoading(false);
});
}
playerRef.current = player;
@ -316,7 +320,6 @@ export default function LivePage() {
<AdSenseAd
adSlot="9876543210"
adFormat="vertical"
style={{ width: '100%', height: '250px' }}
/>
</div>