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

Fix live stream playback issues by improving video player initialization

Browse Source 
Updates LivePage.tsx to use a callback ref for the video element, ensuring proper initialization of the HLS.js player and resolving potential playback errors.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 45a1dcfc-f8a2-475a-a6b9-96fbb841dc27
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/45a1dcfc-f8a2-475a-a6b9-96fbb841dc27/Njo8yLX
This commit is contained in:
sebastjanartic 2025-09-26 06:40:15 +00:00
parent 73a995d9b8
commit e59c6f7b3b
1 changed files with 23 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,22 +46,30 @@ export default function LivePage() {
updateMetaTag('og:type', 'video.other'); updateMetaTag('og:type', 'video.other');
}, []); }, []);
useEffect(() => { // Callback ref to properly handle video element mounting
const initializePlayer = async () => { const videoCallbackRef = (element: HTMLVideoElement | null) => {
console.log('🔴 LivePage: Starting to initialize player...'); if (element) {
videoRef.current = element;
if (!videoRef.current) { console.log('🔴 Video element mounted, initializing player...');
console.error('🚨 Video ref not available!'); initializePlayer();
return; }
} };
console.log('🔴 Video element found, continuing...'); const initializePlayer = async () => {
console.log('🔴 LivePage: Starting to initialize player...');
if (!videoRef.current) {
console.error('🚨 Video ref not available!');
return;
}
try { console.log('🔴 Video element found, continuing...');
// Load HLS.js if not already loaded
console.log('🔴 Checking if HLS.js is loaded...'); try {
if (!window.Hls) { // Load HLS.js if not already loaded
console.log('🔴 Loading HLS.js script...'); console.log('🔴 Checking if HLS.js is loaded...');
if (!window.Hls) {
console.log('🔴 Loading HLS.js script...');
const script = document.createElement('script'); const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.8'; script.src = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.8';
script.async = true; script.async = true;
@ -220,20 +228,6 @@ export default function LivePage() {
} }
}; };
// Add a small delay to ensure DOM is ready
const timer = setTimeout(() => {
initializePlayer();
}, 200);
return () => {
clearTimeout(timer);
if (hlsRef.current) {
console.log('🧹 Destroying HLS instance');
hlsRef.current.destroy();
}
};
}, []);
const togglePlayPause = () => { const togglePlayPause = () => {
if (videoRef.current) { if (videoRef.current) {
if (isPlaying) { if (isPlaying) {
@ -326,7 +320,7 @@ export default function LivePage() {
)} )}
<video <video
ref={videoRef} ref={videoCallbackRef}
className="w-full h-full bg-black" className="w-full h-full bg-black"
playsInline playsInline
controls controls