feat: add video support to AnnunciGrid and CardAnnuncio components

apps/infoalloggi/src/components/annunci_grid.tsx

@@ -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>

apps/infoalloggi/src/components/annuncio_card.tsx

@@ -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

apps/infoalloggi/src/pages/annunci.tsx

@@ -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">
+			<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}
 				</div>
-				</header>
 
 				<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">

apps/infoalloggi/src/pages/chi-siamo.tsx

@@ -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">
+			<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}
 				</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

apps/infoalloggi/src/pages/contatti.tsx

@@ -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">
+			<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}
 				</div>
 

apps/infoalloggi/src/pages/guida.tsx

@@ -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">
+			<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}
 				</div>
 

apps/infoalloggi/src/pages/prezzi.tsx

@@ -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">
+			<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}
 				</div>
 				<div className="mt-5 space-y-14">

apps/infoalloggi/src/pages/proprietari.tsx

@@ -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">
+			<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}
 				</div>
 				<div className="mx-auto w-full space-y-5 sm:space-y-14">

apps/infoalloggi/src/server/controllers/annunci.controller.ts

@@ -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)