kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-13 07:55:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: fix width of scrollbar & non-interactive scrollbar in android

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2023-10-01 13:19:34 +06:00
parent 5bb8231782
commit a3250882df
11 changed files with 900 additions and 794 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/components/library/user_albums.dart
View File

@ -7,6 +7,7 @@ import 'package:spotify/spotify.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/album/album_card.dart';
import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
import 'package:spotube/components/shared/waypoint.dart';
@ -70,12 +71,14 @@ class UserAlbums extends HookConsumerWidget {
child: SearchBar(
onChanged: (value) => searchText.value = value,
leading: const Icon(SpotubeIcons.filter),
hintText: context.l10n.filter_artist,
hintText: context.l10n.filter_albums,
),
),
),
),
body: SizedBox.expand(
child: InterScrollbar(
controller: controller,
child: SingleChildScrollView(
padding: const EdgeInsets.all(8.0),
controller: controller,
@ -108,6 +111,7 @@ class UserAlbums extends HookConsumerWidget {
),
),
),
),
);
}
}

4
lib/components/library/user_artists.dart
View File

@ -7,6 +7,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
import 'package:spotube/components/artist/artist_card.dart';
import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
import 'package:spotube/extensions/context.dart';
import 'package:spotube/provider/authentication_provider.dart';
import 'package:spotube/services/queries/queries.dart';
@ -78,6 +79,8 @@ class UserArtists extends HookConsumerWidget {
onRefresh: () async {
await artistQuery.refresh();
},
child: InterScrollbar(
controller: controller,
child: SingleChildScrollView(
controller: controller,
child: SizedBox(
@ -96,6 +99,7 @@ class UserArtists extends HookConsumerWidget {
),
),
),
),
);
}
}

3
lib/components/library/user_local_tracks.dart
View File

@ -17,6 +17,7 @@ import 'package:permission_handler/permission_handler.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/shared/expandable_search/expandable_search.dart';
import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
import 'package:spotube/components/shared/shimmers/shimmer_track_tile.dart';
import 'package:spotube/components/shared/sort_tracks_dropdown.dart';
import 'package:spotube/components/shared/track_table/track_tile.dart';
@ -286,6 +287,7 @@ class UserLocalTracks extends HookConsumerWidget {
onRefresh: () async {
ref.refresh(localTracksProvider);
},
child: InterScrollbar(
child: ListView.builder(
physics: const AlwaysScrollableScrollPhysics(),
itemCount: filteredTracks.length,
@ -306,6 +308,7 @@ class UserLocalTracks extends HookConsumerWidget {
},
),
),
),
);
},
loading: () =>

4
lib/components/library/user_playlists.dart
View File

@ -8,6 +8,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/playlist/playlist_create_dialog.dart';
import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
import 'package:spotube/components/playlist/playlist_card.dart';
@ -79,6 +80,8 @@ class UserPlaylists extends HookConsumerWidget {
return RefreshIndicator(
onRefresh: playlistsQuery.refresh,
child: InterScrollbar(
controller: controller,
child: SingleChildScrollView(
controller: controller,
physics: const AlwaysScrollableScrollPhysics(),
@ -136,6 +139,7 @@ class UserPlaylists extends HookConsumerWidget {
),
),
),
),
);
}
}

9
lib/components/player/player_queue.dart
View File

@ -10,6 +10,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:scroll_to_index/scroll_to_index.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/shared/fallbacks/not_found.dart';
import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
import 'package:spotube/components/shared/track_table/track_tile.dart';
import 'package:spotube/extensions/constrains.dart';
import 'package:spotube/extensions/context.dart';
@ -196,6 +197,8 @@ class PlayerQueue extends HookConsumerWidget {
const SizedBox(height: 10),
if (!isSearching.value && searchText.value.isEmpty)
Flexible(
child: InterScrollbar(
controller: controller,
child: ReorderableListView.builder(
onReorder: (oldIndex, newIndex) {
playlistNotifier.moveTrack(oldIndex, newIndex);
@ -233,15 +236,18 @@ class PlayerQueue extends HookConsumerWidget {
);
},
),
),
)
else
Flexible(
child: InterScrollbar(
child: ListView.builder(
itemCount: filteredTracks.length,
itemBuilder: (context, i) {
final track = filteredTracks.elementAt(i);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
padding:
const EdgeInsets.symmetric(horizontal: 8.0),
child: TrackTile(
index: i,
track: track,
@ -256,6 +262,7 @@ class PlayerQueue extends HookConsumerWidget {
},
),
),
),
],
);
}),

