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" autocomplete="off"
				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="@MaxContentLength" autocomplete="off"
					   placeholder="@Localizer["oh shit... here we go again"]" rows="3" />
			<span class="absolute text-xs opacity-50 right-2 bottom-1">@ContentLength/@MaxContentLength</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>

	<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)
									</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!" autocomplete="off"
									   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)
							</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)
							</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>

	<ErrorViewer ContainerClass="mb-3" AdditionalError="@contentError" AdditionalErrors="fileErrors" />

	<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="@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>

			@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" Disabled="IsDefaultDisabled">
			<span>@Localizer["Post"]</span>
			<i class="ion-md-send"></i>
		</DButton>

	</div>

</EditForm>

@code {
	const int MaxContentLength = 5_000;

	[Inject] ILoggingService Logger { get; set; }
	[Parameter] public Message AnsweringMessage { get; set; }
	[Parameter] public EventCallback<MessageForm> OnMessageSubmit { get; set; }
	MessageForm MessageForm { get; set; } = new();
	List<string> fileErrors = [];
	string contentError;
	string acceptedFilesTypes = ".jpg,.jpeg,.png,.gif";
	bool showPreviewButton;
	bool isPreviewOpen;

	// Content is null until the user types: a form starts without text.
	int ContentLength => MessageForm.Content?.Length ?? 0;

	int MaximumFileCount => MessageForm.MediaType switch
	{
		MediaType.Images => 5,
		MediaType.Video or MediaType.Audio => 1,
		MediaType.Documents => 3,
		_ => 0
	};

	long MaximumFileSize => MessageForm.MediaType switch
	{
		MediaType.Images or MediaType.Documents => 3_145_728,
		MediaType.Audio => 5_242_880,
		MediaType.Video => 20_971_520,
		_ => 0
	};

	protected override void OnInitialized()
	{
		IsLoading = false;
		if (AnsweringMessage is null)
			return;

		MessageForm.Title = AnsweringMessage.Title;
		MessageForm.RootMessageId = AnsweringMessage.RootMessageId ?? AnsweringMessage.MessageId;
	}

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

	bool ShouldDisableUpload() => MessageForm.Media.Count >= MaximumFileCount;

	bool ShouldHaveMultipleUpload() => MessageForm.MediaType is MediaType.Images or MediaType.Documents;

	async Task OnFileChange(InputFileChangeEventArgs eventArgs)
	{
		fileErrors = [];
		var maximumFileCount = MaximumFileCount;
		if (eventArgs.FileCount + MessageForm.Media.Count > maximumFileCount)
		{
			fileErrors.Add(Localizer["The maximum number of files accepted is {0}, but {1} were supplied.", maximumFileCount,
				MessageForm.Media.Count + eventArgs.FileCount]);
			return;
		}

		var maximumFileSize = MaximumFileSize;
		foreach (var file in eventArgs.GetMultipleFiles(maximumFileCount))
		{
			if (file.Name == default || file.ContentType == default || MessageForm.Media.Any(m => m.FileName == file.Name))
				continue;

			if (file.Size > maximumFileSize)
			{
				fileErrors.Add(Localizer["Supplied file \"{0}\" with size {1} exceeds the maximum of {2}.", file.Name,
					file.Size.GetFileSize(Localizer), maximumFileSize.GetFileSize(Localizer)]);
				continue;
			}

			var uploadMedia = await ReadFile(file, maximumFileSize);
			if (uploadMedia is null)
			{
				fileErrors.Add(Localizer["The file \"{0}\" could not be read.", file.Name]);
				continue;
			}

			MessageForm.Media.Add(uploadMedia);
		}
	}

	/// <summary>Reads a picked file into memory; null when the browser can't read it (logged).</summary>
	async Task<UploadMedia> ReadFile(IBrowserFile file, long maximumFileSize, CancellationToken cancellationToken = default)
	{
		try
		{
			using var memoryStream = new MemoryStream();
			await using var fileStream = file.OpenReadStream(maximumFileSize, cancellationToken);
			await fileStream.CopyToAsync(memoryStream, cancellationToken);
			var uploadMedia = new UploadMedia
			{
				FileName = file.Name,
				ContentType = file.ContentType,
				Size = file.Size,
				Blob = memoryStream.ToArray()
			};
			if (MessageForm.MediaType is MediaType.Images or MediaType.Audio)
				uploadMedia.Base64Preview = $"data:{uploadMedia.ContentType};base64,{Convert.ToBase64String(uploadMedia.Blob)}";
			return uploadMedia;
		}
		catch (Exception ex)
		{
			await Logger.ProcessError(ex, $"{nameof(MessageUpsertForm)}.{nameof(ReadFile)}:{file.Name}", cancellationToken);
			return default;
		}
	}

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

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

	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 (string.IsNullOrWhiteSpace(MessageForm.Content) && MessageForm.Media.Count == 0)
		{
			contentError = Localizer["Missing content, either message or media"];
			return;
		}

		await OnMessageSubmit.InvokeAsync(MessageForm);
	}
}