feat: Adapt user interface on different screens (#247)

lib/l10n/app_en.arb

@@ -126,7 +126,7 @@
   "eventsTimeline": "Timeline of Events",
   "server": "Server",
   "device": "Device",
-  "deviceInfo": "Device info",
+  "viewDeviceDetails": "View device details",
   "event": "Event",
   "duration": "Duration",
   "priority": "Priority",
@@ -264,6 +264,7 @@
       }
     }
   },
+  "switchToNext": "Switch to next",
   "@Downloads": {},
   "downloads": "Downloads",
   "download": "Download",

lib/l10n/app_fr.arb

@@ -122,7 +122,7 @@
   "eventsTimeline": "Ligne du temps",
   "server": "Serveur",
   "device": "Appareil",
-  "deviceInfo": "Info d'apparail",
+  "viewDeviceDetails": "Info d'apparail",
   "event": "Évènement",
   "duration": "Durée",
   "priority": "Priorité",
@@ -254,6 +254,7 @@
       }
     }
   },
+  "switchToNext": "Switch to next",
   "@Downloads": {},
   "downloads": "Téléchargements",
   "download": "Télécharger",

lib/l10n/app_pl.arb

@@ -126,7 +126,7 @@
   "eventsTimeline": "Oś czasu zdarzeń",
   "server": "Serwer",
   "device": "Urządzenie",
-  "deviceInfo": "Device info",
+  "viewDeviceDetails": "Device info",
   "event": "Zdarzenie",
   "duration": "Czas trwania",
   "priority": "Priorytet",
@@ -264,6 +264,7 @@
       }
     }
   },
+  "switchToNext": "Switch to next",
   "@Downloads": {},
   "downloads": "Pobrania",
   "download": "Pobierz",

lib/l10n/app_pt.arb

@@ -126,7 +126,7 @@
   "eventsTimeline": "Linha do tempo de eventos",
   "server": "Servidor",
   "device": "Dispositivo",
-  "deviceInfo": "Informações do dispositivo",
+  "viewDeviceDetails": "Ver detalhes do dispositivo",
   "event": "Evento",
   "duration": "Duração",
   "priority": "Prioridade",
@@ -264,6 +264,7 @@
       }
     }
   },
+  "switchToNext": "Ir para o próximo",
   "@Downloads": {},
   "downloads": "Downloads",
   "download": "Baixar",

lib/main.dart

