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

feat: introduce streaming handlers for live TV proxy and VOD HLS transcoding using FFmpeg.

Browse Source
This commit is contained in:
Michael committed 2026-01-01 18:12:45 +01:00
1 parent d22350fb89
commit a1a8810ddc
10 files changed
+968 -612
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/core/theme/app_colors.dart
+34 -21
View File
@@ -12,45 +12,58 @@ class AppColors {
// ============ BACKGROUNDS ============
/// Pure black for that infinite depth look (OLED friendly)
static const Color background = Color(0xFF000000);
static const Color background = Color(0xFF0F1014); // Deepest Blue-Black
/// Very deep grey for surfaces that need to be distinct but subtle (Apple Dark Grey)
static const Color surface = Color(0xFF1C1C1E);
static const Color surface = Color(0xFF181920);
/// Slightly lighter grey for secondary surfaces or hover states
static const Color surfaceVariant = Color(0xFF3A3A3C);
static const Color surfaceVariant = Color(0xFF1E2028);
static const Color surfaceGlass =
Color(0x1AFFFFFF); // 10% White for glass effect
/// Focused element background (often white in tvOS for text, or bright accent)
static const Color focusColor = Color(0xFFFFFFFF);
static const Color border = Color(0xFF1F1F1F);
static const Color focusBorder = Color(0xFFFFFFFF);
// ============ ACCENTS ============
/// Minimal white accent. In Apple TV, color is used sparingly.
/// We keep a subtle blue only for specific indicators if needed.
static const Color primary = Color(0xFFFFFFFF);
static const Color accent = Color(0xFFE5E5E5);
static const Color primary = Color(0xFF6C63FF);
static const Color secondary = Color(0xFF00B4D8);
static const Color accent = Color(0xFF00B4D8);
/// Primary Gradient (Subtle silver/white glow)
/// Primary Gradient (Electric Violet to Cyan)
static const LinearGradient primaryGradient = LinearGradient(
colors: [Color(0xFFFFFFFF), Color(0xFFCCCCCC)],
colors: [Color(0xFF6C63FF), Color(0xFF00B4D8)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
// ============ TEXT ============
static const LinearGradient backgroundGradient = LinearGradient(
colors: [Color(0xFF0F1014), Color(0xFF131418)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
);
// Status Colors
static const Color success = Color(0xFF00E676);
static const Color warning = Color(0xFFFFAB00);
static const Color error = Color(0xFFFF5252);
static const Color info = Color(0xFF2979FF);
// Content Colors
static const Color textPrimary = Color(0xFFFFFFFF);
static const Color textSecondary = Color(0xFF9E9E9E); // Medium Grey
static const Color textTertiary = Color(0xFF616161); // Darker Grey
static const Color textSecondary = Color(0xFFAAAAAA);
static const Color textTertiary = Color(0xFF666666);
// ============ FUNCTIONAL COLORS ============
static const Color success = Color(0xFF4DB6AC); // Teal-ish
static const Color warning = Color(0xFFFFB74D);
static const Color error = Color(0xFFEF5350);
static const Color live = Color(0xFFFF3B30); // Apple Red
static const Color ratingGold = Color(0xFFFFD700);
static const Color premiumGold = Color(0xFFFFA000);
// ============ BORDERS ============
// Borders are usually hidden until focused
static const Color border = Color(0xFF1F1F1F);
static const Color focusBorder = Color(0xFFFFFFFF);
// Category Colors
static const Color live = Color(0xFFFF5252); // Red
static const Color movies = Color(0xFF448AFF); // Blue
static const Color series = Color(0xFF69F0AE); // Green
// ============ GLASSMORPHISM ============
// Apple TV uses this heavily for headers/overlays
lib/core/theme/app_theme.dart
+64 -28
View File
@@ -3,7 +3,7 @@ import 'package:google_fonts/google_fonts.dart';
import 'app_colors.dart';
/// XtremFlow Apple TV Theme
///
///
/// Focus-driven, immersive, minimal.
class AppTheme {
AppTheme._();
@@ -27,27 +27,57 @@ class AppTheme {
// ============ ANIMATION ============
static const Duration durationFast = Duration(milliseconds: 200);
static const Duration durationNormal = Duration(milliseconds: 300);
static const Curve curveDefault = Curves.fastOutSlowIn; // Apple-like snappy curve
static const Curve curveDefault =
Curves.fastOutSlowIn; // Apple-like snappy curve
// ============ DARK THEME (TV Main) ============
static ThemeData get darkTheme {
final baseTheme = ThemeData.dark(useMaterial3: true);
return baseTheme.copyWith(
colorScheme: AppColors.darkColorScheme,
scaffoldBackgroundColor: AppColors.background,
// Typography: San Francisco style (using Inter as proxy)
// Typography: "Cinematic Modern" (Outfit for Headings, Inter for UI)
textTheme: TextTheme(
displayLarge: GoogleFonts.inter(fontSize: 56, fontWeight: FontWeight.w700, letterSpacing: -1.0, color: AppColors.textPrimary),
displayMedium: GoogleFonts.inter(fontSize: 48, fontWeight: FontWeight.w700, letterSpacing: -0.5, color: AppColors.textPrimary),
displaySmall: GoogleFonts.inter(fontSize: 32, fontWeight: FontWeight.w600, color: AppColors.textPrimary),
headlineMedium: GoogleFonts.inter(fontSize: 24, fontWeight: FontWeight.w600, color: AppColors.textPrimary),
titleLarge: GoogleFonts.inter(fontSize: 20, fontWeight: FontWeight.w600, color: AppColors.textPrimary),
titleMedium: GoogleFonts.inter(fontSize: 16, fontWeight: FontWeight.w600, color: AppColors.textPrimary),
bodyLarge: GoogleFonts.inter(fontSize: 16, fontWeight: FontWeight.w400, color: AppColors.textSecondary),
bodyMedium: GoogleFonts.inter(fontSize: 14, fontWeight: FontWeight.w400, color: AppColors.textSecondary),
labelLarge: GoogleFonts.inter(fontSize: 14, fontWeight: FontWeight.w600, color: AppColors.textPrimary),
displayLarge: GoogleFonts.outfit(
fontSize: 56,
fontWeight: FontWeight.w700,
letterSpacing: -1.0,
color: AppColors.textPrimary),
displayMedium: GoogleFonts.outfit(
fontSize: 48,
fontWeight: FontWeight.w700,
letterSpacing: -0.5,
color: AppColors.textPrimary),
displaySmall: GoogleFonts.outfit(
fontSize: 32,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary),
headlineMedium: GoogleFonts.outfit(
fontSize: 24,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary),
titleLarge: GoogleFonts.outfit(
fontSize: 20,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary),
titleMedium: GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary),
bodyLarge: GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w400,
color: AppColors.textSecondary),
bodyMedium: GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w400,
color: AppColors.textSecondary),
labelLarge: GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary),
),
// AppBar: Transparent / Glass
@@ -57,18 +87,19 @@ class AppTheme {
elevation: 0,
centerTitle: true,
scrolledUnderElevation: 0,
titleTextStyle: GoogleFonts.inter(
fontSize: 17,
titleTextStyle: GoogleFonts.outfit(
fontSize: 20,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
),
),
// Inputs: Dark, minimal, no borders unless focused
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: AppColors.surface,
contentPadding: const EdgeInsets.symmetric(horizontal: spacing24, vertical: spacing16),
contentPadding: const EdgeInsets.symmetric(
horizontal: spacing24, vertical: spacing16),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(radiusMd),
borderSide: BorderSide.none,
@@ -83,7 +114,7 @@ class AppTheme {
),
hintStyle: GoogleFonts.inter(color: AppColors.textTertiary),
),
// Buttons: White pill or minimal text
filledButtonTheme: FilledButtonThemeData(
style: FilledButton.styleFrom(
@@ -91,17 +122,21 @@ class AppTheme {
foregroundColor: Colors.black, // Black text
elevation: 0,
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(radiusMd)),
textStyle: GoogleFonts.inter(fontWeight: FontWeight.w600, fontSize: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radiusMd)),
textStyle:
GoogleFonts.inter(fontWeight: FontWeight.w600, fontSize: 16),
).copyWith(
overlayColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.hovered)) return Colors.black.withOpacity(0.1);
if (states.contains(WidgetState.pressed)) return Colors.black.withOpacity(0.2);
if (states.contains(WidgetState.hovered))
return Colors.black.withOpacity(0.1);
if (states.contains(WidgetState.pressed))
return Colors.black.withOpacity(0.2);
return null;
}),
),
),
// Cards: Transparent by default (content defines look)
// cardTheme: const CardTheme(
// color: AppColors.surface,
@@ -124,8 +159,9 @@ class AppTheme {
static const double radiusFull = 999.0;
// Light theme stub
static ThemeData get lightTheme => ThemeData.light(useMaterial3: true).copyWith(
colorScheme: AppColors.lightColorScheme,
textTheme: GoogleFonts.interTextTheme(ThemeData.light().textTheme),
);
static ThemeData get lightTheme =>
ThemeData.light(useMaterial3: true).copyWith(
colorScheme: AppColors.lightColorScheme,
textTheme: GoogleFonts.interTextTheme(ThemeData.light().textTheme),
);
}
lib/core/widgets/glass_container.dart
+16 -2
View File
@@ -35,11 +35,10 @@ class GlassContainer extends StatelessWidget {
child: ClipRRect(
borderRadius: BorderRadius.circular(borderRadius),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
child: Container(
padding: padding,
decoration: BoxDecoration(
color: AppColors.surface.withOpacity(opacity),
borderRadius: BorderRadius.circular(borderRadius),
border: border
? Border.all(
@@ -47,6 +46,21 @@ class GlassContainer extends StatelessWidget {
width: 1,
)
: null,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
AppColors.surface.withOpacity(opacity),
AppColors.surface.withOpacity(opacity * 0.5),
],
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 20,
spreadRadius: -5,
),
],
),
child: child,
),
lib/core/widgets/hero_carousel.dart
+308
View File
@@ -0,0 +1,308 @@
import 'dart:async';
import 'package:flutter/material.dart';
import '../theme/app_colors.dart';
import 'glass_container.dart';
import 'tv_focusable_card.dart';
import 'package:google_fonts/google_fonts.dart';
class HeroCarouselItem {
final String id;
final String title;
final String? subtitle;
final String? imageUrl;
final VoidCallback? onTap;
final VoidCallback? onPlay;
HeroCarouselItem({
required this.id,
required this.title,
this.subtitle,
this.imageUrl,
this.onTap,
this.onPlay,
});
}
class HeroCarousel extends StatefulWidget {
final List<HeroCarouselItem> items;
final bool autoPlay;
const HeroCarousel({
super.key,
required this.items,
this.autoPlay = true,
});
@override
State<HeroCarousel> createState() => _HeroCarouselState();
}
class _HeroCarouselState extends State<HeroCarousel> {
late PageController _pageController;
int _currentIndex = 0;
Timer? _timer;
@override
void initState() {
super.initState();
_pageController = PageController();
if (widget.autoPlay) {
_startAutoPlay();
}
}
void _startAutoPlay() {
_timer = Timer.periodic(const Duration(seconds: 8), (timer) {
if (_currentIndex < widget.items.length - 1) {
_currentIndex++;
} else {
_currentIndex = 0;
}
if (_pageController.hasClients) {
_pageController.animateToPage(
_currentIndex,
duration: const Duration(milliseconds: 800),
curve: Curves.fastOutSlowIn,
);
}
});
}
@override
void dispose() {
_timer?.cancel();
_pageController.dispose();
super.dispose();
}
String? _getProxiedUrl(String? url) {
if (url == null || url.isEmpty) return null;
if (url.startsWith('http')) {
return '/api/xtream/$url';
}
return url;
}
@override
Widget build(BuildContext context) {
if (widget.items.isEmpty) return const SizedBox.shrink();
return SizedBox(
height: 500, // Cinematic height
child: Stack(
children: [
// Carousel
PageView.builder(
controller: _pageController,
onPageChanged: (index) {
setState(() => _currentIndex = index);
},
itemCount: widget.items.length,
itemBuilder: (context, index) {
final item = widget.items[index];
return _buildHeroSlide(item);
},
),
// Indicators
Positioned(
bottom: 24,
right: 48,
child: Row(
children: List.generate(
widget.items.length,
(index) => AnimatedContainer(
duration: const Duration(milliseconds: 300),
margin: const EdgeInsets.symmetric(horizontal: 4),
width: _currentIndex == index ? 24 : 8,
height: 8,
decoration: BoxDecoration(
color: _currentIndex == index
? AppColors.primary
: Colors.white.withOpacity(0.3),
borderRadius: BorderRadius.circular(4),
),
),
),
),
),
],
),
);
}
Widget _buildHeroSlide(HeroCarouselItem item) {
return Stack(
fit: StackFit.expand,
children: [
// Background Image with Ken Burns Effect (Simulated via Scale in future, static for now)
if (item.imageUrl != null && item.imageUrl!.isNotEmpty)
Image.network(
_getProxiedUrl(item.imageUrl)!,
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => Container(color: AppColors.surface),
),
// Gradient Overlays
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
AppColors.background.withOpacity(0.2),
AppColors.background.withOpacity(0.9),
AppColors.background,
],
stops: const [0.0, 0.5, 0.8, 1.0],
),
),
),
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: [
Colors.transparent,
AppColors.background.withOpacity(0.8),
],
),
),
),
// Content Info
Padding(
padding: const EdgeInsets.all(48.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Category Tag
Container(
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: AppColors.primary.withOpacity(0.2),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: AppColors.primary.withOpacity(0.5)),
),
child: Text(
'FEATURED',
style: GoogleFonts.inter(
color: AppColors.primary,
fontWeight: FontWeight.bold,
fontSize: 12,
letterSpacing: 1.5,
),
),
),
const SizedBox(height: 16),
// Title
SizedBox(
width: 600,
child: Text(
item.title,
style: GoogleFonts.outfit(
fontSize: 48,
fontWeight: FontWeight.bold,
color: Colors.white,
height: 1.1,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
if (item.subtitle != null) ...[
const SizedBox(height: 8),
Text(
item.subtitle!,
style: GoogleFonts.inter(
color: AppColors.textSecondary,
fontSize: 18,
),
),
],
const SizedBox(height: 24),
// Actions
Row(
children: [
TvFocusableCard(
onTap: item.onPlay,
borderRadius: 50,
scaleFactor: 1.1,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 32,
vertical: 16,
),
decoration: BoxDecoration(
gradient: AppColors.primaryGradient,
borderRadius: BorderRadius.circular(50),
boxShadow: [
BoxShadow(
color: AppColors.primary.withOpacity(0.4),
blurRadius: 20,
offset: const Offset(0, 5),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.play_arrow_rounded,
color: Colors.white),
const SizedBox(width: 8),
Text(
'WATCH NOW',
style: GoogleFonts.inter(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 16,
),
),
],
),
),
),
const SizedBox(width: 20),
TvFocusableCard(
onTap: item.onTap, // Add to favorites or details
borderRadius: 50,
child: GlassContainer(
borderRadius: 50,
padding: const EdgeInsets.symmetric(
horizontal: 24,
vertical: 16,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.info_outline, color: Colors.white),
const SizedBox(width: 8),
Text(
'DETAILS',
style: GoogleFonts.inter(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 16,
),
),
],
),
),
),
],
),
const SizedBox(height: 48), // Bottom padding
],
),
),
],
);
}
}
lib/core/widgets/tv_focusable_card.dart
+63 -41
View File
@@ -64,50 +64,72 @@ class _TvFocusableCardState extends State<TvFocusableCard>
}
}
bool _isHovered = false;
void _handleHover(bool isHovered) {
setState(() {
_isHovered = isHovered;
});
if (isHovered || _isFocused) {
_controller.forward();
} else {
_controller.reverse();
}
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _scaleAnimation,
builder: (context, child) {
return Transform.scale(
scale: _scaleAnimation.value,
child: child,
);
},
child: InkWell(
onTap: widget.onTap,
onFocusChange: _handleFocusChange,
autofocus: widget.autofocus,
borderRadius: BorderRadius.circular(widget.borderRadius),
focusColor: Colors.transparent, // We handle visual focus manually
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(widget.borderRadius),
border: _isFocused
? Border.all(
color: widget.focusColor ?? AppColors.focusBorder,
width: 3,
)
: Border.all(color: Colors.transparent, width: 3),
boxShadow: _isFocused
? [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 20,
offset: const Offset(0, 10),
),
BoxShadow(
color: (widget.focusColor ?? AppColors.focusBorder).withOpacity(0.2),
blurRadius: 10,
spreadRadius: 1,
),
]
: [],
final isActive = _isFocused || _isHovered;
return MouseRegion(
onEnter: (_) => _handleHover(true),
onExit: (_) => _handleHover(false),
cursor: SystemMouseCursors.click,
child: AnimatedBuilder(
animation: _scaleAnimation,
builder: (context, child) {
return Transform.scale(
scale: _scaleAnimation.value,
child: child,
);
},
child: InkWell(
onTap: widget.onTap,
onFocusChange: _handleFocusChange,
autofocus: widget.autofocus,
borderRadius: BorderRadius.circular(widget.borderRadius),
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(widget.borderRadius),
border: isActive
? Border.all(
color: widget.focusColor ?? AppColors.focusBorder,
width: 2, // Slightly thinner for cleaner look
)
: Border.all(color: Colors.transparent, width: 2),
boxShadow: isActive
? [
BoxShadow(
color: Colors.black.withOpacity(0.5),
blurRadius: 25,
offset: const Offset(0, 10),
spreadRadius: 2,
),
BoxShadow(
color: (widget.focusColor ?? AppColors.focusBorder)
.withOpacity(0.3),
blurRadius: 15,
spreadRadius: 1,
),
]
: [],
),
child: widget.child,
),
child: widget.child,
),
),
);