groove/Vaani
1
0
Fork 0
mirror of https://github.com/Dr-Blank/Vaani.git synced 2026-02-16 06:19:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

替换miniPlayer

Browse source
This commit is contained in:
rang 2025-11-13 17:53:23 +08:00
parent eb9b8f3b94
commit e67d045da6
34 changed files with 1777 additions and 1078 deletions
Download patch file Download diff file Expand all files Collapse all files

426
lib/features/player/view/audiobook_player.dart
View file

@ -1,271 +1,195 @@
import 'dart:math';
// 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';
import 'package:just_audio/just_audio.dart';
import 'package:miniplayer/miniplayer.dart';
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 'package:flutter/material.dart';
// import 'package:flutter_hooks/flutter_hooks.dart';
// import 'package:hooks_riverpod/hooks_riverpod.dart';
// import 'package:just_audio/just_audio.dart';
// import 'package:miniplayer/miniplayer.dart';
// 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';
// import 'player_when_expanded.dart';
// import 'player_when_minimized.dart';
const playerMaxHeightPercentOfScreen = 0.8;
// const playerMaxHeightPercentOfScreen = 0.8;
class AudiobookPlayer extends HookConsumerWidget {
const AudiobookPlayer({super.key});
// class AudiobookPlayer extends HookConsumerWidget {
// const AudiobookPlayer({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
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();
// @override
// Widget build(BuildContext context, WidgetRef ref) {
// 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,
);
// final playPauseController = useAnimationController(
// duration: const Duration(milliseconds: 200),
// initialValue: 1,
// );
// add controller to the player state listener
player.playerStateStream.listen((state) {
if (state.playing) {
playPauseController.forward();
} else {
playPauseController.reverse();
}
});
// // add controller to the player state listener
// player.playerStateStream.listen((state) {
// if (state.playing) {
// playPauseController.forward();
// } 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,
),
);
// // theme from image
// final imageTheme = ref.watch(
// themeOfLibraryItemProvider(
// itemBeingPlayed.valueOrNull?.id,
// brightness: Theme.of(context).brightness,
// highContrast: appSettings.themeSettings.highContrast ||
// MediaQuery.of(context).highContrast,
// ),
// );
// max height of the player is the height of the screen
final playerMaxHeight = MediaQuery.of(context).size.height;
// // max height of the player is the height of the screen
// final playerMaxHeight = MediaQuery.of(context).size.height;
final availWidth = MediaQuery.of(context).size.width;
// final availWidth = MediaQuery.of(context).size.width;
// the image width when the player is expanded
final maxImgSize = min(playerMaxHeight * 0.5, availWidth * 0.9);
// // the image width when the player is expanded
// final maxImgSize = min(playerMaxHeight * 0.5, availWidth * 0.9);
final preferredVolume = appSettings.playerSettings.preferredDefaultVolume;
return Theme(
data: ThemeData(
colorScheme: imageTheme.valueOrNull ?? Theme.of(context).colorScheme,
),
child: Miniplayer(
valueNotifier: ref.watch(playerExpandProgressNotifierProvider),
onDragDown: (percentage) async {
// preferred volume
// set volume to 0 when dragging down
await player
.setVolume(preferredVolume * (1 - percentage.clamp(0, .75)));
},
minHeight: playerMinHeight,
// subtract the height of notches and other system UI
maxHeight: playerMaxHeight,
controller: audioBookMiniplayerController,
elevation: 4,
// duration: Duration(seconds: 3),
onDismissed: () {
// add a delay before closing the player
// to allow the user to see the player closing
Future.delayed(const Duration(milliseconds: 300), () {
player.setSourceAudiobook(null);
});
},
curve: Curves.linear,
builder: (height, percentage) {
// 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
final miniplayerPercentageDeclaration =
(maxImgSize - playerMinHeight) /
(playerMaxHeight - playerMinHeight);
final bool isFormMiniplayer =
percentage < miniplayerPercentageDeclaration;
// final preferredVolume = appSettings.playerSettings.preferredDefaultVolume;
// return Theme(
// data: ThemeData(
// colorScheme: imageTheme.valueOrNull ?? Theme.of(context).colorScheme,
// ),
// child: Miniplayer(
// valueNotifier: ref.watch(playerExpandProgressNotifierProvider),
// onDragDown: (percentage) async {
// // preferred volume
// // set volume to 0 when dragging down
// await player
// .setVolume(preferredVolume * (1 - percentage.clamp(0, .75)));
// },
// minHeight: playerMinHeight,
// // subtract the height of notches and other system UI
// maxHeight: playerMaxHeight,
// controller: audioBookMiniplayerController,
// elevation: 4,
// // duration: Duration(seconds: 3),
// onDismissed: () {
// // add a delay before closing the player
// // to allow the user to see the player closing
// Future.delayed(const Duration(milliseconds: 300), () {
// player.setSourceAudiobook(null);
// });
// },
// curve: Curves.linear,
// builder: (height, percentage) {
// // 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
// final miniplayerPercentageDeclaration =
// (maxImgSize - playerMinHeight) /
// (playerMaxHeight - playerMinHeight);
// final bool isFormMiniplayer =
// percentage < miniplayerPercentageDeclaration;
if (!isFormMiniplayer) {
// this calculation needs a refactor
var percentageExpandedPlayer = percentage
.inverseLerp(
miniplayerPercentageDeclaration,
1,
)
.clamp(0.0, 1.0);
// if (!isFormMiniplayer) {
// // this calculation needs a refactor
// var percentageExpandedPlayer = percentage
// .inverseLerp(
// miniplayerPercentageDeclaration,
// 1,
// )
// .clamp(0.0, 1.0);
return PlayerWhenExpanded(
imageSize: maxImgSize,
img: imgWidget,
percentageExpandedPlayer: percentageExpandedPlayer,
playPauseController: playPauseController,
);
}
// return PlayerWhenExpanded(
// imageSize: maxImgSize,
// img: imgWidget,
// percentageExpandedPlayer: percentageExpandedPlayer,
// playPauseController: playPauseController,
// );
// }
//Miniplayer
final percentageMiniplayer = percentage.inverseLerp(
0,
miniplayerPercentageDeclaration,
);
// //Miniplayer
// final percentageMiniplayer = percentage.inverseLerp(
// 0,
// miniplayerPercentageDeclaration,
// );
return PlayerWhenMinimized(
maxImgSize: maxImgSize,
availWidth: availWidth,
imgWidget: imgWidget,
playPauseController: playPauseController,
percentageMiniplayer: percentageMiniplayer,
);
},
),
);
}
}
// return PlayerWhenMinimized(
// maxImgSize: maxImgSize,
// availWidth: availWidth,
// imgWidget: imgWidget,
// playPauseController: playPauseController,
// percentageMiniplayer: percentageMiniplayer,
// );
// },
// ),
// );
// }
// }
class AudiobookPlayerPlayPauseButton extends HookConsumerWidget {
const AudiobookPlayerPlayPauseButton({
super.key,
required this.playPauseController,
this.iconSize = 48.0,
});
// class AudiobookPlayerPlayPauseButton extends HookConsumerWidget {
// const AudiobookPlayerPlayPauseButton({
// super.key,
// required this.playPauseController,
// this.iconSize = 48.0,
// });
final double iconSize;
final AnimationController playPauseController;
@override
Widget build(BuildContext context, WidgetRef ref) {
final player = ref.watch(audiobookPlayerProvider);
// final double iconSize;
// final AnimationController playPauseController;
// @override
// Widget build(BuildContext context, WidgetRef ref) {
// final player = ref.watch(audiobookPlayerProvider);
return switch (player.processingState) {
ProcessingState.loading || ProcessingState.buffering => const Padding(
padding: EdgeInsets.all(8.0),
child: CircularProgressIndicator(),
),
ProcessingState.completed => IconButton(
onPressed: () async {
await player.seekInBook(const Duration(seconds: 0));
await player.play();
},
icon: const Icon(
Icons.replay,
),
),
ProcessingState.ready => IconButton(
onPressed: () async {
await player.togglePlayPause();
},
iconSize: iconSize,
icon: AnimatedIcon(
icon: AnimatedIcons.play_pause,
progress: playPauseController,
),
),
ProcessingState.idle => const SizedBox.shrink(),
};
}
}
// return switch (player.processingState) {
// ProcessingState.loading || ProcessingState.buffering => const Padding(
// padding: EdgeInsets.all(8.0),
// child: CircularProgressIndicator(),
// ),
// ProcessingState.completed => IconButton(
// onPressed: () async {
// await player.seekInBook(const Duration(seconds: 0));
// await player.play();
// },
// icon: const Icon(
// Icons.replay,
// ),
// ),
// ProcessingState.ready => IconButton(
// onPressed: () async {
// await player.togglePlayPause();
// },
// iconSize: iconSize,
// icon: AnimatedIcon(
// icon: AnimatedIcons.play_pause,
// progress: playPauseController,
// ),
// ),
// ProcessingState.idle => const SizedBox.shrink(),
// };
// }
// }
class AudiobookChapterProgressBar extends HookConsumerWidget {
const AudiobookChapterProgressBar({
super.key,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final player = ref.watch(audiobookPlayerProvider);
final currentChapter = ref.watch(currentPlayingChapterProvider);
final position = useStream(
player.positionStreamInBook,
initialData: const Duration(seconds: 0),
);
final buffered = useStream(
player.bufferedPositionStreamInBook,
initialData: const Duration(seconds: 0),
);
// now find the chapter that corresponds to the current time
// and calculate the progress of the current chapter
final currentChapterProgress = currentChapter == null
? null
: (player.positionInBook - currentChapter.start);
final currentChapterBuffered = currentChapter == null
? null
: (player.bufferedPositionInBook - currentChapter.start);
return ProgressBar(
progress:
currentChapterProgress ?? position.data ?? const Duration(seconds: 0),
total: currentChapter == null
? player.book?.duration ?? const Duration(seconds: 0)
: currentChapter.end - currentChapter.start,
// ! TODO add onSeek
onSeek: (duration) {
player.seekInBook(
duration + (currentChapter?.start ?? const Duration(seconds: 0)),
);
// player.seek(duration);
},
thumbRadius: 8,
buffered:
currentChapterBuffered ?? buffered.data ?? const Duration(seconds: 0),
bufferedBarColor: Theme.of(context).colorScheme.secondary,
timeLabelType: TimeLabelType.remainingTime,
timeLabelLocation: TimeLabelLocation.below,
);
}
}
class AudiobookProgressBar extends HookConsumerWidget {
const AudiobookProgressBar({
super.key,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final player = ref.watch(audiobookPlayerProvider);
final position = useStream(
player.slowPositionStreamInBook,
initialData: const Duration(seconds: 0),
);
return ProgressBar(
progress: position.data ?? const Duration(seconds: 0),
total: player.book?.duration ?? const Duration(seconds: 0),
thumbRadius: 8,
bufferedBarColor: Theme.of(context).colorScheme.secondary,
timeLabelType: TimeLabelType.remainingTime,
timeLabelLocation: TimeLabelLocation.below,
);
}
}
// ! TODO remove onTap
void onTap() {}
// // ! TODO remove onTap
// void onTap() {}

227
lib/features/player/view/player_expanded.dart Normal file
View file

@ -0,0 +1,227 @@
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:vaani/api/image_provider.dart';
import 'package:vaani/api/library_item_provider.dart';
import 'package:vaani/constants/sizes.dart';
import 'package:vaani/features/player/providers/currently_playing_provider.dart';
import 'package:vaani/features/player/view/widgets/player_player_pause_button.dart';
import 'package:vaani/features/player/view/widgets/player_progress_bar.dart';
import 'package:vaani/features/skip_start_end/player_skip_chapter_start_end.dart';
import 'package:vaani/features/sleep_timer/view/sleep_timer_button.dart';
import 'package:vaani/shared/widgets/not_implemented.dart';
import 'package:vaani/shared/widgets/shelves/book_shelf.dart';
import 'widgets/audiobook_player_seek_button.dart';
import 'widgets/audiobook_player_seek_chapter_button.dart';
import 'widgets/chapter_selection_button.dart';
import 'widgets/player_speed_adjust_button.dart';
var pendingPlayerModals = 0;
class PlayerExpanded extends HookConsumerWidget {
const PlayerExpanded({
super.key,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
/// all the properties that help in building the widget are calculated from the [percentageExpandedPlayer]
/// however, some properties need to start later than 0% and end before 100%
final currentBook = ref.watch(currentlyPlayingBookProvider);
if (currentBook == null) {
return const SizedBox.shrink();
}
final currentChapter = ref.watch(currentPlayingChapterProvider);
final currentBookMetadata = ref.watch(currentBookMetadataProvider);
// max height of the player is the height of the screen
final playerMaxHeight = MediaQuery.of(context).size.height;
final availWidth = MediaQuery.of(context).size.width;
// the image width when the player is expanded
final imageSize = min(playerMaxHeight * 0.5, availWidth * 0.9);
final itemBeingPlayed =
ref.watch(libraryItemProvider(currentBook.libraryItemId));
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();
return Scaffold(
appBar: AppBar(
leading: IconButton(
iconSize: 30,
icon: const Icon(Icons.keyboard_arrow_down),
onPressed: () => context.pop(),
),
actions: [
IconButton(
icon: const Icon(Icons.cast),
onPressed: () {
showNotImplementedToast(context);
},
),
],
),
body: Column(
children: [
// sized box for system status bar; not needed as not full screen
SizedBox(
height: MediaQuery.of(context).padding.top,
),
// the image
Padding(
padding: EdgeInsets.only(top: AppElementSizes.paddingLarge),
child: Align(
alignment: Alignment.center,
// add a shadow to the image elevation hovering effect
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Theme.of(context)
.colorScheme
.primary
.withValues(alpha: 0.1),
blurRadius: 32,
spreadRadius: 8,
),
],
),
child: SizedBox(
height: imageSize,
child: InkWell(
onTap: () {},
child: ClipRRect(
borderRadius: BorderRadius.circular(
AppElementSizes.borderRadiusRegular,
),
child: imgWidget,
),
),
),
),
),
),
// the chapter title
Expanded(
child: Padding(
padding: EdgeInsets.only(top: AppElementSizes.paddingRegular),
child: currentChapter == null
? const SizedBox()
: Text(
currentChapter.title,
style: Theme.of(context).textTheme.titleLarge,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
),
// the book name and author
Expanded(
child: Padding(
padding: EdgeInsets.only(bottom: AppElementSizes.paddingRegular),
child: Text(
[
currentBookMetadata?.title ?? '',
currentBookMetadata?.authorName ?? '',
].join(' - '),
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: Theme.of(context)
.colorScheme
.onSurface
.withValues(alpha: 0.7),
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
),
// the progress bar
Expanded(
child: SizedBox(
width: imageSize,
child: Padding(
padding: EdgeInsets.only(
left: AppElementSizes.paddingRegular,
right: AppElementSizes.paddingRegular,
),
child: const AudiobookChapterProgressBar(),
),
),
),
Expanded(
child: SizedBox(
width: imageSize,
child: Padding(
padding: EdgeInsets.only(
left: AppElementSizes.paddingRegular,
right: AppElementSizes.paddingRegular,
),
child: const AudiobookProgressBar(),
),
),
),
// the chapter skip buttons, seek 30 seconds back and forward, and play/pause button
Expanded(
flex: 2,
child: SizedBox(
width: imageSize,
height: AppElementSizes.iconSizeRegular,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// previous chapter
const AudiobookPlayerSeekChapterButton(isForward: false),
// buttonSkipBackwards
const AudiobookPlayerSeekButton(isForward: false),
AudiobookPlayerPlayPauseButton(),
// buttonSkipForwards
const AudiobookPlayerSeekButton(isForward: true),
// next chapter
const AudiobookPlayerSeekChapterButton(isForward: true),
],
),
),
),
// speed control, sleep timer, chapter list, and settings
Expanded(
child: SizedBox(
width: imageSize,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// speed control
const PlayerSpeedAdjustButton(),
const Spacer(),
// sleep timer
const SleepTimerButton(),
const Spacer(),
// chapter list
const ChapterSelectionButton(),
const Spacer(),
// 跳过片头片尾
SkipChapterStartEndButton(),
],
),
),
),
],
),
);
}
}

