React Riyils

React Riyils is a library for building high-performance vertical video experiences with Instagram/TikTok-style swiping, explore grids, and adaptive playback.

React Riyils handles browser autoplay policies, resource management, and mobile gesture interactions.

Live Demo

Core Documentation

• Quick Start & Setup - Installation, CSS imports, and the mandatory Playback Provider.
• Components Reference - Detailed props and types for RiyilsViewer, RiyilsCarousel, and RiyilsExplore.
• Interaction & Gestures - Mobile gestures and haptic feedback.
• Monetization - Ad Injection system.
• Keyboard Shortcuts - Desktop navigation support.
• Observability & Analytics - Telemetry infrastructure, log levels, and custom instrumentation.

Key Features

• Deterministic Playback: Enforcement of browser autoplay rules with automatic muted fallbacks.
• Adaptive Quality: Support for multiple quality variants and HLS via hls.js.
• Resource Management: Dynamic attachment/detachment of media elements to save memory.
• Draggable MiniPlayer: Picture-in-Picture implementation consistent across browsers.
• Professional Telemetry: Standardized event tracking with severity filtering and rich metadata.

Quick Example

import { 
  PlaybackControllerProvider, 
  RiyilsObserverProvider, 
  RiyilsCarousel,
  RiyilsViewer,
  RiyilsExplore
} from 'react-riyils'
import 'react-riyils/dist/index.css'

const MyVideoApp = () => (
  <RiyilsObserverProvider onEvent={console.log} logLevel="info">
    <PlaybackControllerProvider>
      <RiyilsCarousel
        videos={videos}
        onVideoChange={index => console.log('Active index:', index)}
      />

      <RiyilsViewer
        videos={videos}
        initialIndex={0}
        onClose={() => {}}
      />

      <RiyilsExplore items={exploreItems} />
    </PlaybackControllerProvider>
  </RiyilsObserverProvider>
)

License

MIT © illegal-instruction-co