Display tracks covers

lib/ui/cover_image.dart

@@ -0,0 +1,35 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:cached_network_image_platform_interface/cached_network_image_platform_interface.dart';
+import 'package:flutter/material.dart';
+import 'package:music_web_player/api.dart';
+import 'package:music_web_player/config.dart';
+
+class CoverImage extends StatelessWidget {
+  final MusicEntry music;
+  final double? width;
+  final double? height;
+  final BoxFit? fit;
+
+  const CoverImage({
+    Key? key,
+    required this.music,
+    this.width,
+    this.height,
+    this.fit,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return CachedNetworkImage(
+      width: width,
+      height: height,
+      imageRenderMethodForWeb: ImageRenderMethodForWeb.HttpGet,
+      imageUrl: music.coverURL,
+      cacheKey: music.coverCacheKey,
+      httpHeaders: {"Token": config.apiToken},
+      useOldImageOnUrlChange: false,
+      placeholder: (c, s) => const Center(child: CircularProgressIndicator()),
+      fit: fit,
+    );
+  }
+}

lib/ui/music_player.dart

@@ -0,0 +1,55 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:music_web_player/api.dart';
+import 'package:music_web_player/ui/cover_image.dart';
+
+class MusicPlayer extends StatefulWidget {
+  final MusicsList musicsList;
+
+  const MusicPlayer({Key? key, required this.musicsList}) : super(key: key);
+
+  @override
+  State<MusicPlayer> createState() => _MusicPlayerState();
+}
+
+class _MusicPlayerState extends State<MusicPlayer> {
+  final rng = Random();
+
+  final List<MusicEntry> stack = [];
+  int currMusicPos = 0;
+
+  MusicEntry get currMusic {
+    if (currMusicPos < 0) currMusicPos = 0;
+
+    // Automatically choose next music if required
+    if (currMusicPos >= stack.length) {
+      var nextId = rng.nextInt(widget.musicsList.length);
+      stack.add(widget.musicsList[nextId]);
+    }
+
+    return stack[currMusicPos];
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) => Stack(
+        children: [
+          // Background image
+          CoverImage(
+            music: currMusic,
+            width: constraints.maxWidth,
+            height: constraints.maxHeight,
+            fit: BoxFit.cover,
+          ),
+          _buildFront(),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildFront() {
+    return Text(currMusic.artist + " - " + currMusic.title);
+  }
+}