De la cuadrícula al reproductor

Una página de perfil o un resultado de búsqueda muestran las publicaciones como una cuadrícula de miniaturas. Al pulsar una, debería abrirse a pantalla completa, dejar que el usuario siga deslizando por el resto y, al cerrar el reproductor, dejarlo en la publicación donde se quedó y no en la que empezó.

Pruébalo

Todas las versiones importan ./api, que sustituye a tu backend: posts es la lista que cargaría un perfil o una búsqueda, con la forma del ContentItem del reproductor, y thumbnailOf elige la imagen que muestra cada celda. Cambia ambos por tus propios datos.

import { cdnUrl } from '@reelkit/example-data';

// Stands in for your backend: the posts a profile or a search result would
// load. Each one has the shape of `ContentItem` from the reel player of your
// framework, so the list goes to the player as it is.

export interface Post {
  id: string;
  media: {
    id: string;
    type: 'image' | 'video';
    src: string;
    poster?: string;
    aspectRatio: number;
  }[];
  author: { name: string; avatar: string };
  likes: number;
  description: string;
}

const kAuthors = ['Alex Johnson', 'Sarah Miller', 'Mike Chen', 'Emma Davis'];

const pad = (n: number) => String(n).padStart(2, '0');

export const posts: Post[] = Array.from({ length: 12 }, (_, i) => {
  const isVideo = i % 4 === 0;
  const n = (i % (isVideo ? 3 : 9)) + 1;
  return {
    id: `post-${i + 1}`,
    media: [
      isVideo
        ? {
            id: `video-${i + 1}`,
            type: 'video' as const,
            src: cdnUrl(`samples/videos/video-${pad(n)}.mp4`),
            poster: cdnUrl(`samples/videos/video-poster-${pad(n)}.jpg`),
            aspectRatio: 16 / 9,
          }
        : {
            id: `image-${i + 1}`,
            type: 'image' as const,
            src: cdnUrl(`samples/images/image-${pad(n)}.jpg`),
            aspectRatio: 2 / 3,
          },
    ],
    author: {
      name: kAuthors[i % kAuthors.length],
      avatar: cdnUrl(`samples/avatars/avatar-${pad((i % 8) + 1)}.jpg`),
    },
    likes: 120 + i * 37,
    description: `Post ${i + 1}`,
  };
});

/** The picture a grid cell shows: a video's poster, or the image itself. */
export const thumbnailOf = (post: Post) =>
  post.media[0].poster ?? post.media[0].src;

PreviewCode

GridToPlayer.tsx

PreviewCode

GridToPlayer.vue

PreviewCode

grid-to-player.component.ts

Abre una publicación, desliza o pulsa ↓ unas cuantas veces y cierra con Escape: la cuadrícula se desplaza hasta la publicación donde te quedaste y su miniatura tiene el foco.

Por qué funciona

• El reproductor se abre donde pulsó el usuario. initialIndex recibe el índice de la miniatura y la lista entera va a content, así el usuario puede seguir deslizando más allá de la publicación que eligió. Ambas son props del reproductor en React, Vue y Angular.
• La cuadrícula sabe dónde se quedó el usuario. El callback de cambio de slide informa de cada publicación a la que llega el usuario, y la receta guarda la última. Aparece entre los callbacks, los eventos y los outputs del reproductor.
• El foco vuelve a la miniatura correcta. Al cerrarse, el reproductor devuelve el foco al elemento que lo abrió, como marca su sección de accesibilidad. Esa devolución ocurre después de ejecutarse el handler de cierre, así que un foco puesto dentro del handler se desharía. La receta espera una tarea y luego desplaza hasta la miniatura de la última publicación y le da el foco.
• Las miniaturas son botones. Cada celda es un <button> con etiqueta, así la cuadrícula funciona con Tab y Enter, un lector de pantalla nombra la publicación que abre y el reproductor tiene un elemento enfocable al que devolver el foco, como describe su sección de accesibilidad.
• Una celda necesita una imagen, no un vídeo. thumbnailOf usa el poster de un vídeo, un campo de MediaItem, y una imagen tal cual, así la cuadrícula nunca carga un vídeo que no reproduce.
• ¿Quieres la publicación abierta en la barra de direcciones? El reproductor con estado en la URL pone la publicación visible en la URL, así se puede compartir y cerrar con el botón Atrás.