160
lib/features/player/view/player_minimized.dart Normal file
View file

@ -0,0 +1,160 @@
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:vaani/api/image_provider.dart';
import 'package:vaani/api/library_item_provider.dart';
import 'package:vaani/constants/sizes.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/view/widgets/player_player_pause_button.dart';
import 'package:vaani/router/router.dart';
import 'package:vaani/shared/widgets/shelves/book_shelf.dart';
/// The height of the player when it is minimized
const double playerMinimizedHeight = 70;
class PlayerMinimized extends HookConsumerWidget {
const PlayerMinimized({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 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 bookMetaExpanded = ref.watch(currentBookMetadataProvider);
final currentChapter = ref.watch(currentPlayingChapterProvider);
return PlayerMinimizedFramework(
children: [
// image
Padding(
padding: EdgeInsets.all(AppElementSizes.paddingSmall),
child: InkWell(
onTap: () {
// navigate to item page
context.pushNamed(
Routes.libraryItem.name,
pathParameters: {
Routes.libraryItem.pathParamName!: currentBook.libraryItemId,
},
);
},
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: playerMinimizedHeight,
),
child: imgWidget,
),
),
),
// author and title of the book
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: AppElementSizes.paddingRegular,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
// AutoScrollText(
Text(
'${bookMetaExpanded?.title ?? ''} - ${currentChapter?.title ?? ''}',
maxLines: 1, overflow: TextOverflow.ellipsis,
// velocity:
// const Velocity(pixelsPerSecond: Offset(16, 0)),
style: Theme.of(context).textTheme.bodyLarge,
),
Text(
bookMetaExpanded?.authorName ?? '',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: Theme.of(context)
.colorScheme
.onSurface
.withValues(alpha: 0.7),
),
),
],
),
),
),
// rewind button
Padding(
padding: const EdgeInsets.only(left: 8),
child: IconButton(
icon: const Icon(
Icons.replay_30,
size: AppElementSizes.iconSizeSmall,
),
onPressed: () {},
),
),
// play/pause button
Padding(
padding: const EdgeInsets.only(right: 8),
child: AudiobookPlayerPlayPauseButton(),
),
],
);
}
}
class PlayerMinimizedFramework extends HookConsumerWidget {
final List<Widget> children;
const PlayerMinimizedFramework({super.key, required this.children});
@override
Widget build(BuildContext context, WidgetRef ref) {
final player = ref.watch(audiobookPlayerProvider);
final progress =
useStream(player.positionStream, initialData: Duration.zero);
return GestureDetector(
onTap: () => context.pushNamed(Routes.player.name),
child: Container(
height: playerMinimizedHeight,
color: Theme.of(context).colorScheme.surface,
child: Stack(
alignment: Alignment.topCenter,
children: [
Row(
children: children,
),
SizedBox(
height: AppElementSizes.barHeight,
child: LinearProgressIndicator(
// value: (progress.data ?? Duration.zero).inSeconds /
// player.book!.duration.inSeconds,
value: (progress.data ?? Duration.zero).inSeconds /
(player.duration?.inSeconds ?? 1),
color: Theme.of(context).colorScheme.onPrimaryContainer,
backgroundColor: Theme.of(context).colorScheme.primaryContainer,
),
),
],
),
),
);
}
}

