mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-22 06:28:04 +02:00
feat: Implement initial mobile application structure including IPTV features, authentication, routing, and theming.
This commit is contained in:
1 parent
a52c896d97
commit
b6e81bc9ba
12 files changed
+2082
-3
No files matched your search
@@ -0,0 +1,60 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import '../../../../core/models/playlist_config.dart';
|
||||
import '../../widgets/mobile_scaffold.dart';
|
||||
import '../../theme/mobile_theme.dart';
|
||||
import '../widgets/mobile_live_tv_tab.dart';
|
||||
import '../widgets/mobile_movies_tab.dart';
|
||||
import '../widgets/mobile_series_tab.dart';
|
||||
import '../widgets/mobile_settings_tab.dart';
|
||||
|
||||
class MobileDashboardScreen extends ConsumerStatefulWidget {
|
||||
final PlaylistConfig playlist;
|
||||
|
||||
const MobileDashboardScreen({
|
||||
super.key,
|
||||
required this.playlist,
|
||||
});
|
||||
|
||||
@override
|
||||
ConsumerState<MobileDashboardScreen> createState() => _MobileDashboardScreenState();
|
||||
}
|
||||
|
||||
class _MobileDashboardScreenState extends ConsumerState<MobileDashboardScreen> {
|
||||
int _currentIndex = 0;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// Determine which tab to show
|
||||
Widget currentTab;
|
||||
switch (_currentIndex) {
|
||||
case 0:
|
||||
currentTab = MobileLiveTVTab(playlist: widget.playlist);
|
||||
break;
|
||||
case 1:
|
||||
currentTab = MobileMoviesTab(playlist: widget.playlist);
|
||||
break;
|
||||
case 2:
|
||||
currentTab = MobileSeriesTab(playlist: widget.playlist);
|
||||
break;
|
||||
case 3:
|
||||
currentTab = const MobileSettingsTab();
|
||||
break;
|
||||
default:
|
||||
currentTab = MobileLiveTVTab(playlist: widget.playlist);
|
||||
}
|
||||
|
||||
return Theme(
|
||||
data: MobileTheme.darkTheme,
|
||||
child: MobileScaffold(
|
||||
currentIndex: _currentIndex,
|
||||
onIndexChanged: (index) {
|
||||
setState(() {
|
||||
_currentIndex = index;
|
||||
});
|
||||
},
|
||||
child: currentTab,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../../features/iptv/screens/player_screen.dart';
|
||||
import '../../../../core/models/playlist_config.dart';
|
||||
|
||||
/// Mobile wrapper for the PlayerScreen.
|
||||
/// Currently reuses the desktop PlayerScreen as it adapts well to mobile (video player),
|
||||
/// but allows for future mobile-specific overlays or gesture controls.
|
||||
class MobilePlayerScreen extends StatelessWidget {
|
||||
final String streamId;
|
||||
final String title;
|
||||
final StreamType streamType;
|
||||
final String containerExtension;
|
||||
final PlaylistConfig playlist;
|
||||
|
||||
const MobilePlayerScreen({
|
||||
super.key,
|
||||
required this.streamId,
|
||||
required this.title,
|
||||
required this.playlist,
|
||||
this.streamType = StreamType.live,
|
||||
this.containerExtension = 'mp4',
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// For now, we reuse the existing PlayerScreen which is responsive.
|
||||
// In the future, we can add Mobile-specific gesture detectors here.
|
||||
return PlayerScreen(
|
||||
streamId: streamId,
|
||||
title: title,
|
||||
playlist: playlist,
|
||||
streamType: streamType,
|
||||
containerExtension: containerExtension,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import '../../../../core/services/playlist_api_service.dart';
|
||||
import '../../../../core/models/playlist_config.dart';
|
||||
import '../../../../features/auth/providers/auth_provider.dart';
|
||||
import '../../../../core/theme/app_colors.dart';
|
||||
import '../../../theme/mobile_theme.dart';
|
||||
|
||||
final playlistsProvider = FutureProvider<List<PlaylistConfig>>((ref) async {
|
||||
final service = PlaylistApiService();
|
||||
return service.getPlaylists();
|
||||
});
|
||||
|
||||
class MobilePlaylistSelectionScreen extends ConsumerWidget {
|
||||
const MobilePlaylistSelectionScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final currentUser = ref.watch(authProvider).currentUser;
|
||||
final playlistsAsync = ref.watch(playlistsProvider);
|
||||
|
||||
return Theme(
|
||||
data: MobileTheme.darkTheme,
|
||||
child: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Playlists'),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.logout),
|
||||
onPressed: () async {
|
||||
await ref.read(authProvider.notifier).logout();
|
||||
if (context.mounted) {
|
||||
context.go('/login');
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: playlistsAsync.when(
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
error: (error, stack) => Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(Icons.error_outline, size: 48, color: AppColors.error),
|
||||
const SizedBox(height: 16),
|
||||
Text('Error loading playlists', style: GoogleFonts.inter()),
|
||||
TextButton(
|
||||
onPressed: () => ref.refresh(playlistsProvider),
|
||||
child: const Text('Retry'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
data: (playlists) {
|
||||
if (playlists.isEmpty) {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(Icons.playlist_remove, size: 48, color: AppColors.textSecondary),
|
||||
const SizedBox(height: 16),
|
||||
Text('No playlists available', style: GoogleFonts.inter(color: AppColors.textSecondary)),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return ListView.separated(
|
||||
padding: const EdgeInsets.all(16),
|
||||
itemCount: playlists.length,
|
||||
separatorBuilder: (context, index) => const SizedBox(height: 16),
|
||||
itemBuilder: (context, index) {
|
||||
final playlist = playlists[index];
|
||||
return _MobilePlaylistCard(
|
||||
playlist: playlist,
|
||||
onTap: () {
|
||||
// Mobile navigation to dashboard with playlist
|
||||
context.go('/dashboard', extra: playlist);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MobilePlaylistCard extends StatelessWidget {
|
||||
final PlaylistConfig playlist;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _MobilePlaylistCard({
|
||||
required this.playlist,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(color: AppColors.border.withOpacity(0.5)),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.2),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 56,
|
||||
height: 56,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.primary.withOpacity(0.2),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: const Icon(Icons.playlist_play, color: AppColors.primary, size: 28),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
playlist.name,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
Uri.tryParse(playlist.dns)?.host ?? playlist.dns,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 13,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const Icon(Icons.chevron_right, color: AppColors.textTertiary),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,316 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import '../../../../core/models/playlist_config.dart';
|
||||
import '../../../../features/iptv/models/xtream_models.dart';
|
||||
import '../../../../features/iptv/providers/xtream_provider.dart';
|
||||
import '../../../../features/iptv/providers/watch_history_provider.dart';
|
||||
import 'mobile_player_screen.dart';
|
||||
import '../../../../core/theme/app_colors.dart';
|
||||
|
||||
class MobileSeriesDetailScreen extends ConsumerStatefulWidget {
|
||||
final Series series;
|
||||
final PlaylistConfig playlist;
|
||||
|
||||
const MobileSeriesDetailScreen({
|
||||
super.key,
|
||||
required this.series,
|
||||
required this.playlist,
|
||||
});
|
||||
|
||||
@override
|
||||
ConsumerState<MobileSeriesDetailScreen> createState() => _MobileSeriesDetailScreenState();
|
||||
}
|
||||
|
||||
class _MobileSeriesDetailScreenState extends ConsumerState<MobileSeriesDetailScreen> {
|
||||
SeriesInfo? _seriesInfo;
|
||||
bool _isLoading = true;
|
||||
String? _error;
|
||||
int _selectedSeason = 1;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_loadSeriesInfo();
|
||||
}
|
||||
|
||||
Future<void> _loadSeriesInfo() async {
|
||||
try {
|
||||
setState(() {
|
||||
_isLoading = true;
|
||||
_error = null;
|
||||
});
|
||||
|
||||
final service = ref.read(xtreamServiceProvider(widget.playlist));
|
||||
final info = await service.getSeriesInfo(widget.series.seriesId);
|
||||
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_seriesInfo = info;
|
||||
_isLoading = false;
|
||||
if (info.episodes.isNotEmpty) {
|
||||
_selectedSeason = info.episodes.keys.first;
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_error = e.toString();
|
||||
_isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: AppColors.background,
|
||||
body: _isLoading
|
||||
? const Center(child: CircularProgressIndicator())
|
||||
: _error != null
|
||||
? Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(Icons.error_outline, size: 48, color: AppColors.error),
|
||||
const SizedBox(height: 16),
|
||||
Text('Error: $_error', style: const TextStyle(color: AppColors.textSecondary)),
|
||||
TextButton(onPressed: _loadSeriesInfo, child: const Text('Retry')),
|
||||
],
|
||||
),
|
||||
)
|
||||
: _buildMobileContent(),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMobileContent() {
|
||||
if (_seriesInfo == null) return const SizedBox.shrink();
|
||||
|
||||
final currentEpisodes = _seriesInfo!.episodes[_selectedSeason] ?? [];
|
||||
|
||||
return CustomScrollView(
|
||||
slivers: [
|
||||
// App Bar with Cover
|
||||
SliverAppBar(
|
||||
expandedHeight: 400,
|
||||
pinned: true,
|
||||
backgroundColor: AppColors.background,
|
||||
flexibleSpace: FlexibleSpaceBar(
|
||||
background: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
if (_seriesInfo!.cover != null)
|
||||
CachedNetworkImage(
|
||||
imageUrl: _seriesInfo!.cover!,
|
||||
fit: BoxFit.cover,
|
||||
errorWidget: (_, __, ___) => Container(color: Colors.grey.shade900),
|
||||
),
|
||||
// Gradient Overlay
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
Colors.transparent,
|
||||
AppColors.background.withOpacity(0.8),
|
||||
AppColors.background,
|
||||
],
|
||||
stops: const [0.5, 0.8, 1.0],
|
||||
),
|
||||
),
|
||||
),
|
||||
// Info Overlay
|
||||
Positioned(
|
||||
bottom: 16,
|
||||
left: 16,
|
||||
right: 16,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
_seriesInfo!.name,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Row(
|
||||
children: [
|
||||
if (_seriesInfo!.rating != null) ...[
|
||||
const Icon(Icons.star, size: 16, color: Colors.amber),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
_seriesInfo!.rating!,
|
||||
style: const TextStyle(color: AppColors.textSecondary, fontSize: 13),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
],
|
||||
Text(
|
||||
'${_seriesInfo!.episodes.keys.length} Seasons',
|
||||
style: const TextStyle(color: AppColors.textSecondary, fontSize: 13),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Plot
|
||||
if (_seriesInfo!.plot != null && _seriesInfo!.plot!.isNotEmpty)
|
||||
SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Text(
|
||||
_seriesInfo!.plot!,
|
||||
style: const TextStyle(color: AppColors.textSecondary, height: 1.4),
|
||||
maxLines: 4,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Seasons Filter
|
||||
SliverToBoxAdapter(
|
||||
child: SizedBox(
|
||||
height: 50,
|
||||
child: ListView.separated(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
scrollDirection: Axis.horizontal,
|
||||
itemCount: _seriesInfo!.episodes.keys.length,
|
||||
separatorBuilder: (_, __) => const SizedBox(width: 8),
|
||||
itemBuilder: (context, index) {
|
||||
final seasonNum = _seriesInfo!.episodes.keys.elementAt(index);
|
||||
final isSelected = seasonNum == _selectedSeason;
|
||||
return ChoiceChip(
|
||||
label: Text('Season $seasonNum'),
|
||||
selected: isSelected,
|
||||
onSelected: (selected) {
|
||||
if (selected) setState(() => _selectedSeason = seasonNum);
|
||||
},
|
||||
backgroundColor: AppColors.surface,
|
||||
selectedColor: AppColors.primary,
|
||||
labelStyle: TextStyle(
|
||||
color: isSelected ? Colors.white : AppColors.textSecondary,
|
||||
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
|
||||
),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
|
||||
showCheckmark: false,
|
||||
side: BorderSide.none,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 16)),
|
||||
|
||||
// Episodes List
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.only(bottom: 32),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(context, index) {
|
||||
final episode = currentEpisodes[index];
|
||||
return _buildEpisodeTile(episode);
|
||||
},
|
||||
childCount: currentEpisodes.length,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEpisodeTile(Episode episode) {
|
||||
final watchHistory = ref.watch(watchHistoryProvider);
|
||||
final episodeKey = WatchHistory.episodeKey(
|
||||
widget.series.seriesId,
|
||||
_selectedSeason,
|
||||
episode.episodeNum,
|
||||
);
|
||||
final isWatched = watchHistory.isEpisodeWatched(episodeKey);
|
||||
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
ref.read(watchHistoryProvider.notifier).markEpisodeWatched(episodeKey);
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => MobilePlayerScreen(
|
||||
streamId: episode.id,
|
||||
title: '${widget.series.name} - ${episode.title}',
|
||||
playlist: widget.playlist,
|
||||
streamType: StreamType.series,
|
||||
containerExtension: episode.containerExtension ?? 'mkv',
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
decoration: const BoxDecoration(
|
||||
border: Border(bottom: BorderSide(color: Colors.white10)),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
// Play Button / Indicator
|
||||
Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: isWatched ? AppColors.primary : Colors.white10,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Icon(
|
||||
isWatched ? Icons.check : Icons.play_arrow,
|
||||
color: isWatched ? Colors.white : AppColors.primary,
|
||||
size: 20,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'E${episode.episodeNum} - ${episode.title}',
|
||||
style: const TextStyle(
|
||||
color: AppColors.textPrimary,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
if (episode.durationSecs != null && episode.durationSecs! > 0)
|
||||
Text(
|
||||
_formatDuration(episode.durationSecs!),
|
||||
style: const TextStyle(color: AppColors.textSecondary, fontSize: 12),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _formatDuration(int seconds) {
|
||||
final hours = seconds ~/ 3600;
|
||||
final minutes = (seconds % 3600) ~/ 60;
|
||||
if (hours > 0) return '${hours}h ${minutes}m';
|
||||
return '${minutes}m';
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user