From a62f04b5ca5954d98ea41a1771e03da3dcf50e7a Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sun, 28 Sep 2025 20:10:00 +0000
Subject: [PATCH] Add inline ads to all broadcast pages for consistent
 advertising

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
---
 .replit                                   |  8 +--
 client/src/pages/FolxStadlPage.tsx        | 66 +++++++++++++----------
 client/src/pages/GeschichteLiedPage.tsx   | 66 +++++++++++++----------
 client/src/pages/GipfelstammtischPage.tsx | 66 +++++++++++++----------
 4 files changed, 118 insertions(+), 88 deletions(-)

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