2023-12-21 12:55:16 +00:00
|
|
|
import "dart:async";
|
|
|
|
|
2022-07-21 05:29:57 +00:00
|
|
|
import 'package:flutter/material.dart';
|
2023-12-23 14:18:26 +00:00
|
|
|
import "package:flutter_animate/flutter_animate.dart";
|
2023-12-21 12:55:16 +00:00
|
|
|
import "package:logging/logging.dart";
|
2023-12-20 12:05:06 +00:00
|
|
|
import "package:photos/core/event_bus.dart";
|
|
|
|
import "package:photos/events/clear_and_unfocus_search_bar_event.dart";
|
2023-12-26 15:58:42 +00:00
|
|
|
import "package:photos/generated/l10n.dart";
|
2023-12-21 12:55:16 +00:00
|
|
|
import "package:photos/models/search/album_search_result.dart";
|
|
|
|
import "package:photos/models/search/generic_search_result.dart";
|
2023-12-26 05:56:07 +00:00
|
|
|
import "package:photos/models/search/index_of_indexed_stack.dart";
|
2022-09-14 08:40:35 +00:00
|
|
|
import 'package:photos/models/search/search_result.dart';
|
2023-07-06 07:59:31 +00:00
|
|
|
import "package:photos/services/collections_service.dart";
|
2023-12-26 15:58:42 +00:00
|
|
|
import "package:photos/theme/ente_theme.dart";
|
|
|
|
import "package:photos/ui/common/loading_widget.dart";
|
2023-12-21 12:55:16 +00:00
|
|
|
import "package:photos/ui/viewer/gallery/collection_page.dart";
|
|
|
|
import "package:photos/ui/viewer/search/result/search_result_widget.dart";
|
2023-12-23 15:56:29 +00:00
|
|
|
import "package:photos/ui/viewer/search/search_widget.dart";
|
2023-12-21 12:55:16 +00:00
|
|
|
import "package:photos/utils/navigation_util.dart";
|
2022-07-19 11:52:16 +00:00
|
|
|
|
2023-12-23 14:11:20 +00:00
|
|
|
///Not using StreamBuilder in this widget for rebuilding on every new event as
|
|
|
|
///StreamBuilder is not lossless. It misses some events if the stream fires too
|
|
|
|
///fast. Instead, we usi a queue to store the events and then generate the
|
|
|
|
///widgets from the queue at regular intervals.
|
2023-12-22 13:15:13 +00:00
|
|
|
class SearchSuggestionsWidget extends StatefulWidget {
|
2023-12-23 15:56:29 +00:00
|
|
|
const SearchSuggestionsWidget({
|
2022-12-30 12:10:17 +00:00
|
|
|
Key? key,
|
2022-07-27 11:51:43 +00:00
|
|
|
}) : super(key: key);
|
2022-07-19 11:52:16 +00:00
|
|
|
|
2023-12-22 13:15:13 +00:00
|
|
|
@override
|
|
|
|
State<SearchSuggestionsWidget> createState() =>
|
|
|
|
_SearchSuggestionsWidgetState();
|
|
|
|
}
|
|
|
|
|
|
|
|
class _SearchSuggestionsWidgetState extends State<SearchSuggestionsWidget> {
|
2023-12-23 15:56:29 +00:00
|
|
|
Stream<List<SearchResult>>? resultsStream;
|
2023-12-23 16:48:40 +00:00
|
|
|
final queueOfSearchResults = <List<SearchResult>>[];
|
2023-12-23 14:08:21 +00:00
|
|
|
var searchResultWidgets = <Widget>[];
|
|
|
|
StreamSubscription<List<SearchResult>>? subscription;
|
|
|
|
Timer? timer;
|
2023-12-23 15:56:29 +00:00
|
|
|
|
2023-12-26 06:27:57 +00:00
|
|
|
///This is the interval at which the queue is checked for new events and
|
|
|
|
///the search result widgets are generated from the queue.
|
|
|
|
static const _surfaceNewResultsInterval = 50;
|
|
|
|
|
2023-12-22 13:15:13 +00:00
|
|
|
@override
|
2023-12-23 15:56:29 +00:00
|
|
|
void initState() {
|
|
|
|
super.initState();
|
|
|
|
SearchWidgetState.searchResultsStreamNotifier.addListener(() {
|
2023-12-26 09:09:21 +00:00
|
|
|
IndexOfStackNotifier().searchState = SearchState.searching;
|
2023-12-23 16:48:40 +00:00
|
|
|
final resultsStream = SearchWidgetState.searchResultsStreamNotifier.value;
|
|
|
|
|
2023-12-23 15:56:29 +00:00
|
|
|
searchResultWidgets.clear();
|
|
|
|
releaseResources();
|
2023-12-23 16:48:40 +00:00
|
|
|
|
2023-12-26 05:56:07 +00:00
|
|
|
subscription = resultsStream!.listen(
|
|
|
|
(searchResults) {
|
|
|
|
//Currently, we add searchResults even if the list is empty. So we are adding
|
|
|
|
//empty list to the queue, which will trigger rebuilds with no change in UI
|
|
|
|
//(see [generateResultWidgetsInIntervalsFromQueue]'s setState()).
|
|
|
|
//This is needed to clear the search results in this widget when the
|
|
|
|
//search bar is cleared, and the event fired by the stream will be an
|
|
|
|
//empty list. Can optimize rebuilds if there are performance issues in future.
|
|
|
|
if (searchResults.isNotEmpty) {
|
2023-12-26 09:09:21 +00:00
|
|
|
IndexOfStackNotifier().searchState = SearchState.notEmpty;
|
2023-12-26 05:56:07 +00:00
|
|
|
}
|
|
|
|
queueOfSearchResults.add(searchResults);
|
|
|
|
},
|
|
|
|
onDone: () {
|
2023-12-26 06:27:57 +00:00
|
|
|
Future.delayed(
|
|
|
|
const Duration(milliseconds: _surfaceNewResultsInterval + 20),
|
|
|
|
() {
|
|
|
|
if (searchResultWidgets.isEmpty) {
|
2023-12-26 09:09:21 +00:00
|
|
|
IndexOfStackNotifier().searchState = SearchState.empty;
|
2023-12-26 06:27:57 +00:00
|
|
|
}
|
|
|
|
});
|
2023-12-26 12:54:38 +00:00
|
|
|
SearchWidgetState.isLoading.value = false;
|
2023-12-26 05:56:07 +00:00
|
|
|
},
|
|
|
|
);
|
2023-12-23 16:48:40 +00:00
|
|
|
|
2023-12-23 15:56:29 +00:00
|
|
|
generateResultWidgetsInIntervalsFromQueue();
|
|
|
|
});
|
2023-12-22 13:15:13 +00:00
|
|
|
}
|
|
|
|
|
2023-12-23 14:08:21 +00:00
|
|
|
void releaseResources() {
|
|
|
|
subscription?.cancel();
|
|
|
|
timer?.cancel();
|
|
|
|
}
|
|
|
|
|
|
|
|
///This method generates searchResultsWidgets from the queueOfEvents by checking
|
2023-12-26 16:07:16 +00:00
|
|
|
///every [_surfaceNewResultsInterval] if the queue is empty or not. If the
|
|
|
|
///queue is not empty, it generates the widgets and clears the queue and
|
|
|
|
///updates the UI.
|
2023-12-23 14:08:21 +00:00
|
|
|
void generateResultWidgetsInIntervalsFromQueue() {
|
2023-12-26 06:27:57 +00:00
|
|
|
timer = Timer.periodic(
|
|
|
|
const Duration(milliseconds: _surfaceNewResultsInterval), (timer) {
|
2023-12-23 16:48:40 +00:00
|
|
|
if (queueOfSearchResults.isNotEmpty) {
|
|
|
|
for (List<SearchResult> event in queueOfSearchResults) {
|
2023-12-23 14:08:21 +00:00
|
|
|
for (SearchResult result in event) {
|
|
|
|
searchResultWidgets.add(
|
2023-12-23 14:18:26 +00:00
|
|
|
SearchResultsWidgetGenerator(result).animate().fadeIn(
|
|
|
|
duration: const Duration(milliseconds: 80),
|
|
|
|
curve: Curves.easeIn,
|
|
|
|
),
|
2023-12-23 14:08:21 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2023-12-23 16:48:40 +00:00
|
|
|
queueOfSearchResults.clear();
|
2023-12-23 14:08:21 +00:00
|
|
|
setState(() {});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
@override
|
|
|
|
void dispose() {
|
|
|
|
releaseResources();
|
|
|
|
super.dispose();
|
|
|
|
}
|
|
|
|
|
2022-07-19 11:52:16 +00:00
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
2023-12-26 15:58:42 +00:00
|
|
|
String title;
|
|
|
|
final resultsCount = searchResultWidgets.length;
|
|
|
|
title = S.of(context).searchResultCount(resultsCount);
|
2023-12-20 12:05:06 +00:00
|
|
|
return Scaffold(
|
|
|
|
appBar: AppBar(
|
|
|
|
leading: BackButton(
|
|
|
|
onPressed: () {
|
|
|
|
Bus.instance.fire(ClearAndUnfocusSearchBar());
|
|
|
|
},
|
|
|
|
),
|
|
|
|
),
|
|
|
|
body: Padding(
|
|
|
|
padding: const EdgeInsets.fromLTRB(12, 0, 12, 0),
|
2023-12-23 14:08:21 +00:00
|
|
|
child: Column(
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
|
children: [
|
2023-12-26 16:25:38 +00:00
|
|
|
SizedBox(
|
|
|
|
height: 44,
|
2023-12-26 15:58:42 +00:00
|
|
|
child: SearchWidgetState.isLoading.value
|
|
|
|
? EnteLoadingWidget(
|
|
|
|
size: 14,
|
|
|
|
padding: 4,
|
|
|
|
color: getEnteColorScheme(context).strokeMuted,
|
2023-12-26 16:25:38 +00:00
|
|
|
alignment: Alignment.topLeft,
|
2023-12-26 15:58:42 +00:00
|
|
|
)
|
|
|
|
: Text(
|
|
|
|
title,
|
|
|
|
style: getEnteTextTheme(context).largeBold,
|
|
|
|
).animate().fadeIn(
|
|
|
|
duration: const Duration(milliseconds: 60),
|
|
|
|
curve: Curves.easeIn,
|
|
|
|
),
|
|
|
|
),
|
2023-12-23 14:08:21 +00:00
|
|
|
Expanded(
|
|
|
|
child: Padding(
|
|
|
|
padding: const EdgeInsets.symmetric(horizontal: 4),
|
|
|
|
child: ListView.separated(
|
|
|
|
itemBuilder: (context, index) {
|
|
|
|
return searchResultWidgets[index];
|
|
|
|
},
|
|
|
|
separatorBuilder: (context, index) {
|
|
|
|
return const SizedBox(height: 12);
|
|
|
|
},
|
|
|
|
itemCount: searchResultWidgets.length,
|
|
|
|
physics: const BouncingScrollPhysics(),
|
|
|
|
padding: EdgeInsets.only(
|
|
|
|
bottom: (MediaQuery.sizeOf(context).height / 2) + 50,
|
2023-12-20 12:05:06 +00:00
|
|
|
),
|
2023-12-23 14:08:21 +00:00
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
],
|
2023-12-20 12:05:06 +00:00
|
|
|
),
|
2022-07-21 05:29:57 +00:00
|
|
|
),
|
|
|
|
);
|
2022-07-20 10:17:35 +00:00
|
|
|
}
|
|
|
|
}
|
2023-12-21 12:55:16 +00:00
|
|
|
|
|
|
|
class SearchResultsWidgetGenerator extends StatelessWidget {
|
|
|
|
final SearchResult result;
|
|
|
|
const SearchResultsWidgetGenerator(this.result, {super.key});
|
|
|
|
|
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
if (result is AlbumSearchResult) {
|
|
|
|
final AlbumSearchResult albumSearchResult = result as AlbumSearchResult;
|
|
|
|
return SearchResultWidget(
|
|
|
|
result,
|
|
|
|
resultCount: CollectionsService.instance.getFileCount(
|
|
|
|
albumSearchResult.collectionWithThumbnail.collection,
|
|
|
|
),
|
|
|
|
onResultTap: () => routeToPage(
|
|
|
|
context,
|
|
|
|
CollectionPage(
|
|
|
|
albumSearchResult.collectionWithThumbnail,
|
|
|
|
tagPrefix: result.heroTag(),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
} else if (result is GenericSearchResult) {
|
|
|
|
return SearchResultWidget(
|
|
|
|
result,
|
|
|
|
onResultTap: (result as GenericSearchResult).onResultTap != null
|
|
|
|
? () => (result as GenericSearchResult).onResultTap!(context)
|
|
|
|
: null,
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
Logger('SearchResultsWidgetGenerator').info("Invalid/Unsupported value");
|
|
|
|
return const SizedBox.shrink();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|