feat: add initial lyrics support (#1372)

Author: Feichtmeier

lib/common/data/audio.dart

@@ -80,6 +80,8 @@ class Audio {
   /// Optional art that can belong to a parent element.
   final String? albumArtUrl;
 
+  final String? lyrics;
+
   const Audio({
     this.path,
     this.url,
@@ -102,6 +104,7 @@ class Audio {
     this.pictureData,
     this.fileSize,
     this.albumArtUrl,
+    this.lyrics,
   });
 
   Audio copyWith({
@@ -127,6 +130,7 @@ class Audio {
     Uint8List? pictureData,
     int? fileSize,
     String? albumArtUrl,
+    String? lyrics,
   }) {
     return Audio(
       path: path ?? this.path,
@@ -150,6 +154,7 @@ class Audio {
       pictureData: pictureData ?? this.pictureData,
       fileSize: fileSize ?? this.fileSize,
       albumArtUrl: albumArtUrl ?? this.albumArtUrl,
+      lyrics: lyrics ?? this.lyrics,
     );
   }
 
@@ -219,6 +224,9 @@ class Audio {
     if (albumArtUrl != null) {
       result.addAll({'albumArtUrl': albumArtUrl});
     }
+    if (lyrics != null) {
+      result.addAll({'lyrics': lyrics});
+    }
 
     return result;
   }
@@ -250,6 +258,7 @@ class Audio {
           : null,
       fileSize: map['fileSize']?.toInt(),
       albumArtUrl: map['albumArtUrl'],
+      lyrics: map['lyrics'],
     );
   }
 
@@ -259,7 +268,7 @@ class Audio {
 
   @override
   String toString() {
-    return 'Audio(path: $path, url: $url,  audioType: $audioType, imageUrl: $imageUrl, description: $description, website: $website, title: $title, durationMs: $durationMs, artist: $artist, album: $album, albumArtist: $albumArtist, trackNumber: $trackNumber, trackTotal: $trackTotal, discNumber: $discNumber, discTotal: $discTotal, year: $year, genre: $genre, pictureMimeType: $pictureMimeType, pictureData: $pictureData, fileSize: $fileSize, albumArtUrl: $albumArtUrl)';
+    return 'Audio(path: $path, url: $url,  audioType: $audioType, imageUrl: $imageUrl, description: $description, website: $website, title: $title, durationMs: $durationMs, artist: $artist, album: $album, albumArtist: $albumArtist, trackNumber: $trackNumber, trackTotal: $trackTotal, discNumber: $discNumber, discTotal: $discTotal, year: $year, genre: $genre, pictureMimeType: $pictureMimeType, pictureData: $pictureData, fileSize: $fileSize, albumArtUrl: $albumArtUrl, lyrics: $lyrics)';
   }
 
   @override
@@ -348,6 +357,7 @@ class Audio {
       pictureMimeType: data.pictures.firstOrNull?.mimetype,
       trackNumber: data.trackNumber,
       year: data.year?.year,
+      lyrics: data.lyrics,
     );
   }
 

lib/common/view/icons.dart

@@ -17,6 +17,18 @@ class Iconz {
       ? CupertinoIcons.eye
       : Icons.remove_red_eye_outlined;
 
+  static IconData get showLyrics => yaru
+      ? YaruIcons.chat_bubble_filled
+      : cupertino
+      ? CupertinoIcons.chat_bubble_text_fill
+      : Icons.chat_bubble;
+
+  static IconData get hideLyrics => yaru
+      ? YaruIcons.chat_bubble
+      : cupertino
+      ? CupertinoIcons.chat_bubble_text
+      : Icons.chat_bubble_outline;
+
   static IconData get hide => yaru
       ? YaruIcons.hide
       : cupertino

lib/extensions/shared_preferences_x.dart

@@ -54,4 +54,5 @@ extension SPKeys on SharedPreferences {
   static const podcastArtistSuffix = '_artist';
   static const podcastLastUpdatedSuffix = '_last_updated';
   static const hideCompletedEpisodes = 'hideCompletedEpisodes';
+  static const showPlayerLyrics = 'showPlayerLyrics';
 }

lib/player/view/full_height_player_image.dart

@@ -1,10 +1,13 @@
 import 'package:flutter/material.dart';
+import 'package:lrc/lrc.dart';
 import 'package:watch_it/watch_it.dart';
 
+import '../../common/data/audio.dart';
 import '../../common/view/ui_constants.dart';
 import '../../extensions/build_context_x.dart';
 import '../../extensions/taget_platform_x.dart';
 import '../../local_audio/view/local_cover.dart';
+import '../../settings/settings_model.dart';
 import '../player_model.dart';
 import 'audio_visualizer.dart';
 import 'player_fall_back_image.dart';
@@ -33,6 +36,9 @@ class FullHeightPlayerImage extends StatelessWidget with WatchItMixin {
     final showAudioVisualizer = watchPropertyValue(
       (PlayerModel m) => m.showAudioVisualizer && this.showAudioVisualizer,
     );
+    final showPlayerLyrics = watchPropertyValue(
+      (SettingsModel m) => m.showPlayerLyrics,
+    );
 
     final size = context.isPortrait
         ? fullHeightPlayerImageSize
@@ -74,6 +80,10 @@ class FullHeightPlayerImage extends StatelessWidget with WatchItMixin {
       return AudioVisualizer(height: height ?? 200);
     }
 
+    if (showPlayerLyrics && audio != null) {
+      return PlayerLyrics(audio: audio, size: size);
+    }
+
     return SizedBox(
       height: theHeight,
       width: theWidth,
@@ -87,3 +97,63 @@ class FullHeightPlayerImage extends StatelessWidget with WatchItMixin {
     );
   }
 }
+
+class PlayerLyrics extends StatefulWidget with WatchItStatefulWidgetMixin {
+  const PlayerLyrics({super.key, required this.audio, required this.size});
+
+  final Audio audio;
+  final double size;
+
+  @override
+  State<PlayerLyrics> createState() => _PlayerLyricsState();
+}
+
+class _PlayerLyricsState extends State<PlayerLyrics> {
+  List<LrcLine>? lrc;
+  String? lyrcisString;
+
+  @override
+  void initState() {
+    super.initState();
+
+    if (widget.audio.lyrics != null) {
+      if (widget.audio.lyrics!.isValidLrc) {
+        lrc = Lrc.parse(widget.audio.lyrics!).lyrics;
+      } else {
+        lyrcisString = widget.audio.lyrics;
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (lyrcisString != null) {
+      return Text(lyrcisString!);
+    }
+
+    if (lrc == null || lrc!.isEmpty) {
+      return const Text('no lyrcis found');
+    }
+
+    final position = watchPropertyValue((PlayerModel m) => m.position);
+    final color = watchPropertyValue(
+      (PlayerModel m) => m.color ?? context.colorScheme.primary,
+    );
+
+    return SizedBox(
+      height: widget.size,
+      width: widget.size,
+      child: ListView.builder(
+        itemCount: lrc!.length,
+        itemBuilder: (context, index) {
+          final line = lrc!.elementAt(index);
+          return ListTile(
+            selectedColor: color,
+            selected: line.timestamp.inSeconds == position?.inSeconds,
+            title: Text(line.lyrics),
+          );
+        },
+      ),
+    );
+  }
+}

lib/player/view/full_height_player_top_controls.dart

@@ -20,6 +20,7 @@ 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';
@@ -109,6 +110,7 @@ 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
@@ -126,3 +128,17 @@ 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),
+    );
+  }
+}

lib/settings/settings_model.dart

@@ -153,6 +153,10 @@ class SettingsModel extends SafeChangeNotifier {
   Future<void> setHideCompletedEpisodes(bool value) =>
       _service.setHideCompletedEpisodes(value);
 
+  bool get showPlayerLyrics => _service.showPlayerLyrics;
+  Future<void> setShowPlayerLyrics(bool value) =>
+      _service.setShowPlayerLyrics(value);
+
   Future<void> wipeAllSettings() async => _service.wipeAllSettings();
 
   @override

lib/settings/settings_service.dart

@@ -216,6 +216,11 @@ class SettingsService {
   Future<void> setHideCompletedEpisodes(bool value) =>
       _preferences.setBool(SPKeys.hideCompletedEpisodes, value).then(notify);
 
+  bool get showPlayerLyrics =>
+      _preferences.getBool(SPKeys.showPlayerLyrics) ?? false;
+  Future<void> setShowPlayerLyrics(bool value) =>
+      _preferences.setBool(SPKeys.showPlayerLyrics, value).then(notify);
+
   CloseBtnAction get closeBtnActionIndex =>
       _preferences.getString(SPKeys.closeBtnAction) == null
       ? CloseBtnAction.alwaysAsk

pubspec.lock

@@ -830,6 +830,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.0"
+  lrc:
+    dependency: "direct main"
+    description:
+      name: lrc
+      sha256: "5100362b5c8e97f4d3f03ff87efeb40e73a6dd780eca2cbde9312e0d44b8e5ba"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.2"
   m3u_parser_nullsafe:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -44,6 +44,7 @@ dependencies:
   lastfm: ^0.0.6
   listenbrainz_dart: ^0.0.4
   local_notifier: ^0.1.6
+  lrc: ^1.0.2
   m3u_parser_nullsafe: ^1.0.3
   media_kit:
     git: