Add console messages documentation for browser warnings and extension errors

CONSOLE_MESSAGES.md

@@ -0,0 +1,192 @@
+# Console Messages Explanation
+
+This document explains the console messages you might see when using MPLayer (D'Tunes).
+
+## Normal/Expected Messages
+
+### 1. Tailwind CDN Warning
+
+```
+cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI
+```
+
+**What it means:** Tailwind CSS recommends using their build tools for production sites.
+
+**Why we use it:** MPLayer is designed to work without a build system. It's a static site that can be served from any web server without compilation or build steps. The Tailwind CDN is the simplest way to use Tailwind in this architecture.
+
+**Is it a problem?** No, this is just a recommendation. The CDN works fine for this use case. The warning is informational only.
+
+**Should you worry?** No. This is expected and by design.
+
+---
+
+### 2. Image Lazy Loading Message
+
+```
+[Intervention] Images loaded lazily and replaced with placeholders. Load events are deferred.
+```
+
+**What it means:** The browser is optimizing image loading for better performance.
+
+**Why it happens:** Modern browsers automatically lazy-load images to improve page load speed.
+
+**Is it a problem?** No, this is a browser optimization feature.
+
+**Should you worry?** No. This improves performance.
+
+---
+
+### 3. Forced Reflow Warnings
+
+```
+[Violation] Forced reflow while executing JavaScript took XXms
+```
+
+**What it means:** JavaScript is causing the browser to recalculate page layout multiple times.
+
+**Why it happens:** When JavaScript reads layout properties (like element size/position) and immediately modifies the DOM, the browser has to recalculate layout.
+
+**Is it a problem?** Only if it happens frequently and causes visible lag. The times shown (42-71ms) are generally acceptable.
+
+**Should you worry?** No, unless you notice performance issues. These are just performance hints, not errors.
+
+---
+
+## Browser Extension Messages (Not Our Code)
+
+### 4. Custom Element Already Defined Error
+
+```
+Uncaught Error: A custom element with name 'mce-autosize-textarea' has already been defined.
+    at webcomponents-ce.js:33:363
+    at overlay_bundle.js:149:5562
+```
+
+**What it means:** A browser extension (likely Microsoft Edge's built-in features) is trying to define a custom HTML element twice.
+
+**Why it happens:** Browser extensions can inject code into web pages. Sometimes they conflict with each other or with the page.
+
+**Is it from our code?** NO. This is from a browser extension. Notice the file names:
+- `webcomponents-ce.js` - Not one of our files
+- `overlay_bundle.js` - Not one of our files
+
+**Should you worry?** No. This doesn't affect MPLayer's functionality.
+
+**How to confirm:** Disable browser extensions and reload. The error will disappear.
+
+---
+
+### 5. 404 Error on "undefined:1"
+
+```
+undefined:1  Failed to load resource: the server responded with a status of 404 ()
+```
+
+**What it means:** Something is trying to load a resource that doesn't exist.
+
+**Why it happens:** This often comes from:
+- Browser extensions
+- Analytics/tracking scripts blocked by ad blockers
+- Temporary network issues
+- OAuth redirects (Spotify authentication)
+
+**Is it from our code?** Unlikely. The URL shows "undefined:1" which suggests external code.
+
+**Should you worry?** No, unless core functionality is broken (music doesn't play, playlists don't load, etc.).
+
+---
+
+## How to Get a Clean Console
+
+If you want to reduce console noise:
+
+### Option 1: Filter Console Messages
+
+In Chrome/Edge DevTools:
+1. Open Console (F12)
+2. Use the filter dropdown
+3. Select "Errors" only to hide warnings
+4. Or use the search box to filter specific messages
+
+### Option 2: Disable Verbose Warnings
+
+In the Console tab:
+1. Click the settings gear icon
+2. Uncheck "Violations" under "Console settings"
+
+### Option 3: Test in Incognito/Private Mode
+
+1. Open an incognito/private window
+2. Disable extensions in incognito mode
+3. Reload MPLayer
+4. Most extension-related errors will disappear
+
+---
+
+## Real Errors to Watch For
+
+These would indicate actual problems:
+
+### Authentication Errors
+```
+[JioSaavn Player Error] Spotify token exchange error
+[JioSaavn Player Error] Not authenticated with Spotify
+```
+**Action:** Re-authenticate with Spotify
+
+### API Errors
+```
+[JioSaavn Player Error] API Error: 401/403/429
+[JioSaavn Player Error] Cannot connect to music service
+```
+**Action:** Check internet connection, wait if rate-limited
+
+### Player Errors
+```
+[JioSaavn Player Error] Failed to load track
+[JioSaavn Player Error] Audio playback error
+```
+**Action:** Try a different track, check network connection
+
+---
+
+## Debug Mode
+
+MPLayer runs in debug mode by default (see `home/js/config.js`, line 28: `const DEBUG = true`).
+
+This means you'll see many informational messages prefixed with `[JioSaavn Player]`:
+- `Spotify: Authentication successful`
+- `Loading Spotify playlists...`
+- `Fetched X playlists`
+- `Processing track X/Y`
+- `✓ Matched: Song Name`
+
+**These are helpful for troubleshooting but are not errors.**
+
+To disable debug logging, you would need to edit `home/js/config.js` and set `DEBUG = false`, but this is **not recommended** as it makes troubleshooting harder.
+
+---
+
+## Summary
+
+**Most console messages you see are:**
+1. Informational warnings (Tailwind CDN, lazy loading)
+2. Browser extension conflicts (webcomponents, overlay scripts)
+3. Performance hints (forced reflow)
+4. Debug information from MPLayer
+
+**None of these prevent the app from working.**
+
+**Only worry if:**
+- Music doesn't play
+- Playlists don't load
+- Spotify authentication fails
+- You see actual JavaScript errors (not warnings) from our code files
+
+---
+
+## Related Documentation
+
+- [Spotify Setup Guide](./SPOTIFY_SETUP.md)
+- [Spotify Troubleshooting](./SPOTIFY_TROUBLESHOOTING.md)
+- [Spotify Redirect URI Setup](./SPOTIFY_REDIRECT_URI_SETUP.md)

SPOTIFY_REDIRECT_URI_SETUP.md

@@ -0,0 +1,123 @@
+# Spotify Redirect URI Configuration
+
+## Issue: "redirect_uri: Not matching configuration"
+
+This error occurs when the redirect URI sent in the OAuth request doesn't match exactly what's configured in your Spotify Developer Dashboard.
+
+## Current Redirect URIs
+
+The application uses these redirect URIs:
+
+1. **Root application** (`/index.html`): `https://play.dverse.fun/index.html`
+2. **Home application** (`/home/index.html`): `https://play.dverse.fun/home/index.html`
+
+## How to Configure in Spotify Developer Dashboard
+
+### Step 1: Access Your Spotify App Settings
+
+1. Go to [Spotify Developer Dashboard](https://developer.spotify.com/dashboard)
+2. Click on your app (or create a new one)
+3. Click on **"Settings"** button
+
+### Step 2: Add Redirect URIs
+
+In the **Redirect URIs** section, add **BOTH** of these URIs **EXACTLY** as shown:
+
+```
+https://play.dverse.fun/index.html
+https://play.dverse.fun/home/index.html
+```
+
+**Important Notes:**
+
+- ✅ **Include the full path** including the HTML file name
+- ✅ **Use HTTPS** (not HTTP) for production
+- ✅ **No trailing slashes**
+- ✅ **Match the protocol exactly** (https:// vs http://)
+- ✅ **Match the domain exactly** (including subdomains)
+- ✅ **Match the path exactly** (case-sensitive)
+
+### Step 3: Save Changes
+
+1. Click **"Add"** after entering each URI
+2. Click **"Save"** at the bottom of the page
+3. Wait a few seconds for changes to propagate
+
+### For Local Development
+
+If you're testing locally, also add these URIs:
+
+```
+http://localhost:8000/index.html
+http://localhost:8000/home/index.html
+```
+
+Or adjust the port number if you're using a different local server port.
+
+## Troubleshooting
+
+### Still Getting "redirect_uri: Not matching configuration"?
+
+1. **Check for typos**: The URI must match EXACTLY character-by-character
+2. **Check protocol**: Make sure you're using `https://` not `http://` (or vice versa)
+3. **Check trailing slashes**: The URIs should NOT have trailing slashes
+4. **Check path**: Make sure `/index.html` or `/home/index.html` is included
+5. **Wait**: Sometimes it takes a minute for Spotify to sync changes
+6. **Clear cache**: Try clearing browser cache and localStorage
+7. **Check URL in browser**: Make sure you're actually accessing the URL that matches the redirect URI
+
+### Common Mistakes
+
+❌ `https://play.dverse.fun` (missing the HTML file)
+❌ `https://play.dverse.fun/` (trailing slash)
+❌ `http://play.dverse.fun/index.html` (wrong protocol)
+❌ `https://play.dverse.fun/Index.html` (wrong case)
+❌ `https://play.dverse.fun/home` (missing the HTML file)
+
+✅ `https://play.dverse.fun/index.html` (correct)
+✅ `https://play.dverse.fun/home/index.html` (correct)
+
+## Updating Redirect URI in Code
+
+If you need to change the redirect URI (e.g., for a different domain):
+
+### For Root Application (`/index.html`)
+
+Edit line 752 in `/index.html`:
+
+```javascript
+redirectUri: 'https://your-domain.com/index.html',
+```
+
+### For Home Application (`/home/index.html`)
+
+Edit line 9 in `/home/js/spotify-auth.js`:
+
+```javascript
+redirectUri: 'https://your-domain.com/home/index.html',
+```
+
+**Important**: After changing the redirect URI in code, you MUST also update it in your Spotify Developer Dashboard!
+
+## Why This Error Happens
+
+Spotify requires the redirect URI to match EXACTLY for security reasons. This prevents attackers from:
+- Intercepting OAuth tokens
+- Redirecting users to malicious sites
+- Stealing user credentials
+
+The redirect URI acts as a security whitelist - only URLs you explicitly approve can receive the OAuth response.
+
+## Related Files
+
+- `/index.html` - Line 752 (spotifyManager.redirectUri)
+- `/home/js/spotify-auth.js` - Line 9 (spotifyAuth.redirectUri)
+- `SPOTIFY_SETUP.md` - General Spotify setup documentation
+
+## Support
+
+If you continue to have issues:
+1. Double-check all URIs match exactly
+2. Try removing and re-adding the URIs in Spotify Dashboard
+3. Verify your app is using the correct Client ID
+4. Check browser console for additional error messages