Stories Player

@reelkit/react-stories-player से बना, React के लिए Instagram जैसा stories प्लेयर overlay।

लाइव डेमो देखें →

फ़ीचर

Nested नेविगेशन

stories आगे बढ़ाने के लिए टैप, ग्रुप बदलने के लिए स्वाइप

वीडियो stories

साउंड टॉगल के साथ autoplay

अपने-आप आगे बढ़ना

हर story के लिए कॉन्फ़िगर होने वाला टाइमर

3D ट्रांज़िशन

Cube, flip, fade, zoom, slide

प्रोग्रेस बार

canvas पर आधारित segmented प्रोग्रेस

इमेज और वीडियो

दोनों तरह के मीडिया संभालता है

वर्चुअलाइज़्ड

DOM में सिर्फ़ 3 स्लाइड

डबल-टैप लाइक

डबल-टैप पर दिल का एनिमेशन

डेस्कटॉप नेविगेशन

डेस्कटॉप पर chevron बटन

Story rings

Instagram जैसी avatar rings

Generic टाइप

StoryItem को कस्टम डेटा से extend करें

Render props

हर UI एलिमेंट कस्टमाइज़ करें

URL स्टेट

शेयर होने वाले ?story=group.story लिंक

देखे गए आइटम की स्टेट

देखी गई rings और वहीं से शुरू करना reload के बाद भी

इंस्टॉलेशन

bash

styles import करना न भूलें:

typescript

आइकन

डिफ़ॉल्ट header आइकन के लिए lucide-react इस्तेमाल करता है। अगर आप कोई और आइकन लाइब्रेरी पसंद करते हैं, तो अपने देने के लिए renderHeader और renderNavigation इस्तेमाल करें।

क्विक स्टार्ट

StoriesOverlay कंपोनेंट फ़ुलस्क्रीन stories प्लेयर रेंडर करता है। Instagram जैसे entry points के लिए इसे StoriesRingList के साथ जोड़ें। StoriesGroup objects का array पास करें और isOpen से दिखना नियंत्रित करें।

tsx

लाइव डेमो

StoriesPlayer.tsx

Alice

Bob

Charlie

प्लेयर खोलने के लिए किसी story ring पर क्लिक करें। आगे-पीछे जाने के लिए बाएँ/दाएँ हिस्से पर टैप करें, यूज़र बदलने के लिए स्वाइप करें।

URL स्टेट

लाइव डेमो देखें →

StoriesUrlOverlay एक अलग कंपोनेंट है जिसकी खुले होने की स्टेट address bar में रहती है। दोनों अक्ष एक ही parameter में चलते हैं — ?story=<group>.<story> — इसलिए चल रही story का ऐसा लिंक होता है जिसे शेयर, bookmark और back बटन से बंद किया जा सके। useOverlayUrlState और urlIndexTwoAxisKey से कंट्रोलर बनाएँ, फिर उसे controller के रूप में दें।

बिल्ट-इन keys

Stories दो-अक्ष वाली हैं, इसलिए कंट्रोलर में दो-अक्ष वाली key spread करें: urlIndexTwoAxisKey (ग्रुप और story स्थिति से) या urlStableIdTwoAxisKey (ग्रुप स्थिर id से) — दोनों @reelkit/react से भी export होती हैं। URL स्टेट गाइड और Core API देखें।

tsx

