gabehf/Fladder
1
0
Fork 0
mirror of https://github.com/gabehf/Fladder.git synced 2026-03-18 19:56:32 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: Cleanup and performance improvements for posters

Browse source
This commit is contained in:
PartyDonut 2025-10-12 18:30:43 +02:00
parent 9e5537089b
commit b28a409757
7 changed files with 437 additions and 456 deletions
Download patch file Download diff file Expand all files Collapse all files

3
lib/screens/shared/flat_button.dart
View file

@ -18,6 +18,7 @@ class FlatButton extends ConsumerWidget {
final double elevation;
final bool showFeedback;
final Clip clipBehavior;
final List<Widget> overlays;
const FlatButton({
this.child,
this.onFocusChange,
@ -32,6 +33,7 @@ class FlatButton extends ConsumerWidget {
this.elevation = 0,
this.showFeedback = true,
this.clipBehavior = Clip.none,
this.overlays = const [],
super.key,
});
@ -67,6 +69,7 @@ class FlatButton extends ConsumerWidget {
),
),
),
...overlays,
],
);
}

9
lib/screens/shared/media/carousel_banner.dart
View file

@ -70,6 +70,7 @@ class _CarouselBannerState extends ConsumerState<CarouselBanner> {
final opacity = (constraints.maxWidth / maxExtent);
return FocusButton(
onTap: () => widget.items[index].navigateTo(context),
borderRadius: border,
onFocusChanged: (hover) {
context.ensureVisible();
},
@ -155,9 +156,6 @@ class _CarouselBannerState extends ConsumerState<CarouselBanner> {
),
),
),
ExcludeFocus(
child: BannerPlayButton(item: widget.items[index]),
),
IgnorePointer(
child: Container(
decoration: BoxDecoration(
@ -171,6 +169,11 @@ class _CarouselBannerState extends ConsumerState<CarouselBanner> {
),
],
),
overlays: [
ExcludeFocus(
child: BannerPlayButton(item: widget.items[index]),
),
],
);
},
),

120
lib/screens/shared/media/components/poster_image.dart
View file

