fix: prevent video preview persisting when switching between recipes

This commit is contained in:
Will Miao
2026-02-08 11:18:41 +08:00
parent b4ad03c9bf
commit 2b74b2373d
2 changed files with 18 additions and 6 deletions

View File

@@ -217,8 +217,18 @@ class RecipeModal {
} }
// Set recipe image // Set recipe image
const modalImage = document.getElementById('recipeModalImage'); const mediaContainer = document.getElementById('recipePreviewContainer');
if (modalImage) { 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 // Ensure file_url exists, fallback to file_path if needed
const imageUrl = recipe.file_url || const imageUrl = recipe.file_url ||
(recipe.file_path ? `/loras_static/root1/preview/${recipe.file_path.split('/').pop()}` : (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) // Check if the file is a video (mp4)
const isVideo = imageUrl.toLowerCase().endsWith('.mp4'); const isVideo = imageUrl.toLowerCase().endsWith('.mp4');
// Replace the image element with appropriate media element
const mediaContainer = modalImage.parentElement;
mediaContainer.innerHTML = '';
if (isVideo) { if (isVideo) {
const videoElement = document.createElement('video'); const videoElement = document.createElement('video');
videoElement.id = 'recipeModalVideo'; videoElement.id = 'recipeModalVideo';

View File

@@ -140,6 +140,12 @@ export class ModalManager {
this.registerModal('recipeModal', { this.registerModal('recipeModal', {
element: recipeModal, element: recipeModal,
onClose: () => { onClose: () => {
// Stop any playing video
const video = recipeModal.querySelector('video');
if (video) {
video.pause();
video.currentTime = 0;
}
this.getModal('recipeModal').element.style.display = 'none'; this.getModal('recipeModal').element.style.display = 'none';
document.body.classList.remove('modal-open'); document.body.classList.remove('modal-open');
}, },