mirror of
https://github.com/Dr-Blank/Vaani.git
synced 2025-12-15 23:49:30 +00:00
feat: Add miniplayer
This commit is contained in:
Dr-Blank
parent
610d9a2aa0
commit
7f5309d10a
25 changed files with 355 additions and 29 deletions
|
|
@ -9,7 +9,7 @@ import 'package:shelfsdk/audiobookshelf_api.dart';
|
|||
/// will manage the audio player instance
|
||||
class AudiobookPlayer extends AudioPlayer {
|
||||
// constructor which takes in the BookExpanded object
|
||||
AudiobookPlayer(this.token, this.baseUrl) : super() {
|
||||
AudiobookPlayer(this.token, this.baseUrl, {super.playerId}) : super() {
|
||||
// set the source of the player to the first track in the book
|
||||
}
|
||||
|
||||
|
|
@ -31,12 +31,20 @@ class AudiobookPlayer extends AudioPlayer {
|
|||
final int _currentIndex = 0;
|
||||
|
||||
/// sets the current [AudioTrack] as the source of the player
|
||||
Future<void> setSourceAudioBook(BookExpanded book) async {
|
||||
Future<void> setSourceAudioBook(BookExpanded? book) async {
|
||||
// if the book is null, stop the player
|
||||
if (book == null) {
|
||||
_book = null;
|
||||
return stop();
|
||||
}
|
||||
|
||||
// see if the book is the same as the current book
|
||||
if (_book == book) {
|
||||
// if the book is the same, do nothing
|
||||
return;
|
||||
}
|
||||
// first stop the player
|
||||
await stop();
|
||||
|
||||
var track = book.tracks[_currentIndex];
|
||||
var url = '$baseUrl${track.contentUrl}?token=$token';
|
||||
|
|
@ -64,9 +72,14 @@ class AudiobookPlayer extends AudioPlayer {
|
|||
PlayerState.disposed => throw StateError('Player is disposed'),
|
||||
};
|
||||
}
|
||||
|
||||
/// override resume to set the source if the book is not set
|
||||
@override
|
||||
Future<void> resume() async {
|
||||
if (_book == null) {
|
||||
throw StateError('No book is set');
|
||||
}
|
||||
return super.resume();
|
||||
}
|
||||
}
|
||||
|
||||
void main(List<String> args) {
|
||||
final AudiobookPlayer abPlayer = AudiobookPlayer('', Uri.parse(''));
|
||||
print(abPlayer.resume());
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
import 'package:whispering_pages/api/api_provider.dart';
|
||||
import 'package:whispering_pages/features/player/audiobook_payer.dart' as abp;
|
||||
import 'package:whispering_pages/features/player/core/audiobook_payer.dart' as abp;
|
||||
|
||||
part 'audiobook_player_provider.g.dart';
|
||||
|
||||
|
|
@ -16,15 +16,23 @@ part 'audiobook_player_provider.g.dart';
|
|||
// return player;
|
||||
// }
|
||||
|
||||
const playerId = 'audiobook_player';
|
||||
|
||||
@Riverpod(keepAlive: true)
|
||||
class AudiobookPlayer extends _$AudiobookPlayer {
|
||||
@override
|
||||
abp.AudiobookPlayer build() {
|
||||
final api = ref.watch(authenticatedApiProvider);
|
||||
final player = abp.AudiobookPlayer(api.token!, api.baseUrl);
|
||||
final player =
|
||||
abp.AudiobookPlayer(api.token!, api.baseUrl, playerId: playerId);
|
||||
|
||||
ref.onDispose(player.dispose);
|
||||
|
||||
// bind notify listeners to the player
|
||||
player.onPlayerStateChanged.listen((_) {
|
||||
notifyListeners();
|
||||
});
|
||||
|
||||
return player;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ part of 'audiobook_player_provider.dart';
|
|||
// RiverpodGenerator
|
||||
// **************************************************************************
|
||||
|
||||
String _$audiobookPlayerHash() => r'8cbadcb264382300e63b3dbaf167a3bea1638a6e';
|
||||
String _$audiobookPlayerHash() => r'a636d5e8e73dc6bbf7b3f47f83884bb3af3b9370';
|
||||
|
||||
/// See also [AudiobookPlayer].
|
||||
@ProviderFor(AudiobookPlayer)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
import 'package:shelfsdk/audiobookshelf_api.dart';
|
||||
import 'package:whispering_pages/features/player/providers/audiobook_player_provider.dart';
|
||||
|
||||
part 'currently_playing_provider.g.dart';
|
||||
|
||||
@riverpod
|
||||
BookExpanded? currentlyPlayingBook(CurrentlyPlayingBookRef ref) {
|
||||
final player = ref.watch(audiobookPlayerProvider);
|
||||
return player.book;
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// GENERATED CODE - DO NOT MODIFY BY HAND
|
||||
|
||||
part of 'currently_playing_provider.dart';
|
||||
|
||||
// **************************************************************************
|
||||
// RiverpodGenerator
|
||||
// **************************************************************************
|
||||
|
||||
String _$currentlyPlayingBookHash() =>
|
||||
r'c777ea8b463d8441a0da5e08b4c41b501ce68aad';
|
||||
|
||||
/// See also [currentlyPlayingBook].
|
||||
@ProviderFor(currentlyPlayingBook)
|
||||
final currentlyPlayingBookProvider =
|
||||
AutoDisposeProvider<BookExpanded?>.internal(
|
||||
currentlyPlayingBook,
|
||||
name: r'currentlyPlayingBookProvider',
|
||||
debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
|
||||
? null
|
||||
: _$currentlyPlayingBookHash,
|
||||
dependencies: null,
|
||||
allTransitiveDependencies: null,
|
||||
);
|
||||
|
||||
typedef CurrentlyPlayingBookRef = AutoDisposeProviderRef<BookExpanded?>;
|
||||
// ignore_for_file: type=lint
|
||||
// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member
|
||||
248
lib/features/player/view/audioobok_player.dart
Normal file
248
lib/features/player/view/audioobok_player.dart
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
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() {}
|
||||
Loading…
Add table
Add a link
Reference in a new issue