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 =
-    'https://e901-2001-448a-50a0-656c-cd9-ff82-635b-5b6e.ngrok-free.app/';
+const String baseUrl = 'http://54.173.167.62/';

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

@@ -177,15 +177,31 @@ class VideoPlayerWidgetState extends State<VideoPlayerWidget> {
     if (_youtubeController == null) {
       return Container(
         color: Colors.black,
-        child: const Center(
-          child: CircularProgressIndicator(
+        child: Center(
+          child: Stack(
+            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(
+      player: YoutubePlayer(
         controller: _youtubeController!,
         showVideoProgressIndicator: true,
         progressIndicatorColor: Colors.red,
@@ -194,7 +210,17 @@ class VideoPlayerWidgetState extends State<VideoPlayerWidget> {
           handleColor: Colors.redAccent,
         ),
         onReady: () {
-        print('YouTube Player Ready');
+          // Gunakan metode load untuk transisi lebih halus
+          _youtubeController!.load(_youtubeId!);
+          _youtubeController!.pause();
+        },
+      ),
+      builder: (context, player) {
+        return AnimatedOpacity(
+          opacity: _isLoading ? 0.0 : 1.0,
+          duration: const Duration(milliseconds: 300),
+          child: player,
+        );
       },
     );
   }