Initial commit - Media.RCL
This commit is contained in:
@@ -0,0 +1,59 @@
|
||||
@using Microsoft.AspNetCore.Components
|
||||
@using Microsoft.AspNetCore.Components.Web
|
||||
|
||||
<div class="relative card card-compact bg-base-100 shadow-sm border border-base-200 overflow-hidden cursor-grab hover:shadow-md transition-all active:cursor-grabbing h-full"
|
||||
draggable="true" @ondragstart="@(() => OnDragStart.InvokeAsync(Item))" @ondragend="@OnDragEnd"
|
||||
@ondragenter="@(() => OnDragEnter.InvokeAsync(Item))">
|
||||
<div class="h-36 bg-base-200 flex items-center justify-center overflow-hidden relative cursor-pointer group hover:opacity-90 transition-opacity"
|
||||
@onclick="@(() => OnEdit.InvokeAsync(Item))" title="Click to Edit / View">
|
||||
@if (Item.Type == MediaType.Image)
|
||||
{
|
||||
<img src="@GetPreviewSrc()" alt="@Item.AltText" class="w-full h-full object-cover" />
|
||||
}
|
||||
else if (Item.Type == MediaType.Video)
|
||||
{
|
||||
<div class="flex flex-col items-center text-base-content/50">
|
||||
<i class="icon-video text-2xl"></i> <!-- Placeholder icon -->
|
||||
<span class="text-xs mt-1">Video</span>
|
||||
</div>
|
||||
}
|
||||
else if (Item.Type == MediaType.YouTube || Item.Type == MediaType.Vimeo)
|
||||
{
|
||||
<div class="flex flex-col items-center text-base-content/50">
|
||||
<i class="icon-play text-2xl"></i> <!-- Placeholder icon -->
|
||||
<span class="text-xs mt-1">External Video</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="absolute top-1 right-1 flex gap-1">
|
||||
<button class="btn btn-sm btn-circle btn-ghost bg-base-100/90 shadow-sm hover:bg-base-100 text-error"
|
||||
title="Remove" @onclick="@(() => OnRemove.InvokeAsync(Item))" @onclick:stopPropagation>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-2 text-xs text-base-content/70 truncate">
|
||||
<span>@(Item.File?.Name ?? Item.Url)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public MediaItemModel Item { get; set; }
|
||||
[Parameter] public EventCallback<MediaItemModel> OnRemove { get; set; }
|
||||
[Parameter] public EventCallback<MediaItemModel> OnEdit { get; set; }
|
||||
|
||||
// Drag parameters
|
||||
[Parameter] public EventCallback<MediaItemModel> OnDragStart { get; set; }
|
||||
[Parameter] public EventCallback OnDragEnd { get; set; }
|
||||
[Parameter] public EventCallback<MediaItemModel> OnDragEnter { get; set; }
|
||||
|
||||
private string GetPreviewSrc()
|
||||
{
|
||||
// Ideally use generated Blob URL for local files
|
||||
return Item.Url ?? Item.PreviewUrl ?? "";
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user