YouTube Playlist Visualizer

A tool to visualize YouTube playlists as scatter plots showing the relationship between upload date and view count.

Features

• Fetches all videos from any public YouTube playlist
• NEW: Support for private playlists (Watch Later, Liked Videos) via Google OAuth
• Displays videos on a scatter plot (X-axis: Upload Date, Y-axis: Views)
• Shows playlist statistics (total videos, total views, average views, most viewed)
• Click any point to open the video on YouTube
• Responsive design
• Secure authentication with httpOnly cookies

Setup

See SETUP.md for complete setup instructions.

Quick Start (Public Playlists Only)

For public playlists, you only need a YouTube API key:

1. Get a YouTube Data API v3 key from Google Cloud Console
2. Add it to Netlify environment variables as YOUTUBE_API_KEY

Full Setup (Private Playlists Support)

To access private playlists like Watch Later (WL) or Liked Videos (LL):

1. Create a Google OAuth client in Google Cloud Console
2. Add these environment variables to Netlify:
   • YOUTUBE_API_KEY - Your YouTube API key
   • GOOGLE_CLIENT_ID - OAuth client ID
   • GOOGLE_CLIENT_SECRET - OAuth client secret (sensitive)
   • SESSION_SECRET - Random 32+ character string (sensitive)

See SETUP.md for detailed step-by-step instructions.

Usage

For Public Playlists

1. Visit /youtube-playlist-viz/
2. Enter a YouTube playlist ID or paste a full playlist URL
3. Click "Load Playlist"
4. View the scatter plot and statistics

For Private Playlists (Watch Later, Liked Videos)

1. Visit /youtube-playlist-viz/
2. Click "Sign in with Google" (top right)
3. Authorize the application
4. Enter the special playlist ID:
   • Watch Later: WL
   • Liked Videos: LL
5. Click "Load Playlist"
6. View your private playlist visualization

Playlist ID Examples

• Public playlist URL: https://www.youtube.com/playlist?list=PLrAXtmErZgOeiKm4sgNOknGvNjby9efdf
• Public playlist ID: PLrAXtmErZgOeiKm4sgNOknGvNjby9efdf
• Watch Later: WL (requires sign-in)
• Liked Videos: LL (requires sign-in)

Technical Details

• Frontend: Vanilla JavaScript with Chart.js for visualization
• Backend: Netlify Functions (serverless) for YouTube API and OAuth
• API: YouTube Data API v3
• Authentication: Google OAuth 2.0 with secure session management
• Security: Encrypted httpOnly cookies, no tokens in localStorage
• Caching: Public playlists cached for 1 hour, private playlists not cached

Files

• index.html - Main page with visualizer UI
• /netlify/functions/youtube-playlist.mjs - Serverless function for YouTube API calls
• /netlify/functions/auth-google-start.mjs - OAuth initiation
• /netlify/functions/auth-google-callback.mjs - OAuth callback handler
• /netlify/functions/auth-status.mjs - Check authentication status
• /netlify/functions/auth-logout.mjs - Sign out handler
• /netlify/functions/_session.mjs - Session management utilities
• SETUP.md - Detailed setup instructions
• README.md - This file