Michael/xtremflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/xtremflow.git synced 2026-10-11 17:30:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add playlist selection screen and basic web IPTV player.

Browse Source
This commit is contained in:
Michael committed 2026-01-01 18:32:39 +01:00
1 parent c165ff5d40
commit 2d418e4e0c
3 files changed
+85 -46
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/features/iptv/screens/playlist_selection_screen.dart
+66 -38
View File
@@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart'; import 'package:google_fonts/google_fonts.dart';
import '../../../core/services/playlist_api_service.dart'; import '../../../core/services/playlist_api_service.dart';
import '../../../core/models/playlist_config.dart'; import '../../../core/models/playlist_config.dart';
import '../../../core/theme/app_colors.dart';
import '../../auth/providers/auth_provider.dart'; import '../../auth/providers/auth_provider.dart';
/// Provider for fetching playlists from API /// Provider for fetching playlists from API
@@ -55,27 +56,28 @@ class PlaylistSelectionScreen extends ConsumerWidget {
), ),
body: Container( body: Container(
decoration: const BoxDecoration( decoration: const BoxDecoration(
gradient: RadialGradient( gradient: LinearGradient(
center: Alignment.center, begin: Alignment.topLeft,
radius: 1.5, end: Alignment.bottomRight,
colors: [ colors: [
Color(0xFF2C2C2E), // Dark Grey (Apple TV Surface) Color(0xFF0F1014), // Deep Space Dark
Color(0xFF000000), // Pure Black Color(0xFF181920), // Soft Eerie Black
], ],
stops: [0.0, 1.0],
), ),
), ),
child: playlistsAsync.when( child: playlistsAsync.when(
loading: () => const Center(child: CircularProgressIndicator()), loading: () => const Center(
child: CircularProgressIndicator(color: AppColors.primary),
),
error: (error, stack) => Center( error: (error, stack) => Center(
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Icon(Icons.error_outline, size: 64, color: Colors.red.shade400), Icon(Icons.error_outline, size: 64, color: AppColors.error),
const SizedBox(height: 16), const SizedBox(height: 16),
Text( Text(
'Error loading playlists', 'Error loading playlists',
style: GoogleFonts.roboto( style: GoogleFonts.outfit(
fontSize: 18, fontSize: 18,
color: Colors.white70, color: Colors.white70,
), ),
@@ -83,7 +85,11 @@ class PlaylistSelectionScreen extends ConsumerWidget {
const SizedBox(height: 8), const SizedBox(height: 8),
ElevatedButton( ElevatedButton(
onPressed: () => ref.refresh(playlistsProvider), onPressed: () => ref.refresh(playlistsProvider),
child: const Text('Retry'), style: ElevatedButton.styleFrom(
backgroundColor: AppColors.primary,
foregroundColor: Colors.white,
),
child: Text('Retry', style: GoogleFonts.inter()),
), ),
], ],
), ),
@@ -102,7 +108,7 @@ class PlaylistSelectionScreen extends ConsumerWidget {
const SizedBox(height: 16), const SizedBox(height: 16),
Text( Text(
'No playlists available', 'No playlists available',
style: GoogleFonts.roboto( style: GoogleFonts.outfit(
fontSize: 18, fontSize: 18,
color: Colors.white60, color: Colors.white60,
), ),
@@ -112,7 +118,7 @@ class PlaylistSelectionScreen extends ConsumerWidget {
currentUser?.isAdmin ?? false currentUser?.isAdmin ?? false
? 'Add playlists in Admin Panel' ? 'Add playlists in Admin Panel'
: 'Contact administrator', : 'Contact administrator',
style: GoogleFonts.roboto( style: GoogleFonts.inter(
fontSize: 14, fontSize: 14,
color: Colors.white38, color: Colors.white38,
), ),
@@ -124,16 +130,17 @@ class PlaylistSelectionScreen extends ConsumerWidget {
return GridView.builder( return GridView.builder(
padding: const EdgeInsets.fromLTRB( padding: const EdgeInsets.fromLTRB(
24, 48,
100, 100,
24, 48,
24, 48,
), // Top padding for transparent AppBar ), // More padding for cinematic feel
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, crossAxisCount:
crossAxisSpacing: 24, MediaQuery.of(context).size.width > 1200 ? 4 : 3,
mainAxisSpacing: 24, crossAxisSpacing: 32,
childAspectRatio: 1.5, mainAxisSpacing: 32,
childAspectRatio: 1.4,
), ),
itemCount: playlists.length, itemCount: playlists.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
@@ -181,20 +188,21 @@ class _PlaylistCardState extends State<_PlaylistCard> {
duration: const Duration(milliseconds: 200), duration: const Duration(milliseconds: 200),
decoration: BoxDecoration( decoration: BoxDecoration(
color: _isHovered color: _isHovered
? Colors.white.withOpacity(0.15) ? Colors.white.withOpacity(0.1)
: Colors.white.withOpacity(0.05), // Glass effect : Colors.white.withOpacity(0.03), // Subtle glass
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(24),
border: Border.all( border: Border.all(
color: _isHovered color: _isHovered
? Colors.white.withOpacity(0.5) ? AppColors.primary.withOpacity(0.5)
: Colors.white.withOpacity(0.1), : Colors.white.withOpacity(0.08),
width: 1.5, width: 1.5,
), ),
boxShadow: _isHovered boxShadow: _isHovered
? [ ? [
BoxShadow( BoxShadow(
color: Colors.black.withOpacity(0.3), color: AppColors.primary.withOpacity(0.2),
blurRadius: 20, blurRadius: 30,
spreadRadius: -5,
offset: const Offset(0, 10), offset: const Offset(0, 10),
), ),
] ]
@@ -205,37 +213,57 @@ class _PlaylistCardState extends State<_PlaylistCard> {
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Container( AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: 56, width: 56,
height: 56, height: 56,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.2), // Accent color tint gradient: _isHovered
? AppColors.primaryGradient
: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.white.withOpacity(0.1),
Colors.white.withOpacity(0.05),
],
),
shape: BoxShape.circle, shape: BoxShape.circle,
boxShadow: _isHovered
? [
BoxShadow(
color: AppColors.primary.withOpacity(0.4),
blurRadius: 16,
offset: const Offset(0, 4),
)
]
: [],
), ),
child: const Icon( child: Icon(
Icons.playlist_play, Icons.playlist_play_rounded,
size: 32, size: 32,
color: Colors.white, // White icon color: _isHovered ? Colors.white : Colors.white70,
), ),
), ),
const SizedBox(height: 16), const SizedBox(height: 20),
Text( Text(
widget.playlist.name, widget.playlist.name,
style: GoogleFonts.outfit( style: GoogleFonts.outfit(
// Using Outfit for modern look fontSize: 22,
fontSize: 20,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.white, color: Colors.white,
height: 1.2,
), ),
maxLines: 2, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
const SizedBox(height: 6), const SizedBox(height: 8),
Text( Text(
Uri.tryParse(widget.playlist.dns)?.host ?? widget.playlist.dns, Uri.tryParse(widget.playlist.dns)?.host ?? widget.playlist.dns,
style: GoogleFonts.inter( style: GoogleFonts.inter(
fontSize: 13, fontSize: 13,
color: Colors.white54, color: Colors.white38,
letterSpacing: 0.5,
), ),
maxLines: 1, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
web/index.html
+6 -5
View File
@@ -27,7 +27,7 @@
} }
body { body {
background: linear-gradient(135deg, #0A0E1A 0%, #121829 100%); background: linear-gradient(135deg, #0F1014 0%, #181920 100%);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -55,7 +55,7 @@
.logo { .logo {
font-size: 48px; font-size: 48px;
font-weight: 700; font-weight: 700;
background: linear-gradient(135deg, #00BCD4 0%, #26C6DA 50%, #00ACC1 100%); background: linear-gradient(135deg, #007AFF 0%, #00C6FF 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
@@ -67,16 +67,17 @@
width: 40px; width: 40px;
height: 40px; height: 40px;
margin: 0 auto 16px; margin: 0 auto 16px;
border: 3px solid rgba(0, 188, 212, 0.2); border: 3px solid rgba(0, 122, 255, 0.2);
border-top-color: #00BCD4; border-top-color: #007AFF;
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
.loading-text { .loading-text {
color: #94A3B8; color: rgba(255, 255, 255, 0.7);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
font-family: 'Outfit', sans-serif;
} }
@keyframes spin { @keyframes spin {
web/player_lite.html
+13 -3
View File
@@ -157,12 +157,22 @@
// Report on pause and end // Report on pause and end
video.addEventListener('pause', () => { video.addEventListener('pause', () => {
window.parent.postMessage({ window.parent.postMessage({
type: 'playback_position', type: 'playback_status',
currentTime: video.currentTime, status: 'paused'
duration: isFinite(video.duration) ? video.duration : 0
}, '*'); }, '*');
}); });
video.addEventListener('playing', () => {
window.parent.postMessage({
type: 'playback_status',
status: 'playing'
}, '*');
// Also reset reconnect attempts on successful playing
reconnectAttempts = 0;
hideLoading();
});
video.addEventListener('ended', () => { video.addEventListener('ended', () => {
window.parent.postMessage({ window.parent.postMessage({
type: 'playback_ended', type: 'playback_ended',