खोलने पर history में एक entry जुड़ती है। stories स्वाइप करना और यूज़र बदलना, दोनों उसे बदल देते हैं, इसलिए N नेविगेशन कोई entry नहीं जोड़ते और back का एक कदम हमेशा प्लेयर बंद कर देता है। Back बंद करता है; stories में पीछे नहीं जाता।
अंदरूनी नेविगेशन भी साथ चलता है। Story index ग्रुप के स्तर पर जमा नहीं रहता — किसी यूज़र की stories में आगे बढ़ने पर ?story=2.n अपडेट होता है, इसलिए सीधा लिंक ठीक उसी story पर पहुँचता है।
Back सिर्फ़ तब बंद करता है जब प्लेयर ऐप के अंदर से खोला गया हो — लिंक ने entry जोड़ी हो। नए tab में सीधे खोले गए शेयर किए गए लिंक के पीछे कोई history नहीं होती, इसलिए ब्राउज़र का back साइट छोड़ देता है; ✕ बटन या Escape parameter को उसी जगह हटाकर पेज पर बना रहता है।
किसी ग्रुप या story का नाम न लेने वाला parameter — पुराना bookmark, हाथ से बदली value, ग्रुप के अंत से आगे की story — पड़ोसी खोलने के बजाय URL से हटा दिया जाता है।

Routing वाला ऐप — adapter पास करें। router के पीछे history.pushState लिखने से उसकी location पुरानी पड़ जाती है, और उसका अगला नेविगेशन parameter गिरा देता है:

tsx

स्थिर लिंक। ग्रुप डिफ़ॉल्ट रूप से स्थिति पर आधारित है, इसलिए फ़ीड का क्रम बदलते ही bookmark किया गया ?story=2.0 कोई दूसरा यूज़र खोलता है। इसकी जगह ग्रुप को स्थिर id से पहचानें — outerCodec id को URL में लिखता है, outerLocator ढूँढता है कि वह कहाँ है। Story वाला हिस्सा मिले हुए ग्रुप के अंदर साधारण index ही रहता है।

tsx

अनंत फ़ीड। पेज लोड करना outerLocator का काम है, codec से स्वतंत्र। locate synchronous है, इसलिए यह सिर्फ़ लोड हो चुके ग्रुप के लिए जवाब देता है — जिस फ़ीड में 20 ग्रुप लोड हुए हैं, उसके ग्रुप 400 का शेयर किया गया लिंक खाली लौटता है। locateAsync विकल्प है, जो सिर्फ़ locate के न मिलने पर कॉल होता है; story को उसी ग्रुप की सीमा में दोबारा बाँधा जाता है जिस पर वह पहुँचता है।

वही locateAsync, बाहरी अक्ष पर

यह वही locateAsync पेजर है जो एक-अक्ष वाली keys लेती हैं — दो-अक्ष वाली key पर यह आपके दिए outerLocator के साथ चलता है, इसलिए ग्रुप वाला अक्ष पेज लोड करता है जबकि story मिले हुए ग्रुप के अंदर स्थानीय index बनी रहती है।

tsx

locateAsync के pending रहने तक प्लेयर बंद रहता है और parameter को छुआ नहीं जाता, इसलिए सीधा लिंक fetch के बाद भी बना रहता है। null या rejection parameter हटा देता है।
URL आगे बढ़ जाने, बंद होने या unmount के बाद आया जवाब फेंक दिया जाता है — धीमा fetch ऐसी story नहीं खोल सकता जो किसी ने माँगी ही नहीं।
useOverlayUrlState के सारे विकल्प React API रेफ़रेंस में हैं, और पूरी जानकारी React गाइड में है।

देखी गई चीज़ें याद रखना

ग्रुप पूरा देख लिए जाने तक rings पर gradient दिखता है, और ग्रुप उस पहली story पर दोबारा खुलता है जिसे दर्शक ने नहीं देखा। दोनों ViewedStateController से आते हैं, जो उसी key से बनता है जो address bar इस्तेमाल करता है — इसलिए सहेजी गई entry ठीक शेयर किए गए लिंक के parameter जैसी पढ़ी जाती है, और id से पहचानने वाली key होने पर फ़ीड का क्रम बदलने के बाद भी बनी रहती है।

tsx

