fix(api): Add query string parameters to MinimapApiClient render request

The `MinimapApiClient` now includes query string parameters in the render request. The `replayId` and `targetedPlayerId` are added to the query string if they are provided.

fix(api): Create public access container in MinimapRenderingService

The `MinimapRenderingService` now creates a container with public access when it doesn't exist. This ensures that the rendered minimap videos can be accessed by external clients.

refactor(api): Update logging message in MinimapRenderingService

The logging message in the `MinimapRenderingService` has been updated to include the target player ID when rendering a minimap for a replay post.

fix(api): Upload minimap using Azure Blob Storage SDK

The minimap is now uploaded using the Azure Blob Storage SDK instead of directly calling the upload method on the container client. This provides better control over overwrite behavior and allows for cancellation of the upload operation.

fix(app): Display minimap video in view post component

The view post component now displays the minimap video if it is available for a post. The video is displayed using an HTML5 `<video>` element with controls, autoplay, and loop attributes.

style(theme): Update body background color

The body background color has been updated from `#1a1a1a` to `#111111`. This change improves contrast and enhances readability.

WowsKarma.Api.Minimap.Client/MinimapApiClient.cs

@@ -1,4 +1,5 @@
 using System.Net.Http.Json;
+using System.Text;
 using System.Text.Json;
 using JetBrains.Annotations;
 using Microsoft.Extensions.Options;
@@ -44,16 +45,28 @@ public MinimapApiClient(HttpClient client, IOptions<MinimapApiClientOptions> opt
 	/// <returns>The rendered minimap MP4 video, in a blob.</returns> 
 	public async ValueTask<byte[]> RenderReplayMinimapAsync(byte[] replay, string? replayId = null, uint? targetedPlayerId = null, CancellationToken ct = default)
 	{
-		using HttpRequestMessage request = await AttemptAuthenticationAsync(new(HttpMethod.Post, "render"));
+		// Build the query string
+		var query = System.Web.HttpUtility.ParseQueryString(string.Empty);
+
+		if (replayId is not (null or ""))
+		{
+			query.Add("replay_id", replayId);
+		}
+
+		if (targetedPlayerId is not null)
+		{
+			query.Add("target_player_id", targetedPlayerId.ToString());
+		}
+
+
+		using HttpRequestMessage request = await AttemptAuthenticationAsync(new(HttpMethod.Post, $"render?{query}"));
 
 		// Open a stream to the replay blob
 		await using MemoryStream replayStream = new(replay, false);
 
 		request.Content = new MultipartFormDataContent
 		{
-			{ new StreamContent(replayStream), "file", "replay.wowsreplay" },
-			{ new StringContent(replayId ?? ""), "replayId" },
-			{ new StringContent(targetedPlayerId?.ToString() ?? ""), "targetedPlayerId" }
+			{ new StreamContent(replayStream), "file", "replay.wowsreplay" }
 		};
 
 		using HttpResponseMessage response = await _client.SendAsync(request, ct);

WowsKarma.Api/Services/MinimapRenderingService.cs

@@ -1,6 +1,7 @@
 using System.IO;
 using System.Threading;
 using Azure.Storage.Blobs;
+using Azure.Storage.Blobs.Models;
 using Hangfire;
 using Hangfire.Tags.Attributes;
 using Microsoft.EntityFrameworkCore;
@@ -44,7 +45,7 @@ IConfiguration configuration
 
 		if (!_containerClient.Exists())
 		{
-			_containerClient.Create();
+			_containerClient.Create(PublicAccessType.Blob);
 		}
 	}
 
@@ -71,7 +72,7 @@ public async Task RenderPostReplayMinimapAsync(Guid postId, bool force = false,
 		await using MemoryStream ms = await _replaysIngestService.FetchReplayFileAsync(post.Replay.Id, ct);
 		ms.Position = 0;
 
-		_logger.LogDebug("Rendering minimap for replay {replayId} from post {postId}.", post.Replay.Id, postId);
+		_logger.LogDebug("Rendering minimap for replay {replayId} from post {postId}. Target player ID: {targetPlayerId}", post.Replay.Id, postId, post.PlayerId);
 		byte[] response = await _client.RenderReplayMinimapAsync(ms.ToArray(), post.Replay.Id.ToString(), post.PlayerId, ct);
 
         _logger.LogInformation("Minimap rendered for replay {replayId} from post {postId}.", post.Replay.Id, postId);
@@ -105,8 +106,8 @@ private async ValueTask UploadReplayMinimapAsync(Guid replayId, byte[] content,
 		await using MemoryStream ms = new(content);
 		ms.Position = 0;
 
-		await _containerClient.UploadBlobAsync($"{post.Replay.Id}.mp4", ms, ct);
-			
+
+		await _containerClient.GetBlobClient($"{post.Replay.Id}.mp4").UploadAsync(ms, overwrite: true, cancellationToken: ct);
 		_logger.LogInformation("Minimap uploaded for replay {replayId} to Azure storage.", replayId);
 	}
 

WowsKarma.Api/Services/Replays/ReplaysIngestService.cs

@@ -63,7 +63,7 @@ public async Task<ReplayDTO> GetReplayDTOAsync(Guid id)
 				.Select(m => m with { Username = replay.Players.FirstOrDefault(p => p.AccountId == m.PlayerId).Name }),
 			Players = replay.Players.Adapt<IEnumerable<ReplayPlayerDTO>>(),
 			DownloadUri = $"{_containerClient.Uri}/{ReplayBlobContainer}/{replay.BlobName}",
-			MiniMapUri = $"{_containerClient.Uri}/{MinimapRenderingService.MinimapBlobContainer}/{replay.Id}.mp4"
+			MiniMapUri = $"{_serviceClient.Uri}{MinimapRenderingService.MinimapBlobContainer}/{replay.Id}.mp4"
 		};
 	}
 

wowskarma.app/src/app/pages/post/view/view-post.component.html

@@ -1,13 +1,25 @@
 <ng-container *ngIf="request$ | async as result else loading">
   <ng-container *ngIf="result.model as post else notFound">
-    <h1>View Post</h1>
-    <p class="lead">Post ID : <span class="ml-3 text-monospace">{{post.id}}</span></p>
-
     <div class="my-5">
-      <div class="row">
-        <div class="col-lg-4 col-md-6">
+      <div class="row justify-content-between">
+        <div class="col-xl-5 col-md-6">
+          <div class="mb-5">
+            <h1>View Post</h1>
+            <p>Post ID : <code class="ml-3">{{post.id}}</code></p>
+          </div>
+
           <app-post [post]="post" [postDisplayType]="'neutral'"></app-post>
         </div>
+
+        <div *ngIf="post.replay?.miniMapUri as minimapUri" class="col-xl-7 col-md-6">
+          <!-- Display the minimap video -->
+          <h3 class="mb-5">Minimap</h3>
+
+          <video class="w-100" controls autoplay muted loop preload="auto">
+            <source [src]="minimapUri" type="video/mp4">
+            Your browser does not support the video tag.
+          </video>
+        </div>
       </div>
     </div>
 
@@ -67,4 +79,4 @@ <h3 class="text-info">Loading...</h3>
 
 <ng-template #notFound>
   <app-not-found message="Sorry, no post was found."></app-not-found>
-</ng-template>
+</ng-template>

wowskarma.app/src/theme/_variables.scss

@@ -43,7 +43,7 @@ $min-contrast-ratio:   1.9 !default;
 
 // Body
 
-$body-bg:                   #1a1a1a !default;
+$body-bg:                   #111111 !default;
 $body-color:                $white !default;
 
 // Links