decePubClient/Components/Content.razor
2022-12-15 20:03:40 +01:00

262 lines
9.7 KiB
Plaintext

@inherits LocalizableComponentBase
<div class="flex space-x-3 w-full neomorph is-nxxsmall rounded-xl @CssContainer">
<div class="flex flex-col py-3 pl-3 md:py-4 md:pl-4 flex-none rounded-l-xl bg-cover bg-no-repeat bg-center"
style="background-image:linear-gradient(to left, var(--background), transparent), url('@(Message.User?.BackgroundUrl)');">
<a class="block h-12 w-12 md:h-16 md:w-16" href="@Message.User.ProfileUrl" title="@Message.User.UserName">
<img alt="@Message.User.UserName" class="h-12 w-12 md:h-16 md:w-16 object-cover rounded-full neomorph is-nxxsmall" src="@(Message.User.PictureUrl ?? "/imgs/icon-192.png")" />
</a>
</div>
<div class="flex flex-col space-y-3 flex-1 py-3 pr-3 md:py-4 md:pr-4 min-w-0">
<div class="flex flex-col space-y-1 flex-1 min-w-0">
@if (Message.BoostingUser != null)
{
<p class="inline-flex flex-1 space-x-2 min-w-0 text-xs text-xs">
<a class="font-bold" href="@Message.BoostingUser.ProfileUrl" title="@Message.BoostingUser.UserName">@Message.BoostingUser.DisplayName</a>
<i class="ion-md-repeat has-text-info" aria-hidden="true"></i>
<span>@Localizer["boosted"]</span>
</p>
}
<p class="inline-flex flex-1 space-x-2 min-w-0 justify-between text-xs md:text-sm">
<span class="inline-flex space-x-2 min-w-0">
<b class="shrink truncate max-w-[80%]" title="@Message.User.DisplayName">
@Message.User.DisplayName
</b>
<a class="underline flex-1 min-w-6 opacity-50 truncate self-center text-xs" href="@Message.User.ProfileUrl" title="@Message.User.UserName">
@Message.User.UserName
</a>
</span>
<span class="flex-none inline-flex space-x-1 items-center">
<span title="@Message.CreatedAt.ToLocalTime().ToString("📅dd/MM/yy 🕒HH:mm")">
@Message.CreatedAt.GetPassedTime(Localizer._pLocalizer)
</span>
<i aria-hidden="true" class="@Message.MessageType.GetMessageTypeIcon() text-md"
title="@Localizer[Message.MessageType.ToString()]">
</i>
</span>
</p>
@if (Message.Title is { Length: > 0 })
{
<p class="text-sm md:text-base font-bold break-all">@Message.Title</p>
}
@if (Message.Content is { Length: > 0 })
{
<div class="text-sm md:text-base break-all">
@((MarkupString)Message.Content)
</div>
}
@if (Message.Medias.Count != 0)
{
<div class="grid gap-4 auto-cols-auto grid-rows-1 grid-flow-col-dense">
@foreach (var media in Message.Medias)
{
if (media.ContentType.StartsWith("image"))
{
<a class="w-auto" href="@media.Url">
<img alt="@media.AltText" class="w-full rounded-lg @SUtility.IfTrueThen(Message.Medias.Count > 1, "max-h-[30vh]")" src="@media.Url" title="@media.AltText">
</a>
}
else if (media.ContentType.StartsWith("video"))
{
<video class="w-full max-h-[50vh] aspect-video rounded-lg mx-auto neomorphInset is-nxxsmall" controls="controls" playsinline="playsinline" preload="metadata" title="@media.FileName">
<source src="@media.Url" type="@media.ContentType" />
</video>
}
else if (media.ContentType.StartsWith("audio"))
{
<audio class="w-full max-h-8" controls="controls" preload="metadata" title="@media.FileName">
<source src="@media.Url" type="@media.ContentType" />
</audio>
}
else
{
<div class="flex items-center space-x-3 align-center rounded-lg p-3 md:p-4 neomorph is-nxxsmall">
<span>
<i class="text-2xl ion-md-document"></i>
</span>
<div class="flex flex-col w-full space-y-1">
<p class="text-xs md:text-sm break-all">
<b>@media.FileName</b>
</p>
<p class="text-xs break-all">
<i class="ion-md-code"></i> @media.ContentType
</p>
</div>
<button class="button is-small is-rounded neoBtnSmall" @onclick="async () => await OnMessageMediaDownload.InvokeAsync(media)" type="button">
<span class="icon">
<i class="ion-md-download text-base"></i>
</span>
</button>
</div>
}
}
</div>
}
</div>
<div class="flex space-x-3 mt-3 justify-between">
<div class="flex space-x-3">
@if (OnMessageReply.HasDelegate)
{
<button class="button is-small is-rounded @(isAnswering ? "neoBtnSmallInsetPlain" : "neoBtnSmall")" @onclick="Reply"
title="@Localizer[isAnswering ? "Close" : "Reply"]">
<span class="icon">
<i aria-hidden="true" class="@SUtility.IfTrueThen(isAnswering, "ion-md-close-circle", "ion-md-text") text-lg has-text-success"></i>
</span>
</button>
}
@if (OnMessageBoost.HasDelegate)
{
<button class="button is-small is-rounded @SUtility.IfTrueThen(Message.IsBoostedByCurrentUser,"neoBtnSmallInsetPlain","neoBtnSmall") @SUtility.IfTrueThen(Message.BoostsCounter != 0, "has-icons-left")" @onclick="() => OnMessageBoost.InvokeAsync(Message)"
title="@Localizer["Boost"]">
<span class="icon is-left">
<i aria-hidden="true" class="ion-md-repeat @SUtility.IfTrueThen(Message.BoostsCounter != 0,null,"text-lg") has-text-info"></i>
</span>
@if (Message.BoostsCounter != 0)
{
<span>@Message.BoostsCounter</span>
}
</button>
}
@if (OnMessageFavourite.HasDelegate)
{
<button class="button is-small is-rounded @SUtility.IfTrueThen(Message.IsFavourite, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="() => OnMessageFavourite.InvokeAsync(Message)"
title="@Localizer["Favourite"]">
<span class="icon">
<i aria-hidden="true" class="@SUtility.IfTrueThen(Message.IsFavourite, "ion-md-heart-dislike", "ion-md-heart") text-lg text-pink-300"></i>
</span>
</button>
}
</div>
<div class="flex space-x-3">
<DropdownButton IsOpen="Message.IsOptionsOpen">
<DropdownTrigger>
<button class="button is-small is-rounded neoBtnSmall" @onclick="() => Message.IsOptionsOpen = !Message.IsOptionsOpen"
title="@Localizer["Other"]">
<span class="icon">
<i aria-hidden="true" class="ion-md-more text-lg"></i>
</span>
</button>
</DropdownTrigger>
<DropdownContent>
@if (OnUserDirectMessage.HasDelegate)
{
<div class="dropdown-item">
<button class="button is-small is-rounded has-icons-left neoBtnSmall" @onclick="() => OnUserDirectMessage.InvokeAsync(Message)">
<span class="icon is-left">
<i aria-hidden="true" class="ion-md-paper-plane text-base has-text-success"></i>
</span>
<span>@Localizer["Direct message"]</span>
</button>
</div>
}
@if (OnUserSilence.HasDelegate)
{
<div class="dropdown-item">
<button class="button is-small is-rounded has-icons-left neoBtnSmall" @onclick="() => OnUserSilence.InvokeAsync(Message.User)">
<span class="icon is-left">
<i aria-hidden="true" class="ion-md-eye-off text-base drop-shadow has-text-warning"></i>
</span>
<span>@Localizer["Mute"]</span>
</button>
</div>
}
@if (OnUserBlock.HasDelegate)
{
<div class="dropdown-item">
<button class="button is-small is-rounded has-icons-left neoBtnSmall" @onclick="() => OnUserBlock.InvokeAsync(Message.User)">
<span class="icon is-left">
<i aria-hidden="true" class="ion-md-remove-circle text-base has-text-danger"></i>
</span>
<span>@Localizer["Block"]</span>
</button>
</div>
}
@if (@*Message.User.UserName == CurrentUserName &&*@ OnMessageDelete.HasDelegate)
{
<div class="dropdown-item">
<button class="button is-small has-icons-left is-rounded neoBtnSmall" @onclick="DeleteMessage"
title="@Localizer["Delete"]">
<span class="icon is-left">
<i aria-hidden="true" class="ion-md-trash text-lg has-text-danger"></i>
</span>
<span>@Localizer["Delete"]</span>
</button>
</div>
}
</DropdownContent>
</DropdownButton>
@if (IncludeExpand)
{
<NavLink class="button is-small is-rounded neoBtnSmall" href="@($"expand/{Message.MessageId}")"
title="@Localizer["Expand"]">
<span class="icon">
<i aria-hidden="true" class="ion-md-expand text-lg"></i>
</span>
</NavLink>
}
</div>
</div>
@if (isAnswering)
{
<MessageUpsertForm AnsweringMessage="Message" OnMessageSubmit="SubmitReply"></MessageUpsertForm>
}
</div>
</div>
@code {
[CascadingParameter] Task<AuthenticationState> AuthState { get; set; }
[CascadingParameter] CascadingState CascadingState { get; set; }
[Parameter] public Message Message { get; set; } = new();
[Parameter] public EventCallback<MessageForm> OnMessageReply { get; set; }
[Parameter] public EventCallback<Message> OnMessageBoost { get; set; }
[Parameter] public EventCallback<Message> OnMessageFavourite { get; set; }
[Parameter] public EventCallback<Message> OnMessageDelete { get; set; }
[Parameter] public EventCallback<Message> OnUserDirectMessage { get; set; }
[Parameter] public EventCallback<Media> OnMessageMediaDownload { get; set; }
[Parameter] public EventCallback<MessageUser> OnUserBlock { get; set; }
[Parameter] public EventCallback<MessageUser> OnUserSilence { get; set; }
[Parameter] public string CssContainer { get; set; }
[Parameter] public bool IncludeExpand { get; set; } = true;
bool isAnswering { get; set; } = false;
string CurrentUserName
{
get
{
return AuthState.Result.User.Identity?.Name;
}
}
async Task DeleteMessage()
{
isAnswering = false;
await OnMessageDelete.InvokeAsync(Message);
}
async Task SubmitReply(MessageForm messageForm)
{
isAnswering = false;
await OnMessageReply.InvokeAsync(messageForm);
}
async Task Reply()
{
await Task.Run(() =>
{
});
isAnswering = !isAnswering;
}
}