स्टोरीज़ ट्रे

फ़ीड के ऊपर रिंग की पंक्ति: हर व्यक्ति की एक, चमकीली जब तक उसके पास कुछ नया है, और फीकी जब दर्शक सब देख चुका हो। रिंग दबाने पर स्टोरीज़ पहली अनदेखी स्टोरी से खुलती हैं, और अगली बार, रीलोड के बाद भी, याद रहता है कि दर्शक कहाँ तक पहुँचा था।

आज़माएँ

हर वर्ज़न ./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 मिलने पर प्लेयर व्यक्ति को उसकी पहली अनदेखी स्टोरी पर खोलता है, या सब देख लिया हो तो शुरू से। रेसिपी सिर्फ़ व्यक्ति देती है, कभी स्टोरी का index नहीं; उसका जवाब कंट्रोलर का resumeStoryIndex देता है, देखें उसका रेफ़रेंस।
• रिंग की दो हालतें होती हैं। चमकीली जब तक देखने को कुछ बचा है, फीकी जब व्यक्ति को अंत तक देख लिया गया हो। व्यक्ति के अंदर की प्रगति प्लेयर का प्रोग्रेस बार दिखाता है, रिंग नहीं। देखें StoriesRing।
• रिंग के रंग पेज के हिसाब से चलते हैं। दोनों हालतें --rk-stories-ring-active-gradient और --rk-stories-ring-viewed-color टोकन हैं, और देखी जा चुकी रिंग का डिफ़ॉल्ट गहरे पेज के लिए बना हल्का सफ़ेद है। हल्के पेज पर इसे :root पर नहीं, .rk-stories-ring-list पर सेट करें, जैसा यह डेमो लाइट थीम में करता है: प्लेयर का डेस्कटॉप कैरोसेल अपनी गहरी पृष्ठभूमि पर इन्हीं टोकन से रिंग बनाता है। टोकन थीम टेबल में हैं।
• कंट्रोलर के लिए कोई अतिरिक्त वायरिंग नहीं। प्लेयर हमेशा रेंडर होता है और isOpen से खुलता है, इसलिए पहली स्टोरी चुनने से पहले वह सहेजी हुई स्टेट ख़ुद पढ़ लेता है। उसे सिर्फ़ खुले रहने तक माउंट करें, तो पेज को पहले कंट्रोलर अटैच करना होगा, जैसा कंट्रोलर का रेफ़रेंस बताता है।
• फ़ोकस सही रिंग पर लौटता है। बंद होते समय प्लेयर फ़ोकस उस रिंग को लौटा देता है जिसने उसे खोला था, जैसा उसका ऐक्सेसिबिलिटी सेक्शन बताता है। यह close हैंडलर चलने के बाद होता है, इसलिए रेसिपी एक टास्क रुकती है, फिर आख़िरी देखे गए व्यक्ति की रिंग को स्क्रॉल करके दिखाती है और उस पर फ़ोकस करती है।
• इसे और कहाँ रखा जा सकता है। storage आपका अपना अडैप्टर लेता है, जैसे कोई सर्वर, ताकि देखी गई चीज़ें दर्शक के साथ हर डिवाइस पर चलें। ttlMs किसी व्यक्ति की एंट्री को एक्सपायर होने देता है, और maxTracks तय करता है कि कितने लोग रखे जाएँ। ये कंट्रोलर कॉन्फ़िग में हैं।