kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-14 00:15:17 +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 {
final PanelController panelController;
final ScrollController scrollController;
const PlayerView({
Key? key,
required this.panelController,
required this.scrollController,
}) : super(key: key);
@override
@ -119,6 +121,7 @@ class PlayerView extends HookConsumerWidget {
preferredSize: Size.fromHeight(
kToolbarHeight + topPadding,
),
child: ForceDraggableWidget(
child: Padding(
padding: EdgeInsets.only(top: topPadding),
child: PageWindowTitleBar(
@ -133,8 +136,8 @@ class PlayerView extends HookConsumerWidget {
IconButton(
icon: const Icon(SpotubeIcons.info, size: 18),
tooltip: context.l10n.details,
style:
IconButton.styleFrom(foregroundColor: bodyTextColor),
style: IconButton.styleFrom(
foregroundColor: bodyTextColor),
onPressed: currentTrack == null
? null
: () {
@ -151,8 +154,10 @@ class PlayerView extends HookConsumerWidget {
),
),
),
),
extendBodyBehindAppBar: true,
body: SingleChildScrollView(
controller: scrollController,
child: Container(
alignment: Alignment.center,
width: double.infinity,
@ -163,7 +168,8 @@ class PlayerView extends HookConsumerWidget {
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Container(
ForceDraggableWidget(
child: Container(
margin: const EdgeInsets.all(8),
constraints: const BoxConstraints(
maxHeight: 300, maxWidth: 300),
@ -187,6 +193,7 @@ class PlayerView extends HookConsumerWidget {
),
),
),
),
const SizedBox(height: 60),
Container(
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 panelController = useMemoized(() => PanelController(), []);
final scrollController = useScrollController();
useEffect(() {
return () {
@ -174,6 +175,7 @@ class PlayerOverlay extends HookConsumerWidget {
),
),
),
scrollController: scrollController,
panelBuilder: (position) {
// this is the reason we're getting an update
final navigationHeight = ref.watch(navigationPanelHeight);
@ -188,8 +190,11 @@ class PlayerOverlay extends HookConsumerWidget {
decoration: navigationHeight == 0
? const BoxDecoration(borderRadius: BorderRadius.zero)
: const BoxDecoration(borderRadius: radius),
child: HorizontalScrollableWidget(
child: PlayerView(panelController: panelController),
child: IgnoreDraggableWidget(
child: PlayerView(
panelController: panelController,
scrollController: scrollController,
),
),
),
);

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

@ -90,17 +90,19 @@ class PlaybuttonCard extends HookWidget {
Stack(
clipBehavior: Clip.none,
children: [
Padding(
Container(
padding: const EdgeInsets.only(
left: 8,
right: 8,
top: 8,
),
constraints: BoxConstraints(maxHeight: size),
child: ClipRRect(
borderRadius: radius,
child: UniversalImage(
path: imageUrl,
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_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:skeletonizer/skeletonizer.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/shared/hover_builder.dart';
@ -158,6 +159,7 @@ class TrackTile extends HookConsumerWidget {
child: IconTheme(
data: theme.iconTheme
.copyWith(size: 26, color: Colors.white),
child: Skeleton.ignore(
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
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,
),
),
emptyBuilder: (context) => const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [NotFound()],
emptyBuilder: (context) => Skeletonizer(
enabled: true,
child: Column(
children: List.generate(
10,
(index) => TrackTile(track: FakeData.track, index: index),
),
),
),
itemBuilder: (context, 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,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Flex(
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: mediaQuery.mdAndDown
? mediaQuery.size.width
: 800,
),
child: Flex(
direction: mediaQuery.mdAndDown
? Axis.vertical
: Axis.horizontal,
@ -104,19 +110,29 @@ class TrackViewFlexHeader extends HookConsumerWidget {
),
),
const Gap(20),
Column(
Flexible(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: mediaQuery.mdAndDown
? CrossAxisAlignment.center
: CrossAxisAlignment.start,
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),
if (description != null &&
description.isNotEmpty)
Text(
description,
style: defaultTextStyle.style.copyWith(
style:
defaultTextStyle.style.copyWith(
color: palette.bodyTextColor,
),
textAlign: mediaQuery.mdAndDown
@ -131,8 +147,10 @@ class TrackViewFlexHeader extends HookConsumerWidget {
TrackViewHeaderButtons(color: palette),
],
),
),
],
),
),
],
),
),