| 1 | <%# Beheer → Media → Video's (Robins opdracht, 30-7): the videos C2S uploads
|
|---|
| 2 | brought in (Shaer's composer, the help buoy), with usage and cleanup.
|
|---|
| 3 | Same shape as the image page; the preview is the video itself with
|
|---|
| 4 | preload="metadata", so the browser shows the first frame as its
|
|---|
| 5 | thumbnail until real poster generation lands (bead: ffmpeg ontbreekt). %>
|
|---|
| 6 | <div class="admin-wrap" style="max-width:980px;margin:0 auto;padding:1.5rem 1rem;">
|
|---|
| 7 | <a href="/admin" class="btn" style="margin-bottom:1rem;display:inline-block;">← <%= t('nav.admin') %></a>
|
|---|
| 8 | <h1 style="font-family:var(--display,serif);margin:.2rem 0 1rem;"><%= t('admin.t_media') %></h1>
|
|---|
| 9 |
|
|---|
| 10 | <%- include('../partials/media-tabs', { active: 'videos', audioOn: audioOn }) %>
|
|---|
| 11 |
|
|---|
| 12 | <% if (success) { %><p style="background:rgba(60,160,90,.15);border:1px solid rgba(60,160,90,.4);padding:.5rem .8rem;border-radius:8px;"><%= success %></p><% } %>
|
|---|
| 13 |
|
|---|
| 14 | <p style="margin:0 0 1rem;opacity:.75;"><%= items.length %> <%= t('admin.videos_count') %></p>
|
|---|
| 15 |
|
|---|
| 16 | <% if (!items.length) { %>
|
|---|
| 17 | <p style="opacity:.7;"><%= t('admin.videos_empty') %></p>
|
|---|
| 18 | <% } else { %>
|
|---|
| 19 | <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;">
|
|---|
| 20 | <% items.forEach(function(it){ %>
|
|---|
| 21 | <div class="media-card" data-file="<%= it.file %>" style="border:1px solid var(--rule,rgba(128,128,128,.25));border-radius:10px;overflow:hidden;background:var(--paper-2,rgba(128,128,128,.06));">
|
|---|
| 22 | <div style="position:relative;aspect-ratio:16/10;background:#000;">
|
|---|
| 23 | <video src="<%= it.url %>" preload="metadata" controls playsinline style="width:100%;height:100%;object-fit:contain;display:block;"></video>
|
|---|
| 24 | <% if (!it.usedCount) { %><span style="position:absolute;top:6px;left:6px;background:#b4452e;color:#fff;border-radius:6px;padding:1px 6px;font-size:11px;z-index:1;"><%= t('admin.media_unused') %></span><% } %>
|
|---|
| 25 | </div>
|
|---|
| 26 | <div style="padding:.5rem .6rem;font-size:13px;">
|
|---|
| 27 | <div style="opacity:.7;word-break:break-all;"><%= it.file %></div>
|
|---|
| 28 | <div style="opacity:.7;"><%= it.kb %> KB · <%= it.usedCount %>×</div>
|
|---|
| 29 | <div style="display:flex;gap:.4rem;margin-top:.45rem;">
|
|---|
| 30 | <button type="button" class="btn" style="padding:3px 8px;font-size:12px;" data-copy="<%= it.url %>"><%= t('admin.media_copy') %></button>
|
|---|
| 31 | <% if (!it.usedCount) { %>
|
|---|
| 32 | <button type="button" class="btn" style="padding:3px 8px;font-size:12px;background:transparent;border-color:#b4452e;color:#b4452e;" data-del="<%= it.file %>">🗑</button>
|
|---|
| 33 | <% } %>
|
|---|
| 34 | </div>
|
|---|
| 35 | </div>
|
|---|
| 36 | </div>
|
|---|
| 37 | <% }) %>
|
|---|
| 38 | </div>
|
|---|
| 39 | <% } %>
|
|---|
| 40 | </div>
|
|---|
| 41 |
|
|---|
| 42 | <%# Het script staat in assets/js/mod/admin-videos.js; de gegevens via partials/page-data.ejs (shaer-bqr). %>
|
|---|
| 43 | <%- include('../partials/page-data', { pageData: { copy: t('admin.media_copy'), delC: t('admin.videos_del_confirm') } }) %>
|
|---|