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

Implement live HLS streaming and player functionality

Browse Source 
Remove console logs and refactor video element mounting logic in LivePage.tsx, update replit.md to reflect HLS live streaming implementation details.

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/FiYsh04
This commit is contained in:
sebastjanartic 2025-09-26 15:46:34 +00:00
parent 664c4a7875
commit ceb9a94801
3 changed files with 9 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.replit
View File

@ -23,10 +23,6 @@ externalPort = 3001
localPort = 35637 localPort = 35637
externalPort = 3000 externalPort = 3000
[[ports]]
localPort = 41879
externalPort = 3002
[env] [env]
PORT = "5000" PORT = "5000"

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

@ -11,8 +11,6 @@ declare global {
} }
export default function LivePage() { export default function LivePage() {
console.log('🔴 LivePage component rendered');
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const hlsRef = useRef<any>(null); const hlsRef = useRef<any>(null);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
@ -61,14 +59,6 @@ export default function LivePage() {
}; };
}, []); }, []);
// Callback ref to properly handle video element mounting
const videoCallbackRef = (element: HTMLVideoElement | null) => {
if (element && element !== videoRef.current) {
(videoRef as any).current = element;
console.log('🔴 Video element mounted, initializing player...');
initializePlayer();
}
};
const initializePlayer = async () => { const initializePlayer = async () => {
console.log('🔴 LivePage: Starting to initialize player...'); console.log('🔴 LivePage: Starting to initialize player...');

10
replit.md
View File

@ -6,7 +6,15 @@ go4.video is a fully functional professional video streaming platform with a com
## Recent Changes (August 2025) ## Recent Changes (August 2025)
### Latest Updates (September 2, 2025) ### Latest Updates (September 26, 2025)
- ✅ **HLS Live Streaming Implementation**: Successfully implemented comprehensive HLS live streaming functionality on `/live` page using HLS.js
- ✅ **Live Stream Player**: Professional video player with autoplay (muted), full controls, crossOrigin support, and adaptive quality selection
- ✅ **Multi-Quality Support**: Stream automatically selects best quality (1080p, 720p, 360p) based on bandwidth with real-time switching
- ✅ **Live Stream Integration**: Fully functional HLS stream from https://cdne.folxplay.tv/fxt/streams/ch-4/master.m3u8 with live segment refreshing
- ✅ **Browser Compatibility**: Works across all modern browsers with HLS.js support and Safari native HLS fallback
- ✅ **Live UI Elements**: Red "LIVE" indicator with pulsing animation and proper navigation integration throughout site
### Previous Updates (September 2, 2025)
- ✅ **Mobile Layout Optimization**: Enhanced mobile video card typography with larger titles (text-2xl) and subtitles (text-base) for better readability on small screens - ✅ **Mobile Layout Optimization**: Enhanced mobile video card typography with larger titles (text-2xl) and subtitles (text-base) for better readability on small screens
- ✅ **Individual Video Page Mobile Design**: Implemented clean mobile layout for video pages with full title display, views/date info, and expandable description text with "preberi več/pokaži manj" functionality - ✅ **Individual Video Page Mobile Design**: Implemented clean mobile layout for video pages with full title display, views/date info, and expandable description text with "preberi več/pokaži manj" functionality
- ✅ **Mobile Number Visibility**: Top 10 ranking numbers on "Meist Angesehen" videos remain visible on mobile devices (no hiding on tap/hover) - ✅ **Mobile Number Visibility**: Top 10 ranking numbers on "Meist Angesehen" videos remain visible on mobile devices (no hiding on tap/hover)