mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-12 01:36:20 +02:00
MichaelandClaude Opus 5
1feeaae78a
Replaces the Projector Noir palette with "Warm Cinema" and rebuilds the web players around a shared, event-driven engine. Design - app_colors: warm charcoal (#0B0908), cream (#F3E9DF), ember (#D9541F); adds posterScrim/heroScrim gradients, lift()/emberFocus() shadows, const cream-alpha tokens replacing Colors.whiteNN, and primaryFill, a deeper ember reserved for text-bearing fills so white labels clear the 4.5:1 AA threshold that #D9541F alone does not - app_theme / mobile_theme: Fraunces (display serif) + Karla (body), tighter radii, 20+ component themes - glass_container: opaque layered surfaces replace the blurred glass - themed_loading_screen restyled; players and boot splash follow Performance - drop every BackdropFilter: backdrop blur forced a full framebuffer read per frame per card, the main source of scroll jank - bundle Fraunces/Karla as assets so google_fonts stops fetching from fonts.gstatic.com at startup - bound image decode size on 12 sites: a 40-poster grid drops from ~240 MB to a few tens of MB of GPU memory Players (new shared engine: web/xf-player-core.js) - start on media events instead of polling the buffer every 100-200 ms - hls.js/mpegts.js loaded on demand, so ~213 KB of mpegts is never fetched for HLS streams - liveSyncDurationCount 10 -> 2, startFragPrefetch on, testBandwidth off, MPEG-TS initial stash 512 KB -> 64 KB - adaptive escalation fast -> balanced -> safe after repeated stalls in a 60 s window, applied live for HLS so there is no visible cut Preserved from the recent streaming work on main: server-side quality selection, stable player viewId, the turbo direct MPEG-TS path, vendored library cache headers and the CI/Docker changes. Only the theme layer and the player front-end were replaced; GlassCard stays in ui_components. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
105 lines
3.7 KiB
HTML
105 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>XtremFlow Player</title>
|
|
<!--
|
|
Les libs hls.js / mpegts.js ne sont PLUS chargées depuis un CDN ni de
|
|
façon bloquante : xf-player-core.js ne récupère que celle réellement
|
|
nécessaire au flux courant, en local. Deux requêtes bloquantes en moins
|
|
et environ 200 Ko de JS jamais téléchargés dans le cas courant.
|
|
-->
|
|
<link rel="stylesheet" href="xf-player.css">
|
|
<link rel="preload" href="vendor/hls.min.js" as="script">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="player-container">
|
|
<video id="video" autoplay playsinline webkit-playsinline preload="auto"></video>
|
|
|
|
<div id="play-overlay">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="loading" class="xf-center">
|
|
<div class="xf-leader">
|
|
<div class="xf-leader-cross"></div>
|
|
</div>
|
|
<div class="xf-label" id="loading-text">Ouverture du flux</div>
|
|
<div class="xf-hint" id="loading-hint"></div>
|
|
</div>
|
|
|
|
<div id="error" class="xf-center">
|
|
<div class="xf-error-mark">!</div>
|
|
<div class="xf-error-title" id="error-message">Erreur de chargement</div>
|
|
<div class="xf-error-sub">Vérifiez le lien ou votre connexion</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="xf-player-core.js"></script>
|
|
<script>
|
|
(function () {
|
|
var video = document.getElementById('video');
|
|
var loading = document.getElementById('loading');
|
|
var loadingText = document.getElementById('loading-text');
|
|
var loadingHint = document.getElementById('loading-hint');
|
|
var errorBox = document.getElementById('error');
|
|
var errorMessage = document.getElementById('error-message');
|
|
var playOverlay = document.getElementById('play-overlay');
|
|
|
|
function showLoading(msg) {
|
|
loading.style.display = 'block';
|
|
loadingText.textContent = msg || 'Ouverture du flux';
|
|
errorBox.style.display = 'none';
|
|
}
|
|
|
|
function hideLoading() {
|
|
loading.style.display = 'none';
|
|
loadingHint.textContent = '';
|
|
}
|
|
|
|
function showError(msg) {
|
|
hideLoading();
|
|
errorBox.style.display = 'block';
|
|
errorMessage.textContent = msg || 'Erreur de chargement';
|
|
playOverlay.style.display = 'none';
|
|
}
|
|
|
|
var player = new XFPlayer({
|
|
video: video,
|
|
logPrefix: '[Player]',
|
|
onLoading: showLoading,
|
|
onReady: function () {
|
|
hideLoading();
|
|
playOverlay.style.display = 'none';
|
|
},
|
|
onError: showError,
|
|
onBlocked: function () {
|
|
hideLoading();
|
|
playOverlay.style.display = 'flex';
|
|
},
|
|
onProfileChange: function (name) {
|
|
// Retour visuel discret : l'utilisateur comprend pourquoi
|
|
// la latence augmente légèrement après des coupures.
|
|
loadingHint.textContent =
|
|
name === 'safe' ? 'Réseau instable — buffer maximal'
|
|
: 'Réseau instable — buffer élargi';
|
|
}
|
|
});
|
|
|
|
playOverlay.addEventListener('click', function () {
|
|
video.play();
|
|
playOverlay.style.display = 'none';
|
|
});
|
|
|
|
player.start();
|
|
window.xfPlayer = player;
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|