555
lib/features/player/view/player_when_expanded.dart
View file

@ -1,292 +1,293 @@
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:miniplayer/miniplayer.dart';
import 'package:vaani/constants/sizes.dart';
import 'package:vaani/features/player/providers/currently_playing_provider.dart';
import 'package:vaani/features/player/providers/player_form.dart';
import 'package:vaani/features/player/view/audiobook_player.dart';
import 'package:vaani/features/skip_start_end/player_skip_chapter_start_end.dart';
import 'package:vaani/features/sleep_timer/view/sleep_timer_button.dart';
import 'package:vaani/shared/extensions/inverse_lerp.dart';
import 'package:vaani/shared/widgets/not_implemented.dart';
// import 'package:flutter/material.dart';
// import 'package:hooks_riverpod/hooks_riverpod.dart';
// import 'package:miniplayer/miniplayer.dart';
// import 'package:vaani/constants/sizes.dart';
// import 'package:vaani/features/player/providers/currently_playing_provider.dart';
// import 'package:vaani/features/player/providers/player_form.dart';
// import 'package:vaani/features/player/view/audiobook_player.dart';
// import 'package:vaani/features/player/view/widgets/player_progress_bar.dart';
// import 'package:vaani/features/skip_start_end/player_skip_chapter_start_end.dart';
// import 'package:vaani/features/sleep_timer/view/sleep_timer_button.dart';
// import 'package:vaani/shared/extensions/inverse_lerp.dart';
// import 'package:vaani/shared/widgets/not_implemented.dart';
import 'widgets/audiobook_player_seek_button.dart';
import 'widgets/audiobook_player_seek_chapter_button.dart';
import 'widgets/chapter_selection_button.dart';
import 'widgets/player_speed_adjust_button.dart';
// import 'widgets/audiobook_player_seek_button.dart';
// import 'widgets/audiobook_player_seek_chapter_button.dart';
// import 'widgets/chapter_selection_button.dart';
// import 'widgets/player_speed_adjust_button.dart';
var pendingPlayerModals = 0;
// var pendingPlayerModals = 0;
class PlayerWhenExpanded extends HookConsumerWidget {
const PlayerWhenExpanded({
super.key,
required this.imageSize,
required this.img,
required this.percentageExpandedPlayer,
required this.playPauseController,
});
// class PlayerWhenExpanded extends HookConsumerWidget {
// const PlayerWhenExpanded({
// super.key,
// required this.imageSize,
// required this.img,
// required this.percentageExpandedPlayer,
// required this.playPauseController,
// });
/// padding values control the position of the image
final double imageSize;
final Widget img;
final double percentageExpandedPlayer;
final AnimationController playPauseController;
// /// padding values control the position of the image
// final double imageSize;
// final Widget img;
// final double percentageExpandedPlayer;
// final AnimationController playPauseController;
@override
Widget build(BuildContext context, WidgetRef ref) {
/// all the properties that help in building the widget are calculated from the [percentageExpandedPlayer]
/// however, some properties need to start later than 0% and end before 100%
const lateStart = 0.4;
const earlyEnd = 1;
final earlyPercentage = percentageExpandedPlayer
.inverseLerp(
lateStart,
earlyEnd,
)
.clamp(0.0, 1.0);
final currentChapter = ref.watch(currentPlayingChapterProvider);
final currentBookMetadata = ref.watch(currentBookMetadataProvider);
// @override
// Widget build(BuildContext context, WidgetRef ref) {
// /// all the properties that help in building the widget are calculated from the [percentageExpandedPlayer]
// /// however, some properties need to start later than 0% and end before 100%
// const lateStart = 0.4;
// const earlyEnd = 1;
// final earlyPercentage = percentageExpandedPlayer
// .inverseLerp(
// lateStart,
// earlyEnd,
// )
// .clamp(0.0, 1.0);
// final currentChapter = ref.watch(currentPlayingChapterProvider);
// final currentBookMetadata = ref.watch(currentBookMetadataProvider);
return Column(
children: [
// sized box for system status bar; not needed as not full screen
SizedBox(
height: MediaQuery.of(context).padding.top * earlyPercentage,
),
// return Column(
// children: [
// // sized box for system status bar; not needed as not full screen
// SizedBox(
// height: MediaQuery.of(context).padding.top * earlyPercentage,
// ),
// a row with a down arrow to minimize the player, a pill shaped container to drag the player, and a cast button
ConstrainedBox(
constraints: BoxConstraints(
maxHeight: 100 * earlyPercentage,
),
child: Opacity(
opacity: earlyPercentage,
child: Padding(
padding: EdgeInsets.only(top: 8.0 * earlyPercentage),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// the down arrow
IconButton(
iconSize: 30,
icon: const Icon(Icons.keyboard_arrow_down),
onPressed: () {
// minimize the player
audioBookMiniplayerController.animateToHeight(
state: PanelState.MIN,
);
},
),
// // a row with a down arrow to minimize the player, a pill shaped container to drag the player, and a cast button
// ConstrainedBox(
// constraints: BoxConstraints(
// maxHeight: 100 * earlyPercentage,
// ),
// child: Opacity(
// opacity: earlyPercentage,
// child: Padding(
// padding: EdgeInsets.only(top: 8.0 * earlyPercentage),
// child: Row(
// crossAxisAlignment: CrossAxisAlignment.center,
// mainAxisSize: MainAxisSize.max,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// children: [
// // the down arrow
// IconButton(
// iconSize: 30,
// icon: const Icon(Icons.keyboard_arrow_down),
// onPressed: () {
// // minimize the player
// audioBookMiniplayerController.animateToHeight(
// state: PanelState.MIN,
// );
// },
// ),
// the cast button
IconButton(
icon: const Icon(Icons.cast),
onPressed: () {
showNotImplementedToast(context);
},
),
],
),
),
),
),
// // the cast button
// IconButton(
// icon: const Icon(Icons.cast),
// onPressed: () {
// showNotImplementedToast(context);
// },
// ),
// ],
// ),
// ),
// ),
// ),
// the image
Padding(
padding: EdgeInsets.only(
top: AppElementSizes.paddingLarge * earlyPercentage,
),
child: Align(
alignment: Alignment.center,
// add a shadow to the image elevation hovering effect
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Theme.of(context)
.colorScheme
.primary
.withValues(alpha: 0.1),
blurRadius: 32 * earlyPercentage,
spreadRadius: 8 * earlyPercentage,
// offset: Offset(0, 16 * earlyPercentage),
),
],
),
child: SizedBox(
height: imageSize,
child: InkWell(
onTap: () {},
child: ClipRRect(
borderRadius: BorderRadius.circular(
AppElementSizes.borderRadiusRegular * earlyPercentage,
),
child: img,
),
),
),
),
),
),
// // the image
// Padding(
// padding: EdgeInsets.only(
// top: AppElementSizes.paddingLarge * earlyPercentage,
// ),
// child: Align(
// alignment: Alignment.center,
// // add a shadow to the image elevation hovering effect
// child: Container(
// decoration: BoxDecoration(
// boxShadow: [
// BoxShadow(
// color: Theme.of(context)
// .colorScheme
// .primary
// .withValues(alpha: 0.1),
// blurRadius: 32 * earlyPercentage,
// spreadRadius: 8 * earlyPercentage,
// // offset: Offset(0, 16 * earlyPercentage),
// ),
// ],
// ),
// child: SizedBox(
// height: imageSize,
// child: InkWell(
// onTap: () {},
// child: ClipRRect(
// borderRadius: BorderRadius.circular(
// AppElementSizes.borderRadiusRegular * earlyPercentage,
// ),
// child: img,
// ),
// ),
// ),
// ),
// ),
// ),
// the chapter title
Expanded(
child: Opacity(
opacity: earlyPercentage,
child: Padding(
padding: EdgeInsets.only(
top: AppElementSizes.paddingRegular * earlyPercentage,
// horizontal: 16.0,
),
// child: SizedBox(
// same as the image width
// width: imageSize,
child: currentChapter == null
? const SizedBox()
: Text(
currentChapter.title,
style: Theme.of(context).textTheme.titleLarge,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
// ),
),
),
),
// // the chapter title
// Expanded(
// child: Opacity(
// opacity: earlyPercentage,
// child: Padding(
// padding: EdgeInsets.only(
// top: AppElementSizes.paddingRegular * earlyPercentage,
// // horizontal: 16.0,
// ),
// // child: SizedBox(
// // same as the image width
// // width: imageSize,
// child: currentChapter == null
// ? const SizedBox()
// : Text(
// currentChapter.title,
// style: Theme.of(context).textTheme.titleLarge,
// maxLines: 1,
// overflow: TextOverflow.ellipsis,
// ),
// // ),
// ),
// ),
// ),
// the book name and author
Expanded(
child: Opacity(
opacity: earlyPercentage,
child: Padding(
padding: EdgeInsets.only(
bottom: AppElementSizes.paddingRegular * earlyPercentage,
// horizontal: 16.0,
),
// child: SizedBox(
// same as the image width
// width: imageSize,
child: Text(
[
currentBookMetadata?.title ?? '',
currentBookMetadata?.authorName ?? '',
].join(' - '),
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: Theme.of(context)
.colorScheme
.onSurface
.withValues(alpha: 0.7),
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
// ),
),
),
),
// // the book name and author
// Expanded(
// child: Opacity(
// opacity: earlyPercentage,
// child: Padding(
// padding: EdgeInsets.only(
// bottom: AppElementSizes.paddingRegular * earlyPercentage,
// // horizontal: 16.0,
// ),
// // child: SizedBox(
// // same as the image width
// // width: imageSize,
// child: Text(
// [
// currentBookMetadata?.title ?? '',
// currentBookMetadata?.authorName ?? '',
// ].join(' - '),
// style: Theme.of(context).textTheme.titleMedium?.copyWith(
// color: Theme.of(context)
// .colorScheme
// .onSurface
// .withValues(alpha: 0.7),
// ),
// maxLines: 1,
// overflow: TextOverflow.ellipsis,
// ),
// // ),
// ),
// ),
// ),
// the progress bar
Expanded(
child: Opacity(
opacity: earlyPercentage,
child: SizedBox(
width: imageSize,
child: Padding(
padding: EdgeInsets.only(
// top: AppElementSizes.paddingRegular * earlyPercentage,
left: AppElementSizes.paddingRegular * earlyPercentage,
right: AppElementSizes.paddingRegular * earlyPercentage,
),
child: const AudiobookChapterProgressBar(),
),
),
),
),
// // the progress bar
// Expanded(
// child: Opacity(
// opacity: earlyPercentage,
// child: SizedBox(
// width: imageSize,
// child: Padding(
// padding: EdgeInsets.only(
// // top: AppElementSizes.paddingRegular * earlyPercentage,
// left: AppElementSizes.paddingRegular * earlyPercentage,
// right: AppElementSizes.paddingRegular * earlyPercentage,
// ),
// child: const AudiobookChapterProgressBar(),
// ),
// ),
// ),
// ),
Expanded(
child: Opacity(
opacity: earlyPercentage,
child: SizedBox(
width: imageSize,
child: Padding(
padding: EdgeInsets.only(
// top: AppElementSizes.paddingRegular * earlyPercentage,
left: AppElementSizes.paddingRegular * earlyPercentage,
right: AppElementSizes.paddingRegular * earlyPercentage,
),
child: const AudiobookProgressBar(),
),
),
),
),
// Expanded(
// child: Opacity(
// opacity: earlyPercentage,
// child: SizedBox(
// width: imageSize,
// child: Padding(
// padding: EdgeInsets.only(
// // top: AppElementSizes.paddingRegular * earlyPercentage,
// left: AppElementSizes.paddingRegular * earlyPercentage,
// right: AppElementSizes.paddingRegular * earlyPercentage,
// ),
// child: const AudiobookProgressBar(),
// ),
// ),
// ),
// ),
// the chapter skip buttons, seek 30 seconds back and forward, and play/pause button
Expanded(
flex: 2,
child: Opacity(
opacity: earlyPercentage,
child: SizedBox(
width: imageSize,
height: AppElementSizes.iconSizeRegular,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// previous chapter
const AudiobookPlayerSeekChapterButton(isForward: false),
// buttonSkipBackwards
const AudiobookPlayerSeekButton(isForward: false),
AudiobookPlayerPlayPauseButton(
playPauseController: playPauseController,
),
// buttonSkipForwards
const AudiobookPlayerSeekButton(isForward: true),
// next chapter
const AudiobookPlayerSeekChapterButton(isForward: true),
],
),
),
),
),
// // the chapter skip buttons, seek 30 seconds back and forward, and play/pause button
// Expanded(
// flex: 2,
// child: Opacity(
// opacity: earlyPercentage,
// child: SizedBox(
// width: imageSize,
// height: AppElementSizes.iconSizeRegular,
// child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// children: [
// // previous chapter
// const AudiobookPlayerSeekChapterButton(isForward: false),
// // buttonSkipBackwards
// const AudiobookPlayerSeekButton(isForward: false),
// AudiobookPlayerPlayPauseButton(
// playPauseController: playPauseController,
// ),
// // buttonSkipForwards
// const AudiobookPlayerSeekButton(isForward: true),
// // next chapter
// const AudiobookPlayerSeekChapterButton(isForward: true),
// ],
// ),
// ),
// ),
// ),
// speed control, sleep timer, chapter list, and settings
Expanded(
child: Opacity(
opacity: earlyPercentage,
child: SizedBox(
// padding: EdgeInsets.only(
// bottom: AppElementSizes.paddingRegular * 4 * earlyPercentage,
// ),
width: imageSize,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// speed control
const PlayerSpeedAdjustButton(),
const Spacer(),
// sleep timer
const SleepTimerButton(),
const Spacer(),
// chapter list
const ChapterSelectionButton(),
const Spacer(),
// 跳过片头片尾
SkipChapterStartEndButton(),
// settings
// IconButton(
// icon: const Icon(Icons.more_horiz),
// onPressed: () {
// // show toast
// showNotImplementedToast(context);
// },
// ),
],
),
),
),
),
],
);
}
}
// // speed control, sleep timer, chapter list, and settings
// Expanded(
// child: Opacity(
// opacity: earlyPercentage,
// child: SizedBox(
// // padding: EdgeInsets.only(
// // bottom: AppElementSizes.paddingRegular * 4 * earlyPercentage,
// // ),
// width: imageSize,
// child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// children: [
// // speed control
// const PlayerSpeedAdjustButton(),
// const Spacer(),
// // sleep timer
// const SleepTimerButton(),
// const Spacer(),
// // chapter list
// const ChapterSelectionButton(),
// const Spacer(),
// // 跳过片头片尾
// SkipChapterStartEndButton(),
// // settings
// // IconButton(
// // icon: const Icon(Icons.more_horiz),
// // onPressed: () {
// // // show toast
// // showNotImplementedToast(context);
// // },
// // ),
// ],
// ),
// ),
// ),
// ),
// ],
// );
// }
// }

