feat! Flutter dashboard/stats overhaul — StatCard, GlassCard, sources sheet, nginx HLS tweak (#22)

* feat: Add Flutter client for Random Video Streamer

- Introduced a new Flutter client application for controlling and monitoring the Random Video Clips Streaming Server.
- Implemented API endpoints for admin context, stats, and audio file retrieval.
- Enhanced the dashboard with navigation and improved UI for better user experience.
- Added support for audio file management and chunk generation controls.
- Included necessary configuration files and dependencies for Flutter development.

* feat: Implement route-based navigation and enhance admin and stats screens

- Added `go_router` dependency for improved routing capabilities.
- Introduced separate pages for Dashboard, Admin, and Stats with a unified header for navigation.
- Enhanced Admin screen to display live status and system usage metrics.
- Updated Stats screen to include pagination for model and audio statistics.
- Refactored Home screen to streamline data loading and improve UI consistency.

* feat: Update dependencies and enhance UI components

- Added `google_fonts` and `url_launcher` dependencies for improved typography and link handling.
- Introduced `video_player_web_hls` for enhanced HLS streaming support on web platforms.
- Refactored the theme and UI components for better consistency and user experience across screens.
- Updated README with detailed instructions for enabling live streaming and platform-specific notes.

* feat: Enhance stats screen with new `StatCard`, `GlassCard` widgets, and introduce model filtering, sorting, and pagination.

Author: vineethvijay

flutter_client/lib/main.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
 import 'src/screens/admin_screen.dart';
+import 'src/screens/app_shell.dart';
 import 'src/screens/home_screen.dart';
 import 'src/screens/stats_screen.dart';
 import 'src/services/streaming_api.dart';
@@ -21,16 +22,31 @@ class RandomVideoStreamerApp extends StatelessWidget {
   Widget build(BuildContext context) {
     final router = GoRouter(
       routes: [
-        GoRoute(path: '/', builder: (context, state) => HomeScreen(api: api)),
-        GoRoute(path: '/admin', builder: (context, state) => AdminScreen(api: api)),
-        GoRoute(path: '/stats', builder: (context, state) => StatsScreen(api: api)),
+        ShellRoute(
+          builder: (context, state, child) => AppShell(child: child),
+          routes: [
+            GoRoute(
+              path: '/',
+              builder: (context, state) => HomeScreen(api: api),
+            ),
+            GoRoute(
+              path: '/admin',
+              builder: (context, state) => AdminScreen(api: api),
+            ),
+            GoRoute(
+              path: '/stats',
+              builder: (context, state) => StatsScreen(api: api),
+            ),
+          ],
+        ),
       ],
     );
 
     return MaterialApp.router(
       routerConfig: router,
       title: 'Random Video Streamer',
       theme: AppTheme.dark(),
+      debugShowCheckedModeBanner: false,
     );
   }
 }

flutter_client/lib/src/models/chunk.dart

@@ -4,19 +4,63 @@ class Chunk {
     required this.createdAt,
     required this.sizeMb,
     this.daysToExpire,
+    this.videoCodec,
+    this.width,
+    this.height,
+    this.timestamp,
+    this.sourceVideos,
   });
 
   final String name;
   final String createdAt;
   final num sizeMb;
   final int? daysToExpire;
+  final String? videoCodec;
+  final int? width;
+  final int? height;
+  final num? timestamp;
+  final List<Map<String, dynamic>>? sourceVideos;
 
   factory Chunk.fromJson(Map<String, dynamic> json) {
+    final rawSources = json['source_videos'];
+    List<Map<String, dynamic>>? sources;
+    if (rawSources is List) {
+      sources = rawSources
+          .map((e) {
+            if (e is Map<String, dynamic>) return e;
+            if (e is String) return <String, dynamic>{'path': e};
+            return null;
+          })
+          .whereType<Map<String, dynamic>>()
+          .toList(growable: false);
+    }
+
     return Chunk(
       name: json['name'] as String? ?? '',
       createdAt: json['created_at'] as String? ?? '',
       sizeMb: (json['size_mb'] as num?) ?? 0,
       daysToExpire: json['days_to_expire'] as int?,
+      videoCodec: json['video_codec'] as String?,
+      width: json['width'] as int?,
+      height: json['height'] as int?,
+      timestamp: json['timestamp'] as num?,
+      sourceVideos: sources,
     );
   }
