decePubClient/Components/MessageUpsertForm.razor

@inherits LocalizableComponentBase

<EditForm Model="MessageForm" OnValidSubmit="OnValidSubmit">
	<DataAnnotationsValidator />

	<div class="flex flex-col mb-3">
		<DInput TValue="string" class="w-full rounded-t-[1.4rem] rounded-b-lg" maxlength="64"
				placeholder="@Localizer["Title (optional)"]" Value="@MessageForm.Title"
				ValueChanged="(v) => OnTitleChanged(v)"
				ValueExpression="() => MessageForm.Title" />
		<div class="relative mt-1">
			<DTextarea TValue="string" @bind-Value="MessageForm.Content" Immediate="true"
					   class="w-full rounded-b-[1.4rem] rounded-t-lg" maxlength="5000"
					   placeholder="@Localizer["oh shit... here we go again"]" rows="3" />
			<span class="absolute text-xs opacity-50 right-2 bottom-1">@(MessageForm.Content?.Length ?? 0)/5000</span>
		</div>
		@if (showPreviewButton && isPreviewOpen && MessageForm.Content is { Length: > 0 })
		{
			<div class="relative mt-1 px-8">
				<div class="neo-inset neo-xs rounded-t-lg rounded-b-[1.4rem] px-2 py-1 md:px-3 md:py-2 text-xs md:text-sm">
					@switch (MessageForm.ContentType)
					{
						case ContentType.Markdown:
							@((MarkupString)Markdown.ToHtml(MessageForm.Content))
							break;
						case ContentType.HTML:
							<p>@((MarkupString)MessageForm.Content)</p>
							break;
					}
				</div>
			</div>
		}
		<div class="text-error text-sm">
			<ValidationMessage For="() => MessageForm.Content" />
			@contentError
		</div>
	</div>

	<div class="flex flex-col gap-3 mb-3 @SUtility.IfTrueThen(MessageForm.Media.Count == 0, "hidden")">
		@foreach (var media in MessageForm.Media)
		{
			switch (MessageForm.MediaType)
			{
				case MediaType.Images:
					<div class="flex w-full items-center gap-3 rounded-xl p-3 md:p-4 neo-raised neo-2xs">
						<img alt="@media.AltText" class="object-cover rounded-lg neo-raised neo-2xs max-h-24 md:max-h-40 max-w-[6rem] md:max-w-[12rem]" src="@media.Base64Preview" />
						<div class="flex w-full self-start flex-col justify-between gap-2">
							<div class="flex w-full gap-3">
								<div class="flex-1">
									<p class="text-xs md:text-sm break-all">
										<i class="ion-md-image"></i> <b>@media.FileName</b>
									</p>
									<p class="text-xs break-all">
										<i class="ion-md-code"></i> @media.ContentType <i class="ion-md-fitness"></i> @media.Size.GetFileSize(Localizer._pLocalizer)
									</p>
								</div>
								<DButton Size="DSize.Sm" class="self-start" OnClick="() => RemoveFile(media)">
									<i class="ion-md-trash text-base text-red-400"></i>
								</DButton>
							</div>
							<DTextarea TValue="string" @bind-Value="media.AltText" Size="DSize.Sm" class="w-full rounded-lg!"
									   placeholder="@Localizer["Alternative text"]" rows="1" />
						</div>
					</div>
					break;
				case MediaType.Video:
				case MediaType.Documents:
					<div class="flex items-center gap-3 rounded-xl p-3 md:p-4 neo-raised neo-2xs">
						<span>
							<i class="text-2xl @MessageForm.MediaType.GetMediaTypeIcon()"></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 <i class="ion-md-fitness"></i> @media.Size.GetFileSize(Localizer._pLocalizer)
							</p>
						</div>
						<DButton Size="DSize.Sm" OnClick="() => RemoveFile(media)">
							<i class="ion-md-trash text-base text-red-400"></i>
						</DButton>
					</div>
					break;
				case MediaType.Audio:
					<div class="flex items-center gap-3 rounded-xl p-3 md:p-4 neo-raised neo-2xs">
						<span>
							<i class="text-2xl @MessageForm.MediaType.GetMediaTypeIcon()"></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 <i class="ion-md-fitness"></i> @media.Size.GetFileSize(Localizer._pLocalizer)
							</p>
							<audio controls="controls" class="w-full max-h-8">
								<source src="@media.Base64Preview" type="@media.ContentType">
							</audio>
						</div>
						<DButton Size="DSize.Sm" OnClick="() => RemoveFile(media)">
							<i class="ion-md-trash text-base text-red-400"></i>
						</DButton>
					</div>
					break;
			}
		}

	</div>

	@if (fileInputErrorMessage is { Length: > 0 })
	{
		<div class="text-error text-sm p-1 md:p-2 mb-3 rounded-xl neo-inset neo-2xs">
			@((MarkupString)fileInputErrorMessage)
		</div>
	}

	<div class="flex flex-wrap items-start justify-between gap-3">
		<div class="flex flex-wrap items-start gap-3">
			<DDropdown @bind-IsOpen="MessageForm.IsScopeOptionsOpen"
					   TriggerClass="@(MessageForm.IsScopeOptionsOpen ? "btn btn-sm btn-active" : "btn btn-sm")"
					   ContentClass="mt-2 flex gap-2 p-2 rounded-box"
					   title="@string.Format(Localizer["Message scope type: {0}"], Localizer[MessageForm.MessageType.ToString()])">
				<Trigger>
					<i class="@MessageForm.MessageType.GetMessageTypeIcon() text-base"></i>
				</Trigger>
				<ChildContent>
					<DButton Size="DSize.Sm" Active="MessageForm.MessageType is MessageType.Direct" OnClick="() => UpdateMessageType(MessageType.Direct)"
							 title="@Localizer[MessageType.Direct.ToString()]">
						<i class="ion-md-paper-plane text-base"></i>
					</DButton>
					<DButton Size="DSize.Sm" Active="MessageForm.MessageType is MessageType.FollowersOnly" OnClick="() => UpdateMessageType(MessageType.FollowersOnly)"
							 title="@Localizer[MessageType.FollowersOnly.ToString()]">
						<i class="ion-md-lock text-base"></i>
					</DButton>
					<DButton Size="DSize.Sm" Active="MessageForm.MessageType is MessageType.Unlisted" OnClick="() => UpdateMessageType(MessageType.Unlisted)"
							 title="@Localizer[MessageType.Unlisted.ToString()]">
						<i class="ion-md-unlock text-base"></i>
					</DButton>
					<DButton Size="DSize.Sm" Active="MessageForm.MessageType is MessageType.Public" OnClick="() => UpdateMessageType(MessageType.Public)"
							 title="@Localizer[MessageType.Public.ToString()]">
						<i class="ion-md-globe text-base"></i>
					</DButton>
				</ChildContent>
			</DDropdown>

			@* A label styled as a button opens the hidden file input. *@
			<label class="btn btn-sm @SUtility.IfTrueThen(ShouldDisableUpload(), "btn-disabled")">
				<InputFile accept="@acceptedFilesTypes" class="hidden" multiple="@ShouldHaveMultipleUpload()" OnChange="OnFileChange" disabled="@ShouldDisableUpload()" />
				<i class="ion-md-attach text-base"></i>
				@if (MessageForm.Media.Count != 0)
				{
					<span>+@MessageForm.Media.Count</span>
				}
			</label>

			<DSelect TValue="MediaType" Size="DSize.Sm" class="w-auto" Value="MessageForm.MediaType" ValueChanged="v => OnMediaTypeChanged(v)"
					 ValueExpression="() => MessageForm.MediaType" disabled="@(MessageForm.Media.Count > 0)">
				<Prefix>
					<i class="@MessageForm.MediaType.GetMediaTypeIcon()"></i>
				</Prefix>
				<ChildContent>
					@foreach (var mediaType in Enum.GetValues<MediaType>())
					{
						<option value="@mediaType">@Localizer[mediaType.ToString()]</option>
					}
				</ChildContent>
			</DSelect>

			<div class="flex flex-col">
				<DSelect TValue="ContentType" Size="DSize.Sm" class="w-auto" Value="MessageForm.ContentType" ValueChanged="v => OnContentTypeChanged(v)"
						 ValueExpression="() => MessageForm.ContentType">
					<Prefix>
						<i class="@MessageForm.ContentType.GetContentTypeIcon()"></i>
					</Prefix>
					<ChildContent>
						@foreach (var contentType in Enum.GetValues<ContentType>())
						{
							<option value="@contentType">@Localizer[contentType.ToString()]</option>
						}
					</ChildContent>
				</DSelect>
				<div class="text-error text-sm">
					<ValidationMessage For="() => MessageForm.ContentType" />
				</div>
			</div>

			@if (showPreviewButton)
			{
				<DButton Size="DSize.Sm" Active="isPreviewOpen" OnClick="OnOpenClosePreview" title="@Localizer["Show preview"]">
					<i class="@SUtility.IfTrueThen(isPreviewOpen, "ion-md-eye-off", "ion-md-eye") text-base"></i>
				</DButton>
			}

		</div>

		<DButton Size="DSize.Sm" Type="submit">
			<span>@Localizer["Post"]</span>
			<i class="ion-md-send"></i>
		</DButton>

	</div>