290
lib/features/player/view/player_when_minimized.dart
View file

@ -1,155 +1,155 @@
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:vaani/constants/sizes.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/view/audiobook_player.dart';
import 'package:vaani/router/router.dart';
// import 'package:flutter/material.dart';
// import 'package:flutter_hooks/flutter_hooks.dart';
// import 'package:go_router/go_router.dart';
// import 'package:hooks_riverpod/hooks_riverpod.dart';
// import 'package:vaani/constants/sizes.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/view/audiobook_player.dart';
// import 'package:vaani/router/router.dart';
class PlayerWhenMinimized extends HookConsumerWidget {
const PlayerWhenMinimized({
super.key,
required this.availWidth,
required this.maxImgSize,
required this.imgWidget,
required this.playPauseController,
required this.percentageMiniplayer,
});
// class PlayerWhenMinimized extends HookConsumerWidget {
// const PlayerWhenMinimized({
// super.key,
// required this.availWidth,
// required this.maxImgSize,
// required this.imgWidget,
// required this.playPauseController,
// required this.percentageMiniplayer,
// });
final double availWidth;
final double maxImgSize;
final Widget imgWidget;
final AnimationController playPauseController;
// final double availWidth;
// final double maxImgSize;
// final Widget imgWidget;
// final AnimationController playPauseController;
/// 0 - 1, from minimized to when switched to expanded player
///
/// by the time 1 is reached only image should be visible in the center of the widget
final double percentageMiniplayer;
// /// 0 - 1, from minimized to when switched to expanded player
// ///
// /// by the time 1 is reached only image should be visible in the center of the widget
// final double percentageMiniplayer;
@override
Widget build(BuildContext context, WidgetRef ref) {
final player = ref.watch(audiobookPlayerProvider);
final currentChapter = ref.watch(currentPlayingChapterProvider);
// @override
// Widget build(BuildContext context, WidgetRef ref) {
// final player = ref.watch(audiobookPlayerProvider);
// final currentChapter = ref.watch(currentPlayingChapterProvider);
final vanishingPercentage = 1 - percentageMiniplayer;
// final progress =
// useStream(player.slowPositionStreamInBook, initialData: Duration.zero);
final progress =
useStream(player.positionStream, initialData: Duration.zero);
// final vanishingPercentage = 1 - percentageMiniplayer;
// // final progress =
// // useStream(player.slowPositionStreamInBook, initialData: Duration.zero);
// final progress =
// useStream(player.positionStream, initialData: Duration.zero);
final bookMetaExpanded = ref.watch(currentBookMetadataProvider);
// final bookMetaExpanded = ref.watch(currentBookMetadataProvider);
var barHeight = vanishingPercentage * 3;
// var barHeight = vanishingPercentage * 3;
return Stack(
alignment: Alignment.topCenter,
children: [
Row(
children: [
// image
Padding(
padding: EdgeInsets.only(
left: ((availWidth - maxImgSize) / 2) * percentageMiniplayer,
),
child: InkWell(
onTap: () {
// navigate to item page
context.pushNamed(
Routes.libraryItem.name,
pathParameters: {
Routes.libraryItem.pathParamName!:
player.book!.libraryItemId,
},
);
},
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: maxImgSize,
),
child: imgWidget,
),
),
),
// author and title of the book
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
// AutoScrollText(
Text(
'${bookMetaExpanded?.title ?? ''} - ${currentChapter?.title ?? ''}',
maxLines: 1, overflow: TextOverflow.ellipsis,
// velocity:
// const Velocity(pixelsPerSecond: Offset(16, 0)),
style: Theme.of(context).textTheme.bodyLarge,
),
Text(
bookMetaExpanded?.authorName ?? '',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: Theme.of(context)
.colorScheme
.onSurface
.withValues(alpha: 0.7),
),
),
],
),
),
),
// IconButton(
// icon: const Icon(Icons.fullscreen),
// onPressed: () {
// controller.animateToHeight(state: PanelState.MAX);
// },
// ),
// return Stack(
// alignment: Alignment.topCenter,
// children: [
// Row(
// children: [
// // image
// Padding(
// padding: EdgeInsets.only(
// left: ((availWidth - maxImgSize) / 2) * percentageMiniplayer,
// ),
// child: InkWell(
// onTap: () {
// // navigate to item page
// context.pushNamed(
// Routes.libraryItem.name,
// pathParameters: {
// Routes.libraryItem.pathParamName!:
// player.book!.libraryItemId,
// },
// );
// },
// child: ConstrainedBox(
// constraints: BoxConstraints(
// maxWidth: maxImgSize,
// ),
// child: imgWidget,
// ),
// ),
// ),
// // author and title of the book
// Expanded(
// child: Padding(
// padding: const EdgeInsets.only(left: 8),
// child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.center,
// mainAxisSize: MainAxisSize.min,
// children: [
// // AutoScrollText(
// Text(
// '${bookMetaExpanded?.title ?? ''} - ${currentChapter?.title ?? ''}',
// maxLines: 1, overflow: TextOverflow.ellipsis,
// // velocity:
// // const Velocity(pixelsPerSecond: Offset(16, 0)),
// style: Theme.of(context).textTheme.bodyLarge,
// ),
// Text(
// bookMetaExpanded?.authorName ?? '',
// maxLines: 1,
// overflow: TextOverflow.ellipsis,
// style: Theme.of(context).textTheme.bodyMedium!.copyWith(
// color: Theme.of(context)
// .colorScheme
// .onSurface
// .withValues(alpha: 0.7),
// ),
// ),
// ],
// ),
// ),
// ),
// // IconButton(
// // icon: const Icon(Icons.fullscreen),
// // onPressed: () {
// // controller.animateToHeight(state: PanelState.MAX);
// // },
// // ),
// rewind button
Opacity(
opacity: vanishingPercentage,
child: Padding(
padding: const EdgeInsets.only(left: 8),
child: IconButton(
icon: const Icon(
Icons.replay_30,
size: AppElementSizes.iconSizeSmall,
),
onPressed: () {},
),
),
),
// // rewind button
// Opacity(
// opacity: vanishingPercentage,
// child: Padding(
// padding: const EdgeInsets.only(left: 8),
// child: IconButton(
// icon: const Icon(
// Icons.replay_30,
// size: AppElementSizes.iconSizeSmall,
// ),
// onPressed: () {},
// ),
// ),
// ),
// play/pause button
Opacity(
opacity: vanishingPercentage,
child: Padding(
padding: const EdgeInsets.only(right: 8),
child: AudiobookPlayerPlayPauseButton(
playPauseController: playPauseController,
),
),
),
],
),
SizedBox(
height: barHeight,
child: LinearProgressIndicator(
// value: (progress.data ?? Duration.zero).inSeconds /
// player.book!.duration.inSeconds,
value: (progress.data ?? Duration.zero).inSeconds /
(player.duration?.inSeconds ?? 1),
color: Theme.of(context).colorScheme.onPrimaryContainer,
backgroundColor: Theme.of(context).colorScheme.primaryContainer,
),
),
],
);
}
}
// // play/pause button
// Opacity(
// opacity: vanishingPercentage,
// child: Padding(
// padding: const EdgeInsets.only(right: 8),
// child: AudiobookPlayerPlayPauseButton(
// playPauseController: playPauseController,
// ),
// ),
// ),
// ],
// ),
// SizedBox(
// height: barHeight,
// child: LinearProgressIndicator(
// // value: (progress.data ?? Duration.zero).inSeconds /
// // player.book!.duration.inSeconds,
// value: (progress.data ?? Duration.zero).inSeconds /
// (player.duration?.inSeconds ?? 1),
// color: Theme.of(context).colorScheme.onPrimaryContainer,
// backgroundColor: Theme.of(context).colorScheme.primaryContainer,
// ),
// ),
// ],
// );
// }
// }