खुलने वाली story गिनी जाती है। स्क्रीन पर पहले से मौजूद story mount पर देखी गई दर्ज होती है, इसलिए एक story वाला ग्रुप खोलकर बंद करने पर वह देखा हुआ माना जाता है।
आगे स्वाइप करने पर भी वहीं से शुरू होता है। इस सेशन में पहली बार पहुँचे हर ग्रुप के लिए resumeStoryIndex से पूछा जाता है, उस ग्रुप समेत जिस पर प्लेयर खुलता है, जब तक initialStoryIndex सीधे किसी story का नाम न ले; पहले से स्वाइप करके देखा गया ग्रुप वहीं खुलता है जहाँ छोड़ा गया था।
लिंक फिर भी ऊपर रहता है। StoriesUrlOverlay के साथ parameter तय करता है कि प्लेयर कहाँ खुले, चाहे जो भी सहेजा गया हो। बाकी हर जगह resume callback तय करता है।
गिनती एक स्थिति है, जोड़ नहीं। Entry सबसे दूर पहुँची story का नाम है, इसलिए देखे जा चुके ग्रुप में story जोड़ने पर उसकी ring फिर से जल उठती है, और बीच से एक हटाने पर गिनती घट जाती है। वैसे ही जैसे शेयर किया गया लिंक खुद को ठीक कर लेता है।
Storage बदला जा सकता है। tab बंद होने पर भूलने के लिए createSessionStorageAdapter() पास करें, या अपना StorageAdapter। दो खुले tabs ब्राउज़र के storage इवेंट से एक-दूसरे के साथ चलते हैं।

API रेफ़रेंस

StoriesOverlayProps

StoriesOverlayProps<T>

Prop	टाइप	डिफ़ॉल्ट	विवरण
`isOpen`	`boolean`	ज़रूरी	overlay का दिखना नियंत्रित करता है। true होने पर body का स्क्रॉल lock हो जाता है।
`groups`	`StoriesGroup<T>[]`	ज़रूरी	दिखाए जाने वाले story ग्रुप का array
`onClose`	`() => void`	ज़रूरी	overlay बंद करने का callback
`ariaLabel`	`string`	'Stories player'	dialog क्षेत्र का सुलभ लेबल; overlay खुलने पर स्क्रीन रीडर इसे बोलते हैं
`initialGroupIndex`	`number`	0	शुरू में दिखने वाले ग्रुप का शून्य से शुरू होने वाला index
`initialStoryIndex`	`number`	resumeStoryIndex(initialGroupIndex), नहीं तो 0	ग्रुप के अंदर शुरू में दिखने वाली story का शून्य से शुरू होने वाला index। इसे देने पर यह याद रखी गई किसी भी स्थिति से ऊपर रहता है; न देने पर खुलने वाला ग्रुप भी बाकी ग्रुप की तरह वहीं से शुरू होता है।
`resumeStoryIndex`	`(groupIndex: number) => number`	—	पहली बार पहुँचने पर ग्रुप किस story पर खुले, ताकि दर्शक वहीं से आगे देखे जहाँ छोड़ा था। सिर्फ़ उस ग्रुप के लिए पूछा जाता है जो इस बार खुलने के दौरान अब तक नहीं देखा गया।
`groupTransition`	`TransitionTransformFn`	cubeTransition	बाहरी (ग्रुप) स्लाइडर का ट्रांज़िशन इफ़ेक्ट
`defaultImageDuration`	`number`	5000	इमेज stories के अपने-आप आगे बढ़ने की डिफ़ॉल्ट अवधि, मिलीसेकंड में
`tapZoneSplit`	`number`	0.3	टैप ज़ोन के बँटवारे का अनुपात (0–1)। बायाँ हिस्सा prev चलाता है, दायाँ next।
`hideUIOnPause`	`boolean`	true	लंबे दबाव से रुकने पर story UI (header, footer) छिपाना है या नहीं
`enableKeyboard`	`boolean`	true	कीबोर्ड नेविगेशन चालू करता है (बाएँ/दाएँ तीर, Escape)
`innerTransitionDuration`	`number`	200	अंदरूनी (story) ट्रांज़िशन एनिमेशन की अवधि, मिलीसेकंड में
`minSegmentWidth`	`number`	8	प्रोग्रेस बार के segment की पिक्सेल में न्यूनतम चौड़ाई
`apiRef`	`MutableRefObject<StoriesApi \| null>`	-	imperative StoriesApi तक पहुँचने के लिए ref
`renderHeader`	`(props: HeaderRenderProps<T>) => ReactNode`	-	कस्टम header renderer। लेखक, story और pause/mute स्टेट मिलती है।
`renderFooter`	`(props: FooterRenderProps<T>) => ReactNode`	-	कस्टम footer renderer। लेखक और story की जानकारी मिलती है।
`renderSlide`	`(props: SlideRenderProps<T>) => ReactNode`	-	कस्टम स्लाइड renderer, जो डिफ़ॉल्ट इमेज/वीडियो स्लाइड की जगह लेता है।
`renderNavigation`	`(props: NavigationRenderProps) => ReactNode`	-	कस्टम डेस्कटॉप नेविगेशन। डिफ़ॉल्ट prev/next chevron बटन की जगह लेता है।
`renderProgressBar`	`(props: ProgressBarRenderProps<T>) => ReactNode`	-	कस्टम प्रोग्रेस बार। डिफ़ॉल्ट canvas प्रोग्रेस बार की जगह लेता है।
`renderLoading`	`(props: LoadingRenderProps<T>) => ReactNode`	-	कस्टम लोडिंग UI renderer। न देने पर डिफ़ॉल्ट header spinner दिखता है।
`renderError`	`(props: ErrorRenderProps<T>) => ReactNode`	-	कस्टम एरर UI renderer। न देने पर डिफ़ॉल्ट एरर आइकन overlay दिखता है।