69
lib/components/shared/inter_scrollbar/inter_scrollbar.dart Normal file
View File

@ -0,0 +1,69 @@
import 'package:flutter/material.dart';
import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
class InterScrollbar extends HookWidget {
final Widget child;
final ScrollController? controller;
final bool? thumbVisibility;
final bool? trackVisibility;
final double? thickness;
final Radius? radius;
final bool Function(ScrollNotification)? notificationPredicate;
final bool? interactive;
final ScrollbarOrientation? scrollbarOrientation;
const InterScrollbar({
super.key,
required this.child,
this.controller,
this.thumbVisibility,
this.trackVisibility,
this.thickness,
this.radius,
this.notificationPredicate,
this.interactive,
this.scrollbarOrientation,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
if (DesktopTools.platform.isDesktop) return child;
return ScrollbarTheme(
data: theme.scrollbarTheme.copyWith(
crossAxisMargin: 10,
minThumbLength: 80,
thickness: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.hovered) ||
states.contains(MaterialState.dragged) ||
states.contains(MaterialState.pressed)) {
return 40;
}
return 20;
}),
radius: const Radius.circular(20),
thumbColor: MaterialStateProperty.resolveWith((states) {
if (states.contains(MaterialState.hovered) ||
states.contains(MaterialState.dragged)) {
return theme.colorScheme.onSurface.withOpacity(0.5);
}
return theme.colorScheme.onSurface.withOpacity(0.3);
}),
),
child: Scrollbar(
controller: controller,
thumbVisibility: thumbVisibility,
trackVisibility: trackVisibility,
thickness: thickness,
radius: radius,
notificationPredicate: notificationPredicate,
interactive: interactive ?? true,
scrollbarOrientation: scrollbarOrientation,
child: child,
),
);
}
}

4
lib/components/shared/track_table/track_collection_view/track_collection_view.dart
View File

@ -7,6 +7,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/playlist/playlist_create_dialog.dart';
import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
import 'package:spotube/components/shared/shimmers/shimmer_track_tile.dart';
import 'package:spotube/components/shared/page_window_title_bar.dart';
import 'package:spotube/components/shared/track_table/track_collection_view/track_collection_heading.dart';
@ -139,6 +140,8 @@ class TrackCollectionView<T> extends HookConsumerWidget {
onRefresh: () async {
await tracksSnapshot.refresh();
},
child: InterScrollbar(
controller: controller,
child: CustomScrollView(
controller: controller,
physics: const AlwaysScrollableScrollPhysics(),
@ -265,6 +268,7 @@ class TrackCollectionView<T> extends HookConsumerWidget {
)
],
),
),
));
}
}

4
lib/pages/home/genres.dart
View File

@ -7,6 +7,7 @@ import 'package:spotify/spotify.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/genre/category_card.dart';
import 'package:spotube/components/shared/expandable_search/expandable_search.dart';
import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
import 'package:spotube/components/shared/shimmers/shimmer_categories.dart';
import 'package:spotube/components/shared/waypoint.dart';
@ -77,6 +78,8 @@ class GenrePage extends HookConsumerWidget {
const ShimmerCategories()
else
Expanded(
child: InterScrollbar(
controller: scrollController,
child: ListView.builder(
controller: scrollController,
itemCount: categories.length,
@ -94,6 +97,7 @@ class GenrePage extends HookConsumerWidget {
},
),
),
),
],
),
),

12
lib/pages/home/personalized.dart
View File

