mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-23 14:12:11 -03:00
374e2bd4b9
- Implemented MediaRenderers.js to generate HTML for video and image wrappers, including NSFW handling and media controls. - Created MediaUtils.js for utility functions to manage media loading, lazy loading, and metadata panel interactions. - Developed MetadataPanel.js to generate metadata panels for media items, including prompts and generation parameters. - Introduced ShowcaseView.js to render showcase content, manage media items, and handle file imports with drag-and-drop support.
88 lines
3.7 KiB
JavaScript
88 lines
3.7 KiB
JavaScript
/**
|
|
* MediaRenderers.js
|
|
* HTML generators for media items (images/videos) in the showcase
|
|
*/
|
|
|
|
/**
|
|
* Generate video wrapper HTML
|
|
* @param {Object} media - Media metadata
|
|
* @param {number} heightPercent - Height percentage for container
|
|
* @param {boolean} shouldBlur - Whether content should be blurred
|
|
* @param {string} nsfwText - NSFW warning text
|
|
* @param {string} metadataPanel - Metadata panel HTML
|
|
* @param {string} localUrl - Local file URL
|
|
* @param {string} remoteUrl - Remote file URL
|
|
* @param {string} mediaControlsHtml - HTML for media control buttons
|
|
* @returns {string} HTML content
|
|
*/
|
|
export function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl, mediaControlsHtml = '') {
|
|
return `
|
|
<div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%" data-short-id="${media.id || ''}">
|
|
${shouldBlur ? `
|
|
<button class="toggle-blur-btn showcase-toggle-btn" title="Toggle blur">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
` : ''}
|
|
${mediaControlsHtml}
|
|
<video controls autoplay muted loop crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
data-local-src="${localUrl || ''}"
|
|
data-remote-src="${remoteUrl}"
|
|
class="lazy ${shouldBlur ? 'blurred' : ''}">
|
|
<source data-local-src="${localUrl || ''}" data-remote-src="${remoteUrl}" type="video/mp4">
|
|
Your browser does not support video playback
|
|
</video>
|
|
${shouldBlur ? `
|
|
<div class="nsfw-overlay">
|
|
<div class="nsfw-warning">
|
|
<p>${nsfwText}</p>
|
|
<button class="show-content-btn">Show</button>
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
${metadataPanel}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Generate image wrapper HTML
|
|
* @param {Object} media - Media metadata
|
|
* @param {number} heightPercent - Height percentage for container
|
|
* @param {boolean} shouldBlur - Whether content should be blurred
|
|
* @param {string} nsfwText - NSFW warning text
|
|
* @param {string} metadataPanel - Metadata panel HTML
|
|
* @param {string} localUrl - Local file URL
|
|
* @param {string} remoteUrl - Remote file URL
|
|
* @param {string} mediaControlsHtml - HTML for media control buttons
|
|
* @returns {string} HTML content
|
|
*/
|
|
export function generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl, mediaControlsHtml = '') {
|
|
return `
|
|
<div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%" data-short-id="${media.id || ''}">
|
|
${shouldBlur ? `
|
|
<button class="toggle-blur-btn showcase-toggle-btn" title="Toggle blur">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
` : ''}
|
|
${mediaControlsHtml}
|
|
<img data-local-src="${localUrl || ''}"
|
|
data-remote-src="${remoteUrl}"
|
|
alt="Preview"
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
width="${media.width}"
|
|
height="${media.height}"
|
|
class="lazy ${shouldBlur ? 'blurred' : ''}">
|
|
${shouldBlur ? `
|
|
<div class="nsfw-overlay">
|
|
<div class="nsfw-warning">
|
|
<p>${nsfwText}</p>
|
|
<button class="show-content-btn">Show</button>
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
${metadataPanel}
|
|
</div>
|
|
`;
|
|
} |