StoriesUrlOverlayProps

StoriesUrlOverlayProps<T>

खुली स्टेट वाली तिकड़ी — isOpen, initialGroupIndex, initialStoryIndex — को छोड़कर StoriesOverlay के सारे props लेता है; ये तीनों कंट्रोलर से आते हैं।

Prop	टाइप	डिफ़ॉल्ट	विवरण
`controller`	`UrlStateController<TwoAxisPosition>`	ज़रूरी	urlIndexTwoAxisKey के साथ spread किए useOverlayUrlState से मिला कंट्रोलर। इसकी स्थिति — एक { outer, inner } object — तय करती है कि प्लेयर खुला है या नहीं और कहाँ खुलता है; overlay हर नेविगेशन और बंद होने पर वापस लिखता है।

Callbacks

Prop	टाइप	विवरण
`onClose`	`() => void`	प्लेयर बंद होने पर कॉल होता है। StoriesOverlay पर ज़रूरी (खुली स्टेट आपके पास है, इसलिए बंद करना आपको संभालना होगा); StoriesUrlOverlay पर वैकल्पिक, जहाँ बंद करना URL चलाता है — इसे सिर्फ़ बंद होने के बाद कुछ करने के लिए पास करें।
`onStoryChange`	`(groupIndex: number, storyIndex: number) => void`	सक्रिय story बदलने पर चलता है
`onGroupChange`	`(groupIndex: number) => void`	सक्रिय ग्रुप बदलने पर चलता है
`onStoryViewed`	`(groupIndex: number, storyIndex: number) => void`	किसी story के दिखने पर चलता है
`onStoryComplete`	`(groupIndex: number, storyIndex: number) => void`	story का टाइमर पूरा होने पर चलता है
`onDoubleTap`	`(groupIndex: number, storyIndex: number) => void`	डबल-टैप जेस्चर पर चलता है
`onPause`	`() => void`	प्लेयर रुकने पर चलता है
`onResume`	`() => void`	प्लेयर फिर शुरू होने पर चलता है

ट्रांज़िशन

groupTransition prop यूज़र ग्रुप के बीच स्वाइप करते समय 3D ट्रांज़िशन इफ़ेक्ट नियंत्रित करता है। ट्रांज़िशन फ़ंक्शन @reelkit/react से import करें:

tsx

कंटेंट लोडिंग का lifecycle

