Blog home carousel (#2336)

Author: veloce

lib/src/model/account/home_widgets.dart

@@ -5,6 +5,7 @@ enum HomeEditableWidget {
   hello(false),
   perfCards(false),
   ongoingGames(true),
+  blogCarousel(false),
   quickPairing(false),
   featuredTournaments(false),
   recentGames(false);
@@ -16,6 +17,7 @@ enum HomeEditableWidget {
     HomeEditableWidget.quickPairing => l10n.quickPairing,
     HomeEditableWidget.featuredTournaments => l10n.openTournaments,
     HomeEditableWidget.recentGames => l10n.recentGames,
+    HomeEditableWidget.blogCarousel => l10n.blog,
   };
 
   const HomeEditableWidget(this.alwaysEnabled);

lib/src/model/blog/blog.dart

@@ -0,0 +1,36 @@
+import 'package:deep_pick/deep_pick.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:lichess_mobile/src/model/common/id.dart';
+import 'package:lichess_mobile/src/model/user/user.dart';
+import 'package:lichess_mobile/src/utils/json.dart';
+
+part 'blog.freezed.dart';
+
+@freezed
+sealed class BlogPost with _$BlogPost {
+  const factory BlogPost({
+    required StringId id,
+    required String title,
+    required String slug,
+    required DateTime createdAt,
+    required Uri url,
+    LightUser? author,
+    Uri? imageUrl,
+  }) = _BlogPost;
+
+  factory BlogPost.fromServerJson(Map<String, dynamic> json) {
+    return _blogPostFromPick(pick(json).required());
+  }
+}
+
+BlogPost _blogPostFromPick(RequiredPick pick) {
+  return BlogPost(
+    id: pick('id').asStringIdOrThrow(),
+    title: pick('title').asStringOrThrow(),
+    slug: pick('slug').asStringOrThrow(),
+    createdAt: pick('createdAt').asDateTimeFromMillisecondsOrThrow(),
+    url: pick('url').letOrThrow((p) => Uri.parse(p.asStringOrThrow())),
+    imageUrl: pick('image').letOrNull((p) => Uri.tryParse(p.asStringOrThrow())),
+    author: pick('author').asLightUserOrNull(),
+  );
+}

lib/src/model/blog/blog_repository.dart

@@ -0,0 +1,26 @@
+import 'package:fast_immutable_collections/fast_immutable_collections.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:lichess_mobile/src/model/blog/blog.dart';
+import 'package:lichess_mobile/src/network/aggregator.dart';
+import 'package:lichess_mobile/src/network/http.dart';
+
+final blogCarouselProvider = FutureProvider.autoDispose<IList<BlogPost>>((ref) {
+  return ref.read(blogRepositoryProvider).getCarousel();
+}, name: 'BlogCarouselProvider');
+
+final blogRepositoryProvider = Provider<BlogRepository>((ref) {
+  final client = ref.read(lichessClientProvider);
+  final aggregator = ref.read(aggregatorProvider);
+  return BlogRepository(client, aggregator);
+}, name: 'BlogRepositoryProvider');
+
+class BlogRepository {
+  BlogRepository(this.client, this.aggregator);
+
+  final LichessClient client;
+  final Aggregator aggregator;
+
+  Future<IList<BlogPost>> getCarousel() {
+    return client.readJsonList(Uri(path: '/api/blog/carousel'), mapper: BlogPost.fromServerJson);
+  }
+}

lib/src/model/broadcast/broadcast_providers.dart

@@ -3,7 +3,6 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:lichess_mobile/src/model/broadcast/broadcast.dart';
 import 'package:lichess_mobile/src/model/broadcast/broadcast_repository.dart';
 import 'package:lichess_mobile/src/model/common/id.dart';
-import 'package:lichess_mobile/src/utils/image.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 
 part 'broadcast_providers.g.dart';
@@ -95,16 +94,3 @@ Future<BroadcastPlayerWithGameResults> broadcastPlayer(
 Future<IList<BroadcastTeamMatch>> broadcastTeamMatches(Ref ref, BroadcastRoundId roundId) {
   return ref.read(broadcastRepositoryProvider).getTeamMatches(roundId);
 }
-
-@Riverpod(keepAlive: true)
-BroadcastImageWorkerFactory broadcastImageWorkerFactory(Ref ref) {
-  return const BroadcastImageWorkerFactory();
-}
-
-class BroadcastImageWorkerFactory {
-  const BroadcastImageWorkerFactory();
-
-  Future<ImageColorWorker> spawn() {
-    return ImageColorWorker.spawn();
-  }
-}

lib/src/model/common/id.dart

@@ -74,6 +74,23 @@ extension type const StudyChapterId(String value) implements StringId {
 extension type const FideId(int value) implements IntId {}
 
 extension IDPick on Pick {
+  StringId asStringIdOrThrow() {
+    final value = required().value;
+    if (value is String) {
+      return StringId(value);
+    }
+    throw PickException("value $value at $debugParsingExit can't be casted to StringId");
+  }
+
+  StringId? asStringIdOrNull() {
+    if (value == null) return null;
+    try {
+      return asStringIdOrThrow();
+    } catch (_) {
+      return null;
+    }
+  }
+
   UserId asUserIdOrThrow() {
     final value = required().value;
     if (value is String) {

lib/src/utils/image.dart

@@ -4,10 +4,25 @@ import 'dart:typed_data';
 import 'dart:ui' as ui;
 
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:material_color_utilities/material_color_utilities.dart';
 
 typedef ImageColors = ({int primaryContainer, int onPrimaryContainer});
 
+/// A provider that supplies an [ImageWorkerFactory] to spawn image color workers.
+final imageWorkerFactoryProvider = Provider<ImageWorkerFactory>((ref) {
+  return const ImageWorkerFactory();
+}, name: 'ImageWorkerFactoryProvider');
+
+/// A factory that spawns [ImageColorWorker] instances.
+class ImageWorkerFactory {
+  const ImageWorkerFactory();
+
+  Future<ImageColorWorker> spawn() {
+    return ImageColorWorker.spawn();
+  }
+}
+
 /// A worker that quantizes an image and returns a minimal color scheme associated
 /// with the image.
 ///
@@ -143,7 +158,7 @@ class ImageColorWorker {
 // code below taken from: https://github.com/flutter/flutter/blob/74669e4bf1352a5134ad68398a6bf7fac0a6473b/packages/flutter/lib/src/material/color_scheme.dart
 
 Future<QuantizerResult> extractColorsFromImageProvider(ImageProvider imageProvider) async {
-  final ui.Image scaledImage = await _imageProviderToScaled(imageProvider);
+  final ui.Image scaledImage = await imageProviderToScaled(imageProvider);
   final ByteData? imageBytes = await scaledImage.toByteData();
 
   final QuantizerResult quantizerResult = await QuantizerCelebi().quantize(
@@ -165,8 +180,8 @@ int getArgbFromAbgr(int abgr) {
   return (abgr & exceptRMask & exceptBMask) | (b << 16) | r;
 }
 
-// Scale image size down to reduce computation time of color extraction.
-Future<ui.Image> _imageProviderToScaled(ImageProvider imageProvider) async {
+/// Scale image size down to reduce computation time of color extraction.
+Future<ui.Image> imageProviderToScaled(ImageProvider imageProvider) async {
   const double maxDimension = 112.0;
   final ImageStream stream = imageProvider.resolve(
     const ImageConfiguration(size: Size(maxDimension, maxDimension)),

lib/src/view/broadcast/broadcast_carousel.dart

@@ -207,7 +207,7 @@ class _BroadcastCarouselItemState extends State<BroadcastCarouselItem> {
       });
     } else if (widget.worker.closed == false) {
       await precacheImage(provider, context);
-      final ui.Image scaledImage = await _imageProviderToScaled(provider);
+      final ui.Image scaledImage = await imageProviderToScaled(provider);
       final imageBytes = await scaledImage.toByteData();
       final response = await _computeImageColors(widget.worker, provider.url, imageBytes!);
       if (response != null) {
@@ -502,65 +502,9 @@ Future<void> preCacheBroadcastImages(
     if (imageUrl != null) {
       final provider = NetworkImage(imageUrl);
       await precacheImage(provider, context);
-      final ui.Image scaledImage = await _imageProviderToScaled(provider);
+      final ui.Image scaledImage = await imageProviderToScaled(provider);
       final imageBytes = await scaledImage.toByteData();
       await _computeImageColors(worker, imageUrl, imageBytes!);
     }
   }
 }
-
-// Scale image size down to reduce computation time of color extraction.
-Future<ui.Image> _imageProviderToScaled(ImageProvider imageProvider) async {
-  const double maxDimension = 112.0;
-  final ImageStream stream = imageProvider.resolve(
-    const ImageConfiguration(size: Size(maxDimension, maxDimension)),
-  );
-  final Completer<ui.Image> imageCompleter = Completer<ui.Image>();
-  late ImageStreamListener listener;
-  late ui.Image scaledImage;
-  Timer? loadFailureTimeout;
-
-  listener = ImageStreamListener(
-    (ImageInfo info, bool sync) async {
-      loadFailureTimeout?.cancel();
-      stream.removeListener(listener);
-      final ui.Image image = info.image;
-      final int width = image.width;
-      final int height = image.height;
-      double paintWidth = width.toDouble();
-      double paintHeight = height.toDouble();
-      assert(width > 0 && height > 0);
-
-      final bool rescale = width > maxDimension || height > maxDimension;
-      if (rescale) {
-        paintWidth = (width > height) ? maxDimension : (maxDimension / height) * width;
-        paintHeight = (height > width) ? maxDimension : (maxDimension / width) * height;
-      }
-      final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
-      final Canvas canvas = Canvas(pictureRecorder);
-      paintImage(
-        canvas: canvas,
-        rect: Rect.fromLTRB(0, 0, paintWidth, paintHeight),
-        image: image,
-        filterQuality: FilterQuality.none,
-      );
-
-      final ui.Picture picture = pictureRecorder.endRecording();
-      scaledImage = await picture.toImage(paintWidth.toInt(), paintHeight.toInt());
-      imageCompleter.complete(info.image);
-    },
-    onError: (Object exception, StackTrace? stackTrace) {
-      stream.removeListener(listener);
-      throw Exception('Failed to render image: $exception');
-    },
-  );
-
-  loadFailureTimeout = Timer(const Duration(seconds: 5), () {
-    stream.removeListener(listener);
-    imageCompleter.completeError(TimeoutException('Timeout occurred trying to load image'));
-  });
-
-  stream.addListener(listener);
-  await imageCompleter.future;
-  return scaledImage;
-}