feat: auto scroll lyrics (#1374)

Feichtmeier · web-flow · commit b15aca1a35c9 · 2025-10-24T16:28:28.000Z
* feat: add reading lyrics from files

* feat: auto scroll lyrics

* padding
diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb
@@ -756,5 +756,7 @@
                 "type": "int"
             }
         }
-    }
-}
+    },
+    "lyrics": "Lyrics",
+    "autoScrolling": "Auto scroll"
+}
diff --git a/lib/l10n/app_localizations.dart b/lib/l10n/app_localizations.dart
@@ -4338,6 +4338,18 @@ abstract class AppLocalizations {
   /// In en, this message translates to:
   /// **'New episodes available for {length} podcasts'**
   String newEpisodesAvailableFor(int length);
+
+  /// No description provided for @lyrics.
+  ///
+  /// In en, this message translates to:
+  /// **'Lyrics'**
+  String get lyrics;
+
+  /// No description provided for @autoScrolling.
+  ///
+  /// In en, this message translates to:
+  /// **'Auto scroll'**
+  String get autoScrolling;
 }
 
 class _AppLocalizationsDelegate
diff --git a/lib/l10n/app_localizations_cs.dart b/lib/l10n/app_localizations_cs.dart
@@ -2207,4 +2207,10 @@ class AppLocalizationsCs extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'New episodes available for $length podcasts';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_da.dart b/lib/l10n/app_localizations_da.dart
@@ -2209,4 +2209,10 @@ class AppLocalizationsDa extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'New episodes available for $length podcasts';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_de.dart b/lib/l10n/app_localizations_de.dart
@@ -2218,4 +2218,10 @@ class AppLocalizationsDe extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'Neue Folgen für $length Podcasts verfügbar';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_en.dart b/lib/l10n/app_localizations_en.dart
@@ -2205,4 +2205,10 @@ class AppLocalizationsEn extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'New episodes available for $length podcasts';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_es.dart b/lib/l10n/app_localizations_es.dart
@@ -2217,4 +2217,10 @@ class AppLocalizationsEs extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'New episodes available for $length podcasts';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_et.dart b/lib/l10n/app_localizations_et.dart
@@ -2215,4 +2215,10 @@ class AppLocalizationsEt extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return '$length-l taskuhäälingul on uusi osi';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_eu.dart b/lib/l10n/app_localizations_eu.dart
@@ -2224,4 +2224,10 @@ class AppLocalizationsEu extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return '$length podcastetarako atal berriak eskuragarri';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_fr.dart b/lib/l10n/app_localizations_fr.dart
@@ -2227,4 +2227,10 @@ class AppLocalizationsFr extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'De nouveaux épisodes sont disponibles pour $length podcasts';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_it.dart b/lib/l10n/app_localizations_it.dart
@@ -2205,4 +2205,10 @@ class AppLocalizationsIt extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'Nuovi episodi disponibili per i podcast $length';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_nl.dart b/lib/l10n/app_localizations_nl.dart
@@ -2203,4 +2203,10 @@ class AppLocalizationsNl extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'New episodes available for $length podcasts';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_pl.dart b/lib/l10n/app_localizations_pl.dart
@@ -2209,4 +2209,10 @@ class AppLocalizationsPl extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'New episodes available for $length podcasts';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_pt.dart b/lib/l10n/app_localizations_pt.dart
@@ -2215,6 +2215,12 @@ class AppLocalizationsPt extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'New episodes available for $length podcasts';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
 
 /// The translations for Portuguese, as used in Brazil (`pt_BR`).
