📱 Large screen support

lib/screens/explore.dart

@@ -3,6 +3,7 @@ import 'package:get/get.dart';
 import 'package:go_router/go_router.dart';
 import 'package:rhythm_box/providers/spotify.dart';
 import 'package:rhythm_box/widgets/auto_cache_image.dart';
+import 'package:rhythm_box/widgets/sized_container.dart';
 import 'package:skeletonizer/skeletonizer.dart';
 import 'package:spotify/spotify.dart';
 
@@ -39,8 +40,10 @@ class _ExploreScreenState extends State<ExploreScreen> {
       child: Scaffold(
         appBar: AppBar(
           title: Text('explore'.tr),
+          centerTitle: MediaQuery.of(context).size.width >= 720,
         ),
-        body: Skeletonizer(
+        body: CenteredContainer(
+          child: Skeletonizer(
             enabled: _isLoading,
             child: ListView.builder(
               itemCount: _featuredPlaylist?.length ?? 20,
@@ -81,6 +84,7 @@ class _ExploreScreenState extends State<ExploreScreen> {
             ),
           ),
         ),
+      ),
     );
   }
 }

lib/screens/player/view.dart

@@ -16,6 +16,7 @@ import 'package:rhythm_box/services/audio_player/audio_player.dart';
 import 'package:rhythm_box/services/duration.dart';
 import 'package:rhythm_box/widgets/auto_cache_image.dart';
 import 'package:rhythm_box/services/audio_services/image.dart';
