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"
className="size-24 rounded-md object-cover sm:size-40"
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}
/>
) : (

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

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

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

@ -58,7 +58,7 @@ export const BasicAnnuncioCard = ({
priority
src={
(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"
}
width={1920}

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

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

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

@ -630,11 +630,10 @@ const AnnuncioFooter = ({
{videos.map((video) => {
return (
<VideoPlayer
cacheKey={updated_at?.toString() || new Date().toString()}
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
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 {
const annuncio = await db
.selectFrom("annunci")
.select((_eb) => ["titolo_it", "desc_it", withImages()])
.select((_eb) => [
"titolo_it",
"desc_it",
withImages(),
"media_updated_at",
])
.where("annunci.web", "=", true)
.where("codice", "=", cod)
.executeTakeFirst();
@ -110,7 +115,7 @@ export const getAnnunciMetaByCod = async ({ cod }: { cod: string }) => {
}
const ogImage =
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`;
return {