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

Add inline ads to all broadcast pages for consistent advertising

Browse Source 
Integrate InlineAd component into FolxStadlPage, GeschichteLiedPage, and GipfelstammtischPage, replacing existing ad display logic and ensuring consistent ad placement across these pages.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 401e2ec0-e00d-4f10-9d0e-60f3d479f9a5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/401e2ec0-e00d-4f10-9d0e-60f3d479f9a5/qbWMa3T
This commit is contained in:
sebastjanartic 2025-09-28 20:10:00 +00:00
parent 3485e7cae2
commit a62f04b5ca
4 changed files with 118 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.replit
View File

@ -24,12 +24,12 @@ localPort = 34033
externalPort = 3001 externalPort = 3001
[[ports]] [[ports]]
localPort = 35637 localPort = 35473
externalPort = 3000 externalPort = 3003
[[ports]] [[ports]]
localPort = 39735 localPort = 35637
externalPort = 4200 externalPort = 3000
[env] [env]
PORT = "5000" PORT = "5000"

66
client/src/pages/FolxStadlPage.tsx
View File

@ -10,6 +10,7 @@ import { Input } from '@/components/ui/input';
import { Search } from 'lucide-react'; import { Search } from 'lucide-react';
import AdSenseAd from '@/components/adsense-ad'; import AdSenseAd from '@/components/adsense-ad';
import HeaderAd from '@/components/HeaderAd'; import HeaderAd from '@/components/HeaderAd';
import InlineAd from '@/components/InlineAd';
export default function FolxStadlPage() { export default function FolxStadlPage() {
const [selectedVideo, setSelectedVideo] = useState<Video | null>(null); const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
@ -247,37 +248,43 @@ export default function FolxStadlPage() {
{/* Video List with Descriptions */} {/* Video List with Descriptions */}
<div className="space-y-6"> <div className="space-y-6">
{currentVideos.map((video, index) => ( {currentVideos.map((video, index) => (
<div key={video.id} className="bg-black/20 backdrop-blur-sm rounded-lg p-4"> <div key={video.id}>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="bg-black/20 backdrop-blur-sm rounded-lg p-4">
{/* Video Card */} <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="md:col-span-1"> {/* Video Card */}
<VideoCard <div className="md:col-span-1">
video={video} <VideoCard
onClick={handleVideoClick} video={video}
className="w-full hover:scale-102 transition-all duration-300 rounded-lg overflow-hidden" onClick={handleVideoClick}
hideOverlay={true} className="w-full hover:scale-102 transition-all duration-300 rounded-lg overflow-hidden"
/> hideOverlay={true}
</div> />
</div>
{/* Video Description */}
<div className="md:col-span-2 space-y-3"> {/* Video Description */}
{/* Artist in UPPERCASE - first line */} <div className="md:col-span-2 space-y-3">
<h3 className="text-xl font-bold text-white uppercase"> {/* Artist in UPPERCASE - first line */}
{(video.title.split(' - ')[0] || 'video.folx.tv')} <h3 className="text-xl font-bold text-white uppercase">
</h3> {(video.title.split(' - ')[0] || 'video.folx.tv')}
{/* Song title - second line */} </h3>
<h4 className="text-lg font-medium text-white/90 -mt-1"> {/* Song title - second line */}
{(video.title.split(' - ')[1] || video.title)} <h4 className="text-lg font-medium text-white/90 -mt-1">
</h4> {(video.title.split(' - ')[1] || video.title)}
<p className="text-bunny-light text-sm leading-relaxed"> </h4>
{video.description || "Keine Beschreibung für diese Sendung verfügbar."} <p className="text-bunny-light text-sm leading-relaxed">
</p> {video.description || "Keine Beschreibung für diese Sendung verfügbar."}
<div className="flex items-center gap-4 text-xs text-bunny-muted"> </p>
<span>{Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')} min</span> <div className="flex items-center gap-4 text-xs text-bunny-muted">
<span>{video.views} Aufrufe</span> <span>{Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')} min</span>
<span>{video.views} Aufrufe</span>
</div>
</div> </div>
</div> </div>
</div> </div>
{/* Add inline ad after every second video (index 1, 3, 5...) */}
{index > 0 && (index + 1) % 2 === 0 && (
<InlineAd />
)}
</div> </div>
))} ))}
@ -323,6 +330,9 @@ export default function FolxStadlPage() {
</div> </div>
{/* Final inline ad before footer */}
<InlineAd />
{/* Footer */} {/* Footer */}
<footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12"> <footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12">
<div className="container"> <div className="container">

66
client/src/pages/GeschichteLiedPage.tsx
View File

@ -10,6 +10,7 @@ import { Input } from '@/components/ui/input';
import { Search } from 'lucide-react'; import { Search } from 'lucide-react';
import AdSenseAd from '@/components/adsense-ad'; import AdSenseAd from '@/components/adsense-ad';
import HeaderAd from '@/components/HeaderAd'; import HeaderAd from '@/components/HeaderAd';
import InlineAd from '@/components/InlineAd';
export default function GeschichteLiedPage() { export default function GeschichteLiedPage() {
const [selectedVideo, setSelectedVideo] = useState<Video | null>(null); const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
@ -249,37 +250,43 @@ export default function GeschichteLiedPage() {
{/* Video List with Descriptions */} {/* Video List with Descriptions */}
<div className="space-y-6"> <div className="space-y-6">
{currentVideos.map((video, index) => ( {currentVideos.map((video, index) => (
<div key={video.id} className="bg-black/20 backdrop-blur-sm rounded-lg p-4"> <div key={video.id}>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="bg-black/20 backdrop-blur-sm rounded-lg p-4">
{/* Video Card */} <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="md:col-span-1"> {/* Video Card */}
<VideoCard <div className="md:col-span-1">
video={video} <VideoCard
onClick={handleVideoClick} video={video}
className="w-full hover:scale-102 transition-all duration-300 rounded-lg overflow-hidden" onClick={handleVideoClick}
hideOverlay={true} className="w-full hover:scale-102 transition-all duration-300 rounded-lg overflow-hidden"
/> hideOverlay={true}
</div> />
</div>
{/* Video Description */}
<div className="md:col-span-2 space-y-3"> {/* Video Description */}
{/* Artist in UPPERCASE - first line */} <div className="md:col-span-2 space-y-3">
<h3 className="text-xl font-bold text-white uppercase"> {/* Artist in UPPERCASE - first line */}
{(video.title.split(' - ')[0] || 'video.folx.tv')} <h3 className="text-xl font-bold text-white uppercase">
</h3> {(video.title.split(' - ')[0] || 'video.folx.tv')}
{/* Song title - second line */} </h3>
<h4 className="text-lg font-medium text-white/90 -mt-1"> {/* Song title - second line */}
{(video.title.split(' - ')[1] || video.title)} <h4 className="text-lg font-medium text-white/90 -mt-1">
</h4> {(video.title.split(' - ')[1] || video.title)}
<p className="text-bunny-light text-sm leading-relaxed"> </h4>
{video.description || "Keine Beschreibung für diese Sendung verfügbar."} <p className="text-bunny-light text-sm leading-relaxed">
</p> {video.description || "Keine Beschreibung für diese Sendung verfügbar."}
<div className="flex items-center gap-4 text-xs text-bunny-muted"> </p>
<span>{Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')} min</span> <div className="flex items-center gap-4 text-xs text-bunny-muted">
<span>{video.views} Aufrufe</span> <span>{Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')} min</span>
<span>{video.views} Aufrufe</span>
</div>
</div> </div>
</div> </div>
</div> </div>
{/* Add inline ad after every second video (index 1, 3, 5...) */}
{index > 0 && (index + 1) % 2 === 0 && (
<InlineAd />
)}
</div> </div>
))} ))}
@ -324,6 +331,9 @@ export default function GeschichteLiedPage() {
)} )}
</div> </div>
{/* Final inline ad before footer */}
<InlineAd />
{/* Footer */} {/* Footer */}
<footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12"> <footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12">
<div className="container"> <div className="container">

66
client/src/pages/GipfelstammtischPage.tsx
View File

@ -10,6 +10,7 @@ import { Input } from '@/components/ui/input';
import { Search } from 'lucide-react'; import { Search } from 'lucide-react';
import AdSenseAd from '@/components/adsense-ad'; import AdSenseAd from '@/components/adsense-ad';
import HeaderAd from '@/components/HeaderAd'; import HeaderAd from '@/components/HeaderAd';
import InlineAd from '@/components/InlineAd';
export default function GipfelstammtischPage() { export default function GipfelstammtischPage() {
const [selectedVideo, setSelectedVideo] = useState<Video | null>(null); const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
@ -249,37 +250,43 @@ export default function GipfelstammtischPage() {
{/* Video List with Descriptions */} {/* Video List with Descriptions */}
<div className="space-y-6"> <div className="space-y-6">
{currentVideos.map((video, index) => ( {currentVideos.map((video, index) => (
<div key={video.id} className="bg-black/20 backdrop-blur-sm rounded-lg p-4"> <div key={video.id}>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="bg-black/20 backdrop-blur-sm rounded-lg p-4">
{/* Video Card */} <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="md:col-span-1"> {/* Video Card */}
<VideoCard <div className="md:col-span-1">
video={video} <VideoCard
onClick={handleVideoClick} video={video}
className="w-full hover:scale-102 transition-all duration-300 rounded-lg overflow-hidden" onClick={handleVideoClick}
hideOverlay={true} className="w-full hover:scale-102 transition-all duration-300 rounded-lg overflow-hidden"
/> hideOverlay={true}
</div> />
</div>
{/* Video Description */}
<div className="md:col-span-2 space-y-3"> {/* Video Description */}
{/* Artist in UPPERCASE - first line */} <div className="md:col-span-2 space-y-3">
<h3 className="text-xl font-bold text-white uppercase"> {/* Artist in UPPERCASE - first line */}
{(video.title.split(' - ')[0] || 'video.folx.tv')} <h3 className="text-xl font-bold text-white uppercase">
</h3> {(video.title.split(' - ')[0] || 'video.folx.tv')}
{/* Song title - second line */} </h3>
<h4 className="text-lg font-medium text-white/90 -mt-1"> {/* Song title - second line */}
{(video.title.split(' - ')[1] || video.title)} <h4 className="text-lg font-medium text-white/90 -mt-1">
</h4> {(video.title.split(' - ')[1] || video.title)}
<p className="text-bunny-light text-sm leading-relaxed"> </h4>
{video.description || "Keine Beschreibung für diese Sendung verfügbar."} <p className="text-bunny-light text-sm leading-relaxed">
</p> {video.description || "Keine Beschreibung für diese Sendung verfügbar."}
<div className="flex items-center gap-4 text-xs text-bunny-muted"> </p>
<span>{Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')} min</span> <div className="flex items-center gap-4 text-xs text-bunny-muted">
<span>{video.views} Aufrufe</span> <span>{Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')} min</span>
<span>{video.views} Aufrufe</span>
</div>
</div> </div>
</div> </div>
</div> </div>
{/* Add inline ad after every second video (index 1, 3, 5...) */}
{index > 0 && (index + 1) % 2 === 0 && (
<InlineAd />
)}
</div> </div>
))} ))}
@ -324,6 +331,9 @@ export default function GipfelstammtischPage() {
)} )}
</div> </div>
{/* Final inline ad before footer */}
<InlineAd />
{/* Footer */} {/* Footer */}
<footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12"> <footer className="bg-bunny-dark/90 border-t border-white/10 py-8 mt-12">
<div className="container"> <div className="container">