@@ -86,7 +86,7 @@ Future<void> main(List<String> args) async {
     API.initialize();
     await UnityVideoPlayerInterface.instance.initialize();
     if (isDesktopPlatform && Platform.isLinux) {
-      if (UpdateManager.linuxEnvironment == LinuxPlatform.embedded) {
+      if (isEmbedded) {
         UnityVideoPlayerFlutterInterface.registerWith();
       } else {
         UnityVideoPlayerMediaKitInterface.registerWith();

lib/providers/desktop_view_provider.dart

@@ -281,6 +281,18 @@ class DesktopViewProvider extends UnityProvider {
     return save(notifyListeners: false);
   }
 
+  Layout get nextLayout {
+    final next = (_currentLayout + 1) % layouts.length;
+    return layouts[next];
+  }
+
+  Future<void> switchToNextLayout() {
+    if (layouts.length > 1) {
+      return updateCurrentLayout((_currentLayout + 1) % layouts.length);
+    }
+    return Future.value();
+  }
+
   /// Reorders the layouts
   Future<void> reorderLayout(int oldIndex, int newIndex) {
     if (oldIndex == newIndex) return Future.value();
@@ -297,6 +309,14 @@ class DesktopViewProvider extends UnityProvider {
     return save(notifyListeners: false);
   }
 
+  Future<void> clearLayout({Layout? layout}) {
+    layout ??= currentLayout;
+    return updateLayout(
+      layout,
+      layout.copyWith(devices: []),
+    );
+  }
+
   /// Updates a device in all the layouts.
   ///
   /// If [reload] is `true`, the device player will be reloaded.

lib/screens/events_timeline/desktop/timeline_card.dart

@@ -245,7 +245,6 @@ class _TimelineCardState extends State<TimelineCard> {
                           Icons.fullscreen,
                           color: Colors.white,
                           shadows: outlinedText(),
-                          size: 18.0,
                         ),
                       )
                     ],

lib/screens/events_timeline/desktop/timeline_sidebar.dart

@@ -18,13 +18,16 @@
  */
 
 import 'package:auto_size_text/auto_size_text.dart';
+import 'package:bluecherry_client/providers/events_provider.dart';
 import 'package:bluecherry_client/screens/events_browser/filter.dart';
+import 'package:bluecherry_client/utils/methods.dart';
 import 'package:bluecherry_client/widgets/collapsable_sidebar.dart';
 import 'package:bluecherry_client/widgets/misc.dart';
 import 'package:bluecherry_client/widgets/search.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:intl/intl.dart';
+import 'package:provider/provider.dart';
 
 class TimelineSidebar extends StatefulWidget {
   const TimelineSidebar({
@@ -47,6 +50,7 @@ class _TimelineSidebarState extends State<TimelineSidebar> with Searchable {
   @override
   Widget build(BuildContext context) {
     final loc = AppLocalizations.of(context);
+    final eventsProvider = context.watch<EventsProvider>();
 
     return Card(
       shape: const RoundedRectangleBorder(
@@ -56,6 +60,8 @@ class _TimelineSidebarState extends State<TimelineSidebar> with Searchable {
       ),
       margin: const EdgeInsetsDirectional.only(end: 4.0, top: 4.0, start: 4.0),
       child: CollapsableSidebar(
+        initiallyClosed:
+            eventsProvider.selectedDevices.isNotEmpty || isEmbedded,
         left: false,
         builder: (context, collapsed, collapseButton) {
           collapseButton = Padding(

lib/screens/home.dart

@@ -140,15 +140,15 @@ class _MobileHomeState extends State<Home> {
       /// in order to delight a good user experience
       final isWide = constraints.biggest.width > 700;
       final isTall = constraints.biggest.height > 440;
-      final showNavigationRail = isWide && isTall && !isDesktop;
+      final showNavigationRail = (isWide && isTall && !isDesktop) || isEmbedded;
 
       return Scaffold(
         resizeToAvoidBottomInset: false,
         drawer: isDesktop || showNavigationRail
             ? null
             : Builder(builder: buildDrawer),
         body: Column(children: [
-          const WindowButtons(),
+          WindowButtons(showNavigator: !showNavigationRail),
           Expanded(
             child: Row(children: [
               if (showNavigationRail)

lib/screens/layouts/desktop/device_info_dialog.dart

@@ -21,6 +21,7 @@ import 'package:bluecherry_client/models/device.dart';
 import 'package:bluecherry_client/utils/theme.dart';
 import 'package:bluecherry_client/widgets/squared_icon_button.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 Future<void> showDeviceInfoDialog(BuildContext context, Device device) async {
@@ -82,13 +83,13 @@ class _DeviceInfoDialogState extends State<DeviceInfoDialog> {
                       }).join(),
               ),
               const SizedBox(width: 6.0),
+              CopyDeviceUrlButton(device: widget.device),
               SquaredIconButton(
                 onPressed: () =>
                     setState(() => _showStreamUrl = !_showStreamUrl),
                 tooltip: _showStreamUrl ? loc.hide : loc.show,
                 icon: Icon(
                   _showStreamUrl ? Icons.visibility_off : Icons.visibility,
-                  size: 18.0,
                 ),
               ),
             ]),
@@ -122,3 +123,34 @@ class _DeviceInfoDialogState extends State<DeviceInfoDialog> {
     });
   }
 }
+
+class CopyDeviceUrlButton extends StatelessWidget {
+  final Device device;
+
+  const CopyDeviceUrlButton({super.key, required this.device});
+
+  @override
+  Widget build(BuildContext context) {
+    final loc = AppLocalizations.of(context);
+    return SquaredIconButton(
+      padding: EdgeInsetsDirectional.zero,
+      icon: const Icon(Icons.copy),
+      tooltip: MaterialLocalizations.of(context).copyButtonLabel,
+      onPressed: () {
+        Clipboard.setData(
+          ClipboardData(text: device.streamURL),
+        );
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text(
+              loc.copiedToClipboard('URL'),
+              textAlign: TextAlign.center,
+            ),
+            behavior: SnackBarBehavior.floating,
+            width: 200.0,
+          ),
+        );
+      },
+    );
+  }
+}

lib/screens/layouts/desktop/layout_manager.dart

@@ -23,7 +23,6 @@ import 'dart:io';
 import 'package:bluecherry_client/models/layout.dart';
 import 'package:bluecherry_client/providers/desktop_view_provider.dart';
 import 'package:bluecherry_client/providers/settings_provider.dart';
-import 'package:bluecherry_client/utils/methods.dart';
 import 'package:bluecherry_client/utils/window.dart';
 import 'package:bluecherry_client/widgets/hover_button.dart';
 import 'package:bluecherry_client/widgets/misc.dart';
@@ -88,16 +87,8 @@ class _LayoutManagerState extends State<LayoutManager> with Searchable {
     timer?.cancel();
     timer = Timer.periodic(settings.kLayoutCyclePeriod.value, (timer) {
       if (!mounted) return;
-
-      final view = DesktopViewProvider.instance;
-
       if (settings.kLayoutCycleEnabled.value) {
-        final currentIsLast =
-            view.currentLayoutIndex == view.layouts.length - 1;
-
-        view.updateCurrentLayout(
-          currentIsLast ? 0 : view.currentLayoutIndex + 1,
-        );
+        DesktopViewProvider.instance.switchToNextLayout();
       }
     });
   }
@@ -141,7 +132,6 @@ class _LayoutManagerState extends State<LayoutManager> with Searchable {
                 SquaredIconButton(
                   icon: Icon(
                     Icons.cyclone,
-                    size: 18.0,
                     color: settings.kLayoutCycleEnabled.value
                         ? theme.colorScheme.primary
                         : IconTheme.of(context).color,
@@ -150,11 +140,13 @@ class _LayoutManagerState extends State<LayoutManager> with Searchable {
                   onPressed: settings.toggleCycling,
                 ),
                 SquaredIconButton(
-                  icon: Icon(
-                    Icons.add,
-                    size: 18.0,
-                    color: IconTheme.of(context).color,
-                  ),
+                  icon: const Icon(Icons.next_plan_outlined),
+                  tooltip: loc.switchToNext,
+                  onPressed:
+                      view.layouts.length > 1 ? view.switchToNextLayout : null,
+                ),
+                SquaredIconButton(
+                  icon: const Icon(Icons.add),
                   tooltip: loc.newLayout,
                   onPressed: () {
                     showDialog(
@@ -323,10 +315,7 @@ class _LayoutTileState extends State<LayoutTile> {
           PopupMenuItem(
             child: Text(loc.clearLayout(widget.layout.devices.length)),
             onTap: () {
-              DesktopViewProvider.instance.updateLayout(
-                widget.layout,
-                widget.layout.copyWith(devices: []),
-              );
+              DesktopViewProvider.instance.clearLayout(layout: widget.layout);
             },
           ),
           const PopupMenuDivider(),
@@ -340,7 +329,7 @@ class _LayoutTileState extends State<LayoutTile> {
             );
           },
         ),
-        if (isDesktopPlatform)
+        if (canOpenNewWindow)
           PopupMenuItem(
             onTap: widget.layout.openInANewWindow,
             child: Text(loc.openInANewWindow),
@@ -587,13 +576,8 @@ class _EditLayoutDialogState extends State<EditLayoutDialog> {
         Expanded(child: Text(loc.editSpecificLayout(widget.layout.name))),
         if (view.layouts.length > 1)
           SquaredIconButton(
-            icon: Icon(
-              Icons.delete,
-              color: theme.colorScheme.error,
-              size: 18.0,
-            ),
+            icon: Icon(Icons.delete, color: theme.colorScheme.error),
             tooltip: loc.delete,
-            // iconSize: 18.0,
             onPressed: () {
               view.removeLayout(widget.layout);
               Navigator.of(context).pop();