mirror of
https://github.com/KRTirtho/spotube.git
synced 2025-09-13 07:55:18 +00:00
chore: fix track options causing track page exception
This commit is contained in:
Kingkor Roy Tirtho
parent
846fa679f6
commit
75bdbeccc0
146
lib/components/track_tile/track_options_button.dart
Normal file
146
lib/components/track_tile/track_options_button.dart
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
import 'package:auto_route/auto_route.dart';
|
||||||
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||||
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||||
|
import 'package:shadcn_flutter/shadcn_flutter.dart';
|
||||||
|
import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
|
||||||
|
import 'package:spotube/collections/routes.gr.dart';
|
||||||
|
import 'package:spotube/collections/spotube_icons.dart';
|
||||||
|
import 'package:spotube/components/image/universal_image.dart';
|
||||||
|
import 'package:spotube/components/links/artist_link.dart';
|
||||||
|
import 'package:spotube/components/track_tile/track_options.dart';
|
||||||
|
import 'package:spotube/extensions/constrains.dart';
|
||||||
|
import 'package:spotube/models/metadata/metadata.dart';
|
||||||
|
|
||||||
|
class TrackOptionsButton extends HookConsumerWidget {
|
||||||
|
final SpotubeTrackObject track;
|
||||||
|
final bool userPlaylist;
|
||||||
|
final String? playlistId;
|
||||||
|
const TrackOptionsButton({
|
||||||
|
super.key,
|
||||||
|
required this.track,
|
||||||
|
required this.userPlaylist,
|
||||||
|
this.playlistId,
|
||||||
|
});
|
||||||
|
|
||||||
|
static OverlayCompleter<dynamic> showOptions(
|
||||||
|
BuildContext context,
|
||||||
|
Offset offset,
|
||||||
|
SpotubeTrackObject track, {
|
||||||
|
bool userPlaylist = false,
|
||||||
|
String? playlistId,
|
||||||
|
}) {
|
||||||
|
return showPopover(
|
||||||
|
context: context,
|
||||||
|
position: offset,
|
||||||
|
alignment: Alignment.bottomRight,
|
||||||
|
builder: (context) {
|
||||||
|
return SizedBox(
|
||||||
|
width: 220 * context.theme.scaling,
|
||||||
|
child: Card(
|
||||||
|
padding: const EdgeInsets.all(8),
|
||||||
|
child: TrackOptions(
|
||||||
|
track: track,
|
||||||
|
playlistId: playlistId,
|
||||||
|
userPlaylist: userPlaylist,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context, ref) {
|
||||||
|
final imageProvider = useMemoized(
|
||||||
|
() => UniversalImage.imageProvider(
|
||||||
|
(track.album.images).smallest(ImagePlaceholder.albumArt),
|
||||||
|
),
|
||||||
|
[track.album.images],
|
||||||
|
);
|
||||||
|
|
||||||
|
return IconButton.ghost(
|
||||||
|
icon: const Icon(SpotubeIcons.moreHorizontal),
|
||||||
|
onPressed: () {
|
||||||
|
final mediaQuery = MediaQuery.sizeOf(context);
|
||||||
|
|
||||||
|
if (mediaQuery.lgAndUp) {
|
||||||
|
final renderBox = context.findRenderObject() as RenderBox;
|
||||||
|
final position = RelativeRect.fromRect(
|
||||||
|
Rect.fromPoints(
|
||||||
|
renderBox.localToGlobal(Offset.zero,
|
||||||
|
ancestor: context.findRenderObject()),
|
||||||
|
renderBox.localToGlobal(renderBox.size.bottomRight(Offset.zero),
|
||||||
|
ancestor: context.findRenderObject()),
|
||||||
|
),
|
||||||
|
Offset.zero & mediaQuery,
|
||||||
|
);
|
||||||
|
final offset = Offset(position.left, position.top);
|
||||||
|
showOptions(
|
||||||
|
context,
|
||||||
|
offset,
|
||||||
|
track,
|
||||||
|
userPlaylist: userPlaylist,
|
||||||
|
playlistId: playlistId,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
openDrawer(
|
||||||
|
context: context,
|
||||||
|
position: OverlayPosition.bottom,
|
||||||
|
draggable: true,
|
||||||
|
showDragHandle: true,
|
||||||
|
borderRadius: context.theme.borderRadiusMd,
|
||||||
|
transformBackdrop: false,
|
||||||
|
builder: (context) {
|
||||||
|
return Padding(
|
||||||
|
padding: const EdgeInsets.symmetric(
|
||||||
|
horizontal: 16.0,
|
||||||
|
vertical: 8.0,
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
spacing: 8,
|
||||||
|
children: [
|
||||||
|
Basic(
|
||||||
|
leading: Container(
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: context.theme.borderRadiusMd,
|
||||||
|
image: DecorationImage(
|
||||||
|
fit: BoxFit.cover,
|
||||||
|
image: imageProvider,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
title: Text(
|
||||||
|
track.name,
|
||||||
|
maxLines: 1,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
).semiBold(),
|
||||||
|
subtitle: Align(
|
||||||
|
alignment: Alignment.centerLeft,
|
||||||
|
child: ArtistLink(
|
||||||
|
artists: track.artists,
|
||||||
|
onOverflowArtistClick: () => context.navigateTo(
|
||||||
|
TrackRoute(trackId: track.id),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const Divider(),
|
||||||
|
TrackOptions(
|
||||||
|
track: track,
|
||||||
|
userPlaylist: userPlaylist,
|
||||||
|
playlistId: playlistId,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -15,6 +15,7 @@ import 'package:spotube/components/image/universal_image.dart';
|
|||||||
import 'package:spotube/components/links/artist_link.dart';
|
import 'package:spotube/components/links/artist_link.dart';
|
||||||
import 'package:spotube/components/links/link_text.dart';
|
import 'package:spotube/components/links/link_text.dart';
|
||||||
import 'package:spotube/components/track_tile/track_options.dart';
|
import 'package:spotube/components/track_tile/track_options.dart';
|
||||||
|
import 'package:spotube/components/track_tile/track_options_button.dart';
|
||||||
import 'package:spotube/components/ui/button_tile.dart';
|
import 'package:spotube/components/ui/button_tile.dart';
|
||||||
import 'package:spotube/extensions/constrains.dart';
|
import 'package:spotube/extensions/constrains.dart';
|
||||||
import 'package:spotube/extensions/duration.dart';
|
import 'package:spotube/extensions/duration.dart';
|
||||||
@ -63,30 +64,6 @@ class TrackTile extends HookConsumerWidget {
|
|||||||
this.leadingActions,
|
this.leadingActions,
|
||||||
});
|
});
|
||||||
|
|
||||||
OverlayCompleter<dynamic> showOptions(
|
|
||||||
BuildContext context,
|
|
||||||
Offset offset,
|
|
||||||
) {
|
|
||||||
return showPopover(
|
|
||||||
context: context,
|
|
||||||
position: offset,
|
|
||||||
alignment: Alignment.bottomRight,
|
|
||||||
builder: (context) {
|
|
||||||
return SizedBox(
|
|
||||||
width: 220 * context.theme.scaling,
|
|
||||||
child: Card(
|
|
||||||
padding: const EdgeInsets.all(8),
|
|
||||||
child: TrackOptions(
|
|
||||||
track: track,
|
|
||||||
playlistId: playlistId,
|
|
||||||
userPlaylist: userPlaylist,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context, ref) {
|
Widget build(BuildContext context, ref) {
|
||||||
final theme = Theme.of(context);
|
final theme = Theme.of(context);
|
||||||
@ -114,9 +91,12 @@ class TrackTile extends HookConsumerWidget {
|
|||||||
_overlay.value?.remove();
|
_overlay.value?.remove();
|
||||||
_overlay.value = null;
|
_overlay.value = null;
|
||||||
}
|
}
|
||||||
_overlay.value = showOptions(
|
_overlay.value = TrackOptionsButton.showOptions(
|
||||||
context,
|
context,
|
||||||
Offset.zero,
|
Offset.zero,
|
||||||
|
track,
|
||||||
|
userPlaylist: userPlaylist,
|
||||||
|
playlistId: playlistId,
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
child: HoverBuilder(
|
child: HoverBuilder(
|
||||||
@ -333,87 +313,10 @@ class TrackTile extends HookConsumerWidget {
|
|||||||
),
|
),
|
||||||
Builder(
|
Builder(
|
||||||
builder: (context) {
|
builder: (context) {
|
||||||
return IconButton.ghost(
|
return TrackOptionsButton(
|
||||||
icon: const Icon(SpotubeIcons.moreHorizontal),
|
|
||||||
onPressed: () {
|
|
||||||
final mediaQuery = MediaQuery.sizeOf(context);
|
|
||||||
|
|
||||||
if (mediaQuery.lgAndUp) {
|
|
||||||
final renderBox =
|
|
||||||
context.findRenderObject() as RenderBox;
|
|
||||||
final position = RelativeRect.fromRect(
|
|
||||||
Rect.fromPoints(
|
|
||||||
renderBox.localToGlobal(Offset.zero,
|
|
||||||
ancestor: context.findRenderObject()),
|
|
||||||
renderBox.localToGlobal(
|
|
||||||
renderBox.size.bottomRight(Offset.zero),
|
|
||||||
ancestor: context.findRenderObject()),
|
|
||||||
),
|
|
||||||
Offset.zero & mediaQuery,
|
|
||||||
);
|
|
||||||
final offset = Offset(position.left, position.top);
|
|
||||||
showOptions(context, offset);
|
|
||||||
} else {
|
|
||||||
openDrawer(
|
|
||||||
context: context,
|
|
||||||
position: OverlayPosition.bottom,
|
|
||||||
draggable: true,
|
|
||||||
showDragHandle: true,
|
|
||||||
borderRadius: context.theme.borderRadiusMd,
|
|
||||||
transformBackdrop: false,
|
|
||||||
builder: (context) {
|
|
||||||
return Padding(
|
|
||||||
padding: const EdgeInsets.symmetric(
|
|
||||||
horizontal: 16.0,
|
|
||||||
vertical: 8.0,
|
|
||||||
),
|
|
||||||
child: Column(
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
spacing: 8,
|
|
||||||
children: [
|
|
||||||
Basic(
|
|
||||||
leading: Container(
|
|
||||||
width: 40,
|
|
||||||
height: 40,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
borderRadius:
|
|
||||||
context.theme.borderRadiusMd,
|
|
||||||
image: DecorationImage(
|
|
||||||
fit: BoxFit.cover,
|
|
||||||
image: imageProvider,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
title: Text(
|
|
||||||
track.name,
|
|
||||||
maxLines: 1,
|
|
||||||
overflow: TextOverflow.ellipsis,
|
|
||||||
).semiBold(),
|
|
||||||
subtitle: Align(
|
|
||||||
alignment: Alignment.centerLeft,
|
|
||||||
child: ArtistLink(
|
|
||||||
artists: track.artists,
|
|
||||||
onOverflowArtistClick: () =>
|
|
||||||
context.navigateTo(
|
|
||||||
TrackRoute(trackId: track.id),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const Divider(),
|
|
||||||
TrackOptions(
|
|
||||||
track: track,
|
track: track,
|
||||||
userPlaylist: userPlaylist,
|
userPlaylist: userPlaylist,
|
||||||
playlistId: playlistId,
|
playlistId: playlistId,
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
|
|||||||
@ -11,7 +11,7 @@ import 'package:spotube/components/image/universal_image.dart';
|
|||||||
import 'package:spotube/components/links/artist_link.dart';
|
import 'package:spotube/components/links/artist_link.dart';
|
||||||
import 'package:spotube/components/links/link_text.dart';
|
import 'package:spotube/components/links/link_text.dart';
|
||||||
import 'package:spotube/components/titlebar/titlebar.dart';
|
import 'package:spotube/components/titlebar/titlebar.dart';
|
||||||
import 'package:spotube/components/track_tile/track_options.dart';
|
import 'package:spotube/components/track_tile/track_options_button.dart';
|
||||||
import 'package:spotube/extensions/context.dart';
|
import 'package:spotube/extensions/context.dart';
|
||||||
import 'package:spotube/extensions/list.dart';
|
import 'package:spotube/extensions/list.dart';
|
||||||
import 'package:spotube/models/metadata/metadata.dart';
|
import 'package:spotube/models/metadata/metadata.dart';
|
||||||
@ -231,7 +231,7 @@ class TrackPage extends HookConsumerWidget {
|
|||||||
else
|
else
|
||||||
const Gap(20),
|
const Gap(20),
|
||||||
TrackHeartButton(track: track),
|
TrackHeartButton(track: track),
|
||||||
TrackOptions(
|
TrackOptionsButton(
|
||||||
track: track,
|
track: track,
|
||||||
userPlaylist: false,
|
userPlaylist: false,
|
||||||
),
|
),
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user