हर story स्लाइड SlideRenderProps से मिले callbacks के ज़रिए अपनी लोडिंग स्टेट बताती है:

Callback	कब
`onReady`	कंटेंट तैयार है (इमेज लोड हुई, वीडियो चल रहा है)। प्रोग्रेस टाइमर शुरू होता है।
`onWaiting`	कंटेंट अटक गया (वीडियो चलते-चलते buffer हो रहा है)। spinner दिखता है और टाइमर रुकता है।
`onError`	कंटेंट लोड नहीं हुआ। एरर overlay दिखता है।
`onDurationReady`	मीडिया की असली अवधि बताएँ (जैसे वीडियो metadata से), ताकि टाइमर सही अवधि के साथ दोबारा शुरू हो।
`onEnded`	बताएँ कि मीडिया ख़त्म हो गया (जैसे वीडियो पूरा हुआ)। अगली story पर ले जाता है।

Preloader caching

बिल्ट-इन ImageStorySlide और VideoStorySlide कंपोनेंट अगली story पीछे से पहले ही लोड कर लेते हैं। जब यूज़र पहले से लोड हुई story पर जाता है, तो कंटेंट बिना लोडिंग spinner के तुरंत दिखता है।

Render props

हर UI एलिमेंट render props से बदला जा सकता है। हर एक को सारी ज़रूरी स्टेट और callbacks वाले typed props मिलते हैं।

renderHeader

डिफ़ॉल्ट header (लेखक की जानकारी, pause/mute बटन, बंद करने का बटन) बदलें:

tsx

renderFooter

story कंटेंट के नीचे footer जोड़ें:

tsx

renderSlide

डिफ़ॉल्ट इमेज/वीडियो स्लाइड पूरी तरह बदलें। बिल्ट-इन मीडिया हैंडलिंग के लिए ImageStorySlide और VideoStorySlide sub-components इस्तेमाल करें:

tsx

renderNavigation

डिफ़ॉल्ट डेस्कटॉप chevron बटन बदलें:

tsx

renderProgressBar

डिफ़ॉल्ट canvas प्रोग्रेस बार की जगह अपना implementation लगाएँ। progress signal 0 से 1 तक के मान देता है:

tsx

renderLoading

कंटेंट fetch होते समय कस्टम लोडिंग इंडिकेटर:

tsx

renderError

कंटेंट लोड न होने पर कस्टम एरर overlay:

tsx

StoriesApi

imperative नियंत्रण के लिए apiRef prop इस्तेमाल करें:

tsx

मेथड

मेथड	टाइप	विवरण
`nextStory()`	`() => void`	मौजूदा ग्रुप के अंदर अगली story पर जाता है
`prevStory()`	`() => void`	मौजूदा ग्रुप के अंदर पिछली story पर जाता है
`nextGroup()`	`() => void`	अगले यूज़र ग्रुप पर जाता है
`prevGroup()`	`() => void`	पिछले यूज़र ग्रुप पर जाता है
`goToGroup(index)`	`(index: number) => void`	index से किसी खास ग्रुप पर सीधे जाता है
`pause()`	`() => void`	अपने-आप आगे बढ़ना और प्रोग्रेस टाइमर रोकता है
`resume()`	`() => void`	अपने-आप आगे बढ़ना और प्रोग्रेस टाइमर फिर शुरू करता है

डबल-टैप और लाइक

डबल-टैप पर एक बिल्ट-इन दिल का एनिमेशन चलता है, जो तुरंत दिखने वाली प्रतिक्रिया देता है। onDoubleTap callback ग्रुप और story index के साथ चलता है, ताकि आप लाइक को अपनी स्टेट में सहेज सकें (API कॉल, local storage वगैरह)। प्लेयर अंदर से लाइक की स्टेट नहीं संभालता।

tsx

दिल का एनिमेशन कस्टमाइज़ करना

