mirror of
https://github.com/Dr-Blank/Vaani.git
synced 2026-02-18 07:19:34 +00:00
播放界面增加一个总进度条,mini播放器改为单章节进度
This commit is contained in:
parent
63a12f96e4
commit
94f1376572
3 changed files with 62 additions and 38 deletions
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
),
|
),
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue