Added attachment template selector

Author: Avid29

src/Quarrel.Client/Models/Messages/Embeds/Attachment.cs

@@ -15,6 +15,7 @@ internal Attachment(JsonAttachment jsonAttachment, QuarrelClient context) :
         {
             Id = jsonAttachment.Id;
             Filename = jsonAttachment.Filename;
+            Size = jsonAttachment.Size;
             Url = jsonAttachment.Url;
             ProxyUrl = jsonAttachment.ProxyUrl;
             Height = jsonAttachment.Height;

src/Quarrel.ViewModels/Bindables/Messages/BindableMessage.cs

@@ -4,7 +4,6 @@
 using Microsoft.Toolkit.Mvvm.Input;
 using Microsoft.Toolkit.Mvvm.Messaging;
 using Quarrel.Bindables.Abstract;
-using Quarrel.Bindables.Channels.Abstract;
 using Quarrel.Bindables.Channels.Interfaces;
 using Quarrel.Bindables.Messages.Embeds;
 using Quarrel.Bindables.Users;

src/Quarrel/Converters/Common/Text/CaseConverter.cs

@@ -16,7 +16,6 @@ public class CaseConverter
         /// </summary>
         public CharacterCasing Case { get; set; }
 
-
         /// <summary>
         /// Initializes a new instance of the <see cref="CaseConverter"/> class.
         /// </summary>

src/Quarrel/Converters/Discord/Messages/Attachments/HumanizeByteSizeConverter.cs

@@ -0,0 +1,16 @@
+// Quarrel © 2022
+
+using Humanizer;
+using Humanizer.Bytes;
+
+namespace Quarrel.Converters.Discord.Messages.Attachments
+{
+    public class HumanizeByteSizeConverter
+    {
+        public static string Convert(ulong bytes)
+        {
+            var byteSize = new ByteSize(bytes);
+            return byteSize.Humanize("0.00");
+        }
+    }
+}

src/Quarrel/DataTemplates/MessageTemplates.xaml

@@ -3,14 +3,44 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:tc="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    xmlns:aconvert="using:Quarrel.Converters.Discord.Messages.Attachments"
     xmlns:bconvert="using:Quarrel.Converters.Common.Boolean"
     xmlns:tconvert="using:Quarrel.Converters.Common.Time"
     xmlns:mconvert="using:Quarrel.Converters.Discord.Messages"
     xmlns:qc="using:Quarrel.Controls"
     xmlns:mcontrols="using:Quarrel.Controls.Panels.Messages"
     xmlns:bindablemessages="using:Quarrel.Bindables.Messages"
     xmlns:bindableembeds="using:Quarrel.Bindables.Messages.Embeds"
+    xmlns:mselector="using:Quarrel.Selectors.Messages"
     xmlns:markdown="using:Quarrel.Markdown">
+    
+    <SolidColorBrush x:Key="AttachmentBackgroundBrush" Color="#1E1E1E"/>
+    <SolidColorBrush x:Key="AttachmentBorderBrush" Color="#3C3C3C"/>
+
+    <DataTemplate x:Key="DefaultAttachmentTemplate" x:DataType="bindableembeds:BindableAttachment">
+        <Grid VerticalAlignment="Top" HorizontalAlignment="Left"
+              BorderThickness="1" CornerRadius="4" Padding="8,8,12,8"
+              Background="{StaticResource AttachmentBackgroundBrush}"
+              BorderBrush="{StaticResource AttachmentBorderBrush}">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition Width="Auto"/>
+            </Grid.ColumnDefinitions>
+            <FontIcon x:Name="FileIcon" FontSize="36" Glyph="" HorizontalAlignment="Left" Margin="0,0,6,0"/>
+            <StackPanel Grid.Column="1">
+                <HyperlinkButton Content="{x:Bind Attachment.Filename}" NavigateUri="{x:Bind Attachment.ProxyUrl}" FontSize="18" Padding="0" Style="{StaticResource PlainTextHyperlinkStyle}"/>
+                <TextBlock Text="{x:Bind aconvert:HumanizeByteSizeConverter.Convert(Attachment.Size)}" FontSize="11" Opacity="0.5" Margin="0,-2,0,0"/>
+            </StackPanel>
+        </Grid>
+    </DataTemplate>
+
+    <DataTemplate x:Key="ImageAttachmentTemplate" x:DataType="bindableembeds:BindableAttachment">
+        <tc:ImageEx Source="{x:Bind Attachment.ProxyUrl}" MaxWidth="400" CornerRadius="2"/>
+    </DataTemplate>
+
+    <mselector:AttachmentTemplateSelector x:Key="AttachmentTemplateSelector"
+                                          DefaultAttachmentTemplate="{StaticResource DefaultAttachmentTemplate}"
+                                          ImageAttachmentTemplate="{StaticResource ImageAttachmentTemplate}"/>
 
     <DataTemplate x:Key="DefaultMessageTemplate" x:DataType="bindablemessages:BindableMessage">
         <!--Grid must be wrapped in a user control to enable the VisualStateManager-->
@@ -93,14 +123,9 @@
                         <markdown:MessageRenderer Text="{x:Bind Message.Content, Mode=OneWay}" Context="{x:Bind Mode=OneWay}"
                                                   HorizontalAlignment="Left"/>
 
-                        <ItemsControl ItemsSource="{x:Bind Message.Attachments}"
-                                      HorizontalAlignment="Left">
-                            <ItemsControl.ItemTemplate>
-                                <DataTemplate x:DataType="bindableembeds:BindableAttachment">
-                                    <tc:ImageEx Source="{x:Bind Attachment.ProxyUrl}" MaxWidth="400" CornerRadius="2"/>
-                                </DataTemplate>
-                            </ItemsControl.ItemTemplate>
-                        </ItemsControl>
+                        <ItemsControl ItemsSource="{x:Bind Attachments}"
+                                      ItemTemplateSelector="{StaticResource AttachmentTemplateSelector}"
+                                      HorizontalAlignment="Left"/>
                     </StackPanel>
                 </Grid>
             </Grid>

src/Quarrel/Quarrel.csproj

@@ -149,6 +149,7 @@
     <Compile Include="Converters\Discord\Channels\IsPrivateChannelConverter.cs" />
     <Compile Include="Converters\Discord\Channels\IsPrivateChannelVisibleConverter.cs" />
     <Compile Include="Converters\Discord\Channels\MemberCountConverter.cs" />
+    <Compile Include="Converters\Discord\Messages\Attachments\HumanizeByteSizeConverter.cs" />
     <Compile Include="Converters\Discord\Messages\InfoMessageColorConverter.cs" />
     <Compile Include="Converters\Discord\Messages\InfoMessageContentConverter.cs" />
     <Compile Include="Converters\Discord\Messages\InfoMessageIconConverter.cs" />
@@ -178,6 +179,7 @@
     <Compile Include="Selectors\Channels\ChannelEnabledStyleSelector.cs" />
     <Compile Include="Selectors\Guilds\GuildStyleSelector.cs" />
     <Compile Include="Selectors\Guilds\GuildTemplateSelector.cs" />
+    <Compile Include="Selectors\Messages\AttachmentTemplateSelector.cs" />
     <Compile Include="Selectors\Messages\MessageTemplateSelector.cs" />
     <Compile Include="Selectors\SubPages\SubPageTemplateSelector.cs" />
     <Compile Include="Selectors\SubPages\UserSettings\UserSettingsMenuItemSelector.cs" />

src/Quarrel/Selectors/Messages/AttachmentTemplateSelector.cs

@@ -0,0 +1,39 @@
+// Quarrel © 2022
+
+using Quarrel.Bindables.Messages.Embeds;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace Quarrel.Selectors.Messages
+{
+    public class AttachmentTemplateSelector : DataTemplateSelector
+    {
+        public DataTemplate? DefaultAttachmentTemplate { get; set; }
+
+        public DataTemplate? ImageAttachmentTemplate { get; set; }
+
+        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
+        {
+            if (item is BindableAttachment attachment)
+            {
+                int index = attachment.Attachment.Filename.LastIndexOf('.');
+                string filetype = attachment.Attachment.Filename.Substring(index + 1).ToLowerInvariant();
+                return filetype switch
+                {
+                    "png" or
+                    "jpg" or
+                    "jpeg" or
+                    "gif" => ImageAttachmentTemplate,
+
+                    //"mp4" or
+                    //"mov" or
+                    //"wmv" => VideoAttachmentTemplate
+
+                    _ => DefaultAttachmentTemplate,
+                };
+            }
+
+            return null;
+        }
+    }
+}