alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor video embed implementation to enhance privacy and user experience; replace iframe with a privacy-friendly video container and add external link buttons for YouTube access.

Browse Source
This commit is contained in:
Will Miao
2025-06-10 06:42:50 +08:00
parent 18cdaabf5e
commit a295ff2e06
5 changed files with 100 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pyproject.toml
View File

@@ -1,7 +1,7 @@
[project]
name = "comfyui-lora-manager"
description = "LoRA Manager for ComfyUI - Access it at http://localhost:8188/loras for managing LoRA models with previews and metadata integration."
version = "0.8.17"
version = "0.8.17-bugfix"
license = {file = "LICENSE"}
dependencies = [
"aiohttp",

102
static/css/components/modal.css
View File

@@ -783,30 +783,6 @@ input:checked + .toggle-slider:before {
display: block;
}
/* Video embed styles */
.video-embed {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: var(--space-2);
border-radius: var(--border-radius-sm);
}
.video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-embed.small {
max-width: 100%;
margin-bottom: var(--space-1);
}
.help-text {
margin: var(--space-2) 0;
}
@@ -972,4 +948,82 @@ input:checked + .toggle-slider:before {
[data-theme="dark"] .warning-box {
background-color: rgba(255, 193, 7, 0.05);
border-color: rgba(255, 193, 7, 0.3);
}
/* Privacy-friendly video embed styles */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
margin-bottom: var(--space-2);
border-radius: var(--border-radius-sm);
overflow: hidden;
background-color: rgba(0, 0, 0, 0.05);
}
.video-thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.video-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: filter 0.2s ease;
}
.video-play-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: opacity 0.2s ease;
}
/* External link button styles */
.external-link-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: var(--border-radius-sm);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
background-color: var(--lora-accent);
color: white;
text-decoration: none;
border: none;
}
.external-link-btn:hover {
background-color: oklch(from var(--lora-accent) l c h / 85%);
}
.video-thumbnail i {
font-size: 1.2em;
}
/* Smaller video container for the updates tab */
.video-item .video-container {
padding-bottom: 40%; /* Shorter height for the playlist */
}
/* Dark theme adjustments */
[data-theme="dark"] .video-container {
background-color: rgba(255, 255, 255, 0.03);
}

BIN
static/images/video-thumbnails/getting-started.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
static/images/video-thumbnails/updates-playlist.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 173 KiB

34
templates/components/modals.html
View File

@@ -482,12 +482,16 @@
<!-- Getting Started Tab -->
<div class="tab-pane active" id="getting-started">
<h3>Getting Started with LoRA Manager</h3>
<div class="video-embed">
<iframe src="https://www.youtube.com/embed/hvKw31YpE-U"
title="Getting Started with LoRA Manager"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<div class="video-container">
<div class="video-thumbnail" data-video-id="hvKw31YpE-U">
<img src="/loras_static/images/video-thumbnails/getting-started.jpg" alt="Getting Started with LoRA Manager">
<div class="video-play-overlay">
<a href="https://www.youtube.com/watch?v=hvKw31YpE-U" target="_blank" class="external-link-btn">
<i class="fas fa-external-link-alt"></i>
<span>Watch on YouTube</span>
</a>
</div>
</div>
</div>
<div class="help-text">
<h4>Key Features:</h4>
@@ -514,12 +518,16 @@
</h3>
<div class="video-list">
<div class="video-item">
<div class="video-embed small">
<iframe src="https://www.youtube.com/embed/videoseries?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj"
title="LoRA Manager Updates"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<div class="video-container">
<div class="video-thumbnail" data-video-id="videoseries?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj">
<img src="/loras_static/images/video-thumbnails/updates-playlist.jpg" alt="LoRA Manager Updates Playlist">
<div class="video-play-overlay">
<a href="https://www.youtube.com/playlist?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj" target="_blank" class="external-link-btn">
<i class="fas fa-external-link-alt"></i>
<span>Watch on YouTube</span>
</a>
</div>
</div>
</div>
<div class="video-info">
<h4>LoRA Manager Updates Playlist</h4>
@@ -528,7 +536,7 @@
</div>
</div>
</div>
<!-- Documentation Tab -->
<div class="tab-pane" id="documentation">
<h3>Documentation</h3>