engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

Add comprehensive debugging for Document PiP implementation

Browse source 
Debug logging added to diagnose why Document PiP isn't working:
- Log Document PiP API availability on page load
- Log browser user agent for compatibility checking
- Log when togglePip is called and which path is taken
- Log video dimensions and calculated aspect ratio
- Alert user if Document PiP fails with error details
- Alert user if browser doesn't support Document PiP
- Log all fallback PiP operations

This will help identify:
- Browser compatibility issues (needs Chrome/Edge 111+)
- Video metadata loading issues
- API permission errors
- Which PiP mode is actually being used

User should check browser console when clicking PiP button to see
which path is taken and any error messages.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
russell@unturf.com 2026-01-21 13:55:06 -05:00
parent 2258385cf4
commit 9fc9c71410
1 changed files with 31 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

32
make_post_sell/templates/player.j2
View file

@ -266,11 +266,16 @@
async function togglePip() {
const media = document.getElementById('media');
if (!media || media.tagName !== 'VIDEO') {
console.log('No video element found');
return;
}
console.log('togglePip called');
console.log('documentPictureInPicture support:', 'documentPictureInPicture' in window);
// Check for Document Picture-in-Picture API support
if ('documentPictureInPicture' in window) {
console.log('Using Document PiP');
if (pipWindow) {
// Close existing PiP window
pipWindow.close();
@ -281,7 +286,14 @@
try {
// Calculate aspect ratio from video
const aspectRatio = media.videoWidth / media.videoHeight;
let aspectRatio = 16 / 9; // Default aspect ratio
if (media.videoWidth && media.videoHeight) {
aspectRatio = media.videoWidth / media.videoHeight;
console.log('Video dimensions:', media.videoWidth, 'x', media.videoHeight, 'aspect:', aspectRatio);
} else {
console.log('Video dimensions not available yet, using 16:9 default');
}
let width = 640;
let height = Math.round(width / aspectRatio);
@ -291,6 +303,8 @@
width = Math.round(height * aspectRatio);
}
console.log('Opening Document PiP window:', width, 'x', height);
// Open Document PiP window with custom content
pipWindow = await window.documentPictureInPicture.requestWindow({
width: width,
@ -452,10 +466,14 @@
} catch (err) {
console.error('Failed to open Document PiP:', err);
console.error('Error details:', err.message, err.name);
alert('Document PiP failed: ' + err.message + '. Falling back to regular PiP.');
// Fallback to regular PiP
fallbackToPip(media);
}
} else {
console.log('Document PiP not supported, using fallback');
alert('Document PiP not supported in this browser. Using regular PiP (no prev/next controls).');
// Fallback to regular PiP for unsupported browsers
fallbackToPip(media);
}
@ -463,11 +481,14 @@
// Fallback to regular Picture-in-Picture API
function fallbackToPip(media) {
console.log('Using fallback regular PiP (no custom controls)');
if (document.pictureInPictureElement) {
console.log('Exiting regular PiP');
document.exitPictureInPicture().catch(err => {
console.error('Failed to exit PiP:', err);
});
} else {
console.log('Entering regular PiP');
media.requestPictureInPicture().catch(err => {
console.error('Failed to enter PiP:', err);
});
@ -570,6 +591,15 @@
}
}
// Check Document PiP support on page load
(function() {
console.log('=== Player Debug Info ===');
console.log('Document PiP API available:', 'documentPictureInPicture' in window);
console.log('Regular PiP API available:', 'pictureInPictureEnabled' in document);
console.log('Browser:', navigator.userAgent);
console.log('========================');
})();
// Debug: Add ended event listener to verify it works
(function() {
const media = document.getElementById('media');