mirror of
https://github.com/R0m1k3/xtremobile.git
synced 2026-10-11 17:29:26 +02:00
Merge pull request #27 from R0m1k3/antigravity
feat: implement IPTV player screen with mpegts.js for web streams
This commit is contained in:
LogiFlow authored and 
GitHub committed
commit
49018986d6
2 files changed
+225
-94
No files matched your search
@@ -1,16 +1,15 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:video_player/video_player.dart';
|
||||
import 'package:chewie/chewie.dart';
|
||||
import 'dart:html' as html;
|
||||
import 'dart:ui_web' as ui_web;
|
||||
import '../providers/xtream_provider.dart';
|
||||
import '../widgets/epg_overlay.dart';
|
||||
import '../../../core/models/iptv_models.dart';
|
||||
import '../../../core/models/playlist_config.dart';
|
||||
|
||||
/// Stream type enum for player
|
||||
enum StreamType { live, vod, series }
|
||||
|
||||
/// Video player screen with EPG overlay for live streams
|
||||
/// Video player screen using HTML5 player with mpegts.js for TS streams
|
||||
class PlayerScreen extends ConsumerStatefulWidget {
|
||||
final String streamId;
|
||||
final String title;
|
||||
@@ -24,7 +23,7 @@ class PlayerScreen extends ConsumerStatefulWidget {
|
||||
required this.title,
|
||||
required this.playlist,
|
||||
this.streamType = StreamType.live,
|
||||
this.containerExtension = 'm3u8',
|
||||
this.containerExtension = 'mp4',
|
||||
});
|
||||
|
||||
@override
|
||||
@@ -32,18 +31,19 @@ class PlayerScreen extends ConsumerStatefulWidget {
|
||||
}
|
||||
|
||||
class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
late VideoPlayerController _videoPlayerController;
|
||||
ChewieController? _chewieController;
|
||||
bool _isLoading = true;
|
||||
String? _streamUrl;
|
||||
String? _errorMessage;
|
||||
late String _viewId;
|
||||
bool _isInitialized = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_viewId = 'iptv-player-${widget.streamId}-${DateTime.now().millisecondsSinceEpoch}';
|
||||
_initializePlayer();
|
||||
}
|
||||
|
||||
Future<void> _initializePlayer() async {
|
||||
void _initializePlayer() {
|
||||
try {
|
||||
// Validate playlist before proceeding
|
||||
if (widget.playlist.dns.isEmpty ||
|
||||
@@ -77,116 +77,87 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
break;
|
||||
}
|
||||
|
||||
// Debug: Print stream URL to console
|
||||
debugPrint('PlayerScreen: Initializing stream URL: $streamUrl');
|
||||
|
||||
_videoPlayerController = VideoPlayerController.networkUrl(
|
||||
Uri.parse(streamUrl),
|
||||
);
|
||||
|
||||
await _videoPlayerController.initialize();
|
||||
|
||||
_chewieController = ChewieController(
|
||||
videoPlayerController: _videoPlayerController,
|
||||
autoPlay: true,
|
||||
looping: false,
|
||||
aspectRatio: 16 / 9,
|
||||
allowFullScreen: true,
|
||||
allowMuting: true,
|
||||
showControls: true,
|
||||
placeholder: Container(
|
||||
color: Colors.black,
|
||||
child: const Center(
|
||||
child: CircularProgressIndicator(),
|
||||
),
|
||||
),
|
||||
errorBuilder: (context, errorMessage) {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.error_outline,
|
||||
size: 48,
|
||||
color: Colors.red,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Error: $errorMessage',
|
||||
style: const TextStyle(color: Colors.white),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
// Register the HTML view with an iframe pointing to our player.html
|
||||
final encodedUrl = Uri.encodeComponent(streamUrl);
|
||||
final playerUrl = 'player.html?url=$encodedUrl';
|
||||
|
||||
// Register platform view factory
|
||||
// ignore: undefined_prefixed_name
|
||||
ui_web.platformViewRegistry.registerViewFactory(
|
||||
_viewId,
|
||||
(int viewId) {
|
||||
final iframe = html.IFrameElement()
|
||||
..src = playerUrl
|
||||
..style.border = 'none'
|
||||
..style.width = '100%'
|
||||
..style.height = '100%'
|
||||
..allow = 'autoplay; fullscreen'
|
||||
..allowFullscreen = true;
|
||||
return iframe;
|
||||
},
|
||||
);
|
||||
|
||||
setState(() {
|
||||
_isLoading = false;
|
||||
_streamUrl = streamUrl;
|
||||
_isInitialized = true;
|
||||
});
|
||||
} catch (e) {
|
||||
setState(() {
|
||||
_isLoading = false;
|
||||
_errorMessage = e.toString();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_videoPlayerController.dispose();
|
||||
_chewieController?.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(widget.title),
|
||||
backgroundColor: Colors.black,
|
||||
foregroundColor: Colors.white,
|
||||
),
|
||||
backgroundColor: Colors.black,
|
||||
body: _isLoading
|
||||
? const Center(
|
||||
child: CircularProgressIndicator(),
|
||||
)
|
||||
: _errorMessage != null
|
||||
? Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.error_outline,
|
||||
size: 64,
|
||||
color: Colors.red,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Failed to load stream',
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
_errorMessage!,
|
||||
style: const TextStyle(color: Colors.white70),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
body: _errorMessage != null
|
||||
? Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.error_outline,
|
||||
size: 64,
|
||||
color: Colors.red,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const Text(
|
||||
'Failed to load stream',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 32),
|
||||
child: Text(
|
||||
_errorMessage!,
|
||||
style: const TextStyle(color: Colors.white70),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
: !_isInitialized
|
||||
? const Center(
|
||||
child: CircularProgressIndicator(),
|
||||
)
|
||||
: Stack(
|
||||
children: [
|
||||
Center(
|
||||
child: _chewieController != null
|
||||
? Chewie(controller: _chewieController!)
|
||||
: const SizedBox.shrink(),
|
||||
),
|
||||
// HTML5 video player via iframe
|
||||
HtmlElementView(viewType: _viewId),
|
||||
// EPG overlay for live streams
|
||||
if (widget.streamType == StreamType.live)
|
||||
Positioned(
|
||||
|
||||
+160
@@ -0,0 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>IPTV Player</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #000;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
#player-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#error {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#error-icon {
|
||||
font-size: 64px;
|
||||
color: #f44336;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#loading {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 4px solid #fff;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="player-container">
|
||||
<video id="video" controls autoplay></video>
|
||||
<div id="loading">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
<div id="error">
|
||||
<div id="error-icon">⚠</div>
|
||||
<div id="error-message">Failed to load stream</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/mpegts.js@latest/dist/mpegts.min.js"></script>
|
||||
<script>
|
||||
const video = document.getElementById('video');
|
||||
const loading = document.getElementById('loading');
|
||||
const error = document.getElementById('error');
|
||||
const errorMessage = document.getElementById('error-message');
|
||||
|
||||
// Get stream URL from query parameter
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const streamUrl = urlParams.get('url');
|
||||
|
||||
function showLoading() {
|
||||
loading.style.display = 'block';
|
||||
error.style.display = 'none';
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
loading.style.display = 'none';
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
hideLoading();
|
||||
error.style.display = 'block';
|
||||
errorMessage.textContent = message || 'Failed to load stream';
|
||||
}
|
||||
|
||||
if (!streamUrl) {
|
||||
showError('No stream URL provided');
|
||||
} else if (mpegts.isSupported()) {
|
||||
showLoading();
|
||||
|
||||
const player = mpegts.createPlayer({
|
||||
type: 'mse', // could be 'flv' or 'mpegts'
|
||||
isLive: true,
|
||||
url: streamUrl,
|
||||
}, {
|
||||
enableWorker: true,
|
||||
enableStashBuffer: false,
|
||||
stashInitialSize: 128,
|
||||
liveBufferLatencyChasing: true,
|
||||
liveBufferLatencyMaxLatency: 1.5,
|
||||
liveBufferLatencyMinRemain: 0.5,
|
||||
});
|
||||
|
||||
player.attachMediaElement(video);
|
||||
player.load();
|
||||
|
||||
video.addEventListener('canplay', () => {
|
||||
hideLoading();
|
||||
video.play().catch(e => console.log('Autoplay prevented:', e));
|
||||
});
|
||||
|
||||
video.addEventListener('error', (e) => {
|
||||
showError('Video error: ' + (video.error?.message || 'Unknown error'));
|
||||
});
|
||||
|
||||
player.on(mpegts.Events.ERROR, (errType, errDetail, errInfo) => {
|
||||
console.error('mpegts error:', errType, errDetail, errInfo);
|
||||
showError(`Stream error: ${errDetail}`);
|
||||
});
|
||||
|
||||
player.on(mpegts.Events.LOADING_COMPLETE, () => {
|
||||
console.log('Loading complete');
|
||||
});
|
||||
} else {
|
||||
showError('MPEG-TS playback is not supported in this browser');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user