Initial commit

lib/pages/chat_search/chat_search_images_tab.dart

@@ -0,0 +1,129 @@
+// SPDX-FileCopyrightText: 2019-Present Christian Kußowski
+// SPDX-FileCopyrightText: 2019-Present Contributors to FluffyChat
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import 'package:tatchat/config/app_config.dart';
+import 'package:tatchat/pages/chat/events/video_player.dart';
+import 'package:tatchat/pages/chat_search/search_footer.dart';
+import 'package:tatchat/pages/image_viewer/image_viewer.dart';
+import 'package:tatchat/widgets/mxc_image.dart';
+import 'package:intl/intl.dart';
+import 'package:material_ui/material_ui.dart';
+import 'package:matrix/matrix.dart';
+
+class ChatSearchImagesTab extends StatelessWidget {
+  final Room room;
+  final List<Event> events;
+  final void Function() onStartSearch;
+  final bool endReached, isLoading;
+  final DateTime? searchedUntil;
+
+  const ChatSearchImagesTab({
+    required this.room,
+    required this.events,
+    required this.onStartSearch,
+    required this.endReached,
+    required this.isLoading,
+    super.key,
+    required this.searchedUntil,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final borderRadius = BorderRadius.circular(AppConfig.borderRadius / 2);
+    final theme = Theme.of(context);
+
+    final eventsByMonth = <DateTime, List<Event>>{};
+    for (final event in events) {
+      final month = DateTime(
+        event.originServerTs.year,
+        event.originServerTs.month,
+      );
+      eventsByMonth[month] ??= [];
+      eventsByMonth[month]!.add(event);
+    }
+    final eventsByMonthList = eventsByMonth.entries.toList();
+
+    const padding = 8.0;
+
+    return ListView.builder(
+      itemCount: eventsByMonth.length + 1,
+      itemBuilder: (context, i) {
+        if (i == eventsByMonth.length) {
+          return SearchFooter(
+            searchedUntil: searchedUntil,
+            endReached: endReached,
+            isLoading: isLoading,
+            onStartSearch: onStartSearch,
+          );
+        }
+
+        final monthEvents = eventsByMonthList[i].value;
+        return Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const SizedBox(height: 4),
+            Row(
+              children: [
+                Expanded(
+                  child: Container(height: 1, color: theme.dividerColor),
+                ),
+                Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: Text(
+                    DateFormat.yMMMM(
+                      Localizations.localeOf(context).languageCode,
+                    ).format(eventsByMonthList[i].key),
+                    style: theme.textTheme.labelSmall,
+                    textAlign: TextAlign.center,
+                  ),
+                ),
+                Expanded(
+                  child: Container(height: 1, color: theme.dividerColor),
+                ),
+              ],
+            ),
+            GridView.count(
+              physics: const NeverScrollableScrollPhysics(),
+              shrinkWrap: true,
+              mainAxisSpacing: padding,
+              crossAxisSpacing: padding,
+              clipBehavior: Clip.hardEdge,
+              padding: const EdgeInsets.all(padding),
+              crossAxisCount: 3,
+              children: monthEvents.map((event) {
+                if (event.messageType == MessageTypes.Video) {
+                  return Material(
+                    clipBehavior: Clip.hardEdge,
+                    borderRadius: borderRadius,
+                    child: EventVideoPlayer(event),
+                  );
+                }
+                return InkWell(
+                  onTap: () => showDialog(
+                    context: context,
+                    builder: (_) => ImageViewer(event, outerContext: context),
+                  ),
+                  borderRadius: borderRadius,
+                  child: Material(
+                    clipBehavior: Clip.hardEdge,
+                    borderRadius: borderRadius,
+                    child: MxcImage(
+                      event: event,
+                      width: 128,
+                      height: 128,
+                      fit: BoxFit.cover,
+                      animated: true,
+                      isThumbnail: true,
+                    ),
+                  ),
+                );
+              }).toList(),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}