Added video preview and http range support
Build and Publish / Build and Publish Docker Image (push) Successful in 5m11s

This commit is contained in:
Ultradesu
2026-08-08 10:19:47 +01:00
parent 1bee7a7940
commit f7a89b431d
8 changed files with 253 additions and 58 deletions
+23 -6
View File
@@ -32,7 +32,10 @@
</a>
{% else %}
<a href="/admin/uploads/{{ item.media.id.unwrap() }}" data-lightbox="video">
<div class="video-thumb">🎬</div>
<div class="video-thumb">
<video src="/admin/uploads/{{ item.media.id.unwrap() }}#t=0.1" preload="metadata" muted playsinline></video>
<span class="video-play"></span>
</div>
</a>
{% endif %}
<div class="media-info">
@@ -73,13 +76,27 @@
display: block;
}
.media-card .video-thumb {
position: relative;
width: 100%;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
background: #f0f0f0;
background: #111;
}
.media-card .video-thumb video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.media-card .video-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 2.5rem;
line-height: 1;
text-shadow: 0 1px 5px #000;
pointer-events: none;
}
.media-info {
padding: 0.6rem 0.75rem;
+23 -6
View File
@@ -118,7 +118,10 @@
</a>
{% else %}
<a href="/admin/uploads/{{ m.id.unwrap() }}" data-lightbox="video">
<div class="video-thumb-sm">🎬</div>
<div class="video-thumb-sm">
<video src="/admin/uploads/{{ m.id.unwrap() }}#t=0.1" preload="metadata" muted playsinline></video>
<span class="video-play"></span>
</div>
</a>
{% endif %}
{% if let Some(cap) = m.caption.as_deref() %}
@@ -236,13 +239,27 @@
display: block;
}
.visit-media-item .video-thumb-sm {
position: relative;
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
background: #f0f0f0;
background: #111;
}
.visit-media-item .video-thumb-sm video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.visit-media-item .video-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 1.6rem;
line-height: 1;
text-shadow: 0 1px 4px #000;
pointer-events: none;
}
.visit-media-item .media-cap {
font-size: 0.7rem;