youtube-automation/microsite

🎬 YouTube to Directus Microsite

A smart, local web interface for adding YouTube videos to your Directus media_items collection with automatic metadata extraction.

✨ Features

🧠 Smart Metadata Extraction

• Automatic Title Detection - Extracts real YouTube video titles
• Description Extraction - Gets video descriptions (up to 500 chars)
• Channel Information - Identifies video creator/channel
• Duration & Views - Captures video length and view counts
• Upload Date - Records original upload timestamps
• Thumbnail Processing - Downloads and links high-quality thumbnails

🎯 User-Friendly Interface

• Clean Modern Design - Gradient backgrounds and smooth animations
• Preview Functionality - See video info before adding to Directus
• Auto-Fill Titles - Automatically populates custom title field
• Rich Feedback - Detailed success/error messages with metadata
• Quick Examples - One-click test URLs for demo purposes

🔄 Directus Integration

• Direct API Communication - No intermediary services required
• Comprehensive Fields - Populates title, description, channel, duration, views, etc.
• Immediate Thumbnail Upload - Downloads and links thumbnails instantly
• Fallback Support - Watcher service handles any missed thumbnails

🚀 Quick Start

# Start the microsite
./run_microsite.sh

# Access in browser
open http://localhost:5001

📋 Requirements

• Python 3.11+ with virtual environment
• Directus Instance with valid access token
• Network Access to YouTube and your Directus server
• Flask and requests libraries (auto-installed)

🎯 Usage

Adding Videos

1. Enter YouTube URL - Any valid YouTube video URL
2. Preview (Optional) - Click "Preview Info" to see extracted metadata
3. Customize Title - Modify title if desired (auto-filled from preview)
4. Add to Directus - Creates media_item with full metadata and thumbnail

Supported URL Formats

✅ https://www.youtube.com/watch?v=dQw4w9WgXcQ
✅ https://youtu.be/dQw4w9WgXcQ
✅ https://youtube.com/embed/dQw4w9WgXcQ
✅ https://m.youtube.com/watch?v=dQw4w9WgXcQ

📊 Smart Metadata Example

When you add a video, the system extracts:

{
  "title": "Never Gonna Give You Up",
  "description": "The official video for Rick Astley - Never Gonna Give You Up...",
  "channel_name": "Rick Astley",
  "duration": 212,
  "duration_formatted": "3:32",
  "view_count": 1400000000,
  "view_count_formatted": "1.4B views",
  "upload_date": "2009-10-25T06:57:33+00:00",
  "video_id": "dQw4w9WgXcQ",
  "thumbnail_url": "https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg"
}

🎨 Interface Screenshot

The microsite features:

• Responsive Design - Works on desktop and mobile
• Loading States - Clear visual feedback during processing
• Rich Results - Detailed success messages with all extracted metadata
• Error Handling - Friendly error messages for invalid URLs or network issues

⚙️ Configuration

The microsite uses the same .env configuration as the main project:

DIRECTUS_URL="https://your-directus-instance.com/"
DIRECTUS_TOKEN="your-access-token"

🔄 Integration with Watcher Service

The microsite works seamlessly with the existing watcher service:

• Immediate Processing - Tries to download thumbnails immediately
• Fallback Safety - Watcher service catches any missed thumbnails
• No Conflicts - Both services can run simultaneously
• Consistent Data - Uses same Directus client and field mappings

📈 Benefits Over Manual Entry

✅ 10x Faster - No manual copying of titles and descriptions
✅ 100% Accurate - Extracts official metadata directly from YouTube
✅ Rich Data - Captures views, duration, upload dates automatically
✅ Consistent Format - Standardized data structure across all entries
✅ Thumbnail Automation - No manual thumbnail downloading required

🎯 Perfect For

• Content Curators building YouTube video collections
• Researchers organizing video references with metadata
• Content Managers maintaining media libraries
• Developers who want a simple UI for bulk video entry
• Anyone tired of manually copying YouTube metadata

🔧 Technical Details

Architecture

• Flask Backend - Lightweight Python web server
• Smart Scraping - Multiple extraction methods for reliability
• Direct API Integration - Communicates directly with Directus REST API
• Error Resilience - Graceful fallbacks when metadata extraction fails

File Structure

microsite/
├── app.py                 # Main Flask application
├── templates/
│   └── index.html        # Web interface
├── run_microsite.sh      # Startup script
└── README.md            # This file

API Endpoints

• GET / - Main interface
• POST /add_video - Process and add video
• GET /preview - Preview video metadata
• GET /status - Service health check

🎉 Ready to Use!

The microsite is production-ready and can handle:

• ✅ Public YouTube videos
• ✅ Unlisted videos (with direct URLs)
• ✅ Network interruptions (graceful error handling)
• ✅ Invalid URLs (clear error messages)
• ✅ Concurrent usage (multiple users simultaneously)

Start adding YouTube videos to your Directus collection with rich metadata in seconds! 🚀