ストーリーズトレイ

フィードの上に並ぶリングの列です。1 人に 1 つのリングがあり、新しいストーリーがあるあいだは鮮やかに、視聴者がすべて見終えると控えめな色になります。リングを押すと、まだ見ていない最初のストーリーから開き、次に訪れたときも、たとえ再読み込みしたあとでも、どこまで見たかを覚えています。

試してみる

どのバージョンも ./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」で最初からやり直せます。

仕組み

• 1 つのコントローラーが両方のために覚えています。 createStoriesViewedStateController は 1 回だけ作り、viewed としてリングの一覧とプレーヤーに渡します。リングはそこから読み、プレーヤーは表示したストーリーをすべてそこに記録し、コントローラーはそれを storageKey の名前で localStorage に保存するので、再読み込みしても何も変わりません。視聴済みを覚えておく方法は React、Vue、Angular で説明しています。
• プレーヤーは視聴者が止めたところから再開します。 viewed を渡すと、プレーヤーはその人のまだ見ていない最初のストーリーから、すべて見終えている場合は最初から開きます。レシピが渡すのは人だけで、ストーリーのインデックスは渡しません。それを決めるのはコントローラーの resumeStoryIndex です。リファレンスを参照してください。
• リングの状態は 2 つです。 見るものが残っているあいだは鮮やかに、最後まで見終えると控えめな色になります。1 人の中での進み具合を示すのはリングではなく、プレーヤーのプログレスバーです。StoriesRing を参照してください。
• リングの色はページに合わせます。 2 つの状態はトークン --rk-stories-ring-active-gradient と --rk-stories-ring-viewed-color で、見終えた側の既定値は暗いページ向けの淡い白です。明るいページでは :root ではなく .rk-stories-ring-list に設定してください。このデモもライトテーマでそうしています。プレーヤーのデスクトップカルーセルは、暗い背景の上に同じトークンでリングを描くためです。トークンはテーマの表にあります。
• コントローラーの追加の配線はいりません。 プレーヤーは常に描画しておき、isOpen で開くので、最初のストーリーを選ぶ前に保存された状態を自分で読み込みます。開いているあいだだけマウントする場合は、コントローラーのリファレンスで説明しているとおり、ページが先にコントローラーをアタッチする必要があります。
• フォーカスは正しいリングに戻ります。 閉じるとき、プレーヤーは自分を開いたリングにフォーカスを戻します。プレーヤーのアクセシビリティの項で説明しているとおりです。これは閉じるハンドラーが動いたあとに行われるので、レシピは 1 タスク待ってから、最後に見た人のリングをスクロールして表示し、フォーカスを移します。
• ほかの保存先も選べます。 storage には独自のアダプター、たとえばサーバーを渡せるので、視聴済みの情報がデバイスをまたいで視聴者に付いていきます。ttlMs は人ごとの記録に有効期限を設け、maxTracks は保持する人数に上限を設けます。これらはコントローラーの設定に載っています。