+
+  bool get hasSources =>
+      sourceVideos != null && sourceVideos!.isNotEmpty;
+
+  String get metaSummary {
+    final parts = <String>[];
+    if (videoCodec != null) {
+      var v = 'Video: $videoCodec';
+      if (width != null && height != null) v += ' ${width}x$height';
+      parts.add(v);
+    }
+    parts.add('Size: $sizeMb MB');
+    parts.add('Created: $createdAt');
+    if (daysToExpire != null) parts.add('Expires: ~${daysToExpire}d');
+    return parts.join(' · ');
+  }
 }

flutter_client/lib/src/models/stream_status.dart

@@ -5,13 +5,21 @@ class StreamStatus {
     this.chunksPushed = 0,
     this.chunksCreatedTotal = 0,
     this.totalSecondsStreamed = 0,
+    this.currentChunkStartedAt,
+    this.currentChunkDuration,
+    this.audioPositionSec,
+    this.audioTrackDurationSec,
   });
 
   final String? currentChunk;
   final String? currentAudio;
   final int chunksPushed;
   final int chunksCreatedTotal;
   final num totalSecondsStreamed;
+  final num? currentChunkStartedAt;
+  final num? currentChunkDuration;
+  final num? audioPositionSec;
+  final num? audioTrackDurationSec;
 
   factory StreamStatus.fromJson(Map<String, dynamic> json) {
     return StreamStatus(
@@ -20,6 +28,10 @@ class StreamStatus {
       chunksPushed: json['chunks_pushed'] as int? ?? 0,
       chunksCreatedTotal: json['chunks_created_total'] as int? ?? 0,
       totalSecondsStreamed: json['total_seconds_streamed'] as num? ?? 0,
+      currentChunkStartedAt: json['current_chunk_started_at'] as num?,
+      currentChunkDuration: json['current_chunk_duration'] as num?,
+      audioPositionSec: json['audio_position_sec'] as num?,
+      audioTrackDurationSec: json['audio_track_duration_sec'] as num?,
     );
   }
 }

flutter_client/lib/src/models/system_usage.dart

@@ -2,18 +2,47 @@ class SystemUsage {
   SystemUsage({
     this.cpuPercent,
     this.memPercent,
+    this.memUsedMb,
+    this.memTotalMb,
     this.gpuPercent,
+    this.gpuMemUsedMb,
+    this.gpuMemTotalMb,
   });
 
   final num? cpuPercent;
   final num? memPercent;
+  final num? memUsedMb;
+  final num? memTotalMb;
   final num? gpuPercent;
+  final num? gpuMemUsedMb;
+  final num? gpuMemTotalMb;
 
   factory SystemUsage.fromJson(Map<String, dynamic> json) {
     return SystemUsage(
       cpuPercent: json['cpu_percent'] as num?,
       memPercent: json['mem_percent'] as num?,
+      memUsedMb: json['mem_used_mb'] as num?,
+      memTotalMb: json['mem_total_mb'] as num?,
       gpuPercent: json['gpu_percent'] as num?,
+      gpuMemUsedMb: json['gpu_mem_used_mb'] as num?,
+      gpuMemTotalMb: json['gpu_mem_total_mb'] as num?,
     );
   }
+
+  String formatMb(num? mb) {
+    if (mb == null) return '—';
+    return mb >= 1024
+        ? '${(mb / 1024).toStringAsFixed(1)} GB'
+        : '${mb.round()} MB';
+  }
+
+  String get memDisplay {
+    if (memUsedMb == null || memTotalMb == null) return '—';
+    return '${formatMb(memUsedMb)} / ${formatMb(memTotalMb)}';
+  }
+
+  String get gpuMemDisplay {
+    if (gpuMemUsedMb == null || gpuMemTotalMb == null) return '—';
+    return '${formatMb(gpuMemUsedMb)} / ${formatMb(gpuMemTotalMb)}';
+  }
 }