2 files changed, 18 insertions, 9 deletions
diff --git a/lib/presentation/common_widget/volume_and_fan_control.dart b/lib/presentation/common_widget/volume_and_fan_control.dart
index b38e303..765193b 100644
--- a/lib/presentation/common_widget/volume_and_fan_control.dart
+++ b/lib/presentation/common_widget/volume_and_fan_control.dart
@@ -19,9 +19,7 @@ class VolumeFanControl extends ConsumerWidget {
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          Visibility.maintain(
-              visible: state == AppState.media ? false : true,
-              child: const VolumeBar()),
+          VolumeBar(),
           SizedBox(
             height: gapSize,
           ),
diff --git a/lib/presentation/common_widget/volume_bar.dart b/lib/presentation/common_widget/volume_bar.dart
index b54283e..b966fc9 100644
--- a/lib/presentation/common_widget/volume_bar.dart
+++ b/lib/presentation/common_widget/volume_bar.dart
@@ -43,13 +43,21 @@ class VolumeBarState extends ConsumerState<VolumeBar> {
     });
   }
 
-  void pause() {}
+  void play() {
+    ref.read(playControllerProvider).play();
+  }
+
+  void pause() {
+    ref.read(playControllerProvider).pause();
+  }
 
   @override
   Widget build(BuildContext context) {
     final volumeValue =
         ref.watch(audioStateProvider.select((audio) => audio.volume));
     val = volumeValue.toDouble();
+    final isPlaying = ref.watch(playStateProvider);
+
     return Column(
       // mainAxisAlignment: MainAxisAlignment.center,
       // crossAxisAlignment: CrossAxisAlignment.center,
@@ -166,12 +174,15 @@ class VolumeBarState extends ConsumerState<VolumeBar> {
               padding: EdgeInsets.zero,
               color: AGLDemoColors.periwinkleColor,
               onPressed: () {
-                pause();
+                if (isPlaying) {
+                  pause();
+                } else {
+                  play();
+                }
               },
-              icon: const Icon(
-                Icons.pause,
-                size: 30,
-              )),
+              icon: isPlaying
+                  ? const Icon(Icons.pause, size: 40)
+                  : const Icon(Icons.play_arrow, size: 40)),
         ),
       ],
     );