From 1676044e73ac194f182c955d3fe4582774b472f1 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sun, 28 Sep 2025 13:47:22 +0000
Subject: [PATCH] Improve ad display on desktop and mobile devices

Implement responsive ad units for different screen sizes and introduce mobile-specific inline ads within content grids.

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/w5MsJAB
---
 .replit                                  |  4 ++
 client/src/components/HeaderAd.tsx       | 16 +++++-
 client/src/components/MobileInlineAd.tsx | 38 +++++++++++++
 client/src/components/netflix-grid.tsx   | 70 +++++++++++++++---------
 client/src/pages/home.tsx                |  6 +-
 5 files changed, 102 insertions(+), 32 deletions(-)
 create mode 100644 client/src/components/MobileInlineAd.tsx

diff --git a/.replit b/.replit
index cd990cf..0a1ce02 100644
--- a/.replit
+++ b/.replit
@@ -23,6 +23,10 @@ externalPort = 3001
 localPort = 35637
 externalPort = 3000
 
+[[ports]]
+localPort = 40943
+externalPort = 3002
+
 [env]
 PORT = "5000"
 
diff --git a/client/src/components/HeaderAd.tsx b/client/src/components/HeaderAd.tsx
index 6032bb0..25fc7a9 100644
--- a/client/src/components/HeaderAd.tsx
+++ b/client/src/components/HeaderAd.tsx
@@ -22,9 +22,9 @@ export default function HeaderAd() {
 
   return (
     <div className="w-full flex justify-center py-1 bg-bunny-dark" ref={adRef}>
-      {/* Fixed Small Header Ad */}
+      {/* Desktop: Hidden on mobile, Mobile: 320x50px */}
       <ins 
-        className="adsbygoogle"
+        className="adsbygoogle md:hidden"
         style={{ 
           display: 'inline-block', 
           width: '320px',
@@ -33,6 +33,18 @@ export default function HeaderAd() {
         data-ad-client="ca-pub-4465464714854276"
         data-ad-slot="7241323742"
       />
+      
+      {/* Desktop: 728x90px, Hidden on mobile */}
+      <ins 
+        className="adsbygoogle hidden md:inline-block"
+        style={{ 
+          display: 'inline-block', 
+          width: '728px',
+          height: '90px'
+        }}
+        data-ad-client="ca-pub-4465464714854276"
+        data-ad-slot="7241323742"
+      />
     </div>
   );
 }
\ No newline at end of file
diff --git a/client/src/components/MobileInlineAd.tsx b/client/src/components/MobileInlineAd.tsx
new file mode 100644
index 0000000..0e1a226
--- /dev/null
+++ b/client/src/components/MobileInlineAd.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useRef } from 'react';
+
+export default function MobileInlineAd() {
+  const adRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const initializeAd = () => {
+      const insElement = adRef.current?.querySelector('ins');
+      if (!insElement || insElement.dataset.adsbygoogleStatus === 'done') return;
+
+      try {
+        // @ts-ignore
+        (window.adsbygoogle = window.adsbygoogle || []).push({});
+      } catch (error) {
+        console.error('Mobile Inline AdSense initialization error:', error);
+      }
+    };
+
+    // Initialize the ad immediately
+    initializeAd();
+  }, []);
+
+  return (
+    <div className="w-full flex justify-center py-2 md:hidden" ref={adRef}>
+      {/* Mobile only inline ad */}
+      <ins 
+        className="adsbygoogle"
+        style={{ 
+          display: 'inline-block', 
+          width: '320px',
+          height: '50px'
+        }}
+        data-ad-client="ca-pub-4465464714854276"
+        data-ad-slot="7241323742"
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 88800b8..0222a8d 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -3,6 +3,7 @@ import { useLocation } from "wouter";
 import { type Video } from "@shared/schema";
 import VideoCard from "./video-card";
 import BunnyVideoModal from "./bunny-video-modal";
+import MobileInlineAd from "./MobileInlineAd";
 import { Button } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
@@ -422,35 +423,50 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
           onTouchEnd={handleTouchEnd}
         >
           {category.videos.map((video, index) => (
-            <div 
-              key={video.id} 
-              className="flex-shrink-0 w-[calc(100vw-1.5rem)] sm:w-[330px] relative hover:z-50"
-              style={{ 
-                scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none'
-              }}
-              onMouseEnter={() => setClickedVideoId(video.id)}
-            >
-              {/* Top 10 Number overlay for "Meist Angesehen" category - visible on all devices */}
-              {category.title.includes("Meist Angesehen") && index < 10 && clickedVideoId !== video.id && (
-                <div className="absolute top-0 left-2 z-20 text-white font-black text-5xl sm:text-6xl md:text-7xl drop-shadow-2xl transition-opacity duration-300"
-                     style={{ 
-                       textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
-                       WebkitTextStroke: '2px rgba(0,0,0,0.8)',
-                       fontFeatureSettings: 'normal',
-                       fontVariantNumeric: 'normal'
-                     }}>
-                  {(index + 1).toString()}
+            <>
+              <div 
+                key={video.id} 
+                className="flex-shrink-0 w-[calc(100vw-1.5rem)] sm:w-[330px] relative hover:z-50"
+                style={{ 
+                  scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none'
+                }}
+                onMouseEnter={() => setClickedVideoId(video.id)}
+              >
+                {/* Top 10 Number overlay for "Meist Angesehen" category - visible on all devices */}
+                {category.title.includes("Meist Angesehen") && index < 10 && clickedVideoId !== video.id && (
+                  <div className="absolute top-0 left-2 z-20 text-white font-black text-5xl sm:text-6xl md:text-7xl drop-shadow-2xl transition-opacity duration-300"
+                       style={{ 
+                         textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
+                         WebkitTextStroke: '2px rgba(0,0,0,0.8)',
+                         fontFeatureSettings: 'normal',
+                         fontVariantNumeric: 'normal'
+                       }}>
+                    {(index + 1).toString()}
+                  </div>
+                )}
+                <VideoCard
+                  video={video}
+                  onClick={(video) => {
+                    setClickedVideoId(video.id);
+                    onVideoClick(video);
+                  }}
+                  className="w-full hover:scale-102 md:hover:scale-105 hover:z-50 transition-all duration-300 md:duration-500 hover:shadow-2xl rounded-lg overflow-hidden"
+                />
+              </div>
+              
+              {/* Mobile inline ads after video 4 and 8 in "Meist Angesehen" category only */}
+              {category.title.includes("Meist Angesehen") && (index === 3 || index === 7) && (
+                <div 
+                  key={`mobile-ad-${index}`}
+                  className="flex-shrink-0 w-[calc(100vw-1.5rem)] sm:w-[330px] md:hidden"
+                  style={{ 
+                    scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none'
+                  }}
+                >
+                  <MobileInlineAd />
                 </div>
               )}
-              <VideoCard
-                video={video}
-                onClick={(video) => {
-                  setClickedVideoId(video.id);
-                  onVideoClick(video);
-                }}
-                className="w-full hover:scale-102 md:hover:scale-105 hover:z-50 transition-all duration-300 md:duration-500 hover:shadow-2xl rounded-lg overflow-hidden"
-              />
-            </div>
+            </>
           ))}
         </div>
         
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index a4a6a4a..69c59e3 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -5,8 +5,8 @@ import NetflixGrid from "@/components/netflix-grid";
 import { Link } from "wouter";
 import { Input } from "@/components/ui/input";
 import { Search, Menu, X } from "lucide-react";
-import AdSenseAd from "@/components/adsense-ad";
 import HeaderAd from "@/components/HeaderAd";
+import AdSenseAd from "@/components/adsense-ad";
 
 interface VideosResponse {
   videos: Video[];
@@ -221,8 +221,8 @@ export default function Home() {
         </div>
       </main>
 
-      {/* Bottom Banner Ad */}
-      <div className="container py-4 border-t border-white/10">
+      {/* Desktop Bottom Banner Ad */}
+      <div className="container py-4 border-t border-white/10 hidden md:block">
         <div className="w-full flex justify-center">
           <AdSenseAd 
             adSlot="5972813417"