Moonlight-Panel/Moonlight
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added typing indicators

Browse Source
This commit is contained in:
Marcel Baumgartner
2023-02-23 11:39:58 +01:00
parent 60693d25da
commit d02781b13a
6 changed files with 233 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
Moonlight/Shared/Views/Support.razor
View File

@@ -99,7 +99,30 @@
</LazyLoader>
</div>
<div class="card-footer">
<textarea @bind="Content" class="form-control form-control-flush mb-3" rows="1" placeholder="Type a message">
@{
var typingUsers = SupportClientService.GetTypingUsers();
}
@if (typingUsers.Any())
{
<span class="mb-5 fs-5 d-flex flex-row">
<div class="wave me-3">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
@if (typingUsers.Length > 1)
{
<span>@(typingUsers.Aggregate((current, next) => current + ", " + next)) <TL>are typing</TL></span>
}
else
{
<span>@(typingUsers.First()) <TL>is typing</TL></span>
}
</span>
}
<textarea @bind="Content" @oninput="OnTyping" class="form-control mb-3" rows="1" placeholder="Type a message">
</textarea>
<div class="d-flex flex-stack">
<div class="d-flex align-items-center me-2">
@@ -124,6 +147,8 @@
private SupportMessage[] Messages;
private string Content = "";
private DateTime LastTypingTimestamp = DateTime.UtcNow.AddMinutes(-10);
private async Task Load(LazyLoader lazyLoader)
{
@@ -132,10 +157,16 @@
await lazyLoader.SetText("Starting chat client");
SupportClientService.OnNewMessage += OnNewMessage;
SupportClientService.OnUpdateTyping += OnUpdateTyping;
await SupportClientService.Start();
}
private async void OnUpdateTyping(object? sender, EventArgs e)
{
await InvokeAsync(StateHasChanged);
}
private async void OnNewMessage(object? sender, SupportMessage e)
{
Messages = (await SupportClientService.GetMessages()).Reverse().ToArray();
@@ -153,4 +184,14 @@
{
Messages = (await SupportClientService.GetMessages()).Reverse().ToArray();
}
private async void OnTyping()
{
if ((DateTime.UtcNow - LastTypingTimestamp).TotalSeconds > 5)
{
LastTypingTimestamp = DateTime.UtcNow;
await SupportClientService.TriggerTyping();
}
}
}