diff --git a/static/js/components/RecipeModal.js b/static/js/components/RecipeModal.js index 4ecb62dd..b8bcdf12 100644 --- a/static/js/components/RecipeModal.js +++ b/static/js/components/RecipeModal.js @@ -217,8 +217,18 @@ class RecipeModal { } // Set recipe image - const modalImage = document.getElementById('recipeModalImage'); - if (modalImage) { + const mediaContainer = document.getElementById('recipePreviewContainer'); + if (mediaContainer) { + // Stop any playing video before replacing content + const existingVideo = mediaContainer.querySelector('video'); + if (existingVideo) { + existingVideo.pause(); + existingVideo.currentTime = 0; + } + + // Clear the container + mediaContainer.innerHTML = ''; + // Ensure file_url exists, fallback to file_path if needed const imageUrl = recipe.file_url || (recipe.file_path ? `/loras_static/root1/preview/${recipe.file_path.split('/').pop()}` : @@ -227,10 +237,6 @@ class RecipeModal { // Check if the file is a video (mp4) const isVideo = imageUrl.toLowerCase().endsWith('.mp4'); - // Replace the image element with appropriate media element - const mediaContainer = modalImage.parentElement; - mediaContainer.innerHTML = ''; - if (isVideo) { const videoElement = document.createElement('video'); videoElement.id = 'recipeModalVideo'; diff --git a/static/js/managers/ModalManager.js b/static/js/managers/ModalManager.js index 670feaab..fe24cc3e 100644 --- a/static/js/managers/ModalManager.js +++ b/static/js/managers/ModalManager.js @@ -140,6 +140,12 @@ export class ModalManager { this.registerModal('recipeModal', { element: recipeModal, onClose: () => { + // Stop any playing video + const video = recipeModal.querySelector('video'); + if (video) { + video.pause(); + video.currentTime = 0; + } this.getModal('recipeModal').element.style.display = 'none'; document.body.classList.remove('modal-open'); },