groove/Vaani
1
0
Fork 0
mirror of https://github.com/Dr-Blank/Vaani.git synced 2025-12-22 10:59:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add audio_video_progress_bar dependency

Browse source
This commit is contained in:
Dr-Blank 2024-05-15 02:27:05 -04:00
parent 7f5309d10a
commit a1dd0e9d3f
No known key found for this signature in database
GPG key ID: 7452CC63F210A266
12 changed files with 467 additions and 255 deletions
Download patch file Download diff file Expand all files Collapse all files

242
lib/features/player/view/audiobook_player.dart Normal file
View file

@ -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() {}

248
lib/features/player/view/audioobok_player.dart
View file

@ -1,248 +0,0 @@
import 'package:flutter/material.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_provider.dart';
import 'package:whispering_pages/features/player/providers/currently_playing_provider.dart';
import 'package:whispering_pages/shared/widgets/shelves/book_shelf.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 = 370;
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 item = ref.watch(libraryItemProvider(currentBook.libraryItemId));
final player = ref.watch(audiobookPlayerProvider);
final image = item.valueOrNull != null
? ref.watch(
coverImageProvider(item.valueOrNull!),
)
: null;
final imgWidget = image?.valueOrNull != null
? Image.memory(
image!.valueOrNull!,
fit: BoxFit.cover,
)
: const BookCoverSkeleton();
return 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 text = Text(player.book?.metadata.title ?? '');
const buttonPlay = IconButton(
icon: Icon(Icons.pause),
onPressed: onTap,
);
const progressIndicator = LinearProgressIndicator(value: 0.3);
//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: 10,
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 Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(
left: paddingLeft,
top: paddingVertical,
bottom: paddingVertical,
),
child: SizedBox(
height: imageSize,
child: imgWidget,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 33),
child: Opacity(
opacity: percentageExpandedPlayer,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Flexible(child: text),
const Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
buttonSkipBackwards,
buttonPlayExpanded,
buttonSkipForward,
],
),
),
const Flexible(child: progressIndicator),
Container(),
Container(),
],
),
),
),
),
],
);
}
//Miniplayer
final percentageMiniplayer = percentageFromValueInRange(
min: playerMinHeight,
max: playerMaxHeight * miniplayerPercentageDeclaration +
playerMinHeight,
value: height,
);
final elementOpacity = 1 - 1 * percentageMiniplayer;
final progressIndicatorHeight = 4 - 4 * percentageMiniplayer;
return Column(
children: [
Expanded(
child: Row(
children: [
ConstrainedBox(
constraints: BoxConstraints(maxHeight: maxImgSize),
child: imgWidget,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 10),
child: Opacity(
opacity: elementOpacity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
player.book?.metadata.title ?? '',
style: Theme.of(context)
.textTheme
.bodyMedium!
.copyWith(fontSize: 16),
),
Text(
'audioObject.subtitle',
style: Theme.of(context)
.textTheme
.bodyMedium!
.copyWith(
color: Theme.of(context)
.textTheme
.bodyMedium!
.color!
.withOpacity(0.55),
),
),
],
),
),
),
),
IconButton(
icon: const Icon(Icons.fullscreen),
onPressed: () {
controller.animateToHeight(state: PanelState.MAX);
},
),
Padding(
padding: const EdgeInsets.only(right: 3),
child: Opacity(
opacity: elementOpacity,
child: buttonPlay,
),
),
],
),
),
SizedBox(
height: progressIndicatorHeight,
child: Opacity(
opacity: elementOpacity,
child: progressIndicator,
),
),
],
);
},
);
}
}
void onTap() {}

79
lib/features/player/view/player_when_expanded.dart Normal file
View file

@ -0,0 +1,79 @@
import 'package:flutter/material.dart';
class PlayerWhenExpanded extends StatelessWidget {
const PlayerWhenExpanded({
super.key,
required this.imgPaddingLeft,
required this.imgPaddingVertical,
required this.imageSize,
required this.img,
required this.percentageExpandedPlayer,
required this.text,
required this.buttonSkipBackwards,
required this.buttonPlayExpanded,
required this.buttonSkipForward,
required this.progressIndicator,
});
/// padding values control the position of the image
final double imgPaddingLeft;
final double imgPaddingVertical;
final double imageSize;
final Widget img;
final double percentageExpandedPlayer;
final Text text;
final IconButton buttonSkipBackwards;
final IconButton buttonPlayExpanded;
final IconButton buttonSkipForward;
final Widget progressIndicator;
@override
Widget build(BuildContext context) {
return Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(
left: imgPaddingLeft,
top: imgPaddingVertical,
// bottom: paddingVertical,
),
child: SizedBox(
height: imageSize,
child: InkWell(
onTap: () {},
child: img,
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 33),
child: Opacity(
opacity: percentageExpandedPlayer,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Flexible(child: text),
Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
buttonSkipBackwards,
buttonPlayExpanded,
buttonSkipForward,
],
),
),
Flexible(child: progressIndicator),
],
),
),
),
),
],
);
}
}

96
lib/features/player/view/player_when_minimized.dart Normal file
View file

@ -0,0 +1,96 @@
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:miniplayer/miniplayer.dart';
import 'package:whispering_pages/features/player/providers/audiobook_player.dart';
import 'package:whispering_pages/features/player/view/audiobook_player.dart';
class PlayerWhenMinimized extends HookConsumerWidget {
const PlayerWhenMinimized({
super.key,
required this.maxImgSize,
required this.imgWidget,
required this.elementOpacity,
required this.playPauseButton,
required this.progressIndicatorHeight,
required this.progressIndicator,
});
final double maxImgSize;
final Widget imgWidget;
final double elementOpacity;
final IconButton playPauseButton;
final double progressIndicatorHeight;
final Widget progressIndicator;
@override
Widget build(BuildContext context, WidgetRef ref) {
final player = ref.watch(audiobookPlayerProvider);
return Column(
children: [
Expanded(
child: Row(
children: [
ConstrainedBox(
constraints: BoxConstraints(maxHeight: maxImgSize),
child: imgWidget,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 10),
child: Opacity(
opacity: elementOpacity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
player.book?.metadata.title ?? '',
style: Theme.of(context)
.textTheme
.bodyMedium!
.copyWith(fontSize: 16),
),
Text(
'audioObject.subtitle',
style:
Theme.of(context).textTheme.bodyMedium!.copyWith(
color: Theme.of(context)
.textTheme
.bodyMedium!
.color!
.withOpacity(0.55),
),
),
],
),
),
),
),
IconButton(
icon: const Icon(Icons.fullscreen),
onPressed: () {
controller.animateToHeight(state: PanelState.MAX);
},
),
Padding(
padding: const EdgeInsets.only(right: 3),
child: Opacity(
opacity: elementOpacity,
child: playPauseButton,
),
),
],
),
),
SizedBox(
height: progressIndicatorHeight,
child: Opacity(
opacity: elementOpacity,
child: progressIndicator,
),
),
],
);
}
}