@ -1,3 +1,4 @@
// poster_image.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
@ -54,7 +55,7 @@ class PosterImage extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final posterRadius = FladderTheme.smallShape.borderRadius;
final radius = FladderTheme.smallShape.borderRadius;
final padding = const EdgeInsets.all(5);
final myKey = key ?? UniqueKey();
@ -74,66 +75,18 @@ class PosterImage extends ConsumerWidget {
}
},
onFocusChanged: onFocusChanged,
onLongPress: () {
showBottomSheetPill(
context: context,
item: poster,
content: (scrollContext, scrollController) => ListView(
shrinkWrap: true,
controller: scrollController,
children: poster
.generateActions(
context,
ref,
exclude: excludeActions,
otherActions: otherActions,
onUserDataChanged: onUserDataChanged,
onDeleteSuccesFully: onItemRemoved,
onItemUpdated: onItemUpdated,
)
.listTileItems(scrollContext, useIcons: true),
),
);
},
onSecondaryTapDown: (details) async {
Offset localPosition = details.globalPosition;
RelativeRect position =
RelativeRect.fromLTRB(localPosition.dx, localPosition.dy, localPosition.dx, localPosition.dy);
await showMenu(
context: context,
position: position,
items: poster
.generateActions(
context,
ref,
exclude: excludeActions,
otherActions: otherActions,
onUserDataChanged: onUserDataChanged,
onDeleteSuccesFully: onItemRemoved,
onItemUpdated: onItemUpdated,
)
.popupMenuItems(useIcons: true),
);
},
child: Card(
elevation: 6,
color: Theme.of(context).colorScheme.secondaryContainer,
shape: RoundedRectangleBorder(
side: BorderSide(
width: 1.0,
color: Colors.white.withValues(alpha: 0.10),
),
borderRadius: posterRadius,
),
child: Stack(
fit: StackFit.expand,
children: [
FladderImage(
onLongPress: () => _showBottomSheet(context, ref),
onSecondaryTapDown: (details) => _showContextMenu(context, ref, details.globalPosition),
child: Container(
color: Theme.of(context).cardColor,
child: FladderImage(
image: primaryPosters
? poster.images?.primary
: poster.getPosters?.primary ?? poster.getPosters?.backDrop?.lastOrNull,
placeHolder: PosterPlaceholder(item: poster),
),
),
overlays: [
if (poster.userData.progress > 0 && poster.type == FladderItemType.book)
Align(
alignment: Alignment.topLeft,
@ -159,7 +112,7 @@ class PosterImage extends ConsumerWidget {
decoration: BoxDecoration(
color: Colors.black.withValues(alpha: 0.15),
border: Border.all(width: 3, color: Theme.of(context).colorScheme.primary),
borderRadius: posterRadius,
borderRadius: radius,
),
clipBehavior: Clip.hardEdge,
child: Stack(
@ -232,13 +185,12 @@ class PosterImage extends ConsumerWidget {
padding: const EdgeInsets.all(8),
child: Text(
poster.title.maxLength(limitTo: 25),
style:
Theme.of(context).textTheme.labelLarge?.copyWith(fontSize: 20, fontWeight: FontWeight.bold),
style: Theme.of(context).textTheme.labelLarge?.copyWith(fontSize: 20, fontWeight: FontWeight.bold),
),
),
),
if ((poster.unPlayedItemCount != null && poster is SeriesModel) ||
(poster.playAble && !poster.unWatched && poster is! PhotoAlbumModel))
if (poster is! PhotoAlbumModel && (poster.unPlayedItemCount != null && poster is SeriesModel) ||
(poster.playAble && !poster.unWatched))
IgnorePointer(
child: Align(
alignment: Alignment.topRight,
@ -304,10 +256,7 @@ class PosterImage extends ConsumerWidget {
)
},
],
),
),
overlays: [
//Poster Button
focusedOverlays: [
if (AdaptiveLayout.inputDeviceOf(context) == InputDevice.pointer) ...[
// Play Button
if (poster.playAble)
@ -352,4 +301,45 @@ class PosterImage extends ConsumerWidget {
),
);
}
void _showBottomSheet(BuildContext context, WidgetRef ref) {
showBottomSheetPill(
context: context,
item: poster,
content: (scrollContext, scrollController) => ListView(
shrinkWrap: true,
controller: scrollController,
children: poster
.generateActions(
context,
ref,
exclude: excludeActions,
otherActions: otherActions,
onUserDataChanged: onUserDataChanged,
onDeleteSuccesFully: onItemRemoved,
onItemUpdated: onItemUpdated,
)
.listTileItems(scrollContext, useIcons: true),
),
);
}
Future<void> _showContextMenu(BuildContext context, WidgetRef ref, Offset globalPos) async {
final position = RelativeRect.fromLTRB(globalPos.dx, globalPos.dy, globalPos.dx, globalPos.dy);
await showMenu(
context: context,
position: position,
items: poster
.generateActions(
context,
ref,
exclude: excludeActions,
otherActions: otherActions,
onUserDataChanged: onUserDataChanged,
onDeleteSuccesFully: onItemRemoved,
onItemUpdated: onItemUpdated,
)
.popupMenuItems(useIcons: true),
);
}
}

45
lib/screens/shared/media/episode_posters.dart
View file

@ -112,9 +112,7 @@ class _EpisodePosterState extends ConsumerState<EpisodePosters> {
return ListView(
shrinkWrap: true,
controller: scrollController,
children: [
...episode.generateActions(context, ref).listTileItems(context, useIcons: true),
],
children: episode.generateActions(context, ref).listTileItems(context, useIcons: true).toList(),
);
},
);
@ -165,20 +163,14 @@ class EpisodePoster extends ConsumerWidget {
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Flexible(
child: Card(
child: Stack(
fit: StackFit.expand,
children: [
FocusButton(
child: FocusButton(
onTap: onTap,
onLongPress: onLongPress,
onSecondaryTapDown: (details) async {
Offset localPosition = details.globalPosition;
RelativeRect position =
RelativeRect.fromLTRB(localPosition.dx, localPosition.dy, localPosition.dx, localPosition.dy);
await showMenu(
context: context, position: position, items: actions.popupMenuItems(useIcons: true));
await showMenu(context: context, position: position, items: actions.popupMenuItems(useIcons: true));
},
child: Hero(
tag: heroTag ?? UniqueKey(),
@ -194,22 +186,6 @@ class EpisodePoster extends ConsumerWidget {
),
),
overlays: [
if (AdaptiveLayout.inputDeviceOf(context) == InputDevice.pointer && actions.isNotEmpty)
ExcludeFocus(
child: Align(
alignment: Alignment.bottomRight,
child: PopupMenuButton(
tooltip: context.localized.options,
icon: const Icon(
Icons.more_vert,
color: Colors.white,
),
itemBuilder: (context) => actions.popupMenuItems(useIcons: true),
),
),
),
],
),
if (!episodeAvailable)
Align(
alignment: Alignment.bottomLeft,
@ -274,7 +250,22 @@ class EpisodePoster extends ConsumerWidget {
),
),
],
focusedOverlays: [
if (AdaptiveLayout.inputDeviceOf(context) == InputDevice.pointer && actions.isNotEmpty)
ExcludeFocus(
child: Align(
alignment: Alignment.bottomRight,
child: PopupMenuButton(
tooltip: context.localized.options,
icon: const Icon(
Icons.more_vert,
color: Colors.white,
),
itemBuilder: (context) => actions.popupMenuItems(useIcons: true),
),
),
),
],
),
),
if (showLabel) ...{

35
lib/screens/shared/media/people_row.dart
View file

@ -1,11 +1,11 @@
import 'package:flutter/material.dart';
import 'package:animations/animations.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/jellyfin/jellyfin_open_api.enums.swagger.dart';
import 'package:fladder/models/items/item_shared_models.dart';
import 'package:fladder/screens/details_screens/person_detail_screen.dart';
import 'package:fladder/theme.dart';
import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
import 'package:fladder/util/fladder_image.dart';
import 'package:fladder/util/focus_provider.dart';
@ -26,10 +26,11 @@ class PeopleRow extends ConsumerWidget {
child: SizedBox(
height: 75,
width: 75,
child: Card(
elevation: 5,
shadowColor: Colors.transparent,
child: Container(
decoration: BoxDecoration(
borderRadius: FladderTheme.smallShape.borderRadius,
color: Theme.of(context).colorScheme.primaryContainer.withValues(alpha: 0.50),
),
child: Center(
child: Text(
name.getInitials(),
@ -55,17 +56,19 @@ class PeopleRow extends ConsumerWidget {
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Flexible(
child: OpenContainer(
closedColor: Colors.transparent,
closedElevation: 5,
openElevation: 0,
closedShape: const RoundedRectangleBorder(),
transitionType: ContainerTransitionType.fadeThrough,
openColor: Colors.transparent,
tappable: false,
closedBuilder: (context, action) => Card(
child: Container(
decoration: BoxDecoration(
borderRadius: FladderTheme.smallShape.borderRadius,
color: Theme.of(context).cardTheme.color?.withValues(alpha: 0.1),
),
child: FocusButton(
onTap: () => action(),
onTap: () => Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => PersonDetailScreen(
person: person,
),
),
),
child: FladderImage(
image: person.image,
placeHolder: placeHolder(person.name),
@ -73,10 +76,6 @@ class PeopleRow extends ConsumerWidget {
),
),
),
openBuilder: (context, action) => PersonDetailScreen(
person: person,
),
),
),
const SizedBox(height: 4),
ClickableText(

69
lib/screens/shared/media/season_row.dart
View file

@ -80,20 +80,42 @@ class SeasonPoster extends ConsumerWidget {
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Card(
child: Stack(
children: [
Positioned.fill(
child: Hero(
tag: myKey,
child: FocusButton(
child: FladderImage(
image: season.getPosters?.primary ??
season.parentImages?.backDrop?.firstOrNull ??
season.parentImages?.primary,
placeHolder: placeHolder(season.name),
),
onSecondaryTapDown: (details) async {
Offset localPosition = details.globalPosition;
RelativeRect position =
RelativeRect.fromLTRB(localPosition.dx, localPosition.dy, localPosition.dx, localPosition.dy);
await showMenu(
context: context,
position: position,
items: season.generateActions(context, ref).popupMenuItems(useIcons: true));
},
onTap: () async {
await season.navigateTo(context, ref: ref, tag: myKey);
if (!context.mounted) return;
context.refreshData();
},
onLongPress: AdaptiveLayout.inputDeviceOf(context) == InputDevice.touch
? () {
showBottomSheetPill(
context: context,
content: (context, scrollController) => ListView(
shrinkWrap: true,
controller: scrollController,
children: season.generateActions(context, ref).listTileItems(context, useIcons: true),
),
),
);
}
: null,
overlays: [
if (season.images?.primary == null)
Align(
alignment: Alignment.topLeft,
@ -141,35 +163,8 @@ class SeasonPoster extends ConsumerWidget {
],
),
),
Positioned.fill(
child: FocusButton(
onSecondaryTapDown: (details) async {
Offset localPosition = details.globalPosition;
RelativeRect position = RelativeRect.fromLTRB(
localPosition.dx, localPosition.dy, localPosition.dx, localPosition.dy);
await showMenu(
context: context,
position: position,
items: season.generateActions(context, ref).popupMenuItems(useIcons: true));
},
onTap: () async {
await season.navigateTo(context, ref: ref, tag: myKey);
if (!context.mounted) return;
context.refreshData();
},
onLongPress: AdaptiveLayout.inputDeviceOf(context) == InputDevice.touch
? () {
showBottomSheetPill(
context: context,
content: (context, scrollController) => ListView(
shrinkWrap: true,
controller: scrollController,
children: season.generateActions(context, ref).listTileItems(context, useIcons: true),
),
);
}
: null,
overlays: [
],
focusedOverlays: [
if (AdaptiveLayout.inputDeviceOf(context) == InputDevice.pointer)
ExcludeFocus(
child: Align(
@ -177,17 +172,13 @@ class SeasonPoster extends ConsumerWidget {
child: PopupMenuButton(
tooltip: context.localized.options,
icon: const Icon(Icons.more_vert, color: Colors.white),
itemBuilder: (context) =>
season.generateActions(context, ref).popupMenuItems(useIcons: true),
itemBuilder: (context) => season.generateActions(context, ref).popupMenuItems(useIcons: true),
),
),
),
],
),
),
],
),
),
),
const SizedBox(height: 4),
ClickableText(

62
lib/util/focus_provider.dart
View file

@ -46,6 +46,7 @@ class FocusButton extends StatefulWidget {
final Widget? child;
final bool autoFocus;
final FocusNode? focusNode;
final List<Widget> focusedOverlays;
final List<Widget> overlays;
final Function()? onTap;
final Function()? onLongPress;
@ -58,6 +59,7 @@ class FocusButton extends StatefulWidget {
this.child,
this.autoFocus = false,
this.focusNode,
this.focusedOverlays = const [],
this.overlays = const [],
this.onTap,
this.onLongPress,
@ -74,7 +76,7 @@ class FocusButton extends StatefulWidget {
class FocusButtonState extends State<FocusButton> {
late FocusNode focusNode = widget.focusNode ?? FocusNode();
ValueNotifier<bool> onHover = ValueNotifier<bool>(false);
ValueNotifier<bool> onHover = ValueNotifier(false);
Timer? _longPressTimer;
bool _longPressTriggered = false;
bool _keyDownActive = false;
@ -153,48 +155,50 @@ class FocusButtonState extends State<FocusButton> {
},
onKeyEvent: _handleKey,
child: ExcludeFocus(
child: Stack(
children: [
FlatButton(
onTap: widget.onTap,
onSecondaryTapDown: widget.onSecondaryTapDown,
onLongPress: widget.onLongPress,
child: Container(
child: ValueListenableBuilder(
valueListenable: onHover,
builder: (context, value, child) {
return AnimatedContainer(
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: widget.borderRadius ?? FladderTheme.smallShape.borderRadius,
),
child: widget.child,
foregroundDecoration: BoxDecoration(
borderRadius: widget.borderRadius ?? FladderTheme.smallShape.borderRadius,
color: widget.darkOverlay
? Theme.of(context).colorScheme.primaryFixedDim.withValues(alpha: value ? 0.10 : 0.0)
: null,
border: Border.all(
width: value ? 3.5 : 2,
color: value ? Theme.of(context).colorScheme.primary : Colors.white.withAlpha(15),
),
),
Positioned.fill(
child: ValueListenableBuilder(
valueListenable: onHover,
builder: (context, value, child) => AnimatedOpacity(
opacity: value ? 1 : 0,
duration: const Duration(milliseconds: 125),
child: FlatButton(
onTap: widget.onTap,
onSecondaryTapDown: widget.onSecondaryTapDown,
onLongPress: widget.onLongPress,
child: Stack(
children: [
IgnorePointer(
child: Container(
decoration: BoxDecoration(
color: Theme.of(context)
.colorScheme
.surfaceContainerLowest
.withValues(alpha: widget.darkOverlay ? 0.35 : 0),
border: Border.all(width: 3, color: Theme.of(context).colorScheme.onPrimaryContainer),
borderRadius: widget.borderRadius ?? FladderTheme.smallShape.borderRadius,
),
),
),
...widget.overlays,
if (widget.child != null) widget.child!,
],
),
),
overlays: [
if (widget.overlays.isNotEmpty) ...widget.overlays,
if (widget.focusedOverlays.isNotEmpty)
AnimatedOpacity(
opacity: value ? 1 : 0,
duration: const Duration(milliseconds: 250),
child: Stack(
children: [...widget.focusedOverlays],
),
),
],
),
);
},
),
),
),
);