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
+ });
}
}