feat: implement CacheKey for image caching and update image sources across components

apps/infoalloggi/next.config.mjs

@@ -33,7 +33,7 @@ const nextConfig = {
 		locales: ["it", "en"],
 	},
 	images: {
-		minimumCacheTTL: 86400, // 1 day in seconds
+		minimumCacheTTL: 7200,
 		remotePatterns: [
 			{
 				hostname: "*.googleusercontent.com",

apps/infoalloggi/src/components/annunci_map.tsx

@@ -16,6 +16,7 @@ import { useTranslation } from "~/providers/I18nProvider";
 import { useRicerca } from "~/providers/RicercaProvider";
 import type { AnnuncioRicercaWPosition } from "~/server/controllers/annunci.controller";
 import { api } from "~/utils/api";
+import { CacheKey } from "~/utils/imageCache";
 
 const MapComp = dynamic(() => import("~/components/map/Map"), {
 	ssr: false,
@@ -123,7 +124,7 @@ const SelectedComp = memo(
 										alt="a"
 										className="size-24 rounded-md object-cover sm:size-40"
 										height={500}
-										src={selected.url_immagini[0]}
+										src={`${selected.url_immagini[0]}?${CacheKey}`}
 										width={500}
 									/>
 								) : (

apps/infoalloggi/src/components/annuncio_card.tsx

@@ -20,6 +20,7 @@ import {
 import { camereTesti, handleConsegna } from "~/lib/annuncio_details";
 import { cn, formatCurrency } from "~/lib/utils";
 import { useTranslation } from "~/providers/I18nProvider";
+import { CacheKey } from "~/utils/imageCache";
 import { VideoPlayer } from "./videoPlayer";
 
 type CardAnnuncioProps = {
@@ -92,7 +93,7 @@ export const CardAnnuncio = ({
 										}
 										height={400}
 										priority={idx === 0}
-										src={img}
+										src={`${img}?${CacheKey}`}
 										width={800}
 									/>
 								</CarouselItem>
@@ -115,7 +116,7 @@ export const CardAnnuncio = ({
 											className="h-56"
 											coverImage={immagini?.[0] ? immagini[0] : ""}
 											key={`videoplayer-${idx}`}
-											videoSrc={video}
+											videoSrc={`${video}?${CacheKey}`}
 										/>
 									</CarouselItem>
 								);
@@ -268,7 +269,7 @@ export const CarouselAnnuncio = ({
 										height={400}
 										onClick={() => handleOpenModal(idx)}
 										priority={idx === 0}
-										src={img}
+										src={`${img}?${CacheKey}`}
 										width={800}
 									/>
 									<Maximize2
@@ -296,7 +297,7 @@ export const CarouselAnnuncio = ({
 											className="h-72"
 											coverImage={immagini?.[0] ? immagini[0] : ""}
 											key={`videoplayer-${idx}-${openModal}`}
-											videoSrc={video}
+											videoSrc={`${video}?${CacheKey}`}
 										/>
 
 										<Maximize2
@@ -337,7 +338,7 @@ export const CarouselAnnuncio = ({
 										alt={`carousel-img-${idx}`}
 										className="mx-auto h-[90vh] w-full rounded-md object-contain sm:w-[80vw]"
 										height={1080}
-										src={img}
+										src={`${img}?${CacheKey}`}
 										width={1920}
 									/>
 								</CarouselItem>
@@ -355,7 +356,7 @@ export const CarouselAnnuncio = ({
 										<VideoPlayer
 											className="absolute mx-auto h-[90vh] w-full max-w-fit rounded-md object-contain"
 											coverImage={immagini?.[0] ? immagini[0] : ""}
-											videoSrc={video}
+											videoSrc={`${video}?${CacheKey}`}
 										/>
 									</CarouselItem>
 								);

apps/infoalloggi/src/components/servizio/annuncio_card.tsx

@@ -29,6 +29,7 @@ import { cn, formatCurrency } from "~/lib/utils";
 import { useTranslation } from "~/providers/I18nProvider";
 import { useServizioAnnuncio } from "~/providers/ServizioProvider";
 import type { Annunci } from "~/schemas/public/Annunci";
+import { CacheKey } from "~/utils/imageCache";
 
 export const AnnuncioCard = ({ className }: { className?: string }) => {
 	const { data } = useServizioAnnuncio();
@@ -84,7 +85,7 @@ export const BasicAnnuncioCard = ({
 						priority
 						src={
 							(data.url_immagini &&
-								`/go-api/images/get/${data.url_immagini[0]}`) ||
+								`/go-api/images/get/${data.url_immagini[0]}?${CacheKey}`) ||
 							"/fallback-image.png"
 						}
 						width={1920}
@@ -199,7 +200,7 @@ const AnnuncioDettaglio = ({
 											className={"h-80 w-full object-contain sm:h-[35rem]"}
 											height={200}
 											priority={idx === 0}
-											src={`/go-api/images/get/${img}`}
+											src={`/go-api/images/get/${img}?${CacheKey}`}
 											width={400}
 										/>
 									</CarouselItem>

apps/infoalloggi/src/components/videoPlayer.tsx

@@ -5,6 +5,7 @@ import { Play } from "lucide-react";
 import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "~/lib/utils";
+import { CacheKey } from "~/utils/imageCache";
 
 interface VideoPlayerProps {
 	coverImage: string;
@@ -62,7 +63,7 @@ export function VideoPlayer({
 							className="object-cover"
 							fill
 							priority
-							src={coverImage || "/fallback-video.png"}
+							src={`${coverImage}?${CacheKey}` || "/fallback-video.png"}
 						/>
 						<div className="absolute inset-0 flex items-center justify-center bg-black/20">
 							<motion.div
@@ -97,7 +98,7 @@ export function VideoPlayer({
 							disableRemotePlayback
 							muted
 							onEnded={() => setIsPlaying(false)}
-							src={videoSrc}
+							src={`${videoSrc}?${CacheKey}`}
 						>
 							Your browser does not support the video tag.
 						</video>

apps/infoalloggi/src/pages/annuncio/[cod].tsx

@@ -61,6 +61,7 @@ import type { Annunci } from "~/schemas/public/Annunci";
 import TipologiaPosizioneEnum from "~/schemas/public/TipologiaPosizioneEnum";
 import { generateSSGHelper } from "~/server/utils/ssgHelper";
 import { api } from "~/utils/api";
+import { CacheKey } from "~/utils/imageCache";
 
 type AnnuncioProps = {
 	cod: string;
@@ -643,7 +644,7 @@ const AnnuncioFooter = ({
 							className="h-96 max-w-96"
 							coverImage={first_image}
 							key={`videoplayer-${video}`}
-							videoSrc={video}
+							videoSrc={`${video}?${CacheKey}`}
 						/>
 					);
 				})}

apps/infoalloggi/src/pages/test.tsx

@@ -1,4 +1,6 @@
 import type { NextPage } from "next";
+
+/*
 import { useState } from "react";
 import { useDebounce } from "react-use";
 import z from "zod";
@@ -6,6 +8,7 @@ import Input from "~/components/custom_ui/input";
 import { LoadingPage } from "~/components/loading";
 import { Button } from "~/components/ui/button";
 
+
 type NominatimResponse = z.infer<typeof responseSchema>;
 export const responseSchema = z.object({
 	type: z.string(),
@@ -141,3 +144,9 @@ const Test: NextPage = () => {
 	);
 };
 export default Test;
+*/
+
+const Test: NextPage = () => {
+	return <div>Test</div>;
+};
+export default Test;

apps/infoalloggi/src/utils/imageCache.ts

@@ -0,0 +1 @@
+export const CacheKey = `cachekey=${Math.random().toString(36).slice(2, 8)}`;