mirror of
https://github.com/KRTirtho/spotube.git
synced 2025-09-13 16:05:18 +00:00
fix: minor glitches
This commit is contained in:
Kingkor Roy Tirtho
parent
083319fd24
commit
e5d0aaf80d
@ -19,7 +19,6 @@ import 'package:spotube/pages/library/library.dart';
|
|||||||
import 'package:spotube/pages/desktop_login/login_tutorial.dart';
|
import 'package:spotube/pages/desktop_login/login_tutorial.dart';
|
||||||
import 'package:spotube/pages/desktop_login/desktop_login.dart';
|
import 'package:spotube/pages/desktop_login/desktop_login.dart';
|
||||||
import 'package:spotube/pages/lyrics/lyrics.dart';
|
import 'package:spotube/pages/lyrics/lyrics.dart';
|
||||||
import 'package:spotube/pages/player/player.dart';
|
|
||||||
import 'package:spotube/pages/playlist/playlist.dart';
|
import 'package:spotube/pages/playlist/playlist.dart';
|
||||||
import 'package:spotube/pages/root/root_app.dart';
|
import 'package:spotube/pages/root/root_app.dart';
|
||||||
import 'package:spotube/pages/settings/settings.dart';
|
import 'package:spotube/pages/settings/settings.dart';
|
||||||
@ -153,14 +152,5 @@ final router = GoRouter(
|
|||||||
pageBuilder: (context, state) =>
|
pageBuilder: (context, state) =>
|
||||||
const SpotubePage(child: LastFMLoginPage()),
|
const SpotubePage(child: LastFMLoginPage()),
|
||||||
),
|
),
|
||||||
GoRoute(
|
|
||||||
path: "/player",
|
|
||||||
parentNavigatorKey: rootNavigatorKey,
|
|
||||||
pageBuilder: (context, state) {
|
|
||||||
return const SpotubePage(
|
|
||||||
child: PlayerView(),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
|
|||||||
329
lib/components/player/player.dart
Normal file
329
lib/components/player/player.dart
Normal file
@ -0,0 +1,329 @@
|
|||||||
|
import 'package:auto_size_text/auto_size_text.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||||
|
import 'package:go_router/go_router.dart';
|
||||||
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||||
|
|
||||||
|
import 'package:spotify/spotify.dart' hide Offset;
|
||||||
|
import 'package:spotube/collections/assets.gen.dart';
|
||||||
|
import 'package:spotube/collections/spotube_icons.dart';
|
||||||
|
import 'package:spotube/components/player/player_actions.dart';
|
||||||
|
import 'package:spotube/components/player/player_controls.dart';
|
||||||
|
import 'package:spotube/components/player/player_queue.dart';
|
||||||
|
import 'package:spotube/components/player/volume_slider.dart';
|
||||||
|
import 'package:spotube/components/shared/animated_gradient.dart';
|
||||||
|
import 'package:spotube/components/shared/dialogs/track_details_dialog.dart';
|
||||||
|
import 'package:spotube/components/shared/page_window_title_bar.dart';
|
||||||
|
import 'package:spotube/components/shared/image/universal_image.dart';
|
||||||
|
import 'package:spotube/extensions/constrains.dart';
|
||||||
|
import 'package:spotube/extensions/context.dart';
|
||||||
|
import 'package:spotube/hooks/use_custom_status_bar_color.dart';
|
||||||
|
import 'package:spotube/hooks/use_palette_color.dart';
|
||||||
|
import 'package:spotube/models/local_track.dart';
|
||||||
|
import 'package:spotube/pages/lyrics/lyrics.dart';
|
||||||
|
import 'package:spotube/provider/authentication_provider.dart';
|
||||||
|
import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
|
||||||
|
import 'package:spotube/utils/type_conversion_utils.dart';
|
||||||
|
|
||||||
|
class PlayerView extends HookConsumerWidget {
|
||||||
|
final bool isOpen;
|
||||||
|
final Function() onClosePage;
|
||||||
|
|
||||||
|
const PlayerView({
|
||||||
|
Key? key,
|
||||||
|
required this.isOpen,
|
||||||
|
required this.onClosePage,
|
||||||
|
}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context, ref) {
|
||||||
|
final theme = Theme.of(context);
|
||||||
|
final auth = ref.watch(AuthenticationNotifier.provider);
|
||||||
|
final currentTrack = ref.watch(ProxyPlaylistNotifier.provider.select(
|
||||||
|
(value) => value.activeTrack,
|
||||||
|
));
|
||||||
|
final isLocalTrack = ref.watch(ProxyPlaylistNotifier.provider.select(
|
||||||
|
(value) => value.activeTrack is LocalTrack,
|
||||||
|
));
|
||||||
|
final mediaQuery = MediaQuery.of(context);
|
||||||
|
|
||||||
|
useEffect(() {
|
||||||
|
if (mediaQuery.lgAndUp) {
|
||||||
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||||
|
onClosePage();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}, [mediaQuery.lgAndUp]);
|
||||||
|
|
||||||
|
String albumArt = useMemoized(
|
||||||
|
() => TypeConversionUtils.image_X_UrlString(
|
||||||
|
currentTrack?.album?.images,
|
||||||
|
placeholder: ImagePlaceholder.albumArt,
|
||||||
|
),
|
||||||
|
[currentTrack?.album?.images],
|
||||||
|
);
|
||||||
|
|
||||||
|
final palette = usePaletteGenerator(albumArt);
|
||||||
|
final bgColor = palette.dominantColor?.color ?? theme.colorScheme.primary;
|
||||||
|
final titleTextColor = palette.dominantColor?.titleTextColor;
|
||||||
|
final bodyTextColor = palette.dominantColor?.bodyTextColor;
|
||||||
|
|
||||||
|
useCustomStatusBarColor(
|
||||||
|
bgColor,
|
||||||
|
isOpen,
|
||||||
|
noSetBGColor: true,
|
||||||
|
);
|
||||||
|
|
||||||
|
return IconTheme(
|
||||||
|
data: theme.iconTheme.copyWith(color: bodyTextColor),
|
||||||
|
child: Scaffold(
|
||||||
|
appBar: PreferredSize(
|
||||||
|
preferredSize: const Size.fromHeight(kToolbarHeight),
|
||||||
|
child: SafeArea(
|
||||||
|
minimum: const EdgeInsets.only(top: 30),
|
||||||
|
child: PageWindowTitleBar(
|
||||||
|
backgroundColor: Colors.transparent,
|
||||||
|
foregroundColor: titleTextColor,
|
||||||
|
toolbarOpacity: 1,
|
||||||
|
leading: IconButton(
|
||||||
|
icon: const Icon(SpotubeIcons.angleDown, size: 18),
|
||||||
|
onPressed: onClosePage,
|
||||||
|
),
|
||||||
|
actions: [
|
||||||
|
IconButton(
|
||||||
|
icon: const Icon(SpotubeIcons.info, size: 18),
|
||||||
|
tooltip: context.l10n.details,
|
||||||
|
style: IconButton.styleFrom(foregroundColor: bodyTextColor),
|
||||||
|
onPressed: currentTrack == null
|
||||||
|
? null
|
||||||
|
: () {
|
||||||
|
showDialog(
|
||||||
|
context: context,
|
||||||
|
builder: (context) {
|
||||||
|
return TrackDetailsDialog(
|
||||||
|
track: currentTrack,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
extendBodyBehindAppBar: true,
|
||||||
|
body: AnimateGradient(
|
||||||
|
animateAlignments: true,
|
||||||
|
primaryBegin: Alignment.topLeft,
|
||||||
|
primaryEnd: Alignment.bottomLeft,
|
||||||
|
secondaryBegin: Alignment.bottomRight,
|
||||||
|
secondaryEnd: Alignment.topRight,
|
||||||
|
duration: const Duration(seconds: 15),
|
||||||
|
primaryColors: [
|
||||||
|
palette.dominantColor?.color ?? theme.colorScheme.primary,
|
||||||
|
palette.mutedColor?.color ?? theme.colorScheme.secondary,
|
||||||
|
],
|
||||||
|
secondaryColors: [
|
||||||
|
(palette.darkVibrantColor ?? palette.lightVibrantColor)?.color ??
|
||||||
|
theme.colorScheme.primaryContainer,
|
||||||
|
(palette.darkMutedColor ?? palette.lightMutedColor)?.color ??
|
||||||
|
theme.colorScheme.secondaryContainer,
|
||||||
|
],
|
||||||
|
child: SingleChildScrollView(
|
||||||
|
child: Container(
|
||||||
|
alignment: Alignment.center,
|
||||||
|
width: double.infinity,
|
||||||
|
child: ConstrainedBox(
|
||||||
|
constraints: const BoxConstraints(maxWidth: 580),
|
||||||
|
child: SafeArea(
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(8.0),
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
Container(
|
||||||
|
margin: const EdgeInsets.all(8),
|
||||||
|
constraints: const BoxConstraints(
|
||||||
|
maxHeight: 300, maxWidth: 300),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.circular(20),
|
||||||
|
boxShadow: const [
|
||||||
|
BoxShadow(
|
||||||
|
color: Colors.black26,
|
||||||
|
spreadRadius: 2,
|
||||||
|
blurRadius: 10,
|
||||||
|
offset: Offset(0, 0),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
child: ClipRRect(
|
||||||
|
borderRadius: BorderRadius.circular(20),
|
||||||
|
child: UniversalImage(
|
||||||
|
path: albumArt,
|
||||||
|
placeholder: Assets.albumPlaceholder.path,
|
||||||
|
fit: BoxFit.cover,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 60),
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||||
|
alignment: Alignment.centerLeft,
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
AutoSizeText(
|
||||||
|
currentTrack?.name ?? "Not playing",
|
||||||
|
style: TextStyle(
|
||||||
|
color: titleTextColor,
|
||||||
|
fontSize: 22,
|
||||||
|
),
|
||||||
|
maxFontSize: 22,
|
||||||
|
maxLines: 1,
|
||||||
|
textAlign: TextAlign.start,
|
||||||
|
),
|
||||||
|
if (isLocalTrack)
|
||||||
|
Text(
|
||||||
|
TypeConversionUtils.artists_X_String<Artist>(
|
||||||
|
currentTrack?.artists ?? [],
|
||||||
|
),
|
||||||
|
style: theme.textTheme.bodyMedium!.copyWith(
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
color: bodyTextColor,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
else
|
||||||
|
TypeConversionUtils.artists_X_ClickableArtists(
|
||||||
|
currentTrack?.artists ?? [],
|
||||||
|
textStyle:
|
||||||
|
theme.textTheme.bodyMedium!.copyWith(
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
color: bodyTextColor,
|
||||||
|
),
|
||||||
|
onRouteChange: (route) {
|
||||||
|
onClosePage();
|
||||||
|
GoRouter.of(context).push(route);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 10),
|
||||||
|
PlayerControls(palette: palette),
|
||||||
|
const SizedBox(height: 25),
|
||||||
|
PlayerActions(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||||
|
showQueue: false,
|
||||||
|
),
|
||||||
|
const SizedBox(height: 10),
|
||||||
|
Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||||
|
children: [
|
||||||
|
const SizedBox(width: 10),
|
||||||
|
Expanded(
|
||||||
|
child: OutlinedButton.icon(
|
||||||
|
icon: const Icon(SpotubeIcons.queue),
|
||||||
|
label: Text(context.l10n.queue),
|
||||||
|
style: OutlinedButton.styleFrom(
|
||||||
|
foregroundColor: bodyTextColor,
|
||||||
|
side: BorderSide(
|
||||||
|
color: bodyTextColor ?? Colors.white,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
onPressed: currentTrack != null
|
||||||
|
? () {
|
||||||
|
showModalBottomSheet(
|
||||||
|
context: context,
|
||||||
|
isDismissible: true,
|
||||||
|
enableDrag: true,
|
||||||
|
isScrollControlled: true,
|
||||||
|
backgroundColor: Colors.black12,
|
||||||
|
barrierColor: Colors.black12,
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius:
|
||||||
|
BorderRadius.circular(10),
|
||||||
|
),
|
||||||
|
constraints: BoxConstraints(
|
||||||
|
maxHeight: MediaQuery.of(context)
|
||||||
|
.size
|
||||||
|
.height *
|
||||||
|
.7,
|
||||||
|
),
|
||||||
|
builder: (context) {
|
||||||
|
return const PlayerQueue(
|
||||||
|
floating: false);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
: null),
|
||||||
|
),
|
||||||
|
if (auth != null) const SizedBox(width: 10),
|
||||||
|
if (auth != null)
|
||||||
|
Expanded(
|
||||||
|
child: OutlinedButton.icon(
|
||||||
|
label: Text(context.l10n.lyrics),
|
||||||
|
icon: const Icon(SpotubeIcons.music),
|
||||||
|
style: OutlinedButton.styleFrom(
|
||||||
|
foregroundColor: bodyTextColor,
|
||||||
|
side: BorderSide(
|
||||||
|
color: bodyTextColor ?? Colors.white,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
onPressed: () {
|
||||||
|
showModalBottomSheet(
|
||||||
|
context: context,
|
||||||
|
isDismissible: true,
|
||||||
|
enableDrag: true,
|
||||||
|
isScrollControlled: true,
|
||||||
|
backgroundColor: Colors.black38,
|
||||||
|
barrierColor: Colors.black12,
|
||||||
|
shape: const RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.only(
|
||||||
|
topLeft: Radius.circular(20),
|
||||||
|
topRight: Radius.circular(20),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
constraints: BoxConstraints(
|
||||||
|
maxHeight:
|
||||||
|
MediaQuery.of(context).size.height *
|
||||||
|
0.8,
|
||||||
|
),
|
||||||
|
builder: (context) =>
|
||||||
|
const LyricsPage(isModal: true),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: 10),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: 25),
|
||||||
|
SliderTheme(
|
||||||
|
data: theme.sliderTheme.copyWith(
|
||||||
|
activeTrackColor: titleTextColor,
|
||||||
|
inactiveTrackColor: bodyTextColor,
|
||||||
|
thumbColor: titleTextColor,
|
||||||
|
overlayColor: titleTextColor?.withOpacity(0.2),
|
||||||
|
trackHeight: 2,
|
||||||
|
thumbShape: const RoundSliderThumbShape(
|
||||||
|
enabledThumbRadius: 8,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: const Padding(
|
||||||
|
padding: EdgeInsets.symmetric(horizontal: 16),
|
||||||
|
child: VolumeSlider(
|
||||||
|
fullWidth: true,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -2,7 +2,6 @@ import 'dart:ui';
|
|||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||||
import 'package:go_router/go_router.dart';
|
|
||||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||||
|
|
||||||
import 'package:spotube/components/player/player_track_details.dart';
|
import 'package:spotube/components/player/player_track_details.dart';
|
||||||
@ -11,7 +10,7 @@ import 'package:spotube/components/shared/panels/sliding_up_panel.dart';
|
|||||||
import 'package:spotube/collections/spotube_icons.dart';
|
import 'package:spotube/collections/spotube_icons.dart';
|
||||||
import 'package:spotube/collections/intents.dart';
|
import 'package:spotube/collections/intents.dart';
|
||||||
import 'package:spotube/hooks/use_progress.dart';
|
import 'package:spotube/hooks/use_progress.dart';
|
||||||
import 'package:spotube/pages/player/player.dart';
|
import 'package:spotube/components/player/player.dart';
|
||||||
import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
|
import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
|
||||||
import 'package:spotube/services/audio_player/audio_player.dart';
|
import 'package:spotube/services/audio_player/audio_player.dart';
|
||||||
|
|
||||||
@ -52,13 +51,14 @@ class PlayerOverlay extends HookConsumerWidget {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return SlidingUpPanel(
|
return SlidingUpPanel(
|
||||||
maxHeight: mediaQuery.size.height - mediaQuery.padding.top,
|
maxHeight: mediaQuery.size.height,
|
||||||
backdropEnabled: false,
|
backdropEnabled: false,
|
||||||
minHeight: canShow ? 53 : 0,
|
minHeight: canShow ? 53 : 0,
|
||||||
onPanelSlide: (position) {
|
onPanelSlide: (position) {
|
||||||
final invertedPosition = 1 - position;
|
final invertedPosition = 1 - position;
|
||||||
ref.read(navigationPanelHeight.notifier).state = 50 * invertedPosition;
|
ref.read(navigationPanelHeight.notifier).state = 50 * invertedPosition;
|
||||||
},
|
},
|
||||||
|
controller: panelController,
|
||||||
collapsed: ClipRRect(
|
collapsed: ClipRRect(
|
||||||
borderRadius: radius,
|
borderRadius: radius,
|
||||||
child: BackdropFilter(
|
child: BackdropFilter(
|
||||||
@ -106,18 +106,16 @@ class PlayerOverlay extends HookConsumerWidget {
|
|||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
children: [
|
children: [
|
||||||
Expanded(
|
Expanded(
|
||||||
child: MouseRegion(
|
child: GestureDetector(
|
||||||
cursor: SystemMouseCursors.click,
|
onTap: () {
|
||||||
child: GestureDetector(
|
panelController.open();
|
||||||
onTap: () =>
|
},
|
||||||
GoRouter.of(context).push("/player"),
|
child: Container(
|
||||||
child: Container(
|
width: double.infinity,
|
||||||
width: double.infinity,
|
color: Colors.transparent,
|
||||||
color: Colors.transparent,
|
child: PlayerTrackDetails(
|
||||||
child: PlayerTrackDetails(
|
albumArt: albumArt,
|
||||||
albumArt: albumArt,
|
color: textColor,
|
||||||
color: textColor,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@ -186,7 +184,14 @@ class PlayerOverlay extends HookConsumerWidget {
|
|||||||
decoration: navigationHeight == 0
|
decoration: navigationHeight == 0
|
||||||
? const BoxDecoration(borderRadius: BorderRadius.zero)
|
? const BoxDecoration(borderRadius: BorderRadius.zero)
|
||||||
: const BoxDecoration(borderRadius: radius),
|
: const BoxDecoration(borderRadius: radius),
|
||||||
child: const PlayerView(),
|
child: HorizontalScrollableWidget(
|
||||||
|
child: PlayerView(
|
||||||
|
isOpen: panelController.isPanelOpen,
|
||||||
|
onClosePage: () {
|
||||||
|
panelController.close();
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|||||||
@ -56,7 +56,7 @@ class SpotubeNavigationBar extends HookConsumerWidget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return AnimatedContainer(
|
return AnimatedContainer(
|
||||||
duration: const Duration(milliseconds: 250),
|
duration: const Duration(milliseconds: 100),
|
||||||
height: panelHeight,
|
height: panelHeight,
|
||||||
child: ClipRect(
|
child: ClipRect(
|
||||||
child: BackdropFilter(
|
child: BackdropFilter(
|
||||||
|
|||||||
@ -377,7 +377,10 @@ class SlidingUpPanelState extends State<SlidingUpPanel>
|
|||||||
|
|
||||||
// if the panel is open ignore pointers (touch events) on the collapsed
|
// if the panel is open ignore pointers (touch events) on the collapsed
|
||||||
// child so that way touch events go through to whatever is underneath
|
// child so that way touch events go through to whatever is underneath
|
||||||
child: widget.collapsed,
|
child: IgnorePointer(
|
||||||
|
ignoring: _animationController.value == 1.0,
|
||||||
|
child: widget.collapsed,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|||||||
@ -1,322 +0,0 @@
|
|||||||
import 'package:auto_size_text/auto_size_text.dart';
|
|
||||||
import 'package:flutter/material.dart';
|
|
||||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
|
||||||
import 'package:go_router/go_router.dart';
|
|
||||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
|
||||||
|
|
||||||
import 'package:spotify/spotify.dart' hide Offset;
|
|
||||||
import 'package:spotube/collections/assets.gen.dart';
|
|
||||||
import 'package:spotube/collections/spotube_icons.dart';
|
|
||||||
import 'package:spotube/components/player/player_actions.dart';
|
|
||||||
import 'package:spotube/components/player/player_controls.dart';
|
|
||||||
import 'package:spotube/components/player/player_queue.dart';
|
|
||||||
import 'package:spotube/components/player/volume_slider.dart';
|
|
||||||
import 'package:spotube/components/shared/animated_gradient.dart';
|
|
||||||
import 'package:spotube/components/shared/dialogs/track_details_dialog.dart';
|
|
||||||
import 'package:spotube/components/shared/page_window_title_bar.dart';
|
|
||||||
import 'package:spotube/components/shared/image/universal_image.dart';
|
|
||||||
import 'package:spotube/extensions/constrains.dart';
|
|
||||||
import 'package:spotube/extensions/context.dart';
|
|
||||||
import 'package:spotube/hooks/use_custom_status_bar_color.dart';
|
|
||||||
import 'package:spotube/hooks/use_palette_color.dart';
|
|
||||||
import 'package:spotube/models/local_track.dart';
|
|
||||||
import 'package:spotube/pages/lyrics/lyrics.dart';
|
|
||||||
import 'package:spotube/provider/authentication_provider.dart';
|
|
||||||
import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
|
|
||||||
import 'package:spotube/utils/type_conversion_utils.dart';
|
|
||||||
|
|
||||||
class PlayerView extends HookConsumerWidget {
|
|
||||||
const PlayerView({
|
|
||||||
Key? key,
|
|
||||||
}) : super(key: key);
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context, ref) {
|
|
||||||
final theme = Theme.of(context);
|
|
||||||
final auth = ref.watch(AuthenticationNotifier.provider);
|
|
||||||
final currentTrack = ref.watch(ProxyPlaylistNotifier.provider.select(
|
|
||||||
(value) => value.activeTrack,
|
|
||||||
));
|
|
||||||
final isLocalTrack = ref.watch(ProxyPlaylistNotifier.provider.select(
|
|
||||||
(value) => value.activeTrack is LocalTrack,
|
|
||||||
));
|
|
||||||
final mediaQuery = MediaQuery.of(context);
|
|
||||||
|
|
||||||
useEffect(() {
|
|
||||||
if (mediaQuery.lgAndUp) {
|
|
||||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
||||||
GoRouter.of(context).pop();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}, [mediaQuery.lgAndUp]);
|
|
||||||
|
|
||||||
String albumArt = useMemoized(
|
|
||||||
() => TypeConversionUtils.image_X_UrlString(
|
|
||||||
currentTrack?.album?.images,
|
|
||||||
placeholder: ImagePlaceholder.albumArt,
|
|
||||||
),
|
|
||||||
[currentTrack?.album?.images],
|
|
||||||
);
|
|
||||||
|
|
||||||
final palette = usePaletteGenerator(albumArt);
|
|
||||||
final bgColor = palette.dominantColor?.color ?? theme.colorScheme.primary;
|
|
||||||
final titleTextColor = palette.dominantColor?.titleTextColor;
|
|
||||||
final bodyTextColor = palette.dominantColor?.bodyTextColor;
|
|
||||||
|
|
||||||
useCustomStatusBarColor(
|
|
||||||
bgColor,
|
|
||||||
GoRouterState.of(context).matchedLocation == "/player",
|
|
||||||
noSetBGColor: true,
|
|
||||||
);
|
|
||||||
|
|
||||||
return IconTheme(
|
|
||||||
data: theme.iconTheme.copyWith(color: bodyTextColor),
|
|
||||||
child: Scaffold(
|
|
||||||
appBar: PageWindowTitleBar(
|
|
||||||
backgroundColor: Colors.transparent,
|
|
||||||
foregroundColor: titleTextColor,
|
|
||||||
toolbarOpacity: 1,
|
|
||||||
leading: const BackButton(),
|
|
||||||
actions: [
|
|
||||||
IconButton(
|
|
||||||
icon: const Icon(SpotubeIcons.info, size: 18),
|
|
||||||
tooltip: context.l10n.details,
|
|
||||||
style: IconButton.styleFrom(foregroundColor: bodyTextColor),
|
|
||||||
onPressed: currentTrack == null
|
|
||||||
? null
|
|
||||||
: () {
|
|
||||||
showDialog(
|
|
||||||
context: context,
|
|
||||||
builder: (context) {
|
|
||||||
return TrackDetailsDialog(
|
|
||||||
track: currentTrack,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
)
|
|
||||||
],
|
|
||||||
),
|
|
||||||
extendBodyBehindAppBar: true,
|
|
||||||
body: SizedBox(
|
|
||||||
height: double.infinity,
|
|
||||||
child: AnimateGradient(
|
|
||||||
animateAlignments: true,
|
|
||||||
primaryBegin: Alignment.topLeft,
|
|
||||||
primaryEnd: Alignment.bottomLeft,
|
|
||||||
secondaryBegin: Alignment.bottomRight,
|
|
||||||
secondaryEnd: Alignment.topRight,
|
|
||||||
duration: const Duration(seconds: 15),
|
|
||||||
primaryColors: [
|
|
||||||
palette.dominantColor?.color ?? theme.colorScheme.primary,
|
|
||||||
palette.mutedColor?.color ?? theme.colorScheme.secondary,
|
|
||||||
],
|
|
||||||
secondaryColors: [
|
|
||||||
(palette.darkVibrantColor ?? palette.lightVibrantColor)?.color ??
|
|
||||||
theme.colorScheme.primaryContainer,
|
|
||||||
(palette.darkMutedColor ?? palette.lightMutedColor)?.color ??
|
|
||||||
theme.colorScheme.secondaryContainer,
|
|
||||||
],
|
|
||||||
child: SingleChildScrollView(
|
|
||||||
child: Container(
|
|
||||||
alignment: Alignment.center,
|
|
||||||
width: double.infinity,
|
|
||||||
child: ConstrainedBox(
|
|
||||||
constraints: const BoxConstraints(maxWidth: 580),
|
|
||||||
child: SafeArea(
|
|
||||||
child: Padding(
|
|
||||||
padding: const EdgeInsets.all(8.0),
|
|
||||||
child: Column(
|
|
||||||
children: [
|
|
||||||
Container(
|
|
||||||
margin: const EdgeInsets.all(8),
|
|
||||||
constraints: const BoxConstraints(
|
|
||||||
maxHeight: 300, maxWidth: 300),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
borderRadius: BorderRadius.circular(20),
|
|
||||||
boxShadow: const [
|
|
||||||
BoxShadow(
|
|
||||||
color: Colors.black26,
|
|
||||||
spreadRadius: 2,
|
|
||||||
blurRadius: 10,
|
|
||||||
offset: Offset(0, 0),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
child: ClipRRect(
|
|
||||||
borderRadius: BorderRadius.circular(20),
|
|
||||||
child: UniversalImage(
|
|
||||||
path: albumArt,
|
|
||||||
placeholder: Assets.albumPlaceholder.path,
|
|
||||||
fit: BoxFit.cover,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(height: 60),
|
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
||||||
alignment: Alignment.centerLeft,
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
AutoSizeText(
|
|
||||||
currentTrack?.name ?? "Not playing",
|
|
||||||
style: TextStyle(
|
|
||||||
color: titleTextColor,
|
|
||||||
fontSize: 22,
|
|
||||||
),
|
|
||||||
maxFontSize: 22,
|
|
||||||
maxLines: 1,
|
|
||||||
textAlign: TextAlign.start,
|
|
||||||
),
|
|
||||||
if (isLocalTrack)
|
|
||||||
Text(
|
|
||||||
TypeConversionUtils.artists_X_String<
|
|
||||||
Artist>(
|
|
||||||
currentTrack?.artists ?? [],
|
|
||||||
),
|
|
||||||
style: theme.textTheme.bodyMedium!.copyWith(
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: bodyTextColor,
|
|
||||||
),
|
|
||||||
)
|
|
||||||
else
|
|
||||||
TypeConversionUtils
|
|
||||||
.artists_X_ClickableArtists(
|
|
||||||
currentTrack?.artists ?? [],
|
|
||||||
textStyle:
|
|
||||||
theme.textTheme.bodyMedium!.copyWith(
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: bodyTextColor,
|
|
||||||
),
|
|
||||||
onRouteChange: (route) {
|
|
||||||
GoRouter.of(context).pop();
|
|
||||||
GoRouter.of(context).push(route);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(height: 10),
|
|
||||||
PlayerControls(palette: palette),
|
|
||||||
const SizedBox(height: 25),
|
|
||||||
PlayerActions(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
||||||
showQueue: false,
|
|
||||||
),
|
|
||||||
const SizedBox(height: 10),
|
|
||||||
Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
||||||
children: [
|
|
||||||
const SizedBox(width: 10),
|
|
||||||
Expanded(
|
|
||||||
child: OutlinedButton.icon(
|
|
||||||
icon: const Icon(SpotubeIcons.queue),
|
|
||||||
label: Text(context.l10n.queue),
|
|
||||||
style: OutlinedButton.styleFrom(
|
|
||||||
foregroundColor: bodyTextColor,
|
|
||||||
side: BorderSide(
|
|
||||||
color: bodyTextColor ?? Colors.white,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
onPressed: currentTrack != null
|
|
||||||
? () {
|
|
||||||
showModalBottomSheet(
|
|
||||||
context: context,
|
|
||||||
isDismissible: true,
|
|
||||||
enableDrag: true,
|
|
||||||
isScrollControlled: true,
|
|
||||||
backgroundColor: Colors.black12,
|
|
||||||
barrierColor: Colors.black12,
|
|
||||||
shape: RoundedRectangleBorder(
|
|
||||||
borderRadius:
|
|
||||||
BorderRadius.circular(10),
|
|
||||||
),
|
|
||||||
constraints: BoxConstraints(
|
|
||||||
maxHeight:
|
|
||||||
MediaQuery.of(context)
|
|
||||||
.size
|
|
||||||
.height *
|
|
||||||
.7,
|
|
||||||
),
|
|
||||||
builder: (context) {
|
|
||||||
return const PlayerQueue(
|
|
||||||
floating: false);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
: null),
|
|
||||||
),
|
|
||||||
if (auth != null) const SizedBox(width: 10),
|
|
||||||
if (auth != null)
|
|
||||||
Expanded(
|
|
||||||
child: OutlinedButton.icon(
|
|
||||||
label: Text(context.l10n.lyrics),
|
|
||||||
icon: const Icon(SpotubeIcons.music),
|
|
||||||
style: OutlinedButton.styleFrom(
|
|
||||||
foregroundColor: bodyTextColor,
|
|
||||||
side: BorderSide(
|
|
||||||
color: bodyTextColor ?? Colors.white,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
onPressed: () {
|
|
||||||
showModalBottomSheet(
|
|
||||||
context: context,
|
|
||||||
isDismissible: true,
|
|
||||||
enableDrag: true,
|
|
||||||
isScrollControlled: true,
|
|
||||||
backgroundColor: Colors.black38,
|
|
||||||
barrierColor: Colors.black12,
|
|
||||||
shape: const RoundedRectangleBorder(
|
|
||||||
borderRadius: BorderRadius.only(
|
|
||||||
topLeft: Radius.circular(20),
|
|
||||||
topRight: Radius.circular(20),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
constraints: BoxConstraints(
|
|
||||||
maxHeight: MediaQuery.of(context)
|
|
||||||
.size
|
|
||||||
.height *
|
|
||||||
0.8,
|
|
||||||
),
|
|
||||||
builder: (context) =>
|
|
||||||
const LyricsPage(isModal: true),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(width: 10),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
const SizedBox(height: 25),
|
|
||||||
SliderTheme(
|
|
||||||
data: theme.sliderTheme.copyWith(
|
|
||||||
activeTrackColor: titleTextColor,
|
|
||||||
inactiveTrackColor: bodyTextColor,
|
|
||||||
thumbColor: titleTextColor,
|
|
||||||
overlayColor: titleTextColor?.withOpacity(0.2),
|
|
||||||
trackHeight: 2,
|
|
||||||
thumbShape: const RoundSliderThumbShape(
|
|
||||||
enabledThumbRadius: 8,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: const Padding(
|
|
||||||
padding: EdgeInsets.symmetric(horizontal: 16),
|
|
||||||
child: VolumeSlider(
|
|
||||||
fullWidth: true,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -248,9 +248,11 @@ class UserPreferences extends PersistedChangeNotifier {
|
|||||||
|
|
||||||
void setSystemTitleBar(bool isSystemTitleBar) {
|
void setSystemTitleBar(bool isSystemTitleBar) {
|
||||||
systemTitleBar = isSystemTitleBar;
|
systemTitleBar = isSystemTitleBar;
|
||||||
DesktopTools.window.setTitleBarStyle(
|
if (DesktopTools.platform.isDesktop) {
|
||||||
systemTitleBar ? TitleBarStyle.normal : TitleBarStyle.hidden,
|
DesktopTools.window.setTitleBarStyle(
|
||||||
);
|
systemTitleBar ? TitleBarStyle.normal : TitleBarStyle.hidden,
|
||||||
|
);
|
||||||
|
}
|
||||||
notifyListeners();
|
notifyListeners();
|
||||||
updatePersistence();
|
updatePersistence();
|
||||||
}
|
}
|
||||||
@ -286,6 +288,7 @@ class UserPreferences extends PersistedChangeNotifier {
|
|||||||
recommendationMarket = Market.values.firstWhere(
|
recommendationMarket = Market.values.firstWhere(
|
||||||
(market) =>
|
(market) =>
|
||||||
market.name == (map["recommendationMarket"] ?? recommendationMarket),
|
market.name == (map["recommendationMarket"] ?? recommendationMarket),
|
||||||
|
orElse: () => Market.US,
|
||||||
);
|
);
|
||||||
checkUpdate = map["checkUpdate"] ?? checkUpdate;
|
checkUpdate = map["checkUpdate"] ?? checkUpdate;
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user