ग्रिड से प्लेयर तक

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

आज़माएँ

हर वर्ज़न ./api इम्पोर्ट करता है, जो आपके बैकएंड की जगह खड़ा है: posts वह सूची है जो कोई प्रोफ़ाइल या सर्च लोड करती, प्लेयर के ContentItem के आकार में, और thumbnailOf चुनता है कि ग्रिड का सेल कौन-सी तस्वीर दिखाए। दोनों की जगह अपना डेटा लगाएँ।

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

// Stands in for your backend: the posts a profile or a search result would
// load. Each one has the shape of `ContentItem` from the reel player of your
// framework, so the list goes to the player as it is.

export interface Post {
  id: string;
  media: {
    id: string;
    type: 'image' | 'video';
    src: string;
    poster?: string;
    aspectRatio: number;
  }[];
  author: { name: string; avatar: string };
  likes: number;
  description: string;
}

const kAuthors = ['Alex Johnson', 'Sarah Miller', 'Mike Chen', 'Emma Davis'];

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

export const posts: Post[] = Array.from({ length: 12 }, (_, i) => {
  const isVideo = i % 4 === 0;
  const n = (i % (isVideo ? 3 : 9)) + 1;
  return {
    id: `post-${i + 1}`,
    media: [
      isVideo
        ? {
            id: `video-${i + 1}`,
            type: 'video' as const,
            src: cdnUrl(`samples/videos/video-${pad(n)}.mp4`),
            poster: cdnUrl(`samples/videos/video-poster-${pad(n)}.jpg`),
            aspectRatio: 16 / 9,
          }
        : {
            id: `image-${i + 1}`,
            type: 'image' as const,
            src: cdnUrl(`samples/images/image-${pad(n)}.jpg`),
            aspectRatio: 2 / 3,
          },
    ],
    author: {
      name: kAuthors[i % kAuthors.length],
      avatar: cdnUrl(`samples/avatars/avatar-${pad((i % 8) + 1)}.jpg`),
    },
    likes: 120 + i * 37,
    description: `Post ${i + 1}`,
  };
});

/** The picture a grid cell shows: a video's poster, or the image itself. */
export const thumbnailOf = (post: Post) =>
  post.media[0].poster ?? post.media[0].src;

PreviewCode

GridToPlayer.tsx

PreviewCode

GridToPlayer.vue

PreviewCode

grid-to-player.component.ts

कोई पोस्ट खोलें, कुछ बार स्वाइप करें या ↓ दबाएँ, फिर Escape से बंद करें: ग्रिड उस पोस्ट तक स्क्रॉल हो जाता है जहाँ आप रुके थे, और फ़ोकस उसके थंबनेल पर होता है।

यह क्यों काम करता है

• प्लेयर वहीं खुलता है जहाँ दर्शक ने टैप किया। initialIndex थंबनेल का index लेता है, और पूरी सूची content में जाती है, ताकि दर्शक चुनी हुई पोस्ट से आगे भी स्वाइप कर सके। दोनों React, Vue और Angular में प्लेयर के prop हैं।
• ग्रिड जानता है कि दर्शक कहाँ रुका। स्लाइड बदलने का कॉलबैक दर्शक की पहुँची हर पोस्ट बताता है, और रेसिपी आख़िरी वाली याद रखती है। यह प्लेयर के कॉलबैक, इवेंट और आउटपुट में सूचीबद्ध है।
• फ़ोकस सही थंबनेल पर लौटता है। बंद होते समय प्लेयर फ़ोकस उसी एलिमेंट को लौटा देता है जिसने उसे खोला था, यह उसका ऐक्सेसिबिलिटी वादा है। यह वापसी close हैंडलर चलने के बाद होती है, इसलिए हैंडलर के अंदर सेट किया गया फ़ोकस पलट जाएगा। रेसिपी एक टास्क रुकती है, फिर आख़िरी पोस्ट के थंबनेल को स्क्रॉल करके दिखाती है और उस पर फ़ोकस करती है।
• थंबनेल बटन हैं। हर सेल लेबल वाला <button> है, इसलिए ग्रिड Tab और Enter से चलता है, स्क्रीन रीडर उस पोस्ट का नाम बताता है जो वह खोलता है, और प्लेयर के पास फ़ोकस लौटाने के लिए एक फ़ोकस होने लायक एलिमेंट होता है, जैसा उसका ऐक्सेसिबिलिटी सेक्शन बताता है।
• ग्रिड के सेल को तस्वीर चाहिए, वीडियो नहीं। thumbnailOf वीडियो का poster लेता है, जो MediaItem का एक फ़ील्ड है, और इमेज को जैसी है वैसी, इसलिए ग्रिड कभी ऐसा वीडियो लोड नहीं करता जिसे वह चलाता नहीं।
• खुली पोस्ट एड्रेस बार में चाहिए? URL स्टेट वाला प्लेयर दिख रही पोस्ट को URL में रखता है, ताकि उसे शेयर किया जा सके और बैक बटन से बंद किया जा सके।