</EditForm>

@code {
	[CascadingParameter] CascadingState CascadingState { get; set; }
	[Parameter] public Message AnsweringMessage { get; set; }
	[Parameter] public EventCallback<MessageForm> OnMessageSubmit { get; set; }
	MessageForm MessageForm { get; set; } = new();
	int totalCharacters { get; set; } = 0;
	string fileInputErrorMessage { get; set; }
	string contentError { get; set; }
	string acceptedFilesTypes { get; set; } = ".jpg,.jpeg,.png,.gif";
	bool showPreviewButton { get; set; } = false;
	bool isPreviewOpen { get; set; } = false;

	void UpdateMessageType(MessageType messageType)
	{
		MessageForm.MessageType = messageType;
		MessageForm.IsScopeOptionsOpen = false;
	}

	protected override void OnInitialized()
	{
		if (AnsweringMessage != default)
		{
			MessageForm.Title = AnsweringMessage.Title;
			MessageForm.RootMessageId = AnsweringMessage.RootMessageId ?? AnsweringMessage.MessageId;
		}
	}

	bool ShouldDisableUpload()
	{
		switch (MessageForm.MediaType)
		{
			case MediaType.Images:
				return MessageForm.Media.Count == 5;
			case MediaType.Video:
			case MediaType.Audio:
				return MessageForm.Media.Count == 1;
			case MediaType.Documents:
				return MessageForm.Media.Count == 3;
			default:
				return true;
		}
	}

	bool ShouldHaveMultipleUpload()
	{
		return MessageForm.MediaType is MediaType.Images or MediaType.Documents;
	}

	async Task OnFileChange(InputFileChangeEventArgs eventArgs)
	{
		try
		{
			fileInputErrorMessage = string.Empty;
			var maximumFileCount = MessageForm.MediaType switch
			{
				MediaType.Images => 5,
				MediaType.Audio => 1,
				MediaType.Video => 1,
				MediaType.Documents => 3,
				_ => 0
			};
			if (eventArgs.FileCount > maximumFileCount)
			{
				fileInputErrorMessage = string.Format(Localizer["The maximum number of files accepted is {0}, but {1} were supplied."], maximumFileCount, eventArgs.FileCount);
				return;
			}
			if (eventArgs.FileCount + MessageForm.Media.Count > maximumFileCount)
			{
				fileInputErrorMessage = string.Format(Localizer["The maximum number of files accepted is {0}, but {1} were supplied."], maximumFileCount, $"{MessageForm.Media.Count}+{eventArgs.FileCount}");
				return;
			}
			var maxAllowedSize = MessageForm.MediaType switch
			{
				MediaType.Images => 3_145_728,
				MediaType.Audio => 5_242_880,
				MediaType.Video => 20_971_520,
				MediaType.Documents => 3_145_728,
				_ => 0
			};
			var uploadMedia = default(UploadMedia);
			using (var memStream = new MemoryStream())
				foreach (var file in eventArgs.GetMultipleFiles(maximumFileCount))
				{
					if (file.Name == default || file.ContentType == default) continue;
					if (MessageForm.Media.Any(m => m.FileName == file.Name)) continue;
					if (file.Size > maxAllowedSize)
					{
						fileInputErrorMessage += string.Format(Localizer["Supplied file \"{0}\" with size {1:N0}MBs exceeds the maximum of {2:N0}MBs."], file.Name, file.Size / 1_048_576, maxAllowedSize / 1_048_576) + "<br/>";
						continue;
					}

					uploadMedia = new()
						{
							FileName = file.Name,
							ContentType = file.ContentType,
							Size = file.Size
						};
					try
					{
						using (var imgStream = file.OpenReadStream(maxAllowedSize))
						{
							await imgStream.CopyToAsync(memStream);
							memStream.Position = 0;
							uploadMedia.Blob = memStream.ToArray();
							await memStream.FlushAsync();
						}
					}
					catch (IOException e)
					{
						fileInputErrorMessage = e.Message;
						continue;
					}
					catch (Exception e)
					{
						fileInputErrorMessage = e.Message;
						continue;
					}
					if (MessageForm.MediaType is MediaType.Images or MediaType.Audio)
						uploadMedia.Base64Preview = $"data:{uploadMedia.ContentType};base64,{Convert.ToBase64String(uploadMedia.Blob)}";

					MessageForm.Media.Add(uploadMedia);
				}
		}
		catch (Exception e)
		{
			fileInputErrorMessage = e.Message;
		}
	}

	void RemoveFile(UploadMedia media)
	{
		MessageForm.Media.Remove(media);
	}

	void OnTitleChanged(string value)
	{
		MessageForm.Title = value;
	}

	void ContentLengthChanged()
	{
		totalCharacters = MessageForm.Content?.Length ?? 0;
		StateHasChanged();
	}

	void OnContentTypeChanged(ContentType contentType)
	{
		MessageForm.ContentType = contentType;
		showPreviewButton = contentType is ContentType.Markdown or ContentType.HTML;
	}

	void OnMediaTypeChanged(MediaType mediaType)
	{
		MessageForm.MediaType = mediaType;
		acceptedFilesTypes = mediaType switch
		{
			MediaType.Images => ".jpg,.jpeg,.png,.gif",
			MediaType.Video => ".webm,.mp4,.m4v",
			MediaType.Audio => ".mp3,.wav,.flac,.m4a",
			MediaType.Documents => ".xlsx,.csv,.ppt,.odt",
			_ => default
		};
	}

	void OnOpenClosePreview()
	{
		isPreviewOpen = !isPreviewOpen;
	}

	async Task OnValidSubmit()
	{
		contentError = default;
		if ((MessageForm.Content is { Length: 0 } && MessageForm.Media.Count == 0))
		{
			contentError = Localizer["Missing content, either message or media"];
			return;
		}

		await OnMessageSubmit.InvokeAsync(MessageForm);
	}
}