feat(ui): redesign the desktop screen share picker

dogfooding/lib/screens/call_screen.dart

@@ -766,26 +766,55 @@ class __ShowChatButtonState extends State<_ShowChatButton> {
 Future<DesktopCapturerSource?> _customDesktopScreenShareSelector(
   BuildContext context,
 ) {
-  final stateNotifier = ScreenSelectorStateNotifier(
-    sourceTypes: [SourceType.Screen],
-  );
-
   return showModalBottomSheet<DesktopCapturerSource?>(
     context: context,
-    builder: (BuildContext context) {
-      return ValueListenableBuilder(
-        valueListenable: stateNotifier,
-        builder:
-            (BuildContext context, ScreenSelectorState value, Widget? child) =>
-                Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 16),
-                  child: ThumbnailGrid(
-                    sources: value.sources.values.toList(),
-                    selectedSource: value.selectedSource,
-                    onSelectSource: (source) => Navigator.pop(context, source),
-                  ),
-                ),
-      );
-    },
+    builder: (context) => const _ScreenOnlySelectorSheet(),
   );
 }
+
+class _ScreenOnlySelectorSheet extends StatefulWidget {
+  const _ScreenOnlySelectorSheet();
+
+  @override
+  State<_ScreenOnlySelectorSheet> createState() =>
+      _ScreenOnlySelectorSheetState();
+}
+
+class _ScreenOnlySelectorSheetState extends State<_ScreenOnlySelectorSheet> {
+  late final _controller = ScreenShareSourceController();
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ValueListenableBuilder(
+      valueListenable: _controller,
+      builder: (context, state, _) {
+        final sources = [
+          for (final source in state.sources)
+            if (source.type == SourceType.Screen) source,
+        ];
+
+        return GridView.builder(
+          padding: const EdgeInsets.all(16),
+          itemCount: sources.length,
+          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: 3,
+            crossAxisSpacing: 16,
+            mainAxisSpacing: 16,
+            mainAxisExtent: 164,
+          ),
+          itemBuilder: (context, index) => StreamScreenShareThumbnail(
+            source: sources[index],
+            selected: false,
+            onTap: (source) => Navigator.pop(context, source),
+          ),
+        );
+      },
+    );
+  }
+}

dogfooding/macos/Podfile

@@ -46,7 +46,7 @@ post_install do |installer|
   installer.pods_project.targets.each do |target|
     flutter_additional_macos_build_settings(target)
     target.build_configurations.each do |config|
-      config.build_settings['MACOSX_DEPLOYMENT_TARGET'] = '10.15'
+      config.build_settings['MACOSX_DEPLOYMENT_TARGET'] = '12.0'
     end
   end
 end

packages/stream_video_flutter/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ### ✅ Added
 
+- Added `StreamModalDialog` and `showStreamModalDialog`, a centered modal surface with a title, header actions and a footer, over a blurred `StreamBlurScrim`.
+- Added `StreamTabBar`, a row of equal-width tabs whose selected index the caller owns. It, `StreamModalDialog` and `StreamBlurScrim` are design-system candidates, living in `src/widgets/design_system_candidates` until they graduate to core.
+- Added `StreamScreenShareDialog`, the desktop screen share picker as a widget, so it can be presented some way other than through `showDefaultScreenSelectionDialog`.
+- Added `StreamScreenShareSelector`, the redesigned grid of screens and windows behind the desktop screen share picker, and `StreamScreenShareThumbnail`, one tile of it.
+- Added `ScreenShareSourceController`, which holds the screens and windows on offer and the one that is picked.
+- Added `StreamScreenShareSelectorThemeData` on `StreamVideoTheme`, and `StreamScreenShareSelectorTheme` to restyle the selector over a subtree.
+- Added `desktopScreenShareRefresh` and `desktopScreenShareNoSources` to the localizations, in English and Dutch.
 - `StreamLayoutButton` draws the participant layout in effect and offers the rest through a `StreamAdaptiveMenuAnchor`.
 - `StreamLayoutButton.defaultLayouts` is `auto` and `speakerBottom`, so the button toggles unless it is given more.
 - Added layout strings to the localizations, in English and Dutch: `layoutMenuTitle`, `layoutSelectTooltip`, `layoutDefault`, `layoutGrid`, `layoutSpeakerTop`, `layoutSpeakerBottom`, `layoutSpeakerLeft`, `layoutSpeakerRight` and `layoutSpeakerOneToOne`.
@@ -204,6 +211,8 @@
 
 ### ⚠️ Breaking
 
