mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-11 17:30:00 +02:00
MichaelandClaude Opus 5
6f0f51384a
Full visual overhaul from Cyber-Cinematic Glass to "Warm Cinema": warm charcoal (#0B0908), cream (#F3E9DF), ember (#D9541F). Fraunces (editorial serif) for display, Karla for body/UI. Design - app_colors: new palette, all existing token names preserved, plus posterScrim/heroScrim gradients and lift()/emberFocus() shadows - app_theme: new type scale, tighter radii, 20+ component themes - mobile_theme aligned on the same tokens - glass_container: opaque layered surfaces replace glassmorphism; adds GlassCard (hover + remote-focus states) and CinemaBackdrop - players and boot splash restyled (film-leader motif, no web fonts) Performance - remove every BackdropFilter (33 call sites): backdrop blur forced a full framebuffer read per frame per card, the main scroll jank source - bundle Fraunces/Karla as assets: google_fonts no longer fetches from fonts.gstatic.com at startup - drop the blocking hls.js CDN script from index.html; no Dart code ever used it, only the player iframes need it - self-host hls.js/mpegts.js and load them on demand, so ~213 KB of mpegts is never downloaded for HLS streams - bound image decode size on 10 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) - event-driven start instead of a 200 ms buffer poll plus a 1.5 s wait - initialLiveManifestSize 3 -> 1, liveSyncDurationCount 10 -> 2, startFragPrefetch on, testBandwidth off - MPEG-TS initial stash 512 KB -> 64 KB - adaptive escalation fast -> balanced -> safe on repeated stalls (60 s rolling window), applied live for HLS so there is no visible cut Pre-existing build breakage fixed along the way - undefined AppColors.shimmer, AppTheme.durationXs and spacing8/12/16/32 - broken relative imports in channel_card and quality_selector_widget - missing GlassCard widget and hasBorder/showShadow parameters Also resolves a leftover unmerged .claude/settings.local.json by keeping the remote version. Still broken (pre-existing, dead code, not reachable from main.dart): recommendations_provider.dart and continue_watching_widget.dart import a models/playlist.dart that no longer exists. 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>
|