Vaani/lib/features/player/view/audiobook_player.dart

246 lines
8.2 KiB
Dart
Raw Normal View History

import 'dart:math';
import 'package:audio_video_progress_bar/audio_video_progress_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
2024-05-17 11:04:20 -04:00
import 'package:just_audio/just_audio.dart';
import 'package:miniplayer/miniplayer.dart';
2024-08-23 04:21:46 -04:00
import 'package:vaani/api/image_provider.dart';
import 'package:vaani/api/library_item_provider.dart';
import 'package:vaani/features/player/providers/audiobook_player.dart';
import 'package:vaani/features/player/providers/currently_playing_provider.dart';
import 'package:vaani/features/player/providers/player_form.dart';
import 'package:vaani/settings/app_settings_provider.dart';
import 'package:vaani/shared/extensions/inverse_lerp.dart';
import 'package:vaani/shared/widgets/shelves/book_shelf.dart';
import 'package:vaani/theme/providers/theme_from_cover_provider.dart';
import 'player_when_expanded.dart';
import 'player_when_minimized.dart';
const playerMaxHeightPercentOfScreen = 0.8;
class AudiobookPlayer extends HookConsumerWidget {
const AudiobookPlayer({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
2024-05-19 08:53:21 -04:00
final appSettings = ref.watch(appSettingsProvider);
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!.id),
)
: 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
2024-05-17 11:04:20 -04:00
player.playerStateStream.listen((state) {
if (state.playing) {
playPauseController.forward();
2024-05-17 11:04:20 -04:00
} else {
playPauseController.reverse();
}
});
// theme from image
final imageTheme = ref.watch(
themeOfLibraryItemProvider(
itemBeingPlayed.valueOrNull?.id,
brightness: Theme.of(context).brightness,
highContrast: appSettings.themeSettings.highContrast ||
MediaQuery.of(context).highContrast,
),
);
2024-05-17 11:04:20 -04:00
// max height of the player is the height of the screen
final playerMaxHeight = MediaQuery.of(context).size.height;
2024-05-17 11:04:20 -04:00
2024-05-19 08:53:21 -04:00
final availWidth = MediaQuery.of(context).size.width;
// the image width when the player is expanded
final maxImgSize = min(playerMaxHeight * 0.5, availWidth * 0.9);
2024-05-17 11:04:20 -04:00
final preferredVolume = appSettings.playerSettings.preferredDefaultVolume;
2024-05-17 11:04:20 -04:00
return Theme(
data: ThemeData(
colorScheme: imageTheme.valueOrNull ?? Theme.of(context).colorScheme,
),
child: Miniplayer(
2024-05-17 11:04:20 -04:00
valueNotifier: ref.watch(playerExpandProgressNotifierProvider),
2024-05-19 08:53:21 -04:00
onDragDown: (percentage) async {
// preferred volume
// set volume to 0 when dragging down
await player
.setVolume(preferredVolume * (1 - percentage.clamp(0, .75)));
2024-05-19 08:53:21 -04:00
},
minHeight: playerMinHeight,
2024-05-19 08:53:21 -04:00
// subtract the height of notches and other system UI
maxHeight: playerMaxHeight,
controller: audioBookMiniplayerController,
elevation: 4,
onDismissed: () {
2024-06-05 12:08:44 -04:00
// add a delay before closing the player
// to allow the user to see the player closing
Future.delayed(const Duration(milliseconds: 300), () {
2024-08-20 08:36:39 -04:00
player.setSourceAudiobook(null);
2024-06-05 12:08:44 -04:00
});
},
curve: Curves.easeOut,
builder: (height, percentage) {
2024-05-19 08:53:21 -04:00
// at what point should the player switch from miniplayer to expanded player
// also at this point the image should be at its max size and in the center of the player
2024-05-19 08:53:21 -04:00
final miniplayerPercentageDeclaration =
(maxImgSize - playerMinHeight) /
(playerMaxHeight - playerMinHeight);
final bool isFormMiniplayer =
percentage < miniplayerPercentageDeclaration;
2024-06-05 12:08:44 -04:00
if (!isFormMiniplayer) {
2024-05-19 08:53:21 -04:00
// this calculation needs a refactor
var percentageExpandedPlayer = percentage
.inverseLerp(
miniplayerPercentageDeclaration,
1,
)
.clamp(0.0, 1.0);
2024-06-05 12:08:44 -04:00
return PlayerWhenExpanded(
2024-05-19 08:53:21 -04:00
imageSize: maxImgSize,
img: imgWidget,
percentageExpandedPlayer: percentageExpandedPlayer,
2024-05-19 08:53:21 -04:00
playPauseController: playPauseController,
);
}
2024-06-05 12:08:44 -04:00
//Miniplayer
2024-05-19 08:53:21 -04:00
final percentageMiniplayer = percentage.inverseLerp(
0,
miniplayerPercentageDeclaration,
);
2024-06-05 12:08:44 -04:00
return PlayerWhenMinimized(
maxImgSize: maxImgSize,
2024-05-19 08:53:21 -04:00
availWidth: availWidth,
imgWidget: imgWidget,
2024-05-19 08:53:21 -04:00
playPauseController: playPauseController,
percentageMiniplayer: percentageMiniplayer,
);
},
),
);
}
}
2024-05-17 11:04:20 -04:00
class AudiobookPlayerPlayPauseButton extends HookConsumerWidget {
const AudiobookPlayerPlayPauseButton({
super.key,
required this.playPauseController,
2024-05-19 08:53:21 -04:00
this.iconSize = 48.0,
2024-05-17 11:04:20 -04:00
});
2024-05-19 08:53:21 -04:00
final double iconSize;
2024-05-17 11:04:20 -04:00
final AnimationController playPauseController;
@override
Widget build(BuildContext context, WidgetRef ref) {
final player = ref.watch(audiobookPlayerProvider);
2024-05-19 08:53:21 -04:00
2024-05-17 11:04:20 -04:00
return switch (player.processingState) {
2024-05-19 08:53:21 -04:00
ProcessingState.loading || ProcessingState.buffering => const Padding(
padding: EdgeInsets.all(8.0),
child: CircularProgressIndicator(),
),
2024-05-17 11:04:20 -04:00
ProcessingState.completed => IconButton(
onPressed: () async {
await player.seek(const Duration(seconds: 0));
await player.play();
},
2024-05-19 08:53:21 -04:00
icon: const Icon(
Icons.replay,
),
2024-05-17 11:04:20 -04:00
),
ProcessingState.ready => IconButton(
onPressed: () async {
await player.togglePlayPause();
},
2024-05-19 08:53:21 -04:00
iconSize: iconSize,
2024-05-17 11:04:20 -04:00
icon: AnimatedIcon(
icon: AnimatedIcons.play_pause,
progress: playPauseController,
),
),
ProcessingState.idle => const SizedBox.shrink(),
};
}
}
2024-05-19 08:53:21 -04:00
class AudiobookChapterProgressBar extends HookConsumerWidget {
const AudiobookChapterProgressBar({
super.key,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final player = ref.watch(audiobookPlayerProvider);
2024-05-19 09:45:41 -04:00
final currentChapter = ref.watch(currentPlayingChapterProvider);
2024-05-19 08:53:21 -04:00
final position = useStream(
player.positionStream,
initialData: const Duration(seconds: 0),
);
final buffered = useStream(
player.bufferedPositionStream,
initialData: const Duration(seconds: 0),
);
2024-05-19 09:45:41 -04:00
2024-05-19 08:53:21 -04:00
// now find the chapter that corresponds to the current time
// and calculate the progress of the current chapter
final currentChapterProgress = currentChapter == null
2024-05-19 09:45:41 -04:00
? null
: (player.positionInBook - currentChapter.start);
2024-05-19 08:53:21 -04:00
final currentChapterBuffered = currentChapter == null
2024-05-19 09:45:41 -04:00
? null
: (player.bufferedPositionInBook - currentChapter.start);
2024-05-19 08:53:21 -04:00
return ProgressBar(
2024-05-19 09:45:41 -04:00
progress:
currentChapterProgress ?? position.data ?? const Duration(seconds: 0),
2024-05-19 08:53:21 -04:00
total: currentChapter == null
? player.book?.duration ?? const Duration(seconds: 0)
: currentChapter.end - currentChapter.start,
// ! TODO add onSeek
onSeek: (duration) {
player.seek(
duration + (currentChapter?.start ?? const Duration(seconds: 0)),
);
},
2024-05-19 08:53:21 -04:00
thumbRadius: 8,
2024-05-19 09:45:41 -04:00
buffered:
currentChapterBuffered ?? buffered.data ?? const Duration(seconds: 0),
2024-05-19 08:53:21 -04:00
bufferedBarColor: Theme.of(context).colorScheme.secondary,
timeLabelType: TimeLabelType.remainingTime,
timeLabelLocation: TimeLabelLocation.below,
);
}
}
2024-05-17 11:04:20 -04:00
// ! TODO remove onTap
void onTap() {}