add video backend server, fix styling and more #54
+6
-1
@@ -88,6 +88,11 @@ footer {
|
|||||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-loader-card.page-loader-card--baronly {
|
||||||
|
width: min(420px, 90vw);
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.page-loader-title {
|
.page-loader-title {
|
||||||
margin: 0 0 10px 0;
|
margin: 0 0 10px 0;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@@ -112,7 +117,7 @@ footer {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
width: 0%;
|
width: 0%;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background: linear-gradient(90deg, #ff4d4d 0%, #ffb200 50%, #4cd964 100%);
|
background: #111;
|
||||||
transition: width 220ms ease;
|
transition: width 220ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
function createPageLoader(options = {}) {
|
function createPageLoader(options = {}) {
|
||||||
const title = String(options.title || 'Chargement…');
|
const title = String(options.title || 'Chargement…');
|
||||||
|
// Subtitle kept for backwards-compat with callers, but we no longer render text in the UI.
|
||||||
const subtitle = String(options.subtitle || 'Préparation de la page…');
|
const subtitle = String(options.subtitle || 'Préparation de la page…');
|
||||||
|
|
||||||
let progress = 0;
|
let progress = 0;
|
||||||
@@ -13,22 +14,15 @@ function createPageLoader(options = {}) {
|
|||||||
overlay.setAttribute('aria-busy', 'true');
|
overlay.setAttribute('aria-busy', 'true');
|
||||||
|
|
||||||
overlay.innerHTML = `
|
overlay.innerHTML = `
|
||||||
<div class="page-loader-card">
|
<div class="page-loader-card page-loader-card--baronly">
|
||||||
<p class="page-loader-title">${title}</p>
|
<span class="visually-hidden">${title}</span>
|
||||||
<p class="page-loader-subtitle" id="page-loader-subtitle">${subtitle}</p>
|
|
||||||
<div class="page-loader-progress" aria-hidden="true">
|
<div class="page-loader-progress" aria-hidden="true">
|
||||||
<div class="page-loader-bar" id="page-loader-bar"></div>
|
<div class="page-loader-bar" id="page-loader-bar"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-loader-actions d-none" id="page-loader-actions">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-dark" id="page-loader-retry">Réessayer</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const barEl = () => overlay.querySelector('#page-loader-bar');
|
const barEl = () => overlay.querySelector('#page-loader-bar');
|
||||||
const subtitleEl = () => overlay.querySelector('#page-loader-subtitle');
|
|
||||||
const actionsEl = () => overlay.querySelector('#page-loader-actions');
|
|
||||||
const retryBtnEl = () => overlay.querySelector('#page-loader-retry');
|
|
||||||
|
|
||||||
function clampPct(p) {
|
function clampPct(p) {
|
||||||
const n = Number(p);
|
const n = Number(p);
|
||||||
@@ -42,9 +36,8 @@ function createPageLoader(options = {}) {
|
|||||||
if (bar) bar.style.width = `${progress}%`;
|
if (bar) bar.style.width = `${progress}%`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setSubtitle(text) {
|
function setSubtitle(_) {
|
||||||
const el = subtitleEl();
|
// Intentionally no-op (we only show the bar now).
|
||||||
if (el) el.textContent = String(text || '');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getNavHeightPx() {
|
function getNavHeightPx() {
|
||||||
@@ -100,13 +93,10 @@ function createPageLoader(options = {}) {
|
|||||||
hideAndRemoveSoon();
|
hideAndRemoveSoon();
|
||||||
}
|
}
|
||||||
|
|
||||||
function fail(message) {
|
function fail(_) {
|
||||||
setSubtitle(message || 'Erreur lors du chargement.');
|
// Don't block the UI on errors: let the page render its own error message.
|
||||||
setProgress(Math.max(progress, 90));
|
setProgress(Math.max(progress, 95));
|
||||||
const actions = actionsEl();
|
window.setTimeout(() => hideAndRemoveSoon(), 200);
|
||||||
if (actions) actions.classList.remove('d-none');
|
|
||||||
const btn = retryBtnEl();
|
|
||||||
if (btn) btn.onclick = () => window.location.reload();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ensureMounted();
|
ensureMounted();
|
||||||
|
|||||||
+9
-19
@@ -1,5 +1,6 @@
|
|||||||
function createPageLoader(options = {}) {
|
function createPageLoader(options = {}) {
|
||||||
const title = String(options.title || 'Chargement…');
|
const title = String(options.title || 'Chargement…');
|
||||||
|
// Subtitle kept for backwards-compat with callers, but we no longer render text in the UI.
|
||||||
const subtitle = String(options.subtitle || 'Préparation de la page…');
|
const subtitle = String(options.subtitle || 'Préparation de la page…');
|
||||||
|
|
||||||
let progress = 0;
|
let progress = 0;
|
||||||
@@ -13,22 +14,15 @@ function createPageLoader(options = {}) {
|
|||||||
overlay.setAttribute('aria-busy', 'true');
|
overlay.setAttribute('aria-busy', 'true');
|
||||||
|
|
||||||
overlay.innerHTML = `
|
overlay.innerHTML = `
|
||||||
<div class="page-loader-card">
|
<div class="page-loader-card page-loader-card--baronly">
|
||||||
<p class="page-loader-title">${title}</p>
|
<span class="visually-hidden">${title}</span>
|
||||||
<p class="page-loader-subtitle" id="page-loader-subtitle">${subtitle}</p>
|
|
||||||
<div class="page-loader-progress" aria-hidden="true">
|
<div class="page-loader-progress" aria-hidden="true">
|
||||||
<div class="page-loader-bar" id="page-loader-bar"></div>
|
<div class="page-loader-bar" id="page-loader-bar"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-loader-actions d-none" id="page-loader-actions">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-dark" id="page-loader-retry">Réessayer</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const barEl = () => overlay.querySelector('#page-loader-bar');
|
const barEl = () => overlay.querySelector('#page-loader-bar');
|
||||||
const subtitleEl = () => overlay.querySelector('#page-loader-subtitle');
|
|
||||||
const actionsEl = () => overlay.querySelector('#page-loader-actions');
|
|
||||||
const retryBtnEl = () => overlay.querySelector('#page-loader-retry');
|
|
||||||
|
|
||||||
function clampPct(p) {
|
function clampPct(p) {
|
||||||
const n = Number(p);
|
const n = Number(p);
|
||||||
@@ -42,9 +36,8 @@ function createPageLoader(options = {}) {
|
|||||||
if (bar) bar.style.width = `${progress}%`;
|
if (bar) bar.style.width = `${progress}%`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setSubtitle(text) {
|
function setSubtitle(_) {
|
||||||
const el = subtitleEl();
|
// Intentionally no-op (we only show the bar now).
|
||||||
if (el) el.textContent = String(text || '');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getNavHeightPx() {
|
function getNavHeightPx() {
|
||||||
@@ -100,13 +93,10 @@ function createPageLoader(options = {}) {
|
|||||||
hideAndRemoveSoon();
|
hideAndRemoveSoon();
|
||||||
}
|
}
|
||||||
|
|
||||||
function fail(message) {
|
function fail(_) {
|
||||||
setSubtitle(message || 'Erreur lors du chargement.');
|
// Don't block the UI on errors: let the page render its own error message.
|
||||||
setProgress(Math.max(progress, 90));
|
setProgress(Math.max(progress, 95));
|
||||||
const actions = actionsEl();
|
window.setTimeout(() => hideAndRemoveSoon(), 200);
|
||||||
if (actions) actions.classList.remove('d-none');
|
|
||||||
const btn = retryBtnEl();
|
|
||||||
if (btn) btn.onclick = () => window.location.reload();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ensureMounted();
|
ensureMounted();
|
||||||
|
|||||||
Reference in New Issue
Block a user