mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-23 15:08:07 +02:00
Merge remote-tracking branch 'origin/main' into main
Resolved conflicts by keeping remote functional features (RecordingScheduler, FFmpeg HLS transcoding, mobile player, channel cards) and restoring local Stitch theme foundation (app_colors, app_theme, glass_container, mobile_theme). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 4.7 committed
commit
2ba16caf55
68 files changed
+18812
-1794
No files matched your search
@@ -1,4 +1,3 @@
|
||||
import 'dart:ui';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import '../../../core/models/playlist_config.dart';
|
||||
@@ -25,7 +24,13 @@ class DashboardScreen extends ConsumerStatefulWidget {
|
||||
|
||||
class _DashboardScreenState extends ConsumerState<DashboardScreen> {
|
||||
int _selectedIndex = 0;
|
||||
final List<String> _tabs = ['Live TV', 'Movies', 'Series', 'Recordings', 'Settings'];
|
||||
final List<String> _tabs = [
|
||||
'Live TV',
|
||||
'Movies',
|
||||
'Series',
|
||||
'Recordings',
|
||||
'Settings',
|
||||
];
|
||||
final List<IconData> _icons = [
|
||||
Icons.live_tv_rounded,
|
||||
Icons.movie_rounded,
|
||||
@@ -41,34 +46,56 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
|
||||
body: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
// 1. Cinematic Deep Space Background
|
||||
// 1. Cinematic Deep Space Background - Premium Apple TV Style
|
||||
Positioned.fill(
|
||||
child: Container(
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
Color(0xFF0F1014),
|
||||
Color(0xFF121317),
|
||||
Color(0xFF050505), // Very dark top
|
||||
AppColors.background, // Black bottom
|
||||
Color(0xFF0A0A0A), // Slightly darker for depth
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Ambient Glow — primary accent diffuse
|
||||
// Ambient Glow Top-Left - Teal (Primary) - VISIBLE
|
||||
Positioned(
|
||||
top: -100,
|
||||
left: -100,
|
||||
top: -300,
|
||||
left: -300,
|
||||
child: Container(
|
||||
width: 500,
|
||||
height: 500,
|
||||
width: 800,
|
||||
height: 800,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: RadialGradient(
|
||||
colors: [
|
||||
AppColors.primary.withOpacity(0.06),
|
||||
AppColors.primary.withOpacity(0.4),
|
||||
AppColors.primary.withOpacity(0.1),
|
||||
Colors.transparent,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Ambient Glow Bottom-Right - Blue - VISIBLE
|
||||
Positioned(
|
||||
bottom: -250,
|
||||
right: -250,
|
||||
child: Container(
|
||||
width: 700,
|
||||
height: 700,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: RadialGradient(
|
||||
colors: [
|
||||
AppColors.info.withOpacity(0.35),
|
||||
AppColors.info.withOpacity(0.1),
|
||||
Colors.transparent,
|
||||
],
|
||||
),
|
||||
@@ -91,15 +118,19 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
|
||||
),
|
||||
),
|
||||
|
||||
// 3. Vertical Glass Sidebar (Stitch Level 2)
|
||||
// 3. Vertical Glass Sidebar
|
||||
Positioned(
|
||||
left: 24,
|
||||
top: 24,
|
||||
bottom: 24,
|
||||
width: 80,
|
||||
child: GlassContainer.floating(
|
||||
child: GlassContainer(
|
||||
borderRadius: 24,
|
||||
padding: EdgeInsets.zero,
|
||||
opacity: 0.1,
|
||||
// blur is hardcoded in GlassContainer (15), so we don't pass it
|
||||
// border is bool, borderColor allows customization
|
||||
hasBorder: true,
|
||||
borderColor: AppColors.border,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
@@ -114,7 +145,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColors.glowPrimary(0.4),
|
||||
color: AppColors.primary.withOpacity(0.4),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
@@ -122,7 +153,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.play_arrow_rounded,
|
||||
color: AppColors.onSurface,
|
||||
color: AppColors.textPrimary,
|
||||
size: 28,
|
||||
),
|
||||
),
|
||||
@@ -139,37 +170,27 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
|
||||
onTap: () => setState(() => _selectedIndex = index),
|
||||
scaleFactor: 1.2,
|
||||
borderRadius: 16,
|
||||
focusColor: AppColors.primary,
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
width: 48,
|
||||
height: 48,
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected
|
||||
? AppColors.primary.withOpacity(0.15)
|
||||
? AppColors.primary.withOpacity(0.2)
|
||||
: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: isSelected
|
||||
? Border.all(
|
||||
color: AppColors.primaryContainer
|
||||
.withOpacity(0.5),
|
||||
width: 2,
|
||||
color: AppColors.primary.withOpacity(0.5),
|
||||
)
|
||||
: null,
|
||||
boxShadow: isSelected
|
||||
? [
|
||||
BoxShadow(
|
||||
color: AppColors.glowPrimary(0.2),
|
||||
blurRadius: 12,
|
||||
spreadRadius: 1,
|
||||
),
|
||||
]
|
||||
: null,
|
||||
),
|
||||
child: Icon(
|
||||
_icons[index],
|
||||
color: isSelected
|
||||
? AppColors.onSurface
|
||||
: AppColors.onSurfaceVariant,
|
||||
? AppColors.textPrimary
|
||||
: AppColors.textSecondary,
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
@@ -179,7 +200,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
|
||||
|
||||
const Spacer(),
|
||||
|
||||
// Profile
|
||||
// Settings / Profile
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 24),
|
||||
child: TvFocusableCard(
|
||||
@@ -188,11 +209,10 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
|
||||
scaleFactor: 1.1,
|
||||
child: CircleAvatar(
|
||||
radius: 20,
|
||||
backgroundColor: AppColors.surfaceContainerHigh
|
||||
.withOpacity(0.5),
|
||||
child: Icon(
|
||||
backgroundColor: AppColors.primary.withOpacity(0.1),
|
||||
child: const Icon(
|
||||
Icons.person,
|
||||
color: AppColors.onSurfaceVariant,
|
||||
color: AppColors.textSecondary,
|
||||
size: 20,
|
||||
),
|
||||
),
|
||||
|
||||
@@ -0,0 +1,496 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import '../../../core/models/playlist_config.dart';
|
||||
import '../models/playlist.dart';
|
||||
import '../services/xtream_service.dart';
|
||||
|
||||
/// EPG Program information
|
||||
class EpgProgram {
|
||||
final String id;
|
||||
final String channelId;
|
||||
final String title;
|
||||
final String description;
|
||||
final DateTime startTime;
|
||||
final DateTime endTime;
|
||||
final String? imageUrl;
|
||||
final bool isNow;
|
||||
final bool isNext;
|
||||
|
||||
EpgProgram({
|
||||
required this.id,
|
||||
required this.channelId,
|
||||
required this.title,
|
||||
required this.description,
|
||||
required this.startTime,
|
||||
required this.endTime,
|
||||
this.imageUrl,
|
||||
this.isNow = false,
|
||||
this.isNext = false,
|
||||
});
|
||||
|
||||
Duration get duration => endTime.difference(startTime);
|
||||
|
||||
double get progress {
|
||||
if (!isNow) return 0;
|
||||
final now = DateTime.now();
|
||||
if (now.isBefore(startTime)) return 0;
|
||||
if (now.isAfter(endTime)) return 100;
|
||||
return ((now.difference(startTime).inSeconds) / duration.inSeconds) * 100;
|
||||
}
|
||||
}
|
||||
|
||||
/// EPG Grid View Screen (7 days, 24 hours)
|
||||
class EpgGridScreen extends ConsumerStatefulWidget {
|
||||
final Playlist playlist;
|
||||
|
||||
const EpgGridScreen({
|
||||
super.key,
|
||||
required this.playlist,
|
||||
});
|
||||
|
||||
@override
|
||||
ConsumerState<EpgGridScreen> createState() => _EpgGridScreenState();
|
||||
}
|
||||
|
||||
class _EpgGridScreenState extends ConsumerState<EpgGridScreen>
|
||||
with TickerProviderStateMixin {
|
||||
late TabController _tabController;
|
||||
final _horizontalScroll = ScrollController();
|
||||
final _verticalScroll = ScrollController();
|
||||
Map<String, List<EpgProgram>> _epgData = {};
|
||||
DateTime _selectedDate = DateTime.now();
|
||||
bool _isLoading = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_tabController = TabController(length: 7, vsync: this);
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
_loadEpgData();
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_tabController.dispose();
|
||||
_horizontalScroll.dispose();
|
||||
_verticalScroll.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Future<void> _loadEpgData() async {
|
||||
if (_isLoading) return;
|
||||
setState(() => _isLoading = true);
|
||||
|
||||
try {
|
||||
final service = ref.read(xtreamServiceProvider(widget.playlist));
|
||||
final channels = await service.getLiveChannels();
|
||||
|
||||
final epgMap = <String, List<EpgProgram>>{};
|
||||
|
||||
// Load EPG for each channel
|
||||
for (final channel in channels) {
|
||||
try {
|
||||
final epg = await service.getFullEpg(channel.streamId.toString());
|
||||
final programs = _parseEpgPrograms(epg, channel.streamId.toString());
|
||||
epgMap[channel.streamId.toString()] = programs;
|
||||
} catch (e) {
|
||||
print('Error loading EPG for ${channel.name}: $e');
|
||||
epgMap[channel.streamId.toString()] = [];
|
||||
}
|
||||
}
|
||||
|
||||
setState(() {
|
||||
_epgData = epgMap;
|
||||
_isLoading = false;
|
||||
});
|
||||
} catch (e) {
|
||||
print('Error loading EPG: $e');
|
||||
setState(() => _isLoading = false);
|
||||
}
|
||||
}
|
||||
|
||||
List<EpgProgram> _parseEpgPrograms(
|
||||
Map<String, dynamic> epgData,
|
||||
String channelId,
|
||||
) {
|
||||
final programs = <EpgProgram>[];
|
||||
final now = DateTime.now();
|
||||
|
||||
// Parse EPG data structure
|
||||
if (epgData.containsKey('epg_listings')) {
|
||||
final listings = epgData['epg_listings'] as List;
|
||||
for (final item in listings) {
|
||||
try {
|
||||
final startStr = item['start'] as String?;
|
||||
final endStr = item['end'] as String?;
|
||||
final title = item['title'] as String?;
|
||||
final desc = item['description'] as String? ?? '';
|
||||
|
||||
if (startStr != null && endStr != null && title != null) {
|
||||
final start = _parseEpgTime(startStr);
|
||||
final end = _parseEpgTime(endStr);
|
||||
|
||||
programs.add(
|
||||
EpgProgram(
|
||||
id: '${channelId}_${start.millisecondsSinceEpoch}',
|
||||
channelId: channelId,
|
||||
title: title,
|
||||
description: desc,
|
||||
startTime: start,
|
||||
endTime: end,
|
||||
isNow: now.isAfter(start) && now.isBefore(end),
|
||||
isNext:
|
||||
start.isAfter(now) && start.difference(now).inMinutes < 60,
|
||||
),
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sort by start time
|
||||
programs.sort((a, b) => a.startTime.compareTo(b.startTime));
|
||||
return programs;
|
||||
}
|
||||
|
||||
DateTime _parseEpgTime(String timeStr) {
|
||||
try {
|
||||
// Handle various formats: "12:30", "12:30:00", unix timestamp
|
||||
if (timeStr.contains(':')) {
|
||||
final parts = timeStr.split(':');
|
||||
final hours = int.parse(parts[0]);
|
||||
final minutes = int.parse(parts[1]);
|
||||
final today = DateTime.now();
|
||||
return DateTime(today.year, today.month, today.day, hours, minutes);
|
||||
} else {
|
||||
return DateTime.fromMillisecondsSinceEpoch(int.parse(timeStr) * 1000);
|
||||
}
|
||||
} catch (e) {
|
||||
return DateTime.now();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('EPG Guide'),
|
||||
bottom: TabBar(
|
||||
controller: _tabController,
|
||||
isScrollable: true,
|
||||
onTap: (index) {
|
||||
setState(() {
|
||||
_selectedDate = DateTime.now().add(Duration(days: index));
|
||||
});
|
||||
},
|
||||
tabs: List.generate(7, (index) {
|
||||
final date = DateTime.now().add(Duration(days: index));
|
||||
final day = DateFormat('EEE').format(date);
|
||||
final dateNum = DateFormat('d').format(date);
|
||||
return Tab(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(day, style: const TextStyle(fontSize: 11)),
|
||||
Text(
|
||||
dateNum,
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
),
|
||||
body: _isLoading
|
||||
? const Center(child: CircularProgressIndicator())
|
||||
: _buildEpgGrid(),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEpgGrid() {
|
||||
if (_epgData.isEmpty) {
|
||||
return const Center(
|
||||
child: Text('No EPG data available'),
|
||||
);
|
||||
}
|
||||
|
||||
final channels = _epgData.keys.toList();
|
||||
|
||||
return Scrollbar(
|
||||
controller: _horizontalScroll,
|
||||
child: SingleChildScrollView(
|
||||
controller: _horizontalScroll,
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Column(
|
||||
children: [
|
||||
// Time headers
|
||||
SizedBox(
|
||||
height: 60,
|
||||
child: Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 150,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border(
|
||||
right: BorderSide(color: Colors.grey[700]!),
|
||||
bottom: BorderSide(color: Colors.grey[700]!),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
...List.generate(24, (hour) {
|
||||
return Container(
|
||||
width: 100,
|
||||
height: 60,
|
||||
decoration: BoxDecoration(
|
||||
border: Border(
|
||||
right: BorderSide(color: Colors.grey[700]!),
|
||||
bottom: BorderSide(color: Colors.grey[700]!),
|
||||
),
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
'$hour:00',
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Channel rows
|
||||
Expanded(
|
||||
child: Scrollbar(
|
||||
controller: _verticalScroll,
|
||||
child: ListView.builder(
|
||||
controller: _verticalScroll,
|
||||
itemCount: channels.length,
|
||||
itemBuilder: (context, index) {
|
||||
final channelId = channels[index];
|
||||
final programs = _epgData[channelId] ?? [];
|
||||
|
||||
return _EpgChannelRow(
|
||||
channelId: channelId,
|
||||
programs: programs,
|
||||
onProgramTap: (program) {
|
||||
_showProgramDetail(program);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _showProgramDetail(EpgProgram program) {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
builder: (context) => _ProgramDetailSheet(program: program),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Individual channel row in EPG grid
|
||||
class _EpgChannelRow extends StatelessWidget {
|
||||
final String channelId;
|
||||
final List<EpgProgram> programs;
|
||||
final Function(EpgProgram) onProgramTap;
|
||||
|
||||
const _EpgChannelRow({
|
||||
required this.channelId,
|
||||
required this.programs,
|
||||
required this.onProgramTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
children: [
|
||||
// Channel name
|
||||
Container(
|
||||
width: 150,
|
||||
height: 100,
|
||||
decoration: BoxDecoration(
|
||||
border: Border(
|
||||
right: BorderSide(color: Colors.grey[700]!),
|
||||
bottom: BorderSide(color: Colors.grey[700]!),
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
child: Text(
|
||||
channelId,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Programs
|
||||
...programs.map((program) {
|
||||
final duration = program.duration.inMinutes;
|
||||
final width =
|
||||
(duration / 60 * 100).clamp(40, double.infinity).toDouble();
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () => onProgramTap(program),
|
||||
child: Container(
|
||||
width: width,
|
||||
height: 100,
|
||||
decoration: BoxDecoration(
|
||||
color: program.isNow
|
||||
? Colors.blue.withOpacity(0.7)
|
||||
: program.isNext
|
||||
? Colors.purple.withOpacity(0.5)
|
||||
: Colors.grey[800],
|
||||
border: Border(
|
||||
right: BorderSide(color: Colors.grey[700]!),
|
||||
bottom: BorderSide(color: Colors.grey[700]!),
|
||||
),
|
||||
),
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
// Program info
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(4),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
program.title,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
'${DateFormat('HH:mm').format(program.startTime)} - ${DateFormat('HH:mm').format(program.endTime)}',
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(fontSize: 8),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Progress bar for now playing
|
||||
if (program.isNow)
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: ClipRRect(
|
||||
borderRadius: const BorderRadius.only(
|
||||
bottomLeft: Radius.circular(4),
|
||||
bottomRight: Radius.circular(4),
|
||||
),
|
||||
child: LinearProgressIndicator(
|
||||
value: program.progress / 100,
|
||||
minHeight: 3,
|
||||
backgroundColor: Colors.white24,
|
||||
valueColor: const AlwaysStoppedAnimation(Colors.red),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Program detail bottom sheet
|
||||
class _ProgramDetailSheet extends StatelessWidget {
|
||||
final EpgProgram program;
|
||||
|
||||
const _ProgramDetailSheet({required this.program});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
program.title,
|
||||
style: const TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
program.isNow ? Icons.play_circle : Icons.schedule,
|
||||
color: program.isNow ? Colors.green : Colors.orange,
|
||||
size: 16,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'${DateFormat('HH:mm').format(program.startTime)} - ${DateFormat('HH:mm').format(program.endTime)}',
|
||||
style: const TextStyle(fontSize: 14, color: Colors.grey),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Text(
|
||||
'${program.duration.inMinutes} min',
|
||||
style: const TextStyle(fontSize: 14, color: Colors.grey),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
program.description.isEmpty
|
||||
? 'No description available'
|
||||
: program.description,
|
||||
style: const TextStyle(fontSize: 14),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
ElevatedButton.icon(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
icon: const Icon(Icons.play_arrow),
|
||||
label: const Text('Watch Now'),
|
||||
),
|
||||
ElevatedButton.icon(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
icon: const Icon(Icons.event),
|
||||
label: const Text('Add Reminder'),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -11,13 +11,10 @@ import '../providers/playback_positions_provider.dart';
|
||||
// ... (existing imports)
|
||||
// ... (existing imports)
|
||||
import '../../../core/models/playlist_config.dart';
|
||||
import '../../../core/models/iptv_models.dart';
|
||||
import '../../../core/widgets/tv_focusable_card.dart';
|
||||
import '../../../core/widgets/glass_container.dart';
|
||||
import '../../../core/theme/app_colors.dart';
|
||||
import '../widgets/epg_overlay.dart';
|
||||
|
||||
enum StreamType { live, vod, series }
|
||||
enum StreamType { live, vod, series, recording }
|
||||
|
||||
class PlayerScreen extends ConsumerStatefulWidget {
|
||||
final String streamId;
|
||||
@@ -57,7 +54,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
StreamSubscription? _messageSubscription;
|
||||
final String _aspectRatio = 'contain';
|
||||
bool _isSeeking = false;
|
||||
late final String _viewIdPrefix = DateTime.now().millisecondsSinceEpoch.toString();
|
||||
late final String _viewIdPrefix =
|
||||
DateTime.now().millisecondsSinceEpoch.toString();
|
||||
String _viewId = 'iptv-player';
|
||||
String? _currentStreamUrl;
|
||||
String _statusMessage = 'Loading...';
|
||||
@@ -129,12 +127,14 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
currentStreamId,
|
||||
widget.containerExtension,
|
||||
);
|
||||
} 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: Use direct MPEG-TS for Live TV on Desktop/Android for instant zapping
|
||||
if (isLiveTV && !isMobile) {
|
||||
streamUrl = service.getLiveStreamUrlTs(currentStreamId);
|
||||
@@ -152,15 +152,23 @@ 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)
|
||||
|
||||
|
||||
// Cache buster to force reload of updated player.html
|
||||
final cacheBuster = DateTime.now().millisecondsSinceEpoch;
|
||||
|
||||
final streamTypeParam = widget.streamType == StreamType.live ? 'live' : 'vod';
|
||||
final playerFile = isMobile ? 'player_mobile.html' : (isLiveTV ? 'player_lite.html' : 'player.html');
|
||||
|
||||
final streamTypeParam =
|
||||
widget.streamType == StreamType.live ? 'live' : 'vod';
|
||||
final playerFile = isMobile
|
||||
? 'player_mobile.html'
|
||||
: (isLiveTV ? 'player_lite.html' : 'player.html');
|
||||
|
||||
// Inject Turbo-Start flag
|
||||
var playerSrc = '$playerFile?url=$encodedUrl&type=$streamTypeParam&turbo=true&v=$cacheBuster';
|
||||
var playerSrc =
|
||||
'$playerFile?url=$encodedUrl&type=$streamTypeParam&turbo=true&v=$cacheBuster';
|
||||
|
||||
if (widget.streamType == StreamType.recording) {
|
||||
playerSrc += '&is_recording=true';
|
||||
}
|
||||
|
||||
if (startTimeOverride != null) {
|
||||
playerSrc += '&t=$startTimeOverride';
|
||||
@@ -300,31 +308,16 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
void _toggleFullscreen() {
|
||||
try {
|
||||
final doc = html.document;
|
||||
final isFullscreen = doc.fullscreenElement != null ||
|
||||
(doc as dynamic).webkitFullscreenElement != null ||
|
||||
(doc as dynamic).mozFullScreenElement != null;
|
||||
final isFullscreen = doc.fullscreenElement != null ||
|
||||
(doc as dynamic).webkitFullscreenElement != null ||
|
||||
(doc as dynamic).mozFullScreenElement != null;
|
||||
|
||||
if (isFullscreen) {
|
||||
if (doc.exitFullscreen != null) {
|
||||
doc.exitFullscreen();
|
||||
} else if ((doc as dynamic).webkitExitFullscreen != null) {
|
||||
(doc as dynamic).webkitExitFullscreen();
|
||||
} else if ((doc as dynamic).mozCancelFullScreen != null) {
|
||||
(doc as dynamic).mozCancelFullScreen();
|
||||
}
|
||||
doc.exitFullscreen();
|
||||
} else {
|
||||
final element = doc.documentElement;
|
||||
if (element != null) {
|
||||
if (element.requestFullscreen != null) {
|
||||
element.requestFullscreen();
|
||||
} else if ((element as dynamic).webkitRequestFullscreen != null) {
|
||||
(element as dynamic).webkitRequestFullscreen();
|
||||
} else if ((element as dynamic).mozRequestFullScreen != null) {
|
||||
(element as dynamic).mozRequestFullScreen();
|
||||
} else {
|
||||
// Fallback: Message the player if browser API fails
|
||||
_sendMessage({'type': 'request_fullscreen'});
|
||||
}
|
||||
element.requestFullscreen();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -442,16 +435,19 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
children: [
|
||||
Text(
|
||||
widget.channels != null
|
||||
? (widget.channels![_currentIndex]
|
||||
? (widget
|
||||
.channels![
|
||||
_currentIndex]
|
||||
.name ??
|
||||
widget.channels![
|
||||
widget
|
||||
.channels![
|
||||
_currentIndex]
|
||||
.title ??
|
||||
'Unknown')
|
||||
.toString()
|
||||
: widget.title,
|
||||
style: GoogleFonts.inter(
|
||||
color: AppColors.onSurface,
|
||||
style: GoogleFonts.outfit(
|
||||
color: AppColors.textPrimary,
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
@@ -478,29 +474,34 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
// Unified Bottom Bar - EPG + Controls in one bar
|
||||
AnimatedPositioned(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
bottom: _showControls ? 24 : -150, // More offset for stacked layout
|
||||
bottom: _showControls
|
||||
? 24
|
||||
: -150, // More offset for stacked layout
|
||||
left: 16,
|
||||
right: 16,
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final isSmallScreen = constraints.maxWidth < 600;
|
||||
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.95),
|
||||
color: AppColors.surface.withOpacity(0.95),
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColors.background.withOpacity(0.3),
|
||||
color: AppColors.background
|
||||
.withOpacity(0.3),
|
||||
blurRadius: 10,
|
||||
spreadRadius: 2,
|
||||
),
|
||||
],
|
||||
border: Border.all(
|
||||
color: Colors.white.withOpacity(0.15),
|
||||
color: AppColors.textPrimary
|
||||
.withOpacity(0.15),
|
||||
),
|
||||
),
|
||||
child: isSmallScreen
|
||||
@@ -510,14 +511,17 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
// EPG Info (top in mobile)
|
||||
_buildInlineEpg(),
|
||||
const SizedBox(height: 12),
|
||||
const Divider(color: AppColors.outlineVariant),
|
||||
const Divider(
|
||||
color: Colors.white10,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
// Control Buttons
|
||||
Row(
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceEvenly,
|
||||
children: _buildControlButtons(
|
||||
isSmallScreen),
|
||||
isSmallScreen,
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
@@ -532,7 +536,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: _buildControlButtons(
|
||||
isSmallScreen),
|
||||
isSmallScreen,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -554,7 +559,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
|
||||
// STANDARD PLAYER MODE (VOD/Series)
|
||||
return Scaffold(
|
||||
backgroundColor: AppColors.background,
|
||||
backgroundColor: Colors.black,
|
||||
body: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
@@ -585,7 +590,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
Positioned.fill(
|
||||
child: PointerInterceptor(
|
||||
child: Container(
|
||||
color: AppColors.background.withOpacity(0.4),
|
||||
color: Colors.black.withOpacity(0.4),
|
||||
child: Stack(
|
||||
children: [
|
||||
// Top Bar
|
||||
@@ -593,9 +598,10 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
top: 24,
|
||||
left: 24,
|
||||
right: 24,
|
||||
child: GlassContainer.glass(
|
||||
child: GlassContainer(
|
||||
height: 72,
|
||||
borderRadius: 24,
|
||||
opacity: 0.1,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Row(
|
||||
children: [
|
||||
@@ -607,10 +613,10 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
Expanded(
|
||||
child: Text(
|
||||
widget.title,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.outfit(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.onSurface,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -632,8 +638,11 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
bottom: 40,
|
||||
left: 40,
|
||||
right: 40,
|
||||
child: GlassContainer.glass(
|
||||
child: GlassContainer(
|
||||
borderRadius: 24,
|
||||
opacity: 0.2, // Slightly more opaque for controls
|
||||
hasBorder: true,
|
||||
borderColor: Colors.white.withOpacity(0.1),
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
@@ -648,7 +657,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
),
|
||||
),
|
||||
style: GoogleFonts.inter(
|
||||
color: AppColors.onSurfaceVariant,
|
||||
color: Colors.white70,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
@@ -659,7 +668,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
activeTrackColor: AppColors.primary,
|
||||
inactiveTrackColor:
|
||||
Colors.white.withOpacity(0.2),
|
||||
thumbColor: AppColors.onSurface,
|
||||
thumbColor: Colors.white,
|
||||
thumbShape: const RoundSliderThumbShape(
|
||||
enabledThumbRadius: 8,
|
||||
),
|
||||
@@ -700,7 +709,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
),
|
||||
),
|
||||
style: GoogleFonts.inter(
|
||||
color: AppColors.onSurfaceVariant,
|
||||
color: Colors.white70,
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -796,7 +805,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
? null
|
||||
: Border.all(color: Colors.white.withOpacity(0.1)),
|
||||
),
|
||||
child: Icon(icon, color: AppColors.onSurface, size: iconSize),
|
||||
child: Icon(icon, color: Colors.white, size: iconSize),
|
||||
),
|
||||
),
|
||||
);
|
||||
@@ -847,7 +856,6 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
onTap: _toggleMute,
|
||||
size: buttonSize,
|
||||
),
|
||||
|
||||
];
|
||||
}
|
||||
|
||||
@@ -887,7 +895,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
),
|
||||
child: Icon(
|
||||
icon,
|
||||
color: highlighted ? AppColors.primary : AppColors.onSurface,
|
||||
color: highlighted ? AppColors.primary : Colors.white,
|
||||
size: iconSize,
|
||||
),
|
||||
),
|
||||
@@ -919,13 +927,13 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.error,
|
||||
color: Colors.red,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: const Text(
|
||||
'LIVE',
|
||||
style: TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
color: Colors.white,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
@@ -937,8 +945,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
widget.channels != null
|
||||
? widget.channels![_currentIndex].name
|
||||
: widget.title,
|
||||
style: GoogleFonts.inter(
|
||||
color: AppColors.onSurface,
|
||||
style: GoogleFonts.outfit(
|
||||
color: Colors.white,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
@@ -967,13 +975,13 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.error,
|
||||
color: Colors.red,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: const Text(
|
||||
'LIVE',
|
||||
style: TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
color: Colors.white,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
@@ -987,8 +995,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
children: [
|
||||
Text(
|
||||
currentProgram.title,
|
||||
style: GoogleFonts.inter(
|
||||
color: AppColors.onSurface,
|
||||
style: GoogleFonts.outfit(
|
||||
color: Colors.white,
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
@@ -999,7 +1007,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
Text(
|
||||
currentProgram.description,
|
||||
style: GoogleFonts.inter(
|
||||
color: AppColors.onSurfaceVariant,
|
||||
color: Colors.white60,
|
||||
fontSize: 12,
|
||||
),
|
||||
maxLines: 1,
|
||||
@@ -1016,13 +1024,13 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.error,
|
||||
color: Colors.red,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: const Text(
|
||||
'LIVE',
|
||||
style: TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
color: Colors.white,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
@@ -1033,8 +1041,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
widget.channels != null
|
||||
? widget.channels![_currentIndex].name
|
||||
: widget.title,
|
||||
style: GoogleFonts.inter(
|
||||
color: AppColors.onSurface,
|
||||
style: GoogleFonts.outfit(
|
||||
color: Colors.white,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
@@ -1045,8 +1053,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
widget.channels != null
|
||||
? widget.channels![_currentIndex].name
|
||||
: widget.title,
|
||||
style: GoogleFonts.inter(
|
||||
color: AppColors.onSurface,
|
||||
style: GoogleFonts.outfit(
|
||||
color: Colors.white,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
@@ -1055,5 +1063,4 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -27,9 +27,9 @@ class PlaylistSelectionScreen extends ConsumerWidget {
|
||||
appBar: AppBar(
|
||||
title: Text(
|
||||
'Select Playlist',
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.roboto(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.onSurface,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
backgroundColor: Colors.transparent,
|
||||
@@ -37,13 +37,15 @@ class PlaylistSelectionScreen extends ConsumerWidget {
|
||||
actions: [
|
||||
if (currentUser?.isAdmin ?? false)
|
||||
IconButton(
|
||||
icon:
|
||||
const Icon(Icons.admin_panel_settings, color: AppColors.onSurfaceVariant),
|
||||
icon: const Icon(
|
||||
Icons.admin_panel_settings,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
onPressed: () => context.go('/admin'),
|
||||
tooltip: 'Admin Panel',
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.logout, color: AppColors.onSurfaceVariant),
|
||||
icon: const Icon(Icons.logout, color: AppColors.textSecondary),
|
||||
onPressed: () async {
|
||||
await ref.read(authProvider.notifier).logout();
|
||||
if (context.mounted) {
|
||||
@@ -57,107 +59,122 @@ class PlaylistSelectionScreen extends ConsumerWidget {
|
||||
body: Container(
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
Color(0xFF0F1014), // Deep Space Dark
|
||||
Color(0xFF181920), // Soft Eerie Black
|
||||
Color(0xFF050505),
|
||||
AppColors.background,
|
||||
Color(0xFF0A0A0A),
|
||||
],
|
||||
),
|
||||
),
|
||||
child: playlistsAsync.when(
|
||||
loading: () => const Center(
|
||||
child: CircularProgressIndicator(color: AppColors.primary),
|
||||
),
|
||||
error: (error, stack) => Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(Icons.error_outline,
|
||||
size: 64, color: AppColors.error),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Error loading playlists',
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 18,
|
||||
color: AppColors.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
ElevatedButton(
|
||||
onPressed: () => ref.refresh(playlistsProvider),
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: AppColors.primary,
|
||||
foregroundColor: AppColors.onSurface,
|
||||
),
|
||||
child: Text('Retry', style: GoogleFonts.inter()),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
data: (playlists) {
|
||||
if (playlists.isEmpty) {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.playlist_remove,
|
||||
size: 64,
|
||||
color: AppColors.outlineVariant,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'No playlists available',
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 18,
|
||||
color: AppColors.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
currentUser?.isAdmin ?? false
|
||||
? 'Add playlists in Admin Panel'
|
||||
: 'Contact administrator',
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
color: AppColors.outline,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return GridView.builder(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
48,
|
||||
100,
|
||||
48,
|
||||
48,
|
||||
), // More padding for cinematic feel
|
||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount:
|
||||
MediaQuery.of(context).size.width > 1200 ? 4 : 3,
|
||||
crossAxisSpacing: 32,
|
||||
mainAxisSpacing: 32,
|
||||
childAspectRatio: 1.4,
|
||||
),
|
||||
itemCount: playlists.length,
|
||||
itemBuilder: (context, index) {
|
||||
final playlist = playlists[index];
|
||||
return _PlaylistCard(
|
||||
playlist: playlist,
|
||||
onTap: () {
|
||||
// Update current selected playlist provider first
|
||||
ref.read(selectedPlaylistProvider.notifier).state = playlist;
|
||||
// Then navigate to dashboard
|
||||
context.go('/dashboard');
|
||||
},
|
||||
child: SafeArea(
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
// Safety: if constraints are invalid, show loading spinner
|
||||
if (!constraints.maxWidth.isFinite ||
|
||||
constraints.maxWidth <= 0 ||
|
||||
!constraints.maxHeight.isFinite ||
|
||||
constraints.maxHeight <= 0) {
|
||||
return const Center(
|
||||
child: CircularProgressIndicator(color: AppColors.primary),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
}
|
||||
|
||||
return playlistsAsync.when(
|
||||
loading: () => const Center(
|
||||
child: CircularProgressIndicator(color: AppColors.primary),
|
||||
),
|
||||
error: (error, stack) => Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.error_outline,
|
||||
size: 64,
|
||||
color: AppColors.error,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Error loading playlists',
|
||||
style: GoogleFonts.outfit(
|
||||
fontSize: 18,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
ElevatedButton(
|
||||
onPressed: () => ref.refresh(playlistsProvider),
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: AppColors.primary,
|
||||
foregroundColor: AppColors.textPrimary,
|
||||
),
|
||||
child: Text('Retry', style: GoogleFonts.inter()),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
data: (playlists) {
|
||||
if (playlists.isEmpty) {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.playlist_remove,
|
||||
size: 64,
|
||||
color: Colors.white24,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'No playlists available',
|
||||
style: GoogleFonts.outfit(
|
||||
fontSize: 18,
|
||||
color: Colors.white60,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
currentUser?.isAdmin ?? false
|
||||
? 'Add playlists in Admin Panel'
|
||||
: 'Contact administrator',
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
color: Colors.white38,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Simple Wrap layout - no grid, no NaN-prone calculations
|
||||
return SingleChildScrollView(
|
||||
padding: const EdgeInsets.fromLTRB(48, 32, 48, 48),
|
||||
child: Wrap(
|
||||
spacing: 32,
|
||||
runSpacing: 32,
|
||||
children: playlists.map((playlist) {
|
||||
return SizedBox(
|
||||
width: 340,
|
||||
height: 240,
|
||||
child: _PlaylistCard(
|
||||
playlist: playlist,
|
||||
onTap: () {
|
||||
ref
|
||||
.read(selectedPlaylistProvider.notifier)
|
||||
.state = playlist;
|
||||
context.go('/dashboard');
|
||||
},
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
@@ -193,7 +210,7 @@ class _PlaylistCardState extends State<_PlaylistCard> {
|
||||
decoration: BoxDecoration(
|
||||
color: _isHovered
|
||||
? Colors.white.withOpacity(0.1)
|
||||
: Colors.white.withOpacity(0.03), // Subtle glass
|
||||
: Colors.white.withOpacity(0.03),
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
border: Border.all(
|
||||
color: _isHovered
|
||||
@@ -246,16 +263,16 @@ class _PlaylistCardState extends State<_PlaylistCard> {
|
||||
child: Icon(
|
||||
Icons.playlist_play_rounded,
|
||||
size: 32,
|
||||
color: _isHovered ? AppColors.onSurface : AppColors.onSurfaceVariant,
|
||||
color: _isHovered ? Colors.white : Colors.white70,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
Text(
|
||||
widget.playlist.name,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.outfit(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.onSurface,
|
||||
color: Colors.white,
|
||||
height: 1.2,
|
||||
),
|
||||
maxLines: 2,
|
||||
@@ -266,7 +283,7 @@ class _PlaylistCardState extends State<_PlaylistCard> {
|
||||
Uri.tryParse(widget.playlist.dns)?.host ?? widget.playlist.dns,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 13,
|
||||
color: AppColors.outline,
|
||||
color: Colors.white38,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
maxLines: 1,
|
||||
|
||||
Reference in new issue
Block a user