YouTube Media Library Implementation

Overview

The AMW YouTube Media Library is a comprehensive system that automatically fetches and displays videos from the AMW YouTube channel. It includes features like genre categorization, filtering, and a custom video player, all designed to showcase AMW's video content in an engaging way.

Key Features

• Automatic YouTube Integration: Fetches videos from the AMW YouTube channel
• Genre Extraction: Automatically extracts genre tags from video descriptions
• Advanced Filtering: Filter videos by genre, artist, and more
• Custom Video Player: Branded video player with custom controls
• Hourly Updates: Automatically checks for new videos every hour

Technical Implementation

YouTube API Integration

The library uses the YouTube Data API v3 to fetch videos from the AMW channel. The main functions are:

• fetchYouTubeVideos: Fetches videos from the YouTube API
• extractGenresFromDescription: Extracts genre tags from video descriptions
• syncYouTubeVideos: Syncs videos with the local database

Cron Job for Hourly Updates

The system uses a scheduled deployment job to check for new videos every hour. This is configured in the site scheduler config:

{
  "crons": [
    {
      "path": "/api/cron/youtube-sync",
      "schedule": "0 * * * *"
    }
  ]
}

The cron job calls the /api/cron/youtube-sync endpoint, which is secured with the CRON_SECRET environment variable. This ensures that only authorized requests can trigger the synchronization.

Environment Variables

The YouTube Media Library requires two environment variables:

• YOUTUBE_API_KEY: Your YouTube Data API key
• CRON_SECRET: Secret key for securing cron job endpoints

Genre Extraction Algorithm

The library includes a sophisticated algorithm for extracting genre information from video descriptions:

• Looks for hashtags (e.g., #techno, #house)
• Searches for genre keywords in the description text
• Maps common variations to standardized genre names

Making Modifications

Modifying the Genre Extraction

If you want to add or modify the genres that are extracted from video descriptions, you can edit the extractGenresFromDescription function in lib/youtube-api.ts:

// Function to extract genres from video description
export function extractGenresFromDescription(description: string): VideoGenre[] {
  const genreMap: Record<string, VideoGenre> = {
    house: "House",
    "tech house": "Tech House",
    techhouse: "Tech House",
    // Add or modify genre mappings here
  }
  
  // Rest of the function...
}

Changing the Cron Schedule

To change how often the system checks for new videos, modify the schedule property in the scheduler config. The schedule uses the standard cron syntax:

{
  "crons": [
    {
      "path": "/api/cron/youtube-sync",
      "schedule": "0 */2 * * *"  // Every 2 hours
    }
  ]
}

Customizing the Video Player

The custom video player can be modified in components/video-player.tsx. You can change the appearance, controls, and behavior of the player.

Modifying the UI

The main UI components for the YouTube Media Library are:

• app/media-library/page.tsx: The main media library page
• app/videos/page.tsx: The videos page with genre filtering
• components/youtube-gallery/youtube-gallery.tsx: The gallery component used on the home page

Testing the Synchronization

You can test the synchronization manually in several ways:

1. Using the API directly: Make a GET request to /api/cron/youtube-sync with the Authorization header set to Bearer YOUR_CRON_SECRET.
2. Using the UI: The media library page includes a "Sync Now" button that triggers the synchronization.
3. Deployment Dashboard: You can manually trigger the cron job from the deployment dashboard under the "Cron Jobs" section.

Troubleshooting

If you encounter issues with the YouTube Media Library, check the following:

• Environment Variables: Ensure both YOUTUBE_API_KEY and CRON_SECRET are set correctly in your deployment environment.
• API Quota: The YouTube Data API has quota limits. If you're hitting these limits, consider reducing the frequency of checks.
• Video Privacy: Ensure that videos on your YouTube channel are set to "Public".
• Cron Job Status: Check the deployment dashboard to see if the cron job is running correctly.
• Syntax Errors: If you encounter "Unexpected Token" errors or other syntax issues:
  • Check for missing closing tags or brackets in your JSX components
  • Verify that all imported components are properly exported from their source files
  • Look for mismatched quotes or template literals in your code
  • Ensure all JSX expressions are properly wrapped in curly braces
  • Check for trailing commas in object or array literals that might cause issues
  • Use a linter like ESLint to automatically detect syntax errors
  • If the error is in a specific file, try commenting out sections to isolate the problem

Common Syntax Error Solutions

Here are some common syntax errors and their solutions:

// Error: Unexpected token '<'
// Problem: Missing import for a component
<SomeComponent /> // SomeComponent is not imported

// Solution:
import { SomeComponent } from '@/components/some-component'
<SomeComponent />

// Error: Unexpected token ')'
// Problem: Mismatched parentheses or brackets
function Component({ prop1, prop2) { // Missing closing curly brace

// Solution:
function Component({ prop1, prop2 }) { // Fixed closing curly brace

// Error: Unexpected token, expected "}"
// Problem: Unclosed JSX expression
<div>
  {videos.map(video => (
    <VideoCard key={video.id} video={video}
  ))}
</div>

// Solution:
<div>
  {videos.map(video => (
    <VideoCard key={video.id} video={video} />
  ))}
</div>

If you're still experiencing issues after checking these common problems, try the following:

1. Restart your development server
2. Clear your browser cache
3. Check the browser console for more detailed error messages
4. Verify that all your dependencies are installed correctly
5. If the error is in a specific component, try replacing it temporarily with a simpler version to isolate the issue