Make replay links fancier, also pretty up the replay cards

ReplayBrowser/Helpers/ReplayHelper.cs

@@ -200,13 +200,32 @@ public async Task<int> GetTotalReplayCount()
         return await _context.Replays.CountAsync();
     }
 
+    public async Task<Replay?> GetReplay(string @operator, string server, int id, AuthenticationState authstate)
+    {
+        Log.Information($"Looking for replay: {@operator}, {server}, {id}");
+
+        var replay = await _context.Replays
+            .AsNoTracking()
+            .Include(r => r.RoundParticipants!)
+            .ThenInclude(p => p.Players)
+            .OrderByDescending(r => r.Duration)
+            .FirstOrDefaultAsync(r => r.ServerId == @operator && r.ServerName == server && r.RoundId == id);
+
+        if (replay == null)
+            return null;
+
+        var caller = await _accountService.GetAccount(authstate);
+        replay = FilterReplay(replay, caller);
+        return replay;
+    }
+
     public async Task<Replay?> GetReplay(int id, AuthenticationState authstate)
     {
         var replay = await _context.Replays
             .AsNoTracking()
             .Include(r => r.RoundParticipants!)
             .ThenInclude(p => p.Players)
-            .FirstOrDefaultAsync(r => r.Id == id);
+            .SingleOrDefaultAsync(r => r.Id == id);
 
         if (replay == null)
             return null;

ReplayBrowser/Pages/Shared/Layout/App.razor

@@ -17,6 +17,33 @@
 
     <script src="_framework/blazor.web.js" autostart="false"></script>
 
+    <style>
+        /* For ReplayDisplay cards description */
+        dl {
+            display: grid;
+            grid-gap: 10px 16px;
+            grid-template-columns: auto max-content;
+        }
+
+        dt {
+            grid-column-start: 1;
+        }
+
+        dt:not(:first-of-type)::before {
+            content: "";
+            position: absolute;
+            left: 0.5em;
+            right: 0.5em;
+            margin-top: -5px;
+            border-top: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        dd {
+            margin: 0;
+            grid-column-start: 2;
+        }
+    </style>
+
     <HeadOutlet/>
 </head>
 

ReplayBrowser/Pages/Shared/Layout/ErrorCode.razor

@@ -7,6 +7,7 @@
         switch (Code)
         {
             case 404:
+                <PageTitle>Error - Not Found</PageTitle>
                 <MetaDataSpecifer
                     Title="Not found"
                     Description="There is no page at the specified URL."
@@ -16,6 +17,7 @@
                 <em>Should there be a page here? Contribute to the project on <a href="https://github.com/Simyon264/ReplayBrowser" target="_blank">GitHub</a>!</em>
                 break;
             case 500:
+                <PageTitle>Error - Internal Server Error</PageTitle>
                 <MetaDataSpecifer
                     Title="Internal Server Error"
                     Description="There was an error on the server. Please try again later."

ReplayBrowser/Pages/Shared/Layout/MainLayout.razor

@@ -159,11 +159,11 @@
                     if (isFavourited) {
                         icon.removeClass('far');
                         icon.addClass('fas');
-                        button.children().last().text('Remove from favourites');
+                        button.children().last().attr("title", 'Remove from favourites');
                     } else {
                         icon.removeClass('fas');
                         icon.addClass('far');
-                        button.children().last().text('Add to favorites');
+                        button.children().last().attr("title", 'Add to favorites');
                     }
 
                     if (reloadOnComplete) {

ReplayBrowser/Pages/Shared/ReplayDisplay.razor

@@ -11,36 +11,45 @@
 @inject ReplayParserService ReplayParserService
 
 <div class="card" style="width: 18rem; margin-top: 1rem">
-    <div class="card-body">
-        <h5 class="card-title">@_nameFormatted</h5>
-        @if (ReplayData.Map == null)
-        {
-        <p>Maps: @string.Join(", ", ReplayData.Maps!)</p>
-        }
-        else
-        {
-        <p>Map: @ReplayData.Map</p>
-        }
-        <p class="card-text">Gamemode: @ReplayData.Gamemode</p>
+    <div class="card-header">
+        <h5 class="card-title m-0 d-flex"><span class="flex-fill text-truncate me-2">@(ReplayData.ServerName ?? ReplayData.ServerId ?? "Unknown!")</span><span>#@ReplayData.RoundId</span></h5>
     </div>
-    <div class="card-footer">
-        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#r-@ReplayData.Id" style="margin-right: 0.1rem">
-            View replay
-        </button>
-        <a class="btn btn-secondary" style="margin-right: 0.1rem" href="/replay/@ReplayData.Id" target="_blank">View in new tab</a>
-
-        <button class="btn btn-outline-danger" style="float: right; margin-top: 10px; margin-right: 0;" id="favorite-button-@ReplayData.Id" onclick="FavouriteReplay(@ReplayData.Id, @ReloadOnFavourite.ToString().ToLower())">
-            @if (ReplayData.IsFavorite)
+    <div class="card-body">
+        <dl class="replay-description">
+            <dt>Date</dt><dd>@ReplayData.Date</dd>
+            <dt>Gamemode</dt><dd>@ReplayData.Gamemode</dd>
+            @if (ReplayData.Map == null)
             {
-                <i class="fas fa-star"></i>
-                <p>Remove from favorites</p>
+            <dt>Maps</dt>
+                @foreach (var map in ReplayData.Maps!) {
+                    <dd>@map</dd>
+                }
             }
             else
             {
-                <i class="far fa-star"></i>
-                <p>Add to favorites</p>
+            <dt>Map</dt><dd>@ReplayData.Map</dd>
             }
-        </button>
+        </dl>
+    </div>
+    <div class="card-footer d-flex">
+        <div class="btn-group flex-fill" role="group" aria-label="Basic example">
+            <a class="btn btn-primary flex-fill" type="button" href="/replay/@ReplayData.ServerId/@ReplayData.ServerName/@ReplayData.RoundId" data-bs-toggle="modal" data-bs-target="#r-@ReplayData.Id">
+                View replay
+            </a>
+            <a class="btn btn-secondary flex-grow-0" href="/replay/@ReplayData.ServerId/@ReplayData.ServerName/@ReplayData.RoundId" target="_blank">
+                <i class="fas fa-external-link-alt" title="Open in new tab"></i>
+            </a>
+            <button class="btn m-0 px-2 btn-outline-secondary text-warning flex-grow-0" id="favorite-button-@ReplayData.Id" onclick="FavouriteReplay(@ReplayData.Id, @ReloadOnFavourite.ToString().ToLower())">
+                @if (ReplayData.IsFavorite)
+                {
+                    <i class="fas fa-star" title="Remove from favorites"></i>
+                }
+                else
+                {
+                    <i class="far fa-star" title="Add to favorites"></i>
+                }
+            </button>
+        </div>
     </div>
 </div>
 <div class="modal fade modal-lg" id="@ModalId" tabindex="-1" aria-labelledby="@ModalId" aria-hidden="true">
@@ -51,7 +60,7 @@
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                <a class="btn btn-primary" href="/replay/@ReplayData.Id" target="_blank">View in new tab</a>
+                <a class="btn btn-primary" href="/replay/@ReplayData.ServerId/@ReplayData.ServerName/@ReplayData.RoundId" target="_blank">View in new tab</a>
             </div>
         </div>
     </div>
@@ -70,38 +79,8 @@
     protected override async void OnInitialized()
     {
         await base.OnInitializedAsync();
-        // Get the date and server name of the replay using regex
-        var fileName = Path.GetFileName(ReplayData.Link);
-        if (fileName == null)
-        {
-            return;
-        }
-        var storageUrl = ReplayParserService.GetStorageUrlFromReplayLink(ReplayData.Link);
-        var matchName = storageUrl.ServerNameRegexCompiled.Match(fileName);
-        var matchDate = storageUrl.ReplayRegexCompiled.Match(fileName);
-        if (matchName.Success && matchDate.Success)
-        {
-            if (string.IsNullOrWhiteSpace(matchName.Groups[1].Value))
-            {
-                // wut? Fallback to server id
-                _nameFormatted = $"{ReplayData.ServerId} - {matchDate.Groups[1].Value}";
-            }
-            else
-            {
-                _nameFormatted = $"{matchName.Groups[1].Value} - {matchDate.Groups[1].Value}";
-            }
-        }
-        else
-        {
-            if (ReplayData.ServerName != null)
-            {
-                _nameFormatted = ReplayData.ServerName;
-            }
-            else
-            {
-                _nameFormatted = ReplayData.ServerId;
-            }
-        }
+
+        _nameFormatted =  $"{ReplayData.ServerName ?? ReplayData.ServerId} #{ReplayData!.RoundId}";
 
         var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
         var account = await AccountService.GetAccount(authState);

ReplayBrowser/Pages/Shared/SearchBar.razor

@@ -63,7 +63,7 @@
         display: none !important;
     }
 
-    .btn {
+    .search-container .btn {
         margin-right: 0.5rem;
     }
 

ReplayBrowser/Pages/ViewReplayBase.razor

@@ -0,0 +1,61 @@
+@page "/replay/{id:int}"
+@using Microsoft.AspNetCore.Components.Authorization
+@using Microsoft.AspNetCore.Components.Web
+@using ReplayBrowser.Data.Models
+@using ReplayBrowser.Helpers
+@using ReplayBrowser.Pages.Shared
+@using ReplayBrowser.Services.ReplayParser
+
+@inject AuthenticationStateProvider AuthenticationStateProvider
+@inject ReplayHelper ReplayHelper
+@inject ReplayParserService ReplayParserService
+@inject NavigationManager NavigationManager
+@inject IHttpContextAccessor HttpContextAccessor
+
+<PageTitle>Replay viewer</PageTitle>
+@if (Replay == null)
+{
+    <ReplayBrowser.Pages.Shared.Layout.ErrorCode Code=404 />
+}
+else
+{
+    <ReplayDetails FullReplay="Replay" />
+
+    <MetaDataSpecifer
+        Title="@GetTitle()"
+        Description="@GetDescription()"
+    />
+}
+
+@code {
+    [Parameter]
+    public int Id { get; set; }
+
+    public Replay? Replay { get; set; }
+
+    protected string GetTitle()
+    {
+        // Not null because the function is used only when Replay IS NOT null
+        return $"Round #{Replay!.RoundId} - {Replay.ServerName ?? Replay.ServerId} - {Replay.Date}";
+    }
+
+    protected string GetDescription()
+    {
+        return "Round " + Replay!.RoundId + " played on " + Replay.Map + " on " + Replay.Date?.ToString("yyyy-MM-dd HH:mm:ss");
+    }
+
+    protected virtual Task<Replay?> GetReplay(AuthenticationState? state)
+    {
+        return ReplayHelper.GetReplay((int) Id!, state!);
+    }
+
+    protected override async Task OnInitializedAsync()
+    {
+        Replay = await GetReplay(await AuthenticationStateProvider.GetAuthenticationStateAsync());
+
+        if (Replay is not null)
+            return;
+
+        HttpContextAccessor.HttpContext!.Response.StatusCode = 404;
+    }
+}