Refactor javascript code a little
This commit is contained in:
parent
3857171bdb
commit
c8b6798f9b
@ -158,45 +158,42 @@
|
|||||||
$(".video-container").css("display", "flex");
|
$(".video-container").css("display", "flex");
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(function() {
|
let currentVideo = null;
|
||||||
// Pre-set all thumbnails to a placeholder state
|
let videoElement = null;
|
||||||
$(".video-thumbnail").attr("src", "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 16 9'%3E%3C/svg%3E");
|
let overlayContainer = null;
|
||||||
|
let inactivityTimer = null;
|
||||||
|
let backButton = null;
|
||||||
|
let customControls = null;
|
||||||
|
let playPauseButton = null;
|
||||||
|
let seekBar = null;
|
||||||
|
|
||||||
$.getJSON("/api/homepage", function(data) {
|
function exitVideoPlayback() {
|
||||||
let currentVideo = data.currentVideo;
|
if (videoElement && videoElement.pause) {
|
||||||
// previousVideo = data.previousVideo;
|
videoElement.pause();
|
||||||
// nextVideo = data.nextVideo;
|
}
|
||||||
//
|
clearTimeout(inactivityTimer);
|
||||||
// // Set thumbnails
|
if (overlayContainer) {
|
||||||
$("#current-thumb").attr("src", currentVideo.thumbnail);
|
overlayContainer.css('cursor', 'default');
|
||||||
// $("#prev-thumb").attr("src", previousVideo.thumbnail);
|
overlayContainer.off('mousemove.inactivityControls');
|
||||||
// $("#next-thumb").attr("src", nextVideo.thumbnail);
|
// Detach document-level fullscreen listener specific to this playback
|
||||||
|
$(document).off('fullscreenchange.videoPlayback webkitfullscreenchange.videoPlayback mozfullscreenchange.videoPlayback MSFullscreenChange.videoPlayback', handleFullscreenChange);
|
||||||
|
overlayContainer.remove();
|
||||||
|
}
|
||||||
|
// Attempt to exit fullscreen if the document is still in fullscreen mode
|
||||||
|
// and our container was likely the one in fullscreen.
|
||||||
|
if (document.fullscreenElement || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement) {
|
||||||
|
if (document.exitFullscreen) {
|
||||||
|
document.exitFullscreen().catch(() => {});
|
||||||
|
} else if (document.mozCancelFullScreen) {
|
||||||
|
document.mozCancelFullScreen();
|
||||||
|
} else if (document.webkitExitFullscreen) {
|
||||||
|
document.webkitExitFullscreen();
|
||||||
|
} else if (document.msExitFullscreen) {
|
||||||
|
document.msExitFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Hide loader and show videos
|
|
||||||
hideLoader();
|
|
||||||
|
|
||||||
$("#play-button").click(function() {
|
|
||||||
if (currentVideo && currentVideo.url) {
|
|
||||||
// Create the overlay container
|
|
||||||
let overlayContainer = $("<div id='video-overlay-container'></div>").appendTo("body");
|
|
||||||
|
|
||||||
// Create video element and append to container
|
|
||||||
let videoElement = $("<video autoplay class='video-player'></video>") // Removed 'controls' attribute
|
|
||||||
.attr("src", currentVideo.url)
|
|
||||||
.appendTo(overlayContainer)[0];
|
|
||||||
|
|
||||||
// Create back button and append to container
|
|
||||||
let backButton = $("<button id='back-button'>Back</button>")
|
|
||||||
.appendTo(overlayContainer);
|
|
||||||
|
|
||||||
// Create custom video controls container
|
|
||||||
let customControls = $("<div id='custom-video-controls'></div>").appendTo(overlayContainer);
|
|
||||||
let playPauseButton = $("<button id='custom-play-pause-button'>❚❚</button>").appendTo(customControls); // Initial state: Pause icon
|
|
||||||
let seekBar = $("<input type='range' id='custom-seek-bar' value='0' />").appendTo(customControls);
|
|
||||||
|
|
||||||
|
|
||||||
// Mouse inactivity logic for back button, controls, and cursor
|
|
||||||
let inactivityTimer;
|
|
||||||
function showControlsAndResetTimer() {
|
function showControlsAndResetTimer() {
|
||||||
backButton.removeClass('button-hidden');
|
backButton.removeClass('button-hidden');
|
||||||
customControls.removeClass('controls-hidden');
|
customControls.removeClass('controls-hidden');
|
||||||
@ -209,43 +206,114 @@
|
|||||||
}, 3000); // 3 seconds
|
}, 3000); // 3 seconds
|
||||||
}
|
}
|
||||||
|
|
||||||
overlayContainer.on('mousemove.inactivityControls', function() {
|
// --- Moved Helper Function Definitions ---
|
||||||
showControlsAndResetTimer();
|
function handlePlayPauseClick() {
|
||||||
});
|
|
||||||
showControlsAndResetTimer(); // Initial call
|
|
||||||
|
|
||||||
// Custom Controls Logic
|
|
||||||
// Play/Pause Button
|
|
||||||
playPauseButton.click(function() {
|
|
||||||
if (videoElement.paused) {
|
if (videoElement.paused) {
|
||||||
videoElement.play();
|
videoElement.play();
|
||||||
} else {
|
} else {
|
||||||
videoElement.pause();
|
videoElement.pause();
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
$(videoElement).on('play', function() {
|
|
||||||
playPauseButton.text('❚❚'); // Pause icon
|
|
||||||
});
|
|
||||||
$(videoElement).on('pause', function() {
|
|
||||||
playPauseButton.text('►'); // Play icon
|
|
||||||
});
|
|
||||||
|
|
||||||
// Seek Bar
|
function updatePlayPauseButtonState() {
|
||||||
$(videoElement).on('loadedmetadata', function() {
|
if (!playPauseButton) return; // Ensure button exists
|
||||||
|
if (videoElement.paused) {
|
||||||
|
playPauseButton.text('►'); // Play icon
|
||||||
|
} else {
|
||||||
|
playPauseButton.text('❚❚'); // Pause icon
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleVideoLoadedMetadata() {
|
||||||
|
if (!seekBar) return; // Ensure seekbar exists
|
||||||
seekBar.attr('max', videoElement.duration);
|
seekBar.attr('max', videoElement.duration);
|
||||||
});
|
}
|
||||||
$(videoElement).on('timeupdate', function() {
|
|
||||||
|
function handleVideoTimeUpdate() {
|
||||||
|
if (!seekBar) return; // Ensure seekbar exists
|
||||||
seekBar.val(videoElement.currentTime);
|
seekBar.val(videoElement.currentTime);
|
||||||
// Optional: Update seek bar background to show progress
|
|
||||||
const percentage = (videoElement.currentTime / videoElement.duration) * 100;
|
const percentage = (videoElement.currentTime / videoElement.duration) * 100;
|
||||||
seekBar.css('background', `linear-gradient(to right, #3498db ${percentage}%, #555 ${percentage}%)`);
|
seekBar.css('background', `linear-gradient(to right, #3498db ${percentage}%, #555 ${percentage}%)`);
|
||||||
});
|
}
|
||||||
seekBar.on('input', function() {
|
|
||||||
videoElement.currentTime = $(this).val();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
function handleSeekBarInput() {
|
||||||
|
if (!seekBar) return; // Ensure seekbar exists
|
||||||
|
videoElement.currentTime = seekBar.val();
|
||||||
|
}
|
||||||
|
|
||||||
// Request fullscreen on the container
|
function handleFullscreenChange() {
|
||||||
|
const isActuallyFullscreen = document.fullscreenElement || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement;
|
||||||
|
if (!isActuallyFullscreen && overlayContainer && overlayContainer.length && !overlayContainer.is(document.fullscreenElement)) {
|
||||||
|
if (overlayContainer.is(':visible')) {
|
||||||
|
exitVideoPlayback();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
// Pre-set all thumbnails to a placeholder state
|
||||||
|
$(".video-thumbnail").attr("src", "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 16 9'%3E%3C/svg%3E");
|
||||||
|
|
||||||
|
$.getJSON("/api/homepage", function(data) {
|
||||||
|
currentVideo = data.currentVideo;
|
||||||
|
// previousVideo = data.previousVideo;
|
||||||
|
// nextVideo = data.nextVideo;
|
||||||
|
//
|
||||||
|
// // Set thumbnails
|
||||||
|
$("#current-thumb").attr("src", currentVideo.thumbnail);
|
||||||
|
// $("#prev-thumb").attr("src", previousVideo.thumbnail);
|
||||||
|
// $("#next-thumb").attr("src", nextVideo.thumbnail);
|
||||||
|
|
||||||
|
// Hide loader and show videos
|
||||||
|
hideLoader();
|
||||||
|
})
|
||||||
|
|
||||||
|
$("#play-button").click(function() {
|
||||||
|
if (currentVideo && currentVideo.url) {
|
||||||
|
// Create the overlay container
|
||||||
|
overlayContainer = $("<div id='video-overlay-container'></div>").appendTo("body");
|
||||||
|
|
||||||
|
// Create video element and append to container
|
||||||
|
videoElement = $("<video autoplay class='video-player'></video>") // Removed 'controls' attribute
|
||||||
|
.attr("src", currentVideo.url)
|
||||||
|
.appendTo(overlayContainer)[0];
|
||||||
|
|
||||||
|
// Create back button and append to container
|
||||||
|
backButton = $("<button id='back-button'>Back</button>")
|
||||||
|
.appendTo(overlayContainer);
|
||||||
|
|
||||||
|
// Create custom video controls container
|
||||||
|
customControls = $("<div id='custom-video-controls'></div>").appendTo(overlayContainer);
|
||||||
|
playPauseButton = $("<button id='custom-play-pause-button'>❚❚</button>").appendTo(customControls); // Assign to global var
|
||||||
|
seekBar = $("<input type='range' id='custom-seek-bar' value='0' />").appendTo(customControls); // Assign to global var
|
||||||
|
|
||||||
|
// Remove local inactivityTimer declaration, it's global now
|
||||||
|
// let inactivityTimer;
|
||||||
|
|
||||||
|
// --- Setup Inactivity Controls ---
|
||||||
|
overlayContainer.on('mousemove.inactivityControls', showControlsAndResetTimer);
|
||||||
|
showControlsAndResetTimer(); // Initial call
|
||||||
|
|
||||||
|
// --- Setup Custom Video Controls ---
|
||||||
|
playPauseButton.click(handlePlayPauseClick);
|
||||||
|
$(videoElement).on('play', updatePlayPauseButtonState);
|
||||||
|
$(videoElement).on('pause', updatePlayPauseButtonState);
|
||||||
|
$(videoElement).on('loadedmetadata', handleVideoLoadedMetadata);
|
||||||
|
$(videoElement).on('timeupdate', handleVideoTimeUpdate);
|
||||||
|
seekBar.on('input', handleSeekBarInput);
|
||||||
|
// Initial call to set play/pause button state, especially if autoplay is effective
|
||||||
|
updatePlayPauseButtonState();
|
||||||
|
|
||||||
|
// --- Setup Video End and Back Button ---
|
||||||
|
$(videoElement).on('ended', exitVideoPlayback);
|
||||||
|
backButton.click(exitVideoPlayback);
|
||||||
|
|
||||||
|
// --- Setup Fullscreen Change Listener ---
|
||||||
|
// Detach any previous listeners first (using the specific named handler for accuracy if needed, but general works too)
|
||||||
|
$(document).off('fullscreenchange.videoPlayback webkitfullscreenchange.videoPlayback mozfullscreenchange.videoPlayback MSFullscreenChange.videoPlayback');
|
||||||
|
$(document).on('fullscreenchange.videoPlayback webkitfullscreenchange.videoPlayback mozfullscreenchange.videoPlayback MSFullscreenChange.videoPlayback', handleFullscreenChange);
|
||||||
|
|
||||||
|
// --- Request Fullscreen ---
|
||||||
const containerEl = overlayContainer[0];
|
const containerEl = overlayContainer[0];
|
||||||
if (containerEl.requestFullscreen) {
|
if (containerEl.requestFullscreen) {
|
||||||
containerEl.requestFullscreen();
|
containerEl.requestFullscreen();
|
||||||
@ -256,56 +324,10 @@
|
|||||||
} else if (containerEl.msRequestFullscreen) { /* IE/Edge */
|
} else if (containerEl.msRequestFullscreen) { /* IE/Edge */
|
||||||
containerEl.msRequestFullscreen();
|
containerEl.msRequestFullscreen();
|
||||||
}
|
}
|
||||||
|
// NOTE: exitVideoPlayback was defined above.
|
||||||
function exitVideoPlayback() {
|
// The original snippet showed its definition here, it's now grouped with other helpers.
|
||||||
if (videoElement && videoElement.pause) {
|
|
||||||
videoElement.pause();
|
|
||||||
}
|
|
||||||
clearTimeout(inactivityTimer); // Clear inactivity timer
|
|
||||||
if (overlayContainer) { // Ensure overlayContainer exists before trying to modify it
|
|
||||||
overlayContainer.css('cursor', 'default'); // Always reset cursor on exit
|
|
||||||
}
|
|
||||||
// Exit fullscreen if active
|
|
||||||
if (document.fullscreenElement || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement) {
|
|
||||||
if (document.exitFullscreen) {
|
|
||||||
document.exitFullscreen().catch(() => {});
|
|
||||||
} else if (document.mozCancelFullScreen) {
|
|
||||||
document.mozCancelFullScreen();
|
|
||||||
} else if (document.webkitExitFullscreen) {
|
|
||||||
document.webkitExitFullscreen();
|
|
||||||
} else if (document.msExitFullscreen) {
|
|
||||||
document.msExitFullscreen();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (overlayContainer) {
|
|
||||||
overlayContainer.off('mousemove.inactivityControls'); // Remove specific listener
|
|
||||||
overlayContainer.remove();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle video ending
|
|
||||||
videoElement.onended = function() {
|
|
||||||
exitVideoPlayback();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handle back button click
|
|
||||||
backButton.click(function() {
|
|
||||||
exitVideoPlayback();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Detach previous fullscreen change listeners to avoid multiple triggers
|
|
||||||
$(document).off('fullscreenchange.videoPlayback webkitfullscreenchange.videoPlayback mozfullscreenchange.videoPlayback MSFullscreenChange.videoPlayback');
|
|
||||||
// Handle fullscreen change (e.g., user pressing Esc)
|
|
||||||
$(document).on('fullscreenchange.videoPlayback webkitfullscreenchange.videoPlayback mozfullscreenchange.videoPlayback MSFullscreenChange.videoPlayback', function() {
|
|
||||||
const isActuallyFullscreen = document.fullscreenElement || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement;
|
|
||||||
// Check if fullscreen was exited AND if our container was the one in fullscreen or is still around
|
|
||||||
if (!isActuallyFullscreen && overlayContainer && overlayContainer.length && overlayContainer.is(':visible')) {
|
|
||||||
exitVideoPlayback();
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
|
||||||
});
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user