libreria-astro-lefebvre 0.1.63 → 0.1.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "libreria-astro-lefebvre",
-  "version": "0.1.63",
+  "version": "0.1.64",
   "description": "Librería de componentes Astro, React y Vue para Lefebvre",
   "author": "Equipo web desarrollo Lefebvre",
   "type": "module",

package/src/carbins/Contenido_2025_Malaga.ts

@@ -3,11 +3,11 @@ import type { ComponentMetadata } from '../interfaces/types';
 export const metadata: ComponentMetadata = {
   component_name: 'Contenido_2025_Malaga',
   category: 'Contenido de Imagen',
-  name: 'Sección hiper-configurable con texto, imagen lateral, botón y modal LF2 2025',
-  description: 'Sección de contenido altamente configurable con más de 20 campos: título pequeño tipo badge, subtítulo h2 con tamaño conmutable (56px/46px/40px), descripción HTML, imagen lateral opcional (posicionable a izquierda o derecha), botón primario y botón secundario que abre un modal con formulario LF2 inyectado dinámicamente. Ofrece controles finos de alineación vertical, tamaño de fuente del texto, padding horizontal, ancho del contenedor (full/3-5/7xl) y variantes de orientación icono-texto',
+  name: 'Sección hiper-configurable con texto, imagen o vídeo lateral, botón y modal LF2 2025',
+  description: 'Sección de contenido altamente configurable con más de 20 campos: título pequeño tipo badge, subtítulo h2 con tamaño conmutable (56px/46px/40px), descripción HTML, imagen o vídeo MP4 lateral opcional (posicionable a izquierda o derecha, mutuamente excluyentes: si se rellena el vídeo, la imagen se ignora), botón primario y botón secundario que abre un modal con formulario LF2 inyectado dinámicamente. Ofrece controles finos de alineación vertical, tamaño de fuente del texto, padding horizontal, ancho del contenedor (full/3-5/7xl) y variantes de orientación icono-texto',
   framework: 'Astro',
   priority: 1,
-  tags: ['contenido', 'imagen', 'icono', 'texto', 'modal', 'formulario', 'lf2', 'cta', 'boton'],
+  tags: ['contenido', 'imagen', 'video', 'icono', 'texto', 'modal', 'formulario', 'lf2', 'cta', 'boton'],
    fields: [
     {
       name: 'showIco',
@@ -134,7 +134,7 @@ export const metadata: ComponentMetadata = {
     {
       name: 'showImage',
       type: 'boolean',
-      help: 'Si está activado, se renderiza el layout con imagen (texto + imagen). Si está desactivado, se renderiza un layout alternativo solo con texto (con más padding)',
+      help: 'Si está activado, se renderiza el layout con media lateral (texto + imagen o vídeo). Si está desactivado, se renderiza un layout alternativo solo con texto (con más padding)',
       label: 'Mostrar imagen',
       mandatory: false,
       options: ['false', 'true'],
@@ -144,11 +144,23 @@ export const metadata: ComponentMetadata = {
     {
       name: 'image',
       type: 'image',
-      help: 'URL de la imagen principal. Solo se renderiza si "Mostrar imagen" está activado',
+      help: 'URL de la imagen principal. Solo se renderiza si "Mostrar imagen" está activado. Mutuamente exclusivo con el vídeo: si se rellena "URL del video", este campo se ignora',
       label: 'Src de la imagen',
       mandatory: false,
+      exclusive_group: 'media',
+      exclusive_group_label: 'Contenido multimedia',
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-4-3.png',
     },
+    {
+      name: 'iframeSrc',
+      type: 'video',
+      help: 'URL del vídeo MP4 lateral (se reproduce con autoplay, muted y loop). Solo se renderiza si "Mostrar imagen" está activado. Tiene prioridad sobre la imagen: si se rellena, la imagen se ignora',
+      label: 'URL del video',
+      mandatory: false,
+      exclusive_group: 'media',
+      exclusive_group_label: 'Contenido multimedia',
+      example_value: 'https://player.vimeo.com/video/1087114916?controls=0&autoplay=1&muted=1&loop=1&badge=0&autopause=0&player_id=0&app_id=58479'
+    },
     {
       name: 'loading',
       type: 'select',

package/src/components/Astro/Contenido_2025_Malaga.astro

@@ -6,6 +6,7 @@ const {
     subtitle,
     description,
     image,
+    iframeSrc,
     orientation = 'left',
     width = 'full',
     flexOrientation = 'row',
@@ -43,8 +44,10 @@ const imageSkyscraper = crops['skyscraper'] || ''; // Disponible para uso en el
 // const baseUrl = getCropByName(image, 'base');
 // const skyUrl = getCropByName(image, 'skyscraper', { fallback: baseUrl });
 
-// Fallback: si solo viene una URL directa, usar extractImageUrl
-const imageUrl = imageBase || extractImageUrl(image);
+// Fallback: si solo viene una URL directa, usar extractImageUrl.
+// Si no hay imagen configurada, se muestra una imagen por defecto
+const DEFAULT_IMAGE = 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-4-3.png';
+const imageUrl = imageBase || extractImageUrl(image) || DEFAULT_IMAGE;
 ---
 
 <section class="w-full flex items-center justify-center">
@@ -122,7 +125,13 @@ const imageUrl = imageBase || extractImageUrl(image);
                 )}
                 
                 <div class={`w-full md:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'} aspect-auto`}>
-                    <img src={imageUrl} alt={title} width="600" height="450" class="md:max-w-xl w-full md:w-[75%] h-auto object-cover rounded-lg m-auto" loading={loading} />
+                    {iframeSrc ? (
+                        <video autoplay loop muted playsinline preload="metadata" width="600" height="450" class="md:max-w-xl w-full md:w-[75%] h-auto object-cover rounded-lg m-auto">
+                            <source src={iframeSrc} type="video/mp4" />
+                        </video>
+                    ) : (
+                        <img src={imageUrl} alt={title} width="600" height="450" class="md:max-w-xl w-full md:w-[75%] h-auto object-cover rounded-lg m-auto" loading={loading} />
+                    )}
                 </div>
                 
                 {/* <div class={`w-full lg:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'} aspect-square`}>