mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-11 17:30:00 +02:00
Claude
85a8d16542
Son manquant sur certaines chaînes : - Nouvelle route GET /api/live/<id>/turbo.ts pour le player web : vidéo copiée (-c:v copy), audio TOUJOURS réencodé en AAC. mpegts.js ne démuxe que l'AAC/MP3 : les chaînes en AC-3/E-AC-3/MP2 passaient par le proxy brut → image sans son, et le fallback HLS côté client ne couvrait pas les codecs démuxés mais non décodables par le navigateur (MP2) - getLiveStreamUrlTs pointe sur la route turbo ; le proxy brut /api/live/<id>.ts reste inchangé pour le scheduler d'enregistrement - FFmpeg turbo tué dès que le client zappe (onCancel) ; stderr redacté - Le fallback client (_hlsEquivalent) reconnaît le nouveau format d'URL et reste en filet de sécurité Temps de chargement : - Players vendorisés mis à jour : hls.js 1.6.7 → 1.7.1, mpegts.js 1.7.3 → 1.8.2 - Live HLS et turbo : -fflags nobuffer + probesize/analyzeduration 1 Mo (sans borne, FFmpeg pouvait sonder plusieurs secondes avant le premier segment) - VOD : probesize 10 Mo → 5 Mo, analyzeduration 5 s → 2 s - Live 'high' : preset medium → veryfast (zerolatency déjà actif) ; lecture d'enregistrement : medium/crf18 → veryfast/crf20 (medium ne tenait pas le temps réel en 1080p sur CPU modeste) - waitForPlaylist : polling 500 ms → 100 ms - Suppression du cache-buster &v=timestamp qui re-téléchargeait player.html à chaque zap ; les .html sont servis en no-cache côté serveur pour garder la fraîcheur après déploiement - mpegts.js : liveBufferLatencyChasing activé en profil « fast » — les micro-coupures ne font plus dériver la lecture derrière le direct Validé : dart analyze (0 issue) + dart test (48/48) sur bin/, syntaxe JS vérifiée. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015oEu9QayWsw7hCKhenxgVa
1224 lines
46 KiB
Dart
1224 lines
46 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'dart:html' as html;
|
|
import 'dart:ui_web' as ui_web;
|
|
import 'dart:async';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import 'package:pointer_interceptor/pointer_interceptor.dart';
|
|
import '../providers/xtream_provider.dart';
|
|
import '../providers/playback_positions_provider.dart';
|
|
import '../widgets/quality_selector_widget.dart';
|
|
|
|
// ... (existing imports)
|
|
// ... (existing imports)
|
|
import '../../../core/models/playlist_config.dart';
|
|
import '../../../core/widgets/glass_container.dart';
|
|
import '../../../core/theme/app_colors.dart';
|
|
|
|
enum StreamType { live, vod, series, recording }
|
|
|
|
class PlayerScreen extends ConsumerStatefulWidget {
|
|
final String streamId;
|
|
final String title;
|
|
final PlaylistConfig playlist;
|
|
final StreamType streamType;
|
|
final String containerExtension;
|
|
final List<dynamic>? channels;
|
|
final double? startTime;
|
|
final Duration? duration;
|
|
|
|
const PlayerScreen({
|
|
super.key,
|
|
required this.streamId,
|
|
required this.title,
|
|
required this.playlist,
|
|
this.streamType = StreamType.live,
|
|
this.containerExtension = 'mp4',
|
|
this.channels,
|
|
this.startTime,
|
|
this.duration,
|
|
});
|
|
|
|
@override
|
|
ConsumerState<PlayerScreen> createState() => _PlayerScreenState();
|
|
}
|
|
|
|
class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
|
bool _isPlaying = true;
|
|
bool _showControls = false;
|
|
Timer? _controlsTimer;
|
|
double _currentPosition = 0;
|
|
double _totalDuration = 1;
|
|
int _currentIndex = 0;
|
|
bool _isInitialized = false;
|
|
bool _isLoading = true;
|
|
StreamSubscription? _messageSubscription;
|
|
bool _isSeeking = false;
|
|
late final String _viewIdPrefix =
|
|
DateTime.now().millisecondsSinceEpoch.toString();
|
|
String _viewId = 'iptv-player';
|
|
bool _isMuted = false;
|
|
bool _ignoreStatusUpdates = false;
|
|
|
|
/// Reflète l'état plein écran du document. Le navigateur peut en sortir
|
|
/// sans passer par notre bouton (touche Échap), d'où l'écoute de
|
|
/// `fullscreenchange` plutôt qu'un simple booléen basculé au clic.
|
|
bool _isFullscreen = false;
|
|
StreamSubscription<html.Event>? _fullscreenSubscription;
|
|
|
|
/// Server-side transcoding quality. Live TV defaults to `source`
|
|
/// (direct MPEG-TS proxy, zero transcoding); VOD defaults to `high`.
|
|
late StreamQuality _quality = widget.streamType == StreamType.live
|
|
? StreamQuality.source
|
|
: StreamQuality.high;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
if (widget.channels != null) {
|
|
_currentIndex = widget.channels!.indexWhere((c) {
|
|
try {
|
|
return (c.streamId ?? c.id ?? '').toString() == widget.streamId;
|
|
} catch (_) {
|
|
return false;
|
|
}
|
|
});
|
|
if (_currentIndex == -1) _currentIndex = 0;
|
|
}
|
|
// Show controls at start, then auto-hide after timeout
|
|
_showControls = true;
|
|
_onHover(); // Start the auto-hide timer
|
|
_initializePlayer(startTimeOverride: widget.startTime);
|
|
_setupMessageListener();
|
|
_fullscreenSubscription =
|
|
html.document.onFullscreenChange.listen((_) => _syncFullscreenState());
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_messageSubscription?.cancel();
|
|
_fullscreenSubscription?.cancel();
|
|
_controlsTimer?.cancel();
|
|
super.dispose();
|
|
}
|
|
|
|
/// Ne teste que l'API non préfixée.
|
|
///
|
|
/// Les variantes `webkitFullscreenElement` / `mozFullScreenElement` étaient
|
|
/// lues via un cast `dynamic` : dart2js ne retombe pas sur la propriété JS
|
|
/// pour un membre absent de la classe `Document`, il lève un
|
|
/// `NoSuchMethodError`. Le getter échouait donc systématiquement, et le
|
|
/// bouton plein écran ne faisait rien. L'API standard est supportée par
|
|
/// tous les navigateurs visés.
|
|
bool get _documentIsFullscreen => html.document.fullscreenElement != null;
|
|
|
|
void _syncFullscreenState() {
|
|
final value = _documentIsFullscreen;
|
|
if (mounted && value != _isFullscreen) {
|
|
setState(() => _isFullscreen = value);
|
|
}
|
|
}
|
|
|
|
Future<void> _initializePlayer({
|
|
double? startTimeOverride,
|
|
bool isChannelSwitch = false,
|
|
}) async {
|
|
setState(() {
|
|
_isLoading = true;
|
|
});
|
|
|
|
try {
|
|
// Determine Stream ID (Initial or Current Index)
|
|
String currentStreamId = widget.streamId;
|
|
if (isChannelSwitch && widget.channels != null) {
|
|
try {
|
|
final item = widget.channels![_currentIndex];
|
|
currentStreamId = (item.streamId ?? item.id ?? '').toString();
|
|
} catch (_) {}
|
|
}
|
|
|
|
// Stable view ID for the instance to prevent iframe reload on rebuild
|
|
// (orientation change). Includes quality so a quality switch forces a
|
|
// fresh iframe.
|
|
_viewId = 'iptv-player-$currentStreamId-${_quality.value}-$_viewIdPrefix';
|
|
|
|
final service = ref.read(xtreamServiceProvider(widget.playlist));
|
|
String streamUrl = '';
|
|
|
|
// Generate Stream URL based on type
|
|
// NOTE: Logic is now handled by the backend routes /api/live/ and /api/vod/
|
|
if (widget.streamType == StreamType.live) {
|
|
streamUrl = service.getLiveStreamUrl(
|
|
currentStreamId,
|
|
quality: _quality.value,
|
|
);
|
|
} else if (widget.streamType == StreamType.vod) {
|
|
streamUrl = service.getVodStreamUrl(
|
|
currentStreamId,
|
|
widget.containerExtension,
|
|
quality: _quality.value,
|
|
);
|
|
} else if (widget.streamType == StreamType.series) {
|
|
streamUrl = service.getSeriesStreamUrl(
|
|
currentStreamId,
|
|
widget.containerExtension,
|
|
quality: _quality.value,
|
|
);
|
|
} else if (widget.streamType == StreamType.recording) {
|
|
streamUrl = '${service.backendBaseUrl}/api/recordings/stream/$currentStreamId/playlist.m3u8';
|
|
}
|
|
|
|
// Store URL for Lite Player
|
|
final isMobile = MediaQuery.of(context).size.width < 600;
|
|
final isLiveTV = widget.streamType == StreamType.live;
|
|
|
|
// TURBO-START: in `source` quality, Live TV on desktop uses the direct
|
|
// MPEG-TS proxy (mpegts.js) for instant zapping with zero transcoding.
|
|
if (isLiveTV && !isMobile && _quality == StreamQuality.source) {
|
|
streamUrl = service.getLiveStreamUrlTs(currentStreamId);
|
|
}
|
|
|
|
// STABILIZATION: Lock background requests during stream init
|
|
service.isPlaybackLoading = true;
|
|
Future.delayed(const Duration(seconds: 10), () {
|
|
service.isPlaybackLoading = false;
|
|
});
|
|
|
|
final encodedUrl = Uri.encodeComponent(streamUrl);
|
|
// Force player choice based on stream type:
|
|
// - Live TV: Player Lite (simple TS playback with mpegts.js)
|
|
// - VOD/Series: Player Standard (fuller controls, HLS support)
|
|
|
|
final streamTypeParam =
|
|
widget.streamType == StreamType.live ? 'live' : 'vod';
|
|
final playerFile = isMobile
|
|
? 'player_mobile.html'
|
|
: (isLiveTV ? 'player_lite.html' : 'player.html');
|
|
|
|
// Plus de cache-buster « &v=timestamp » : il forçait le re-téléchargement
|
|
// et le re-parse de player.html à CHAQUE zap. Le serveur sert désormais
|
|
// les .html en no-cache, la fraîcheur est garantie sans pénaliser le zap.
|
|
var playerSrc =
|
|
'$playerFile?url=$encodedUrl&type=$streamTypeParam&turbo=true';
|
|
|
|
if (widget.streamType == StreamType.recording) {
|
|
playerSrc += '&is_recording=true';
|
|
}
|
|
|
|
if (startTimeOverride != null) {
|
|
playerSrc += '&t=$startTimeOverride';
|
|
}
|
|
|
|
if (widget.duration != null) {
|
|
playerSrc += '&duration=${widget.duration!.inSeconds}';
|
|
}
|
|
|
|
// Register View Factory (Only needed for Standard Player, but safe to do always or conditionally)
|
|
ui_web.platformViewRegistry.registerViewFactory(_viewId, (int viewId) {
|
|
final iframe = html.IFrameElement()
|
|
..id = _viewId
|
|
..src = playerSrc
|
|
..style.border = 'none'
|
|
..style.width = '100%'
|
|
..style.height = '100%'
|
|
..allow = 'autoplay; fullscreen; picture-in-picture; encrypted-media';
|
|
return iframe;
|
|
});
|
|
|
|
if (mounted) {
|
|
setState(() {
|
|
_isInitialized = true;
|
|
_isLoading = false;
|
|
});
|
|
|
|
// Force unmute on load (after a short delay to ensure iframe is ready)
|
|
Future.delayed(const Duration(milliseconds: 500), () {
|
|
if (mounted) {
|
|
_sendMessage({'type': 'set_volume', 'value': 1.0});
|
|
}
|
|
});
|
|
}
|
|
} catch (e) {
|
|
print('[PlayerScreen] Failed to load stream: $e');
|
|
if (mounted) {
|
|
setState(() {
|
|
_isLoading = false;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
void _setupMessageListener() {
|
|
_messageSubscription = html.window.onMessage.listen((event) {
|
|
// The player iframes are same-origin; drop messages from anywhere else.
|
|
if (event.origin != html.window.location.origin) return;
|
|
final data = event.data;
|
|
if (data == null) return;
|
|
|
|
final type = data['type'];
|
|
if (type == 'playback_position') {
|
|
final currentTime = (data['currentTime'] as num).toDouble();
|
|
final rawDuration = (data['duration'] as num).toDouble();
|
|
final duration = rawDuration.isFinite ? rawDuration : 0.0;
|
|
|
|
// Only update position if user is NOT dragging the slider
|
|
if (!_isSeeking) {
|
|
setState(() {
|
|
_currentPosition = currentTime;
|
|
_totalDuration = duration > 0 ? duration : 1;
|
|
});
|
|
}
|
|
|
|
// Update watch history if relevant
|
|
if (currentTime > 0) {
|
|
ref.read(playbackPositionsProvider.notifier).savePosition(
|
|
widget.streamId,
|
|
currentTime,
|
|
duration,
|
|
);
|
|
}
|
|
} else if (type == 'playback_status') {
|
|
if (!_ignoreStatusUpdates) {
|
|
setState(() => _isPlaying = data['status'] == 'playing');
|
|
}
|
|
} else if (type == 'user_activity') {
|
|
_onHover();
|
|
}
|
|
});
|
|
}
|
|
|
|
void _sendMessage(Map<String, dynamic> message) {
|
|
if (!_isInitialized) return;
|
|
|
|
// Try finding by ID first
|
|
var iframe = html.document.getElementById(_viewId) as html.IFrameElement?;
|
|
|
|
// If not found, try finding by src pattern (fallback for Shadow DOM or ID issues)
|
|
if (iframe == null) {
|
|
final iframes = html.document.getElementsByTagName('iframe');
|
|
for (final frame in iframes) {
|
|
if (frame is html.IFrameElement &&
|
|
(frame.src?.contains('player_lite.html') == true ||
|
|
frame.src?.contains('player.html') == true ||
|
|
frame.src?.contains('player_mobile.html') == true)) {
|
|
iframe = frame;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (iframe != null) {
|
|
iframe.contentWindow
|
|
?.postMessage(message, html.window.location.origin);
|
|
} else {
|
|
print(
|
|
'[PlayerScreen] Error: Could not find iframe to send message: $message',
|
|
);
|
|
}
|
|
}
|
|
|
|
void _onHover() {
|
|
setState(() => _showControls = true);
|
|
_controlsTimer?.cancel();
|
|
_controlsTimer = Timer(const Duration(seconds: 4), () {
|
|
if (mounted && _isPlaying) setState(() => _showControls = false);
|
|
});
|
|
}
|
|
|
|
void _togglePlayPause() {
|
|
// Optimistic update to make UI responsive immediately
|
|
setState(() => _isPlaying = !_isPlaying);
|
|
|
|
// Ignore incoming status updates for 2 seconds to prevent fighting
|
|
_ignoreStatusUpdates = true;
|
|
Future.delayed(const Duration(seconds: 2), () {
|
|
if (mounted) _ignoreStatusUpdates = false;
|
|
});
|
|
|
|
if (_isPlaying) {
|
|
_sendMessage({'type': 'play'});
|
|
} else {
|
|
_sendMessage({'type': 'pause'});
|
|
}
|
|
}
|
|
|
|
void _toggleFullscreen() {
|
|
try {
|
|
if (_documentIsFullscreen) {
|
|
html.document.exitFullscreen();
|
|
} else {
|
|
final element = html.document.documentElement;
|
|
if (element != null) {
|
|
element.requestFullscreen();
|
|
}
|
|
}
|
|
} catch (e) {
|
|
print('[PlayerScreen] Fullscreen error: $e');
|
|
_sendMessage({'type': 'request_fullscreen'});
|
|
}
|
|
// `fullscreenchange` arrive de façon asynchrone : relire l'état juste
|
|
// après l'appel évite que l'icône reste figée si l'évènement est perdu.
|
|
Future.delayed(
|
|
const Duration(milliseconds: 150),
|
|
_syncFullscreenState,
|
|
);
|
|
}
|
|
|
|
void _toggleMute() {
|
|
setState(() => _isMuted = !_isMuted);
|
|
_sendMessage({'type': 'set_volume', 'value': _isMuted ? 0.0 : 1.0});
|
|
}
|
|
|
|
void _changeQuality(StreamQuality quality) {
|
|
if (quality == _quality) return;
|
|
setState(() => _quality = quality);
|
|
// Rebuild the iframe with the new quality; VOD resumes at the
|
|
// current position, live restarts at the live edge.
|
|
final resumeAt =
|
|
widget.streamType == StreamType.live ? null : _currentPosition;
|
|
_initializePlayer(startTimeOverride: resumeAt, isChannelSwitch: true);
|
|
}
|
|
|
|
void _previousChannel() {
|
|
if (widget.channels != null && widget.channels!.isNotEmpty) {
|
|
setState(() {
|
|
if (_currentIndex > 0) {
|
|
_currentIndex--;
|
|
} else {
|
|
_currentIndex = widget.channels!.length - 1;
|
|
}
|
|
});
|
|
_initializePlayer(isChannelSwitch: true);
|
|
}
|
|
}
|
|
|
|
void _nextChannel() {
|
|
if (widget.channels != null && widget.channels!.isNotEmpty) {
|
|
setState(() {
|
|
if (_currentIndex < widget.channels!.length - 1) {
|
|
_currentIndex++;
|
|
} else {
|
|
_currentIndex = 0;
|
|
}
|
|
});
|
|
_initializePlayer(isChannelSwitch: true);
|
|
}
|
|
}
|
|
|
|
/// Keyboard / TV remote controls:
|
|
/// space-enter = play/pause, ←/→ = seek ±10s (VOD) or zap (live),
|
|
/// ↑/↓ = zap (live), M = mute, Esc = exit player.
|
|
KeyEventResult _onKeyEvent(FocusNode node, KeyEvent event) {
|
|
if (event is! KeyDownEvent) return KeyEventResult.ignored;
|
|
final isLive = widget.streamType == StreamType.live;
|
|
final key = event.logicalKey;
|
|
|
|
if (key == LogicalKeyboardKey.space ||
|
|
key == LogicalKeyboardKey.enter ||
|
|
key == LogicalKeyboardKey.select ||
|
|
key == LogicalKeyboardKey.mediaPlayPause) {
|
|
_togglePlayPause();
|
|
_onHover();
|
|
return KeyEventResult.handled;
|
|
}
|
|
if (key == LogicalKeyboardKey.escape) {
|
|
Navigator.pop(context);
|
|
return KeyEventResult.handled;
|
|
}
|
|
if (key == LogicalKeyboardKey.keyM) {
|
|
_toggleMute();
|
|
_onHover();
|
|
return KeyEventResult.handled;
|
|
}
|
|
if (key == LogicalKeyboardKey.arrowLeft) {
|
|
if (isLive) {
|
|
_previousChannel();
|
|
} else {
|
|
_sendMessage({
|
|
'type': 'seek',
|
|
'value': (_currentPosition - 10).clamp(0, _totalDuration),
|
|
});
|
|
}
|
|
_onHover();
|
|
return KeyEventResult.handled;
|
|
}
|
|
if (key == LogicalKeyboardKey.arrowRight) {
|
|
if (isLive) {
|
|
_nextChannel();
|
|
} else {
|
|
_sendMessage({
|
|
'type': 'seek',
|
|
'value': (_currentPosition + 10).clamp(0, _totalDuration),
|
|
});
|
|
}
|
|
_onHover();
|
|
return KeyEventResult.handled;
|
|
}
|
|
if (isLive && key == LogicalKeyboardKey.arrowUp) {
|
|
_nextChannel();
|
|
_onHover();
|
|
return KeyEventResult.handled;
|
|
}
|
|
if (isLive && key == LogicalKeyboardKey.arrowDown) {
|
|
_previousChannel();
|
|
_onHover();
|
|
return KeyEventResult.handled;
|
|
}
|
|
return KeyEventResult.ignored;
|
|
}
|
|
|
|
String _formatDuration(Duration d) {
|
|
String twoDigits(int n) => n.toString().padLeft(2, '0');
|
|
final hours = twoDigits(d.inHours);
|
|
final minutes = twoDigits(d.inMinutes.remainder(60));
|
|
final seconds = twoDigits(d.inSeconds.remainder(60));
|
|
return d.inHours > 0 ? '$hours:$minutes:$seconds' : '$minutes:$seconds';
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isLiveTV = widget.streamType == StreamType.live;
|
|
|
|
// LITE PLAYER MODE for Live TV - Simplified UI (no BackdropFilter)
|
|
if (isLiveTV) {
|
|
return Focus(
|
|
autofocus: true,
|
|
onKeyEvent: _onKeyEvent,
|
|
child: Scaffold(
|
|
backgroundColor: AppColors.background,
|
|
body: Stack(
|
|
fit: StackFit.expand,
|
|
children: [
|
|
// Video Player
|
|
if (_isInitialized) HtmlElementView(viewType: _viewId),
|
|
|
|
// Control Overlay (sits on top of video, catches all pointer events)
|
|
Positioned.fill(
|
|
child: PointerInterceptor(
|
|
child: MouseRegion(
|
|
onHover: (_) => _onHover(),
|
|
child: GestureDetector(
|
|
behavior: HitTestBehavior.translucent,
|
|
onTap: () {
|
|
if (_showControls) {
|
|
setState(() => _showControls = false);
|
|
} else {
|
|
_onHover();
|
|
}
|
|
},
|
|
child: Container(
|
|
color: Colors.transparent,
|
|
child: Stack(
|
|
children: [
|
|
// Top Bar
|
|
AnimatedPositioned(
|
|
duration: const Duration(milliseconds: 200),
|
|
top: _showControls ? 0 : -100,
|
|
left: 0,
|
|
right: 0,
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 16,
|
|
vertical: 12,
|
|
),
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [
|
|
AppColors.background.withOpacity(0.8),
|
|
Colors.transparent,
|
|
],
|
|
),
|
|
),
|
|
child: SafeArea(
|
|
bottom: false,
|
|
child: Row(
|
|
children: [
|
|
_buildSimpleIconButton(
|
|
icon: Icons.arrow_back_rounded,
|
|
onTap: () => Navigator.pop(context),
|
|
tooltip: 'Retour',
|
|
),
|
|
const SizedBox(width: 16),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment:
|
|
CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
widget.channels != null
|
|
? (widget
|
|
.channels![
|
|
_currentIndex]
|
|
.name ??
|
|
widget
|
|
.channels![
|
|
_currentIndex]
|
|
.title ??
|
|
'Unknown')
|
|
.toString()
|
|
: widget.title,
|
|
style: GoogleFonts.fraunces(
|
|
color: AppColors.textPrimary,
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
Text(
|
|
'Live TV',
|
|
style: GoogleFonts.karla(
|
|
color: AppColors.primary,
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
// Top right mute button removed
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
// Unified Bottom Bar - EPG + Controls in one bar
|
|
AnimatedPositioned(
|
|
duration: const Duration(milliseconds: 200),
|
|
bottom: _showControls
|
|
? 24
|
|
: -150, // More offset for stacked layout
|
|
left: 16,
|
|
right: 16,
|
|
child: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final isSmallScreen =
|
|
constraints.maxWidth < 600;
|
|
return Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: isSmallScreen ? 16 : 20,
|
|
vertical: isSmallScreen ? 12 : 16,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.surface.withOpacity(0.95),
|
|
borderRadius: BorderRadius.circular(24),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.background
|
|
.withOpacity(0.3),
|
|
blurRadius: 10,
|
|
spreadRadius: 2,
|
|
),
|
|
],
|
|
border: Border.all(
|
|
color: AppColors.textPrimary
|
|
.withOpacity(0.15),
|
|
),
|
|
),
|
|
child: isSmallScreen
|
|
? Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// EPG Info (top in mobile)
|
|
_buildInlineEpg(),
|
|
const SizedBox(height: 12),
|
|
const Divider(
|
|
color: AppColors.onSurface06,
|
|
),
|
|
const SizedBox(height: 8),
|
|
// Control Buttons
|
|
Row(
|
|
mainAxisAlignment:
|
|
MainAxisAlignment.spaceEvenly,
|
|
children: _buildControlButtons(
|
|
isSmallScreen,
|
|
),
|
|
),
|
|
],
|
|
)
|
|
: Row(
|
|
children: [
|
|
// EPG Info (left side)
|
|
Expanded(
|
|
child: _buildInlineEpg(),
|
|
),
|
|
const SizedBox(width: 24),
|
|
// Control Buttons (right side)
|
|
Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: _buildControlButtons(
|
|
isSmallScreen,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// STANDARD PLAYER MODE (VOD/Series)
|
|
return Focus(
|
|
autofocus: true,
|
|
onKeyEvent: _onKeyEvent,
|
|
child: Scaffold(
|
|
backgroundColor: Colors.black,
|
|
body: Stack(
|
|
fit: StackFit.expand,
|
|
children: [
|
|
if (_isInitialized) HtmlElementView(viewType: _viewId),
|
|
|
|
// User interaction area
|
|
Positioned.fill(
|
|
child: PointerInterceptor(
|
|
child: MouseRegion(
|
|
onHover: (_) => _onHover(),
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
if (_showControls) {
|
|
setState(() => _showControls = false);
|
|
} else {
|
|
_onHover();
|
|
}
|
|
},
|
|
behavior: HitTestBehavior.translucent,
|
|
child: Container(color: Colors.transparent),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
// Controls Overlay
|
|
if (_showControls || _isLoading)
|
|
Positioned.fill(
|
|
child: PointerInterceptor(
|
|
child: Container(
|
|
color: Colors.black.withOpacity(0.4),
|
|
child: Stack(
|
|
children: [
|
|
// Top Bar
|
|
Positioned(
|
|
top: 24,
|
|
left: 24,
|
|
right: 24,
|
|
child: GlassContainer.glass(
|
|
height: 72,
|
|
borderRadius: 24,
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
child: Row(
|
|
children: [
|
|
_buildGlassIconButton(
|
|
icon: Icons.arrow_back_rounded,
|
|
onTap: () => Navigator.pop(context),
|
|
tooltip: 'Retour',
|
|
),
|
|
const SizedBox(width: 16),
|
|
Expanded(
|
|
child: Text(
|
|
widget.title,
|
|
style: GoogleFonts.fraunces(
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.onSurface,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
// Center Loading Indicator (only show when loading)
|
|
if (_isLoading)
|
|
const Center(
|
|
child: CircularProgressIndicator(
|
|
color: AppColors.primary,
|
|
),
|
|
),
|
|
|
|
// Bottom Controls
|
|
Positioned(
|
|
bottom: 40,
|
|
left: 40,
|
|
right: 40,
|
|
child: GlassContainer.glass(
|
|
borderRadius: 24,
|
|
borderColor: AppColors.onSurface.withOpacity(0.1),
|
|
padding: const EdgeInsets.all(24),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// Progress
|
|
Row(
|
|
children: [
|
|
Text(
|
|
_formatDuration(
|
|
Duration(
|
|
seconds: _currentPosition.toInt(),
|
|
),
|
|
),
|
|
style: GoogleFonts.karla(
|
|
color: AppColors.onSurfaceVariant,
|
|
),
|
|
),
|
|
const SizedBox(width: 16),
|
|
Expanded(
|
|
child: SliderTheme(
|
|
data: SliderThemeData(
|
|
trackHeight: 4,
|
|
activeTrackColor: AppColors.primary,
|
|
inactiveTrackColor:
|
|
AppColors.onSurface.withOpacity(0.2),
|
|
thumbColor: AppColors.onSurface,
|
|
thumbShape: const RoundSliderThumbShape(
|
|
enabledThumbRadius: 8,
|
|
),
|
|
overlayColor:
|
|
AppColors.primary.withOpacity(0.2),
|
|
),
|
|
child: Slider(
|
|
value: _currentPosition,
|
|
min: 0,
|
|
max: _totalDuration,
|
|
onChanged: (val) => setState(
|
|
() => _currentPosition = val,
|
|
),
|
|
onChangeStart: (_) =>
|
|
setState(() => _isSeeking = true),
|
|
onChangeEnd: (val) {
|
|
_sendMessage(
|
|
{'type': 'seek', 'value': val},
|
|
);
|
|
Future.delayed(
|
|
const Duration(milliseconds: 500),
|
|
() {
|
|
if (mounted) {
|
|
setState(
|
|
() => _isSeeking = false,
|
|
);
|
|
}
|
|
});
|
|
},
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 16),
|
|
Text(
|
|
_formatDuration(
|
|
Duration(
|
|
seconds: _totalDuration.toInt(),
|
|
),
|
|
),
|
|
style: GoogleFonts.karla(
|
|
color: AppColors.onSurfaceVariant,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 12),
|
|
|
|
// Buttons
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
_buildGlassIconButton(
|
|
icon: Icons.replay_10_rounded,
|
|
onTap: () => _sendMessage({
|
|
'type': 'seek',
|
|
'value': (_currentPosition - 10)
|
|
.clamp(0, _totalDuration),
|
|
}),
|
|
transparent: true,
|
|
tooltip: 'Reculer de 10 s',
|
|
),
|
|
const SizedBox(width: 24),
|
|
_buildGlassIconButton(
|
|
icon: _isPlaying
|
|
? Icons.pause_rounded
|
|
: Icons.play_arrow_rounded,
|
|
onTap: _togglePlayPause,
|
|
size: 56,
|
|
iconSize: 32,
|
|
tooltip: _isPlaying ? 'Pause' : 'Lecture',
|
|
),
|
|
const SizedBox(width: 24),
|
|
_buildGlassIconButton(
|
|
icon: Icons.forward_10_rounded,
|
|
onTap: () => _sendMessage({
|
|
'type': 'seek',
|
|
'value': (_currentPosition + 10)
|
|
.clamp(0, _totalDuration),
|
|
}),
|
|
transparent: true,
|
|
tooltip: 'Avancer de 10 s',
|
|
),
|
|
const Spacer(),
|
|
QualitySelectorButton(
|
|
current: _quality,
|
|
onSelected: _changeQuality,
|
|
),
|
|
const SizedBox(width: 16),
|
|
_buildGlassIconButton(
|
|
icon: _isMuted
|
|
? Icons.volume_off_rounded
|
|
: Icons.volume_up_rounded,
|
|
onTap: _toggleMute,
|
|
transparent: true,
|
|
tooltip: _isMuted
|
|
? 'Activer le son'
|
|
: 'Couper le son',
|
|
),
|
|
const SizedBox(width: 16),
|
|
_buildGlassIconButton(
|
|
icon: _isFullscreen
|
|
? Icons.fullscreen_exit_rounded
|
|
: Icons.fullscreen_rounded,
|
|
onTap: _toggleFullscreen,
|
|
transparent: true,
|
|
tooltip: _isFullscreen
|
|
? 'Quitter le plein écran'
|
|
: 'Plein écran',
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildGlassIconButton({
|
|
required IconData icon,
|
|
required VoidCallback onTap,
|
|
bool transparent = false,
|
|
double size = 48,
|
|
double iconSize = 24,
|
|
String? tooltip,
|
|
}) {
|
|
// Button with direct Material/InkWell - PointerInterceptor is on outer container
|
|
final button = Material(
|
|
color: transparent ? Colors.transparent : AppColors.onSurface.withOpacity(0.1),
|
|
shape: const CircleBorder(),
|
|
child: InkWell(
|
|
onTap: onTap,
|
|
customBorder: const CircleBorder(),
|
|
child: Container(
|
|
width: size,
|
|
height: size,
|
|
alignment: Alignment.center,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
border: transparent
|
|
? null
|
|
: Border.all(color: AppColors.onSurface.withOpacity(0.1)),
|
|
),
|
|
child: Icon(icon, color: AppColors.onSurface, size: iconSize),
|
|
),
|
|
),
|
|
);
|
|
return tooltip != null ? Tooltip(message: tooltip, child: button) : button;
|
|
}
|
|
|
|
List<Widget> _buildControlButtons(bool isSmallScreen) {
|
|
final buttonSize = isSmallScreen ? 40.0 : 44.0;
|
|
final playButtonSize = isSmallScreen ? 48.0 : 52.0;
|
|
final spacing = isSmallScreen ? 8.0 : 16.0;
|
|
|
|
return [
|
|
// Previous Channel
|
|
if (widget.channels != null && widget.channels!.length > 1)
|
|
_buildSimpleIconButton(
|
|
icon: Icons.skip_previous_rounded,
|
|
onTap: _previousChannel,
|
|
size: buttonSize,
|
|
tooltip: 'Chaîne précédente',
|
|
),
|
|
|
|
if (widget.channels != null && widget.channels!.length > 1)
|
|
SizedBox(width: spacing),
|
|
|
|
// Play/Pause (Large)
|
|
_buildSimpleIconButton(
|
|
icon: _isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
|
|
onTap: _togglePlayPause,
|
|
size: playButtonSize,
|
|
iconSize: isSmallScreen ? 24 : 28,
|
|
highlighted: true,
|
|
tooltip: _isPlaying ? 'Pause' : 'Lecture',
|
|
),
|
|
|
|
if (widget.channels != null && widget.channels!.length > 1)
|
|
SizedBox(width: spacing),
|
|
|
|
// Next Channel
|
|
if (widget.channels != null && widget.channels!.length > 1)
|
|
_buildSimpleIconButton(
|
|
icon: Icons.skip_next_rounded,
|
|
onTap: _nextChannel,
|
|
size: buttonSize,
|
|
tooltip: 'Chaîne suivante',
|
|
),
|
|
|
|
SizedBox(width: spacing),
|
|
|
|
// Mute button
|
|
_buildSimpleIconButton(
|
|
icon: _isMuted ? Icons.volume_off_rounded : Icons.volume_up_rounded,
|
|
onTap: _toggleMute,
|
|
size: buttonSize,
|
|
tooltip: _isMuted ? 'Activer le son' : 'Couper le son',
|
|
),
|
|
|
|
SizedBox(width: spacing),
|
|
|
|
// Quality selector
|
|
QualitySelectorButton(
|
|
current: _quality,
|
|
onSelected: _changeQuality,
|
|
size: buttonSize,
|
|
),
|
|
|
|
SizedBox(width: spacing),
|
|
|
|
// Fullscreen
|
|
_buildSimpleIconButton(
|
|
icon: _isFullscreen
|
|
? Icons.fullscreen_exit_rounded
|
|
: Icons.fullscreen_rounded,
|
|
onTap: _toggleFullscreen,
|
|
size: buttonSize,
|
|
tooltip: _isFullscreen ? 'Quitter le plein écran' : 'Plein écran',
|
|
),
|
|
];
|
|
}
|
|
|
|
// Simple Icon Button for Live TV player (no BackdropFilter issues)
|
|
Widget _buildSimpleIconButton({
|
|
required IconData icon,
|
|
required VoidCallback onTap,
|
|
double size = 48,
|
|
double iconSize = 24,
|
|
bool highlighted = false,
|
|
String? tooltip,
|
|
}) {
|
|
final button = Material(
|
|
color: highlighted
|
|
? AppColors.primary.withOpacity(0.2)
|
|
: AppColors.onSurface.withOpacity(0.1),
|
|
shape: const CircleBorder(),
|
|
child: InkWell(
|
|
onTap: onTap,
|
|
customBorder: const CircleBorder(),
|
|
splashColor: AppColors.primary.withOpacity(0.3),
|
|
highlightColor: AppColors.primary.withOpacity(0.1),
|
|
child: Container(
|
|
width: size,
|
|
height: size,
|
|
alignment: Alignment.center,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
border: Border.all(
|
|
color: highlighted
|
|
? AppColors.primary.withOpacity(0.5)
|
|
: AppColors.onSurface.withOpacity(0.2),
|
|
width: highlighted ? 2 : 1,
|
|
),
|
|
),
|
|
child: Icon(
|
|
icon,
|
|
color: highlighted ? AppColors.primary : AppColors.onSurface,
|
|
size: iconSize,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
return tooltip != null ? Tooltip(message: tooltip, child: button) : button;
|
|
}
|
|
|
|
/// Build inline EPG info for the unified control bar
|
|
Widget _buildInlineEpg() {
|
|
final currentStreamId = widget.channels != null
|
|
? widget.channels![_currentIndex].streamId
|
|
: widget.streamId;
|
|
|
|
return Consumer(
|
|
builder: (context, ref, child) {
|
|
final epgAsync = ref.watch(
|
|
epgByPlaylistProvider(
|
|
EpgRequestKey(playlist: widget.playlist, streamId: currentStreamId),
|
|
),
|
|
);
|
|
|
|
return epgAsync.when(
|
|
data: (epgEntries) {
|
|
if (epgEntries.isEmpty) {
|
|
// No EPG data - show channel name only
|
|
return Row(
|
|
children: [
|
|
Container(
|
|
padding:
|
|
const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.live,
|
|
borderRadius: BorderRadius.circular(4),
|
|
),
|
|
child: const Text(
|
|
'LIVE',
|
|
style: TextStyle(
|
|
color: AppColors.onSurface,
|
|
fontSize: 11,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Text(
|
|
widget.channels != null
|
|
? widget.channels![_currentIndex].name
|
|
: widget.title,
|
|
style: GoogleFonts.fraunces(
|
|
color: AppColors.onSurface,
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
// Get current program
|
|
final now = DateTime.now();
|
|
final currentProgram = epgEntries.firstWhere(
|
|
(entry) {
|
|
final start = DateTime.parse(entry.start);
|
|
final end = DateTime.parse(entry.end);
|
|
return now.isAfter(start) && now.isBefore(end);
|
|
},
|
|
orElse: () => epgEntries.first,
|
|
);
|
|
|
|
return Row(
|
|
children: [
|
|
Container(
|
|
padding:
|
|
const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.live,
|
|
borderRadius: BorderRadius.circular(4),
|
|
),
|
|
child: const Text(
|
|
'LIVE',
|
|
style: TextStyle(
|
|
color: AppColors.onSurface,
|
|
fontSize: 11,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
currentProgram.title,
|
|
style: GoogleFonts.fraunces(
|
|
color: AppColors.onSurface,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
if (currentProgram.description.isNotEmpty)
|
|
Text(
|
|
currentProgram.description,
|
|
style: GoogleFonts.karla(
|
|
color: AppColors.onSurface54,
|
|
fontSize: 12,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
loading: () => Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.live,
|
|
borderRadius: BorderRadius.circular(4),
|
|
),
|
|
child: const Text(
|
|
'LIVE',
|
|
style: TextStyle(
|
|
color: AppColors.onSurface,
|
|
fontSize: 11,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Text(
|
|
widget.channels != null
|
|
? widget.channels![_currentIndex].name
|
|
: widget.title,
|
|
style: GoogleFonts.fraunces(
|
|
color: AppColors.onSurface,
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
error: (_, __) => Text(
|
|
widget.channels != null
|
|
? widget.channels![_currentIndex].name
|
|
: widget.title,
|
|
style: GoogleFonts.fraunces(
|
|
color: AppColors.onSurface,
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|