feat: upload progress bar — fieldset layout, accent colors, file name display, completion animation, 800ms redirect delay; decorelate formats from fichiers; server-side poll via token; bump PeerTube embed audio player

This commit is contained in:
Pontoporeia
2026-05-11 13:12:36 +02:00
parent cdec3e96a6
commit 927ee2fe2a
12 changed files with 420 additions and 212 deletions

View File

@@ -144,6 +144,7 @@ $checkedFormatsForSiteWeb = $checkedFormatsForSiteWeb ?? [];
<?php endif; ?>
<form action="<?= $formAction ?>" method="post" enctype="multipart/form-data" class="admin-form" data-beforeunload-guard data-upload-progress>
<input type="hidden" name="progress_token" value="<?= bin2hex(random_bytes(8)) ?>">
<?= $hiddenFields ?>
<?php if (!$adminMode): ?>
@@ -484,10 +485,12 @@ $checkedFormatsForSiteWeb = $checkedFormatsForSiteWeb ?? [];
<?php endif; ?>
<div class="form-footer admin-form-footer">
<div id="upload-progress-wrap" style="display:none;margin-bottom:var(--space-s);width:100%;">
<progress id="upload-progress-bar" value="0" max="100" style="width:100%;height:1.2rem;"></progress>
<span id="upload-progress-text" style="display:block;text-align:center;font-size:var(--step--1);color:var(--text-secondary);margin-top:var(--space-3xs);">0%</span>
</div>
<fieldset id="upload-progress-wrap" style="display:none;">
<legend><span id="upload-progress-label">Téléversement en cours…</span></legend>
<progress id="upload-progress-bar" value="0" max="100"></progress>
<p id="upload-progress-file" style="font-size:var(--step--1);color:var(--text-secondary);margin:var(--space-2xs) 0 0 0;"></p>
<small style="display:block;color:var(--text-tertiary);margin-top:var(--space-2xs);">Cette opération peut prendre plusieurs minutes selon la taille des fichiers. Ne fermez pas la page.</small>
</fieldset>
<button type="submit" name="go" class="btn btn--primary"><?= $mode === 'edit' ? 'Enregistrer' : 'Soumettre' ?></button>
<?php if ($mode === 'add' || $mode === 'edit'): ?>
<a href="/admin/" class="btn btn--secondary">Annuler</a>