एनिमेशन की रफ़्तार --rk-stories-heart-duration token से बदलें (थीमिंग देखें)। रंग, आकार या दिल को पूरी तरह छिपाने के लिए सीधे .rk-stories-heart class को निशाना बनाएँ। HeartAnimation कंपोनेंट अलग से इस्तेमाल के लिए भी export होता है।

css

बिल्ट-इन दिल का एनिमेशन अभी render prop से नहीं बदला जा सकता। आप इसे CSS से नया रूप दे सकते हैं या display: none से छिपाकर onDoubleTap callback में अपना एनिमेशन चला सकते हैं। अगर आपको renderDoubleTap render prop चाहिए, तो GitHub Issues पर बताएँ।

सब-कंपोनेंट

कस्टम render props में जोड़कर इस्तेमाल करने के लिए export किए गए, दोबारा इस्तेमाल होने वाले हिस्से:

CanvasProgressBar

canvas पर आधारित तेज़ segmented प्रोग्रेस बार। हर story का segment बनाता है और सक्रिय segment का भराव requestAnimationFrame से एनिमेट करता है। कई stories वाले ग्रुप के लिए खिसकती विंडो का सपोर्ट है।

tsx

StoryHeader

लेखक के avatar, नाम, verified बैज, सापेक्ष समय, pause/play टॉगल, mute/unmute टॉगल, लोडिंग spinner और बंद करने के बटन वाला डिफ़ॉल्ट header। renderHeader न देने पर अपने-आप इस्तेमाल होता है।

tsx

ImageStorySlide

object-fit: cover वाली, किनारे तक फैली इमेज स्लाइड। lifecycle ट्रैकिंग के लिए callbacks से लोड/एरर बताती है।

tsx

VideoStorySlide

iOS पर आवाज़ बनाए रखने के लिए साझा <video> एलिमेंट इस्तेमाल करने वाली वीडियो स्लाइड। autoplay, poster फ़्रेम और साउंड sync संभालती है, और अवधि व प्लेबैक lifecycle के इवेंट बताती है।

tsx

StoriesRing

Instagram जैसी gradient ring वाला गोल avatar। दो स्थितियाँ: जिस ग्रुप में देखने को stories बाकी हैं उसे घूमता gradient मिलता है, पूरा देखे जा चुके ग्रुप को फीकी सपाट ring।

tsx

StoriesRingList

लेखकों के नाम के साथ StoriesRing कंपोनेंट की हॉरिज़ॉन्टल स्क्रॉल होने वाली पंक्ति। हर ग्रुप की एक ring।

tsx

HeartAnimation

डबल-टैप पर चलने वाला एनिमेटेड दिल का overlay। 800ms में बड़ा होकर धुंधला होता हुआ गायब हो जाता है। CSS से कस्टमाइज़ करें (डबल-टैप और लाइक वाला हिस्सा देखें)।

tsx

टाइप

StoryItem

typescript

AuthorInfo

typescript

StoriesGroup<T>

typescript

HeaderRenderProps<T>

typescript

FooterRenderProps<T>

typescript

SlideRenderProps<T>

typescript

NavigationRenderProps

typescript

ProgressBarRenderProps<T>

typescript

LoadingRenderProps<T>

typescript

ErrorRenderProps<T>

typescript

StoriesApi

typescript

कस्टम story टाइप

StoryItem को कस्टम fields से extend करें और टाइप parameter StoriesOverlay को पास करें। सारे render props को आपका extend किया गया टाइप मिलेगा:

tsx

CSS क्लास

सारी CSS क्लास साधारण हैं (CSS modules नहीं), इसलिए @reelkit/react-stories-player/styles.css के बाद लोड होने वाली stylesheet में ज़्यादा specificity वाले selectors से इन्हें निशाना बनाया जा सकता है। रंग, आकार और z-index बदलने के लिए नीचे थीमिंग हिस्से में बताई CSS custom properties को प्राथमिकता दें।