diff --git a/lib/l10n/app_localizations_ru.dart b/lib/l10n/app_localizations_ru.dart
@@ -2216,4 +2216,10 @@ class AppLocalizationsRu extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'Доступны новые выпуски для $length подкастов';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_sk.dart b/lib/l10n/app_localizations_sk.dart
@@ -2213,4 +2213,10 @@ class AppLocalizationsSk extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'Nové epizódy sú dostupné pre $length podcastov';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_sv.dart b/lib/l10n/app_localizations_sv.dart
@@ -2208,4 +2208,10 @@ class AppLocalizationsSv extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'Nya avsnitt tillgängliga för $length poddsändningar';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_ta.dart b/lib/l10n/app_localizations_ta.dart
@@ -2230,4 +2230,10 @@ class AppLocalizationsTa extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'New episodes available for $length podcasts';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_tr.dart b/lib/l10n/app_localizations_tr.dart
@@ -2215,4 +2215,10 @@ class AppLocalizationsTr extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return '$length podcastleri için yeni bölümler mevcut';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
diff --git a/lib/l10n/app_localizations_zh.dart b/lib/l10n/app_localizations_zh.dart
@@ -2146,6 +2146,12 @@ class AppLocalizationsZh extends AppLocalizations {
   String newEpisodesAvailableFor(int length) {
     return 'New episodes available for $length podcasts';
   }
+
+  @override
+  String get lyrics => 'Lyrics';
+
+  @override
+  String get autoScrolling => 'Auto scroll';
 }
 
 /// The translations for Chinese, as used in Hong Kong (`zh_HK`).
diff --git a/lib/player/view/full_height_player_audio_body.dart b/lib/player/view/full_height_player_audio_body.dart
@@ -1,22 +1,21 @@
 import 'package:flutter/material.dart';
 import 'package:watch_it/watch_it.dart';
+
 import '../../app/app_model.dart';
 import '../../common/data/audio.dart';
 import '../../common/data/audio_type.dart';
 import '../../common/view/ui_constants.dart';
 import '../../extensions/build_context_x.dart';
 import '../../extensions/taget_platform_x.dart';
 import '../../radio/view/radio_history_list.dart';
-import '../../settings/settings_model.dart';
 import 'full_height_player_image.dart';
 import 'full_height_player_top_controls.dart';
-import 'player_lyrics.dart';
 import 'player_main_controls.dart';
 import 'player_title_and_artist.dart';
 import 'player_track.dart';
 import 'player_view.dart';
-import 'queue/queue_body.dart';
 import 'queue/queue_button.dart';
