New Page — Ugh Worldwide

  
    /
 * VideoItem Component
 * Displays a single YouTube video with thumbnail, title, and publication date
 * 
 * Requirements: 4.1, 4.2, 4.3, 4.4, 7.3
 */

/
 * VideoItem class
 * Creates a video item component with thumbnail, title, and date
 */
export class VideoItem {
  /
   * Constructor accepting VideoData object
   * @param {Object} video - VideoData object { id, title, thumbnail, publishedAt, url }
   */
  constructor(video) {
    this.video = video;
  }

  /
   * Render method with thumbnail, title, and date
   * @returns {HTMLElement} Video item element
   */
  render() {
    const container = document.createElement('div');
    container.className = 'video-item';
    container.setAttribute('data-video-id', this.video.id);
    
    // Create thumbnail wrapper for aspect ratio
    const thumbnailWrapper = document.createElement('div');
    thumbnailWrapper.className = 'video-item__thumbnail-wrapper';
    
    // Create thumbnail image with lazy loading
    const thumbnail = document.createElement('img');
    thumbnail.src = this.video.thumbnail;
    thumbnail.alt = this.video.title;
    thumbnail.className = 'video-item__thumbnail';
    thumbnail.setAttribute('loading', 'lazy'); // Lazy loading attribute
    
    thumbnailWrapper.appendChild(thumbnail);
    
    // Create title element
    const title = document.createElement('h3');
    title.className = 'video-item__title';
    title.textContent = this.video.title;
    
    // Create publication date element
    const date = document.createElement('time');
    date.className = 'video-item__date';
    date.setAttribute('datetime', this.video.publishedAt);
    date.textContent = new Date(this.video.publishedAt).toLocaleDateString();
    
    // Assemble the component
    container.appendChild(thumbnailWrapper);
    container.appendChild(title);
    container.appendChild(date);
    
    // Add click handler
    container.addEventListener('click', () => this.handleClick());
    
    return container;
  }

  /**
   * Handle click method to open YouTube URL in new tab
   */
  handleClick() {
    window.open(this.video.url, '_blank');
  }
}
  