mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-21 22:18:04 +02:00
feat(design): Warm Cinema redesign + fast-start players
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>
This commit is contained in:
MichaelandClaude Opus 5 committed
1 parent
cb5eca7547
commit
6f0f51384a
54 files changed
+2425
-1775
No files matched your search
+102
-284
@@ -1,316 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Mobile IPTV Player</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.4.12/dist/hls.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background: #000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#player-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#loading {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: white;
|
||||
z-index: 20;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.2);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Unmute button — shown when iOS plays muted */
|
||||
#unmute-btn {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 30;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
color: white;
|
||||
border: 2px solid rgba(255, 255, 255, 0.6);
|
||||
border-radius: 32px;
|
||||
padding: 12px 28px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#unmute-btn:active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#error {
|
||||
display: none;
|
||||
position: absolute;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
border-radius: 16px;
|
||||
z-index: 30;
|
||||
max-width: 80%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
</style>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>XtremFlow Player Mobile</title>
|
||||
<link rel="stylesheet" href="xf-player.css">
|
||||
<link rel="preload" href="vendor/hls.min.js" as="script">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="player-container">
|
||||
<!-- muted + autoplay: iOS Safari autorise l'autoplay uniquement si muted -->
|
||||
<!-- muted au départ : seul moyen fiable d'obtenir l'autoplay sur iOS -->
|
||||
<video id="video" autoplay muted playsinline webkit-playsinline preload="auto"></video>
|
||||
|
||||
<!-- Bouton son — affiché après démarrage muted sur iOS -->
|
||||
<button id="unmute-btn">🔇 Appuyer pour activer le son</button>
|
||||
|
||||
<div id="loading">
|
||||
<div class="spinner"></div>
|
||||
<div id="l-text" style="font-size: 14px; font-weight: 500;">Chargement...</div>
|
||||
<div id="loading" class="xf-center">
|
||||
<div class="xf-leader">
|
||||
<div class="xf-leader-cross"></div>
|
||||
</div>
|
||||
<div class="xf-label" id="l-text">Ouverture du flux</div>
|
||||
<div class="xf-hint" id="loading-hint"></div>
|
||||
</div>
|
||||
|
||||
<div id="error">
|
||||
<div style="font-size: 40px; margin-bottom: 12px;">⚠️</div>
|
||||
<div id="err-msg" style="font-weight: 600;">Erreur de lecture</div>
|
||||
<div id="err-sub" style="font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 8px;">Vérifiez votre connexion</div>
|
||||
<button id="unmute-btn" class="xf-sound-btn" type="button">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z" />
|
||||
</svg>
|
||||
Activer le son
|
||||
</button>
|
||||
|
||||
<div id="error" class="xf-center">
|
||||
<div class="xf-error-mark">!</div>
|
||||
<div class="xf-error-title" id="err-msg">Erreur de lecture</div>
|
||||
<div class="xf-error-sub" id="err-sub">Vérifiez votre connexion</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="xf-player-core.js"></script>
|
||||
<script>
|
||||
const video = document.getElementById('video');
|
||||
const loading = document.getElementById('loading');
|
||||
const unmuteBtn = document.getElementById('unmute-btn');
|
||||
const error = document.getElementById('error');
|
||||
(function () {
|
||||
var video = document.getElementById('video');
|
||||
var loading = document.getElementById('loading');
|
||||
var loadingText = document.getElementById('l-text');
|
||||
var loadingHint = document.getElementById('loading-hint');
|
||||
var unmuteBtn = document.getElementById('unmute-btn');
|
||||
var errorBox = document.getElementById('error');
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const streamUrl = params.get('url');
|
||||
const streamType = params.get('type') || 'live';
|
||||
var retryCount = 0;
|
||||
var maxRetries = 3;
|
||||
var player = null;
|
||||
|
||||
function log(m) { console.log('[MobilePlayer] ' + m); }
|
||||
function showLoading(msg) {
|
||||
loading.style.display = 'block';
|
||||
loadingText.textContent = msg || 'Ouverture du flux';
|
||||
errorBox.style.display = 'none';
|
||||
}
|
||||
|
||||
let retryCount = 0;
|
||||
const maxRetries = 3;
|
||||
function hideLoading() {
|
||||
loading.style.display = 'none';
|
||||
loadingHint.textContent = '';
|
||||
}
|
||||
|
||||
function showError(code, msg) {
|
||||
loading.style.display = 'none';
|
||||
unmuteBtn.style.display = 'none';
|
||||
error.style.display = 'block';
|
||||
document.getElementById('err-msg').textContent = 'Erreur ' + code;
|
||||
document.getElementById('err-sub').textContent = msg || 'Format non supporté ou lien expiré';
|
||||
}
|
||||
function showError(msg) {
|
||||
hideLoading();
|
||||
unmuteBtn.style.display = 'none';
|
||||
errorBox.style.display = 'block';
|
||||
document.getElementById('err-sub').textContent =
|
||||
msg || 'Format non supporté ou lien expiré';
|
||||
}
|
||||
|
||||
// Bouton son : user gesture DIRECT dans l'iframe → iOS accepte le unmute
|
||||
unmuteBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
video.muted = false;
|
||||
video.volume = 1.0;
|
||||
unmuteBtn.style.display = 'none';
|
||||
log('Unmuted by user');
|
||||
window.parent.postMessage({ type: 'unmuted' }, '*');
|
||||
});
|
||||
|
||||
video.addEventListener('touchend', () => {
|
||||
window.parent.postMessage({ type: 'user_activity' }, '*');
|
||||
});
|
||||
|
||||
video.addEventListener('playing', () => {
|
||||
log('Video playing, muted=' + video.muted);
|
||||
loading.style.display = 'none';
|
||||
retryCount = 0;
|
||||
// Si muted (iOS autoplay), afficher le bouton son
|
||||
if (video.muted) {
|
||||
unmuteBtn.style.display = 'block';
|
||||
// Tenter de démueter automatiquement (fonctionne parfois après interaction)
|
||||
// Le geste utilisateur doit avoir lieu DANS l'iframe : iOS
|
||||
// n'accepte le démutage que dans ce contexte.
|
||||
unmuteBtn.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
video.muted = false;
|
||||
if (video.muted) {
|
||||
// iOS a refusé le unmute automatique — garder le bouton affiché
|
||||
log('Unmute blocked by iOS, showing button');
|
||||
} else {
|
||||
unmuteBtn.style.display = 'none';
|
||||
log('Auto-unmuted successfully');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
video.addEventListener('error', () => {
|
||||
const code = video.error?.code || '?';
|
||||
const msg = video.error?.message || '';
|
||||
log('Video error code=' + code + ' msg=' + msg + ' retry=' + retryCount);
|
||||
|
||||
if (retryCount < maxRetries) {
|
||||
retryCount++;
|
||||
log('Retry ' + retryCount + '/' + maxRetries + ' in 2s');
|
||||
loading.style.display = 'flex';
|
||||
error.style.display = 'none';
|
||||
document.getElementById('l-text').textContent = 'Reconnexion ' + retryCount + '/' + maxRetries + '...';
|
||||
setTimeout(startPlayback, 2000);
|
||||
} else {
|
||||
showError(code, msg);
|
||||
}
|
||||
});
|
||||
|
||||
function startPlayback() {
|
||||
log('startPlayback: ' + streamUrl);
|
||||
video.src = '';
|
||||
video.load();
|
||||
video.src = streamUrl;
|
||||
video.load();
|
||||
video.play().catch(e => {
|
||||
log('play() rejected: ' + e);
|
||||
// Ne pas montrer erreur ici — laisser l'event error gérer
|
||||
video.volume = 1.0;
|
||||
unmuteBtn.style.display = 'none';
|
||||
window.parent.postMessage({ type: 'unmuted' }, '*');
|
||||
});
|
||||
}
|
||||
|
||||
function initHlsJs() {
|
||||
log('Using HLS.js');
|
||||
const hls = new Hls({
|
||||
maxBufferLength: 30,
|
||||
maxMaxBufferLength: 60,
|
||||
liveSyncDurationCount: 5,
|
||||
liveMaxLatencyDurationCount: 10,
|
||||
enableWorker: true,
|
||||
lowLatencyMode: false,
|
||||
nudgeOffset: 0.8,
|
||||
nudgeMaxRetries: 10,
|
||||
manifestLoadingRetryDelay: 1000,
|
||||
levelLoadingRetryDelay: 1000
|
||||
});
|
||||
hls.loadSource(streamUrl);
|
||||
hls.attachMedia(video);
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
log('HLS manifest parsed');
|
||||
video.play().catch(() => log('HLS autoplay blocked'));
|
||||
});
|
||||
hls.on(Hls.Events.ERROR, (e, d) => {
|
||||
log('HLS error type=' + d.type + ' fatal=' + d.fatal);
|
||||
if (d.fatal) {
|
||||
if (d.type === Hls.ErrorTypes.NETWORK_ERROR) hls.startLoad();
|
||||
else if (d.type === Hls.ErrorTypes.MEDIA_ERROR) hls.recoverMediaError();
|
||||
else showError(d.type, 'Erreur HLS fatale');
|
||||
}
|
||||
});
|
||||
}
|
||||
function buildPlayer() {
|
||||
if (player) { try { player.destroy(); } catch (e) {} }
|
||||
|
||||
function initMpegts() {
|
||||
log('Using MpegTS');
|
||||
const player = mpegts.createPlayer({
|
||||
type: 'mpegts',
|
||||
isLive: streamType === 'live',
|
||||
url: streamUrl
|
||||
}, {
|
||||
enableWorker: true,
|
||||
stashInitialSize: 512 * 1024,
|
||||
enableStashBuffer: true,
|
||||
liveBufferLatencyChasing: false,
|
||||
maxStashSize: 30 * 1024 * 1024
|
||||
});
|
||||
player.on(mpegts.Events.ERROR, (type, detail) => {
|
||||
log('MpegTS error type=' + type);
|
||||
showError(type, JSON.stringify(detail));
|
||||
});
|
||||
player.attachMediaElement(video);
|
||||
player.load();
|
||||
player.play().catch(() => log('MpegTS autoplay blocked'));
|
||||
}
|
||||
player = new XFPlayer({
|
||||
video: video,
|
||||
logPrefix: '[MobilePlayer]',
|
||||
onLoading: showLoading,
|
||||
onReady: function () {
|
||||
hideLoading();
|
||||
retryCount = 0;
|
||||
// Tentative de démutage auto ; si iOS refuse, on propose le bouton.
|
||||
if (video.muted) {
|
||||
video.muted = false;
|
||||
unmuteBtn.style.display = video.muted ? 'flex' : 'none';
|
||||
}
|
||||
},
|
||||
onError: function (msg) {
|
||||
if (retryCount < maxRetries) {
|
||||
retryCount++;
|
||||
showLoading('Reconnexion ' + retryCount + '/' + maxRetries);
|
||||
setTimeout(buildPlayer, 1500);
|
||||
} else {
|
||||
showError(msg);
|
||||
}
|
||||
},
|
||||
onBlocked: function () {
|
||||
// Autoplay refusé même en sourdine : le bouton son sert
|
||||
// aussi de déclencheur de lecture.
|
||||
hideLoading();
|
||||
unmuteBtn.style.display = 'flex';
|
||||
},
|
||||
onProfileChange: function (name) {
|
||||
loadingHint.textContent =
|
||||
name === 'safe' ? 'Réseau instable — buffer maximal'
|
||||
: 'Réseau instable — buffer élargi';
|
||||
}
|
||||
});
|
||||
|
||||
function init() {
|
||||
if (!streamUrl) {
|
||||
log('No stream URL');
|
||||
showError('URL', 'Pas de lien de flux');
|
||||
return;
|
||||
}
|
||||
log('Init: ' + streamUrl + ' type=' + streamType);
|
||||
|
||||
const isHLS = streamUrl.toLowerCase().includes('m3u8');
|
||||
const isTS = streamUrl.toLowerCase().endsWith('.ts');
|
||||
log('isHLS=' + isHLS + ' isTS=' + isTS);
|
||||
|
||||
// iOS Safari — HLS natif avec muted autoplay
|
||||
if (isHLS && video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
log('iOS Safari native HLS (muted autoplay)');
|
||||
startPlayback();
|
||||
return;
|
||||
player.start();
|
||||
window.xfPlayer = player;
|
||||
}
|
||||
|
||||
// Android/Chrome — HLS.js
|
||||
if (isHLS && Hls.isSupported()) {
|
||||
initHlsJs();
|
||||
return;
|
||||
}
|
||||
video.addEventListener('touchend', function () {
|
||||
window.parent.postMessage({ type: 'user_activity' }, '*');
|
||||
}, { passive: true });
|
||||
|
||||
// MpegTS fallback
|
||||
if (mpegts.isSupported()) {
|
||||
initMpegts();
|
||||
return;
|
||||
}
|
||||
|
||||
// Direct fallback
|
||||
log('Direct fallback');
|
||||
startPlayback();
|
||||
}
|
||||
|
||||
// Messages depuis Flutter
|
||||
window.addEventListener('message', (e) => {
|
||||
const d = e.data;
|
||||
if (!d) return;
|
||||
if (d.type === 'play') video.play().catch(() => {});
|
||||
if (d.type === 'pause') video.pause();
|
||||
if (d.type === 'set_volume') {
|
||||
video.muted = d.value === 0;
|
||||
video.volume = d.value;
|
||||
if (d.value > 0) unmuteBtn.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
init();
|
||||
buildPlayer();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in new issue
Block a user