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

feat: add video support to AnnunciGrid and CardAnnuncio components

Browse source
This commit is contained in:
Marco Pedone 2025-09-01 17:31:19 +02:00
parent 1426f0efef
commit 733452832a
9 changed files with 49 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/infoalloggi/src/components/annunci_grid.tsx
View file

@ -27,6 +27,7 @@ export const AnnunciGrid = ({ pagedata }: { pagedata: AnnuncioRicerca[] }) => {
titolo_en: annuncio.titolo_en, titolo_en: annuncio.titolo_en,
titolo_it: annuncio.titolo_it, titolo_it: annuncio.titolo_it,
})} })}
videos={annuncio.url_video || undefined}
/> />
))} ))}
</div> </div>

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

@ -36,6 +36,7 @@ type CardAnnuncioProps = {
tipo: string | null; tipo: string | null;
stato: string | null; stato: string | null;
className?: string; className?: string;
videos?: string[] | undefined;
}; };
export const CardAnnuncio = ({ export const CardAnnuncio = ({
@ -52,13 +53,14 @@ export const CardAnnuncio = ({
tipo, tipo,
stato, stato,
className, className,
videos,
}: CardAnnuncioProps) => { }: CardAnnuncioProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div <div
className={cn( className={cn(
"h-[464px] rounded-xl bg-white shadow-sm shadow-neutral-100 outline outline-neutral-200 hover:shadow-md hover:outline-neutral-300", "h-[464px] rounded-md bg-white shadow-sm shadow-neutral-100 outline outline-neutral-200 hover:shadow-md hover:outline-neutral-300",
className, className,
)} )}
id={`card-annuncio-${id}`} id={`card-annuncio-${id}`}
@ -68,11 +70,11 @@ export const CardAnnuncio = ({
//target="_blank" //target="_blank"
href={`/annuncio/${codice}`} //duration-700 ease-in-out animate-in fade-in href={`/annuncio/${codice}`} //duration-700 ease-in-out animate-in fade-in
> >
<div className="group relative rounded-xl text-clip"> <div className="group relative rounded-md text-clip">
{stato === "Trattativa" && ( {stato === "Trattativa" && (
<div> <div>
<div className="absolute z-20 h-56 w-full"> <div className="absolute z-20 h-56 w-full">
<div className="absolute bottom-0 w-full touch-none bg-violet-500 text-center text-lg text-white select-none"> <div className="absolute bottom-0 w-full touch-none bg-violet-500 rounded-b-md text-center text-lg text-white select-none">
Annuncio in Trattativa Annuncio in Trattativa
</div> </div>
</div> </div>
@ -86,7 +88,7 @@ export const CardAnnuncio = ({
<ImageFlbk <ImageFlbk
alt={t.card.alt_immagine} alt={t.card.alt_immagine}
className={ className={
"h-56 w-full rounded-xl object-cover outline outline-neutral-200" "h-56 w-full rounded-md object-cover outline outline-neutral-200"
} }
height={400} height={400}
priority={idx === 0} priority={idx === 0}
@ -95,6 +97,29 @@ export const CardAnnuncio = ({
/> />
</CarouselItem> </CarouselItem>
))} ))}
{videos?.map((video, idx) => {
if (!video) return null;
if (video.includes("youtu")) {
return null;
}
return (
<CarouselItem
className={cn("group relative")}
key={`videoplayer-${video}`}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
<VideoPlayer
className="h-56 "
coverImage={immagini?.[0] ? immagini[0] : ""}
key={`videoplayer-${idx}`}
videoSrc={video}
/>
</CarouselItem>
);
})}
</CarouselContent> </CarouselContent>
<div <div

12
apps/infoalloggi/src/pages/annunci.tsx
View file

@ -60,12 +60,10 @@ const Annunci = ({ options }: AnnunciPageProps) => {
<meta content={t.heads.annunci_description} name="description" /> <meta content={t.heads.annunci_description} name="description" />
</Head> </Head>
<main className="w-full px-2 pb-6 md:px-8"> <main className="mx-auto w-full max-w-7xl space-y-5 px-2 py-5 md:px-8">
<header className="mx-auto max-w-6xl py-5"> <div className="bg-primary/10 text-primary inline-block rounded-md px-3 py-1 text-sm">
<div className="bg-primary/10 text-primary inline-block rounded-lg px-3 py-1 text-sm"> {t.annunci.titolo}
{t.annunci.titolo} </div>
</div>
</header>
<Ricerca /> <Ricerca />
<AccordionComp <AccordionComp
@ -132,7 +130,7 @@ const RicercaFilters = () => {
); );
return ( return (
<div className="mx-auto w-full max-w-6xl space-y-5"> <div className="mx-auto w-full max-w-7xl space-y-5">
<div className="flex w-full flex-col-reverse gap-4 sm:flex-row sm:gap-2"> <div className="flex w-full flex-col-reverse gap-4 sm:flex-row sm:gap-2">
<div className="flex w-full gap-2 sm:w-auto"> <div className="flex w-full gap-2 sm:w-auto">
<div className="flex w-full sm:w-auto"> <div className="flex w-full sm:w-auto">

6
apps/infoalloggi/src/pages/chi-siamo.tsx
View file

@ -11,11 +11,11 @@ const ChiSiamo: NextPage = () => {
<title>{t.heads.chi_siamo_titolo}</title> <title>{t.heads.chi_siamo_titolo}</title>
<meta content={t.heads.main_description} name="description" /> <meta content={t.heads.main_description} name="description" />
</Head> </Head>
<main className="mx-auto w-full max-w-6xl space-y-5 px-2 py-5 md:px-8"> <main className="mx-auto w-full max-w-7xl space-y-5 px-2 py-5 md:px-8">
<div className="bg-primary/10 text-primary inline-block rounded-lg px-3 py-1 text-sm"> <div className="bg-primary/10 text-primary inline-block rounded-md px-3 py-1 text-sm">
{t.chi_siamo.title} {t.chi_siamo.title}
</div> </div>
<div className="mx-auto w-full space-y-5 sm:space-y-14"> <div className="mx-auto w-full space-y-5 sm:space-y-14 max-w-6xl">
<section className="relative mx-auto flex max-w-6xl flex-col items-center justify-between gap-8 px-4 py-4 sm:flex-row sm:gap-20 md:px-8"> <section className="relative mx-auto flex max-w-6xl flex-col items-center justify-between gap-8 px-4 py-4 sm:flex-row sm:gap-20 md:px-8">
<div className="mx-auto mt-5 flex-1 sm:w-9/12 md:mt-0 md:w-auto"> <div className="mx-auto mt-5 flex-1 sm:w-9/12 md:mt-0 md:w-auto">
<Image <Image

4
apps/infoalloggi/src/pages/contatti.tsx
View file

@ -67,8 +67,8 @@ const Contatto: NextPage = () => {
<title>{t.heads.contatti_titolo}</title> <title>{t.heads.contatti_titolo}</title>
<meta content={t.heads.main_description} name="description" /> <meta content={t.heads.main_description} name="description" />
</Head> </Head>
<main className="mx-auto w-full max-w-6xl px-2 py-5 md:px-8"> <main className="mx-auto w-full max-w-7xl px-2 py-5 md:px-8">
<div className="bg-primary/10 text-primary inline-block rounded-lg px-3 py-1 text-sm"> <div className="bg-primary/10 text-primary inline-block rounded-md px-3 py-1 text-sm">
{t.contatti} {t.contatti}
</div> </div>

4
apps/infoalloggi/src/pages/guida.tsx
View file

@ -19,8 +19,8 @@ const Guida: NextPage = () => {
<title>{t.heads.guida_titolo}</title> <title>{t.heads.guida_titolo}</title>
<meta content={t.heads.main_description} name="description" /> <meta content={t.heads.main_description} name="description" />
</Head> </Head>
<main className="mx-auto w-full max-w-6xl px-2 py-5 md:px-8"> <main className="mx-auto w-full max-w-7xl px-2 py-5 md:px-8">
<div className="bg-primary/10 text-primary inline-block rounded-lg px-3 py-1 text-sm"> <div className="bg-primary/10 text-primary inline-block rounded-md px-3 py-1 text-sm">
{t.guida} {t.guida}
</div> </div>

4
apps/infoalloggi/src/pages/prezzi.tsx
View file

@ -42,8 +42,8 @@ const Prezzi: NextPage = () => {
<title>{t.heads.prezzi_titolo}</title> <title>{t.heads.prezzi_titolo}</title>
<meta content={t.heads.prezzi_description} name="description" /> <meta content={t.heads.prezzi_description} name="description" />
</Head> </Head>
<section className="mx-auto max-w-6xl px-2 py-5 md:px-8"> <section className="mx-auto max-w-7xl px-2 py-5 md:px-8">
<div className="bg-primary/10 text-primary inline-block rounded-lg px-3 py-1 text-sm"> <div className="bg-primary/10 text-primary inline-block rounded-md px-3 py-1 text-sm">
{t.prezzi_titolo} {t.prezzi_titolo}
</div> </div>
<div className="mt-5 space-y-14"> <div className="mt-5 space-y-14">

4
apps/infoalloggi/src/pages/proprietari.tsx
View file

@ -16,8 +16,8 @@ const Proprietari: NextPage = () => {
<title>{t.proprietari.head}</title> <title>{t.proprietari.head}</title>
<meta content={t.proprietari.description} name="description" /> <meta content={t.proprietari.description} name="description" />
</Head> </Head>
<main className="mx-auto w-full max-w-6xl space-y-5 px-2 py-5 md:px-8"> <main className="mx-auto w-full max-w-7xl space-y-5 px-2 py-5 md:px-8">
<div className="bg-primary/10 text-primary inline-block rounded-lg px-3 py-1 text-sm"> <div className="bg-primary/10 text-primary inline-block rounded-md px-3 py-1 text-sm">
{t.proprietari.titolo} {t.proprietari.titolo}
</div> </div>
<div className="mx-auto w-full space-y-5 sm:space-y-14"> <div className="mx-auto w-full space-y-5 sm:space-y-14">

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

@ -175,6 +175,7 @@ export const get_AnnunciPositionsHandler = async ({
"url_immagini", "url_immagini",
"modificato_il", "modificato_il",
"stato", "stato",
"url_video",
"lon_secondario", "lon_secondario",
"lat_secondario", "lat_secondario",
]) ])
@ -228,6 +229,7 @@ export type AnnuncioRicerca = Pick<
| "url_immagini" | "url_immagini"
| "modificato_il" | "modificato_il"
| "stato" | "stato"
| "url_video"
>; >;
export const getCursor_AnnunciHandler = async ({ export const getCursor_AnnunciHandler = async ({
@ -263,6 +265,7 @@ export const getCursor_AnnunciHandler = async ({
"url_immagini", "url_immagini",
"modificato_il", "modificato_il",
"stato", "stato",
"url_video",
]) ])
.where("web", "=", true) .where("web", "=", true)