81 lines
3.4 KiB
Plaintext
81 lines
3.4 KiB
Plaintext
@inject IJSRuntime JSRuntime
|
|
@inject MediaService mediaService
|
|
|
|
@if (Show && AssetId != Guid.Empty) {
|
|
<div class="preview-overlay" @onkeydown="OnKeyDown" tabindex="0" @onclick="OnCloseCallback">
|
|
<div class="preview-content" @onclick:stopPropagation="true">
|
|
<button class="preview-close" @onclick="OnCloseCallback">×</button>
|
|
|
|
@if (HasPrevious) {
|
|
<button class="preview-nav preview-prev" @onclick="() => OnNavigate.InvokeAsync(-1)" @onclick:stopPropagation="true">‹</button>
|
|
}
|
|
@if (HasNext) {
|
|
<button class="preview-nav preview-next" @onclick="() => OnNavigate.InvokeAsync(1)" @onclick:stopPropagation="true">›</button>
|
|
}
|
|
|
|
<div class="preview-image-wrapper">
|
|
@if (HasPreview) {
|
|
<img class="preview-img" src="@mediaService.PreviewUrl(AssetId)" alt=""
|
|
onerror="this.onerror=null;this.src='@mediaService.ThumbUrl(AssetId)'" />
|
|
} else {
|
|
<img class="preview-img" src="@mediaService.ThumbUrl(AssetId)" alt="" />
|
|
}
|
|
<div class="preview-info">
|
|
<div class="preview-info-text">
|
|
@ChildContent
|
|
</div>
|
|
<div class="preview-info-right">
|
|
@if (!string.IsNullOrEmpty(Filename)) {
|
|
<span class="preview-info-filename">@Filename</span>
|
|
}
|
|
<div class="preview-info-actions">
|
|
<a class="preview-action-btn" href="@mediaService.OriginalUrl(AssetId)" target="_blank"
|
|
title="View full size" @onclick:stopPropagation="true">
|
|
<i class="bi bi-arrows-fullscreen"></i>
|
|
</a>
|
|
<button class="preview-action-btn" @onclick="Download"
|
|
@onclick:stopPropagation="true" title="Download">
|
|
<i class="bi bi-download"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
@code {
|
|
[Parameter] public bool Show { get; set; }
|
|
[Parameter] public Guid AssetId { get; set; }
|
|
[Parameter] public bool HasPreview { get; set; }
|
|
[Parameter] public bool HasPrevious { get; set; }
|
|
[Parameter] public bool HasNext { get; set; }
|
|
[Parameter] public string? Filename { get; set; }
|
|
[Parameter] public EventCallback<int> OnNavigate { get; set; }
|
|
[Parameter] public EventCallback OnClose { get; set; }
|
|
[Parameter] public RenderFragment? ChildContent { get; set; }
|
|
|
|
async Task OnCloseCallback() {
|
|
await OnClose.InvokeAsync();
|
|
}
|
|
|
|
void OnKeyDown(KeyboardEventArgs e) {
|
|
switch (e.Key) {
|
|
case "Escape":
|
|
OnClose.InvokeAsync();
|
|
break;
|
|
case "ArrowLeft":
|
|
if (HasPrevious) OnNavigate.InvokeAsync(-1);
|
|
break;
|
|
case "ArrowRight":
|
|
if (HasNext) OnNavigate.InvokeAsync(1);
|
|
break;
|
|
}
|
|
}
|
|
|
|
async Task Download() {
|
|
await JSRuntime.InvokeVoidAsync("masonryObserver.downloadFile", mediaService.OriginalUrl(AssetId));
|
|
}
|
|
}
|