kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-14 08:25:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: track view header title overflow and player view drag glitch

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2023-12-08 14:46:27 +06:00
parent 581b241f99
commit b04d8849e7
6 changed files with 156 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
lib/components/player/player.dart
View File

@ -28,9 +28,11 @@ import 'package:spotube/utils/type_conversion_utils.dart';
class PlayerView extends HookConsumerWidget { class PlayerView extends HookConsumerWidget {
final PanelController panelController; final PanelController panelController;
final ScrollController scrollController;
const PlayerView({ const PlayerView({
Key? key, Key? key,
required this.panelController, required this.panelController,
required this.scrollController,
}) : super(key: key); }) : super(key: key);
@override @override
@ -119,6 +121,7 @@ class PlayerView extends HookConsumerWidget {
preferredSize: Size.fromHeight( preferredSize: Size.fromHeight(
kToolbarHeight + topPadding, kToolbarHeight + topPadding,
), ),
child: ForceDraggableWidget(
child: Padding( child: Padding(
padding: EdgeInsets.only(top: topPadding), padding: EdgeInsets.only(top: topPadding),
child: PageWindowTitleBar( child: PageWindowTitleBar(
@ -133,8 +136,8 @@ class PlayerView extends HookConsumerWidget {
IconButton( IconButton(
icon: const Icon(SpotubeIcons.info, size: 18), icon: const Icon(SpotubeIcons.info, size: 18),
tooltip: context.l10n.details, tooltip: context.l10n.details,
style: style: IconButton.styleFrom(
IconButton.styleFrom(foregroundColor: bodyTextColor), foregroundColor: bodyTextColor),
onPressed: currentTrack == null onPressed: currentTrack == null
? null ? null
: () { : () {
@ -151,8 +154,10 @@ class PlayerView extends HookConsumerWidget {
), ),
), ),
), ),
),
extendBodyBehindAppBar: true, extendBodyBehindAppBar: true,
body: SingleChildScrollView( body: SingleChildScrollView(
controller: scrollController,
child: Container( child: Container(
alignment: Alignment.center, alignment: Alignment.center,
width: double.infinity, width: double.infinity,
@ -163,7 +168,8 @@ class PlayerView extends HookConsumerWidget {
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
child: Column( child: Column(
children: [ children: [
Container( ForceDraggableWidget(
child: Container(
margin: const EdgeInsets.all(8), margin: const EdgeInsets.all(8),
constraints: const BoxConstraints( constraints: const BoxConstraints(
maxHeight: 300, maxWidth: 300), maxHeight: 300, maxWidth: 300),
@ -187,6 +193,7 @@ class PlayerView extends HookConsumerWidget {
), ),
), ),
), ),
),
const SizedBox(height: 60), const SizedBox(height: 60),
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 16), padding: const EdgeInsets.symmetric(horizontal: 16),

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

@ -43,6 +43,7 @@ class PlayerOverlay extends HookConsumerWidget {
final mediaQuery = MediaQuery.of(context); final mediaQuery = MediaQuery.of(context);
final panelController = useMemoized(() => PanelController(), []); final panelController = useMemoized(() => PanelController(), []);
final scrollController = useScrollController();
useEffect(() { useEffect(() {
return () { return () {
@ -174,6 +175,7 @@ class PlayerOverlay extends HookConsumerWidget {
), ),
), ),
), ),
scrollController: scrollController,
panelBuilder: (position) { panelBuilder: (position) {
// this is the reason we're getting an update // this is the reason we're getting an update
final navigationHeight = ref.watch(navigationPanelHeight); final navigationHeight = ref.watch(navigationPanelHeight);
@ -188,8 +190,11 @@ 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: HorizontalScrollableWidget( child: IgnoreDraggableWidget(
child: PlayerView(panelController: panelController), child: PlayerView(
panelController: panelController,
scrollController: scrollController,
),
), ),
), ),
); );

4
lib/components/shared/playbutton_card.dart
View File

@ -90,17 +90,19 @@ class PlaybuttonCard extends HookWidget {
Stack( Stack(
clipBehavior: Clip.none, clipBehavior: Clip.none,
children: [ children: [
Padding( Container(
padding: const EdgeInsets.only( padding: const EdgeInsets.only(
left: 8, left: 8,
right: 8, right: 8,
top: 8, top: 8,
), ),
constraints: BoxConstraints(maxHeight: size),
child: ClipRRect( child: ClipRRect(
borderRadius: radius, borderRadius: radius,
child: UniversalImage( child: UniversalImage(
path: imageUrl, path: imageUrl,
placeholder: Assets.albumPlaceholder.path, placeholder: Assets.albumPlaceholder.path,
fit: BoxFit.cover,
), ),
), ),
), ),

3
lib/components/shared/track_tile/track_tile.dart
View File

@ -4,6 +4,7 @@ import 'package:flutter/gestures.dart';
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:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:skeletonizer/skeletonizer.dart';
import 'package:spotify/spotify.dart'; import 'package:spotify/spotify.dart';
import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/shared/hover_builder.dart'; import 'package:spotube/components/shared/hover_builder.dart';
@ -158,6 +159,7 @@ class TrackTile extends HookConsumerWidget {
child: IconTheme( child: IconTheme(
data: theme.iconTheme data: theme.iconTheme
.copyWith(size: 26, color: Colors.white), .copyWith(size: 26, color: Colors.white),
child: Skeleton.ignore(
child: AnimatedSwitcher( child: AnimatedSwitcher(
duration: const Duration(milliseconds: 300), duration: const Duration(milliseconds: 300),
child: (isPlaying && playlist.isFetching) || child: (isPlaying && playlist.isFetching) ||
@ -182,6 +184,7 @@ class TrackTile extends HookConsumerWidget {
), ),
), ),
), ),
),
], ],
), ),
], ],

11
lib/components/shared/tracks_view/sections/body/track_view_body.dart
View File

@ -93,9 +93,14 @@ class TrackViewBodySection extends HookConsumerWidget {
index: 0, index: 0,
), ),
), ),
emptyBuilder: (context) => const Row( emptyBuilder: (context) => Skeletonizer(
mainAxisAlignment: MainAxisAlignment.center, enabled: true,
children: [NotFound()], child: Column(
children: List.generate(
10,
(index) => TrackTile(track: FakeData.track, index: index),
),
),
), ),
itemBuilder: (context, index) { itemBuilder: (context, index) {
final track = tracks[index]; final track = tracks[index];

26
lib/components/shared/tracks_view/sections/header/flexible_header.dart
View File

@ -88,7 +88,13 @@ class TrackViewFlexHeader extends HookConsumerWidget {
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
Flex( ConstrainedBox(
constraints: BoxConstraints(
maxWidth: mediaQuery.mdAndDown
? mediaQuery.size.width
: 800,
),
child: Flex(
direction: mediaQuery.mdAndDown direction: mediaQuery.mdAndDown
? Axis.vertical ? Axis.vertical
: Axis.horizontal, : Axis.horizontal,
@ -104,19 +110,29 @@ class TrackViewFlexHeader extends HookConsumerWidget {
), ),
), ),
const Gap(20), const Gap(20),
Column( Flexible(
child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: mediaQuery.mdAndDown crossAxisAlignment: mediaQuery.mdAndDown
? CrossAxisAlignment.center ? CrossAxisAlignment.center
: CrossAxisAlignment.start, : CrossAxisAlignment.start,
children: [ children: [
Text(props.title, style: headingStyle), Text(
props.title,
style: headingStyle,
textAlign: mediaQuery.mdAndDown
? TextAlign.center
: TextAlign.start,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 10), const SizedBox(height: 10),
if (description != null && if (description != null &&
description.isNotEmpty) description.isNotEmpty)
Text( Text(
description, description,
style: defaultTextStyle.style.copyWith( style:
defaultTextStyle.style.copyWith(
color: palette.bodyTextColor, color: palette.bodyTextColor,
), ),
textAlign: mediaQuery.mdAndDown textAlign: mediaQuery.mdAndDown
@ -131,8 +147,10 @@ class TrackViewFlexHeader extends HookConsumerWidget {
TrackViewHeaderButtons(color: palette), TrackViewHeaderButtons(color: palette),
], ],
), ),
),
], ],
), ),
),
], ],
), ),
), ),