Merge pull request #27 from R0m1k3/antigravity

feat: implement IPTV player screen with mpegts.js for web streams

lib/features/iptv/screens/player_screen.dart

@@ -1,16 +1,15 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:video_player/video_player.dart';
+import 'dart:html' as html;
-import 'package:chewie/chewie.dart';
+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;
+  String? _streamUrl;
-  ChewieController? _chewieController;
-  bool _isLoading = true;
   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(
+      // Register the HTML view with an iframe pointing to our player.html
-        Uri.parse(streamUrl),
+      final encodedUrl = Uri.encodeComponent(streamUrl);
-      );
+      final playerUrl = 'player.html?url=$encodedUrl';
       
-      await _videoPlayerController.initialize();
+      // Register platform view factory
-
+      // ignore: undefined_prefixed_name
-      _chewieController = ChewieController(
+      ui_web.platformViewRegistry.registerViewFactory(
-        videoPlayerController: _videoPlayerController,
+        _viewId,
-        autoPlay: true,
+        (int viewId) {
-        looping: false,
+          final iframe = html.IFrameElement()
-        aspectRatio: 16 / 9,
+            ..src = playerUrl
-        allowFullScreen: true,
+            ..style.border = 'none'
-        allowMuting: true,
+            ..style.width = '100%'
-        showControls: true,
+            ..style.height = '100%'
-        placeholder: Container(
+            ..allow = 'autoplay; fullscreen'
-          color: Colors.black,
+            ..allowFullscreen = true;
-          child: const Center(
+          return iframe;
-            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,
-                ),
-              ],
-            ),
-          );
         },
       );
 
       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
+      body: _errorMessage != null
-          ? const Center(
+          ? Center(
-              child: CircularProgressIndicator(),
+              child: Column(
-            )
+                mainAxisAlignment: MainAxisAlignment.center,
-          : _errorMessage != null
+                children: [
-              ? Center(
+                  const Icon(
-                  child: Column(
+                    Icons.error_outline,
-                    mainAxisAlignment: MainAxisAlignment.center,
+                    size: 64,
-                    children: [
+                    color: Colors.red,
-                      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,
-                      ),
-                    ],
                   ),
+                  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(
+                    // HTML5 video player via iframe
-                      child: _chewieController != null
+                    HtmlElementView(viewType: _viewId),
-                          ? Chewie(controller: _chewieController!)
-                          : const SizedBox.shrink(),
-                    ),
                     // EPG overlay for live streams
                     if (widget.streamType == StreamType.live)
                       Positioned(

web/player.html

@@ -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>