implemented lyrics alignment options

- slightly modifies how lyrics are wrapped, but the new behavior, while not as pretty, uses the available space more efficiently

lib/components/LayoutSettingsScreen/theme_selector.dart

@@ -30,7 +30,7 @@ class ThemeSelector extends StatelessWidget {
       valueListenable: ThemeModeHelper.themeModeListener,
       builder: (_, box, __) {
         return ListTile(
-          title: const Text("Theme"),
+          title: Text(AppLocalizations.of(context)!.theme),
           trailing: DropdownButton<ThemeMode>(
             value: box.get("ThemeMode"),
             items: ThemeMode.values

lib/l10n/app_en.arb

@@ -1585,5 +1585,25 @@
   "showSeekControlsOnMediaNotificationSubtitle": "Controls if the media notification has a seekable progress bar. This lets you change the playback position without opening the app.",
   "@showSeekControlsOnMediaNotificationSubtitle": {
     "description": "Subtitle for the setting that controls if the media notification has a seekable progress bar."
+  },
+  "alignmentOptionStart": "Start",
+  "@alignmentOptionStart": {
+    "description": "Alignment option for things like the lyrics view. Start means left-aligned in LTR languages and right-aligned in RTL languages."
+  },
+  "alignmentOptionCenter": "Center",
+  "@alignmentOptionCenter": {
+    "description": "Alignment option for things like the lyrics view. Center means centered."
+  },
+  "alignmentOptionEnd": "End",
+  "@alignmentOptionEnd": {
+    "description": "Alignment option for things like the lyrics view. End means right-aligned in LTR languages and left-aligned in RTL languages."
+  },
+  "lyricsAlignmentTitle": "Lyrics alignment",
+  "@lyricsAlignmentTitle": {
+    "description": "Title for the setting that controls the alignment of lyrics in the lyrics view"
+  },
+  "lyricsAlignmentSubtitle": "Controls the alignment of lyrics in the lyrics view.",
+  "@lyricsAlignmentSubtitle": {
+    "description": "Subtitle for the setting that controls the alignment of lyrics in the lyrics view"
   }
 }

lib/main.dart

@@ -212,6 +212,7 @@ Future<void> setupHive() async {
   Hive.registerAdapter(LyricMetadataAdapter());
   Hive.registerAdapter(LyricLineAdapter());
   Hive.registerAdapter(LyricDtoAdapter());
+  Hive.registerAdapter(LyricsAlignmentAdapter());
 
   final dir = (Platform.isAndroid || Platform.isIOS)
       ? await getApplicationDocumentsDirectory()

lib/models/finamp_models.dart

@@ -105,9 +105,10 @@ const _showArtistChipImage = true;
 const _trackOfflineFavoritesDefault = true;
 const _showProgressOnNowPlayingBarDefault = true;
 const _startInstantMixForIndividualTracksDefault = true;
+const _showLyricsTimestampsDefault = true;
+const _lyricsAlignmentDefault = LyricsAlignment.start;
 const _showStopButtonOnMediaNotificationDefault = false;
 const _showSeekControlsOnMediaNotificationDefault = true;
-const _showLyricsTimestampsDefault = true;
 
 @HiveType(typeId: 28)
 class FinampSettings {
@@ -182,6 +183,7 @@ class FinampSettings {
     this.showProgressOnNowPlayingBar = _showProgressOnNowPlayingBarDefault,
     this.startInstantMixForIndividualTracks = _startInstantMixForIndividualTracksDefault,
     this.showLyricsTimestamps = _showLyricsTimestampsDefault,
+    this.lyricsAlignment = _lyricsAlignmentDefault,
     this.showStopButtonOnMediaNotification = _showStopButtonOnMediaNotificationDefault,
     this.showSeekControlsOnMediaNotification = _showSeekControlsOnMediaNotificationDefault,
   });
@@ -400,10 +402,13 @@ class FinampSettings {
   @HiveField(66, defaultValue: _showLyricsTimestampsDefault)
   bool showLyricsTimestamps;
 
-  @HiveField(67, defaultValue: _showStopButtonOnMediaNotificationDefault)
+  @HiveField(67, defaultValue: _lyricsAlignmentDefault)
+  LyricsAlignment lyricsAlignment;
+
+  @HiveField(68, defaultValue: _showStopButtonOnMediaNotificationDefault)
   bool showStopButtonOnMediaNotification;
 
-  @HiveField(68, defaultValue: _showSeekControlsOnMediaNotificationDefault)
+  @HiveField(69, defaultValue: _showSeekControlsOnMediaNotificationDefault)
   bool showSeekControlsOnMediaNotification;
 
   static Future<FinampSettings> create() async {
@@ -454,6 +459,7 @@ class FinampSettings {
   SortOrder getSortOrder(TabContentType tabType) {
     return tabSortOrder[tabType] ?? SortOrder.ascending;
   }
+
 }
 
 enum CustomPlaybackActions {
@@ -2079,3 +2085,44 @@ class MediaItemId {
   }
 
 }
+
+@HiveType(typeId: 70)
+enum LyricsAlignment {
+  @HiveField(0)
+  start,
+  @HiveField(1)
+  center,
+  @HiveField(2)
+  end;
+
+  /// Human-readable version of the [LyricsAlignment]
+  @override
+  @Deprecated("Use toLocalisedString when possible")
+  String toString() => _humanReadableName(this);
+
+  String toLocalisedString(BuildContext context) =>
+      _humanReadableLocalisedName(this, context);
+
+  String _humanReadableName(LyricsAlignment tabContentType) {
+    switch (tabContentType) {
+      case LyricsAlignment.start:
+        return "Start";
+      case LyricsAlignment.center:
+        return "Center";
+      case LyricsAlignment.end:
+        return "End";
+    }
+  }
+
+  String _humanReadableLocalisedName(
+      LyricsAlignment tabContentType, BuildContext context) {
+    switch (tabContentType) {
+      case LyricsAlignment.start:
+        return AppLocalizations.of(context)!.alignmentOptionStart;
+      case LyricsAlignment.center:
+        return AppLocalizations.of(context)!.alignmentOptionCenter;
+      case LyricsAlignment.end:
+        return AppLocalizations.of(context)!.alignmentOptionEnd;
+    }
+  }
+}

lib/screens/lyrics_screen.dart

@@ -3,6 +3,7 @@ import 'dart:io';
 
 import 'package:finamp/color_schemes.g.dart';
 import 'package:finamp/components/PlayerScreen/player_screen_appbar_title.dart';
+import 'package:finamp/models/finamp_models.dart';
 import 'package:finamp/models/jellyfin_models.dart';
 import 'package:finamp/services/current_track_metadata_provider.dart';
 import 'package:finamp/services/feedback_helper.dart';
@@ -367,6 +368,7 @@ class _LyricsViewState extends ConsumerState<LyricsView>
                                     (nextLine.start ?? 0) ~/ 10);
 
                     return Column(
+                      crossAxisAlignment: CrossAxisAlignment.stretch,
                       children: [
                         if (index == 0)
                           AutoScrollTag(
@@ -461,47 +463,50 @@ class _LyricLine extends ConsumerWidget {
       onTap: isSynchronized ? onTap : null,
       child: Padding(
         padding: EdgeInsets.symmetric(vertical: isSynchronized ? 10.0 : 6.0),
-        child: Row(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
+        child:
+        Text.rich(
+          textAlign: lyricsAlignmentToTextAlign(finampSettings?.lyricsAlignment ?? LyricsAlignment.start),
+          softWrap: true,
+          TextSpan(
+            children: [
             if (
               line.start != null
               && (line.text?.trim().isNotEmpty ?? false)
               && (finampSettings?.showLyricsTimestamps ?? true)
             )
-              Text(
-                "${Duration(microseconds: (line.start ?? 0) ~/ 10).inMinutes}:${(Duration(microseconds: (line.start ?? 0) ~/ 10).inSeconds % 60).toString().padLeft(2, '0')}",
+              WidgetSpan(
+                alignment: PlaceholderAlignment.bottom,
+                child: Padding(
+                  padding: const EdgeInsets.only(right: 8.0),
+                  child: Text(
+                    "${Duration(microseconds: (line.start ?? 0) ~/ 10).inMinutes}:${(Duration(microseconds: (line.start ?? 0) ~/ 10).inSeconds % 60).toString().padLeft(2, '0')}",
+                    style: TextStyle(
+                      color: lowlightLine
+                          ? Colors.grey
+                          : Theme.of(context).textTheme.bodyLarge!.color,
+                      fontSize: 16,
+                      height: 1.75,
+                    ),
+                  ),
+                ),
+              ),
+            TextSpan(
+                text: line.text ?? "<missing lyric line>",
                 style: TextStyle(
                   color: lowlightLine
                       ? Colors.grey
                       : Theme.of(context).textTheme.bodyLarge!.color,
-                  fontSize: 16,
-                  height: 1.75,
-                ),
-              ),
-            Expanded(
-              child: Padding(
-                padding: const EdgeInsets.only(left: 12.0),
-                child: Text(
-                  line.text ?? "<missing lyric line>",
-                  textAlign: TextAlign.start,
-                  style: TextStyle(
-                    color: lowlightLine
-                        ? Colors.grey
-                        : Theme.of(context).textTheme.bodyLarge!.color,
-                    fontWeight: lowlightLine || !isSynchronized
-                        ? FontWeight.normal
-                        : FontWeight.w500,
-                    letterSpacing: lowlightLine || !isSynchronized
-                        ? 0.05
-                        : -0.045, // keep text width consistent across the different weights
-                    fontSize: isSynchronized ? 26 : 20,
-                    height: 1.25,
-                  ),
+                  fontWeight: lowlightLine || !isSynchronized
+                      ? FontWeight.normal
+                      : FontWeight.w500,
+                  letterSpacing: lowlightLine || !isSynchronized
+                      ? 0.05
+                      : -0.045, // keep text width consistent across the different weights
+                  fontSize: isSynchronized ? 26 : 20,
+                  height: 1.25,
                 ),
               ),
-            ),
-          ],
+          ]),
         ),
       ),
     );
@@ -581,3 +586,14 @@ class EnableAutoScrollButton extends StatelessWidget {
         : const SizedBox.shrink();
   }
 }
+
+TextAlign lyricsAlignmentToTextAlign(LyricsAlignment alignment) {
+  switch (alignment) {
+    case LyricsAlignment.start:
+      return TextAlign.start;
+    case LyricsAlignment.center:
+      return TextAlign.center;
+    case LyricsAlignment.end:
+      return TextAlign.end;
+  }
+}

lib/screens/lyrics_settings_screen.dart

@@ -20,6 +20,7 @@ class LyricsSettingsScreen extends StatelessWidget {
       body: ListView(
         children: const [
           ShowLyricsTimestampsToggle(),
+          LyricsAlignmentSelector(),
         ],
       ),
     );
@@ -55,3 +56,39 @@ class ShowLyricsTimestampsToggle extends StatelessWidget {
     );
   }
 }
+
+class LyricsAlignmentSelector extends StatelessWidget {
+  const LyricsAlignmentSelector({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ValueListenableBuilder<Box<FinampSettings>>(
+      valueListenable: FinampSettingsHelper.finampSettingsListener,
+      builder: (_, box, __) {
+        final finampSettings = box.get("FinampSettings")!;
+        return ListTile(
+          title: Text(AppLocalizations.of(context)!.lyricsAlignmentTitle),
+          subtitle: Text(AppLocalizations.of(context)!.lyricsAlignmentSubtitle),
+          trailing: DropdownButton<LyricsAlignment>(
+            value: finampSettings.lyricsAlignment,
+            items: LyricsAlignment.values
+                .map((e) => DropdownMenuItem<LyricsAlignment>(
+                      value: e,
+                      child: Text(e.toLocalisedString(context)),
+                    ))
+                .toList(),
+            onChanged: (value) {
+              if (value != null) {
+                FinampSettings finampSettingsTemp = finampSettings;
+                finampSettingsTemp.lyricsAlignment = value;
+                Hive.box<FinampSettings>("FinampSettings")
+                    .put("FinampSettings", finampSettingsTemp);
+              }
+            },
+          ),
+        );
+      },
+    );
+  }
+}
+