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

Lyrics loading ShimmerLoader added

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2022-06-26 14:46:51 +06:00
parent bea7fd14b7
commit a717ef2baf
3 changed files with 75 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
lib/components/LoaderShimmers/ShimmerLyrics.dart Normal file
View File

@ -0,0 +1,67 @@
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:skeleton_text/skeleton_text.dart';
import 'package:spotube/extensions/ShimmerColorTheme.dart';
import 'package:spotube/hooks/useBreakpoints.dart';
const widths = [20, 56, 89, 60, 25, 69];
class ShimmerLyrics extends HookWidget {
const ShimmerLyrics({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final shimmerColor =
Theme.of(context).extension<ShimmerColorTheme>()!.shimmerColor!;
final shimmerBackgroundColor = Theme.of(context)
.extension<ShimmerColorTheme>()!
.shimmerBackgroundColor!;
final breakpoint = useBreakpoints();
return ListView.builder(
itemCount: 20,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
final widthsCp = [...widths];
if (breakpoint.isMd) {
widthsCp.removeLast();
}
if (breakpoint.isSm) {
widthsCp.removeLast();
widthsCp.removeLast();
}
widthsCp.shuffle();
return Container(
margin: const EdgeInsets.symmetric(vertical: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: widthsCp.map(
(width) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: SkeletonAnimation(
shimmerColor: shimmerColor,
shimmerDuration: 1000,
child: Container(
height: 10,
width: width.toDouble(),
decoration: BoxDecoration(
color: shimmerBackgroundColor,
borderRadius: BorderRadius.circular(10),
),
margin: const EdgeInsets.only(top: 10),
),
),
);
},
).toList(),
),
);
},
);
}
}

3
lib/components/Lyrics/Lyrics.dart
View File

@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerLyrics.dart';
import 'package:spotube/helpers/artist-to-string.dart';
import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/provider/Playback.dart';
@ -53,7 +54,7 @@ class Lyrics extends HookConsumerWidget {
},
error: (error, __) => Text(
"Sorry, no Lyrics were found for `${playback.currentTrack?.name}` :'("),
loading: () => const CircularProgressIndicator(),
loading: () => const ShimmerLyrics(),
),
),
),

8
lib/components/Lyrics/SyncedLyrics.dart
View File

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotify/spotify.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerLyrics.dart';
import 'package:spotube/components/Lyrics/Lyrics.dart';
import 'package:spotube/components/Shared/SpotubeMarqueeText.dart';
import 'package:spotube/helpers/artist-to-string.dart';
@ -117,10 +118,11 @@ class SyncedLyrics extends HookConsumerWidget {
: textTheme.headline6,
),
),
if (lyricValue != null)
if (lyricValue != null && lyricValue.lyrics.isNotEmpty)
Expanded(
child: ListView.builder(
controller: controller,
itemCount: lyricValue.lyrics.length,
itemBuilder: (context, index) {
final lyricSlice = lyricValue.lyrics[index];
final isActive = lyricSlice.time.inSeconds == currentTime;
@ -153,9 +155,11 @@ class SyncedLyrics extends HookConsumerWidget {
),
);
},
itemCount: lyricValue.lyrics.length,
),
),
if (playback.currentTrack != null &&
(lyricValue == null || lyricValue.lyrics.isEmpty == true))
const Expanded(child: ShimmerLyrics()),
],
),
);