Add custom API key support for private playlists

[Copilot]

Users can now access private YouTube playlists by providing their own API key. The key is stored in browser localStorage and used for all YouTube API calls when present, falling back to the default key otherwise.

Changes

New Component

• ApiKeyInput.jsx - Collapsible UI for entering/clearing custom API keys with localStorage persistence

API Key Propagation

• App.jsx - Manages custom API key state at root level
• HeroSection.jsx - Renders ApiKeyInput component
• Input.jsx - Uses custom key for playlist metadata and items fetching
• Results.jsx - Passes custom key to video details hook
• useVideoDurations.js - Uses custom key for video duration/channel API calls

// All API calls now follow this pattern
const apiKey = customApiKey || import.meta.env.VITE_YOUTUBE_API_KEY;
const url = `https://www.googleapis.com/youtube/v3/...&key=${apiKey}`;

Documentation

• README.md - Added "Accessing Private Playlists" section with setup instructions

Screenshots

Collapsed state:

Expanded with API key input:

Security Note

API key is stored in clear text in localStorage by design—it must be readable to authenticate with YouTube's API. Users are informed the key is stored locally and never transmitted to our servers.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add support to private playlist</issue_title>
<issue_description>One of my playlist is private.
Is it possiable to add support to private playlist?</issue_description>

Comments on the Issue (you are @copilot in this section)

@marzzuki Hey @lunakunada ! 😊 Right now, the platform only works with public playlists. The easiest workaround is to make your playlist public for a bit, then switch it back to private afterward. I’ll also keep this in mind, I’m planning to add an option to let users upload their own YouTube API key so the platform can access private playlists too.

• Fixes Add support to private playlist #8

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
playlist-bulletize	Ready	Preview	Comment	Oct 27, 2025 8:11am