From 04999a38cd8686d27deaa8fba406651c90e86c6b Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 6 Sep 2025 20:28:46 +0000
Subject: [PATCH] Improve ad loading and video title formatting for better user
 experience

Add a delay and width check for AdSense ad initialization in `adsense-ad.tsx` and clean video titles by removing `.mp4` extensions in `bunny.ts`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c5d5630c-85af-4c2b-bf4e-7e8006d34256
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/c5d5630c-85af-4c2b-bf4e-7e8006d34256/HcYyIPk
---
 client/src/components/adsense-ad.tsx | 28 +++++++++++++++++++---------
 server/bunny.ts                      |  8 +++++++-
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/client/src/components/adsense-ad.tsx b/client/src/components/adsense-ad.tsx
index 961ba7e..6c66d16 100644
--- a/client/src/components/adsense-ad.tsx
+++ b/client/src/components/adsense-ad.tsx
@@ -18,15 +18,25 @@ export default function AdSenseAd({
   const adRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    try {
-      // Ensure adsbygoogle is loaded
-      if (typeof window !== 'undefined') {
-        // @ts-ignore
-        (window.adsbygoogle = window.adsbygoogle || []).push({});
+    const timer = setTimeout(() => {
+      try {
+        // Ensure adsbygoogle is loaded
+        if (typeof window !== 'undefined' && adRef.current) {
+          // Check if element has width before initializing ad
+          const elementWidth = adRef.current.offsetWidth;
+          if (elementWidth > 0) {
+            // @ts-ignore
+            (window.adsbygoogle = window.adsbygoogle || []).push({});
+          } else {
+            console.warn('AdSense element has no width, skipping initialization');
+          }
+        }
+      } catch (error) {
+        console.error('AdSense initialization error:', error);
       }
-    } catch (error) {
-      console.error('AdSense initialization error:', error);
-    }
+    }, 100); // Small delay to ensure DOM is rendered
+
+    return () => clearTimeout(timer);
   }, []);
 
   const adStyle: React.CSSProperties = {
@@ -42,7 +52,7 @@ export default function AdSenseAd({
   }
 
   return (
-    <div className={`adsense-wrapper ${className}`} ref={adRef}>
+    <div className={`adsense-wrapper ${className}`} ref={adRef} style={{ minWidth: '300px', minHeight: '250px' }}>
       <ins
         className="adsbygoogle"
         style={adStyle}
diff --git a/server/bunny.ts b/server/bunny.ts
index 3467ca3..164304c 100644
--- a/server/bunny.ts
+++ b/server/bunny.ts
@@ -100,9 +100,15 @@ export class BunnyService {
     // No tags from Bunny.net - keeping tags empty
     const tags: string[] = [];
 
+    // Clean up title by removing .mp4 extension if present
+    let cleanTitle = bunnyVideo.title || 'Untitled Video';
+    if (cleanTitle.toLowerCase().endsWith('.mp4')) {
+      cleanTitle = cleanTitle.slice(0, -4);
+    }
+
     return {
       id: bunnyVideo.guid,
-      title: bunnyVideo.title || 'Untitled Video',
+      title: cleanTitle,
       artist: null, // No artist data from Bunny.net
       description: description,
       filename: null, // No filename data from Bunny.net