5.6 KiB

Raw Permalink Blame History

🎬 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

Enter YouTube URL - Any valid YouTube video URL
Preview (Optional) - Click "Preview Info" to see extracted metadata
Customize Title - Modify title if desired (auto-filled from preview)
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! 🚀

5.6 KiB Raw Permalink Blame History