Bandeja de historias

La fila de anillos en lo alto de un feed: uno por persona, brillante mientras tiene algo nuevo y apagado cuando el usuario ya lo ha visto todo. Al pulsar un anillo, las stories se abren en la primera que aún no se ha visto, y la siguiente visita, incluso tras recargar, recuerda hasta dónde llegó el usuario.

Pruébalo

Todas las versiones importan ./api, que sustituye a tu backend: groups son las personas que sigue el usuario con las stories que publicó cada una, con la forma del StoriesGroup del reproductor. Cámbialo por tu propio feed.

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

Mira a alguien hasta el final y cierra el reproductor: su anillo se apaga, el foco cae en la última persona que viste y ambas cosas sobreviven a una recarga. "Forget what was seen" empieza de cero.

Por qué funciona

• Un controlador recuerda para ambos. createStoriesViewedStateController se crea una vez y va a la lista de anillos y al reproductor como viewed. Los anillos leen de él, el reproductor anota en él cada story que muestra y lo guarda en localStorage bajo storageKey, así una recarga no cambia nada. Consulta cómo recordar lo visto en React, Vue y Angular.
• El reproductor sigue donde lo dejó el usuario. Con viewed, el reproductor abre a una persona en su primera story aún no vista, o desde el principio cuando ya lo vio todo. La receta solo pasa la persona, nunca un índice de story; eso lo responde el resumeStoryIndex del controlador, consulta su referencia.
• Un anillo tiene dos estados. Brillante mientras queda algo por ver, apagado cuando una persona se ha visto hasta el final. El progreso dentro de una persona es la barra de progreso del reproductor, no el anillo. Consulta StoriesRing.
• Los colores del anillo siguen a la página. Los dos estados son los tokens --rk-stories-ring-active-gradient y --rk-stories-ring-viewed-color, y el de visto es por defecto un blanco tenue pensado para una página oscura. En una página clara, defínelo en .rk-stories-ring-list, como hace esta demo con el tema claro, y no en :root: el carrusel de escritorio del reproductor dibuja anillos con los mismos tokens sobre su fondo oscuro. Los tokens están en la tabla de temas.
• Sin conexiones extra para el controlador. El reproductor se renderiza siempre y se abre con isOpen, así lee el estado guardado por sí mismo antes de elegir la primera story. Si lo montas solo mientras está abierto, la página tiene que conectar antes el controlador, como explica la referencia del controlador.
• El foco vuelve al anillo correcto. Al cerrarse, el reproductor devuelve el foco al anillo que lo abrió, como describe su sección de accesibilidad. Eso ocurre después de ejecutarse el handler de cierre, así que la receta espera una tarea y luego desplaza hasta el anillo de la última persona vista y le da el foco.
• Dónde más se puede guardar. storage acepta tu propio adaptador, un servidor por ejemplo, para que lo visto siga al usuario entre dispositivos. ttlMs hace que la entrada de una persona caduque y maxTracks limita cuántas personas se guardan. Están en la configuración del controlador.