@ -6,6 +6,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/components/album/album_card.dart';
import 'package:spotube/components/playlist/playlist_card.dart';
import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
import 'package:spotube/components/shared/shimmers/shimmer_categories.dart';
import 'package:spotube/components/shared/shimmers/shimmer_playbutton_card.dart';
import 'package:spotube/components/shared/waypoint.dart';
@ -96,6 +97,7 @@ class PersonalizedPage extends HookConsumerWidget {
@override
Widget build(BuildContext context, ref) {
final controller = useScrollController();
final auth = ref.watch(AuthenticationNotifier.provider);
final featuredPlaylistsQuery = useQueries.playlist.featured(ref);
final playlists = useMemoized(
@ -124,7 +126,10 @@ class PersonalizedPage extends HookConsumerWidget {
[newReleases.pages],
);
return ListView(
return InterScrollbar(
controller: controller,
child: ListView(
controller: controller,
children: [
if (!featuredPlaylistsQuery.hasPageData)
const ShimmerCategories()
@ -135,7 +140,9 @@ class PersonalizedPage extends HookConsumerWidget {
hasNextPage: featuredPlaylistsQuery.hasNextPage,
onFetchMore: featuredPlaylistsQuery.fetchNext,
),
if (auth != null && newReleases.hasPageData && userArtistsQuery.hasData)
if (auth != null &&
newReleases.hasPageData &&
userArtistsQuery.hasData)
PersonalizedItemCard(
albums: albums,
title: context.l10n.new_releases,
@ -158,6 +165,7 @@ class PersonalizedPage extends HookConsumerWidget {
);
})
],
),
);
}
}

21
lib/pages/settings/settings.dart
View File

@ -17,6 +17,7 @@ import 'package:spotube/components/settings/color_scheme_picker_dialog.dart';
import 'package:spotube/components/settings/section_card_with_heading.dart';
import 'package:spotube/components/shared/adaptive/adaptive_list_tile.dart';
import 'package:spotube/components/shared/adaptive/adaptive_select_tile.dart';
import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
import 'package:spotube/components/shared/page_window_title_bar.dart';
import 'package:spotube/collections/spotify_markets.dart';
import 'package:spotube/extensions/constrains.dart';
@ -70,6 +71,7 @@ class SettingsPage extends HookConsumerWidget {
Flexible(
child: Container(
constraints: const BoxConstraints(maxWidth: 1366),
child: InterScrollbar(
child: ListView(
children: [
const SettingsAccountSection(),
@ -131,7 +133,8 @@ class SettingsPage extends HookConsumerWidget {
AdaptiveSelectTile<LayoutMode>(
secondary: const Icon(SpotubeIcons.dashboard),
title: Text(context.l10n.layout_mode),
subtitle: Text(context.l10n.override_layout_settings),
subtitle:
Text(context.l10n.override_layout_settings),
value: preferences.layoutMode,
onChanged: (value) {
if (value != null) {
@ -268,15 +271,15 @@ class SettingsPage extends HookConsumerWidget {
TextSpan(
text: context
.l10n.piped_description,
style:
theme.textTheme.bodyMedium,
style: theme
.textTheme.bodyMedium,
),
const TextSpan(text: "\n"),
TextSpan(
text:
context.l10n.piped_warning,
style:
theme.textTheme.labelMedium,
text: context
.l10n.piped_warning,
style: theme
.textTheme.labelMedium,
)
],
),
@ -313,7 +316,8 @@ class SettingsPage extends HookConsumerWidget {
.toList(),
onChanged: (value) {
if (value != null) {
preferences.setPipedInstance(value);
preferences
.setPipedInstance(value);
}
},
);
@ -571,6 +575,7 @@ class SettingsPage extends HookConsumerWidget {
),
),
),
),
],
),
),

8
lib/themes/theme.dart
View File

@ -69,13 +69,7 @@ ThemeData theme(Color seed, Brightness brightness, bool isAmoled) {
),
),
),
scrollbarTheme: DesktopTools.platform.isMobile
? const ScrollbarThemeData(
interactive: true,
thickness: MaterialStatePropertyAll(18),
minThumbLength: 20,
)
: const ScrollbarThemeData(
scrollbarTheme: const ScrollbarThemeData(
thickness: MaterialStatePropertyAll(14),
),
);