Add templates, tests, and miscellaneous project files
Includes new page templates (fitness-gym, nonprofit, online-course, photography-studio, real-estate, startup-company, travel-blog, wedding-invitation) with thumbnail SVGs, test specs, documentation files, and minor updates to index.html, router.php, and playwright config. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
173
VIDEO_DEBUG_GUIDE.md
Normal file
173
VIDEO_DEBUG_GUIDE.md
Normal file
@@ -0,0 +1,173 @@
|
||||
# Video Background Debug Guide
|
||||
|
||||
## What I Fixed
|
||||
|
||||
Added **multiple listeners** to catch the video URL trait change:
|
||||
|
||||
1. **Component-level listener** (in video-section init)
|
||||
2. **Global update listener** (component:update event)
|
||||
3. **Console logging** to see what's happening
|
||||
|
||||
## How to Test
|
||||
|
||||
### Step 1: Open Browser Console
|
||||
1. Open `/home/jknapp/code/site-builder/index.html`
|
||||
2. Press **F12** to open Developer Tools
|
||||
3. Click **Console** tab
|
||||
4. Keep it open while testing
|
||||
|
||||
### Step 2: Add Video Background Section
|
||||
1. Drag "Section (Video BG)" to canvas
|
||||
2. Click on the section to select it
|
||||
|
||||
### Step 3: Enter Video URL
|
||||
1. Right sidebar → **Settings** tab
|
||||
2. Find **"Video URL"** field
|
||||
3. Enter: `https://www.youtube.com/watch?v=OC7sNfNuTNU`
|
||||
4. **Press Enter or Tab** (important!)
|
||||
|
||||
### Step 4: Check Console Output
|
||||
|
||||
You should see messages like:
|
||||
```
|
||||
Video section updated with URL: https://www.youtube.com/watch?v=OC7sNfNuTNU
|
||||
Applying video URL to wrapper
|
||||
Video URL changed: https://www.youtube.com/watch?v=OC7sNfNuTNU
|
||||
Video wrapper found: true
|
||||
```
|
||||
|
||||
### Step 5: Check the Video
|
||||
|
||||
- Placeholder should disappear
|
||||
- Video iframe should appear
|
||||
- If it doesn't, check console for errors
|
||||
|
||||
## Troubleshooting Console Messages
|
||||
|
||||
### If you see: "Video wrapper not found!"
|
||||
**Problem:** The bg-video-wrapper child element isn't being found
|
||||
|
||||
**Fix:**
|
||||
1. Check Layers panel (left sidebar)
|
||||
2. Expand the section
|
||||
3. Look for a div with `data-bg-video="true"`
|
||||
4. If missing, the block structure is broken
|
||||
|
||||
### If you see: "Video section updated..." but no video loads
|
||||
**Problem:** The applyVideoUrl function might be failing
|
||||
|
||||
**Check:**
|
||||
1. Look for red error messages in console
|
||||
2. Check if iframe/video elements exist in Layers panel
|
||||
3. Try a different video URL
|
||||
|
||||
### If you see NO console messages
|
||||
**Problem:** The trait change isn't being detected
|
||||
|
||||
**Try:**
|
||||
1. Click outside the Video URL field after typing
|
||||
2. Press Enter after pasting URL
|
||||
3. Try clicking on a different element, then back to the section
|
||||
4. Refresh page and try again
|
||||
|
||||
## Expected Console Flow
|
||||
|
||||
```
|
||||
1. Add section to canvas
|
||||
→ No messages yet
|
||||
|
||||
2. Select section
|
||||
→ No messages yet
|
||||
|
||||
3. Type URL in Video URL field
|
||||
→ No messages yet
|
||||
|
||||
4. Press Enter or Tab
|
||||
→ "Video section updated with URL: ..."
|
||||
→ "Applying video URL to wrapper"
|
||||
→ "Video URL changed: ..."
|
||||
→ "Video wrapper found: true"
|
||||
|
||||
5. Video loads
|
||||
→ Placeholder hides
|
||||
→ Iframe appears with video
|
||||
```
|
||||
|
||||
## Manual Verification
|
||||
|
||||
If console logging works but video doesn't load:
|
||||
|
||||
### Check 1: Is the iframe getting the URL?
|
||||
1. Open Elements tab (next to Console)
|
||||
2. Find the `<iframe>` with class `bg-video-frame`
|
||||
3. Check if `src` attribute has the embed URL
|
||||
4. Should be: `https://www.youtube.com/embed/OC7sNfNuTNU?mute=1&loop=1&playlist=OC7sNfNuTNU&rel=0`
|
||||
|
||||
### Check 2: Is the iframe visible?
|
||||
1. Same iframe element in Elements tab
|
||||
2. Check `style` attribute
|
||||
3. Should have `display: block`
|
||||
4. Should NOT have `display: none`
|
||||
|
||||
### Check 3: Is the placeholder hidden?
|
||||
1. Find the div with class `bg-video-placeholder`
|
||||
2. Check `style` attribute
|
||||
3. Should have `display: none`
|
||||
|
||||
## If Everything Above Works But Video Still Doesn't Show
|
||||
|
||||
### Possibility 1: Network/CORS Issue
|
||||
- Check Network tab for failed requests
|
||||
- YouTube might be blocking the embed
|
||||
- Try a different video URL
|
||||
|
||||
### Possibility 2: YouTube Restrictions
|
||||
- Some videos can't be embedded
|
||||
- Try this known-working video: `https://www.youtube.com/watch?v=dQw4w9WgXcQ`
|
||||
|
||||
### Possibility 3: Browser Extensions
|
||||
- Ad blockers might block YouTube embeds
|
||||
- Try in Incognito/Private mode
|
||||
- Disable extensions temporarily
|
||||
|
||||
## Quick Test URLs
|
||||
|
||||
Try these if your URL doesn't work:
|
||||
|
||||
```
|
||||
YouTube:
|
||||
https://www.youtube.com/watch?v=dQw4w9WgXcQ
|
||||
https://www.youtube.com/watch?v=jNQXAC9IVRw
|
||||
|
||||
Vimeo:
|
||||
https://vimeo.com/148751763
|
||||
|
||||
Direct MP4:
|
||||
https://www.w3schools.com/html/mov_bbb.mp4
|
||||
```
|
||||
|
||||
## Report Back
|
||||
|
||||
After testing, let me know:
|
||||
|
||||
1. **What console messages you saw** (copy/paste)
|
||||
2. **Whether video loaded** (yes/no)
|
||||
3. **Any error messages** (red text in console)
|
||||
4. **Which test URL you used**
|
||||
|
||||
This will help me fix any remaining issues!
|
||||
|
||||
---
|
||||
|
||||
**Changes Made:**
|
||||
- Added `component:update` event listener
|
||||
- Added console.log debugging
|
||||
- Simplified trait definition (removed `changeProp`)
|
||||
- Used arrow function for proper `this` binding
|
||||
|
||||
**Files Changed:**
|
||||
- `/home/jknapp/code/site-builder/js/editor.js`
|
||||
|
||||
---
|
||||
|
||||
**Next:** Test with console open and report what you see!
|
||||
Reference in New Issue
Block a user