diff --git a/make_post_sell/static/js/player.js b/make_post_sell/static/js/player.js index 2596427..ccf582a 100644 --- a/make_post_sell/static/js/player.js +++ b/make_post_sell/static/js/player.js @@ -19,7 +19,6 @@ // Get media element const media = document.getElementById('media'); const alwaysOnTopBtn = document.getElementById('alwaysOnTopBtn'); - const fullscreenBtn = document.getElementById('fullscreenBtn'); const autoResizeBtn = document.getElementById('autoResizeBtn'); const playPauseBtn = document.getElementById('playPauseBtn'); @@ -365,11 +364,6 @@ navigate(window.playerData.nextProductId); } break; - case 'f': - case 'F': - e.preventDefault(); - toggleFullscreen(); - break; case 't': case 'T': e.preventDefault(); @@ -442,9 +436,6 @@ stopAutoAdvance(); }); - // Set up fullscreen change listener - document.addEventListener('fullscreenchange', updateFullscreenButton); - // Set up expiration warning setupExpirationWarning(); diff --git a/make_post_sell/templates/player.j2 b/make_post_sell/templates/player.j2 index 13f0e85..edfa3c6 100644 --- a/make_post_sell/templates/player.j2 +++ b/make_post_sell/templates/player.j2 @@ -74,7 +74,8 @@ /* Hide desktop-only buttons on mobile */ #pipBtn, #autoResizeBtn, - #alwaysOnTopBtn { + #alwaysOnTopBtn, + #fullscreenBtn { display: none; } @@ -96,7 +97,22 @@ transition: opacity 0.3s; } - .player-container:hover .player-controls { + /* Show controls on hover for desktop */ + @media (min-width: 601px) { + .player-container:hover .player-controls { + opacity: 1; + } + .player-container:hover .product-title { + opacity: 1; + } + } + + /* Mobile: controls shown via tap (controlled by JS) */ + .player-controls.visible { + opacity: 1; + } + + .product-title.visible { opacity: 1; } @@ -164,9 +180,6 @@ transition: opacity 0.3s; } - .player-container:hover .product-title { - opacity: 1; - } /* For images, add some styling to make navigation visible */ img#media { @@ -218,8 +231,8 @@ - + @@ -242,15 +255,74 @@ nextProductUrl: {{ ('"%s"' % next_product_url) if next_product_url else 'null' }} }; - // Go to the product page + // Go to the product page (always opens in new tab) function goToProductPage() { - if (window.opener && !window.opener.closed) { - // If opened from another window, navigate that window - window.opener.location.href = window.playerData.productUrl; - window.opener.focus(); - } else { - // Otherwise open in new tab - window.open(window.playerData.productUrl, '_blank'); + window.open(window.playerData.productUrl, '_blank'); + } + + // Mobile: tap to show/hide controls + let hideTimeout; + const isMobile = window.innerWidth <= 600; + + if (isMobile) { + const playerContainer = document.getElementById('playerContainer'); + const playerControls = document.querySelector('.player-controls'); + const controlsGrid = document.querySelector('.controls-grid'); + const productTitle = document.querySelector('.product-title'); + + // Show controls initially for 3 seconds + playerControls.classList.add('visible'); + productTitle.classList.add('visible'); + hideTimeout = setTimeout(() => { + playerControls.classList.remove('visible'); + productTitle.classList.remove('visible'); + }, 3000); + + // Tap on player container to toggle controls + playerContainer.addEventListener('click', (e) => { + // Don't toggle if clicking on a control button + if (controlsGrid.contains(e.target)) { + return; + } + + // Clear existing timeout + if (hideTimeout) { + clearTimeout(hideTimeout); + } + + // Toggle controls visibility + const isVisible = playerControls.classList.contains('visible'); + if (isVisible) { + // Hide immediately + playerControls.classList.remove('visible'); + productTitle.classList.remove('visible'); + } else { + // Show and auto-hide after 3 seconds + playerControls.classList.add('visible'); + productTitle.classList.add('visible'); + hideTimeout = setTimeout(() => { + playerControls.classList.remove('visible'); + productTitle.classList.remove('visible'); + }, 3000); + } + }); + } + + // Mobile autoplay fix: unmute after user interaction + if (isMobile) { + const media = document.getElementById('media'); + if (media && (media.tagName === 'VIDEO' || media.tagName === 'AUDIO')) { + // Try to play muted first (allowed by most browsers) + media.muted = true; + media.play().then(() => { + // Once playing, unmute after a short delay + setTimeout(() => { + media.muted = false; + }, 100); + }).catch(err => { + console.log('Autoplay failed:', err); + // User will need to tap play button + }); } }