@orabana/video-gallery
Version:
A modern, responsive Angular video gallery component with playlist functionality
1 lines • 12.4 kB
Source Map (JSON)
{"version":3,"file":"orabana-video-gallery.mjs","sources":["../../../../projects/orabana/video-gallery/src/lib/video-gallery.service.ts","../../../../projects/orabana/video-gallery/src/lib/video-gallery.component.ts","../../../../projects/orabana/video-gallery/src/lib/video-gallery.component.html","../../../../projects/orabana/video-gallery/src/public-api.ts","../../../../projects/orabana/video-gallery/src/orabana-video-gallery.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class VideoGalleryService {\n\n constructor() { }\n}\n","import { Component, OnInit, Input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nexport interface VideoItem {\n id: string;\n title: string;\n subtitle: string;\n duration: string;\n thumbnail: string;\n videoUrl: string;\n author: string;\n authorLogo: string;\n rating: number;\n viewCount: string;\n}\n\n@Component({\n selector: 'orabana-video-gallery',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './video-gallery.component.html',\n styleUrls: ['./video-gallery.component.scss']\n})\nexport class VideoGalleryComponent implements OnInit {\n @Input() mainTitle: string = 'Product Videos';\n @Input() playlistTitle: string = 'Videos for this product';\n @Input() videos: VideoItem[] = [];\n \n currentVideoIndex = 0;\n currentVideo: VideoItem | null = null;\n\n // Default sample videos - used as fallback when no videos input is provided\n private defaultVideos: VideoItem[] = [\n {\n id: '1',\n title: 'Replacement foods',\n subtitle: 'Giselle',\n duration: '0:58',\n thumbnail: 'https://placehold.co/160x90/ff6b35/ffffff?text=Video+1',\n videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',\n author: 'Giselle',\n authorLogo: 'https://placehold.co/40x40/cccccc/333333?text=G',\n rating: 4.5,\n viewCount: '38028'\n },\n {\n id: '2',\n title: 'Customer Review: These are like a photo model of strawberries. WOW',\n subtitle: 'Able',\n duration: '0:52',\n thumbnail: 'https://placehold.co/160x90/ff3366/ffffff?text=Video+2',\n videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',\n author: 'Able',\n authorLogo: 'https://placehold.co/40x40/cccccc/333333?text=A',\n rating: 5.0,\n viewCount: '15432'\n },\n {\n id: '3',\n title: 'Fresas en mal estado',\n subtitle: 'Edith ramos',\n duration: '0:10',\n thumbnail: 'https://placehold.co/160x90/33ff66/ffffff?text=Video+3',\n videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',\n author: 'Edith ramos',\n authorLogo: 'https://placehold.co/40x40/cccccc/333333?text=E',\n rating: 2.0,\n viewCount: '8921'\n },\n {\n id: '4',\n title: 'Rotten Organic Strawberries',\n subtitle: 'eighth note',\n duration: '0:18',\n thumbnail: 'https://placehold.co/160x90/3366ff/ffffff?text=Video+4',\n videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',\n author: 'eighth note',\n authorLogo: 'https://placehold.co/40x40/cccccc/333333?text=8',\n rating: 1.5,\n viewCount: '5643'\n },\n {\n id: '5',\n title: 'Strawberry Up Close Look - Best Way to Cut and Eat',\n subtitle: 'Technology Teardown',\n duration: '2:10',\n thumbnail: 'https://placehold.co/160x90/ffcc33/ffffff?text=Video+5',\n videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',\n author: 'Technology Teardown',\n authorLogo: 'https://placehold.co/40x40/cccccc/333333?text=T',\n rating: 4.8,\n viewCount: '42156'\n },\n {\n id: '6',\n title: 'Customer Review: WROMS! WARNING!',\n subtitle: 'Concerned Customer',\n duration: '1:25',\n thumbnail: 'https://placehold.co/160x90/ff9933/ffffff?text=Video+6',\n videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4',\n author: 'Concerned Customer',\n authorLogo: 'https://placehold.co/40x40/cccccc/333333?text=C',\n rating: 1.0,\n viewCount: '12890'\n }\n ];\n\n ngOnInit() {\n // Use provided videos or fall back to default sample videos\n if (!this.videos || this.videos.length === 0) {\n this.videos = this.defaultVideos;\n }\n \n // Set current video to first video if available\n if (this.videos.length > 0) {\n this.currentVideo = this.videos[this.currentVideoIndex];\n }\n }\n\n selectVideo(index: number) {\n if (index >= 0 && index < this.videos.length) {\n this.currentVideoIndex = index;\n this.currentVideo = this.videos[index];\n }\n }\n\n getStars(rating: number): number[] {\n const fullStars = Math.floor(rating);\n const hasHalfStar = rating % 1 !== 0;\n const stars = Array(fullStars).fill(1);\n if (hasHalfStar) stars.push(0.5);\n return stars;\n }\n\n onVideoLoaded() {\n // Handle video loaded event if needed\n console.log('Video loaded:', this.currentVideo?.title);\n }\n}\n","<div class=\"video-gallery-container\">\n <!-- Main Title -->\n <h1 class=\"main-title\">{{mainTitle}}</h1>\n \n <div class=\"video-gallery-content\">\n <!-- Video Player Section -->\n <div class=\"video-player-section\">\n <div class=\"video-player\">\n <video \n #videoPlayer\n [src]=\"currentVideo?.videoUrl\" \n controls \n class=\"video-element\"\n (loadedmetadata)=\"onVideoLoaded()\">\n Your browser does not support the video tag.\n </video>\n </div>\n \n <!-- Video Info -->\n <div class=\"video-info\" *ngIf=\"currentVideo\">\n <div class=\"video-details\">\n <div class=\"author-info\">\n <img [src]=\"currentVideo.authorLogo\" [alt]=\"currentVideo.author\" class=\"author-logo\">\n <div class=\"video-meta\">\n <h3 class=\"video-title\">{{currentVideo.title}}</h3>\n <p class=\"video-subtitle\">{{currentVideo.subtitle}}</p>\n <div class=\"video-stats\">\n <div class=\"rating\">\n <span class=\"stars\">\n <span *ngFor=\"let star of getStars(currentVideo.rating)\" class=\"star\">★</span>\n </span>\n <span class=\"rating-count\">{{currentVideo.rating}}</span>\n </div>\n <span class=\"view-count\">{{currentVideo.viewCount}}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Playlist Section -->\n <div class=\"playlist-section\">\n <h2 class=\"playlist-title\">{{playlistTitle}}</h2>\n <div class=\"playlist\">\n <div \n *ngFor=\"let video of videos; let i = index\" \n class=\"playlist-item\"\n [class.active]=\"currentVideoIndex === i\"\n (click)=\"selectVideo(i)\">\n \n <div class=\"thumbnail-container\">\n <img [src]=\"video.thumbnail\" [alt]=\"video.title\" class=\"thumbnail\">\n <span class=\"duration\">{{video.duration}}</span>\n <div class=\"play-overlay\" *ngIf=\"currentVideoIndex !== i\">\n <span class=\"play-icon\">▶</span>\n </div>\n </div>\n \n <div class=\"video-item-info\">\n <h4 class=\"item-title\">{{video.title}}</h4>\n <p class=\"item-subtitle\">{{video.subtitle}}</p>\n <div class=\"now-playing\" *ngIf=\"currentVideoIndex === i\">\n <span class=\"now-playing-text\">Now playing</span>\n <span class=\"playing-icon\">▶</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n","/*\n * Public API Surface of video-gallery\n */\n\nexport * from './lib/video-gallery.service';\nexport * from './lib/video-gallery.component';\nexport type { VideoItem } from './lib/video-gallery.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}