क्लास	कंपोनेंट	विवरण
`.rk-stories-overlay`	Overlay	तय फ़ुलस्क्रीन backdrop (background, z-index)
`.rk-stories-swipe-wrapper`	Overlay	स्वाइप करके बंद करने वाला wrapper (नेविगेशन बटन + canvas रखता है)
`.rk-stories-container`	Overlay	गोल कोनों वाला story canvas (position, overflow)
`.rk-stories-ui-layer`	Overlay	UI overlay का कंटेनर (header, प्रोग्रेस, नेविगेशन)
`.rk-stories-ui-layer--hidden`	Overlay	UI की छिपी स्टेट (hideUIOnPause से बदलती है)
`.rk-stories-error`	Overlay	एरर स्टेट (बीच में आइकन + टेक्स्ट)
`.rk-stories-error-text`	Overlay	एरर संदेश का टेक्स्ट
`.rk-stories-nav-btn`	Navigation	डेस्कटॉप का prev/next तीर
`.rk-stories-progress-bar`	ProgressBar	canvas प्रोग्रेस बार की स्थिति वाला wrapper
`.rk-stories-slide-wrapper`	Group	stories का एक ग्रुप (बाहरी स्लाइड)
`.rk-stories-story`	Story	एक अकेली story (अंदरूनी स्लाइड का root)
`.rk-stories-header`	StoryHeader	Header bar (avatar, नाम, actions)
`.rk-stories-header--hidden`	StoryHeader	Header की छिपी स्टेट (visible=false)
`.rk-stories-header-avatar`	StoryHeader	लेखक की avatar इमेज
`.rk-stories-header-name`	StoryHeader	लेखक के नाम का टेक्स्ट
`.rk-stories-header-verified`	StoryHeader	Verified बैज का कंटेनर
`.rk-stories-header-time`	StoryHeader	कितनी देर पहले का टेक्स्ट
`.rk-stories-header-actions`	StoryHeader	दाईं ओर के actions (बंद, mute, pause)
`.rk-stories-header-btn`	StoryHeader	Header का action बटन
`.rk-stories-header-spinner`	StoryHeader	वीडियो buffer होने का spinner
`.rk-stories-image`	ImageStorySlide	इमेज story एलिमेंट
`.rk-stories-video`	VideoStorySlide	वीडियो story कंटेनर
`.rk-stories-video-element`	VideoStorySlide	साझा <video> एलिमेंट
`.rk-stories-video-poster`	VideoStorySlide	वीडियो की poster इमेज (चलने पर धुंधली होकर गायब)
`.rk-stories-video-poster--visible`	VideoStorySlide	Poster की दिखने वाली स्टेट (प्लेबैक से पहले)
`.rk-stories-heart`	HeartAnimation	डबल-टैप पर दिल उभरने का एनिमेशन
`.rk-stories-ring`	StoriesRing	Story ring (एनिमेटेड gradient border वाला avatar)
`.rk-stories-ring--active`	StoriesRing	देखने को stories बाकी होने वाली ring (एनिमेट होती है)
`.rk-stories-ring-avatar`	StoriesRing	ring के अंदर की avatar इमेज
`.rk-stories-ring-list`	StoriesRingList	हॉरिज़ॉन्टल ring सूची का कंटेनर
`.rk-stories-ring-list-item`	StoriesRingList	Ring + नाम वाला कॉलम
`.rk-stories-ring-list-name`	StoriesRingList	हर ring के नीचे लेखक का नाम

थीमिंग

हर रंग, आकार, z-index और ट्रांज़िशन एक CSS custom property में है। कंपोनेंट का source छुए बिना थीम बदलने के लिए :root (या overlay के किसी भी ancestor) पर एक या कई override करें।