+import 'queue/queue_or_lyrics.dart';
 
 class FullHeightPlayerAudioBody extends StatelessWidget with WatchItMixin {
   const FullHeightPlayerAudioBody({
@@ -35,41 +34,44 @@ class FullHeightPlayerAudioBody extends StatelessWidget with WatchItMixin {
   @override
   Widget build(BuildContext context) {
     final showQueue = watchPropertyValue((AppModel m) => m.showQueueOverlay);
-    final showPlayerLyrics = watchPropertyValue(
-      (SettingsModel m) => m.showPlayerLyrics,
-    );
 
+    final mediaQuerySize = context.mediaQuerySize;
     final playerWithSidePanel =
         playerPosition == PlayerPosition.fullWindow &&
-        context.mediaQuerySize.width > 1000;
+        mediaQuerySize.width > 1000;
     final theme = context.theme;
-    final queueOrHistory = showPlayerLyrics && audio != null
-        ? PlayerLyrics(
-            key: ValueKey(audio?.path),
-            audio: audio!,
-            height: 500,
+    final queueOrHistory = (audio?.audioType == AudioType.radio
+        ? const SizedBox(
             width: 400,
+            height: 500,
+            child: RadioHistoryList(simpleList: true),
           )
-        : (audio?.audioType == AudioType.radio
-              ? const SizedBox(
-                  width: 400,
-                  height: 500,
-                  child: RadioHistoryList(simpleList: true),
-                )
-              : QueueBody(selectedColor: theme.colorScheme.onSurface));
+        : Padding(
+            padding: const EdgeInsets.only(top: 50, bottom: 50),
+            child: QueueOrLyrics(
+              key: ValueKey(audio?.path),
+              width: 400,
+              selectedColor: theme.colorScheme.onSurface,
+            ),
+          ));
     final column = Column(
       mainAxisAlignment: MainAxisAlignment.center,
       mainAxisSize: MainAxisSize.min,
       children: [
-        if (showQueue && !playerWithSidePanel)
-          Padding(
-            padding: const EdgeInsets.only(
-              bottom: 2 * kLargestSpace,
-              top: kLargestSpace,
+        if (showQueue && !playerWithSidePanel) ...[
+          Flexible(
+            child: Padding(
+              padding: const EdgeInsets.only(top: kLargestSpace),
+              child: queueOrHistory,
             ),
-            child: queueOrHistory,
-          )
-        else ...[
+          ),
+          SizedBox(
+            height: kLargestSpace,
+            width: playerWithSidePanel ? 400 : 350,
+            child: const PlayerTrack(),
+          ),
+          const SizedBox(height: kLargestSpace),
+        ] else ...[
           if (!isMobile || context.isPortrait)
             const Hero(
               tag: 'FullHeightPlayerImageInPortrait',
@@ -90,7 +92,12 @@ class FullHeightPlayerAudioBody extends StatelessWidget with WatchItMixin {
         ],
         SizedBox(
           width: playerWithSidePanel ? 400 : 320,
-          child: PlayerMainControls(active: active),
+          child: Padding(
+            padding: EdgeInsets.only(
+              bottom: showQueue && !playerWithSidePanel ? 2 * kLargestSpace : 0,
+            ),
+            child: PlayerMainControls(active: active),
+          ),
         ),
       ],
     );
diff --git a/lib/player/view/full_height_player_top_controls.dart b/lib/player/view/full_height_player_top_controls.dart
@@ -20,7 +20,6 @@ import '../../l10n/l10n.dart';
 import '../../local_audio/view/pin_album_button.dart';
 import '../../player/player_model.dart';
 import '../../search/search_model.dart';
-import '../../settings/settings_model.dart';
 import 'playback_rate_button.dart';
 import 'player_pause_timer_button.dart';
 import 'player_view.dart';
@@ -110,7 +109,6 @@ class FullHeightPlayerTopControls extends StatelessWidget with WatchItMixin {
                   ? Icon(Iconz.show, color: iconColor)
                   : Icon(Iconz.hide, color: iconColor),
             ),
-          ShowPlayerLyricButton(),
           IconButton(
             tooltip: playerPosition == PlayerPosition.fullWindow
                 ? context.l10n.leaveFullWindow
@@ -128,17 +126,3 @@ class FullHeightPlayerTopControls extends StatelessWidget with WatchItMixin {
     );
   }
 }
-
-class ShowPlayerLyricButton extends StatelessWidget with WatchItMixin {
-  @override
-  Widget build(BuildContext context) {
-    final showPlayerLyrics = watchPropertyValue(
-      (SettingsModel m) => m.showPlayerLyrics,
-    );
-    return IconButton(
-      icon: Icon(!showPlayerLyrics ? Iconz.hideLyrics : Iconz.showLyrics),
-      onPressed: () =>
-          di<SettingsModel>().setShowPlayerLyrics(!showPlayerLyrics),
-    );
-  }
-}
diff --git a/lib/player/view/player_lyrics.dart b/lib/player/view/player_lyrics.dart
diff --git a/lib/player/view/queue/queue_or_lyrics.dart b/lib/player/view/queue/queue_or_lyrics.dart

Original file line number	Diff line number	Diff line change
`@@ -756,5 +756,7 @@`
`756`	`756`	`"type": "int"`
`757`	`757`	`}`
`758`	`758`	`}`
`759`		`- }`
`760`		`-}`
	`759`	`+ },`
	`760`	`+ "lyrics": "Lyrics",`
	`761`	`+ "autoScrolling": "Auto scroll"`
	`762`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -2207,4 +2207,10 @@ class AppLocalizationsCs extends AppLocalizations {`
`2207`	`2207`	`String newEpisodesAvailableFor(int length) {`
`2208`	`2208`	`return 'New episodes available for $length podcasts';`
`2209`	`2209`	`}`
	`2210`	`+`
	`2211`	`+ @override`
	`2212`	`+ String get lyrics => 'Lyrics';`
	`2213`	`+`
	`2214`	`+ @override`
	`2215`	`+ String get autoScrolling => 'Auto scroll';`
`2210`	`2216`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2209,4 +2209,10 @@ class AppLocalizationsDa extends AppLocalizations {`
`2209`	`2209`	`String newEpisodesAvailableFor(int length) {`
`2210`	`2210`	`return 'New episodes available for $length podcasts';`
`2211`	`2211`	`}`
	`2212`	`+`
	`2213`	`+ @override`
	`2214`	`+ String get lyrics => 'Lyrics';`
	`2215`	`+`
	`2216`	`+ @override`
	`2217`	`+ String get autoScrolling => 'Auto scroll';`
`2212`	`2218`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2218,4 +2218,10 @@ class AppLocalizationsDe extends AppLocalizations {`
`2218`	`2218`	`String newEpisodesAvailableFor(int length) {`
`2219`	`2219`	`return 'Neue Folgen für $length Podcasts verfügbar';`
`2220`	`2220`	`}`
	`2221`	`+`
	`2222`	`+ @override`
	`2223`	`+ String get lyrics => 'Lyrics';`
	`2224`	`+`
	`2225`	`+ @override`
	`2226`	`+ String get autoScrolling => 'Auto scroll';`
`2221`	`2227`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2205,4 +2205,10 @@ class AppLocalizationsEn extends AppLocalizations {`
`2205`	`2205`	`String newEpisodesAvailableFor(int length) {`
`2206`	`2206`	`return 'New episodes available for $length podcasts';`
`2207`	`2207`	`}`
	`2208`	`+`
	`2209`	`+ @override`
	`2210`	`+ String get lyrics => 'Lyrics';`
	`2211`	`+`
	`2212`	`+ @override`
	`2213`	`+ String get autoScrolling => 'Auto scroll';`
`2208`	`2214`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2217,4 +2217,10 @@ class AppLocalizationsEs extends AppLocalizations {`
`2217`	`2217`	`String newEpisodesAvailableFor(int length) {`
`2218`	`2218`	`return 'New episodes available for $length podcasts';`
`2219`	`2219`	`}`
	`2220`	`+`
	`2221`	`+ @override`
	`2222`	`+ String get lyrics => 'Lyrics';`
	`2223`	`+`
	`2224`	`+ @override`
	`2225`	`+ String get autoScrolling => 'Auto scroll';`
`2220`	`2226`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2215,4 +2215,10 @@ class AppLocalizationsEt extends AppLocalizations {`
`2215`	`2215`	`String newEpisodesAvailableFor(int length) {`
`2216`	`2216`	`return '$length-l taskuhäälingul on uusi osi';`
`2217`	`2217`	`}`
	`2218`	`+`
	`2219`	`+ @override`
	`2220`	`+ String get lyrics => 'Lyrics';`
	`2221`	`+`
	`2222`	`+ @override`
	`2223`	`+ String get autoScrolling => 'Auto scroll';`
`2218`	`2224`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2224,4 +2224,10 @@ class AppLocalizationsEu extends AppLocalizations {`
`2224`	`2224`	`String newEpisodesAvailableFor(int length) {`
`2225`	`2225`	`return '$length podcastetarako atal berriak eskuragarri';`
`2226`	`2226`	`}`
	`2227`	`+`
	`2228`	`+ @override`
	`2229`	`+ String get lyrics => 'Lyrics';`
	`2230`	`+`
	`2231`	`+ @override`
	`2232`	`+ String get autoScrolling => 'Auto scroll';`
`2227`	`2233`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2227,4 +2227,10 @@ class AppLocalizationsFr extends AppLocalizations {`
`2227`	`2227`	`String newEpisodesAvailableFor(int length) {`
`2228`	`2228`	`return 'De nouveaux épisodes sont disponibles pour $length podcasts';`
`2229`	`2229`	`}`
	`2230`	`+`
	`2231`	`+ @override`
	`2232`	`+ String get lyrics => 'Lyrics';`
	`2233`	`+`
	`2234`	`+ @override`
	`2235`	`+ String get autoScrolling => 'Auto scroll';`
`2230`	`2236`	`}`