chore: Improved the logo picker dialog.

Skyost · Skyost · commit a469a5c278c3 · 2026-04-27T13:01:30.000+02:00
diff --git a/lib/widgets/dialog/logo_search/sources.dart b/lib/widgets/dialog/logo_search/sources.dart
@@ -2,19 +2,27 @@ import 'dart:async';
 import 'dart:convert';
 import 'dart:io';
 
+import 'package:html/dom.dart' as html;
+import 'package:html/parser.dart' as html_parser;
 import 'package:http/http.dart' as http;
 import 'package:open_authenticator/app.dart';
 
 /// A logo search source.
 mixin Source {
   /// All logo sources.
   static const List<Source> sources = [
+    DirectSource(),
     BrandfetchSource(),
     LogoDevSource(),
     UpLeadSource(),
     WikimediaSource(),
   ];
 
+  /// Headers to use when querying third-party services.
+  static const Map<String, String> defaultHeaders = {
+    HttpHeaders.userAgentHeader: 'OpenAuthenticator logo search (${App.githubRepositoryUrl})',
+  };
+
   /// The source name (to display attributions).
   String get name;
 
@@ -24,7 +32,7 @@ mixin Source {
   /// Check whether the given [imageUrl] is good to display.
   static Future<bool> check(http.Client client, Uri imageUrl) async {
     try {
-      http.Response response = await client.head(imageUrl);
+      http.Response response = await client.head(imageUrl, headers: defaultHeaders);
       return response.statusCode == HttpStatus.ok;
     } catch (_) {
       return false;
@@ -48,6 +56,144 @@ mixin DirectApiSource on Source {
   };
 }
 
+/// Search directly on the target website.
+class DirectSource with Source {
+  /// Creates a new direct source instance.
+  const DirectSource();
+
+  /// The meta image attributes to look for.
+  static const List<String> _kMetaImageAttributes = [
+    'og:logo',
+    'og:image:secure_url',
+    'og:image:url',
+    'og:image',
+    'twitter:image:src',
+    'twitter:image',
+    'image',
+    'thumbnail',
+    'msapplication-tileimage',
+  ];
+
+  /// The link image relations to look for.
+  static const List<String> _kLinkImageRelations = [
+    'apple-touch-icon',
+    'apple-touch-icon-precomposed',
+    'icon',
+    'shortcut icon',
+    'mask-icon',
+  ];
+
+  @override
+  String get name => 'Direct';
+
+  @override
+  Future<List<Uri>> _trySearch(http.Client client, String userKeywords) async {
+    Set<Uri> result = {};
+    for (Uri websiteUrl in _buildWebsiteUrls(userKeywords)) {
+      try {
+        http.Response response = await client.get(websiteUrl, headers: Source.defaultHeaders);
+        if (response.statusCode != HttpStatus.ok || !_isHtml(response)) {
+          continue;
+        }
+        result.addAll(_parseImageUrls(response.body, response.request?.url ?? websiteUrl));
+        if (result.isNotEmpty) {
+          break;
+        }
+      } catch (_) {}
+    }
+    return result.toList();
+  }
+
+  /// Builds the website URLs to try.
+  Iterable<Uri> _buildWebsiteUrls(String keywords) sync* {
+    String trimmed = keywords.trim();
+    if (trimmed.isEmpty) {
+      return;
+    }
+
+    Uri? directUri = Uri.tryParse(trimmed);
+    if (directUri?.hasScheme == true && directUri?.hasAuthority == true) {
+      yield directUri!;
+      return;
+    }
+
+    String hostLikeKeywords = trimmed.replaceFirst(RegExp(r'^www\.', caseSensitive: false), '');
+    if (!hostLikeKeywords.contains(' ') && hostLikeKeywords.contains('.')) {
+      yield Uri.https(hostLikeKeywords, '');
+      yield Uri.https('www.$hostLikeKeywords', '');
+      return;
+    }
+
+    String compactKeywords = trimmed.replaceAll(RegExp(r'\s+'), '');
+    if (compactKeywords.isNotEmpty) {
+      yield Uri.https('$compactKeywords.com', '');
+      yield Uri.https('www.$compactKeywords.com', '');
+    }
+  }
+
+  /// Extracts image URLs from the HTML meta and link tags.
+  Iterable<Uri> _parseImageUrls(String responseBody, Uri websiteUrl) {
+    Map<String, Uri> metaImages = {};
+    Map<String, Uri> linkImages = {};
+    html.Document document = html_parser.parse(responseBody);
+
+    List<html.Element> elements = document.querySelectorAll('meta, link');
+    for (html.Element element in elements) {
+      String? content = element.attributes['content'];
+      String? href = element.attributes['href'];
+
+      for (String key in [
+        element.attributes['property'],
+        element.attributes['name'],
+        element.attributes['itemprop'],
+      ].nonNulls) {
+        if (content == null) {
+          continue;
+        }
+        Uri? imageUrl = _buildImageUrl(content, websiteUrl);
+        if (imageUrl != null) {
+          metaImages.putIfAbsent(key.toLowerCase(), () => imageUrl);
+        }
+      }
+
+      if (href != null) {
+        Set<String> relations = (element.attributes['rel'] ?? '').toLowerCase().split(RegExp(r'\s+')).where((relation) => relation.isNotEmpty).toSet();
+        for (String relation in _kLinkImageRelations) {
+          if (relations.containsAll(relation.split(' '))) {
+            Uri? imageUrl = _buildImageUrl(href, websiteUrl);
+            if (imageUrl != null) {
+              linkImages.putIfAbsent(relation, () => imageUrl);
+            }
+          }
+        }
+      }
+    }
+
+    return [
+      for (String attribute in _kMetaImageAttributes)
+        if (metaImages[attribute] != null) metaImages[attribute]!,
+      for (String relation in _kLinkImageRelations)
+        if (linkImages[relation] != null) linkImages[relation]!,
+    ];
+  }
+
+  /// Checks whether the response is HTML.
+  bool _isHtml(http.Response response) {
+    String contentType = response.headers[HttpHeaders.contentTypeHeader] ?? '';
+    return contentType.isEmpty || contentType.toLowerCase().contains('text/html');
+  }
+
+  /// Builds the image URL.
+  Uri? _buildImageUrl(String imageUrl, Uri websiteUrl) {
+    try {
+      Uri uri = websiteUrl.resolve(imageUrl.trim());
+      return uri.isScheme('http') || uri.isScheme('https') ? uri : null;
+    } catch (_) {
+      return null;
+    }
+  }
+}
+
 /// Search using Wikimedia.
 class WikimediaSource with Source {
   /// Creates a new Wikimedia source instance.
@@ -60,7 +206,7 @@ class WikimediaSource with Source {
   Future<List<Uri>> _trySearch(http.Client client, String userKeywords) async {
     List<String> result = [];
     try {
-      http.Response response = await client.get(buildEndpointUrl(userKeywords));
+      http.Response response = await client.get(buildEndpointUrl(userKeywords), headers: Source.defaultHeaders);
       Map<String, dynamic> json = jsonDecode(response.body);
       dynamic query = json['query'];
       if (query is Map<String, dynamic>) {
diff --git a/lib/widgets/dialog/logo_search/widget.dart b/lib/widgets/dialog/logo_search/widget.dart
@@ -58,6 +58,9 @@ class _LogoSearchState extends State<LogoSearch> {
   /// All searches triggered by the user.
   final Map<String, List<String>> searches = {};
 
+  /// The images that failed to render.
+  final Set<String> imageErrors = {};
+
   @override
   void initState() {
     super.initState();
@@ -68,7 +71,7 @@ class _LogoSearchState extends State<LogoSearch> {
 
   @override
   Widget build(BuildContext context) => Column(
-    mainAxisSize: MainAxisSize.min,
+    mainAxisSize: .min,
     children: [
       FTextFormField(
         control: .managed(controller: searchKeywordsController),
@@ -90,17 +93,22 @@ class _LogoSearchState extends State<LogoSearch> {
         child: Padding(
           padding: const EdgeInsets.only(top: kSpace, bottom: kBigSpace),
           child: Text(
-            translations.logoSearch.credits(sources: Source.sources.map((source) => source.name).join(' / ')),
+            translations.logoSearch.credits(
+              sources: [
+                for (Source source in Source.sources)
+                  if (source is! DirectSource) source.name,
+              ].join(' / '),
+            ),
             style: context.theme.typography.xs.copyWith(
               color: context.theme.colors.foreground.withValues(alpha: 0.75),
             ),
-            textAlign: TextAlign.right,
+            textAlign: .right,
           ),
         ),
       ),
       if (searches[filteredSearchKeywords]?.isNotEmpty == true)
         Wrap(
-          alignment: WrapAlignment.center,
+          alignment: .center,
           spacing: widget.imageWidth / 10,
           runSpacing: widget.imageWidth / 10,
           children: [
@@ -140,7 +148,7 @@ class _LogoSearchState extends State<LogoSearch> {
     List<Uri> logos = await Source.sources.search(client, keywords);
     setState(() => searches.putIfAbsent(keywords, () => []));
     for (Uri logo in logos) {
-      if (await Source.check(client, logo) && mounted && searches.containsKey(keywords)) {
+      if (await Source.check(client, logo) && mounted && searches.containsKey(keywords) && !imageErrors.contains(logo.toString())) {
         setState(() => searches[keywords]?.add(logo.toString()));
       }
       if (!searches.containsKey(keywords)) {
@@ -152,16 +160,36 @@ class _LogoSearchState extends State<LogoSearch> {
     }
   }
 
+  /// Removes an image from the displayed results after a rendering error.
+  void removeImageError(String imageUrl) {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted || !imageErrors.add(imageUrl)) {
+        return;
+      }
+      setState(() {
+        searches.updateAll((_, logos) => logos..remove(imageUrl));
+        searches.removeWhere((_, logos) => logos.isEmpty);
+      });
+    });
+  }
+
   /// Builds the image widget that corresponds to the [imageUrl].
   Widget buildImageWidget(String imageUrl) {
+    if (imageErrors.contains(imageUrl)) {
+      return const SizedBox.shrink();
+    }
+
     Widget image = UnconstrainedBox(
       child: SizedBox(
         width: widget.imageWidth,
         child: ResolvedSmartImage(
           source: imageUrl,
           height: widget.imageWidth,
           width: widget.imageWidth,
-          errorBuilder: (context) => const SizedBox.shrink(),
+          errorBuilder: (context) {
+            removeImageError(imageUrl);
+            return const SizedBox.shrink();
+          },
         ),
       ),
     );
@@ -174,7 +202,7 @@ class _LogoSearchState extends State<LogoSearch> {
             left: 0,
             child: Text(
               imageUrl,
-              style: const TextStyle(color: Colors.red, fontSize: 6),
+              style: TextStyle(color: context.theme.colors.destructive, fontSize: 6),
               textAlign: TextAlign.left,
             ),
           ),