4
lib/features/player/view/widgets/audiobook_player_seek_chapter_button.dart
View file

@ -68,9 +68,9 @@ class AudiobookPlayerSeekChapterButton extends HookConsumerWidget {
return;
}
if (isForward) {
player.seekForward();
player.seekToNext();
} else {
player.seekBackward();
player.seekToPrevious();
}
},
);

5
lib/features/player/view/widgets/chapter_selection_button.dart
View file

@ -5,7 +5,7 @@ import 'package:vaani/features/player/providers/audiobook_player.dart'
show audiobookPlayerProvider;
import 'package:vaani/features/player/providers/currently_playing_provider.dart'
show currentPlayingChapterProvider, currentlyPlayingBookProvider;
import 'package:vaani/features/player/view/player_when_expanded.dart'
import 'package:vaani/features/player/view/player_expanded.dart'
show pendingPlayerModals;
import 'package:vaani/features/player/view/widgets/playing_indicator_icon.dart';
import 'package:vaani/main.dart' show appLogger;
@ -117,7 +117,8 @@ class ChapterSelectionModal extends HookConsumerWidget {
key: isCurrent ? chapterKey : null,
onTap: () {
Navigator.of(context).pop();
notifier.seekInBook(chapter.start + 90.ms);
// notifier.seekInBook(chapter.start + 90.ms);
notifier.skipToChapter(chapter.id);
notifier.play();
},
);

