Orabana Video Gallery

A modern, responsive Angular video gallery component with playlist functionality. Perfect for showcasing product videos, tutorials, reviews, and more.

Features

• 🎥 Video Player: HTML5 video player with full controls
• 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile
• 🎬 Playlist Management: Side playlist with thumbnails and metadata
• ⭐ Rating System: Star-based rating display
• 👤 Author Information: Display author avatar, name, and video details
• 🎯 Active Video Indicator: "Now playing" indicator for current video
• 🖼️ Thumbnail Previews: Video thumbnails with duration overlay
• 🎨 Dark Theme: Modern dark theme with orange accent colors
• 🔄 Auto-switching: Click any playlist item to switch videos instantly

Installation

npm install @orabana/video-gallery

Usage

Basic Implementation

import { Component } from '@angular/core';
import { VideoGalleryComponent } from '@orabana/video-gallery';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [VideoGalleryComponent],
  template: `
    <orabana-video-gallery></orabana-video-gallery>
  `
})
export class HomeComponent { }

Custom Configuration

import { Component } from '@angular/core';
import { VideoGalleryComponent, VideoItem } from '@orabana/video-gallery';

@Component({
  selector: 'app-custom',
  standalone: true,
  imports: [VideoGalleryComponent],
  template: `
    <orabana-video-gallery
      [videos]="customVideos"
      [mainTitle]="'My Product Videos'"
      [playlistTitle]="'Available Videos'">
    </orabana-video-gallery>
  `
})
export class CustomComponent {
  customVideos: VideoItem[] = [
    {
      id: '1',
      title: 'Product Demo',
      subtitle: 'Marketing Team',
      duration: '2:30',
      thumbnail: 'assets/thumbnails/demo.jpg',
      videoUrl: 'assets/videos/demo.mp4',
      author: 'Marketing Team',
      authorLogo: 'assets/logos/marketing.png',
      rating: 4.8,
      viewCount: '15,234'
    }
    // ... more videos
  ];
}

API Reference

Component Inputs

| Property | Type | Default | Description | |----------|------|---------|-------------| | videos | VideoItem[] | Sample videos | Array of video objects to display | | mainTitle | string | 'Product Videos' | Main heading for the gallery | | playlistTitle | string | 'Videos for this product' | Heading for the playlist section |

VideoItem Interface

interface VideoItem {
  id: string;           // Unique identifier
  title: string;        // Video title
  subtitle: string;     // Video subtitle/author name
  duration: string;     // Video duration (e.g., "2:30")
  thumbnail: string;    // Thumbnail image URL
  videoUrl: string;     // Video file URL
  author: string;       // Author/creator name
  authorLogo: string;   // Author avatar URL
  rating: number;       // Rating (0-5)
  viewCount: string;    // View count display
}

Component Methods

| Method | Parameters | Description | |--------|------------|-------------| | selectVideo(index: number) | index: number | Switch to video at specified index | | getStars(rating: number) | rating: number | Get array for star display |

Styling

The component uses a dark theme with customizable CSS variables. You can override styles by targeting the component classes:

orabana-video-gallery {
  --primary-color: #ff6b35;      // Accent color
  --background-color: #000;       // Main background
  --card-background: #111;        // Card backgrounds
  --text-color: #fff;             // Primary text
  --secondary-text: #aaa;         // Secondary text
}

Key CSS Classes

• .video-gallery-container - Main container
• .video-player-section - Video player area
• .playlist-section - Playlist sidebar
• .playlist-item - Individual playlist items
• .playlist-item.active - Currently playing video
• .video-info - Video metadata section

Responsive Breakpoints

• Desktop: Full side-by-side layout (1024px+)
• Tablet: Stacked layout with grid playlist (768px-1024px)
• Mobile: Single column layout (< 768px)

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Examples

E-commerce Product Videos

Perfect for showcasing product demonstrations, customer reviews, and usage tutorials.

Educational Content

Great for course previews, lesson collections, and tutorial series.

Media Galleries

Ideal for video portfolios, testimonials, and promotional content.

Development

Building the Library

ng build video-gallery

Running Tests

ng test video-gallery

Local Development

ng serve

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - see LICENSE file for details.

Support

For issues and questions:

• 🐛 Report bugs
• 💡 Request features
• 📖 Documentation

Built with ❤️ using Angular