mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-11 17:30:00 +02:00
feat(mobile): dedicated mobile player and responsive UI improvements
This commit is contained in:
Michael committed
1 parent
29a0d04b21
commit
19a0755e01
2 files changed
+373
-62
No files matched your search
@@ -141,13 +141,14 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
// 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 isMobile = MediaQuery.of(context).size.width < 600;
|
||||
final isLiveTV = widget.streamType == StreamType.live;
|
||||
// Cache buster to force reload of updated player.html
|
||||
final cacheBuster = DateTime.now().millisecondsSinceEpoch;
|
||||
|
||||
var playerSrc = isLiveTV
|
||||
? 'player_lite.html?url=$encodedUrl&type=live&v=$cacheBuster'
|
||||
: 'player.html?url=$encodedUrl&type=vod&v=$cacheBuster';
|
||||
final streamTypeParam = widget.streamType == StreamType.live ? 'live' : 'vod';
|
||||
final playerFile = isMobile ? 'player_mobile.html' : (isLiveTV ? 'player_lite.html' : 'player.html');
|
||||
var playerSrc = '$playerFile?url=$encodedUrl&type=$streamTypeParam&v=$cacheBuster';
|
||||
|
||||
if (startTimeOverride != null) {
|
||||
playerSrc += '&t=$startTimeOverride';
|
||||
@@ -241,7 +242,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
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.html') == true ||
|
||||
frame.src?.contains('player_mobile.html') == true)) {
|
||||
iframe = frame;
|
||||
break;
|
||||
}
|
||||
@@ -467,82 +469,63 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
bottom: _showControls ? 24 : -150, // More offset for stacked layout
|
||||
left: 16,
|
||||
right: 16,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 20,
|
||||
vertical: 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: const Color(0xFF1A1A2E).withOpacity(0.9),
|
||||
color: const Color(0xFF1A1A2E).withOpacity(0.95),
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.3),
|
||||
blurRadius: 10,
|
||||
spreadRadius: 2,
|
||||
),
|
||||
],
|
||||
border: Border.all(
|
||||
color: Colors.white.withOpacity(0.1),
|
||||
color: Colors.white.withOpacity(0.15),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
child: isSmallScreen
|
||||
? Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// EPG Info (top in mobile)
|
||||
_buildInlineEpg(),
|
||||
const SizedBox(height: 12),
|
||||
const Divider(color: Colors.white10),
|
||||
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: [
|
||||
// Previous Channel
|
||||
if (widget.channels != null &&
|
||||
widget.channels!.length > 1)
|
||||
_buildSimpleIconButton(
|
||||
icon: Icons.skip_previous_rounded,
|
||||
onTap: _previousChannel,
|
||||
size: 44,
|
||||
),
|
||||
|
||||
if (widget.channels != null &&
|
||||
widget.channels!.length > 1)
|
||||
const SizedBox(width: 16),
|
||||
|
||||
// Play/Pause (Large)
|
||||
_buildSimpleIconButton(
|
||||
icon: _isPlaying
|
||||
? Icons.pause_rounded
|
||||
: Icons.play_arrow_rounded,
|
||||
onTap: _togglePlayPause,
|
||||
size: 52,
|
||||
iconSize: 28,
|
||||
highlighted: true,
|
||||
),
|
||||
|
||||
if (widget.channels != null &&
|
||||
widget.channels!.length > 1)
|
||||
const SizedBox(width: 16),
|
||||
|
||||
// Next Channel
|
||||
if (widget.channels != null &&
|
||||
widget.channels!.length > 1)
|
||||
_buildSimpleIconButton(
|
||||
icon: Icons.skip_next_rounded,
|
||||
onTap: _nextChannel,
|
||||
size: 44,
|
||||
),
|
||||
|
||||
const SizedBox(width: 16),
|
||||
|
||||
// Mute button
|
||||
_buildSimpleIconButton(
|
||||
icon: _isMuted
|
||||
? Icons.volume_off_rounded
|
||||
: Icons.volume_up_rounded,
|
||||
onTap: _toggleMute,
|
||||
size: 44,
|
||||
),
|
||||
],
|
||||
children: _buildControlButtons(
|
||||
isSmallScreen),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -1073,4 +1056,75 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
List<Widget> _buildControlButtons(bool isSmallScreen) {
|
||||
final buttonSize = isSmallScreen ? 40.0 : 44.0;
|
||||
final playButtonSize = isSmallScreen ? 48.0 : 52.0;
|
||||
|
||||
return [
|
||||
if (widget.channels != null && widget.channels!.length > 1) ...[
|
||||
_buildSimpleIconButton(
|
||||
icon: Icons.skip_previous_rounded,
|
||||
onTap: _previousChannel,
|
||||
size: buttonSize,
|
||||
),
|
||||
SizedBox(width: isSmallScreen ? 8 : 16),
|
||||
],
|
||||
_buildSimpleIconButton(
|
||||
icon: _isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
|
||||
onTap: _togglePlayPause,
|
||||
size: playButtonSize,
|
||||
iconSize: isSmallScreen ? 24 : 28,
|
||||
highlighted: true,
|
||||
),
|
||||
if (widget.channels != null && widget.channels!.length > 1) ...[
|
||||
SizedBox(width: isSmallScreen ? 8 : 16),
|
||||
_buildSimpleIconButton(
|
||||
icon: Icons.skip_next_rounded,
|
||||
onTap: _nextChannel,
|
||||
size: buttonSize,
|
||||
),
|
||||
],
|
||||
SizedBox(width: isSmallScreen ? 8 : 16),
|
||||
_buildSimpleIconButton(
|
||||
icon: _isMuted ? Icons.volume_off_rounded : Icons.volume_up_rounded,
|
||||
onTap: _toggleMute,
|
||||
size: buttonSize,
|
||||
),
|
||||
if (isSmallScreen) ...[
|
||||
SizedBox(width: isSmallScreen ? 8 : 16),
|
||||
_buildSimpleIconButton(
|
||||
icon: Icons.fullscreen_rounded,
|
||||
onTap: _toggleFullscreen,
|
||||
size: buttonSize,
|
||||
),
|
||||
],
|
||||
];
|
||||
}
|
||||
|
||||
Widget _buildSimpleIconButton({
|
||||
required IconData icon,
|
||||
required VoidCallback onTap,
|
||||
double size = 40,
|
||||
double iconSize = 24,
|
||||
bool highlighted = false,
|
||||
}) {
|
||||
return Material(
|
||||
color: highlighted ? AppColors.primary : Colors.white.withOpacity(0.1),
|
||||
shape: const CircleBorder(),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: SizedBox(
|
||||
width: size,
|
||||
height: size,
|
||||
child: Icon(
|
||||
icon,
|
||||
color: highlighted ? Colors.black : Colors.white,
|
||||
size: iconSize,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,257 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
/* Mobile-only overlay buttons */
|
||||
#mobile-on-screen-controls {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.fs-button {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
pointer-events: auto;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.fs-button svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
#loading {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: white;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#error {
|
||||
display: none;
|
||||
position: absolute;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 12px;
|
||||
z-index: 30;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="player-container">
|
||||
<video id="video" autoplay playsinline webkit-playsinline></video>
|
||||
|
||||
<div id="mobile-on-screen-controls">
|
||||
<div class="fs-button" id="fs-toggle">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="loading">
|
||||
<div class="spinner"></div>
|
||||
<div id="l-text">Chargement...</div>
|
||||
</div>
|
||||
|
||||
<div id="error">
|
||||
<div style="font-size: 40px; margin-bottom: 10px;">⚠️</div>
|
||||
<div id="err-msg">Erreur de lecture</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const video = document.getElementById('video');
|
||||
const loading = document.getElementById('loading');
|
||||
const error = document.getElementById('error');
|
||||
const fsToggle = document.getElementById('fs-toggle');
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const streamUrl = params.get('url');
|
||||
const streamType = params.get('type') || 'live';
|
||||
|
||||
function log(m) { console.log('[MobilePlayer] ' + m); }
|
||||
|
||||
function toggleFullscreen() {
|
||||
if (!document.fullscreenElement && !document.webkitFullscreenElement) {
|
||||
const el = document.documentElement;
|
||||
if (el.requestFullscreen) el.requestFullscreen();
|
||||
else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
|
||||
else if (video.webkitEnterFullscreen) video.webkitEnterFullscreen();
|
||||
} else {
|
||||
if (document.exitFullscreen) document.exitFullscreen();
|
||||
else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
fsToggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFullscreen();
|
||||
});
|
||||
|
||||
// Double tap for fullscreen
|
||||
let lastTap = 0;
|
||||
video.addEventListener('touchend', (e) => {
|
||||
const now = Date.now();
|
||||
if (now - lastTap < 300) {
|
||||
toggleFullscreen();
|
||||
}
|
||||
lastTap = now;
|
||||
// Report activity to parent
|
||||
window.parent.postMessage({ type: 'user_activity' }, '*');
|
||||
});
|
||||
|
||||
async function init() {
|
||||
if (!streamUrl) return;
|
||||
log('Initing mobile player for: ' + streamUrl);
|
||||
|
||||
const isHLS = streamUrl.toLowerCase().includes('m3u8') || streamUrl.toLowerCase().includes('playlist.m3u8');
|
||||
|
||||
// Prefer Native HLS for mobile stability (iOS especially)
|
||||
if (isHLS && video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
log('Using native HLS');
|
||||
video.src = streamUrl;
|
||||
return;
|
||||
}
|
||||
|
||||
// Use HLS.js for Android/Chrome with high-stability settings
|
||||
if (isHLS && Hls.isSupported()) {
|
||||
log('Using Hls.js optimized for mobile');
|
||||
const hls = new Hls({
|
||||
maxBufferLength: 90, // Large buffer to handle mobile jitter
|
||||
maxMaxBufferLength: 180,
|
||||
liveSyncDurationCount: 6,
|
||||
liveMaxLatencyDurationCount: 12,
|
||||
enableWorker: true,
|
||||
lowLatencyMode: false // Prefer stability over latency
|
||||
});
|
||||
hls.loadSource(streamUrl);
|
||||
hls.attachMedia(video);
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
|
||||
hls.on(Hls.Events.ERROR, (e, d) => {
|
||||
if (d.fatal) {
|
||||
if (d.type === Hls.ErrorTypes.NETWORK_ERROR) hls.startLoad();
|
||||
else if (d.type === Hls.ErrorTypes.MEDIA_ERROR) hls.recoverMediaError();
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Fallback to MpegTS
|
||||
if (mpegts.isSupported()) {
|
||||
log('Using MpegTS optimized for mobile');
|
||||
const player = mpegts.createPlayer({
|
||||
type: 'mpegts',
|
||||
isLive: streamType === 'live',
|
||||
url: streamUrl
|
||||
}, {
|
||||
enableWorker: true,
|
||||
stashInitialSize: 2 * 1024 * 1024, // 2MB initial buffer
|
||||
enableStashBuffer: true
|
||||
});
|
||||
player.attachMediaElement(video);
|
||||
player.load();
|
||||
player.play();
|
||||
return;
|
||||
}
|
||||
|
||||
// Absolute fallback
|
||||
video.src = streamUrl;
|
||||
}
|
||||
|
||||
video.addEventListener('playing', () => { loading.style.display = 'none'; });
|
||||
video.addEventListener('waiting', () => { loading.style.display = 'flex'; });
|
||||
video.addEventListener('error', () => {
|
||||
loading.style.display = 'none';
|
||||
error.style.display = 'block';
|
||||
});
|
||||
|
||||
// Communication with Flutter
|
||||
window.addEventListener('message', (e) => {
|
||||
const d = e.data;
|
||||
if (d.type === 'play') video.play();
|
||||
if (d.type === 'pause') video.pause();
|
||||
if (d.type === 'request_fullscreen') toggleFullscreen();
|
||||
});
|
||||
|
||||
init();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user