56
lib/features/player/view/widgets/player_player_pause_button.dart Normal file
View file

@ -0,0 +1,56 @@
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:just_audio/just_audio.dart';
import 'package:vaani/constants/sizes.dart';
import 'package:vaani/features/player/providers/audiobook_player.dart';
class AudiobookPlayerPlayPauseButton extends HookConsumerWidget {
const AudiobookPlayerPlayPauseButton({
super.key,
this.iconSize = 48.0,
});
final double iconSize;
@override
Widget build(BuildContext context, WidgetRef ref) {
final player = ref.watch(audiobookPlayerProvider);
final playing = ref.watch(isPlayerPlayingProvider);
final playPauseController = useAnimationController(
duration: const Duration(milliseconds: 200),
initialValue: 1,
);
if (playing) {
playPauseController.forward();
} else {
playPauseController.reverse();
}
return switch (player.processingState) {
ProcessingState.loading || ProcessingState.buffering => const Padding(
padding: EdgeInsets.all(AppElementSizes.paddingRegular),
child: CircularProgressIndicator(),
),
ProcessingState.completed => IconButton(
onPressed: () async {
await player.seekInBook(const Duration(seconds: 0));
await player.play();
},
icon: const Icon(
Icons.replay,
),
),
ProcessingState.ready => IconButton(
onPressed: () async {
await player.togglePlayPause();
},
iconSize: iconSize,
icon: AnimatedIcon(
icon: AnimatedIcons.play_pause,
progress: playPauseController,
),
),
ProcessingState.idle => const SizedBox.shrink(),
};
}
}

