vertical-video-kit

vertical-video-kit

A React component library for building vertical video feed experiences like TikTok, Instagram Reels, or YouTube Shorts.

Features

• 📱 Optimized for vertical video layouts
• 🔄 Smart video preloading with bandwidth optimization
• 📺 Support for both MP4 and HLS (m3u8) formats
• 🌐 Cross-browser compatibility with HLS.js for non-Safari browsers
• 📦 Lightweight with minimal dependencies

Installation

npm install vertical-video-kit
# or
yarn add vertical-video-kit

Make sure to also install the peer dependencies if not already in your project:

npm install react react-dom hls.js
# or
yarn add react react-dom hls.js

Usage

VideoCard Component

The VideoCard component handles video playback with proper lifecycle management:

import { VideoCard } from 'vertical-video-kit';

function VideoItem({ videoUrl, isActive }) {
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <VideoCard 
        src={videoUrl} 
        isActive={isActive} 
        muted={false} 
      />
    </div>
  );
}

useVideoPreload Hook

The useVideoPreload hook optimizes bandwidth by preloading adjacent videos:

import { useVideoPreload, VideoCard } from 'vertical-video-kit';

function VideoFeed() {
  const videos = ['video1.mp4', 'video2.mp4', 'video3.mp4'];
  const [currentIndex, setCurrentIndex] = useState(0);
  
  // Preload adjacent videos
  useVideoPreload(videos, currentIndex);
  
  return (
    <div>
      {videos.map((video, index) => (
        <VideoCard 
          key={index}
          src={video}
          isActive={index === currentIndex}
          muted={true}
        />
      ))}
    </div>
  );
}

Complete Example

Here's a complete example of a basic vertical video feed:

import React, { useState, useEffect } from 'react';
import { VideoCard, useVideoPreload } from 'vertical-video-kit';

const VerticalFeed = ({ videos }) => {
  const [activeIndex, setActiveIndex] = useState(0);
  
  // Preload adjacent videos
  useVideoPreload(videos, activeIndex);
  
  // Handle scroll to determine active video
  useEffect(() => {
    const handleScroll = () => {
      // Simple implementation - in a real app, you'd determine
      // which video is most visible in the viewport
      const newIndex = Math.floor(window.scrollY / window.innerHeight);
      if (newIndex >= 0 && newIndex < videos.length) {
        setActiveIndex(newIndex);
      }
    };
    
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [videos.length]);
  
  return (
    <div>
      {videos.map((videoUrl, index) => (
        <div 
          key={index}
          style={{ 
            height: '100vh', 
            width: '100%',
            scrollSnapAlign: 'start'
          }}
        >
          <VideoCard 
            src={videoUrl}
            isActive={index === activeIndex}
            muted={false}
          />
        </div>
      ))}
    </div>
  );
};

export default VerticalFeed;

API Reference

VideoCard

Prop	Type	Default	Description
src	string	required	URL of the video (supports .mp4 and .m3u8)
isActive	boolean	required	Whether this video is currently active (plays when true, pauses when false)
muted	boolean	true	Whether the video should be muted

useVideoPreload

useVideoPreload(videoUrls: string[], currentIndex: number)

• videoUrls: Array of video URLs to manage
• currentIndex: Index of the currently active video

License

MIT