Media Thumbnail

Descripción

Este componente dinámico muestra contenido multimedia (imágenes o videos) según las propiedades proporcionadas. Soporta imágenes en formatos comunes y videos con opciones avanzadas de configuración.

Script

El componente está tipado con TypeScript para garantizar la correcta definición de propiedades y está diseñado para trabajar con datos del tipo Media.

Importaciones:

Media: Tipo que define la estructura de los datos multimedia.
PLACEHOLDER: Constante que proporciona valores predeterminados para ciertos tipos de medios.

Propiedades definidas:

El componente acepta las propiedades definidas por el tipo Media.

Template

El template contiene dos elementos principales:

NuxtImg: Renderiza imágenes si el tipo de media incluye image.
- Atributos:
  - src: URL de la imagen.
  - alt: Texto alternativo.
  - placeholder: Imagen predeterminada si no se proporciona una URL.
video: Renderiza un video si el tipo de media incluye video.
- Atributos:
  - src: URL del video.
  - poster: Imagen de fondo cuando el video no está reproduciéndose.
  - controls, autoplay, loop, muted: Opciones para controlar el comportamiento del video.
  - controlsList="nodownload": Desactiva la opción de descarga.

Estilos

Scoped CSS: Los estilos están encapsulados para evitar interferencias con otros componentes.

.video-player {
  object-fit: contain; // Ajusta el video para que no pierda su proporción.
  cursor: pointer; // Cambia el cursor cuando se pasa por encima.
}

Tipos

Definiciones utilizadas para tipar datos multimedia:

export type Track = {
  src: string; // URL del archivo de subtítulos.
  kind: string; // Tipo del track (e.g., captions, subtitles).
  srclang: string; // Idioma del track (e.g., en, es).
  label: string; // Etiqueta del track para mostrar al usuario.
  default?: boolean; // Define si es el track predeterminado.
};

export type MediaType =
  | "image/webp"
  | "image/jpg"
  | "image/png"
  | "video/mp4"
  | "video/webm";

export type Media = {
  id: number; // Identificador único.
  mediaUrl: string; // URL del medio (imagen o video).
  alternativeText?: string; // Texto alternativo (opcional).
  type: MediaType; // Tipo de archivo.
  placeholder?: string; // Placeholder opcional para imágenes.
  poster?: string; // Imagen de fondo para videos.
  controls?: boolean; // Controla si muestra los controles del video.
  muted?: boolean; // Controla si el video está silenciado.
  autoPlay?: boolean; // Define si el video se reproduce automáticamente.
  loop?: boolean; // Define si el video se repite en bucle.
  tracks?: Track[]; // Lista de subtítulos o pistas adicionales.
};

Mocks

Estos datos simulan contenido multimedia y son útiles para pruebas y desarrollo.

Ejemplo de uso:

export const mediaMock: Media[] = [
  {
    id: 1,
    mediaUrl: PLACEHOLDER.banner,
    alternativeText: "A beautiful sunrise over the mountains",
    type: "image/jpg",
  },
  {
    id: 2,
    mediaUrl: PLACEHOLDER.banner,
    alternativeText: "A stunning beach at sunset",
    type: "image/webp",
  },
  {
    id: 3,
    mediaUrl:
      "https://media.alebat.com/media/2024/7/VIDEO_HOSPITALAR_baja_1_e25d93c136.webm",
    type: "video/mp4",
    poster:
      "https://contenidos.edificiohospital.alebateducation.com/media/2024/5/instalaciones_elecricas_hospital_producto_2e91b4bdc0.jpg",
    controls: true,
    muted: false,
    autoPlay: false,
    loop: false,
    tracks: [
      {
        kind: "subtitles",
        src: "",
        srclang: "en",
        label: "English",
      },
    ],
  },
  {
    id: 4,
    mediaUrl:
      "https://media.alebat.com/media/2024/7/VIDEO_HOSPITALAR_baja_1_e25d93c136.webm",
    type: "video/webm",
    poster:
      "https://contenidos.edificiohospital.alebateducation.com/media/2024/5/instalaciones_elecricas_hospital_producto_2e91b4bdc0.jpg",
    controls: true,
    muted: true,
    autoPlay: true,
    loop: true,
    tracks: [
      {
        kind: "captions",
        src: "",
        srclang: "es",
        label: "Spanish",
      },
      {
        kind: "captions",
        src: "",
        srclang: "fr",
        label: "French",
      },
    ],
  },
];

Constantes

Valores predeterminados para placeholders:

export const PLACEHOLDER = {
  banner:
    "https://d1do84bsbaemip.cloudfront.net/wp-content/uploads/2023/09/01142857/banner-home-tech-05.jpg",
  avatar: "",
  product: "",
  serie: "",
};

Ejemplo de Uso

<template>
  <Media
    :mediaUrl="mediaMock[0].mediaUrl"
    :alternativeText="mediaMock[0].alternativeText"
    :type="mediaMock[0].type"
  />
</template>

Ejemplo de uso en un slider

<Swiper
  class="product"
  :space-between="30"
  :hash-navigation="{
    watchState: true,
  }"
  :pagination="{
    clickable: true,
    type: 'bullets',
  }"
  :navigation="{
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }"
  :modules="[Pagination, Navigation]"
>
  <SwiperSlide
    class="product__media"
    v-for="mediaItem in mediaProps"
    :key="mediaItem.id"
  >
    <MediaThumbnmail v-bind="mediaItem" />
  </SwiperSlide>
  <div class="swiper-button-next" aria-label="Next slide"></div>
  <div class="swiper-button-prev" aria-label="Previous slide"></div>
  </Swiper>

Características

Compatibilidad con imágenes:
- Formatos: jpg, webp, png.
Compatibilidad con videos:
- Formatos: mp4, webm.
- Soporte para subtítulos y opciones avanzadas.
Placeholder:
- Muestra un contenido predeterminado si no hay URL de imagen.
Diseño responsive:
- Optimizado para mantener proporciones.

Consideraciones

Asegúrate de que las URLs de mediaUrl y poster sean accesibles desde la aplicación.
Los atributos tracks deben incluir archivos de subtítulos válidos.