decePubClient/Components/Content.razor

@inherits LocalizableComponentBase

<div class="flex gap-3 w-full rounded-xl neo-raised @(Highlighted ? "neo-sm" : "neo-2xs") @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(--color-base-100), 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 neo-raised neo-2xs" src="@(Message.User.PictureUrl ?? "/imgs/icon-192.png")" />
		</a>

	</div>

	<div class="flex flex-col gap-3 flex-1 py-3 pr-3 md:py-4 md:pr-4 min-w-0">

		<div class="flex flex-col gap-1 flex-1 min-w-0">
			@if (Message.BoostingUser != null)
			{
				<p class="inline-flex flex-1 gap-2 min-w-0 text-xs">
					<a class="font-bold" href="@Message.BoostingUser.ProfileUrl" title="@Message.BoostingUser.UserName">@Message.BoostingUser.DisplayName</a>
					<i class="ion-md-repeat text-info" aria-hidden="true"></i>
					<span>@Localizer["boosted"]</span>
				</p>
			}
			<p class="inline-flex flex-1 gap-2 min-w-0 justify-between text-xs md:text-sm">
				<span class="inline-flex gap-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 gap-1 items-center">
					<span title="@Message.CreatedAt.ToLocalTime().ToString(SUtility.dateTimeFormatExt)">
						@Message.CreatedAt.GetPassedTime(Localizer)
					</span>
					<i aria-hidden="true" class="@Message.MessageType.GetMessageTypeIcon() text-base"
						 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 neo-inset neo-2xs" 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 gap-3 rounded-lg p-3 md:p-4 neo-raised neo-2xs">
								<span>
									<i class="text-2xl ion-md-document"></i>
								</span>
								<div class="flex flex-col w-full gap-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>
								<DButton Size="DSize.Sm" OnClick="async () => await OnMessageMediaDownload.InvokeAsync(media)">
									<i class="ion-md-download text-base"></i>
								</DButton>
							</div>
						}
					}
				</div>
			}

		</div>

		<div class="flex gap-3 mt-3 justify-between">
			<div class="flex gap-3">
				@if (OnMessageReply.HasDelegate)
				{
					<DButton Size="DSize.Sm" Active="isAnswering" Disabled="IsDefaultDisabled" OnClick="Reply" title="@Localizer[isAnswering ? "Close" : "Reply"]">
						<i aria-hidden="true" class="@SUtility.IfTrueThen(isAnswering, "ion-md-close-circle", "ion-md-text") text-lg text-success"></i>
					</DButton>
				}
				@if (OnMessageBoost.HasDelegate)
				{
					<DButton Size="DSize.Sm" Active="Message.IsBoostedByCurrentUser" Disabled="IsDefaultDisabled" OnClick="() => OnMessageBoost.InvokeAsync(Message)"
							 title="@Localizer["Boost"]">
						<i aria-hidden="true" class="ion-md-repeat @SUtility.IfTrueThen(Message.BoostsCounter != 0, null, "text-lg") text-info"></i>
						@if (Message.BoostsCounter != 0)
						{
							<span>@Message.BoostsCounter</span>
						}
					</DButton>
				}
				@if (OnMessageFavourite.HasDelegate)
				{
					<DButton Size="DSize.Sm" Active="Message.IsFavourite" Disabled="IsDefaultDisabled" OnClick="() => OnMessageFavourite.InvokeAsync(Message)"
							 title="@Localizer["Favourite"]">
						<i aria-hidden="true" class="@SUtility.IfTrueThen(Message.IsFavourite, "ion-md-heart-dislike", "ion-md-heart") text-lg text-pink-300"></i>
					</DButton>
				}
			</div>

			<div class="flex gap-3">
				<DDropdown @bind-IsOpen="Message.IsOptionsOpen" Align="DDropdownAlign.End" CloseOnContentClick="true"
						   TriggerClass="@(Message.IsOptionsOpen ? "btn btn-sm btn-active" : "btn btn-sm")"
						   ContentClass="mt-2 flex flex-col gap-2 p-2 rounded-box" title="@Localizer["Other"]">
					<Trigger>
						<i aria-hidden="true" class="ion-md-more text-lg"></i>
					</Trigger>
					<ChildContent>
						@if (OnUserDirectMessage.HasDelegate)
						{
							<DButton Size="DSize.Sm" class="justify-start whitespace-nowrap" Disabled="IsDefaultDisabled" OnClick="() => OnUserDirectMessage.InvokeAsync(Message)">
								<i aria-hidden="true" class="ion-md-paper-plane text-base text-success"></i>
								<span>@Localizer["Direct message"]</span>
							</DButton>
						}
						@if (OnUserSilence.HasDelegate)
						{
							<DButton Size="DSize.Sm" class="justify-start whitespace-nowrap" Disabled="IsDefaultDisabled" OnClick="() => OnUserSilence.InvokeAsync(Message.User)">
								<i aria-hidden="true" class="ion-md-eye-off text-base drop-shadow-sm text-warning"></i>
								<span>@Localizer["Mute"]</span>
							</DButton>
						}
						@if (OnUserBlock.HasDelegate)
						{
							<DButton Size="DSize.Sm" class="justify-start whitespace-nowrap" Disabled="IsDefaultDisabled" OnClick="() => OnUserBlock.InvokeAsync(Message.User)">
								<i aria-hidden="true" class="ion-md-remove-circle text-base text-error"></i>
								<span>@Localizer["Block"]</span>
							</DButton>
						}
						@* Once signed in for real: only for the author's own messages (Message.User.UserId == CascadingState.User.Id). *@
						@if (OnMessageDelete.HasDelegate)
						{
							<DButton Size="DSize.Sm" class="justify-start whitespace-nowrap" Disabled="IsDefaultDisabled" OnClick="DeleteMessage" title="@Localizer["Delete"]">
								<i aria-hidden="true" class="ion-md-trash text-lg text-error"></i>
								<span>@Localizer["Delete"]</span>
							</DButton>
						}
					</ChildContent>
				</DDropdown>
				@if (IncludeExpand)
				{
					<NavLink class="btn btn-sm" href="@($"expand/{Message.MessageId}")" title="@Localizer["Expand"]">
						<i aria-hidden="true" class="ion-md-expand text-lg"></i>
					</NavLink>
				}
			</div>
		</div>

		@if (isAnswering)
		{
			<MessageUpsertForm AnsweringMessage="Message" OnMessageSubmit="SubmitReply"></MessageUpsertForm>
		}
	</div>

</div>

@code {
	[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; }
	/// <summary>Deeper shadow, for the message a thread page is about.</summary>
	[Parameter] public bool Highlighted { get; set; }
	[Parameter] public bool IncludeExpand { get; set; } = true;

	bool isAnswering;

	protected override void OnInitialized() => IsLoading = false;

	async Task DeleteMessage()
	{
		isAnswering = false;
		await OnMessageDelete.InvokeAsync(Message);
	}

	async Task SubmitReply(MessageForm messageForm)
	{
		isAnswering = false;
		await OnMessageReply.InvokeAsync(messageForm);
	}

	void Reply()
	{
		isAnswering = !isAnswering;
	}
}