ab/web-petting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
templates/admin/media.html
+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;
templates/admin/schedule_edit.html
+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;
templates/client_portal.html
+14 -3
View File
@@ -52,8 +52,16 @@
width: 80px; height: 60px; object-fit: cover; border-radius: 6px;
}
.media-row .vid-thumb {
width: 80px; height: 60px; border-radius: 6px; background: #f0f0f0;
display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
position: relative; width: 80px; height: 60px; border-radius: 6px;
overflow: hidden; background: #111;
}
.media-row .vid-thumb video {
width: 100%; height: 100%; display: block; object-fit: cover;
}
.media-row .video-play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
color: white; font-size: 1.35rem; line-height: 1;
text-shadow: 0 1px 4px #000; pointer-events: none;
}
.feedback-form { margin-top: 0.6rem; }
.feedback-form textarea {
@@ -152,7 +160,10 @@
</a>
{% else %}
<a href="/client/{{ client.media_token }}/media/{{ m.id.unwrap() }}" data-lightbox="video">
<div class="vid-thumb">🎬</div>
<div class="vid-thumb">
<video src="/client/{{ client.media_token }}/media/{{ m.id.unwrap() }}#t=0.1" preload="metadata" muted playsinline></video>
<span class="video-play">▶</span>
</div>
</a>
{% endif %}
{% endfor %}