Від сітки до плеєра

Сторінка профілю чи результати пошуку показують дописи сіткою мініатюр. Натискання на мініатюру має відкрити допис на весь екран, дати глядачеві гортати далі решту й, коли він закриє плеєр, залишити його на дописі, де він зупинився, а не на тому, з якого почав.

Спробуйте

Кожна версія імпортує ./api, що заміняє ваш бекенд: posts — список, який завантажив би профіль чи пошук, у формі ContentItem плеєра, а thumbnailOf вибирає зображення для клітинки сітки. Замініть обидва власними даними.

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

Відкрийте допис, кілька разів погортайте чи натисніть ↓, тоді закрийте клавішею Escape: сітка прокрутиться до допису, де ви зупинилися, і фокус буде на його мініатюрі.

Чому це працює

• Плеєр відкривається там, куди натиснув глядач. initialIndex отримує індекс мініатюри, а весь список іде в content, тож глядач може гортати й далі за вибраний допис. Обидва — пропси плеєра в React, Vue та Angular.
• Сітка знає, де глядач зупинився. Колбек зміни слайда повідомляє про кожен допис, до якого дійшов глядач, а рецепт запамʼятовує останній. Його описано серед колбеків, подій та виходів плеєра.
• Фокус повертається до потрібної мініатюри. Закриваючись, плеєр повертає фокус елементу, що його відкрив, — це його контракт доступності. Таке повернення відбувається вже після обробника закриття, тож фокус, виставлений в обробнику, було б скасовано. Рецепт чекає одну задачу, тоді прокручує мініатюру останнього допису в поле зору й фокусує її.
• Мініатюри — це кнопки. Кожна клітинка — <button> із підписом, тож сітка працює з Tab та Enter, екранний диктор називає допис, який вона відкриває, а плеєр має елемент із фокусом, якому можна повернути фокус, як описує його розділ про доступність.
• Клітинці сітки потрібне зображення, а не відео. thumbnailOf бере poster відео — поле MediaItem — а зображення як є, тож сітка ніколи не вантажить відео, яке не відтворює.
• Хочете бачити відкритий допис в адресному рядку? Плеєр зі станом в URL записує видимий допис в URL, тож ним можна поділитися й закрити кнопкою «Назад».