Панель історій

Ряд кілець угорі стрічки: по одному на людину, яскраве, поки в неї є щось нове, й приглушене, коли глядач усе переглянув. Натискання на кільце відкриває історії з першої ще не переглянутої, а наступний візит, навіть після перезавантаження, памʼятає, де глядач зупинився.

Спробуйте

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

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

// Stands in for your backend: the people a viewer follows and the stories each
// one posted. Each entry has the shape of `StoriesGroup` from the stories
// player of your framework, so the list goes to the player as it is.

export interface Group {
  author: { id: string; name: string; avatar: string };
  stories: { id: string; mediaType: 'image'; src: string }[];
}

const kPeople = ['Alex', 'Sarah', 'Mike', 'Emma', 'Noah', 'Lena'];

// Uneven on purpose: a person with one story is watched to the end at once,
// one with three can be left part way and resumed.
const kStoryCounts = [3, 1, 2, 3, 1, 2];

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

const storyImage = (n: number) =>
  n <= 6
    ? cdnUrl(`samples/images/stories/story-00${n}.jpg`)
    : cdnUrl(`samples/images/image-${pad(n - 6)}.jpg`);

let nextImage = 1;

export const groups: Group[] = kPeople.map((name, i) => ({
  author: {
    id: `user-${i + 1}`,
    name,
    avatar: cdnUrl(`samples/avatars/avatar-${pad(i + 1)}.jpg`),
  },
  stories: Array.from({ length: kStoryCounts[i] }, (_, j) => ({
    id: `user-${i + 1}-story-${j + 1}`,
    mediaType: 'image' as const,
    src: storyImage(nextImage++),
  })),
}));

PreviewCode

StoriesTray.tsx

Alex

Sarah

Mike

Emma

Noah

Lena

Forget what was seen

PreviewCode

StoriesTray.vue

Alex

Sarah

Mike

Emma

Noah

Lena

Forget what was seen

PreviewCode

stories-tray.component.ts

Alex

Sarah

Mike

Emma

Noah

Lena

Forget what was seen

Перегляньте когось до кінця й закрийте плеєр: його кільце стане приглушеним, фокус опиниться на останній переглянутій людині, і обидва переживуть перезавантаження. «Forget what was seen» починає спочатку.

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

• Один контролер памʼятає за обох. createStoriesViewedStateController створюється один раз і передається списку кілець і плеєру як viewed. Кільця читають із нього, плеєр записує в нього кожну показану історію, а сам він зберігає це в localStorage під storageKey, тож перезавантаження нічого не змінює. Див. розділ про те, як памʼятати переглянуте, для React, Vue та Angular.
• Плеєр продовжує там, де глядач зупинився. Маючи viewed, плеєр відкриває людину з її першої ще не переглянутої історії або з початку, коли все переглянуто. Рецепт передає лише людину, ніколи не індекс історії; на це відповідає resumeStoryIndex контролера, див. його довідник.
• Кільце має два стани. Яскраве, поки є що дивитися, приглушене, коли людину переглянуто до кінця. Прогрес усередині людини показує смуга прогресу плеєра, а не кільце. Див. StoriesRing.
• Кольори кілець підлаштовуються під сторінку. Два стани — це токени --rk-stories-ring-active-gradient і --rk-stories-ring-viewed-color, а переглянутий за замовчуванням ледь помітний білий, розрахований на темну сторінку. На світлій сторінці задайте його на .rk-stories-ring-list, як це робить демо у світлій темі, а не на :root: десктопна карусель плеєра малює кільця тими самими токенами на своєму темному тлі. Токени — у таблиці тем.
• Жодного додаткового підключення контролера. Плеєр рендериться завжди й відкривається через isOpen, тож сам читає збережений стан, перш ніж вибрати першу історію. Монтуйте його лише поки він відкритий, і тоді сторінка має спершу підключити контролер, як пояснює довідник контролера.
• Фокус повертається до потрібного кільця. Закриваючись, плеєр повертає фокус кільцю, що його відкрило, як описує його розділ про доступність. Це відбувається вже після обробника закриття, тож рецепт чекає одну задачу, тоді прокручує кільце останньої переглянутої людини в поле зору й фокусує його.
• Де ще це можна зберігати. storage приймає ваш власний адаптер, наприклад сервер, тож переглянуте йде за глядачем між пристроями. ttlMs дає запису людини застаріти, а maxTracks обмежує, скільки людей зберігається. Їх описано в конфігурації контролера.