94 lines
3.4 KiB
Plaintext
94 lines
3.4 KiB
Plaintext
@page "/cosplayers"
|
|
@using Butter.Dtos.Person
|
|
@using Butter.Types
|
|
@using Microsoft.Extensions.Options
|
|
@using MilkStream.Client.Components.Layout
|
|
@using MilkStream.Client.Services
|
|
|
|
@inject PersonService personService
|
|
@inject LoginService loginService
|
|
@inject IOptions<ServiceOptions> serviceOptions
|
|
@inject NavigationManager navigationManager
|
|
|
|
<PageTitle>Cosplayers</PageTitle>
|
|
|
|
@if (isLoading) {
|
|
<LoadSpinner/>
|
|
} else if (people.Count == 0) {
|
|
<div class="border-warning border-5 border-opacity-100 rounded-3 p-3 m-5 bg-warning-subtle text-center">
|
|
<h2 class="text-warning">No cosplayers available</h2>
|
|
@if (loginService.IsLoggedIn) {
|
|
<p class="text-warning-emphasis">There are no cosplayers yet.</p>
|
|
} else {
|
|
<p class="text-warning-emphasis">Please <a href="/login" class="link-warning">log-in</a> to browse cosplayers.</p>
|
|
}
|
|
</div>
|
|
} else {
|
|
<div class="d-flex align-items-center justify-content-between mb-3 px-2">
|
|
<h4 class="m-0"><i class="bi bi-people"></i> Cosplayers</h4>
|
|
</div>
|
|
|
|
<div class="cosplayers-grid">
|
|
@foreach (var person in people) {
|
|
<div class="cosplayer-card" @key="person.Id"
|
|
@onclick="() => NavigateToPerson(person.Id)"
|
|
@onclick:preventDefault="true">
|
|
@if (person.ProfileAssetId.HasValue) {
|
|
var cx2 = person.ProfileCropX ?? 50;
|
|
var cy2 = person.ProfileCropY ?? 50;
|
|
var zoom2 = person.ProfileCropZoom ?? 1f;
|
|
<div class="cosplayer-card-img"
|
|
style="background-image: url('@ThumbUrl(person.ProfileAssetId.Value)'); background-position: @cx2% @cy2%; background-size: calc(100% / @zoom2)"></div>
|
|
<div class="cosplayer-card-fallback" style="display:none">
|
|
<i class="bi bi-person-circle"></i>
|
|
</div>
|
|
} else {
|
|
<div class="cosplayer-card-fallback">
|
|
<i class="bi bi-person-circle"></i>
|
|
</div>
|
|
}
|
|
<div class="cosplayer-card-info">
|
|
<span class="cosplayer-card-name">@person.Name</span>
|
|
<span class="cosplayer-card-count">@person.TotalAlbums albums</span>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
@code {
|
|
List<PersonPreviewDto> people = [];
|
|
bool isLoading = true;
|
|
string token = string.Empty;
|
|
string apiBase => serviceOptions.Value.BaseUrl.TrimEnd('/');
|
|
string TokenParam => string.IsNullOrEmpty(token) ? "" : $"?token={token}";
|
|
|
|
protected override async Task OnInitializedAsync() {
|
|
loginService.LoggedUserChanged += (_, _) => StateHasChanged();
|
|
loginService.AuthInfoChanged += (_, info) => {
|
|
token = info?.Token ?? string.Empty;
|
|
StateHasChanged();
|
|
};
|
|
token = loginService.AuthInfo?.Token ?? string.Empty;
|
|
|
|
if (!loginService.IsLoggedIn) return;
|
|
|
|
await LoadPeople();
|
|
}
|
|
|
|
async Task LoadPeople() {
|
|
isLoading = true;
|
|
var items = await personService.GetAllAsync();
|
|
if (items?.Count > 0) {
|
|
people = items;
|
|
}
|
|
isLoading = false;
|
|
}
|
|
|
|
void NavigateToPerson(Guid id) {
|
|
navigationManager.NavigateTo($"/cosplayer/{id}");
|
|
}
|
|
|
|
string ThumbUrl(Guid id) => $"{apiBase}/api/media/thumb/{id}{TokenParam}";
|
|
}
|