feat: adapt client UI to mobile interfaces

Author: ihmily

app/app_manager.py

@@ -48,7 +48,7 @@ def __init__(self, page: ft.Page):
         self.sidebar = NavigationSidebar(self)
         self.left_navigation_menu = LeftNavigationMenu(self)
 
-        self.page.snack_bar_area = ft.Container()
+        self.snack_bar_area = ft.Container()
         self.dialog_area = ft.Container()
         self.complete_page = ft.Row(
             expand=True,
@@ -57,10 +57,10 @@ def __init__(self, page: ft.Page):
                 ft.VerticalDivider(width=1),
                 self.content_area,
                 self.dialog_area,
-                self.page.snack_bar_area,
+                self.snack_bar_area,
             ]
         )
-        self.snack_bar = ShowSnackBar(self.page)
+        self.snack_bar = ShowSnackBar(self)
         self.subprocess_start_up_info = utils.get_startup_info()
         self.record_card_manager = RecordingCardManager(self)
         self.record_manager = RecordingManager(self)

app/ui/components/recording_dialog.py

@@ -93,7 +93,12 @@ async def update_format_options(e):
             menu_height=200
         )
 
-        format_row = ft.Row([media_type_dropdown, record_format_field], expand=True)
+        if self.app.is_mobile:
+            media_type_dropdown.width = 500
+            record_format_field.width = 500
+            format_row = ft.Column([media_type_dropdown, record_format_field], expand=True)
+        else:
+            format_row = ft.Row([media_type_dropdown, record_format_field], expand=True)
 
         recording_dir_field = ft.TextField(
             label=self._["input_save_path"],

app/ui/components/search_dialog.py

@@ -30,7 +30,6 @@ def __init__(self, home_page, on_close=None):
             border_radius=5,
             border_color=ft.Colors.GREY_400,
             focused_border_color=ft.Colors.BLUE,
-            cursor_color=ft.Colors.BLACK,
             hint_style=ft.TextStyle(color=ft.Colors.GREY_500, size=14),
         )
         self.actions = [

app/ui/components/show_snackbar.py

@@ -2,8 +2,8 @@
 
 
 class ShowSnackBar:
-    def __init__(self, page):
-        self.page = page
+    def __init__(self, app):
+        self.app = app
 
     async def show_snack_bar(self, message, bgcolor=None, duration=1500, action=None, emoji=None,
                              show_close_icon=False):
@@ -16,10 +16,12 @@ async def show_snack_bar(self, message, bgcolor=None, duration=1500, action=None
             action=action,
             bgcolor=bgcolor,
             duration=duration,
-            margin=ft.margin.only(left=self.page.width - 300, top=0, right=10, bottom=10),
             show_close_icon=show_close_icon
         )
 
+        if not self.app.is_mobile:
+            snack_bar.margin = ft.margin.only(left=self.app.page.width - 300, top=0, right=10, bottom=10)
+
         snack_bar.open = True
-        self.page.snack_bar_area.content = snack_bar
-        self.page.update()
+        self.app.snack_bar_area.content = snack_bar
+        self.app.page.update()

app/ui/components/video_player.py

@@ -37,9 +37,18 @@ def close_dialog(_):
             dialog.open = False
             self.app.dialog_area.update()
 
+        is_mobile = self.app.is_mobile
+
+        if is_mobile:
+            video_width = 320
+            video_height = 180
+        else:
+            video_width = 800
+            video_height = 450
+
         video = ft.Video(
-            width=800,
-            height=450,
+            width=video_width,
+            height=video_height,
             playlist=[ft.VideoMedia(video_source)],
             autoplay=True
         )
@@ -63,13 +72,46 @@ async def open_in_browser(_):
             else:
                 actions.insert(0, ft.TextButton(self._["copy_video_url"], on_click=copy_source))
 
-        dialog = ft.AlertDialog(
-            modal=True,
-            title=ft.Text(title),
-            content=video,
-            actions=actions,
-            actions_alignment=ft.MainAxisAlignment.END
-        )
+        if is_mobile:
+            actions_row = ft.Row(
+                controls=actions,
+                spacing=5,
+                alignment=ft.MainAxisAlignment.CENTER,
+                wrap=True,
+            )
+
+            video_container = ft.Container(
+                content=video,
+                alignment=ft.alignment.center,
+                width=video_width,
+                height=video_height,
+            )
+
+            dialog = ft.AlertDialog(
+                modal=True,
+                title=ft.Text(title, overflow=ft.TextOverflow.ELLIPSIS, max_lines=1, size=14),
+                content=ft.Column(
+                    [
+                        video_container,
+                        actions_row
+                    ],
+                    spacing=5,
+                    alignment=ft.MainAxisAlignment.CENTER,
+                    horizontal_alignment=ft.CrossAxisAlignment.CENTER,
+                    tight=True,
+                ),
+                actions=[],
+                inset_padding=ft.padding.only(left=10, right=10, top=5, bottom=5),
+                content_padding=ft.padding.only(left=5, right=5, top=5, bottom=0),
+            )
+        else:
+            dialog = ft.AlertDialog(
+                modal=True,
+                title=ft.Text(title),
+                content=video,
+                actions=actions,
+                actions_alignment=ft.MainAxisAlignment.END
+            )
         dialog.open = True
         self.app.dialog_area.content = dialog
         self.app.dialog_area.update()

app/ui/layout/__init__.py

@@ -0,0 +1 @@
+ 

app/ui/layout/responsive_layout.py

@@ -0,0 +1,52 @@
+import flet as ft
+
+from ...app_manager import App
+from ...utils.logger import logger
+
+
+def is_mobile_device(page: ft.Page) -> bool:
+    return page.width < 768
+
+
+def setup_responsive_layout(page: ft.Page, app: App) -> None:
+    if is_mobile_device(page):
+        logger.info("mobile device detected, enable mobile layout")
+        app.is_mobile = True
+        app.left_navigation_menu.width = 0
+        app.left_navigation_menu.visible = False
+        
+        app.bottom_navigation = ft.NavigationBar(
+            destinations=[
+                ft.NavigationBarDestination(icon=ft.Icons.HOME, label="首页"),
+                ft.NavigationBarDestination(icon=ft.Icons.SETTINGS, label="设置"),
+                ft.NavigationBarDestination(icon=ft.Icons.DRIVE_FILE_MOVE, label="存储"),
+                ft.NavigationBarDestination(icon=ft.Icons.INFO, label="关于"),
+            ],
+            on_change=lambda e: page.go(f"/{['home', 'settings', 'storage', 'about'][e.control.selected_index]}"),
+        )
+        
+        app.content_area.expand = True
+        
+        app.complete_page = ft.Column(
+            expand=True,
+            spacing=0,
+            controls=[
+                app.content_area,
+                app.bottom_navigation,
+                app.dialog_area,
+                app.snack_bar_area
+            ]
+        )
+    else:
+        logger.info("desktop device detected, enable desktop layout")
+        app.is_mobile = False
+        app.complete_page = ft.Row(
+            expand=True,
+            controls=[
+                app.left_navigation_menu,
+                ft.VerticalDivider(width=1),
+                app.content_area,
+                app.dialog_area,
+                app.snack_bar_area,
+            ]
+        )