Token	डिफ़ॉल्ट	क्या नियंत्रित करता है
`--rk-stories-overlay-bg`	`#000`	फ़ुलस्क्रीन backdrop का रंग
`--rk-stories-overlay-z`	`9999`	Overlay का z-index
`--rk-stories-container-radius`	`12px`	story canvas के गोल कोने (डेस्कटॉप)
`--rk-stories-swipe-gap`	`16px`	नेविगेशन बटन और story canvas के बीच की दूरी
`--rk-stories-top-shade-height`	`120px`	header के पीछे ऊपर के gradient की ऊँचाई
`--rk-stories-top-shade-bg`	`linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%)`	ऊपर के gradient का रंग
`--rk-stories-ui-transition`	`200ms`	hideUIOnPause बदलने पर धुंधला होने की अवधि
`--rk-stories-nav-size`	`44px`	डेस्कटॉप prev/next बटन का आकार
`--rk-stories-nav-bg`	`rgba(255, 255, 255, 0.1)`	डेस्कटॉप नेविगेशन बटन का background
`--rk-stories-nav-bg-hover`	`rgba(255, 255, 255, 0.2)`	डेस्कटॉप नेविगेशन बटन का hover background
`--rk-stories-nav-fg`	`rgba(255, 255, 255, 0.7)`	डेस्कटॉप नेविगेशन बटन के आइकन का रंग
`--rk-stories-nav-fg-hover`	`#fff`	डेस्कटॉप नेविगेशन बटन के आइकन का hover रंग
`--rk-stories-error-bg`	`linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)`	एरर स्टेट का background gradient
`--rk-stories-error-fg`	`rgba(255, 255, 255, 0.5)`	एरर आइकन और टेक्स्ट का रंग
`--rk-stories-error-text-size`	`13px`	एरर संदेश का font size
`--rk-stories-video-bg`	`#000`	<video> के पीछे letterbox background
`--rk-stories-video-poster-transition`	`200ms`	वीडियो चलना शुरू होने पर poster के धुंधला होने की अवधि
`--rk-stories-header-top`	`18px`	story के ऊपर से header की वर्टिकल दूरी
`--rk-stories-header-padding`	`12px 16px`	header पंक्ति की अंदरूनी padding
`--rk-stories-header-avatar-size`	`32px`	Avatar की चौड़ाई/ऊँचाई
`--rk-stories-header-name-fg`	`#fff`	लेखक के नाम का रंग
`--rk-stories-header-name-size`	`14px`	लेखक के नाम का font size
`--rk-stories-header-time-fg`	`rgba(255, 255, 255, 0.6)`	कितनी देर पहले वाले टेक्स्ट का रंग
`--rk-stories-header-btn-fg`	`#fff`	Header के action आइकन का रंग (बंद, mute, pause)
`--rk-stories-heart-duration`	`800ms`	उभरने/धुंधला होने के एनिमेशन की अवधि
`--rk-stories-ring-spin-duration`	`4s`	देखने को stories बाकी होने वाली ring के घूमने की अवधि
`--rk-stories-ring-list-gap`	`12px`	सूची में rings के बीच की दूरी
`--rk-stories-ring-list-padding`	`12px`	ring सूची के चारों ओर की अंदरूनी padding
`--rk-stories-ring-list-name-size`	`12px`	हर ring के नीचे लेखक के नाम का font size

नीचे का snippet @reelkit/react-stories-player/styles.css के बाद लोड होने वाली stylesheet में डालें।

css

सुलभता

Overlay का root एक modal dialog है (role="dialog", aria-modal="true")। स्क्रीन रीडर की घोषणा बदलने के लिए ariaLabel सेट करें; डिफ़ॉल्ट "Stories player" है।

Overlay खुलने पर फ़ोकस पकड़ता है और बंद होने पर उसे trigger पर लौटा देता है। Tab और Shift+Tab अंदर के फ़ोकस होने वाले एलिमेंट में घूमते हैं; बाहर निकला फ़ोकस (बाहर क्लिक, प्रोग्राम से फ़ोकस) वापस खींच लिया जाता है। यह @reelkit/core के captureFocusForReturn और createFocusTrap से बना है।

कीबोर्ड शॉर्टकट

कुंजी	क्रिया
`ArrowLeft`	पिछली story
`ArrowRight`	अगली story
`Escape`	प्लेयर बंद करें