chore: show icon with error msg #1085

lib/collections/spotube_icons.dart

@@ -41,6 +41,7 @@ abstract class SpotubeIcons {
   static const clock = FeatherIcons.clock;
   static const lyrics = Icons.lyrics_rounded;
   static const lyricsOff = Icons.lyrics_outlined;
+  static const noLyrics = Icons.music_off_outlined;
   static const logout = FeatherIcons.logOut;
   static const login = FeatherIcons.logIn;
   static const dashboard = FeatherIcons.grid;

lib/l10n/app_en.arb

@@ -285,5 +285,6 @@
   "browse_all": "Browse All",
   "genres": "Genres",
   "explore_genres": "Explore Genres",
-  "friends": "Friends"
+  "friends": "Friends",
+  "no_lyrics_available": "Sorry, unable find lyrics for this track"
 }

lib/pages/lyrics/plain_lyrics.dart

@@ -1,12 +1,15 @@
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:palette_generator/palette_generator.dart';
 import 'package:spotify/spotify.dart';
+import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/lyrics/zoom_controls.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_lyrics.dart';
 import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
 
 import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 
@@ -72,11 +75,23 @@ class PlainLyrics extends HookConsumerWidget {
                         if (lyricsQuery.isLoading || lyricsQuery.isRefreshing) {
                           return const ShimmerLyrics();
                         } else if (lyricsQuery.hasError) {
-                          return Text(
+                          return Container(
-                            "Sorry, no Lyrics were found for `${playlist.activeTrack?.name}` :'(\n${lyricsQuery.error.toString().replaceAll("Exception: ", "")}",
+                            alignment: Alignment.center,
+                            padding: const EdgeInsets.all(16),
+                            child: Column(
+                              mainAxisSize: MainAxisSize.min,
+                              children: [
+                                Text(
+                                  context.l10n.no_lyrics_available,
                                   style: textTheme.bodyLarge?.copyWith(
                                     color: palette.bodyTextColor,
                                   ),
+                                  textAlign: TextAlign.center,
+                                ),
+                                const Gap(26),
+                                const Icon(SpotubeIcons.noLyrics, size: 60),
+                              ],
+                            ),
                           );
                         }
 

lib/pages/lyrics/synced_lyrics.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:palette_generator/palette_generator.dart';
 import 'package:spotify/spotify.dart' hide Offset;
@@ -7,6 +8,7 @@ import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/lyrics/zoom_controls.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_lyrics.dart';
 import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
 import 'package:spotube/hooks/controllers/use_auto_scroll_controller.dart';
 import 'package:spotube/components/lyrics/use_synced_lyrics.dart';
 import 'package:scroll_to_index/scroll_to_index.dart';
@@ -188,12 +190,19 @@ class SyncedLyrics extends HookConsumerWidget {
                 child: ShimmerLyrics(),
               )
             else if (playlist.activeTrack != null &&
-                (timedLyricsQuery.hasError))
+                (timedLyricsQuery.hasError)) ...[
-              Text(
+              Container(
-                "Sorry, no Lyrics were found for `${playlist.activeTrack?.name}` :'(\n${timedLyricsQuery.error.toString().replaceAll("Exception: ", "")}",
+                alignment: Alignment.center,
+                padding: const EdgeInsets.all(16),
+                child: Text(
+                  context.l10n.no_lyrics_available,
                   style: bodyTextTheme,
-              )
+                  textAlign: TextAlign.center,
-            else if (isUnSyncLyric == true)
+                ),
+              ),
+              const Gap(26),
+              const Icon(SpotubeIcons.noLyrics, size: 60),
+            ] else if (isUnSyncLyric == true)
               Expanded(
                 child: Center(
                   child: RichText(

untranslated_messages.json

@@ -2,102 +2,119 @@
   "ar": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "bn": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "ca": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "de": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "es": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "fa": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "fr": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "hi": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "it": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "ja": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "nl": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "pl": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "pt": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "ru": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "tr": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "uk": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ],
 
   "zh": [
     "step_3_steps",
     "step_4_steps",
-    "friends"
+    "friends",
+    "no_lyrics_available"
   ]
 }