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_it: annuncio.titolo_it,
})}
videos={annuncio.url_video || undefined}
/>
))}
</div>

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

@ -36,6 +36,7 @@ type CardAnnuncioProps = {
tipo: string | null;
stato: string | null;
className?: string;
videos?: string[] | undefined;
};
export const CardAnnuncio = ({
@ -52,13 +53,14 @@ export const CardAnnuncio = ({
tipo,
stato,
className,
videos,
}: CardAnnuncioProps) => {
const { t } = useTranslation();
return (
<div
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,
)}
id={`card-annuncio-${id}`}
@ -68,11 +70,11 @@ export const CardAnnuncio = ({
//target="_blank"
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" && (
<div>
<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
</div>
</div>
@ -86,7 +88,7 @@ export const CardAnnuncio = ({
<ImageFlbk
alt={t.card.alt_immagine}
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}
priority={idx === 0}
@ -95,6 +97,29 @@ export const CardAnnuncio = ({
/>
</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>
<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" />
</Head>
<main className="w-full px-2 pb-6 md:px-8">
<header className="mx-auto max-w-6xl py-5">
<div className="bg-primary/10 text-primary inline-block rounded-lg px-3 py-1 text-sm">
{t.annunci.titolo}
</div>
</header>
<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-md px-3 py-1 text-sm">
{t.annunci.titolo}
</div>
<Ricerca />
<AccordionComp
@ -132,7 +130,7 @@ const RicercaFilters = () => {
);
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 gap-2 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>
<meta content={t.heads.main_description} name="description" />
</Head>
<main className="mx-auto w-full max-w-6xl 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">
<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-md px-3 py-1 text-sm">
{t.chi_siamo.title}
</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">
<div className="mx-auto mt-5 flex-1 sm:w-9/12 md:mt-0 md:w-auto">
<Image

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

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

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

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

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

@ -42,8 +42,8 @@ const Prezzi: NextPage = () => {
<title>{t.heads.prezzi_titolo}</title>
<meta content={t.heads.prezzi_description} name="description" />
</Head>
<section className="mx-auto max-w-6xl px-2 py-5 md:px-8">
<div className="bg-primary/10 text-primary inline-block rounded-lg px-3 py-1 text-sm">
<section className="mx-auto max-w-7xl px-2 py-5 md:px-8">
<div className="bg-primary/10 text-primary inline-block rounded-md px-3 py-1 text-sm">
{t.prezzi_titolo}
</div>
<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>
<meta content={t.proprietari.description} name="description" />
</Head>
<main className="mx-auto w-full max-w-6xl 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">
<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-md px-3 py-1 text-sm">
{t.proprietari.titolo}
</div>
<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",
"modificato_il",
"stato",
"url_video",
"lon_secondario",
"lat_secondario",
])
@ -228,6 +229,7 @@ export type AnnuncioRicerca = Pick<
| "url_immagini"
| "modificato_il"
| "stato"
| "url_video"
>;
export const getCursor_AnnunciHandler = async ({
@ -263,6 +265,7 @@ export const getCursor_AnnunciHandler = async ({
"url_immagini",
"modificato_il",
"stato",
"url_video",
])
.where("web", "=", true)