From aeabb177a2a854065d49c6d8faa29e98fd6a95b2 Mon Sep 17 00:00:00 2001
From: Naresh Pratista <2141720057@student.polinema.ac.id>
Date: Tue, 26 Nov 2024 23:00:44 +0700
Subject: [PATCH] Refactor: VideoPlayerWidget to display YouTube thumbnail and
 loading indicator

---
 lib/core/services/constants.dart              |  3 +-
 .../material/widgets/video_player_widget.dart | 50 ++++++++++++++-----
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/lib/core/services/constants.dart b/lib/core/services/constants.dart
index 73323e3..d4dd96d 100644
--- a/lib/core/services/constants.dart
+++ b/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/';
diff --git a/lib/features/learning/modules/material/widgets/video_player_widget.dart b/lib/features/learning/modules/material/widgets/video_player_widget.dart
index d2303c5..40c5f4b 100644
--- a/lib/features/learning/modules/material/widgets/video_player_widget.dart
+++ b/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: CircularProgressIndicator(
-            valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
+        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(
-      controller: _youtubeController!,
-      showVideoProgressIndicator: true,
-      progressIndicatorColor: Colors.red,
-      progressColors: const ProgressBarColors(
-        playedColor: Colors.red,
-        handleColor: Colors.redAccent,
+    return YoutubePlayerBuilder(
+      player: YoutubePlayer(
+        controller: _youtubeController!,
+        showVideoProgressIndicator: true,
+        progressIndicatorColor: Colors.red,
+        progressColors: const ProgressBarColors(
+          playedColor: Colors.red,
+          handleColor: Colors.redAccent,
+        ),
+        onReady: () {
+          // Gunakan metode load untuk transisi lebih halus
+          _youtubeController!.load(_youtubeId!);
+          _youtubeController!.pause();
+        },
       ),
-      onReady: () {
-        print('YouTube Player Ready');
+      builder: (context, player) {
+        return AnimatedOpacity(
+          opacity: _isLoading ? 0.0 : 1.0,
+          duration: const Duration(milliseconds: 300),
+          child: player,
+        );
       },
     );
   }