feat: add AppColors class defining an Apple TV-inspired color palette and theme schemes.

2026-10-23 23:28:15 +02:00 · 2025-12-10 23:35:05 +01:00
1 parent 32af7fd920
commit 9cc0f5eacb
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import '../../core/theme/app_colors.dart';
-import 'tv_focusable.dart';

 class MobileScaffold extends ConsumerWidget {
  final Widget child;
@@ -21,29 +21,37 @@ class MobileScaffold extends ConsumerWidget {
      backgroundColor: AppColors.background,
      body: Column(
        children: [
-          // Top Navigation Bar (TV Friendly)
+          // Top Navigation Bar (Apple TV Style)
          Container(
            padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
            decoration: BoxDecoration(
-              color: AppColors.surface,
-              boxShadow: [
-                BoxShadow(
-                  color: Colors.black.withOpacity(0.3),
-                  blurRadius: 8,
-                  offset: const Offset(0, 2),
-                ),
-              ],
+              gradient: LinearGradient(
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter,
+                colors: [
+                  Colors.black.withOpacity(0.6),
+                  Colors.transparent,
+                ],
+              ),
            ),
            child: SafeArea(
              bottom: false,
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                children: [
-                  _buildNavItem(0, 'Live TV', Icons.tv),
-                  _buildNavItem(1, 'Films', Icons.movie),
-                  _buildNavItem(2, 'Séries', Icons.video_library),
-                  _buildNavItem(3, 'Paramètres', Icons.settings),
-                ],
+              child: Container(
+                height: 50,
+                decoration: BoxDecoration(
+                  color: Colors.white.withOpacity(0.1),
+                  borderRadius: BorderRadius.circular(30),
+                  border: Border.all(color: Colors.white.withOpacity(0.05)),
+                ),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                  children: [
+                    _buildNavItem(0, 'Live TV', Icons.tv),
+                    _buildNavItem(1, 'Films', Icons.movie),
+                    _buildNavItem(2, 'Séries', Icons.video_library),
+                    _buildNavItem(3, 'Paramètres', Icons.settings),
+                  ],
+                ),
              ),
            ),
          ),
@@ -57,35 +65,112 @@ class MobileScaffold extends ConsumerWidget {

  Widget _buildNavItem(int index, String label, IconData icon) {
    final isSelected = currentIndex == index;
-    return TVFocusable(
+    
+    return _AppleTVNavItem(
+      isSelected: isSelected,
+      icon: icon,
+      label: label,
      onPressed: () => onIndexChanged(index),
-      scale: 1.1,
-      borderRadius: BorderRadius.circular(8),
-      child: Container(
-        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-        decoration: BoxDecoration(
-          color: isSelected ? AppColors.primary.withOpacity(0.15) : null,
-          borderRadius: BorderRadius.circular(8),
-          border: isSelected ? Border.all(color: AppColors.primary.withOpacity(0.5)) : null,
-        ),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Icon(
-              icon, 
-              color: isSelected ? AppColors.primary : AppColors.textSecondary,
-              size: 20,
-            ),
-            const SizedBox(width: 8),
-            Text(
-              label,
-              style: TextStyle(
-                color: isSelected ? AppColors.primary : AppColors.textSecondary,
-                fontWeight: isSelected ? FontWeight.bold : FontWeight.w500,
-                fontSize: 14,
+    );
+  }
+}
+
+/// Apple TV style navigation item - matches desktop style
+class _AppleTVNavItem extends StatefulWidget {
+  final bool isSelected;
+  final IconData icon;
+  final String label;
+  final VoidCallback onPressed;
+
+  const _AppleTVNavItem({
+    required this.isSelected,
+    required this.icon,
+    required this.label,
+    required this.onPressed,
+  });
+
+  @override
+  State<_AppleTVNavItem> createState() => _AppleTVNavItemState();
+}
+
+class _AppleTVNavItemState extends State<_AppleTVNavItem> {
+  final FocusNode _focusNode = FocusNode();
+  bool _isFocused = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _focusNode.addListener(_onFocusChange);
+  }
+
+  @override
+  void dispose() {
+    _focusNode.removeListener(_onFocusChange);
+    _focusNode.dispose();
+    super.dispose();
+  }
+
+  void _onFocusChange() {
+    setState(() => _isFocused = _focusNode.hasFocus);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // Desktop style: selected = white bg + black text, unselected = white70 text
+    final bool showWhiteBg = widget.isSelected || _isFocused;
+    final Color textColor = showWhiteBg ? Colors.black : Colors.white70;
+    final Color iconColor = showWhiteBg ? Colors.black : Colors.white70;
+    
+    return Focus(
+      focusNode: _focusNode,
+      onKeyEvent: (node, event) {
+        if (event is KeyDownEvent) {
+          final key = event.logicalKey;
+          if (key == LogicalKeyboardKey.select ||
+              key == LogicalKeyboardKey.enter ||
+              key == LogicalKeyboardKey.space) {
+            widget.onPressed();
+            return KeyEventResult.handled;
+          }
+        }
+        return KeyEventResult.ignored;
+      },
+      child: GestureDetector(
+        onTap: widget.onPressed,
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 150),
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+          margin: const EdgeInsets.symmetric(horizontal: 2, vertical: 4),
+          decoration: BoxDecoration(
+            // White pill background when selected OR focused
+            color: showWhiteBg ? Colors.white : Colors.transparent,
+            borderRadius: BorderRadius.circular(25),
+            // Subtle glow when focused but not selected
+            boxShadow: _isFocused && !widget.isSelected
+                ? [
+                    BoxShadow(
+                      color: Colors.white.withOpacity(0.3),
+                      blurRadius: 8,
+                      spreadRadius: 1,
+                    ),
+                  ]
+                : null,
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(widget.icon, color: iconColor, size: 18),
+              const SizedBox(width: 6),
+              Text(
+                widget.label,
+                style: TextStyle(
+                  color: textColor,
+                  fontWeight: showWhiteBg ? FontWeight.w700 : FontWeight.w400,
+                  fontSize: 13,
+                ),
              ),
-            ),
-          ],
+            ],
+          ),
        ),
      ),
    );
@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import '../../../../core/theme/app_colors.dart';
@@ -5,6 +6,7 @@ import '../../../../core/theme/app_colors.dart';
 class TVFocusable extends StatefulWidget {
  final Widget child;
  final VoidCallback? onPressed;
+  final VoidCallback? onLongPress;
  final VoidCallback? onFocus;
  final FocusNode? focusNode;
  final bool autofocus;
@@ -12,11 +14,13 @@ class TVFocusable extends StatefulWidget {
  final double borderWidth;
  final Color focusColor;
  final BorderRadius? borderRadius;
+  final Duration longPressDuration;

  const TVFocusable({
    super.key,
    required this.child,
    this.onPressed,
+    this.onLongPress,
    this.onFocus,
    this.focusNode,
    this.autofocus = false,
@@ -24,6 +28,7 @@ class TVFocusable extends StatefulWidget {
    this.borderWidth = 3.0,
    this.focusColor = Colors.white,
    this.borderRadius,
+    this.longPressDuration = const Duration(seconds: 3),
  });

  @override
@@ -33,6 +38,9 @@ class TVFocusable extends StatefulWidget {
 class _TVFocusableState extends State<TVFocusable> {
  late FocusNode _node;
  bool _isFocused = false;
+  Timer? _longPressTimer;
+  bool _isKeyDown = false;
+  bool _longPressTriggered = false;

  @override
  void initState() {
@@ -43,6 +51,7 @@ class _TVFocusableState extends State<TVFocusable> {

  @override
  void dispose() {
+    _longPressTimer?.cancel();
    if (widget.focusNode == null) {
      _node.dispose();
    } else {
@@ -66,7 +75,7 @@ class _TVFocusableState extends State<TVFocusable> {
      if (!mounted) return;
      Scrollable.ensureVisible(
        context,
-        alignment: 0.5, // Center the item
+        alignment: 0.5,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
@@ -77,27 +86,60 @@ class _TVFocusableState extends State<TVFocusable> {
    widget.onPressed?.call();
  }

+  void _handleLongPress() {
+    widget.onLongPress?.call();
+  }
+
  @override
  Widget build(BuildContext context) {
    return Focus(
      focusNode: _node,
      autofocus: widget.autofocus,
      onKeyEvent: (node, event) {
-        if (event is KeyDownEvent) {
-          final key = event.logicalKey;
-          if (key == LogicalKeyboardKey.select ||
-              key == LogicalKeyboardKey.enter ||
-              key == LogicalKeyboardKey.space ||
-              key == LogicalKeyboardKey.gameButtonA ||
-              key == LogicalKeyboardKey.numpadEnter) {
-            _handlePress();
-            return KeyEventResult.handled;
+        final key = event.logicalKey;
+        final isSelectKey = key == LogicalKeyboardKey.select ||
+            key == LogicalKeyboardKey.enter ||
+            key == LogicalKeyboardKey.space ||
+            key == LogicalKeyboardKey.gameButtonA ||
+            key == LogicalKeyboardKey.numpadEnter;
+
+        if (event is KeyDownEvent && isSelectKey) {
+          if (!_isKeyDown) {
+            _isKeyDown = true;
+            _longPressTriggered = false;
+            
+            // Start long press timer only if onLongPress is defined
+            if (widget.onLongPress != null) {
+              _longPressTimer?.cancel();
+              _longPressTimer = Timer(widget.longPressDuration, () {
+                if (_isKeyDown && mounted) {
+                  _longPressTriggered = true;
+                  _handleLongPress();
+                }
+              });
+            }
          }
+          return KeyEventResult.handled;
        }
+        
+        if (event is KeyUpEvent && isSelectKey) {
+          _longPressTimer?.cancel();
+          
+          // If long press wasn't triggered, it's a normal press
+          if (_isKeyDown && !_longPressTriggered) {
+            _handlePress();
+          }
+          
+          _isKeyDown = false;
+          _longPressTriggered = false;
+          return KeyEventResult.handled;
+        }
+        
        return KeyEventResult.ignored;
      },
      child: GestureDetector(
        onTap: _handlePress,
+        onLongPress: widget.onLongPress,
        child: TweenAnimationBuilder<double>(
          duration: const Duration(milliseconds: 200),
          curve: Curves.easeOut,
@@ -111,11 +153,11 @@ class _TVFocusableState extends State<TVFocusable> {
              child: Container(
                foregroundDecoration: _isFocused
                    ? BoxDecoration(
+                        borderRadius: widget.borderRadius ?? BorderRadius.circular(12),
                        border: Border.all(
                          color: widget.focusColor,
                          width: widget.borderWidth,
                        ),
-                        borderRadius: widget.borderRadius ?? BorderRadius.circular(12),
                      )
                    : null,
                child: child,