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

fix: Lots of navigation improvements

Browse source
This commit is contained in:
PartyDonut 2025-10-03 13:02:51 +02:00
parent c299492d6d
commit 5174bb3a6c
55 changed files with 1019 additions and 832 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -125,7 +125,7 @@ class _CarouselBannerState extends ConsumerState<CarouselBanner> {
),
FlatButton(
onTap: () => widget.items[index].navigateTo(context),
onLongPress: AdaptiveLayout.of(context).inputDevice == InputDevice.pointer
onLongPress: AdaptiveLayout.inputDeviceOf(context) == InputDevice.pointer
? null
: () {
final poster = widget.items[index];
@ -141,7 +141,7 @@ class _CarouselBannerState extends ConsumerState<CarouselBanner> {
),
);
},
onSecondaryTapDown: AdaptiveLayout.of(context).inputDevice == InputDevice.touch
onSecondaryTapDown: AdaptiveLayout.inputDeviceOf(context) == InputDevice.touch
? null
: (details) async {
Offset localPosition = details.globalPosition;
@ -175,7 +175,7 @@ class _CarouselBannerState extends ConsumerState<CarouselBanner> {
)
],
),
if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer)
if (AdaptiveLayout.inputDeviceOf(context) == InputDevice.pointer)
AnimatedOpacity(
duration: const Duration(milliseconds: 250),
opacity: showControls ? 1 : 0,

56
lib/screens/shared/media/chapter_row.dart
View file

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:iconsax_plus/iconsax_plus.dart';
import 'package:fladder/models/items/chapters_model.dart';
import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
@ -24,7 +25,7 @@ class ChapterRow extends ConsumerWidget {
label: context.localized.chapter(chapters.length),
height: AdaptiveLayout.poster(context).size / 1.75,
items: chapters,
itemBuilder: (context, index, selected) {
itemBuilder: (context, index) {
final chapter = chapters[index];
List<ItemAction> generateActions() {
return [
@ -58,35 +59,38 @@ class ChapterRow extends ConsumerWidget {
},
);
},
child: AspectRatio(
aspectRatio: 1.75,
child: Stack(
fit: StackFit.expand,
children: [
CachedNetworkImage(
imageUrl: chapter.imageUrl,
fit: BoxFit.cover,
),
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: const EdgeInsets.all(5),
child: Card(
elevation: 0,
shadowColor: Colors.transparent,
color: Theme.of(context).cardColor.withValues(alpha: 0.4),
child: Padding(
padding: const EdgeInsets.all(5),
child: Text(
"${chapter.name} \n${chapter.startPosition.humanize ?? context.localized.start}",
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
child: Card(
child: AspectRatio(
aspectRatio: 1.75,
child: Stack(
fit: StackFit.expand,
children: [
CachedNetworkImage(
imageUrl: chapter.imageUrl,
fit: BoxFit.cover,
placeholder: (context, url) => const Icon(IconsaxPlusBold.image),
),
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: const EdgeInsets.all(5),
child: Card(
elevation: 0,
shadowColor: Colors.transparent,
color: Theme.of(context).cardColor.withValues(alpha: 0.4),
child: Padding(
padding: const EdgeInsets.all(5),
child: Text(
"${chapter.name} \n${chapter.startPosition.humanize ?? context.localized.start}",
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
),
),
),
),
),
),
],
],
),
),
),
overlays: [

36
lib/screens/shared/media/components/media_play_button.dart
View file

@ -4,9 +4,9 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:iconsax_plus/iconsax_plus.dart';
import 'package:fladder/models/item_base_model.dart';
import 'package:fladder/providers/arguments_provider.dart';
import 'package:fladder/screens/shared/animated_fade_size.dart';
import 'package:fladder/theme.dart';
import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
import 'package:fladder/widgets/shared/ensure_visible.dart';
class MediaPlayButton extends ConsumerWidget {
@ -24,7 +24,19 @@ class MediaPlayButton extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final progress = (item?.progress ?? 0) / 100.0;
final radius = FladderTheme.defaultShape.borderRadius;
final padding = 3.0;
final radius = FladderTheme.smallShape.borderRadius.subtract(BorderRadius.circular(padding));
final buttonState = WidgetStateProperty.resolveWith(
(states) {
return BorderSide(
width: 2,
color: Theme.of(context)
.colorScheme
.onPrimaryContainer
.withValues(alpha: states.contains(WidgetState.focused) ? 0.9 : 0.0),
);
},
);
Widget buttonTitle(Color contentColor) {
return Padding(
@ -61,9 +73,10 @@ class MediaPlayButton extends ConsumerWidget {
: TextButton(
onPressed: onPressed,
onLongPress: onLongPressed,
autofocus: ref.read(argumentsStateProvider).htpcMode,
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
autofocus: AdaptiveLayout.inputDeviceOf(context) == InputDevice.dPad,
style: ButtonStyle(
side: buttonState,
padding: const WidgetStatePropertyAll(EdgeInsets.zero),
),
onFocusChange: (value) {
if (value) {
@ -73,7 +86,7 @@ class MediaPlayButton extends ConsumerWidget {
}
},
child: Padding(
padding: const EdgeInsets.all(2.0),
padding: EdgeInsets.all(padding),
child: Stack(
alignment: Alignment.center,
children: [
@ -81,20 +94,13 @@ class MediaPlayButton extends ConsumerWidget {
Positioned.fill(
child: DecoratedBox(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainer,
boxShadow: [
BoxShadow(
blurRadius: 8.0,
offset: const Offset(0, 2),
color: Colors.black.withValues(alpha: 0.3),
)
],
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: radius,
),
),
),
// Button content
buttonTitle(Theme.of(context).colorScheme.primary),
buttonTitle(Theme.of(context).colorScheme.onPrimaryContainer),
Positioned.fill(
child: ClipRect(
clipper: _ProgressClipper(

181
lib/screens/shared/media/detailed_banner.dart
View file

@ -5,9 +5,11 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/models/item_base_model.dart';
import 'package:fladder/screens/details_screens/components/overview_header.dart';
import 'package:fladder/screens/shared/media/poster_row.dart';
import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
import 'package:fladder/util/fladder_image.dart';
import 'package:fladder/util/focus_provider.dart';
import 'package:fladder/util/localization_helper.dart';
import 'package:fladder/widgets/shared/custom_shader_mask.dart';
import 'package:fladder/widgets/shared/ensure_visible.dart';
class DetailedBanner extends ConsumerStatefulWidget {
@ -29,122 +31,81 @@ class _DetailedBannerState extends ConsumerState<DetailedBanner> {
@override
Widget build(BuildContext context) {
final size = MediaQuery.sizeOf(context);
final color = Theme.of(context).colorScheme.surface;
final stops = [0.05, 0.35, 0.65, 0.95];
return Column(
final phoneOffsetHeight =
AdaptiveLayout.viewSizeOf(context) <= ViewSize.phone ? MediaQuery.paddingOf(context).top + 80 : 0.0;
return Stack(
children: [
SizedBox(
width: double.infinity,
height: size.height * 0.50,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
color.withValues(alpha: 0.85),
color.withValues(alpha: 0.75),
color.withValues(alpha: 0),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
ExcludeFocus(
child: Align(
alignment: Alignment.topRight,
child: Transform.translate(
offset: Offset(0, -phoneOffsetHeight),
child: FractionallySizedBox(
widthFactor: 0.85,
child: AspectRatio(
aspectRatio: 1.8,
child: CustomShaderMask(
child: FladderImage(
image: selectedPoster.images?.primary,
),
),
),
),
),
child: Stack(
children: [
ExcludeFocus(
child: Align(
alignment: Alignment.topRight,
child: AspectRatio(
aspectRatio: 1.7,
child: ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
colors: [
Colors.white,
Colors.white,
Colors.white,
Colors.white.withAlpha(0),
],
stops: stops,
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
).createShader(bounds);
},
child: ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
colors: [
Colors.white.withAlpha(0),
Colors.white,
Colors.white,
Colors.white,
],
stops: stops,
begin: Alignment.centerLeft,
end: Alignment.centerRight,
).createShader(bounds);
},
child: FladderImage(
image: selectedPoster.images?.primary,
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: FractionallySizedBox(
widthFactor: 0.5,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
spacing: 16,
children: [
Flexible(
child: OverviewHeader(
name: selectedPoster.parentBaseModel.name,
subTitle: selectedPoster.label(context),
image: selectedPoster.getPosters,
logoAlignment: Alignment.centerLeft,
summary: selectedPoster.overview.summary,
productionYear: selectedPoster.overview.productionYear,
runTime: selectedPoster.overview.runTime,
genres: selectedPoster.overview.genreItems,
studios: selectedPoster.overview.studios,
officialRating: selectedPoster.overview.parentalRating,
communityRating: selectedPoster.overview.communityRating,
),
),
SizedBox(
height: size.height * 0.05,
)
],
),
),
),
],
),
),
),
FocusProvider(
autoFocus: true,
child: PosterRow(
key: const Key("detailed-banner-row"),
primaryPosters: true,
label: context.localized.nextUp,
posters: widget.posters,
onFocused: (poster) {
context.ensureVisible(
alignment: 1.0,
);
setState(() {
selectedPoster = poster;
});
widget.onSelect(poster);
},
SizedBox(
width: double.infinity,
height: size.height * 0.85,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16).copyWith(bottom: 4),
child: FractionallySizedBox(
widthFactor: AdaptiveLayout.viewSizeOf(context) <= ViewSize.phone ? 1.0 : 0.55,
child: OverviewHeader(
name: selectedPoster.parentBaseModel.name,
subTitle: selectedPoster.label(context),
image: selectedPoster.getPosters,
logoAlignment: AdaptiveLayout.viewSizeOf(context) <= ViewSize.phone
? Alignment.center
: Alignment.centerLeft,
summary: selectedPoster.overview.summary,
productionYear: selectedPoster.overview.productionYear,
runTime: selectedPoster.overview.runTime,
genres: selectedPoster.overview.genreItems,
studios: selectedPoster.overview.studios,
officialRating: selectedPoster.overview.parentalRating,
communityRating: selectedPoster.overview.communityRating,
),
),
),
),
FocusProvider(
autoFocus: true,
child: PosterRow(
primaryPosters: true,
label: context.localized.nextUp,
posters: widget.posters,
onFocused: (poster) {
context.ensureVisible(
alignment: 1.0,
);
setState(() {
selectedPoster = poster;
});
widget.onSelect(poster);
},
),
),
const SizedBox(height: 16)
],
),
)
),
],
);
}

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

@ -12,6 +12,7 @@ import 'package:fladder/util/fladder_image.dart';
import 'package:fladder/util/focus_provider.dart';
import 'package:fladder/util/item_base_model/item_base_model_extensions.dart';
import 'package:fladder/util/localization_helper.dart';
import 'package:fladder/util/refresh_state.dart';
import 'package:fladder/widgets/shared/clickable_text.dart';
import 'package:fladder/widgets/shared/enum_selection.dart';
import 'package:fladder/widgets/shared/horizontal_list.dart';
@ -83,7 +84,7 @@ class _EpisodePosterState extends ConsumerState<EpisodePosters> {
contentPadding: widget.contentPadding,
startIndex: indexOfCurrent,
items: episodes,
itemBuilder: (context, index, selected) {
itemBuilder: (context, index) {
final episode = episodes[index];
final isCurrentEpisode = index == indexOfCurrent;
return EpisodePoster(
@ -101,8 +102,8 @@ class _EpisodePosterState extends ConsumerState<EpisodePosters> {
: () {
episode.navigateTo(context);
},
onLongPress: () {
showBottomSheetPill(
onLongPress: () async {
await showBottomSheetPill(
context: context,
item: episode,
content: (context, scrollController) {
@ -115,6 +116,7 @@ class _EpisodePosterState extends ConsumerState<EpisodePosters> {
);
},
);
context.refreshData();
},
actions: episode.generateActions(context, ref),
isCurrentEpisode: isCurrentEpisode,
@ -185,7 +187,7 @@ class EpisodePoster extends ConsumerWidget {
decodeHeight: 250,
),
overlays: [
if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer && actions.isNotEmpty)
if (AdaptiveLayout.inputDeviceOf(context) == InputDevice.pointer && actions.isNotEmpty)
ExcludeFocus(
child: Align(
alignment: Alignment.bottomRight,

4
lib/screens/shared/media/external_urls.dart
View file

@ -6,6 +6,7 @@ import 'package:url_launcher/url_launcher.dart' as urilauncher;
import 'package:url_launcher/url_launcher_string.dart';
import 'package:fladder/models/items/item_shared_models.dart';
import 'package:fladder/providers/arguments_provider.dart';
import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
import 'package:fladder/util/localization_helper.dart';
import 'package:fladder/util/sticky_header_text.dart';
@ -19,6 +20,9 @@ class ExternalUrlsRow extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
if (ref.watch(argumentsStateProvider).htpcMode) {
return const SizedBox.shrink();
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,

4
lib/screens/shared/media/media_banner.dart
View file

@ -146,7 +146,7 @@ class _MediaBannerState extends ConsumerState<MediaBanner> {
),
child: FocusButton(
onTap: () => currentItem.navigateTo(context),
onLongPress: AdaptiveLayout.of(context).inputDevice == InputDevice.touch
onLongPress: AdaptiveLayout.inputDeviceOf(context) == InputDevice.touch
? () async {
interacting = true;
final poster = currentItem;
@ -165,7 +165,7 @@ class _MediaBannerState extends ConsumerState<MediaBanner> {
timer.reset();
}
: null,
onSecondaryTapDown: AdaptiveLayout.of(context).inputDevice == InputDevice.touch
onSecondaryTapDown: AdaptiveLayout.inputDeviceOf(context) == InputDevice.touch
? null
: (details) async {
Offset localPosition = details.globalPosition;

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

@ -47,7 +47,7 @@ class PeopleRow extends ConsumerWidget {
height: AdaptiveLayout.poster(context).size * 0.9,
contentPadding: contentPadding,
items: people,
itemBuilder: (context, index, selected) {
itemBuilder: (context, index) {
final person = people[index];
return AspectRatio(
aspectRatio: 0.6,

2
lib/screens/shared/media/poster_list_item.dart
View file

@ -69,6 +69,8 @@ class PosterListItem extends ConsumerWidget {
),
child: FocusButton(
onTap: () => pressedWidget(context),
autoFocus:
FocusProvider.autoFocusOf(context) && AdaptiveLayout.inputDeviceOf(context) == InputDevice.dPad,
onFocusChanged: (focus) {
if (focus) {
context.ensureVisible();

2
lib/screens/shared/media/poster_row.dart
View file

@ -46,7 +46,7 @@ class PosterRow extends ConsumerWidget {
context.ensureVisible();
}
},
itemBuilder: (context, index, selected) {
itemBuilder: (context, index) {
final poster = posters[index];
return PosterWidget(
key: Key(poster.id),

56
lib/screens/shared/media/poster_widget.dart
View file

@ -1,13 +1,16 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:iconsax_plus/iconsax_plus.dart';
import 'package:fladder/models/item_base_model.dart';
import 'package:fladder/models/items/item_shared_models.dart';
import 'package:fladder/screens/shared/media/components/poster_image.dart';
import 'package:fladder/util/adaptive_layout/adaptive_layout.dart';
import 'package:fladder/util/focus_provider.dart';
import 'package:fladder/util/item_base_model/item_base_model_extensions.dart';
import 'package:fladder/util/item_base_model/play_item_helpers.dart';
import 'package:fladder/util/localization_helper.dart';
import 'package:fladder/widgets/shared/clickable_text.dart';
import 'package:fladder/widgets/shared/item_actions.dart';
@ -138,3 +141,56 @@ class PosterWidget extends ConsumerWidget {
);
}
}
class PosterPlaceHolder extends StatelessWidget {
final Function() onTap;
final double aspectRatio;
const PosterPlaceHolder({
required this.onTap,
required this.aspectRatio,
super.key,
});
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: aspectRatio,
child: FractionallySizedBox(
alignment: Alignment.topCenter,
heightFactor: 0.85,
child: Padding(
padding: const EdgeInsets.all(4),
child: FocusButton(
onTap: onTap,
child: Card(
color: Theme.of(context).colorScheme.surface.withValues(alpha: 0.2),
elevation: 0,
shadowColor: Colors.transparent,
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
spacing: 8,
children: [
const Icon(
IconsaxPlusLinear.more_square,
size: 46,
),
Text(
context.localized.showMore,
style: Theme.of(context).textTheme.labelMedium,
)
],
),
),
),
),
),
),
),
);
}
}

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

@ -38,7 +38,6 @@ class SeasonsRow extends ConsumerWidget {
itemBuilder: (
context,
index,
selected,
) {
final season = (seasons ?? [])[index];
return SeasonPoster(
@ -153,7 +152,7 @@ class SeasonPoster extends ConsumerWidget {
items: season.generateActions(context, ref).popupMenuItems(useIcons: true));
},
onTap: () => onSeasonPressed?.call(season),
onLongPress: AdaptiveLayout.of(context).inputDevice == InputDevice.touch
onLongPress: AdaptiveLayout.inputDeviceOf(context) == InputDevice.touch
? () {
showBottomSheetPill(
context: context,
@ -166,7 +165,7 @@ class SeasonPoster extends ConsumerWidget {
}
: null,
overlays: [
if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer)
if (AdaptiveLayout.inputDeviceOf(context) == InputDevice.pointer)
ExcludeFocus(
child: Align(
alignment: Alignment.bottomRight,