播放界面增加一个总进度条,mini播放器改为单章节进度

This commit is contained in:
rang 2025-10-25 17:44:19 +08:00
parent 63a12f96e4
commit 94f1376572
3 changed files with 62 additions and 38 deletions

View file

@ -31,8 +31,7 @@ class AudiobookPlayer extends HookConsumerWidget {
if (currentBook == null) { if (currentBook == null) {
return const SizedBox.shrink(); return const SizedBox.shrink();
} }
final itemBeingPlayed = final itemBeingPlayed = ref.watch(libraryItemProvider(currentBook.libraryItemId));
ref.watch(libraryItemProvider(currentBook.libraryItemId));
final player = ref.watch(audiobookPlayerProvider); final player = ref.watch(audiobookPlayerProvider);
final imageOfItemBeingPlayed = itemBeingPlayed.valueOrNull != null final imageOfItemBeingPlayed = itemBeingPlayed.valueOrNull != null
? ref.watch( ? ref.watch(
@ -65,8 +64,7 @@ class AudiobookPlayer extends HookConsumerWidget {
themeOfLibraryItemProvider( themeOfLibraryItemProvider(
itemBeingPlayed.valueOrNull?.id, itemBeingPlayed.valueOrNull?.id,
brightness: Theme.of(context).brightness, brightness: Theme.of(context).brightness,
highContrast: appSettings.themeSettings.highContrast || highContrast: appSettings.themeSettings.highContrast || MediaQuery.of(context).highContrast,
MediaQuery.of(context).highContrast,
), ),
); );
@ -88,8 +86,7 @@ class AudiobookPlayer extends HookConsumerWidget {
onDragDown: (percentage) async { onDragDown: (percentage) async {
// preferred volume // preferred volume
// set volume to 0 when dragging down // set volume to 0 when dragging down
await player await player.setVolume(preferredVolume * (1 - percentage.clamp(0, .75)));
.setVolume(preferredVolume * (1 - percentage.clamp(0, .75)));
}, },
minHeight: playerMinHeight, minHeight: playerMinHeight,
// subtract the height of notches and other system UI // subtract the height of notches and other system UI
@ -109,10 +106,8 @@ class AudiobookPlayer extends HookConsumerWidget {
// at what point should the player switch from miniplayer to expanded player // 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 // also at this point the image should be at its max size and in the center of the player
final miniplayerPercentageDeclaration = final miniplayerPercentageDeclaration =
(maxImgSize - playerMinHeight) / (maxImgSize - playerMinHeight) / (playerMaxHeight - playerMinHeight);
(playerMaxHeight - playerMinHeight); final bool isFormMiniplayer = percentage < miniplayerPercentageDeclaration;
final bool isFormMiniplayer =
percentage < miniplayerPercentageDeclaration;
if (!isFormMiniplayer) { if (!isFormMiniplayer) {
// this calculation needs a refactor // this calculation needs a refactor
@ -212,17 +207,14 @@ class AudiobookChapterProgressBar extends HookConsumerWidget {
// now find the chapter that corresponds to the current time // now find the chapter that corresponds to the current time
// and calculate the progress of the current chapter // and calculate the progress of the current chapter
final currentChapterProgress = currentChapter == null final currentChapterProgress =
? null currentChapter == null ? null : (player.positionInBook - currentChapter.start);
: (player.positionInBook - currentChapter.start);
final currentChapterBuffered = currentChapter == null final currentChapterBuffered =
? null currentChapter == null ? null : (player.bufferedPositionInBook - currentChapter.start);
: (player.bufferedPositionInBook - currentChapter.start);
return ProgressBar( return ProgressBar(
progress: progress: currentChapterProgress ?? position.data ?? const Duration(seconds: 0),
currentChapterProgress ?? position.data ?? const Duration(seconds: 0),
total: currentChapter == null total: currentChapter == null
? player.book?.duration ?? const Duration(seconds: 0) ? player.book?.duration ?? const Duration(seconds: 0)
: currentChapter.end - currentChapter.start, : currentChapter.end - currentChapter.start,
@ -234,8 +226,31 @@ class AudiobookChapterProgressBar extends HookConsumerWidget {
player.seek(duration); player.seek(duration);
}, },
thumbRadius: 8, thumbRadius: 8,
buffered: buffered: currentChapterBuffered ?? buffered.data ?? const Duration(seconds: 0),
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, bufferedBarColor: Theme.of(context).colorScheme.secondary,
timeLabelType: TimeLabelType.remainingTime, timeLabelType: TimeLabelType.remainingTime,
timeLabelLocation: TimeLabelLocation.below, timeLabelLocation: TimeLabelLocation.below,

View file

@ -105,10 +105,7 @@ class PlayerWhenExpanded extends HookConsumerWidget {
decoration: BoxDecoration( decoration: BoxDecoration(
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Theme.of(context) color: Theme.of(context).colorScheme.primary.withValues(alpha: 0.1),
.colorScheme
.primary
.withValues(alpha: 0.1),
blurRadius: 32 * earlyPercentage, blurRadius: 32 * earlyPercentage,
spreadRadius: 8 * earlyPercentage, spreadRadius: 8 * earlyPercentage,
// offset: Offset(0, 16 * earlyPercentage), // offset: Offset(0, 16 * earlyPercentage),
@ -174,10 +171,7 @@ class PlayerWhenExpanded extends HookConsumerWidget {
currentBookMetadata?.authorName ?? '', currentBookMetadata?.authorName ?? '',
].join(' - '), ].join(' - '),
style: Theme.of(context).textTheme.titleMedium?.copyWith( style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: Theme.of(context) color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.7),
.colorScheme
.onSurface
.withValues(alpha: 0.7),
), ),
maxLines: 1, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
@ -205,6 +199,23 @@ class PlayerWhenExpanded extends HookConsumerWidget {
), ),
), ),
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 // the chapter skip buttons, seek 30 seconds back and forward, and play/pause button
Expanded( Expanded(
flex: 2, flex: 2,

View file

@ -34,8 +34,9 @@ class PlayerWhenMinimized extends HookConsumerWidget {
final currentChapter = ref.watch(currentPlayingChapterProvider); final currentChapter = ref.watch(currentPlayingChapterProvider);
final vanishingPercentage = 1 - percentageMiniplayer; final vanishingPercentage = 1 - percentageMiniplayer;
final progress = // final progress =
useStream(player.slowPositionStreamInBook, initialData: Duration.zero); // useStream(player.slowPositionStreamInBook, initialData: Duration.zero);
final progress = useStream(player.positionStream, initialData: Duration.zero);
final bookMetaExpanded = ref.watch(currentBookMetadataProvider); final bookMetaExpanded = ref.watch(currentBookMetadataProvider);
@ -57,8 +58,7 @@ class PlayerWhenMinimized extends HookConsumerWidget {
context.pushNamed( context.pushNamed(
Routes.libraryItem.name, Routes.libraryItem.name,
pathParameters: { pathParameters: {
Routes.libraryItem.pathParamName!: Routes.libraryItem.pathParamName!: player.book!.libraryItemId,
player.book!.libraryItemId,
}, },
); );
}, },
@ -92,10 +92,7 @@ class PlayerWhenMinimized extends HookConsumerWidget {
maxLines: 1, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodyMedium!.copyWith( style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: Theme.of(context) color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.7),
.colorScheme
.onSurface
.withValues(alpha: 0.7),
), ),
), ),
], ],
@ -139,8 +136,9 @@ class PlayerWhenMinimized extends HookConsumerWidget {
SizedBox( SizedBox(
height: barHeight, height: barHeight,
child: LinearProgressIndicator( child: LinearProgressIndicator(
value: (progress.data ?? Duration.zero).inSeconds / // value: (progress.data ?? Duration.zero).inSeconds /
player.book!.duration.inSeconds, // player.book!.duration.inSeconds,
value: (progress.data ?? Duration.zero).inSeconds / player.duration!.inSeconds,
color: Theme.of(context).colorScheme.onPrimaryContainer, color: Theme.of(context).colorScheme.onPrimaryContainer,
backgroundColor: Theme.of(context).colorScheme.primaryContainer, backgroundColor: Theme.of(context).colorScheme.primaryContainer,
), ),