source: Klonkt/src/views/pages/admin-videos.ejs@ daa8eb8

<%# Beheer -> Media -> Video's (Robins opdracht, 30-7): de video's die via C2S
    binnenkwamen (Shaers composer, de reddingsboei), met gebruik en opruiming.

    De voorvertoning is de video zelf met preload="metadata", zodat de browser
    het eerste beeld als miniatuur toont tot echte poster-generatie landt
    (bead: ffmpeg ontbreekt).

    Zelfde romp als de andere mediapagina's; stond hiervoor op inline styles. %>
<%- include('../partials/admin-styles') %>
<div class="container ax-page">

  <%- include('../partials/admin-back') %>
  <%- include('../partials/media-tabs', { active: 'videos', audioOn: audioOn }) %>
  <header class="ax-header">
    <div>
      <h1><%= t('admin.t_media') %></h1>
      <p class="ax-tagline"><%= items.length %> <%= t('admin.videos_count') %></p>
    </div>
  </header>

  <% if (success) { %><div class="ax-flash ax-flash-ok"><%= success %></div><% } %>

  <% if (!items.length) { %>
    <div class="ax-empty">
      <div class="ax-empty-icon">&#127916;</div>
      <p><%= t('admin.videos_empty') %></p>
    </div>
  <% } else { %>
  <div class="ax-grid" style="--ax-tile:220px;">
    <% items.forEach(function(it){ %>
      <div class="ax-tile media-card" data-file="<%= it.file %>">
        <div class="ax-tile-media" style="aspect-ratio:16/10;background:#000;">
          <video src="<%= it.url %>" preload="metadata" controls playsinline style="height:100%;object-fit:contain;"></video>
          <% if (!it.usedCount) { %><span class="ax-tile-badge"><%= t('admin.media_unused') %></span><% } %>
        </div>
        <div class="ax-tile-body">
          <div class="ax-tile-meta" style="word-break:break-all;"><%= it.file %></div>
          <div class="ax-tile-meta"><%= it.kb %> KB &middot; <%= it.usedCount %>&times;</div>
          <div class="ax-tile-actions">
            <button type="button" class="ax-btn ax-btn-sm" data-copy="<%= it.url %>"><%= t('admin.media_copy') %></button>
            <% if (!it.usedCount) { %>
            <button type="button" class="ax-btn ax-btn-sm ax-btn-danger" data-del="<%= it.file %>">&#128465;</button>
            <% } %>
          </div>
        </div>
      </div>
    <% }) %>
  </div>
  <% } %>
</div>

<%# Het script staat in assets/js/mod/admin-videos.js; de gegevens via partials/page-data.ejs (shaer-bqr). %>
<%- include('../partials/page-data', { pageData: { copy: t('admin.media_copy'), delC: t('admin.videos_del_confirm') } }) %>