Merge pull request #469 from OpenPecha/chore/RelatedResources

feat: implement YouTube video player with playback controls and integ…

Author: tentamdin

lib/features/home/presentation/widgets/youtube_video_player.dart

@@ -1,7 +1,9 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_pecha/core/constants/app_assets.dart';
-import 'package:go_router/go_router.dart';
+import 'package:youtube_player_flutter/youtube_player_flutter.dart';
 import '../../../../shared/widgets/reusable_youtube_player.dart';
 
 class YoutubeVideoPlayer extends StatefulWidget {
@@ -19,40 +21,179 @@ class YoutubeVideoPlayer extends StatefulWidget {
 }
 
 class _YoutubeVideoPlayerState extends State<YoutubeVideoPlayer> {
+  YoutubePlayerController? _controller;
+  VoidCallback? _stopPlayback;
+  Timer? _controlsTimer;
+  bool _isPlaying = false;
+  bool _isReady = false;
+  bool _showPlaybackControls = true;
+
   @override
   void initState() {
     super.initState();
     // Hide status bar and navigation bar for a true full-screen experience
     SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
+    _scheduleControlsHide();
   }
 
   @override
   void dispose() {
-    // Restore system UI when leaving the player
+    _controlsTimer?.cancel();
+    _stopPlayback?.call();
+    _controller = null;
+    _stopPlayback = null;
+    _restoreSystemUi();
+    super.dispose();
+  }
+
+  void _restoreSystemUi() {
     SystemChrome.setEnabledSystemUIMode(
       SystemUiMode.manual,
       overlays: SystemUiOverlay.values,
     );
-    super.dispose();
+  }
+
+  void _closePlayer() {
+    _controlsTimer?.cancel();
+    _stopPlayback?.call();
+    _controller = null;
+    _stopPlayback = null;
+    _restoreSystemUi();
+    Navigator.of(context).pop();
+  }
+
+  void _seekBy(Duration offset) {
+    final controller = _controller;
+    if (controller == null || !_isReady) return;
+
+    final current = controller.value.position;
+    final target = current + offset;
+    controller.seekTo(target < Duration.zero ? Duration.zero : target);
+    _showControlsTemporarily();
+  }
+
+  void _togglePlayPause() {
+    final controller = _controller;
+    if (controller == null || !_isReady) return;
+
+    HapticFeedback.selectionClick();
+    if (_isPlaying) {
+      controller.pause();
+    } else {
+      controller.play();
+    }
+    setState(() => _isPlaying = !_isPlaying);
+    _showControlsTemporarily();
+  }
+
+  void _showControlsTemporarily() {
+    if (!_showPlaybackControls) {
+      setState(() => _showPlaybackControls = true);
+    }
+    _scheduleControlsHide();
+  }
+
+  void _scheduleControlsHide() {
+    _controlsTimer?.cancel();
+    _controlsTimer = Timer(const Duration(seconds: 5), () {
+      if (!mounted) return;
+      setState(() => _showPlaybackControls = false);
+    });
   }
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return PopScope(
+      onPopInvokedWithResult: (didPop, _) {
+        if (didPop) {
+          _controlsTimer?.cancel();
+          _stopPlayback?.call();
+          _controller = null;
+          _stopPlayback = null;
+          _restoreSystemUi();
+        }
+      },
+      child: Scaffold(
       backgroundColor: Colors.black,
       // Let the player go behind where the status bar was
       extendBodyBehindAppBar: true,
       body: Stack(
         fit: StackFit.expand,
         children: [
           // ── Full-screen player ─────────────────────────────────────────
-          ReusableYoutubePlayer(
-            videoUrl: widget.videoUrl,
-            aspectRatio: 9 / 16,
-            autoPlay: true,
-            mute: false,
-            loop: true,
-            fillParent: true,
+          AbsorbPointer(
+            child: ReusableYoutubePlayer(
+              videoUrl: widget.videoUrl,
+              aspectRatio: 9 / 16,
+              autoPlay: true,
+              mute: false,
+              loop: true,
+              fillParent: true,
+              onControllerCreated: (controller) => _controller = controller,
+              onStopPlaybackRegistered: (stop) => _stopPlayback = stop,
+              onReady: () {
+                if (mounted) setState(() => _isReady = true);
+              },
+              onStateChanged: (isPlaying) {
+                if (mounted) setState(() => _isPlaying = isPlaying);
+              },
+            ),
+          ),
+
+          Positioned.fill(
+            child: GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap: _showControlsTemporarily,
+            ),
+          ),
+
+          // ── Quick playback controls ────────────────────────────────────
+          Center(
+            child: IgnorePointer(
+              ignoring: !_showPlaybackControls,
+              child: AnimatedOpacity(
+                opacity: _showPlaybackControls ? 1 : 0,
+                duration: const Duration(milliseconds: 180),
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    _PlaybackControlButton(
+                      icon: Icons.replay_10_rounded,
+                      label: 'Back 10 seconds',
+                      onPressed:
+                          _isReady
+                              ? () {
+                                HapticFeedback.selectionClick();
+                                _seekBy(const Duration(seconds: -10));
+                              }
+                              : null,
+                    ),
+                    const SizedBox(width: 20),
+                    _PlaybackControlButton(
+                      icon:
+                          _isPlaying
+                              ? Icons.pause_rounded
+                              : Icons.play_arrow_rounded,
+                      label: _isPlaying ? 'Pause' : 'Play',
+                      size: 45,
+                      onPressed: _isReady ? _togglePlayPause : null,
+                    ),
+                    const SizedBox(width: 20),
+                    _PlaybackControlButton(
+                      icon: Icons.forward_10_rounded,
+                      label: 'Forward 10 seconds',
+                      onPressed:
+                          _isReady
+                              ? () {
+                                HapticFeedback.selectionClick();
+                                _seekBy(const Duration(seconds: 10));
+                              }
+                              : null,
+                    ),
+                  ],
+                ),
+              ),
+            ),
           ),
 
           // ── Back button overlay ────────────────────────────────────────
@@ -65,7 +206,7 @@ class _YoutubeVideoPlayerState extends State<YoutubeVideoPlayer> {
                 backgroundColor: Colors.black45,
                 shape: const CircleBorder(),
               ),
-              onPressed: () => context.pop(),
+              onPressed: _closePlayer,
             ),
           ),
 
@@ -89,6 +230,39 @@ class _YoutubeVideoPlayerState extends State<YoutubeVideoPlayer> {
             ),
         ],
       ),
+    ),
+    );
+  }
+}
+
+class _PlaybackControlButton extends StatelessWidget {
+  const _PlaybackControlButton({
+    required this.icon,
+    required this.label,
+    required this.onPressed,
+    this.size = 34,
+  });
+
+  final IconData icon;
+  final String label;
+  final VoidCallback? onPressed;
+  final double size;
+
+  @override
+  Widget build(BuildContext context) {
+    return IconButton(
+      tooltip: label,
+      iconSize: size,
+      color: Colors.white,
+      disabledColor: Colors.white54,
+      style: IconButton.styleFrom(
+        backgroundColor: Colors.black45,
+        disabledBackgroundColor: Colors.black26,
+        shape: const CircleBorder(),
+        padding: const EdgeInsets.all(10),
+      ),
+      onPressed: onPressed,
+      icon: Icon(icon),
     );
   }
 }