diff --git a/make_post_sell/static/js/player.js b/make_post_sell/static/js/player.js
index ccf582a..4b1e835 100644
--- a/make_post_sell/static/js/player.js
+++ b/make_post_sell/static/js/player.js
@@ -381,6 +381,13 @@
goToProductPage();
}
break;
+ case 'p':
+ case 'P':
+ e.preventDefault();
+ if (typeof togglePip === 'function') {
+ togglePip();
+ }
+ break;
}
}
diff --git a/make_post_sell/templates/player.j2 b/make_post_sell/templates/player.j2
index edfa3c6..75f431f 100644
--- a/make_post_sell/templates/player.j2
+++ b/make_post_sell/templates/player.j2
@@ -72,10 +72,8 @@
}
/* Hide desktop-only buttons on mobile */
- #pipBtn,
#autoResizeBtn,
- #alwaysOnTopBtn,
- #fullscreenBtn {
+ #alwaysOnTopBtn {
display: none;
}
@@ -231,8 +229,10 @@
+ {% if media_type == 'video' %}
+
+ {% endif %}
-
@@ -260,6 +260,41 @@
window.open(window.playerData.productUrl, '_blank');
}
+ // Toggle native Picture-in-Picture (true always-on-top via browser)
+ function togglePip() {
+ const media = document.getElementById('media');
+ if (!media || media.tagName !== 'VIDEO') {
+ return;
+ }
+
+ if (document.pictureInPictureElement) {
+ document.exitPictureInPicture().catch(err => {
+ console.error('Failed to exit PiP:', err);
+ });
+ } else {
+ media.requestPictureInPicture().catch(err => {
+ console.error('Failed to enter PiP:', err);
+ });
+ }
+ }
+
+ // Update PiP button state
+ document.addEventListener('enterpictureinpicture', () => {
+ const pipBtn = document.getElementById('pipBtn');
+ if (pipBtn) {
+ pipBtn.classList.add('active');
+ pipBtn.textContent = '📺 Exit PiP';
+ }
+ });
+
+ document.addEventListener('leavepictureinpicture', () => {
+ const pipBtn = document.getElementById('pipBtn');
+ if (pipBtn) {
+ pipBtn.classList.remove('active');
+ pipBtn.textContent = '📺 PiP';
+ }
+ });
+
// Mobile: tap to show/hide controls
let hideTimeout;
const isMobile = window.innerWidth <= 600;
@@ -314,17 +349,51 @@
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
- });
+ const playPromise = media.play();
+ if (playPromise !== undefined) {
+ playPromise.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
+ });
+ }
}
}
+
+ // Debug: Add ended event listener to verify it works
+ (function() {
+ const media = document.getElementById('media');
+ if (media && (media.tagName === 'VIDEO' || media.tagName === 'AUDIO')) {
+ media.addEventListener('ended', function() {
+ console.log('Media ended event fired!');
+ if (window.playerData && window.playerData.nextProductId) {
+ console.log('Navigating to next:', window.playerData.nextProductId);
+ window.location.href = '/player/' + window.playerData.nextProductId;
+ } else {
+ console.log('No next product available');
+ }
+ });
+
+ // Debug: Log when media is playing
+ media.addEventListener('play', function() {
+ console.log('Media started playing');
+ });
+
+ // Debug: Log time updates to verify playback
+ let lastLogTime = 0;
+ media.addEventListener('timeupdate', function() {
+ const currentTime = Math.floor(media.currentTime);
+ if (currentTime > lastLogTime && currentTime % 5 === 0) {
+ console.log('Playback at:', currentTime + 's / ' + Math.floor(media.duration) + 's');
+ lastLogTime = currentTime;
+ }
+ });
+ }
+ })();