chore: Optimize layout for mobile.

livekit · Oct 25, 2024 · 61b8708 · 61b8708
1 parent 2073577
commit 61b8708
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 25 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -70,6 +70,14 @@ class MyHomePage extends StatelessWidget {
       builder: (context, roomCtx) {
         var deviceScreenType = getDeviceType(MediaQuery.of(context).size);
         return Scaffold(
+          appBar: AppBar(
+            title: const Text('LiveKit Components',
+                style: TextStyle(color: Colors.white)),
+            actions: [
+              /// show clear pin button
+              if (roomCtx.connected) const ClearPinButton(),
+            ],
+          ),
           body: Stack(
             children: [
               !roomCtx.connected && !roomCtx.connecting
@@ -97,16 +105,15 @@ class MyHomePage extends StatelessWidget {
                                       onSend: (message) =>
                                           chatCtx.sendMessage(message),
                                       onClose: () {
-                                        chatCtx.disableChat();
+                                        chatCtx.toggleChat(false);
                                       },
                                     );
                                   },
                                 ),
                               )
                             : Expanded(
                                 flex: 5,
-                                child: Column(
-                                  mainAxisAlignment: MainAxisAlignment.center,
+                                child: Stack(
                                   children: <Widget>[
                                     Expanded(
                                       /// show participant loop
@@ -152,8 +159,8 @@ class MyHomePage extends StatelessWidget {
 
                                                 /// track stats at the bottom right
                                                 const Positioned(
-                                                  bottom: 30,
-                                                  right: 0,
+                                                  top: 8,
+                                                  left: 0,
                                                   child: TrackStatsWidget(),
                                                 ),
 
@@ -167,7 +174,12 @@ class MyHomePage extends StatelessWidget {
                                     ),
 
                                     /// show control bar at the bottom
-                                    const ControlBar(),
+                                    const Positioned(
+                                      bottom: 30,
+                                      left: 0,
+                                      right: 0,
+                                      child: ControlBar(),
+                                    ),
                                   ],
                                 ),
                               ),
@@ -187,7 +199,7 @@ class MyHomePage extends StatelessWidget {
                                         onSend: (message) =>
                                             chatCtx.sendMessage(message),
                                         onClose: () {
-                                          chatCtx.disableChat();
+                                          chatCtx.toggleChat(false);
                                         },
                                       );
                                     },

diff --git a/lib/livekit_components.dart b/lib/livekit_components.dart
@@ -49,6 +49,7 @@ export 'src/ui/widgets/room/microphone_select_button.dart';
 export 'src/ui/widgets/room/control_bar.dart';
 export 'src/ui/widgets/room/disconnect_button.dart';
 export 'src/ui/widgets/room/screenshare_toggle.dart';
+export 'src/ui/widgets/room/clear_pin_button.dart';
 
 export 'src/ui/widgets/track/focus_toggle.dart';
 export 'src/ui/widgets/track/no_track_widget.dart';

diff --git a/lib/src/context/chat_context.dart b/lib/src/context/chat_context.dart
@@ -99,13 +99,8 @@ mixin ChatContextMixin on ChangeNotifier {
   bool _chatEnabled = false;
   bool get isChatEnabled => _chatEnabled;
 
-  void enableChat() {
-    _chatEnabled = true;
-    notifyListeners();
-  }
-
-  void disableChat() {
-    _chatEnabled = false;
+  void toggleChat(bool enabled) {
+    _chatEnabled = enabled;
     notifyListeners();
   }
 }
diff --git a/lib/src/ui/layout/garousel_ayout.dart b/lib/src/ui/layout/garousel_ayout.dart
@@ -29,13 +29,15 @@ class CarouselLayoutBuilder implements ParticipantLayoutBuilder {
     }
 
     var deviceScreenType = getDeviceType(MediaQuery.of(context).size);
-    if (deviceScreenType == DeviceScreenType.mobile) {
+    var orientation = MediaQuery.of(context).orientation;
+    var isMobile = deviceScreenType == DeviceScreenType.mobile;
+    if (isMobile && orientation == Orientation.portrait) {
       return Column(
         mainAxisAlignment: MainAxisAlignment.start,
         children: [
           if (children.length > 1)
             SizedBox(
-              height: 80,
+              height: 120,
               child: ListView.builder(
                 scrollDirection: Axis.horizontal,
                 itemCount: math.max(0, otherWidgets.length),
@@ -56,7 +58,7 @@ class CarouselLayoutBuilder implements ParticipantLayoutBuilder {
       children: [
         if (children.length > 1)
           SizedBox(
-            width: 180,
+            width: isMobile && orientation == Orientation.landscape ? 120 : 180,
             child: ListView.builder(
               scrollDirection: Axis.vertical,
               itemCount: math.max(0, otherWidgets.length),

diff --git a/lib/src/ui/layout/grid_layout.dart b/lib/src/ui/layout/grid_layout.dart
@@ -11,8 +11,12 @@ class GridLayoutBuilder implements ParticipantLayoutBuilder {
   Widget build(
       BuildContext context, List<Widget> children, List<Widget>? pinned) {
     var deviceScreenType = getDeviceType(MediaQuery.of(context).size);
+    var orientation = MediaQuery.of(context).orientation;
     return GridView.count(
-      crossAxisCount: deviceScreenType == DeviceScreenType.mobile ? 2 : 4,
+      crossAxisCount: deviceScreenType == DeviceScreenType.mobile &&
+              orientation == Orientation.portrait
+          ? 2
+          : 4,
       childAspectRatio: 1.5,
       children: [
         if (pinned != null) ...pinned,

diff --git a/lib/src/ui/prejoin/prejoin.dart b/lib/src/ui/prejoin/prejoin.dart
@@ -75,8 +75,12 @@ class Prejoin extends StatelessWidget {
                                   mainAxisAlignment:
                                       MainAxisAlignment.spaceEvenly,
                                   children: [
-                                    MicrophoneSelectButton(),
-                                    CameraSelectButton(),
+                                    MicrophoneSelectButton(
+                                      showLabels: true,
+                                    ),
+                                    CameraSelectButton(
+                                      showLabels: true,
+                                    ),
                                   ],
                                 )),
                           ),

diff --git a/lib/src/ui/widgets/room/clear_pin_button.dart b/lib/src/ui/widgets/room/clear_pin_button.dart
@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import '../../../context/room_context.dart';
+
+class ClearPinButton extends StatelessWidget {
+  const ClearPinButton({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final roomCtx = context.read<RoomContext>();
+    return Padding(
+      padding: const EdgeInsets.all(2),
+      child: IconButton(
+        icon: Icon(Icons.grid_view),
+        color: Colors.white70,
+        onPressed: () {
+          roomCtx.clearPinnedTracks();
+        },
+      ),
+    );
+  }
+}
diff --git a/lib/src/ui/widgets/room/control_bar.dart b/lib/src/ui/widgets/room/control_bar.dart
@@ -106,8 +106,7 @@ class ControlBar extends StatelessWidget {
             ChatToggle(
               builder: (context, roomCtx, isChatEnabled) => ChatToggleWidget(
                 isChatOpen: roomCtx.isChatEnabled,
-                toggleChat: (enabled) =>
-                    enabled ? roomCtx.enableChat() : roomCtx.disableChat(),
+                toggleChat: (enabled) => roomCtx.toggleChat(enabled),
                 showLabel: showLabels,
               ),
             ),

diff --git a/lib/src/ui/widgets/track/focus_toggle.dart b/lib/src/ui/widgets/track/focus_toggle.dart
@@ -9,8 +9,11 @@ import '../../../debug/logger.dart';
 class FocusToggle extends StatelessWidget {
   const FocusToggle({
     super.key,
+    this.showBackToGridView = false,
   });
 
+  final bool showBackToGridView;
+
   @override
   Widget build(BuildContext context) {
     final roomCtx = context.read<RoomContext>();
@@ -20,19 +23,24 @@ class FocusToggle extends StatelessWidget {
     if (trackCtx == null) {
       return const SizedBox();
     }
-    var showBackToGridView =
+    var shouldShowBackToGridView =
         roomCtx.pinnedTracks.contains(sid) && sid == roomCtx.pinnedTracks.first;
 
+    if (shouldShowBackToGridView && !showBackToGridView) {
+      return const SizedBox();
+    }
+
     return Padding(
       padding: const EdgeInsets.all(2),
       child: IconButton(
-        icon: Icon(showBackToGridView ? Icons.grid_view : Icons.open_in_full),
+        icon: Icon(
+            shouldShowBackToGridView ? Icons.grid_view : Icons.open_in_full),
         color: Colors.white70,
         onPressed: () {
           if (sid == null) {
             return;
           }
-          if (showBackToGridView) {
+          if (shouldShowBackToGridView) {
             roomCtx.clearPinnedTracks();
           } else {
             roomCtx.pinningTrack(sid);