TW-826: Update UI for media, links page

linagora · Oct 23, 2023 · 300042b · 300042b
1 parent db22120
commit 300042b
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 73 deletions.
diff --git a/lib/pages/chat_details/chat_details.dart b/lib/pages/chat_details/chat_details.dart
@@ -125,7 +125,7 @@ class ChatDetailsController extends State<ChatDetails>
       searchFunc: (event) => event.isContainsLink,
       limit: _linksFetchLimit,
     );
-    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
       nestedScrollViewState.currentState!.innerController.addListener(
         _listenerInnerController,
       );
@@ -143,8 +143,10 @@ class ChatDetailsController extends State<ChatDetails>
   }
 
   void _listenerInnerController() {
-    Logs().d("ChatDetails::currentTab - ${tabController!.index}");
-    if (nestedScrollViewState.currentState!.innerController.shouldLoadMore) {
+    Logs().d("ChatDetails::currentTab - ${tabController?.index}");
+    if (nestedScrollViewState.currentState?.innerController.shouldLoadMore ==
+            true &&
+        tabController?.index != null) {
       switch (chatDetailsPageView[tabController!.index]) {
         case ChatDetailsPage.media:
           mediaListController?.loadMore();
@@ -532,7 +534,8 @@ class ChatDetailsController extends State<ChatDetails>
                   key: const PageStorageKey("members"),
                   members: members ?? [],
                   actualMembersCount: actualMembersCount,
-                  canRequestMoreMembers: members!.length < actualMembersCount,
+                  canRequestMoreMembers:
+                      (members?.length ?? 0) < actualMembersCount,
                   requestMoreMembersAction: requestMoreMembersAction,
                   openDialogInvite: openDialogInvite,
                   isMobileAndTablet: isMobileAndTablet,

diff --git a/lib/pages/chat_details/chat_details_page_view/links/chat_details_links_page.dart b/lib/pages/chat_details/chat_details_page_view/links/chat_details_links_page.dart
@@ -1,28 +1,24 @@
 import 'package:fluffychat/app_state/success.dart';
 import 'package:fluffychat/domain/app_state/room/timeline_search_event_state.dart';
-import 'package:fluffychat/utils/matrix_sdk_extensions/event_extension.dart';
 import 'package:fluffychat/pages/chat_details/chat_details_page_view/links/chat_details_links_item.dart';
+import 'package:fluffychat/presentation/same_type_events_builder/same_type_events_builder.dart';
 import 'package:flutter/material.dart';
-import 'package:matrix/matrix.dart';
 
-import 'package:fluffychat/pages/chat_details/chat_details_page_view/same_type_events_list_controller.dart';
+import 'package:fluffychat/presentation/same_type_events_builder/same_type_events_controller.dart';
 
 class ChatDetailsLinksPage extends StatelessWidget {
-  static const _linksFetchLimit = 20;
-  final Future<Timeline> Function() getTimeline;
+  final SameTypeEventsBuilderController controller;
 
   const ChatDetailsLinksPage({
     Key? key,
-    required this.getTimeline,
+    required this.controller,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return SameTypeEventsListBuilder(
-      getTimeline: getTimeline,
-      searchFunc: (event) => event.isContainsLink,
-      limit: _linksFetchLimit,
-      builder: (context, eventsState) {
+    return SameTypeEventsBuilder(
+      controller: controller,
+      builder: (context, eventsState, _) {
         final events = eventsState
                 .getSuccessOrNull<TimelineSearchEventSuccess>()
                 ?.events ??

diff --git a/lib/pages/chat_details/chat_details_page_view/media/chat_details_media_page.dart b/lib/pages/chat_details/chat_details_page_view/media/chat_details_media_page.dart
@@ -2,41 +2,40 @@ import 'package:fluffychat/app_state/success.dart';
 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/domain/app_state/room/timeline_search_event_state.dart';
 import 'package:fluffychat/pages/chat/events/event_video_player.dart';
-import 'package:fluffychat/pages/chat_details/chat_details_page_view/same_type_events_list_controller.dart';
+import 'package:fluffychat/pages/chat_details/chat_details_page_view/media/chat_details_media_style.dart';
+import 'package:fluffychat/presentation/same_type_events_builder/same_type_events_builder.dart';
+import 'package:fluffychat/presentation/same_type_events_builder/same_type_events_controller.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/event_extension.dart';
 import 'package:fluffychat/widgets/mxc_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_blurhash/flutter_blurhash.dart';
 import 'package:matrix/matrix.dart';
 
 class ChatDetailsMediaPage extends StatelessWidget {
-  static const _mediaFetchLimit = 20;
-  final Future<Timeline> Function() getTimeline;
+  final SameTypeEventsBuilderController controller;
   final Map<EventId, ImageData>? cacheMap;
   final DownloadVideoEventCallback handleDownloadVideoEvent;
 
   const ChatDetailsMediaPage({
     Key? key,
-    required this.getTimeline,
+    required this.controller,
     required this.handleDownloadVideoEvent,
     this.cacheMap,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return SameTypeEventsListBuilder(
-      getTimeline: getTimeline,
-      searchFunc: (event) => event.isVideoOrImage,
-      limit: _mediaFetchLimit,
-      builder: (context, eventsState) {
+    return SameTypeEventsBuilder(
+      controller: controller,
+      builder: (context, eventsState, _) {
         final events = eventsState
                 .getSuccessOrNull<TimelineSearchEventSuccess>()
                 ?.events ??
             [];
         Logs().v("ChatDetailsMediaPage::events: ${events.length}");
         return SliverGrid.builder(
-          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-            crossAxisCount: 3,
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: ChatDetailsMediaStyle.crossAxisCount(context),
           ),
           itemCount: events.length,
           itemBuilder: (context, index) =>
@@ -59,6 +58,7 @@ class ChatDetailsMediaPage extends StatelessWidget {
 class _ImageItem extends StatelessWidget {
   final Event event;
   final Map<EventId, ImageData>? cacheMap;
+
   const _ImageItem({
     required this.event,
     this.cacheMap,
@@ -85,6 +85,7 @@ class _VideoItem extends StatelessWidget {
   final Event event;
   final DownloadVideoEventCallback handleDownloadVideoEvent;
   final Map<EventId, ImageData>? thumbnailCacheMap;
+
   const _VideoItem({
     required this.event,
     required this.handleDownloadVideoEvent,

diff --git a/lib/pages/chat_details/chat_details_page_view/media/chat_details_media_style.dart b/lib/pages/chat_details/chat_details_page_view/media/chat_details_media_style.dart
@@ -1,11 +1,23 @@
+import 'package:fluffychat/di/global/get_it_initializer.dart';
+import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:flutter/material.dart';
 
 class ChatDetailsMediaStyle {
+  static ResponsiveUtils responsive = getIt.get<ResponsiveUtils>();
+
   static const durationPadding = EdgeInsets.symmetric(
     horizontal: 4,
     vertical: 2,
   );
 
+  static int crossAxisCount(BuildContext context) {
+    if (responsive.isWebDesktop(context)) {
+      return 5;
+    } else {
+      return 3;
+    }
+  }
+
   static Decoration durationBoxDecoration(BuildContext context) =>
       ShapeDecoration(
         color: Theme.of(context).colorScheme.onBackground.withOpacity(0.5),

diff --git a/lib/pages/chat_details/chat_details_page_view/same_type_events_list_builder_view.dart b/lib/pages/chat_details/chat_details_page_view/same_type_events_list_builder_view.dart
diff --git a/...uilder/same_type_events_list_builder.dart → ...nts_builder/same_type_events_builder.dart b/...uilder/same_type_events_list_builder.dart → ...nts_builder/same_type_events_builder.dart
@@ -39,7 +39,7 @@ class SameTypeEventsBuilder extends StatelessWidget {
             child:
                 loadingMore ? const CenterLoadingIndicator() : const SizedBox(),
           ),
-        )
+        ),
       ],
     );
   }

diff --git a/pubspec.lock b/pubspec.lock
@@ -934,7 +934,7 @@ packages:
     description:
       path: "."
       ref: master
-      resolved-ref: "eb0ac6c32cc3bdf33810c2f1440aa2e2e28418ee"
+      resolved-ref: eb0ac6c32cc3bdf33810c2f1440aa2e2e28418ee
       url: "https://github.com/linagora/flutter_matrix_html.git"
     source: git
     version: "1.2.0"
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,7 +39,7 @@ class SameTypeEventsBuilder extends StatelessWidget { @@
                 child:
                     loadingMore ? const CenterLoadingIndicator() : const SizedBox(),
               ),
-            )
+            ),
           ],
         );
       }
@@ Expand Down @@