Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

refactor: update image and video source URLs to include cache keys for better cache management

Browse source
This commit is contained in:
Marco Pedone 2025-11-24 18:03:13 +01:00
parent e518b94a7a
commit 2e3eb7f4d1
6 changed files with 25 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/infoalloggi/src/components/annunci_map.tsx
View file

@ -123,7 +123,7 @@ const SelectedComp = memo(
alt="a" alt="a"
className="size-24 rounded-md object-cover sm:size-40" className="size-24 rounded-md object-cover sm:size-40"
height={500} height={500}
src={`/storage-api/get/${selected.images[0].img}?image=true&${selected.media_updated_at?.toString() || new Date().toString()}`} src={`/storage-api/get/${selected.images[0].img}?image=true&cachekey=${selected?.toString()}`}
width={500} width={500}
/> />
) : ( ) : (

29
apps/infoalloggi/src/components/annuncio_card.tsx
View file

@ -217,14 +217,14 @@ export const CardAnnuncio = ({
<CarouselItem key={`${img.img}key`}> <CarouselItem key={`${img.img}key`}>
<ImageFlbk <ImageFlbk
alt={t.card.alt_immagine} alt={t.card.alt_immagine}
blurDataURL={`/storage-api/get/${img.thumb}?image=true`} blurDataURL={`/storage-api/get/${img.thumb}?image=true&cachekey=${media_updated_at?.toString()}`}
className={cn( className={cn(
"h-64 w-full bg-[#e6e9ec] object-cover", "h-64 w-full bg-[#e6e9ec] object-cover",
(stato === "Trattativa" || homepage) && "rounded-[7px]", (stato === "Trattativa" || homepage) && "rounded-[7px]",
)} )}
height={1080} height={1080}
priority={idx === 0} priority={idx === 0}
src={`/storage-api/get/${img.img}?image=true`} src={`/storage-api/get/${img.img}?image=true&cachekey=${media_updated_at?.toString()}`}
width={1920} width={1920}
/> />
</CarouselItem> </CarouselItem>
@ -240,13 +240,10 @@ export const CardAnnuncio = ({
}} }}
> >
<VideoPlayer <VideoPlayer
cacheKey={
media_updated_at?.toString() || new Date().toString()
}
className="h-64 object-cover" className="h-64 object-cover"
coverImage={`/storage-api/get/${video.thumb}?image=true`} coverImage={`/storage-api/get/${video.thumb}?image=true&cachekey=${media_updated_at?.toString()}`}
key={`videoplayer-${video}`} key={`videoplayer-${video}`}
videoSrc={`/storage-api/get/${video.video}?video=true`} videoSrc={`/storage-api/get/${video.video}?video=true&cachekey=${media_updated_at?.toString()}`}
/> />
</CarouselItem> </CarouselItem>
); );
@ -278,11 +275,11 @@ export const CardAnnuncio = ({
{images && images.length > 0 && images[0] ? ( {images && images.length > 0 && images[0] ? (
<ImageFlbk <ImageFlbk
alt={t.card.alt_immagine} alt={t.card.alt_immagine}
blurDataURL={`/storage-api/get/${images[0].thumb}?image=true`} blurDataURL={`/storage-api/get/${images[0].thumb}?image=true&cachekey=${media_updated_at?.toString()}`}
className={"h-64 w-full bg-[#e6e9ec] object-cover"} className={"h-64 w-full bg-[#e6e9ec] object-cover"}
height={1080} height={1080}
priority={true} priority={true}
src={`/storage-api/get/${images[0].img}?image=true`} src={`/storage-api/get/${images[0].img}?image=true&cachekey=${media_updated_at?.toString()}`}
width={1920} width={1920}
/> />
) : ( ) : (
@ -423,7 +420,7 @@ export const CarouselAnnuncio = ({
height={400} height={400}
onClick={() => handleOpenModal(idx)} onClick={() => handleOpenModal(idx)}
priority={idx === 0} priority={idx === 0}
src={`/storage-api/get/${img.img}?image=true&${updated_at?.toString() || new Date().toString()}`} src={`/storage-api/get/${img.img}?image=true&cachekey=${updated_at?.toString()}`}
width={800} width={800}
/> />
<Maximize2 <Maximize2
@ -444,11 +441,10 @@ export const CarouselAnnuncio = ({
key={`videoplayer-${video.video}`} key={`videoplayer-${video.video}`}
> >
<VideoPlayer <VideoPlayer
cacheKey={updated_at?.toString() || new Date().toString()}
className="aspect-square max-h-92 object-cover sm:max-h-80 xl:max-h-[25rem]" className="aspect-square max-h-92 object-cover sm:max-h-80 xl:max-h-[25rem]"
coverImage={`/storage-api/get/${video.thumb}?image=true`} coverImage={`/storage-api/get/${video.thumb}?image=true&cachekey=${updated_at?.toString()}`}
key={`videoplayer-${idx}-${openModal}`} key={`videoplayer-${idx}-${openModal}`}
videoSrc={`/storage-api/get/${video.video}?video=true`} videoSrc={`/storage-api/get/${video.video}?video=true&cachekey=${updated_at?.toString()}`}
/> />
<Maximize2 <Maximize2
@ -489,7 +485,7 @@ export const CarouselAnnuncio = ({
alt={`carousel-img-${idx}`} alt={`carousel-img-${idx}`}
className="mx-auto h-[90vh] w-full rounded-md bg-[#e6e9ec] object-contain sm:w-[80vw]" className="mx-auto h-[90vh] w-full rounded-md bg-[#e6e9ec] object-contain sm:w-[80vw]"
height={1080} height={1080}
src={`/storage-api/get/${img.img}?image=true&${updated_at?.toString() || new Date().toString()}`} src={`/storage-api/get/${img.img}?image=true&cachekey=${updated_at?.toString()}`}
width={1920} width={1920}
/> />
</CarouselItem> </CarouselItem>
@ -501,10 +497,9 @@ export const CarouselAnnuncio = ({
key={`carousel-videoplayer-${video.video}`} key={`carousel-videoplayer-${video.video}`}
> >
<VideoPlayer <VideoPlayer
cacheKey={updated_at?.toString() || new Date().toString()}
className="absolute mx-auto h-[90vh] w-full max-w-fit rounded-md object-contain" className="absolute mx-auto h-[90vh] w-full max-w-fit rounded-md object-contain"
coverImage={`/storage-api/get/${video.thumb}?image=true`} coverImage={`/storage-api/get/${video.thumb}?image=true&cachekey=${updated_at?.toString()}`}
videoSrc={`/storage-api/get/${video.video}?video=true`} videoSrc={`/storage-api/get/${video.video}?video=true&cachekey=${updated_at?.toString()}`}
/> />
</CarouselItem> </CarouselItem>
); );

2
apps/infoalloggi/src/components/servizio/annuncio_card.tsx
View file

@ -58,7 +58,7 @@ export const BasicAnnuncioCard = ({
priority priority
src={ src={
(data?.images[0] && (data?.images[0] &&
`/storage-api/get/${data.images[0].img}?image=true&${data.media_updated_at?.toString() || new Date().toISOString()}`) || `/storage-api/get/${data.images[0].img}?image=true&cachekey=${data.media_updated_at?.toString()}`) ||
"/fallback-image.png" "/fallback-image.png"
} }
width={1920} width={1920}

6
apps/infoalloggi/src/components/videoPlayer.tsx
View file

@ -12,7 +12,6 @@ interface VideoPlayerProps {
title?: string; title?: string;
aspectRatio?: "square" | "video" | "vertical"; aspectRatio?: "square" | "video" | "vertical";
className?: string; className?: string;
cacheKey: string;
} }
export function VideoPlayer({ export function VideoPlayer({
@ -21,7 +20,6 @@ export function VideoPlayer({
title, title,
aspectRatio = "video", aspectRatio = "video",
className, className,
cacheKey,
}: VideoPlayerProps) { }: VideoPlayerProps) {
const [isPlaying, setIsPlaying] = useState(false); const [isPlaying, setIsPlaying] = useState(false);
const videoRef = useRef<HTMLDivElement>(null); const videoRef = useRef<HTMLDivElement>(null);
@ -64,7 +62,7 @@ export function VideoPlayer({
className="object-cover" className="object-cover"
fill fill
priority priority
src={`${coverImage}?${cacheKey}` || "/fallback-video.png"} src={coverImage || "/fallback-video.png"}
/> />
<div className="absolute inset-0 flex items-center justify-center bg-black/20"> <div className="absolute inset-0 flex items-center justify-center bg-black/20">
<motion.div <motion.div
@ -99,7 +97,7 @@ export function VideoPlayer({
disableRemotePlayback disableRemotePlayback
muted muted
onEnded={() => setIsPlaying(false)} onEnded={() => setIsPlaying(false)}
src={`${videoSrc}?${cacheKey}`} src={videoSrc}
> >
Your browser does not support the video tag. Your browser does not support the video tag.
</video> </video>

5
apps/infoalloggi/src/pages/annuncio/[cod].tsx
View file

@ -630,11 +630,10 @@ const AnnuncioFooter = ({
{videos.map((video) => { {videos.map((video) => {
return ( return (
<VideoPlayer <VideoPlayer
cacheKey={updated_at?.toString() || new Date().toString()}
className="h-96 max-w-96" className="h-96 max-w-96"
coverImage={`/storage-api/get/${video.thumb}?image=true`} coverImage={`/storage-api/get/${video.thumb}?image=true&cachekey=${updated_at?.toString()}`}
key={`videoplayer-${video.video}`} // Cache busting key={`videoplayer-${video.video}`} // Cache busting
videoSrc={`/storage-api/get/${video.video}?video=true`} videoSrc={`/storage-api/get/${video.video}?video=true&cachekey=${updated_at?.toString()}`}
/> />
); );
})} })}

9
apps/infoalloggi/src/server/controllers/annunci.controller.ts
View file

@ -101,7 +101,12 @@ export const getAnnunciMetaByCod = async ({ cod }: { cod: string }) => {
try { try {
const annuncio = await db const annuncio = await db
.selectFrom("annunci") .selectFrom("annunci")
.select((_eb) => ["titolo_it", "desc_it", withImages()]) .select((_eb) => [
"titolo_it",
"desc_it",
withImages(),
"media_updated_at",
])
.where("annunci.web", "=", true) .where("annunci.web", "=", true)
.where("codice", "=", cod) .where("codice", "=", cod)
.executeTakeFirst(); .executeTakeFirst();
@ -110,7 +115,7 @@ export const getAnnunciMetaByCod = async ({ cod }: { cod: string }) => {
} }
const ogImage = const ogImage =
annuncio.images && annuncio.images.length > 0 && annuncio.images[0] annuncio.images && annuncio.images.length > 0 && annuncio.images[0]
? `${env.BASE_URL}/storage-api/get/${annuncio.images[0].img}?image=true` ? `${env.BASE_URL}/storage-api/get/${annuncio.images[0].img}?image=true&cachekey=${annuncio.media_updated_at?.toString()}`
: `${env.BASE_URL}/og.jpg`; : `${env.BASE_URL}/og.jpg`;
return { return {