82
lib/features/player/view/widgets/player_progress_bar.dart Normal file
View file

@ -0,0 +1,82 @@
import 'package:audio_video_progress_bar/audio_video_progress_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:vaani/features/player/providers/audiobook_player.dart';
import 'package:vaani/features/player/providers/currently_playing_provider.dart';
class AudiobookChapterProgressBar extends HookConsumerWidget {
const AudiobookChapterProgressBar({
super.key,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final player = ref.watch(audiobookPlayerProvider);
final currentChapter = ref.watch(currentPlayingChapterProvider);
final position = useStream(
player.positionStreamInBook,
initialData: const Duration(seconds: 0),
);
final buffered = useStream(
player.bufferedPositionStreamInBook,
initialData: const Duration(seconds: 0),
);
// now find the chapter that corresponds to the current time
// and calculate the progress of the current chapter
final currentChapterProgress = currentChapter == null
? null
: (player.positionInBook - currentChapter.start);
final currentChapterBuffered = currentChapter == null
? null
: (player.bufferedPositionInBook - currentChapter.start);
return ProgressBar(
progress:
currentChapterProgress ?? position.data ?? const Duration(seconds: 0),
total: currentChapter == null
? player.book?.duration ?? const Duration(seconds: 0)
: currentChapter.end - currentChapter.start,
// ! TODO add onSeek
onSeek: (duration) {
player.seekInBook(
duration + (currentChapter?.start ?? const Duration(seconds: 0)),
);
// player.seek(duration);
},
thumbRadius: 8,
buffered:
currentChapterBuffered ?? buffered.data ?? const Duration(seconds: 0),
bufferedBarColor: Theme.of(context).colorScheme.secondary,
timeLabelType: TimeLabelType.remainingTime,
timeLabelLocation: TimeLabelLocation.below,
);
}
}
class AudiobookProgressBar extends HookConsumerWidget {
const AudiobookProgressBar({
super.key,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final player = ref.watch(audiobookPlayerProvider);
final position = useStream(
player.slowPositionStreamInBook,
initialData: const Duration(seconds: 0),
);
return ProgressBar(
progress: position.data ?? const Duration(seconds: 0),
total: player.book?.duration ?? const Duration(seconds: 0),
thumbRadius: 8,
bufferedBarColor: Theme.of(context).colorScheme.secondary,
timeLabelType: TimeLabelType.remainingTime,
timeLabelLocation: TimeLabelLocation.below,
);
}
}

2
lib/features/player/view/widgets/player_speed_adjust_button.dart
View file

@ -3,7 +3,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:logging/logging.dart';
import 'package:vaani/features/per_book_settings/providers/book_settings_provider.dart';
import 'package:vaani/features/player/providers/audiobook_player.dart';
import 'package:vaani/features/player/view/player_when_expanded.dart';
import 'package:vaani/features/player/view/player_expanded.dart';
import 'package:vaani/features/player/view/widgets/speed_selector.dart';
import 'package:vaani/settings/app_settings_provider.dart';