mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-18 04:39:41 +02:00
feat: security hardening, streaming overhaul, design polish, tests
Security: - Replace unsalted SHA-256 password hashing with bcrypt (lazy rehash on login) - Add authenticated /api/xtream-api gateway: Xtream credentials are injected server-side and never sent to the frontend; /api/playlists no longer returns passwords - Redact credentials from all logs (login body, proxy/FFmpeg/scheduler URLs) - Add auth to recordings, EPG, season-passes and streaming routes (HttpOnly session cookie for hls.js; loopback bypass for local FFmpeg) - Lock player postMessage to same-origin in both directions - Vendor and pin hls.js 1.6.7 / mpegts.js 1.7.3 (drop CDN @latest) - Fix rate limiter (client IP was never resolved), add login rate limit, restrict CORS, add CSP Report-Only, block private-IP SSRF targets, fix path traversal in recording log retrieval, chmod 777 -> 770 - Remove dead HiveService (seeded admin/admin into IndexedDB with SHA-256) - Fix authMiddleware not populating 'user' context (getPlaylist ignored the logged-in user; admin purge always returned 403) Streaming: - New FfmpegSessionManager: process registry, idle reaper (4 min live / 15 min VOD), orphan cleanup at startup, clean SIGTERM shutdown, fast-fail with stderr instead of 30 s timeout - Quality selection (source/high/medium/low) for live and VOD; source mode streams with -c:v copy (zero transcoding); selector wired into the player - Concurrent recordings (MAX_CONCURRENT_RECORDINGS, default 2); conflicts retry on the next tick instead of silently failing - Lower live latency (HLS window 20 -> 10 segments, liveSync 10 -> 3) - Fix recording log lookup (.mp4 vs .mkv mismatch) Design: - Replace hardcoded colors with AppColors tokens (12 files) - web/theme.css syncs HTML players with the Flutter palette - DPAD/keyboard navigation (arrow-key focus, player shortcuts) - Tooltips on player icon buttons, Semantics on content cards - Remove 7 dead widgets broken since the Stitch merge Quality: - bin/test/: 21 unit tests (bcrypt, redaction, traversal, SSRF, recording conflicts) plus a quality-selector widget test - GitHub Actions CI (analyze + test + build web) - Archive stale status docs into docs/archive/ Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Fable 5 committed
1 parent
cb5eca7547
commit
60d3f42901
107 files changed
+4525
-3815
No files matched your search
@@ -1,4 +1,5 @@
|
||||
import 'package:dio/dio.dart';
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'dart:html' as html;
|
||||
|
||||
/// API Client for communicating with the backend
|
||||
@@ -17,11 +18,14 @@ class ApiClient {
|
||||
receiveTimeout: const Duration(seconds: 60),
|
||||
),);
|
||||
|
||||
// Add interceptor for logging
|
||||
_dio.interceptors.add(LogInterceptor(
|
||||
requestBody: true,
|
||||
responseBody: true,
|
||||
),);
|
||||
// Debug-only logging; request bodies are never logged (login payloads
|
||||
// contain passwords).
|
||||
if (kDebugMode) {
|
||||
_dio.interceptors.add(LogInterceptor(
|
||||
requestBody: false,
|
||||
responseBody: false,
|
||||
),);
|
||||
}
|
||||
|
||||
// Restore token from localStorage on initialization
|
||||
_restoreTokenFromStorage();
|
||||
|
||||
@@ -1,118 +0,0 @@
|
||||
import 'dart:convert';
|
||||
import 'package:crypto/crypto.dart';
|
||||
import 'package:hive_flutter/hive_flutter.dart';
|
||||
import 'package:uuid/uuid.dart';
|
||||
import '../models/app_user.dart';
|
||||
import '../models/playlist_config.dart';
|
||||
|
||||
class HiveService {
|
||||
static const String _usersBoxName = 'users';
|
||||
static const String _playlistsBoxName = 'playlists';
|
||||
|
||||
static bool _initialized = false;
|
||||
static List<int>? _encryptionKey;
|
||||
|
||||
/// Initialize Hive for Web with encryption
|
||||
static Future<void> init() async {
|
||||
if (_initialized) return;
|
||||
|
||||
// Initialize Hive for Web (uses IndexedDB)
|
||||
await Hive.initFlutter();
|
||||
|
||||
// Register adapters
|
||||
Hive.registerAdapter(AppUserAdapter());
|
||||
Hive.registerAdapter(PlaylistConfigAdapter());
|
||||
|
||||
// Open boxes WITHOUT encryption on Web
|
||||
// Note: On Web, IndexedDB is already isolated by origin,
|
||||
// and session-based encryption keys cause decrypt errors on reload
|
||||
await Hive.openBox<AppUser>(_usersBoxName);
|
||||
await Hive.openBox<PlaylistConfig>(_playlistsBoxName);
|
||||
|
||||
// Seed default admin if no users exist
|
||||
await _seedDefaultAdmin();
|
||||
|
||||
_initialized = true;
|
||||
}
|
||||
|
||||
/// Get or create 256-bit encryption key (web-compatible)
|
||||
static Future<List<int>> _getOrCreateEncryptionKey() async {
|
||||
// For web: use session-based key (regenerated each session)
|
||||
// Note: Data persists in IndexedDB but encryption key is not stored
|
||||
if (_encryptionKey != null) {
|
||||
return _encryptionKey!;
|
||||
}
|
||||
|
||||
// Generate new 256-bit key
|
||||
_encryptionKey = Hive.generateSecureKey();
|
||||
|
||||
return _encryptionKey!;
|
||||
}
|
||||
|
||||
/// Seed default admin user (admin/admin)
|
||||
static Future<void> _seedDefaultAdmin() async {
|
||||
final usersBox = Hive.box<AppUser>(_usersBoxName);
|
||||
|
||||
if (usersBox.isEmpty) {
|
||||
final adminId = const Uuid().v4();
|
||||
final passwordHash = _hashPassword('admin');
|
||||
|
||||
final admin = AppUser(
|
||||
id: adminId,
|
||||
username: 'admin',
|
||||
passwordHash: passwordHash,
|
||||
isAdmin: true,
|
||||
assignedPlaylistIds: const [],
|
||||
createdAt: DateTime.now(),
|
||||
);
|
||||
|
||||
await usersBox.put(adminId, admin);
|
||||
}
|
||||
}
|
||||
|
||||
/// Hash password using SHA-256 with salt
|
||||
static String _hashPassword(String password) {
|
||||
// Generate a random salt using the first 16 chars of a UUID
|
||||
final salt = const Uuid().v4().substring(0, 16);
|
||||
final bytes = utf8.encode(password + salt);
|
||||
final digest = sha256.convert(bytes);
|
||||
return '$salt:${digest.toString()}';
|
||||
}
|
||||
|
||||
/// Verify password against stored hash
|
||||
static bool verifyPassword(String password, String storedHash) {
|
||||
try {
|
||||
final parts = storedHash.split(':');
|
||||
if (parts.length != 2) {
|
||||
// Legacy hash without salt - fallback to direct comparison
|
||||
final legacyHash = sha256.convert(utf8.encode(password)).toString();
|
||||
return legacyHash == storedHash;
|
||||
}
|
||||
|
||||
final salt = parts[0];
|
||||
final expectedHash = parts[1];
|
||||
final bytes = utf8.encode(password + salt);
|
||||
final actualHash = sha256.convert(bytes).toString();
|
||||
|
||||
return actualHash == expectedHash;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/// Public method to hash passwords (used by auth)
|
||||
static String hashPassword(String password) => _hashPassword(password);
|
||||
|
||||
/// Get users box
|
||||
static Box<AppUser> get usersBox => Hive.box<AppUser>(_usersBoxName);
|
||||
|
||||
/// Get playlists box
|
||||
static Box<PlaylistConfig> get playlistsBox =>
|
||||
Hive.box<PlaylistConfig>(_playlistsBoxName);
|
||||
|
||||
/// Close all boxes (cleanup)
|
||||
static Future<void> dispose() async {
|
||||
await Hive.close();
|
||||
_initialized = false;
|
||||
}
|
||||
}
|
||||
@@ -1,346 +0,0 @@
|
||||
/// Adaptive Bitrate (ABR) Streaming Handler for HLS
|
||||
///
|
||||
/// Supports multi-bitrate HLS playlists for adaptive streaming
|
||||
/// with fallback options for poor network conditions
|
||||
library;
|
||||
|
||||
/// Represents a video quality level for adaptive bitrate streaming
|
||||
class QualityLevel {
|
||||
final String resolution;
|
||||
final int bitrateBps;
|
||||
final int width;
|
||||
final int height;
|
||||
final String ffmpegPreset; // ultrafast, fast, medium, slow
|
||||
final String label;
|
||||
|
||||
const QualityLevel({
|
||||
required this.resolution,
|
||||
required this.bitrateBps,
|
||||
required this.width,
|
||||
required this.height,
|
||||
this.ffmpegPreset = 'medium',
|
||||
required this.label,
|
||||
});
|
||||
|
||||
/// Get FFmpeg video bitrate argument
|
||||
String get videoBitrateArg => '${(bitrateBps * 0.75).toInt() ~/ 1000}k';
|
||||
|
||||
/// Get FFmpeg maxrate argument (150% of bitrate)
|
||||
String get maxRateArg => '${((bitrateBps * 1.5).toInt() ~/ 1000)}k';
|
||||
|
||||
/// Get FFmpeg buffer size argument
|
||||
String get bufferSizeArg => '${((bitrateBps * 2).toInt() ~/ 1000)}k';
|
||||
|
||||
@override
|
||||
String toString() => '$label ($resolution - ${bitrateBps ~/ 1000000}Mbps)';
|
||||
}
|
||||
|
||||
/// Standard quality profiles for adaptive streaming
|
||||
class QualityProfiles {
|
||||
// Mobile & Low Bandwidth
|
||||
static const mobile240p = QualityLevel(
|
||||
resolution: '426x240',
|
||||
bitrateBps: 500000, // 0.5 Mbps
|
||||
width: 426,
|
||||
height: 240,
|
||||
ffmpegPreset: 'ultrafast',
|
||||
label: '240p (Low)',
|
||||
);
|
||||
|
||||
static const mobile360p = QualityLevel(
|
||||
resolution: '640x360',
|
||||
bitrateBps: 1200000, // 1.2 Mbps
|
||||
width: 640,
|
||||
height: 360,
|
||||
ffmpegPreset: 'ultrafast',
|
||||
label: '360p (Mobile)',
|
||||
);
|
||||
|
||||
// Standard Quality
|
||||
static const hd480p = QualityLevel(
|
||||
resolution: '854x480',
|
||||
bitrateBps: 2500000, // 2.5 Mbps
|
||||
width: 854,
|
||||
height: 480,
|
||||
ffmpegPreset: 'fast',
|
||||
label: '480p (SD)',
|
||||
);
|
||||
|
||||
static const hd720p = QualityLevel(
|
||||
resolution: '1280x720',
|
||||
bitrateBps: 5000000, // 5 Mbps
|
||||
width: 1280,
|
||||
height: 720,
|
||||
ffmpegPreset: 'medium',
|
||||
label: '720p (HD)',
|
||||
);
|
||||
|
||||
// High Quality
|
||||
static const fhd1080p = QualityLevel(
|
||||
resolution: '1920x1080',
|
||||
bitrateBps: 8000000, // 8 Mbps
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
ffmpegPreset: 'medium',
|
||||
label: '1080p (Full HD)',
|
||||
);
|
||||
|
||||
// Ultra HD
|
||||
static const uhd2k = QualityLevel(
|
||||
resolution: '2560x1440',
|
||||
bitrateBps: 15000000, // 15 Mbps
|
||||
width: 2560,
|
||||
height: 1440,
|
||||
ffmpegPreset: 'slow',
|
||||
label: '2K (QHD)',
|
||||
);
|
||||
|
||||
static const uhd4k = QualityLevel(
|
||||
resolution: '3840x2160',
|
||||
bitrateBps: 25000000, // 25 Mbps
|
||||
width: 3840,
|
||||
height: 2160,
|
||||
ffmpegPreset: 'slow',
|
||||
label: '4K',
|
||||
);
|
||||
|
||||
/// Get default profiles for balanced streaming
|
||||
static List<QualityLevel> getBalancedProfiles() => [
|
||||
mobile240p,
|
||||
mobile360p,
|
||||
hd480p,
|
||||
hd720p,
|
||||
fhd1080p,
|
||||
];
|
||||
|
||||
/// Get all available profiles
|
||||
static List<QualityLevel> getAllProfiles() => [
|
||||
mobile240p,
|
||||
mobile360p,
|
||||
hd480p,
|
||||
hd720p,
|
||||
fhd1080p,
|
||||
uhd2k,
|
||||
uhd4k,
|
||||
];
|
||||
|
||||
/// Get profiles suitable for streaming type
|
||||
static List<QualityLevel> getProfiles({
|
||||
required String type, // 'live', 'vod', 'low-bandwidth'
|
||||
int? maxBitrateBps,
|
||||
}) {
|
||||
List<QualityLevel> profiles = getBalancedProfiles();
|
||||
|
||||
// Filter by streaming type
|
||||
if (type == 'live') {
|
||||
// Live TV prefers lower bitrates for stability
|
||||
profiles = [mobile240p, mobile360p, hd480p, hd720p];
|
||||
} else if (type == 'low-bandwidth') {
|
||||
// Mobile/low bandwidth - only lower profiles
|
||||
profiles = [mobile240p, mobile360p, hd480p];
|
||||
}
|
||||
|
||||
// Filter by max bitrate if specified
|
||||
if (maxBitrateBps != null) {
|
||||
profiles = profiles.where((p) => p.bitrateBps <= maxBitrateBps).toList();
|
||||
}
|
||||
|
||||
// Ensure at least one profile
|
||||
if (profiles.isEmpty) {
|
||||
profiles = [mobile240p];
|
||||
}
|
||||
|
||||
return profiles;
|
||||
}
|
||||
}
|
||||
|
||||
/// Bandwidth detector for adaptive bitrate selection
|
||||
class BandwidthDetector {
|
||||
final _samples = <DateTime, int>{}; // timestamp -> bytes downloaded
|
||||
final int _totalBytesLastPeriod = 0;
|
||||
final Duration _sampleWindow = const Duration(seconds: 10);
|
||||
|
||||
/// Record bytes downloaded at current time
|
||||
void recordBytes(int bytes) {
|
||||
final now = DateTime.now();
|
||||
_samples[now] = bytes;
|
||||
|
||||
// Clean up old samples
|
||||
final cutoff = now.subtract(_sampleWindow);
|
||||
_samples.removeWhere((time, _) => time.isBefore(cutoff));
|
||||
}
|
||||
|
||||
/// Estimate current bandwidth in bps
|
||||
int estimateBandwidthBps() {
|
||||
if (_samples.isEmpty) return 0;
|
||||
|
||||
int totalBytes = 0;
|
||||
for (var bytes in _samples.values) {
|
||||
totalBytes += bytes;
|
||||
}
|
||||
|
||||
final timeSpan = DateTime.now()
|
||||
.difference(
|
||||
_samples.keys.reduce((a, b) => a.isBefore(b) ? a : b),
|
||||
)
|
||||
.inMilliseconds;
|
||||
|
||||
if (timeSpan == 0) return 0;
|
||||
|
||||
// bytes per second * 8 = bits per second
|
||||
return ((totalBytes / (timeSpan / 1000)) * 8).toInt();
|
||||
}
|
||||
|
||||
/// Get estimated bandwidth in Mbps
|
||||
double estimateBandwidthMbps() {
|
||||
return estimateBandwidthBps() / 1000000;
|
||||
}
|
||||
|
||||
/// Select best quality level based on bandwidth
|
||||
static QualityLevel selectBestQuality(
|
||||
int bandwidthBps,
|
||||
List<QualityLevel> availableProfiles,
|
||||
) {
|
||||
// Use 75% of detected bandwidth for conservative selection
|
||||
final targetBitrate = (bandwidthBps * 0.75).toInt();
|
||||
|
||||
// Find highest quality that fits our bandwidth
|
||||
var best = availableProfiles[0];
|
||||
for (final profile in availableProfiles) {
|
||||
if (profile.bitrateBps <= targetBitrate) {
|
||||
best = profile;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return best;
|
||||
}
|
||||
}
|
||||
|
||||
/// Master playlist generator for HLS variant streams
|
||||
class HlsMasterPlaylistGenerator {
|
||||
/// Generate M3U8 master playlist with multiple quality variants
|
||||
static String generateMasterPlaylist({
|
||||
required List<QualityLevel> qualityLevels,
|
||||
required String baseUrl,
|
||||
bool includeSubtitles = false,
|
||||
}) {
|
||||
final buffer = StringBuffer();
|
||||
|
||||
// HLS version 3 for compatibility
|
||||
buffer.writeln('#EXTM3U');
|
||||
buffer.writeln('#EXT-X-VERSION:3');
|
||||
buffer.writeln('#EXT-X-TARGET-DURATION:10');
|
||||
buffer.writeln('#EXT-X-MEDIA-SEQUENCE:0');
|
||||
|
||||
// Variant streams (quality levels)
|
||||
for (final quality in qualityLevels) {
|
||||
buffer.writeln('#EXT-X-STREAM-INF:BANDWIDTH=${quality.bitrateBps},'
|
||||
'RESOLUTION=${quality.width}x${quality.height}');
|
||||
buffer
|
||||
.writeln('$baseUrl/variant_${quality.width}x${quality.height}.m3u8');
|
||||
}
|
||||
|
||||
return buffer.toString();
|
||||
}
|
||||
|
||||
/// Generate variant playlist for specific quality level
|
||||
static String generateVariantPlaylist({
|
||||
required String segmentPrefix,
|
||||
required int totalSegments,
|
||||
required double targetDuration,
|
||||
required bool isFinal,
|
||||
}) {
|
||||
final buffer = StringBuffer();
|
||||
|
||||
buffer.writeln('#EXTM3U');
|
||||
buffer.writeln('#EXT-X-VERSION:3');
|
||||
buffer.writeln('#EXT-X-TARGET-DURATION:${targetDuration.ceil()}');
|
||||
buffer.writeln('#EXT-X-MEDIA-SEQUENCE:0');
|
||||
|
||||
// Add segment entries
|
||||
for (int i = 0; i < totalSegments; i++) {
|
||||
buffer.writeln('#EXTINF:$targetDuration,');
|
||||
buffer.writeln('${segmentPrefix}_$i.ts');
|
||||
}
|
||||
|
||||
if (isFinal) {
|
||||
buffer.writeln('#EXT-X-ENDLIST');
|
||||
}
|
||||
|
||||
return buffer.toString();
|
||||
}
|
||||
}
|
||||
|
||||
/// Quality selector based on network conditions
|
||||
class QualitySelector {
|
||||
final _detector = BandwidthDetector();
|
||||
QualityLevel _currentQuality;
|
||||
final _listeners = <VoidCallback>[];
|
||||
|
||||
QualitySelector({
|
||||
required QualityLevel initialQuality,
|
||||
}) : _currentQuality = initialQuality;
|
||||
|
||||
QualityLevel get currentQuality => _currentQuality;
|
||||
|
||||
/// Record bandwidth and auto-adjust quality
|
||||
void recordBandwidth(int bytesDownloaded) {
|
||||
_detector.recordBytes(bytesDownloaded);
|
||||
|
||||
// Check if we should switch quality
|
||||
_maybeAdjustQuality();
|
||||
}
|
||||
|
||||
/// Manually set quality
|
||||
void setQuality(QualityLevel quality) {
|
||||
if (_currentQuality != quality) {
|
||||
_currentQuality = quality;
|
||||
_notifyListeners();
|
||||
}
|
||||
}
|
||||
|
||||
/// Force rebuffer wait before switching down
|
||||
void rebufferDetected() {
|
||||
// Switch to lower quality if rebuffering occurs
|
||||
final allProfiles = QualityProfiles.getAllProfiles();
|
||||
final currentIndex = allProfiles.indexOf(_currentQuality);
|
||||
if (currentIndex > 0) {
|
||||
setQuality(allProfiles[currentIndex - 1]);
|
||||
}
|
||||
}
|
||||
|
||||
void _maybeAdjustQuality() {
|
||||
final bandwidthBps = _detector.estimateBandwidthBps();
|
||||
final availableProfiles = QualityProfiles.getBalancedProfiles();
|
||||
|
||||
// Only switch if significantly different from current
|
||||
final overhead = _currentQuality.bitrateBps * 1.2;
|
||||
if (bandwidthBps > overhead ||
|
||||
bandwidthBps < _currentQuality.bitrateBps * 0.5) {
|
||||
final bestQuality =
|
||||
BandwidthDetector.selectBestQuality(bandwidthBps, availableProfiles);
|
||||
setQuality(bestQuality);
|
||||
}
|
||||
}
|
||||
|
||||
void addListener(VoidCallback listener) {
|
||||
_listeners.add(listener);
|
||||
}
|
||||
|
||||
void removeListener(VoidCallback listener) {
|
||||
_listeners.remove(listener);
|
||||
}
|
||||
|
||||
void _notifyListeners() {
|
||||
for (final listener in _listeners) {
|
||||
listener();
|
||||
}
|
||||
}
|
||||
|
||||
double getEstimatedBandwidthMbps() => _detector.estimateBandwidthMbps();
|
||||
}
|
||||
|
||||
// Type alias for void callback
|
||||
typedef VoidCallback = void Function();
|
||||
@@ -1,267 +0,0 @@
|
||||
import 'dart:async';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import '../../core/services/adaptive_bitrate_service.dart';
|
||||
|
||||
/// Video streaming performance metrics
|
||||
class StreamingMetrics {
|
||||
final double averageNetworkBitrate;
|
||||
final double currentNetworkBitrate;
|
||||
final int bufferDurationMs;
|
||||
final int segmentDownloadTimeMs;
|
||||
final int rebufferCount;
|
||||
final DateTime startTime;
|
||||
final DateTime? endTime;
|
||||
|
||||
StreamingMetrics({
|
||||
required this.averageNetworkBitrate,
|
||||
required this.currentNetworkBitrate,
|
||||
required this.bufferDurationMs,
|
||||
required this.segmentDownloadTimeMs,
|
||||
required this.rebufferCount,
|
||||
required this.startTime,
|
||||
this.endTime,
|
||||
});
|
||||
|
||||
double get totalPlaybackSeconds =>
|
||||
(endTime ?? DateTime.now()).difference(startTime).inSeconds.toDouble();
|
||||
|
||||
double get qualityScore {
|
||||
// Score based on metrics
|
||||
var score = 100.0;
|
||||
|
||||
// Penalize for rebuffering
|
||||
score -= rebufferCount * 10;
|
||||
|
||||
// Penalize for low bitrate
|
||||
if (currentNetworkBitrate < 1000000) score -= 20;
|
||||
if (currentNetworkBitrate < 500000) score -= 30;
|
||||
|
||||
// Reward for smooth playback
|
||||
if (rebufferCount == 0) score += 10;
|
||||
|
||||
return (score).clamp(0, 100);
|
||||
}
|
||||
|
||||
@override
|
||||
String toString() => '''
|
||||
StreamingMetrics:
|
||||
- Avg Bitrate: ${(averageNetworkBitrate / 1000000).toStringAsFixed(2)} Mbps
|
||||
- Current Bitrate: ${(currentNetworkBitrate / 1000000).toStringAsFixed(2)} Mbps
|
||||
- Buffer: ${bufferDurationMs}ms
|
||||
- Segment DL Time: ${segmentDownloadTimeMs}ms
|
||||
- Rebuffers: $rebufferCount
|
||||
- Quality Score: ${qualityScore.toStringAsFixed(1)}
|
||||
- Duration: $totalPlaybackSeconds seconds
|
||||
''';
|
||||
}
|
||||
|
||||
/// Advanced streaming optimizer
|
||||
class StreamingOptimizer {
|
||||
final QualitySelector qualitySelector;
|
||||
final _metrics = <StreamingMetrics>[];
|
||||
late StreamingMetrics _currentMetrics;
|
||||
final StreamController<StreamingMetrics> _metricsController =
|
||||
StreamController.broadcast();
|
||||
late Timer _metricsTimer;
|
||||
|
||||
final int _segmentStartTime = 0;
|
||||
int _totalBytesDownloaded = 0;
|
||||
int _rebufferCount = 0;
|
||||
int _lastBufferNotificationTime = 0;
|
||||
|
||||
StreamingOptimizer({required this.qualitySelector}) {
|
||||
_initializeMetrics();
|
||||
_startMetricsCollection();
|
||||
}
|
||||
|
||||
void _initializeMetrics() {
|
||||
_currentMetrics = StreamingMetrics(
|
||||
averageNetworkBitrate: 0,
|
||||
currentNetworkBitrate: 0,
|
||||
bufferDurationMs: 0,
|
||||
segmentDownloadTimeMs: 0,
|
||||
rebufferCount: 0,
|
||||
startTime: DateTime.now(),
|
||||
);
|
||||
}
|
||||
|
||||
void _startMetricsCollection() {
|
||||
_metricsTimer = Timer.periodic(const Duration(seconds: 5), (timer) {
|
||||
_updateMetrics();
|
||||
});
|
||||
}
|
||||
|
||||
void _updateMetrics() {
|
||||
final bandwidthBps = qualitySelector.getEstimatedBandwidthMbps() * 1000000;
|
||||
_currentMetrics = StreamingMetrics(
|
||||
averageNetworkBitrate: _totalBytesDownloaded > 0
|
||||
? (_totalBytesDownloaded * 8 / _currentMetrics.totalPlaybackSeconds)
|
||||
: 0,
|
||||
currentNetworkBitrate: bandwidthBps,
|
||||
bufferDurationMs: _currentMetrics.bufferDurationMs,
|
||||
segmentDownloadTimeMs: _currentMetrics.segmentDownloadTimeMs,
|
||||
rebufferCount: _rebufferCount,
|
||||
startTime: _currentMetrics.startTime,
|
||||
);
|
||||
|
||||
_metrics.add(_currentMetrics);
|
||||
_metricsController.add(_currentMetrics);
|
||||
}
|
||||
|
||||
/// Record segment download
|
||||
void recordSegmentDownload(int bytes, Duration downloadTime) {
|
||||
_totalBytesDownloaded += bytes;
|
||||
final downloadMs = downloadTime.inMilliseconds;
|
||||
|
||||
_currentMetrics = _currentMetrics;
|
||||
qualitySelector.recordBandwidth(bytes);
|
||||
}
|
||||
|
||||
/// Handle rebuffer event
|
||||
void rebufferDetected(Duration duration) {
|
||||
_rebufferCount++;
|
||||
_lastBufferNotificationTime = DateTime.now().millisecondsSinceEpoch;
|
||||
|
||||
_currentMetrics = StreamingMetrics(
|
||||
averageNetworkBitrate: _currentMetrics.averageNetworkBitrate,
|
||||
currentNetworkBitrate: _currentMetrics.currentNetworkBitrate,
|
||||
bufferDurationMs: duration.inMilliseconds,
|
||||
segmentDownloadTimeMs: _currentMetrics.segmentDownloadTimeMs,
|
||||
rebufferCount: _rebufferCount,
|
||||
startTime: _currentMetrics.startTime,
|
||||
);
|
||||
|
||||
// Auto downgrade quality on rebuffer
|
||||
qualitySelector.rebufferDetected();
|
||||
}
|
||||
|
||||
/// Get current streaming metrics
|
||||
StreamingMetrics getMetrics() => _currentMetrics;
|
||||
|
||||
/// Get metrics stream for real-time monitoring
|
||||
Stream<StreamingMetrics> get metricsStream => _metricsController.stream;
|
||||
|
||||
/// Get metrics history
|
||||
List<StreamingMetrics> getMetricsHistory() => List.from(_metrics);
|
||||
|
||||
/// Finalize streaming session
|
||||
void finalize() {
|
||||
_currentMetrics = StreamingMetrics(
|
||||
averageNetworkBitrate: _currentMetrics.averageNetworkBitrate,
|
||||
currentNetworkBitrate: _currentMetrics.currentNetworkBitrate,
|
||||
bufferDurationMs: _currentMetrics.bufferDurationMs,
|
||||
segmentDownloadTimeMs: _currentMetrics.segmentDownloadTimeMs,
|
||||
rebufferCount: _rebufferCount,
|
||||
startTime: _currentMetrics.startTime,
|
||||
endTime: DateTime.now(),
|
||||
);
|
||||
}
|
||||
|
||||
/// Clean up resources
|
||||
void dispose() {
|
||||
_metricsTimer.cancel();
|
||||
_metricsController.close();
|
||||
}
|
||||
}
|
||||
|
||||
/// Buffer size calculator for adaptive streaming
|
||||
class BufferCalculator {
|
||||
static const _minBufferMs = 1000; // 1 second
|
||||
static const _targetBufferMs = 8000; // 8 seconds
|
||||
static const _maxBufferMs = 30000; // 30 seconds
|
||||
|
||||
/// Calculate optimal buffer size based on bandwidth
|
||||
static int calculateOptimalBuffer(
|
||||
int estimatedBandwidthBps,
|
||||
int bitrateOfCurrentQuality,
|
||||
) {
|
||||
// Rule: buffer should be able to hold 8 seconds worth of content
|
||||
final neededBytes = (bitrateOfCurrentQuality * _targetBufferMs) ~/ 8000;
|
||||
final availableBytes = (estimatedBandwidthBps * _targetBufferMs) ~/ 8000;
|
||||
|
||||
// If we can't sustain the bitrate + have buffer, reduce target
|
||||
if (availableBytes < neededBytes) {
|
||||
return _minBufferMs;
|
||||
}
|
||||
|
||||
// Normal case
|
||||
return _targetBufferMs;
|
||||
}
|
||||
|
||||
/// Calculate recommended segment duration
|
||||
static Duration calculateSegmentDuration(int estimatedBandwidthBps) {
|
||||
if (estimatedBandwidthBps < 500000) {
|
||||
// Very low bandwidth: shorter segments
|
||||
return const Duration(seconds: 2);
|
||||
} else if (estimatedBandwidthBps < 2000000) {
|
||||
// Low bandwidth
|
||||
return const Duration(seconds: 4);
|
||||
} else {
|
||||
// Good bandwidth
|
||||
return const Duration(seconds: 6);
|
||||
}
|
||||
}
|
||||
|
||||
/// Calculate maximum playback quality
|
||||
static QualityLevel selectQualityForBandwidth(
|
||||
int estimatedBandwidthBps,
|
||||
) {
|
||||
final availableProfiles = QualityProfiles.getBalancedProfiles();
|
||||
return BandwidthDetector.selectBestQuality(
|
||||
estimatedBandwidthBps,
|
||||
availableProfiles,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Riverpod providers
|
||||
|
||||
final streamingOptimizerProvider =
|
||||
StateNotifierProvider<StreamingOptimizerNotifier, StreamingMetrics>((ref) {
|
||||
final qualitySelector = ref.watch(qualitySelectorProvider);
|
||||
return StreamingOptimizerNotifier(qualitySelector);
|
||||
});
|
||||
|
||||
final qualitySelectorProvider = Provider<QualitySelector>((ref) {
|
||||
return QualitySelector(initialQuality: QualityProfiles.hd720p);
|
||||
});
|
||||
|
||||
class StreamingOptimizerNotifier extends StateNotifier<StreamingMetrics> {
|
||||
final QualitySelector _qualitySelector;
|
||||
late StreamingOptimizer _optimizer;
|
||||
|
||||
StreamingOptimizerNotifier(this._qualitySelector)
|
||||
: super(
|
||||
StreamingMetrics(
|
||||
averageNetworkBitrate: 0,
|
||||
currentNetworkBitrate: 0,
|
||||
bufferDurationMs: 0,
|
||||
segmentDownloadTimeMs: 0,
|
||||
rebufferCount: 0,
|
||||
startTime: DateTime.now(),
|
||||
),
|
||||
) {
|
||||
_optimizer = StreamingOptimizer(qualitySelector: _qualitySelector);
|
||||
|
||||
// Listen to metrics updates
|
||||
_optimizer.metricsStream.listen((metrics) {
|
||||
state = metrics;
|
||||
});
|
||||
}
|
||||
|
||||
void recordSegmentDownload(int bytes, Duration duration) {
|
||||
_optimizer.recordSegmentDownload(bytes, duration);
|
||||
}
|
||||
|
||||
void rebufferDetected(Duration duration) {
|
||||
_optimizer.rebufferDetected(duration);
|
||||
}
|
||||
|
||||
List<StreamingMetrics> getHistory() => _optimizer.getMetricsHistory();
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_optimizer.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
@@ -14,8 +14,8 @@ class ThemedLoading extends StatelessWidget {
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
Color(0xFF0F1014), // Deep Space Dark
|
||||
Color(0xFF121317), // Stitch background
|
||||
AppColors.baseLevel0,
|
||||
AppColors.background,
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -24,7 +24,7 @@ class ThemedLoading extends StatelessWidget {
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const CircularProgressIndicator(
|
||||
color: Color(0xFF4b8eff), // AppColors.primaryContainer
|
||||
color: AppColors.primaryContainer,
|
||||
strokeWidth: 3,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
|
||||
/// Apple TV Modern Channel Grid
|
||||
///
|
||||
/// Responsive grid layout for channels with:
|
||||
/// - Flexible column count based on screen size
|
||||
/// - Smooth animations
|
||||
/// - Focus-aware spacing
|
||||
class TvChannelGrid extends StatelessWidget {
|
||||
final List<Widget> children;
|
||||
final EdgeInsetsGeometry padding;
|
||||
final double horizontalSpacing;
|
||||
final double verticalSpacing;
|
||||
final ScrollController? scrollController;
|
||||
final ScrollPhysics physics;
|
||||
|
||||
const TvChannelGrid({
|
||||
super.key,
|
||||
required this.children,
|
||||
this.padding = const EdgeInsets.fromLTRB(32, 24, 32, 32),
|
||||
this.horizontalSpacing = 20,
|
||||
this.verticalSpacing = 20,
|
||||
this.scrollController,
|
||||
this.physics = const AlwaysScrollableScrollPhysics(),
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final screenWidth = MediaQuery.of(context).size.width;
|
||||
|
||||
// Guard: during first Flutter Web layout pass, size may be 0 or NaN.
|
||||
// LayoutBuilder will re-trigger build once the real size is known.
|
||||
if (screenWidth <= 0 || screenWidth.isNaN || screenWidth.isInfinite) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
// Responsive column count
|
||||
final int columnCount;
|
||||
if (screenWidth > 1920) {
|
||||
columnCount = 6;
|
||||
} else if (screenWidth > 1600) {
|
||||
columnCount = 5;
|
||||
} else if (screenWidth > 1280) {
|
||||
columnCount = 4;
|
||||
} else if (screenWidth > 960) {
|
||||
columnCount = 3;
|
||||
} else {
|
||||
columnCount = 2;
|
||||
}
|
||||
|
||||
// Calculate horizontal padding safely using resolved EdgeInsets.
|
||||
final resolvedPadding = padding.resolve(TextDirection.ltr);
|
||||
final horizontalPadding = resolvedPadding.left + resolvedPadding.right;
|
||||
|
||||
// Compute item width, clamped to avoid negative/NaN values.
|
||||
final totalSpacing = horizontalSpacing * (columnCount - 1);
|
||||
final availableWidth = screenWidth - horizontalPadding - totalSpacing;
|
||||
final itemWidth =
|
||||
(availableWidth / columnCount).clamp(1.0, double.infinity);
|
||||
|
||||
return SingleChildScrollView(
|
||||
controller: scrollController,
|
||||
physics: physics,
|
||||
padding: padding,
|
||||
child: Wrap(
|
||||
spacing: horizontalSpacing,
|
||||
runSpacing: verticalSpacing,
|
||||
children: [
|
||||
for (int i = 0; i < children.length; i++)
|
||||
SizedBox(
|
||||
width: itemWidth,
|
||||
child: children[i],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Apple TV Modern Horizontal Scrollable List
|
||||
class TvHorizontalList extends StatelessWidget {
|
||||
final List<Widget> children;
|
||||
final String? title;
|
||||
final EdgeInsetsGeometry padding;
|
||||
final double itemWidth;
|
||||
final double spacing;
|
||||
final ScrollController? scrollController;
|
||||
|
||||
const TvHorizontalList({
|
||||
super.key,
|
||||
required this.children,
|
||||
this.title,
|
||||
this.padding = const EdgeInsets.symmetric(vertical: 16),
|
||||
this.itemWidth = 200,
|
||||
this.spacing = 16,
|
||||
this.scrollController,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Title
|
||||
if (title != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppTheme.spacing32,
|
||||
vertical: AppTheme.spacing16,
|
||||
),
|
||||
child: Text(
|
||||
title!,
|
||||
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Horizontal list
|
||||
SizedBox(
|
||||
height: 280,
|
||||
child: ListView.separated(
|
||||
controller: scrollController,
|
||||
scrollDirection: Axis.horizontal,
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: 32,
|
||||
// Resolve EdgeInsetsGeometry to a concrete EdgeInsets before
|
||||
// accessing vertical — casting EdgeInsetsGeometry to double throws.
|
||||
vertical: padding.resolve(TextDirection.ltr).top,
|
||||
),
|
||||
itemCount: children.length,
|
||||
separatorBuilder: (_, __) => SizedBox(width: spacing),
|
||||
itemBuilder: (context, index) => SizedBox(
|
||||
width: itemWidth,
|
||||
child: children[index],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -14,6 +14,9 @@ class TvFocusableCard extends StatefulWidget {
|
||||
final bool autofocus;
|
||||
final double borderRadius;
|
||||
|
||||
/// Accessibility label announced by screen readers (e.g. channel title).
|
||||
final String? semanticLabel;
|
||||
|
||||
const TvFocusableCard({
|
||||
super.key,
|
||||
required this.child,
|
||||
@@ -24,6 +27,7 @@ class TvFocusableCard extends StatefulWidget {
|
||||
this.focusColor,
|
||||
this.autofocus = false,
|
||||
this.borderRadius = 12.0,
|
||||
this.semanticLabel,
|
||||
});
|
||||
|
||||
@override
|
||||
@@ -84,7 +88,10 @@ class _TvFocusableCardState extends State<TvFocusableCard>
|
||||
final isActive = _isFocused || _isHovered;
|
||||
final focusColor = widget.focusColor ?? AppColors.primaryContainer;
|
||||
|
||||
return MouseRegion(
|
||||
return Semantics(
|
||||
button: widget.onTap != null,
|
||||
label: widget.semanticLabel,
|
||||
child: MouseRegion(
|
||||
onEnter: (_) => _handleHover(true),
|
||||
onExit: (_) => _handleHover(false),
|
||||
cursor: SystemMouseCursors.click,
|
||||
@@ -148,6 +155,7 @@ class _TvFocusableCardState extends State<TvFocusableCard>
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,340 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
import 'glass_container.dart';
|
||||
|
||||
/// Apple TV Modern Content Card
|
||||
///
|
||||
/// Premium card for displaying movies, shows, or other content with:
|
||||
/// - Poster image with skeleton loading
|
||||
/// - Title and metadata
|
||||
/// - Rating/score display
|
||||
/// - Interactive hover states
|
||||
/// - Context menu support
|
||||
class TvModernCard extends StatefulWidget {
|
||||
final String id;
|
||||
final String title;
|
||||
final String? imageUrl;
|
||||
final String? rating;
|
||||
final String? year;
|
||||
final String? badge;
|
||||
final Color? badgeColor;
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onPlayTap;
|
||||
final VoidCallback? onMoreTap;
|
||||
final bool isWatching;
|
||||
final double? progress;
|
||||
|
||||
const TvModernCard({
|
||||
super.key,
|
||||
required this.id,
|
||||
required this.title,
|
||||
this.imageUrl,
|
||||
this.rating,
|
||||
this.year,
|
||||
this.badge,
|
||||
this.badgeColor,
|
||||
this.onTap,
|
||||
this.onPlayTap,
|
||||
this.onMoreTap,
|
||||
this.isWatching = false,
|
||||
this.progress,
|
||||
});
|
||||
|
||||
@override
|
||||
State<TvModernCard> createState() => _TvModernCardState();
|
||||
}
|
||||
|
||||
class _TvModernCardState extends State<TvModernCard>
|
||||
with SingleTickerProviderStateMixin {
|
||||
bool _isHovered = false;
|
||||
late AnimationController _controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller = AnimationController(
|
||||
vsync: this,
|
||||
duration: AppTheme.durationMd,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MouseRegion(
|
||||
onEnter: (_) {
|
||||
setState(() => _isHovered = true);
|
||||
_controller.forward();
|
||||
},
|
||||
onExit: (_) {
|
||||
setState(() => _isHovered = false);
|
||||
_controller.reverse();
|
||||
},
|
||||
child: GestureDetector(
|
||||
onTap: widget.onTap,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// ============ POSTER IMAGE ============
|
||||
AnimatedScale(
|
||||
scale: _isHovered ? 1.06 : 1.0,
|
||||
duration: AppTheme.durationMd,
|
||||
curve: AppTheme.curveDefault,
|
||||
child: GlassCard(
|
||||
borderRadius: AppTheme.radiusLg,
|
||||
padding: EdgeInsets.zero,
|
||||
interactive: true,
|
||||
onTap: widget.onTap,
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
// Poster image
|
||||
_buildPosterImage(),
|
||||
|
||||
// Overlay
|
||||
if (_isHovered)
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
Colors.transparent,
|
||||
Colors.black.withOpacity(0.7),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Badge
|
||||
if (widget.badge != null)
|
||||
Positioned(
|
||||
top: 12,
|
||||
right: 12,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8,
|
||||
vertical: 4,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: widget.badgeColor ?? AppColors.primary,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: Text(
|
||||
widget.badge!,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.black,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Progress indicator (if watching)
|
||||
if (widget.isWatching && widget.progress != null)
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
height: 3,
|
||||
decoration: const BoxDecoration(
|
||||
borderRadius: BorderRadius.vertical(
|
||||
bottom: Radius.circular(AppTheme.radiusLg),
|
||||
),
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: const BorderRadius.vertical(
|
||||
bottom: Radius.circular(AppTheme.radiusLg),
|
||||
),
|
||||
child: LinearProgressIndicator(
|
||||
value: widget.progress,
|
||||
backgroundColor: AppColors.surfaceVariant,
|
||||
valueColor: const AlwaysStoppedAnimation(
|
||||
AppColors.primary,
|
||||
),
|
||||
minHeight: 3,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Action buttons (on hover)
|
||||
if (_isHovered &&
|
||||
(widget.onPlayTap != null || widget.onMoreTap != null))
|
||||
Center(
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
if (widget.onPlayTap != null)
|
||||
_buildActionButton(
|
||||
icon: Icons.play_arrow,
|
||||
label: 'Play',
|
||||
onTap: widget.onPlayTap!,
|
||||
),
|
||||
if (widget.onPlayTap != null &&
|
||||
widget.onMoreTap != null)
|
||||
const SizedBox(width: 16),
|
||||
if (widget.onMoreTap != null)
|
||||
_buildActionButton(
|
||||
icon: Icons.info_outline,
|
||||
label: 'Info',
|
||||
onTap: widget.onMoreTap!,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 12),
|
||||
|
||||
// ============ METADATA ============
|
||||
// Title
|
||||
Text(
|
||||
widget.title,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
|
||||
// Rating & Year
|
||||
if (widget.rating != null || widget.year != null) ...[
|
||||
const SizedBox(height: 6),
|
||||
Row(
|
||||
children: [
|
||||
if (widget.rating != null) ...[
|
||||
const Icon(
|
||||
Icons.star,
|
||||
size: 14,
|
||||
color: AppColors.ratingGold,
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
widget.rating!,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
if (widget.rating != null && widget.year != null)
|
||||
const SizedBox(width: 12),
|
||||
if (widget.year != null)
|
||||
Text(
|
||||
widget.year!,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.textTertiary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPosterImage() {
|
||||
if (widget.imageUrl == null || widget.imageUrl!.isEmpty) {
|
||||
return Container(
|
||||
color: AppColors.surface,
|
||||
child: const Center(
|
||||
child: Icon(
|
||||
Icons.image_outlined,
|
||||
color: AppColors.textSecondary,
|
||||
size: 48,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return CachedNetworkImage(
|
||||
imageUrl: widget.imageUrl!,
|
||||
fit: BoxFit.cover,
|
||||
placeholder: (context, url) => Container(
|
||||
color: AppColors.shimmer,
|
||||
child: const Center(
|
||||
child: SizedBox(
|
||||
width: 40,
|
||||
height: 40,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
color: AppColors.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
errorWidget: (context, url, error) => Container(
|
||||
color: AppColors.surface,
|
||||
child: const Center(
|
||||
child: Icon(
|
||||
Icons.broken_image_outlined,
|
||||
color: AppColors.textSecondary,
|
||||
size: 48,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildActionButton({
|
||||
required IconData icon,
|
||||
required String label,
|
||||
required VoidCallback onTap,
|
||||
}) {
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.primary,
|
||||
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColors.primary.withOpacity(0.4),
|
||||
blurRadius: 12,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(icon, color: Colors.black, size: 18),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
label,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,397 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
import 'glass_container.dart';
|
||||
|
||||
/// Apple TV Modern Top Navigation Bar
|
||||
///
|
||||
/// Premium navigation header with:
|
||||
/// - Logo/branding
|
||||
/// - Search integration
|
||||
/// - User menu
|
||||
/// - Glassmorphism effect
|
||||
class TvTopNavBar extends StatefulWidget {
|
||||
final String title;
|
||||
final VoidCallback? onSearch;
|
||||
final VoidCallback? onProfile;
|
||||
final VoidCallback? onNotifications;
|
||||
final int notificationCount;
|
||||
final Widget? leading;
|
||||
final List<Widget>? actions;
|
||||
|
||||
const TvTopNavBar({
|
||||
super.key,
|
||||
required this.title,
|
||||
this.onSearch,
|
||||
this.onProfile,
|
||||
this.onNotifications,
|
||||
this.notificationCount = 0,
|
||||
this.leading,
|
||||
this.actions,
|
||||
});
|
||||
|
||||
@override
|
||||
State<TvTopNavBar> createState() => _TvTopNavBarState();
|
||||
}
|
||||
|
||||
class _TvTopNavBarState extends State<TvTopNavBar> {
|
||||
bool _isHovered = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MouseRegion(
|
||||
onEnter: (_) => setState(() => _isHovered = true),
|
||||
onExit: (_) => setState(() => _isHovered = false),
|
||||
child: GlassContainer(
|
||||
borderRadius: 0,
|
||||
hasBorder: false,
|
||||
showShadow: false,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppTheme.spacing32,
|
||||
vertical: AppTheme.spacing16,
|
||||
),
|
||||
margin: EdgeInsets.zero,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
// Left: Logo + Title
|
||||
Row(
|
||||
children: [
|
||||
if (widget.leading != null) widget.leading!,
|
||||
const SizedBox(width: AppTheme.spacing16),
|
||||
Text(
|
||||
widget.title,
|
||||
style: GoogleFonts.outfit(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
letterSpacing: -0.3,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Right: Actions
|
||||
Row(
|
||||
children: [
|
||||
if (widget.onSearch != null) ...[
|
||||
_buildIconButton(
|
||||
icon: Icons.search,
|
||||
onTap: widget.onSearch!,
|
||||
tooltip: 'Search',
|
||||
),
|
||||
const SizedBox(width: AppTheme.spacing16),
|
||||
],
|
||||
|
||||
if (widget.onNotifications != null) ...[
|
||||
_buildIconButton(
|
||||
icon: Icons.notifications_none,
|
||||
onTap: widget.onNotifications!,
|
||||
tooltip: 'Notifications',
|
||||
badge: widget.notificationCount > 0
|
||||
? widget.notificationCount.toString()
|
||||
: null,
|
||||
),
|
||||
const SizedBox(width: AppTheme.spacing16),
|
||||
],
|
||||
|
||||
if (widget.onProfile != null)
|
||||
_buildIconButton(
|
||||
icon: Icons.account_circle,
|
||||
onTap: widget.onProfile!,
|
||||
tooltip: 'Profile',
|
||||
),
|
||||
|
||||
if (widget.actions != null) ...[
|
||||
const SizedBox(width: AppTheme.spacing16),
|
||||
...widget.actions!,
|
||||
],
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildIconButton({
|
||||
required IconData icon,
|
||||
required VoidCallback onTap,
|
||||
required String tooltip,
|
||||
String? badge,
|
||||
}) {
|
||||
return Tooltip(
|
||||
message: tooltip,
|
||||
child: MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
child: GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(
|
||||
color: _isHovered ? AppColors.surface : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
Icon(
|
||||
icon,
|
||||
color: AppColors.textPrimary,
|
||||
size: 24,
|
||||
),
|
||||
if (badge != null)
|
||||
Positioned(
|
||||
top: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(4),
|
||||
decoration: const BoxDecoration(
|
||||
color: AppColors.error,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Text(
|
||||
badge,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Apple TV Modern Side Navigation
|
||||
///
|
||||
/// Vertical navigation menu with:
|
||||
/// - Window navigation items
|
||||
/// - Collapsible menu
|
||||
/// - Smooth animations
|
||||
/// - Category grouping
|
||||
class TvSideNav extends StatefulWidget {
|
||||
final List<TvNavItem> items;
|
||||
final int selectedIndex;
|
||||
final ValueChanged<int> onItemSelected;
|
||||
final bool expanded;
|
||||
final VoidCallback? onToggleExpanded;
|
||||
|
||||
const TvSideNav({
|
||||
super.key,
|
||||
required this.items,
|
||||
this.selectedIndex = 0,
|
||||
required this.onItemSelected,
|
||||
this.expanded = true,
|
||||
this.onToggleExpanded,
|
||||
});
|
||||
|
||||
@override
|
||||
State<TvSideNav> createState() => _TvSideNavState();
|
||||
}
|
||||
|
||||
class _TvSideNavState extends State<TvSideNav> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GlassContainer(
|
||||
borderRadius: 0,
|
||||
hasBorder: false,
|
||||
showShadow: false,
|
||||
padding: const EdgeInsets.symmetric(vertical: AppTheme.spacing16),
|
||||
margin: EdgeInsets.zero,
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: List.generate(
|
||||
widget.items.length,
|
||||
(index) => _buildNavItem(
|
||||
item: widget.items[index],
|
||||
isSelected: index == widget.selectedIndex,
|
||||
onTap: () => widget.onItemSelected(index),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildNavItem({
|
||||
required TvNavItem item,
|
||||
required bool isSelected,
|
||||
required VoidCallback onTap,
|
||||
}) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppTheme.spacing16,
|
||||
vertical: AppTheme.spacing8,
|
||||
),
|
||||
child: GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppTheme.spacing16,
|
||||
vertical: AppTheme.spacing12,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected ? AppColors.primary : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
|
||||
border: !isSelected
|
||||
? Border.all(color: AppColors.border)
|
||||
: null,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
item.icon,
|
||||
color: isSelected ? Colors.black : AppColors.textSecondary,
|
||||
size: 20,
|
||||
),
|
||||
const SizedBox(width: AppTheme.spacing12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
item.label,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: isSelected ? Colors.black : AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Navigation item model
|
||||
class TvNavItem {
|
||||
final String label;
|
||||
final IconData icon;
|
||||
final String? badge;
|
||||
|
||||
TvNavItem({
|
||||
required this.label,
|
||||
required this.icon,
|
||||
this.badge,
|
||||
});
|
||||
}
|
||||
|
||||
/// Apple TV Modern Floating Action Menu
|
||||
///
|
||||
/// Context-aware floating menu with:
|
||||
/// - Multiple action buttons
|
||||
/// - Smooth reveal animation
|
||||
/// - Accessible positioning
|
||||
class TvFloatingMenu extends StatefulWidget {
|
||||
final List<TvMenuAction> actions;
|
||||
final VoidCallback? onClose;
|
||||
|
||||
const TvFloatingMenu({
|
||||
super.key,
|
||||
required this.actions,
|
||||
this.onClose,
|
||||
});
|
||||
|
||||
@override
|
||||
State<TvFloatingMenu> createState() => _TvFloatingMenuState();
|
||||
}
|
||||
|
||||
class _TvFloatingMenuState extends State<TvFloatingMenu>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller = AnimationController(
|
||||
vsync: this,
|
||||
duration: AppTheme.durationMd,
|
||||
)..forward();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ScaleTransition(
|
||||
scale: _controller,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(AppTheme.spacing12),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
|
||||
border: Border.all(color: AppColors.border),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.3),
|
||||
blurRadius: 24,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: List.generate(
|
||||
widget.actions.length,
|
||||
(index) => GestureDetector(
|
||||
onTap: () {
|
||||
widget.actions[index].onTap?.call();
|
||||
widget.onClose?.call();
|
||||
},
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppTheme.spacing16,
|
||||
vertical: AppTheme.spacing12,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
widget.actions[index].icon,
|
||||
color: widget.actions[index].color ?? AppColors.textPrimary,
|
||||
),
|
||||
const SizedBox(width: AppTheme.spacing12),
|
||||
Text(
|
||||
widget.actions[index].label,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Menu action model
|
||||
class TvMenuAction {
|
||||
final String label;
|
||||
final IconData icon;
|
||||
final Color? color;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
TvMenuAction({
|
||||
required this.label,
|
||||
required this.icon,
|
||||
this.color,
|
||||
this.onTap,
|
||||
});
|
||||
}
|
||||
Reference in new issue
Block a user