+import 'package:rhythm_box/widgets/lyrics/synced.dart';
 import 'package:rhythm_box/widgets/tracks/querying_track_info.dart';
 
 class PlayerScreen extends StatefulWidget {
@@ -50,9 +51,14 @@ class _PlayerScreenState extends State<PlayerScreen> {
 
   double? _draggingValue;
 
+  static const double maxAlbumSize = 360;
+
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size;
+    final albumSize = max(size.shortestSide, maxAlbumSize).toDouble();
+
+    final isLargeScreen = size.width >= 720;
 
     return DismissiblePage(
       backgroundColor: Theme.of(context).colorScheme.surface,
@@ -63,20 +69,27 @@ class _PlayerScreenState extends State<PlayerScreen> {
       child: Material(
         color: Colors.transparent,
         child: SafeArea(
+          child: Row(
+            children: [
+              Expanded(
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
-              Hero(
+                    LimitedBox(
+                      maxHeight: maxAlbumSize,
+                      maxWidth: maxAlbumSize,
+                      child: Hero(
                         tag: const Key('current-active-track-album-art'),
                         child: ClipRRect(
-                  borderRadius: const BorderRadius.all(Radius.circular(16)),
+                          borderRadius:
+                              const BorderRadius.all(Radius.circular(16)),
                           child: AspectRatio(
                             aspectRatio: 1,
                             child: _albumArt != null
                                 ? AutoCacheImage(
                                     _albumArt!,
-                            width: size.width,
+                                    width: albumSize,
-                            height: size.width,
+                                    height: albumSize,
                                   )
                                 : Container(
                                     color: Theme.of(context)
@@ -84,11 +97,13 @@ class _PlayerScreenState extends State<PlayerScreen> {
                                         .surfaceContainerHigh,
                                     width: 64,
                                     height: 64,
-                            child: const Center(child: Icon(Icons.image)),
+                                    child:
+                                        const Center(child: Icon(Icons.image)),
                                   ),
                           ),
                         ).marginSymmetric(horizontal: 24),
                       ),
+                    ),
                     const Gap(24),
                     Text(
                       _playback.state.value.activeTrack?.name ?? 'Not playing',
@@ -124,15 +139,17 @@ class _PlayerScreenState extends State<PlayerScreen> {
                                       .abs(),
                               min: 0,
                               max: max(
-                          _playback.durationCurrent.value.inMilliseconds.abs(),
+                                _playback.durationCurrent.value.inMilliseconds
-                          _playback.durationTotal.value.inMilliseconds.abs(),
+                                    .abs(),
+                                _playback.durationTotal.value.inMilliseconds
+                                    .abs(),
                               ).toDouble(),
                               onChanged: (value) {
                                 setState(() => _draggingValue = value);
                               },
                               onChangeEnd: (value) {
-                          audioPlayer
+                                audioPlayer.seek(
-                              .seek(Duration(milliseconds: value.toInt()));
+                                    Duration(milliseconds: value.toInt()));
                               },
                             ),
                           ),
@@ -145,7 +162,8 @@ class _PlayerScreenState extends State<PlayerScreen> {
                                 style: GoogleFonts.robotoMono(fontSize: 12),
                               ),
                               Text(
-                          _playback.durationTotal.value.toHumanReadableString(),
+                                _playback.durationTotal.value
+                                    .toHumanReadableString(),
                                 style: GoogleFonts.robotoMono(fontSize: 12),
                               ),
                             ],
@@ -163,7 +181,9 @@ class _PlayerScreenState extends State<PlayerScreen> {
                             final shuffled = snapshot.data ?? false;
                             return IconButton(
                               icon: Icon(
-                          shuffled ? Icons.shuffle_on_outlined : Icons.shuffle,
+                                shuffled
+                                    ? Icons.shuffle_on_outlined
+                                    : Icons.shuffle,
                               ),
                               onPressed: _isFetchingActiveTrack
                                   ? null
@@ -198,18 +218,22 @@ class _PlayerScreenState extends State<PlayerScreen> {
                                     ),
                                   )
                                 : Icon(
-                              !_isPlaying ? Icons.play_arrow : Icons.pause,
+                                    !_isPlaying
+                                        ? Icons.play_arrow
+                                        : Icons.pause,
                                     size: 28,
                                   ),
-                      onPressed:
+                            onPressed: _isFetchingActiveTrack
-                          _isFetchingActiveTrack ? null : _togglePlayState,
+                                ? null
+                                : _togglePlayState,
                           ),
                         ),
                         const Gap(8),
                         IconButton(
                           icon: const Icon(Icons.skip_next),
-                    onPressed:
+                          onPressed: _isFetchingActiveTrack
-                        _isFetchingActiveTrack ? null : audioPlayer.skipToNext,
+                              ? null
+                              : audioPlayer.skipToNext,
                         ),
                         Obx(
                           () => IconButton(
@@ -225,8 +249,10 @@ class _PlayerScreenState extends State<PlayerScreen> {
                                 : () async {
                                     await audioPlayer.setLoopMode(
                                       switch (_loopMode) {
-                                  PlaylistMode.loop => PlaylistMode.single,
+                                        PlaylistMode.loop =>
-                                  PlaylistMode.single => PlaylistMode.none,
+                                          PlaylistMode.single,
+                                        PlaylistMode.single =>
+                                          PlaylistMode.none,
                                         PlaylistMode.none => PlaylistMode.loop,
                                       },
                                     );
@@ -256,7 +282,8 @@ class _PlayerScreenState extends State<PlayerScreen> {
                             },
                           ),
                         ),
-                  const Gap(4),
+                        if (!isLargeScreen) const Gap(4),
+                        if (!isLargeScreen)
                           Expanded(
                             child: TextButton.icon(
                               icon: const Icon(Icons.lyrics),
@@ -276,7 +303,8 @@ class _PlayerScreenState extends State<PlayerScreen> {
                                 useRootNavigator: true,
                                 isScrollControlled: true,
                                 context: context,
-                          builder: (context) => const SiblingTracksPopup(),
+                                builder: (context) =>
+                                    const SiblingTracksPopup(),
                               ).then((_) {
                                 if (mounted) {
                                   setState(() {});
@@ -289,6 +317,14 @@ class _PlayerScreenState extends State<PlayerScreen> {
                     ),
                   ],
                 ),
+              ),
+              if (isLargeScreen) const Gap(24),
+              if (isLargeScreen)
+                const Expanded(
+                  child: SyncedLyrics(defaultTextZoom: 67),
+                )
+            ],
+          ),
         ).marginAll(24),
       ),
     );

lib/screens/playlist/view.dart

@@ -10,6 +10,7 @@ import 'package:rhythm_box/providers/history.dart';
 import 'package:rhythm_box/providers/spotify.dart';
 import 'package:rhythm_box/services/audio_player/audio_player.dart';
 import 'package:rhythm_box/widgets/auto_cache_image.dart';
+import 'package:rhythm_box/widgets/sized_container.dart';
 import 'package:rhythm_box/widgets/tracks/playlist_track_list.dart';
 import 'package:spotify/spotify.dart';
 
@@ -60,6 +61,7 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
       child: Scaffold(
         appBar: AppBar(
           title: const Text('Playlist'),
+          centerTitle: MediaQuery.of(context).size.width >= 720,
         ),
         body: Builder(
           builder: (context) {
@@ -69,7 +71,8 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
               );
             }
 
-            return CustomScrollView(
+            return CenteredContainer(
+              child: CustomScrollView(
                 slivers: [
                   SliverToBoxAdapter(
                     child: Column(
@@ -100,8 +103,9 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
                                 children: [
                                   Text(
                                     _playlist!.name ?? 'Playlist',
-                                  style:
+                                    style: Theme.of(context)
-                                      Theme.of(context).textTheme.headlineSmall,
+                                        .textTheme
+                                        .headlineSmall,
                                     maxLines: 2,
                                     overflow: TextOverflow.fade,
                                   ),
@@ -176,7 +180,8 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
 
                                       audioPlayer.setShuffle(true);
 
-                                    final tracks = (await _spotify.api.playlists
+                                      final tracks = (await _spotify
+                                              .api.playlists
                                               .getTracksByPlaylistId(
                                                   widget.playlistId)
                                               .all())
@@ -209,6 +214,7 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
                   ),
                   PlaylistTrackList(playlistId: widget.playlistId),
                 ],
+              ),
             );
           },
         ),

lib/screens/search/view.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:rhythm_box/providers/spotify.dart';
 import 'package:rhythm_box/providers/user_preferences.dart';
+import 'package:rhythm_box/widgets/sized_container.dart';
 import 'package:rhythm_box/widgets/tracks/track_list.dart';
 import 'package:spotify/spotify.dart';
 
@@ -61,6 +62,7 @@ class _SearchScreenState extends State<SearchScreen> {
                   FocusManager.instance.primaryFocus?.unfocus(),
             ).paddingSymmetric(horizontal: 24, vertical: 8),
             Expanded(
+              child: CenteredContainer(
                 child: CustomScrollView(
                   slivers: [
                     if (_searchResult != null)
@@ -68,6 +70,7 @@ class _SearchScreenState extends State<SearchScreen> {
                   ],
                 ),
               ),
+            ),
           ],
         ),
       ),

lib/screens/settings.dart

@@ -10,6 +10,22 @@ class SettingsScreen extends StatefulWidget {
 class _SettingsScreenState extends State<SettingsScreen> {
   @override
   Widget build(BuildContext context) {
-    return const Placeholder();
+    return Material(
+      color: Theme.of(context).colorScheme.surface,
+      child: SafeArea(
+        child: Column(
+          children: [
+            ListTile(
+              contentPadding: const EdgeInsets.symmetric(horizontal: 24),
+              leading: const Icon(Icons.login),
+              title: const Text('Connect with Spotify'),
+              subtitle: const Text('To explore your own library and more'),
+              trailing: const Icon(Icons.chevron_right),
+              onTap: () {},
+            ),
+          ],
+        ),
+      ),
+    );
   }
 }

lib/shells/nav_shell.dart

@@ -40,6 +40,7 @@ class _NavShellState extends State<NavShell> {
             const BottomPlayer(key: Key('app-wide-bottom-player')),
             const Divider(height: 0.3, thickness: 0.3),
             BottomNavigationBar(
+              landscapeLayout: BottomNavigationBarLandscapeLayout.centered,
               elevation: 0,
               showUnselectedLabels: false,
               currentIndex: _focusDestination,

lib/widgets/sized_container.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/material.dart';
+
+class SizedContainer extends StatelessWidget {
+  final Widget child;
+  final double maxWidth;
+  final double maxHeight;
+
+  const SizedContainer({
+    super.key,
+    required this.child,
+    this.maxWidth = 720,
+    this.maxHeight = double.infinity,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Align(
+      alignment: Alignment.centerLeft,
+      child: Container(
+        constraints: BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
+        child: child,
+      ),
+    );
+  }
+}
+
+class CenteredContainer extends StatelessWidget {
+  final Widget child;
+  final double maxWidth;
+
+  const CenteredContainer({
+    super.key,
+    required this.child,
+    this.maxWidth = 720,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Container(
+        constraints: BoxConstraints(maxWidth: maxWidth),
+        child: child,
+      ),
+    );
+  }
+}

linux/flutter/generated_plugin_registrant.cc

@@ -6,6 +6,7 @@
 
 #include "generated_plugin_registrant.h"
 
+#include <desktop_webview_window/desktop_webview_window_plugin.h>
 #include <flutter_secure_storage_linux/flutter_secure_storage_linux_plugin.h>
 #include <media_kit_libs_linux/media_kit_libs_linux_plugin.h>
 #include <screen_retriever/screen_retriever_plugin.h>
@@ -13,6 +14,9 @@
 #include <window_manager/window_manager_plugin.h>
 
 void fl_register_plugins(FlPluginRegistry* registry) {
+  g_autoptr(FlPluginRegistrar) desktop_webview_window_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "DesktopWebviewWindowPlugin");
+  desktop_webview_window_plugin_register_with_registrar(desktop_webview_window_registrar);
   g_autoptr(FlPluginRegistrar) flutter_secure_storage_linux_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "FlutterSecureStorageLinuxPlugin");
   flutter_secure_storage_linux_plugin_register_with_registrar(flutter_secure_storage_linux_registrar);

linux/flutter/generated_plugins.cmake

@@ -3,6 +3,7 @@
 #
 
 list(APPEND FLUTTER_PLUGIN_LIST
+  desktop_webview_window
   flutter_secure_storage_linux
   media_kit_libs_linux
   screen_retriever

macos/Flutter/GeneratedPluginRegistrant.swift

@@ -7,7 +7,9 @@ import Foundation
 
 import audio_service
 import audio_session
+import desktop_webview_window
 import device_info_plus
+import flutter_inappwebview_macos
 import flutter_secure_storage_macos
 import media_kit_libs_macos_audio
 import package_info_plus
@@ -21,7 +23,9 @@ import window_manager
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   AudioServicePlugin.register(with: registry.registrar(forPlugin: "AudioServicePlugin"))
   AudioSessionPlugin.register(with: registry.registrar(forPlugin: "AudioSessionPlugin"))
+  DesktopWebviewWindowPlugin.register(with: registry.registrar(forPlugin: "DesktopWebviewWindowPlugin"))
   DeviceInfoPlusMacosPlugin.register(with: registry.registrar(forPlugin: "DeviceInfoPlusMacosPlugin"))
+  InAppWebViewFlutterPlugin.register(with: registry.registrar(forPlugin: "InAppWebViewFlutterPlugin"))
   FlutterSecureStoragePlugin.register(with: registry.registrar(forPlugin: "FlutterSecureStoragePlugin"))
   MediaKitLibsMacosAudioPlugin.register(with: registry.registrar(forPlugin: "MediaKitLibsMacosAudioPlugin"))
   FPPPackageInfoPlusPlugin.register(with: registry.registrar(forPlugin: "FPPPackageInfoPlusPlugin"))

pubspec.lock

@@ -302,6 +302,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.3.6"
+  desktop_webview_window:
+    dependency: "direct main"
+    description:
+      name: desktop_webview_window
+      sha256: "57cf20d81689d5cbb1adfd0017e96b669398a669d927906073b0e42fc64111c0"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.2.3"
   device_info_plus:
     dependency: "direct main"
     description:
@@ -443,6 +451,62 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.4.1"
+  flutter_inappwebview:
+    dependency: "direct main"
+    description:
+      name: flutter_inappwebview
+      sha256: "3e9a443a18ecef966fb930c3a76ca5ab6a7aafc0c7b5e14a4a850cf107b09959"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.0.0"
+  flutter_inappwebview_android:
+    dependency: transitive
+    description:
+      name: flutter_inappwebview_android
+      sha256: d247f6ed417f1f8c364612fa05a2ecba7f775c8d0c044c1d3b9ee33a6515c421
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.13"
+  flutter_inappwebview_internal_annotations:
+    dependency: transitive
+    description:
+      name: flutter_inappwebview_internal_annotations
+      sha256: "5f80fd30e208ddded7dbbcd0d569e7995f9f63d45ea3f548d8dd4c0b473fb4c8"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
+  flutter_inappwebview_ios:
+    dependency: transitive
+    description:
+      name: flutter_inappwebview_ios
+      sha256: f363577208b97b10b319cd0c428555cd8493e88b468019a8c5635a0e4312bd0f
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.13"
+  flutter_inappwebview_macos:
+    dependency: transitive
+    description:
+      name: flutter_inappwebview_macos
+      sha256: b55b9e506c549ce88e26580351d2c71d54f4825901666bd6cfa4be9415bb2636
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.11"
+  flutter_inappwebview_platform_interface:
+    dependency: transitive
+    description:
+      name: flutter_inappwebview_platform_interface
+      sha256: "545fd4c25a07d2775f7d5af05a979b2cac4fbf79393b0a7f5d33ba39ba4f6187"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.10"
+  flutter_inappwebview_web:
+    dependency: transitive
+    description:
+      name: flutter_inappwebview_web
+      sha256: d8c680abfb6fec71609a700199635d38a744df0febd5544c5a020bd73de8ee07
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.8"
   flutter_launcher_icons:
     dependency: "direct dev"
     description:

pubspec.yaml

@@ -86,6 +86,8 @@ dependencies:
   animations: ^2.0.11
   flutter_animate: ^4.5.0
   duration: ^4.0.3
+  desktop_webview_window: ^0.2.3
+  flutter_inappwebview: ^6.0.0
 
 dev_dependencies:
   flutter_test:

windows/flutter/generated_plugin_registrant.cc

@@ -6,6 +6,7 @@
 
 #include "generated_plugin_registrant.h"
 
+#include <desktop_webview_window/desktop_webview_window_plugin.h>
 #include <flutter_secure_storage_windows/flutter_secure_storage_windows_plugin.h>
 #include <media_kit_libs_windows_audio/media_kit_libs_windows_audio_plugin_c_api.h>
 #include <screen_retriever/screen_retriever_plugin.h>
@@ -13,6 +14,8 @@
 #include <window_manager/window_manager_plugin.h>
 
 void RegisterPlugins(flutter::PluginRegistry* registry) {
+  DesktopWebviewWindowPluginRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("DesktopWebviewWindowPlugin"));
   FlutterSecureStorageWindowsPluginRegisterWithRegistrar(
       registry->GetRegistrarForPlugin("FlutterSecureStorageWindowsPlugin"));
   MediaKitLibsWindowsAudioPluginCApiRegisterWithRegistrar(

windows/flutter/generated_plugins.cmake

@@ -3,6 +3,7 @@
 #
 
 list(APPEND FLUTTER_PLUGIN_LIST
+  desktop_webview_window
   flutter_secure_storage_windows
   media_kit_libs_windows_audio
   screen_retriever