@orabana/video-gallery/README.md

A modern, responsive Angular video gallery component with playlist functionality

# 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

```bash
npm install @orabana/video-gallery
```

## Usage

### Basic Implementation

```typescript
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

```typescript
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

```typescript
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:

```scss
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

```bash
ng build video-gallery
```

### Running Tests

```bash
ng test video-gallery
```

### Local Development

```bash
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](LICENSE) file for details.

## Support

For issues and questions:
- 🐛 [Report bugs](https://github.com/your-org/orabana-libs/issues)
- 💡 [Request features](https://github.com/your-org/orabana-libs/issues)
- 📖 [Documentation](https://github.com/your-org/orabana-libs/wiki)

---

Built with ❤️ using Angular