feat: loading icon when clicking start update

#6

Author: ProgrammingByPermutation

src/TwitchStreamingTools/TwitchStreamingTools.csproj

@@ -35,7 +35,6 @@
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
         <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.3.1"/>
         <PackageReference Include="Avalonia.ReactiveUI" Version="11.3.1"/>
-        <PackageReference Include="Material.Avalonia" Version="3.12.0"/>
         <PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="9.0.6"/>
         <PackageReference Include="NAudio.Wasapi" Version="2.2.1"/>
         <PackageReference Include="NAudio.WinMM" Version="2.2.1"/>

src/TwitchStreamingTools/ViewModels/NewVersionWindowViewModel.cs

@@ -17,6 +17,11 @@ namespace TwitchStreamingTools.ViewModels;
 ///   The view model for the <seealso cref="NewVersionWindow" /> class.
 /// </summary>
 public class NewVersionWindowViewModel : ViewModelBase {
+  /// <summary>
+  ///   True if updating the application currently, false otherwise.
+  /// </summary>
+  private bool _isUpdating;
+
   /// <summary>
   ///   The local version of the software.
   /// </summary>
@@ -36,7 +41,7 @@ public class NewVersionWindowViewModel : ViewModelBase {
   ///   Initializes a new instance of the <see cref="NewVersionWindowViewModel" /> class.
   /// </summary>
   public NewVersionWindowViewModel() {
-    OpenBrowser = ReactiveCommand.Create(LaunchBrowser);
+    UpdateSoftware = ReactiveCommand.Create(StartUpdateSoftware);
     CloseWindow = ReactiveCommand.Create<Window>(CloseWindowCommand);
 
     Task.Factory.StartNew(async () => {
@@ -69,9 +74,17 @@ public string? ServerVersion {
   }
 
   /// <summary>
-  ///   A command to open the browser window at the current update's location.
+  ///   True if updating the application currently, false otherwise.
+  /// </summary>
+  public bool IsUpdating {
+    get => _isUpdating;
+    set => this.RaiseAndSetIfChanged(ref _isUpdating, value);
+  }
+
+  /// <summary>
+  ///   A command to update the software.
   /// </summary>
-  public ICommand OpenBrowser { get; }
+  public ICommand UpdateSoftware { get; }
 
   /// <summary>
   ///   A command to close the current window.
@@ -89,7 +102,8 @@ private void CloseWindowCommand(Window self) {
   /// <summary>
   ///   Launches the web browser at the new release page.
   /// </summary>
-  private void LaunchBrowser() {
+  private void StartUpdateSoftware() {
+    IsUpdating = true;
     GitHubUpdateManager.PrepareUpdate()
       .ContinueWith(_ => {
         if (string.IsNullOrWhiteSpace(_newVersionUrl)) {

src/TwitchStreamingTools/Views/Loading.axaml

@@ -0,0 +1,30 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" Width="200" Height="200"
+             x:Class="TwitchStreamingTools.Views.Loading">
+    <UserControl.Styles>
+        <Style Selector="Rectangle.textColor">
+            <Setter Property="Fill" Value="rgb(204, 200, 175)" />
+            <Style.Animations>
+                <Animation Duration="0:0:1" IterationCount="INFINITE">
+                    <KeyFrame Cue="0%">
+                        <Setter Property="Opacity" Value="0.0" />
+                        <Setter Property="RotateTransform.Angle" Value="0.0" />
+                    </KeyFrame>
+                    <KeyFrame Cue="50%">
+                        <Setter Property="Opacity" Value="1.0" />
+                        <Setter Property="RotateTransform.Angle" Value="90.0" />
+                    </KeyFrame>
+                    <KeyFrame Cue="100%">
+                        <Setter Property="Opacity" Value="0.0" />
+                        <Setter Property="RotateTransform.Angle" Value="180.0" />
+                    </KeyFrame>
+                </Animation>
+            </Style.Animations>
+        </Style>
+    </UserControl.Styles>
+
+    <Rectangle Classes="textColor" Width="50" Height="50" />
+</UserControl>

src/TwitchStreamingTools/Views/Loading.axaml.cs

@@ -0,0 +1,30 @@
+using Avalonia;
+using Avalonia.Controls;
+
+namespace TwitchStreamingTools.Views;
+
+/// <summary>
+///   A loading icon.
+/// </summary>
+public partial class Loading : UserControl {
+  /// <summary>
+  ///   The width of the icon.
+  /// </summary>
+  public static readonly StyledProperty<int> WidthProperty =
+    AvaloniaProperty.Register<Loading, int>(nameof(Width), 1);
+
+  /// <summary>
+  ///   Initializes a new instance of the <see cref="Loading" /> class.
+  /// </summary>
+  public Loading() {
+    InitializeComponent();
+  }
+
+  /// <summary>
+  ///   The width of the icon.
+  /// </summary>
+  public int Width {
+    get => GetValue(WidthProperty);
+    set => SetValue(WidthProperty, value);
+  }
+}

src/TwitchStreamingTools/Views/NewVersionWindow.axaml

@@ -14,7 +14,8 @@
         ExtendClientAreaTitleBarHeightHint="-1"
         SizeToContent="WidthAndHeight"
         Icon="/Assets/update.png"
-        Title="New Version Available">
+        Title="New Version Available"
+        Background="rgb(26, 24, 23)">
     <Design.DataContext>
         <viewModels:NewVersionWindowViewModel />
     </Design.DataContext>
@@ -23,8 +24,9 @@
                VerticalAlignment="Stretch"
                Name="ContentWrapper">
         <views:WindowsTitleBar IsSeamless="True" />
-        <DockPanel Background="Transparent">
-            <StackPanel Margin="10">
+        <StackPanel>
+            <!-- The normal panel -->
+            <StackPanel Margin="10" IsVisible="{Binding !IsUpdating}">
                 <TextBlock TextWrapping="Wrap" Margin="0 0 0 10">There is a new version of the software available, would you like to download it?</TextBlock>
                 <StackPanel Orientation="Horizontal">
                     <Label>App Version: </Label>
@@ -35,13 +37,25 @@
                     <TextBlock Text="{Binding ServerVersion}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                 </StackPanel>
                 <StackPanel Orientation="Horizontal">
-                    <Button Command="{Binding OpenBrowser}" Margin="0 10 0 0">Open Browser...</Button>
+                    <Button Command="{Binding UpdateSoftware}" Margin="0 10 0 0">Install New Version</Button>
                     <Button Command="{Binding CloseWindow}" CommandParameter="{Binding ElementName=Window}"
                             Margin="10 10 0 0">
                         Close
                     </Button>
                 </StackPanel>
             </StackPanel>
-        </DockPanel>
+
+            <!-- The waiting to update display -->
+            <StackPanel IsVisible="{Binding IsUpdating}">
+                <Label HorizontalAlignment="Center"
+                       VerticalAlignment="Center"
+                       FontSize="32"
+                       FontWeight="Bold"
+                       Foreground="rgb(204, 200, 175)">
+                    Updating
+                </Label>
+                <views:Loading Width="100" Height="100" />
+            </StackPanel>
+        </StackPanel>
     </DockPanel>
 </Window>