Skip to content

Commit

Permalink
feat: improve mobile tiles and page option buttons with bottom sheets (…
Browse files Browse the repository at this point in the history 
…#1041)
  • Loading branch information
@Feichtmeier
Feichtmeier authored Nov 21, 2024
1 parent cbf8c39 commit e9ab5de
Show file tree
Hide file tree
Showing 17 changed files with 221 additions and 169 deletions.
24 changes: 14 additions & 10 deletions lib/common/view/audio_tile.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,7 @@ class _AudioTileState extends State<AudioTile> {
final theme = context.theme;
final l10n = context.l10n;
final playerModel = di<PlayerModel>();
final liked = watchPropertyValue((LibraryModel m) => m.liked(widget.audio));
final starred = watchPropertyValue(
(LibraryModel m) => m.isStarredStation(widget.audio.uuid),
);

final selectedColor = widget.selectedColor ?? theme.contrastyPrimary;
final color =
widget.selected && widget.isPlayerPlaying ? selectedColor : null;
Expand Down Expand Up @@ -145,7 +142,6 @@ class _AudioTileState extends State<AudioTile> {
),
trailing: _AudioTileTrail(
hovered: _hovered,
liked: liked || starred,
audio: widget.audio,
selected: widget.selected,
isPlayerPlaying: widget.isPlayerPlaying,
Expand All @@ -154,6 +150,7 @@ class _AudioTileState extends State<AudioTile> {
selectedColor: selectedColor,
showDuration: !isMobile,
showLikeIcon: !isMobile,
alwaysShowOptionButton: isMobile,
),
);

Expand Down Expand Up @@ -182,10 +179,10 @@ class _AudioTileTrail extends StatelessWidget with WatchItMixin {
required this.pageId,
required this.audioPageType,
required this.hovered,
required this.liked,
required this.selectedColor,
required this.showLikeIcon,
required this.showDuration,
required this.alwaysShowOptionButton,
});

final Audio audio;
Expand All @@ -194,21 +191,28 @@ class _AudioTileTrail extends StatelessWidget with WatchItMixin {
final String pageId;
final AudioPageType audioPageType;
final bool hovered;
final bool liked;
final Color selectedColor;
final bool showLikeIcon, showDuration;
final bool alwaysShowOptionButton;

@override
Widget build(BuildContext context) {
final liked = watchPropertyValue((LibraryModel m) => m.liked(audio));
final starred = watchPropertyValue(
(LibraryModel m) => m.isStarredStation(audio.uuid),
);
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Opacity(
opacity: hovered || selected ? 1 : 0,
opacity: alwaysShowOptionButton || hovered || selected ? 1 : 0,
child: AudioTileOptionButton(
title: Text(audio.title ?? ''),
subTitle: Text(audio.artist ?? ''),
selected: selected && isPlayerPlaying,
playlistId: pageId,
audio: audio,
audios: [audio],
searchTerm: '${audio.artist ?? ''} - ${audio.title ?? ''}',
allowRemove: (audioPageType == AudioPageType.playlist ||
audioPageType == AudioPageType.likedAudio) &&
audio.audioType != AudioType.radio,
Expand All @@ -219,7 +223,7 @@ class _AudioTileTrail extends StatelessWidget with WatchItMixin {
),
if (showLikeIcon)
Opacity(
opacity: hovered || selected || liked ? 1 : 0,
opacity: hovered || selected || liked || starred ? 1 : 0,
child: switch (audio.audioType) {
AudioType.radio => RadioLikeIcon(
audio: audio,
Expand Down
103 changes: 59 additions & 44 deletions lib/common/view/audio_tile_bottom_sheet.dart
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import 'package:collection/collection.dart';

import '../../constants.dart';
import '../../extensions/build_context_x.dart';
import '../../l10n/l10n.dart';
Expand All @@ -7,6 +9,7 @@ import '../../playlists/view/add_to_playlist_dialog.dart';
import '../data/audio.dart';
import 'audio_tile_image.dart';
import 'icons.dart';
import 'like_all_icon.dart';
import 'like_icon.dart';
import 'meta_data_dialog.dart';
import 'package:flutter/material.dart';
Expand All @@ -19,14 +22,20 @@ import 'theme.dart';
class AudioTileBottomSheet extends StatelessWidget {
const AudioTileBottomSheet({
super.key,
required this.audio,
required this.allowRemove,
required this.playlistId,
required this.searchTerm,
required this.title,
required this.subTitle,
required this.audios,
});

final Audio audio;
final bool allowRemove;
final String playlistId;
final String searchTerm;
final Widget title;
final Widget subTitle;
final List<Audio> audios;

@override
Widget build(BuildContext context) {
Expand All @@ -36,7 +45,6 @@ class AudioTileBottomSheet extends StatelessWidget {
enableDrag: false,
onClosing: () {},
builder: (context) {
var searchTerm = '${audio.artist ?? ''} - ${audio.title ?? ''}';
return SizedBox(
height: 460,
child: Column(
Expand All @@ -47,21 +55,25 @@ class AudioTileBottomSheet extends StatelessWidget {
right: 15,
top: 5,
),
title: Text(audio.title ?? ''),
subtitle: Text(audio.artist ?? ''),
leading: AudioTileImage(
size: kAudioTrackWidth,
audio: audio,
),
trailing: switch (audio.audioType) {
AudioType.radio => RadioLikeIcon(
audio: audio,
),
AudioType.local => LikeIcon(
audio: audio,
),
_ => null,
},
title: title,
subtitle: subTitle,
leading: audios.isNotEmpty
? AudioTileImage(
size: kAudioTrackWidth,
audio: audios.first,
)
: null,
trailing: audios.isNotEmpty
? switch (audios.first.audioType) {
AudioType.radio => RadioLikeIcon(
audio: audios.first,
),
AudioType.local => LikeAllIcon(
audios: audios,
),
_ => null,
}
: null,
),
const SpacedDivider(
bottom: 20,
Expand All @@ -77,7 +89,7 @@ class AudioTileBottomSheet extends StatelessWidget {
children: space(
widthGap: 10,
children: [
if (audio.audioType != AudioType.radio)
if (audios.none((e) => e.audioType == AudioType.radio))
Column(
children: [
_Button(
Expand All @@ -87,24 +99,24 @@ class AudioTileBottomSheet extends StatelessWidget {
showDialog(
context: context,
builder: (context) =>
AddToPlaylistDialog(audio: audio),
AddToPlaylistDialog(audios: audios),
);
},
),
_ButtonLabel(label: l10n.addToPlaylist),
],
),
if (audio.audioType != AudioType.radio)
if (audios.none((e) => e.audioType == AudioType.radio))
Column(
children: [
_Button(
onPressed: () {
di<PlayerModel>().insertIntoQueue(audio);
di<PlayerModel>().insertIntoQueue(audios);
Navigator.of(context).pop();
showSnackBar(
context: context,
content: Text(
'${l10n.addedTo} ${l10n.queue}: ${audio.artist} - ${audio.title}',
'${l10n.addedTo} ${l10n.queue}: $searchTerm',
),
);
},
Expand All @@ -119,10 +131,10 @@ class AudioTileBottomSheet extends StatelessWidget {
_Button(
onPressed: () {
playlistId == kLikedAudiosPageId
? libraryModel.removeLikedAudio(audio)
: libraryModel.removeAudioFromPlaylist(
playlistId,
audio,
? libraryModel.removeLikedAudios(audios)
: libraryModel.removeAudiosFromPlaylist(
id: playlistId,
audios: audios,
);
Navigator.of(context).pop();
},
Expand All @@ -134,28 +146,31 @@ class AudioTileBottomSheet extends StatelessWidget {
),
],
),
Column(
children: [
_Button(
onPressed: () {
Navigator.of(context).pop();
showDialog(
context: context,
builder: (context) =>
MetaDataContent.dialog(audio: audio),
);
},
icon: Icon(Iconz.info),
),
_ButtonLabel(label: l10n.showMetaData),
],
),
if (audios.length == 1)
Column(
children: [
_Button(
onPressed: () {
Navigator.of(context).pop();
showDialog(
context: context,
builder: (context) =>
MetaDataContent.dialog(
audio: audios.first,
),
);
},
icon: Icon(Iconz.info),
),
_ButtonLabel(label: l10n.showMetaData),
],
),
].map((e) => Expanded(child: e)).toList(),
),
),
),
),
if (audio.audioType != AudioType.radio)
if (audios.first.audioType != AudioType.radio)
Expanded(
child: Padding(
padding: const EdgeInsets.only(bottom: 20),
Expand Down
Loading

0 comments on commit e9ab5de

Please sign in to comment.