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

Add suggested videos to the live stream page sidebar

Browse Source 
Integrates a new API call to fetch suggested videos and displays them in a dedicated section on the right sidebar of the LivePage, replacing previously present informational content.

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/E8iWmgC
This commit is contained in:
sebastjanartic 2025-09-26 15:50:01 +00:00
parent ceb9a94801
commit e7a23f2f41
2 changed files with 33 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.replit
View File

@ -15,6 +15,10 @@ run = ["npm", "run", "start"]
localPort = 5000
externalPort = 80
[[ports]]
localPort = 33305
externalPort = 3002
[[ports]]
localPort = 34033
externalPort = 3001

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

@ -2,6 +2,8 @@ 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 { useQuery } from '@tanstack/react-query';
import VideoCard from '@/components/video-card';
import AdSenseAd from '@/components/adsense-ad';
declare global {
@ -22,6 +24,14 @@ export default function LivePage() {
// HLS stream URL
const streamUrl = 'https://cdne.folxplay.tv/fxt/streams/ch-4/master.m3u8';
// Fetch suggested videos
const { data: videosData } = useQuery({
queryKey: ['/api/videos'],
staleTime: 5 * 60 * 1000, // 5 minutes
});
const videos = videosData?.videos || [];
useEffect(() => {
// Set page meta tags
document.title = 'LIVE Stream | video.folx.tv';
@ -395,8 +405,26 @@ export default function LivePage() {
</div>
</div>
{/* Sidebar */}
{/* Sidebar - Suggested Videos */}
<div className="lg:col-span-1 space-y-6">
<div className="bg-bunny-darker rounded-lg p-4">
<h3 className="text-white font-bold text-lg mb-4">Predlagani videi</h3>
<div className="space-y-4">
{videos.slice(0, 8).map((video: any) => (
<div key={video.id} className="group">
<VideoCard
video={video}
isCompact={true}
showTitle={true}
showViews={true}
showDate={true}
className="hover:bg-bunny-dark/50 transition-colors rounded-lg"
/>
</div>
))}
</div>
</div>
{/* Ad Space */}
<div className="bg-bunny-darker rounded-lg p-4">
<AdSenseAd
@ -404,52 +432,6 @@ export default function LivePage() {
adFormat="vertical"
/>
</div>
{/* Live Chat or Additional Content */}
<div className="bg-bunny-darker rounded-lg p-6 space-y-4">
<h3 className="text-white font-bold text-lg flex items-center space-x-2">
<Radio className="w-5 h-5 text-red-500" />
<span>Live Info</span>
</h3>
<div className="space-y-3 text-sm text-bunny-light">
<div className="flex justify-between">
<span>Status:</span>
<span className="text-red-500 font-semibold">● LIVE</span>
</div>
<div className="flex justify-between">
<span>Quality:</span>
<span>Auto (HD)</span>
</div>
<div className="flex justify-between">
<span>Channel:</span>
<span>CH-4</span>
</div>
<div className="flex justify-between">
<span>Format:</span>
<span>HLS</span>
</div>
</div>
</div>
{/* Navigation Links */}
<div className="bg-bunny-darker rounded-lg p-6 space-y-4">
<h3 className="text-white font-bold text-lg">Explore</h3>
<div className="space-y-2">
<Link href="/" className="block text-bunny-light hover:text-white transition-colors">
← Back to Home
</Link>
<Link href="/folx-stadl" className="block text-bunny-light hover:text-white transition-colors">
FOLX STADL Episodes
</Link>
<Link href="/geschichte-lied" className="block text-bunny-light hover:text-white transition-colors">
Geschichte des Liedes
</Link>
<Link href="/gipfelstammtisch" className="block text-bunny-light hover:text-white transition-colors">
Gipfelstammtisch
</Link>
</div>
</div>
</div>
</div>
</div>