feat: Add audio_video_progress_bar dependency

lib/features/player/view/audiobook_player.dart

@@ -0,0 +1,242 @@
+import 'package:audio_video_progress_bar/audio_video_progress_bar.dart';
+import 'package:audioplayers/audioplayers.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:miniplayer/miniplayer.dart';
+import 'package:whispering_pages/api/image_provider.dart';
+import 'package:whispering_pages/api/library_item_provider.dart';
+import 'package:whispering_pages/features/player/providers/audiobook_player.dart';
+import 'package:whispering_pages/features/player/providers/currently_playing_provider.dart';
+import 'package:whispering_pages/shared/widgets/shelves/book_shelf.dart';
+import 'package:whispering_pages/theme/theme_from_cover_provider.dart';
+
+import 'player_when_expanded.dart';
+import 'player_when_minimized.dart';
+
+double valueFromPercentageInRange({
+  required final double min,
+  max,
+  percentage,
+}) {
+  return percentage * (max - min) + min;
+}
+
+double percentageFromValueInRange({required final double min, max, value}) {
+  return (value - min) / (max - min);
+}
+
+const double playerMinHeight = 70;
+const double playerMaxHeight = 500;
+const miniplayerPercentageDeclaration = 0.2;
+final ValueNotifier<double> playerExpandProgress =
+    ValueNotifier(playerMinHeight);
+
+final MiniplayerController controller = MiniplayerController();
+
+class AudiobookPlayer extends HookConsumerWidget {
+  const AudiobookPlayer({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final currentBook = ref.watch(currentlyPlayingBookProvider);
+    if (currentBook == null) {
+      return const SizedBox.shrink();
+    }
+    final itemBeingPlayed =
+        ref.watch(libraryItemProvider(currentBook.libraryItemId));
+    final player = ref.watch(audiobookPlayerProvider);
+    final imageOfItemBeingPlayed = itemBeingPlayed.valueOrNull != null
+        ? ref.watch(
+            coverImageProvider(itemBeingPlayed.valueOrNull!),
+          )
+        : null;
+    final imgWidget = imageOfItemBeingPlayed?.valueOrNull != null
+        ? Image.memory(
+            imageOfItemBeingPlayed!.valueOrNull!,
+            fit: BoxFit.cover,
+          )
+        : const BookCoverSkeleton();
+
+    final playPauseController = useAnimationController(
+      duration: const Duration(milliseconds: 200),
+      initialValue: 1,
+    );
+
+    // add controller to the player state listener
+    player.onPlayerStateChanged.listen((state) {
+      if (state == PlayerState.playing) {
+        playPauseController.reverse();
+      } else {
+        playPauseController.forward();
+      }
+    });
+
+    final playPauseButton = IconButton(
+      onPressed: () async {
+        await player.togglePlayPause();
+      },
+      icon: AnimatedIcon(
+        icon: AnimatedIcons.pause_play,
+        progress: playPauseController,
+        size: 50,
+      ),
+    );
+    // player.onPositionChanged.listen((event) {
+    //   currentProgress.value = event.inSeconds.toDouble();
+    // });
+
+    // final progressStream = TimerPositionUpdater(
+    //   getPosition: player.getCurrentPosition,
+    //   interval: const Duration(milliseconds: 500),
+    // ).positionStream;
+    // // a debug that will print the current position of the player
+    // progressStream.listen((event) {
+    //   debugPrint('Current position: ${event.inSeconds}');
+    // });
+
+    // the widget that will be displayed when the player is expanded
+    const progressBar = PlayerProgressBar();
+
+    // theme from image
+    final imageTheme = ref.watch(
+      themeOfLibraryItemProvider(
+        itemBeingPlayed.valueOrNull,
+        brightness: Theme.of(context).brightness,
+      ),
+    );
+    return Theme(
+      // get the theme from imageThemeProvider
+
+      data: ThemeData(
+        colorScheme: imageTheme.valueOrNull ?? Theme.of(context).colorScheme,
+      ),
+      child: Miniplayer(
+        valueNotifier: playerExpandProgress,
+        minHeight: playerMinHeight,
+        maxHeight: playerMaxHeight,
+        controller: controller,
+        elevation: 4,
+        onDismissed: () {
+          player.setSourceAudioBook(null);
+        },
+        curve: Curves.easeOut,
+        builder: (height, percentage) {
+          final bool isFormMiniplayer =
+              percentage < miniplayerPercentageDeclaration;
+          final double availWidth = MediaQuery.of(context).size.width;
+          final maxImgSize = availWidth * 0.4;
+
+          final bookTitle = Text(player.book?.metadata.title ?? '');
+
+          //Declare additional widgets (eg. SkipButton) and variables
+          if (!isFormMiniplayer) {
+            var percentageExpandedPlayer = percentageFromValueInRange(
+              min: playerMaxHeight * miniplayerPercentageDeclaration +
+                  playerMinHeight,
+              max: playerMaxHeight,
+              value: height,
+            );
+            if (percentageExpandedPlayer < 0) percentageExpandedPlayer = 0;
+            final paddingVertical = valueFromPercentageInRange(
+              min: 0,
+              max: 16,
+              percentage: percentageExpandedPlayer,
+            );
+            final double heightWithoutPadding = height - paddingVertical * 2;
+            final double imageSize = heightWithoutPadding > maxImgSize
+                ? maxImgSize
+                : heightWithoutPadding;
+            final paddingLeft = valueFromPercentageInRange(
+                  min: 0,
+                  max: availWidth - imageSize,
+                  percentage: percentageExpandedPlayer,
+                ) /
+                2;
+
+            const buttonSkipForward = IconButton(
+              icon: Icon(Icons.forward_30),
+              iconSize: 33,
+              onPressed: onTap,
+            );
+            const buttonSkipBackwards = IconButton(
+              icon: Icon(Icons.replay_10),
+              iconSize: 33,
+              onPressed: onTap,
+            );
+            const buttonPlayExpanded = IconButton(
+              icon: Icon(Icons.pause_circle_filled),
+              iconSize: 50,
+              onPressed: onTap,
+            );
+
+            return PlayerWhenExpanded(
+              imgPaddingLeft: paddingLeft,
+              imgPaddingVertical: paddingVertical,
+              imageSize: imageSize,
+              img: imgWidget,
+              percentageExpandedPlayer: percentageExpandedPlayer,
+              text: bookTitle,
+              buttonSkipBackwards: buttonSkipBackwards,
+              buttonPlayExpanded: playPauseButton,
+              buttonSkipForward: buttonSkipForward,
+              progressIndicator: progressBar,
+            );
+          }
+
+          //Miniplayer
+          final percentageMiniplayer = percentageFromValueInRange(
+            min: playerMinHeight,
+            max: playerMaxHeight * miniplayerPercentageDeclaration +
+                playerMinHeight,
+            value: height,
+          );
+
+          final elementOpacity = 1 - 1 * percentageMiniplayer;
+          final progressIndicatorHeight = 4 - 4 * percentageMiniplayer;
+
+          return PlayerWhenMinimized(
+            maxImgSize: maxImgSize,
+            imgWidget: imgWidget,
+            elementOpacity: elementOpacity,
+            playPauseButton: playPauseButton,
+            progressIndicatorHeight: progressIndicatorHeight,
+            progressIndicator: progressBar,
+          );
+        },
+      ),
+    );
+  }
+}
+
+class PlayerProgressBar extends HookConsumerWidget {
+  const PlayerProgressBar({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final player = ref.watch(audiobookPlayerProvider);
+    final playerState = useState(player.state);
+    // add a listener to the player state
+    player.onPlayerStateChanged.listen((state) {
+      playerState.value = state;
+    });
+    return StreamBuilder<Duration>(
+      stream: player.onPositionChanged,
+      builder: (context, snapshot) {
+        return ProgressBar(
+          progress: snapshot.data ?? const Duration(seconds: 0),
+          total: player.book?.duration ?? const Duration(seconds: 0),
+          onSeek: player.seek,
+          thumbRadius: 8,
+          // thumbColor: Theme.of(context).colorScheme.secondary,
+          thumbGlowColor: Theme.of(context).colorScheme.secondary,
+          thumbGlowRadius: playerState.value == PlayerState.playing ? 10 : 0,
+        );
+      },
+    );
+  }
+}
+
+void onTap() {}