Merge branch 'youtube-glitch-fix' into 'master'

Refactor: VideoPlayerWidget to display YouTube thumbnail and loading indicator

See merge request profile-image/kedaireka/polinema-adapative-learning/mobile-adaptive-learning!18

lib/core/services/constants.dart

@@ -1,2 +1 @@
-const String baseUrl =
+const String baseUrl = 'http://54.173.167.62/';
-    'https://e901-2001-448a-50a0-656c-cd9-ff82-635b-5b6e.ngrok-free.app/';

lib/features/learning/modules/material/widgets/video_player_widget.dart

@@ -177,24 +177,50 @@ class VideoPlayerWidgetState extends State<VideoPlayerWidget> {
     if (_youtubeController == null) {
       return Container(
         color: Colors.black,
-        child: const Center(
+        child: Center(
-          child: CircularProgressIndicator(
+          child: Stack(
-            valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
+            alignment: Alignment.center,
+            children: [
+              // Tambahkan thumbnail YouTube sebagai background
+              Image.network(
+                'https://img.youtube.com/vi/$_youtubeId/hqdefault.jpg',
+                fit: BoxFit.cover,
+                width: double.infinity,
+                height: double.infinity,
+                errorBuilder: (context, error, stackTrace) {
+                  return Container(color: Colors.black);
+                },
+              ),
+              const CircularProgressIndicator(
+                valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
+              ),
+            ],
           ),
         ),
       );
     }
 
-    return YoutubePlayer(
+    return YoutubePlayerBuilder(
-      controller: _youtubeController!,
+      player: YoutubePlayer(
-      showVideoProgressIndicator: true,
+        controller: _youtubeController!,
-      progressIndicatorColor: Colors.red,
+        showVideoProgressIndicator: true,
-      progressColors: const ProgressBarColors(
+        progressIndicatorColor: Colors.red,
-        playedColor: Colors.red,
+        progressColors: const ProgressBarColors(
-        handleColor: Colors.redAccent,
+          playedColor: Colors.red,
+          handleColor: Colors.redAccent,
+        ),
+        onReady: () {
+          // Gunakan metode load untuk transisi lebih halus
+          _youtubeController!.load(_youtubeId!);
+          _youtubeController!.pause();
+        },
       ),
-      onReady: () {
+      builder: (context, player) {
-        print('YouTube Player Ready');
+        return AnimatedOpacity(
+          opacity: _isLoading ? 0.0 : 1.0,
+          duration: const Duration(milliseconds: 300),
+          child: player,
+        );
       },
     );
   }