feat: Implement export cover art wall

Author: Losses

assets/watermark.png

@@ -16,6 +16,18 @@ import '../mix/utils/select_input_controller.dart';
 import '../mix/widgets/select_buttons_section.dart';
 import '../mix/widgets/select_input_section.dart';
 
+Size parseSize(String input) {
+  List<String> parts = input.split(' ');
+
+  int widthRatio = int.parse(parts[0]);
+  int heightRatio = int.parse(parts[1]);
+
+  int width = 1920;
+  int height = (1920 * heightRatio / widthRatio).round();
+
+  return Size(width.toDouble(), height.toDouble());
+}
+
 List<SelectItem> sizeItems(BuildContext context) => [
       SelectItem(
         value: '16 9',
@@ -153,8 +165,18 @@ class ExportCoverWallDialogState extends State<ExportCoverWallDialog> {
                           isLoading = true;
                         });
 
-                        final image =
-                            await renderCoverWall(widget.type, widget.id);
+                        final image = await renderCoverWall(
+                          widget.type,
+                          widget.id,
+                          parseSize(ratioController.selectedValue ?? '16 9'),
+                          backgroundController.selectedValue == 'light'
+                              ? Colors.white
+                              : Colors.black,
+                          frameController.selectedValue == 'enable',
+                          backgroundController.selectedValue == 'light'
+                              ? Colors.black
+                              : Colors.white,
+                        );
 
                         final FileSaveLocation? result = await getSaveLocation(
                           suggestedName: 'cover_wall.png',

lib/utils/dialogs/export_cover_wall/export_cover_wall_dialog.dart

@@ -1,5 +1,6 @@
 import 'dart:ui' as ui;
 
+import 'package:flutter/services.dart';
 import 'package:fluent_ui/fluent_ui.dart';
 import 'package:rune/utils/query_list.dart';
 
@@ -13,16 +14,30 @@ import '../../../build_query.dart';
 import '../../../load_and_resize_image.dart';
 import '../../../api/query_mix_tracks.dart';
 
+Future<ui.Image> loadImageFromAsset(String assetPath) async {
+  final ByteData data = await rootBundle.load(assetPath);
+  final Uint8List bytes = data.buffer.asUint8List();
+  final codec = await ui.instantiateImageCodec(bytes);
+  final frame = await codec.getNextFrame();
+  return frame.image;
+}
+
 Future<ui.Image> renderCoverWall(
   CollectionType type,
   int id,
+  Size size,
+  Color background,
+  bool frame,
+  Color watermarkColor,
 ) async {
-  const sizeDefinition = BoxConstraints(maxWidth: 1920, maxHeight: 1080);
+  final sizeDefinition =
+      BoxConstraints(maxWidth: size.width, maxHeight: size.height);
   final gridSize = calculateCoverWallGridSize(sizeDefinition).ceil();
   const gap = 4;
 
   ui.PictureRecorder recorder = ui.PictureRecorder();
   ui.Canvas canvas = ui.Canvas(recorder);
+
   final queries = await buildQuery(type, id);
   final newItems = await queryMixTracks(
     QueryList([...queries, ('filter::with_cover_art', 'true')]),
@@ -48,16 +63,73 @@ Future<ui.Image> renderCoverWall(
     ),
   );
 
+  final backgroundPaint = Paint()
+    ..color = background
+    ..style = PaintingStyle.fill;
+
+  canvas.drawRect(
+    Rect.fromLTWH(0, 0, size.width, size.height),
+    backgroundPaint,
+  );
+
   final painter = CoverWallBackgroundPainter(
     grid: grid,
     gridSize: gridSize,
     gap: gap,
     images: images,
   );
 
-  final size = ui.Size(1920, 1080);
   painter.paint(canvas, size);
 
+  if (frame) {
+    const strokeSize = 16.0;
+    const bottomSize = 100.0;
+
+    final borderPaint = Paint()
+      ..color = background
+      ..style = PaintingStyle.stroke;
+
+    borderPaint.strokeWidth = strokeSize;
+
+    final path = Path();
+
+    path.moveTo(0, strokeSize / 2);
+    path.lineTo(size.width, strokeSize / 2);
+    canvas.drawPath(path, borderPaint);
+
+    path.reset();
+    path.moveTo(size.width - strokeSize / 2, strokeSize);
+    path.lineTo(size.width - strokeSize / 2, size.height - bottomSize / 2);
+    canvas.drawPath(path, borderPaint);
+
+    path.reset();
+    path.moveTo(strokeSize / 2, strokeSize);
+    path.lineTo(strokeSize / 2, size.height - bottomSize / 2);
+    canvas.drawPath(path, borderPaint);
+
+    borderPaint.strokeWidth = bottomSize;
+
+    path.reset();
+    path.moveTo(0, size.height - bottomSize / 2);
+    path.lineTo(size.width, size.height - bottomSize / 2);
+    canvas.drawPath(path, borderPaint);
+
+    final watermarkPaint = Paint()
+      ..colorFilter = ColorFilter.mode(
+        watermarkColor,
+        BlendMode.srcATop,
+      );
+
+    final position = Offset(
+      0,
+      (size.height - 100),
+    );
+
+    final watermark = await loadImageFromAsset('assets/watermark.png');
+
+    canvas.drawImage(watermark, position, watermarkPaint);
+  }
+
   return recorder
       .endRecording()
       .toImage(size.width.floor(), size.height.floor());

lib/utils/dialogs/export_cover_wall/utils/render_cover_wall.dart

@@ -121,6 +121,7 @@ flutter:
     - assets/mac-tray.svg
     - assets/tray_icon_light.ico
     - assets/tray_icon_dark.ico
+    - assets/watermark.png
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware
   # For details regarding adding assets from package dependencies, see