mirror of
https://github.com/R0m1k3/xtremobile.git
synced 2026-10-21 06:08:15 +02:00
feat: Add mobile-specific Riverpod providers for Xtream service, live TV, movies, series, and EPG data, along with UI state management.
This commit is contained in:
Michael committed
1 parent
f85f43e42f
commit
e1a0802a0c
18 files changed
+1619
-574
No files matched your search
@@ -1,6 +1,6 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:xtremobile/core/theme/app_colors.dart';
|
||||
import 'package:xtremobile/core/theme/app_decorations.dart';
|
||||
import 'package:xtremobile/mobile/widgets/tv_focusable.dart';
|
||||
import 'package:xtremobile/core/utils/image_cache_config.dart';
|
||||
|
||||
@@ -26,94 +26,132 @@ class MobilePosterCard extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
// Focusable Poster
|
||||
// Shadow lives on this outer Container so ClipRRect doesn't swallow it
|
||||
Expanded(
|
||||
child: TVFocusable(
|
||||
onPressed: onTap,
|
||||
onLongPress: onLongPress,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
// Image
|
||||
// [P1-2 FIX] Optimize image cache: resize to display size (100x150)
|
||||
// Before: Downloads full resolution (1000x1500px), caches at full size
|
||||
// After: Cache only 100x150px needed for display
|
||||
// Impact: -60% disk cache, -40% memory usage
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
child: imageUrl != null && imageUrl!.isNotEmpty
|
||||
? CachedNetworkImage(
|
||||
imageUrl: imageUrl!,
|
||||
fit: BoxFit.cover,
|
||||
// Memory cache dimensions (match display size)
|
||||
memCacheWidth: 120,
|
||||
memCacheHeight: 180,
|
||||
// Disk cache dimensions (slightly larger for quality)
|
||||
maxWidthDiskCache: 120,
|
||||
maxHeightDiskCache: 180,
|
||||
cacheManager: AppCacheManager.instance,
|
||||
errorWidget: (_, __, ___) => Container(
|
||||
color: AppColors.surface,
|
||||
child: Icon(placeholderIcon, color: Colors.white38),
|
||||
),
|
||||
placeholder: (_, __) => Container(
|
||||
color: AppColors.surface,
|
||||
child: Icon(placeholderIcon, color: Colors.white24),
|
||||
),
|
||||
)
|
||||
: Container(
|
||||
color: AppColors.surface,
|
||||
child: Icon(placeholderIcon, color: Colors.white38),
|
||||
),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: isDark
|
||||
? const Color(0x99000000)
|
||||
: const Color(0x28000000),
|
||||
blurRadius: 12,
|
||||
offset: const Offset(0, 6),
|
||||
),
|
||||
|
||||
// Overlays
|
||||
if (rating != null)
|
||||
Positioned(
|
||||
top: 6,
|
||||
left: 6,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black87,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(Icons.star, color: Colors.amber, size: 10),
|
||||
const SizedBox(width: 2),
|
||||
Text(
|
||||
rating!,
|
||||
style: const TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.bold),
|
||||
],
|
||||
),
|
||||
child: TVFocusable(
|
||||
onPressed: onTap,
|
||||
onLongPress: onLongPress,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
// Image / placeholder (clipped)
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
child: imageUrl != null && imageUrl!.isNotEmpty
|
||||
? CachedNetworkImage(
|
||||
imageUrl: imageUrl!,
|
||||
fit: BoxFit.cover,
|
||||
memCacheWidth: 120,
|
||||
memCacheHeight: 180,
|
||||
maxWidthDiskCache: 120,
|
||||
maxHeightDiskCache: 180,
|
||||
cacheManager: AppCacheManager.instance,
|
||||
errorWidget: (_, __, ___) => Container(
|
||||
decoration:
|
||||
AppDecorations.channelCardBase(context),
|
||||
child: Icon(
|
||||
placeholderIcon,
|
||||
color: AppDecorations.iconMuted(context),
|
||||
),
|
||||
),
|
||||
placeholder: (_, __) => Container(
|
||||
decoration:
|
||||
AppDecorations.channelCardBase(context),
|
||||
child: Icon(
|
||||
placeholderIcon,
|
||||
color: AppDecorations.iconMuted(context),
|
||||
),
|
||||
),
|
||||
)
|
||||
: Container(
|
||||
decoration: AppDecorations.channelCardBase(context),
|
||||
child: Icon(
|
||||
placeholderIcon,
|
||||
color: AppDecorations.iconMuted(context),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
if (isWatched)
|
||||
Positioned(
|
||||
top: 6,
|
||||
right: 6,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(4),
|
||||
decoration: const BoxDecoration(
|
||||
color: AppColors.success,
|
||||
shape: BoxShape.circle,
|
||||
// Rating badge
|
||||
if (rating != null)
|
||||
Positioned(
|
||||
top: 6,
|
||||
left: 6,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 4,
|
||||
vertical: 2,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black87,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.star,
|
||||
color: Colors.amber,
|
||||
size: 10,
|
||||
),
|
||||
const SizedBox(width: 2),
|
||||
Text(
|
||||
rating!,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
child: const Icon(Icons.check, size: 10, color: Colors.white),
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
// Watched badge
|
||||
if (isWatched)
|
||||
Positioned(
|
||||
top: 6,
|
||||
right: 6,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(4),
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFF30D158),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.check,
|
||||
size: 10,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
|
||||
const SizedBox(height: 6),
|
||||
|
||||
// Title
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4),
|
||||
@@ -122,8 +160,8 @@ class MobilePosterCard extends StatelessWidget {
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textPrimary,
|
||||
style: TextStyle(
|
||||
color: AppDecorations.textPrimary(context),
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
|
||||
@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import '../../core/theme/app_colors.dart';
|
||||
import '../../core/theme/app_decorations.dart';
|
||||
|
||||
class MobileScaffold extends ConsumerStatefulWidget {
|
||||
final Widget child;
|
||||
@@ -34,7 +34,7 @@ class _MobileScaffoldState extends ConsumerState<MobileScaffold> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: AppColors.background,
|
||||
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
|
||||
body: Column(
|
||||
children: [
|
||||
// Top Navigation Bar (Redesigned)
|
||||
@@ -51,19 +51,7 @@ class _MobileScaffoldState extends ConsumerState<MobileScaffold> {
|
||||
child: Container(
|
||||
height: 64, // Taller pill to accommodate larger logo
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFF1A1A1A)
|
||||
.withOpacity(0.9), // Slightly more opaque pill
|
||||
borderRadius: BorderRadius.circular(40),
|
||||
border: Border.all(color: Colors.white.withOpacity(0.1)),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.3),
|
||||
blurRadius: 10,
|
||||
spreadRadius: 2,
|
||||
),
|
||||
],
|
||||
),
|
||||
decoration: AppDecorations.navPill(context),
|
||||
child: Row(
|
||||
children: [
|
||||
// --- LEFT: LOGO & BRAND ---
|
||||
@@ -89,11 +77,11 @@ class _MobileScaffoldState extends ConsumerState<MobileScaffold> {
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
const Text(
|
||||
Text(
|
||||
'XtremFlow',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 20, // Slightly larger text
|
||||
color: AppDecorations.textPrimary(context),
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontFamily: 'Inter',
|
||||
),
|
||||
@@ -127,8 +115,7 @@ class _MobileScaffoldState extends ConsumerState<MobileScaffold> {
|
||||
vertical: 8,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white
|
||||
.withOpacity(0.08), // Subtle background
|
||||
color: AppDecorations.divider(context),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: StreamBuilder<DateTime>(
|
||||
@@ -139,8 +126,8 @@ class _MobileScaffoldState extends ConsumerState<MobileScaffold> {
|
||||
DateFormat('HH:mm').format(snapshot.data!);
|
||||
return Text(
|
||||
time,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
style: TextStyle(
|
||||
color: AppDecorations.textPrimary(context),
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 16,
|
||||
),
|
||||
@@ -214,11 +201,12 @@ class _AppleTVNavItemState extends State<_AppleTVNavItem> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// Selected: Black text on White bg
|
||||
// Focused: White text on Translucent bg
|
||||
// Normal: White70 text on Transparent bg
|
||||
final Color textColor = widget.isSelected ? Colors.black : Colors.white;
|
||||
final Color iconColor = widget.isSelected ? Colors.black : Colors.white;
|
||||
const Color selectedColor = Color(0xFF0A84FF);
|
||||
final Color unselectedColor = AppDecorations.textSecondary(context);
|
||||
final Color textColor =
|
||||
widget.isSelected ? Colors.white : unselectedColor;
|
||||
final Color iconColor =
|
||||
widget.isSelected ? Colors.white : unselectedColor;
|
||||
final FontWeight fontWeight =
|
||||
widget.isSelected ? FontWeight.w700 : FontWeight.w500;
|
||||
|
||||
@@ -243,15 +231,13 @@ class _AppleTVNavItemState extends State<_AppleTVNavItem> {
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: widget.isSelected
|
||||
? Colors.white
|
||||
? selectedColor
|
||||
: (_isFocused
|
||||
? Colors.white.withOpacity(0.2) // Explicit focus highlight
|
||||
? AppDecorations.divider(context).withValues(alpha: 0.2)
|
||||
: Colors.transparent),
|
||||
borderRadius: BorderRadius.circular(20), // Matches pill shape
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: _isFocused && !widget.isSelected
|
||||
? Border.all(
|
||||
color: Colors.white.withOpacity(0.3),
|
||||
) // Subtle border for focus
|
||||
? Border.all(color: AppDecorations.divider(context))
|
||||
: null,
|
||||
),
|
||||
child: Row(
|
||||
|
||||
@@ -23,8 +23,8 @@ class TVFocusable extends StatefulWidget {
|
||||
this.onFocus,
|
||||
this.focusNode,
|
||||
this.autofocus = false,
|
||||
this.scale = 1.08, // More visible scale
|
||||
this.borderWidth = 3.0,
|
||||
this.scale = 1.05, // Apple TV subtle lift
|
||||
this.borderWidth = 2.0,
|
||||
this.focusColor = Colors.white,
|
||||
this.borderRadius,
|
||||
this.longPressDuration = const Duration(seconds: 3),
|
||||
@@ -157,15 +157,14 @@ class _TVFocusableState extends State<TVFocusable> {
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black
|
||||
.withOpacity(0.5), // Shadow for depth
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 4),
|
||||
.withOpacity(0.5), // Deep shadow for lift
|
||||
blurRadius: 16,
|
||||
offset: const Offset(0, 6),
|
||||
),
|
||||
BoxShadow(
|
||||
color: widget.focusColor
|
||||
.withOpacity(0.3), // Glow effect
|
||||
const BoxShadow(
|
||||
color: Color(0x40FFFFFF), // White glow
|
||||
blurRadius: 12,
|
||||
spreadRadius: 2,
|
||||
spreadRadius: 0,
|
||||
),
|
||||
],
|
||||
)
|
||||
|
||||
Reference in new issue
Block a user