+- The desktop screen share picker is rebuilt on the design system. `TabbedScreenSelectWidget`, `ThumbnailGrid`, `ScreenSelectorStateNotifier` and `ScreenSelectorState` are gone; `StreamScreenShareSelector` and `ScreenShareSourceController` replace them. `showDefaultScreenSelectionDialog` keeps its signature.
+- `ScreenShareThumbnailWidget` is `StreamScreenShareThumbnail` now, and takes the thumbnail from the source it is given rather than subscribing for one.
 - `ParticipantLayoutMode.auto` is the default layout of `StreamCallContent`, `StreamCallParticipants` and `RegularCallParticipantsContent`, and renders what `grid` used to. The livestream widgets still default to `grid`.
 - `ParticipantLayoutMode.grid` gives the local participant a tile of its own instead of floating them over the grid.
 - `ParticipantLayoutMode.auto` floats the self-view on mobile only while at most two other people are in the call, and gives the local participant a tile beyond that.
@@ -268,6 +277,9 @@
 
 ### 🔄 Changed
 
+- The desktop screen share picker reads the platform's screens and windows once, and again on its refresh button, instead of re-enumerating and re-capturing all of them every two seconds.
+- The picker asks the platform for 480x300 thumbnails where the platform honours a size; macOS captures at its own.
+- The picker's sources are released whichever way it is dismissed, including the escape key and a tap outside.
 - `StreamLobbyView` is restyled onto the design system — its typography, spacing and icons come from `StreamTheme`, and the close action is a ghost `StreamButton` instead of a Material `IconButton`.
 - Requires `stream_core_flutter` 0.5.0 for the button styles, error badge and theme accessors the components above use.
 

packages/stream_video_flutter/lib/src/l10n/arb/stream_video_flutter_en.arb

@@ -19,6 +19,14 @@
   "@desktopScreenShareWindow": {
     "description": "Tab to select a single window to share"
   },
+  "desktopScreenShareRefresh": "Refresh",
+  "@desktopScreenShareRefresh": {
+    "description": "Tooltip of the action that re-reads the screens and windows on offer"
+  },
+  "desktopScreenShareNoSources": "Nothing to share here.",
+  "@desktopScreenShareNoSources": {
+    "description": "Shown in place of the grid when the platform offers no screen or window of the selected type"
+  },
   "layoutMenuTitle": "Layout",
   "@layoutMenuTitle": {
     "description": "Title of the sheet that picks how participants are laid out"

packages/stream_video_flutter/lib/src/l10n/arb/stream_video_flutter_nl.arb

@@ -4,6 +4,8 @@
   "desktopScreenShareChooseDialogCancel": "Annuleren",
   "desktopScreenShareEntireScreen": "Volledig scherm",
   "desktopScreenShareWindow": "Venster",
+  "desktopScreenShareRefresh": "Vernieuwen",
+  "desktopScreenShareNoSources": "Hier valt niets te delen.",
   "layoutMenuTitle": "Indeling",
   "layoutSelectTooltip": "Indeling wijzigen",
   "layoutDefault": "Standaard",

packages/stream_video_flutter/lib/src/l10n/localizations/stream_video_flutter_localizations.dart

@@ -131,6 +131,18 @@ abstract class StreamVideoFlutterLocalizations {
   /// **'Window'**
   String get desktopScreenShareWindow;
 
+  /// Tooltip of the action that re-reads the screens and windows on offer
+  ///
+  /// In en, this message translates to:
+  /// **'Refresh'**
+  String get desktopScreenShareRefresh;
+
+  /// Shown in place of the grid when the platform offers no screen or window of the selected type
+  ///
+  /// In en, this message translates to:
+  /// **'Nothing to share here.'**
+  String get desktopScreenShareNoSources;
+
   /// Title of the sheet that picks how participants are laid out
   ///
   /// In en, this message translates to:

packages/stream_video_flutter/lib/src/l10n/localizations/stream_video_flutter_localizations_en.dart

@@ -24,6 +24,12 @@ class StreamVideoFlutterLocalizationsEn
   @override
   String get desktopScreenShareWindow => 'Window';
 
+  @override
+  String get desktopScreenShareRefresh => 'Refresh';
+
+  @override
+  String get desktopScreenShareNoSources => 'Nothing to share here.';
+
   @override
   String get layoutMenuTitle => 'Layout';
 

packages/stream_video_flutter/lib/src/l10n/localizations/stream_video_flutter_localizations_nl.dart

@@ -24,6 +24,12 @@ class StreamVideoFlutterLocalizationsNl
   @override
   String get desktopScreenShareWindow => 'Venster';
 
+  @override
+  String get desktopScreenShareRefresh => 'Vernieuwen';
+
+  @override
+  String get desktopScreenShareNoSources => 'Hier valt niets te delen.';
+
   @override
   String get layoutMenuTitle => 'Indeling';