feat: occasional ad slots between song cards

Author: Bentroen

web/src/modules/browse/components/HomePageComponent.tsx

@@ -10,7 +10,10 @@ import LoadMoreButton from './client/LoadMoreButton';
 import { TimespanButtonGroup } from './client/TimespanButton';
 import SongCard from './SongCard';
 import SongCardGroup from './SongCardGroup';
-import { InterSectionAdSlot } from '../../shared/components/client/ads/AdSlots';
+import {
+  InterSectionAdSlot,
+  SongCardAdSlot,
+} from '../../shared/components/client/ads/AdSlots';
 import {
   Carousel,
   CarouselContent,
@@ -76,9 +79,13 @@ export const HomePageComponent = () => {
       </div>
       <div className='h-6' />
       <SongCardGroup data-test='recent-songs'>
-        {recentSongs.map((song, i) => (
-          <SongCard key={i} song={song} />
-        ))}
+        {recentSongs.map((song, i) =>
+          song === undefined ? (
+            <SongCardAdSlot key={i} />
+          ) : (
+            <SongCard key={i} song={song} />
+          ),
+        )}
       </SongCardGroup>
       <div className='flex flex-col w-full justify-between items-center mt-4'>
         {hasMore ? (

web/src/modules/browse/components/client/context/RecentSongs.context.tsx

@@ -45,28 +45,40 @@ export function RecentSongsProvider({
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [endpoint, setEndpoint] = useState<string>('/song-browser/recent');
 
+  const adCount = 1;
+  const pageSize = 12;
+
   const fetchRecentSongs = useCallback(
     async function () {
       setLoading(true);
 
       try {
+        const fetchCount = pageSize - adCount;
+
         const response = await axiosInstance.get<SongPreviewDtoType[]>(
           endpoint,
           {
             params: {
               page,
-              limit: 12, // TODO: fix constants
+              limit: fetchCount, // TODO: fix constants
               order: false,
             },
           },
         );
 
+        const newSongs: Array<SongPreviewDtoType | undefined> = response.data;
+
+        for (let i = 0; i < adCount; i++) {
+          const adPosition = Math.floor(Math.random() * newSongs.length) + 1;
+          newSongs.splice(adPosition, 0, undefined);
+        }
+
         setRecentSongs((prevSongs) => [
           ...prevSongs.filter((song) => song !== null),
           ...response.data,
         ]);
 
-        if (response.data.length < 12) {
+        if (response.data.length < fetchCount) {
           setHasMore(false);
         }
       } catch (error) {

web/src/modules/shared/components/client/ads/AdSlots.tsx

@@ -38,13 +38,15 @@ const AdTemplate = ({
   adSlot,
   adFormat = 'auto',
   fullWidthResponsive = 'true',
+  adLayoutKey,
   hiddenClassName = 'hidden',
   showCloseButton = true,
 }: {
   className: string;
   adSlot: string;
   adFormat: string;
   fullWidthResponsive: string;
+  adLayoutKey?: string;
   hiddenClassName?: string;
   showCloseButton?: boolean;
 }) => {
@@ -86,6 +88,7 @@ const AdTemplate = ({
             data-ad-client={pubId}
             data-ad-slot={adSlot}
             data-ad-format={adFormat}
+            data-ad-layout-key={adLayoutKey}
             data-full-width-responsive={fullWidthResponsive}
           ></ins>
           {showCloseButton && <HideAdButton setIsHidden={setIsHidden} />}
@@ -159,3 +162,18 @@ export const MultiplexAdSlot = ({ className }: { className?: string }) => {
     />
   );
 };
+
+export const SongCardAdSlot = ({ className }: { className?: string }) => {
+  return (
+    <AdTemplate
+      className={cn(
+        'relative rounded-xl bg-zinc-800 p-2 my-8 h-full w-full min-w-64 text-sm text-zinc-400',
+        className,
+      )}
+      adSlot='1737918264'
+      adFormat='fluid'
+      adLayoutKey='-7o+ez-1j-38+bu'
+      showCloseButton={false}
+    />
+  );
+};