Alternating message background colors (lay295#744)

* Add support for alternating message background colors in chat renders * Clarify some wording * Add alternate message background settings * Undo rider being rider
Geckon01 · Jun 26, 2023 · 175228e · 175228e
1 parent 70ff00a
commit 175228e
Show file tree

Hide file tree

Showing 17 changed files with 228 additions and 47 deletions.
diff --git a/TwitchDownloaderCLI/Modes/Arguments/ChatRenderArgs.cs b/TwitchDownloaderCLI/Modes/Arguments/ChatRenderArgs.cs
@@ -12,10 +12,13 @@ public class ChatRenderArgs
         [Option('o', "output", Required = true, HelpText = "File the program will output to.")]
         public string OutputFile { get; set; }
 
-        [Option("background-color", Default = "#111111", HelpText = "Color of background in HEX string format.")]
+        [Option("background-color", Default = "#111111", HelpText = "The render background color in the string format of '#RRGGBB' or '#AARRGGBB' in hexadecimal.")]
         public string BackgroundColor { get; set; }
 
-        [Option("message-color", Default = "#ffffff", HelpText = "Color of messages in HEX string format.")]
+        [Option("alt-background-color", Default = "#191919", HelpText = "The alternate message background color in the string format of '#RRGGBB' or '#AARRGGBB' in hexadecimal. Requires --alternate-backgrounds")]
+        public string AlternateBackgroundColor { get; set; }
+
+        [Option("message-color", Default = "#ffffff", HelpText = "The message text color in the string format of '#RRGGBB' or '#AARRGGBB' in hexadecimal.")]
         public string MessageColor { get; set; }
 
         [Option('w', "chat-width", Default = 350, HelpText = "Width of chat render.")]
@@ -97,7 +100,10 @@ public class ChatRenderArgs
         public int BadgeFilterMask { get; set; }
 
         [Option("dispersion", Default = false, HelpText = "In November 2022 a Twitch API change made chat messages download only in whole seconds. If there are multiple messages on a second, they will be intelligently distributed over the second to improve chat flow. Requires an update rate less than 1.0 for effective results.")]
-        public bool? DisperseCommentOffsets { get; set; }
+        public bool DisperseCommentOffsets { get; set; }
+
+        [Option("alternate-backgrounds", Default = false, HelpText = "Alternates the background color of every other chat message to help tell them apart.")]
+        public bool AlternateMessageBackgrounds { get; set; }
 
         [Option("offline", Default = false, HelpText = "Render completely offline using only embedded emotes, badges, and bits from the input json.")]
         public bool Offline { get; set; }

diff --git a/TwitchDownloaderCLI/Modes/RenderChat.cs b/TwitchDownloaderCLI/Modes/RenderChat.cs
@@ -32,6 +32,7 @@ private static ChatRenderOptions GetRenderOptions(ChatRenderArgs inputOptions)
                 InputFile = inputOptions.InputFile,
                 OutputFile = inputOptions.OutputFile,
                 BackgroundColor = SKColor.Parse(inputOptions.BackgroundColor),
+                AlternateBackgroundColor = SKColor.Parse(inputOptions.AlternateBackgroundColor),
                 MessageColor = SKColor.Parse(inputOptions.MessageColor),
                 ChatHeight = inputOptions.ChatHeight,
                 ChatWidth = inputOptions.ChatWidth,
@@ -90,10 +91,11 @@ private static ChatRenderOptions GetRenderOptions(ChatRenderArgs inputOptions)
                 EmoteSpacingScale = inputOptions.ScaleEmoteSpace,
                 AccentIndentScale = inputOptions.ScaleAccentIndent,
                 AccentStrokeScale = inputOptions.ScaleAccentStroke,
-                DisperseCommentOffsets = (bool)inputOptions.DisperseCommentOffsets
+                DisperseCommentOffsets = inputOptions.DisperseCommentOffsets,
+                AlternateMessageBackgrounds = inputOptions.AlternateMessageBackgrounds
             };
 
-            if (renderOptions.GenerateMask && renderOptions.BackgroundColor.Alpha == 255)
+            if (renderOptions.GenerateMask && renderOptions.BackgroundColor.Alpha == 255 && !(renderOptions.AlternateMessageBackgrounds! && renderOptions.AlternateBackgroundColor.Alpha != 255))
             {
                 Console.WriteLine("[WARNING] - Generate mask option has been selected with an opaque background. You most likely want to set a transparent background with --background-color \"#00000000\"");
             }

diff --git a/TwitchDownloaderCLI/README.md b/TwitchDownloaderCLI/README.md
@@ -152,10 +152,13 @@ The path to the `.json` or `.json.gz` chat file input.
 File the program will output to.
 
 **--background-color**
-(Default: `#111111`) Color of background in HEX string format.
+(Default: `#111111`) The render background color in the string format of `#RRGGBB` or `#AARRGGBB` in hexadecimal.
+
+**--alt-background-color**
+(Default: `#191919`) The alternate message background color in the string format of `#RRGGBB` or `#AARRGGBB` in hexadecimal. Requires `--alternate-backgrounds`.
 
 **--message-color**
-(Default: `#ffffff`) Color of messages in HEX string format.
+(Default: `#ffffff`) The message text color in the string format of `#RRGGBB` or `#AARRGGBB` in hexadecimal.
 
 **-w / --chat-width**
 (Default: `350`) Width of chat render.
@@ -240,6 +243,9 @@ Other = `1`, Broadcaster = `2`, Moderator = `4`, VIP = `8`, Subscriber = `16`, P
 **--dispersion**
 (Default: `false`) In November 2022 a Twitch API change made chat messages download only in whole seconds. If there are multiple messages on a second, they will be intelligently distributed over the second to improve chat flow. Requires an update rate less than 1.0 for effective results.
 
+**--alternate-backgrounds**
+(Default: `false`) Alternates the background color of every other chat message to help tell them apart.
+
 **--offline**
 (Default: `false`) Render completely offline using only embedded emotes, badges, and bits from the input json.
 

diff --git a/TwitchDownloaderCore/ChatRenderer.cs b/TwitchDownloaderCore/ChatRenderer.cs
@@ -512,6 +512,12 @@ private UpdateFrame GenerateUpdateFrame(int currentTick, int sectionDefaultYPos,
                 {
                     var comment = commentList[commentListIndex];
                     frameHeight -= comment.Image.Height + renderOptions.VerticalPadding;
+
+                    if (renderOptions.AlternateMessageBackgrounds && comment.CommentIndex % 2 == 1)
+                    {
+                        frameCanvas.DrawRect(0, frameHeight - renderOptions.VerticalPadding / 2f, newFrame.Width, comment.Image.Height + renderOptions.VerticalPadding, renderOptions.AlternateBackgroundPaint);
+                    }
+
                     frameCanvas.DrawBitmap(comment.Image, 0, frameHeight);
 
                     for (int i = 0; i < comment.Emotes.Count; i++)

diff --git a/TwitchDownloaderCore/Options/ChatRenderOptions.cs b/TwitchDownloaderCore/Options/ChatRenderOptions.cs
@@ -10,6 +10,10 @@ public class ChatRenderOptions
         public string InputFile { get; set; }
         public string OutputFile { get; set; }
         public SKColor BackgroundColor { get; set; }
+        public SKColor AlternateBackgroundColor { get; set; }
+        private SKPaint _alternateBackgroundPaint;
+        public SKPaint AlternateBackgroundPaint => _alternateBackgroundPaint ??= new SKPaint { Color = AlternateBackgroundColor, BlendMode = SKBlendMode.Src };
+        public bool AlternateMessageBackgrounds { get; set; }
         public SKColor MessageColor { get; set; }
         public int ChatHeight { get; set; }
         public int ChatWidth { get; set; }

diff --git a/TwitchDownloaderWPF/App.config b/TwitchDownloaderWPF/App.config
@@ -59,6 +59,9 @@
             <setting name="STVEmotes" serializeAs="String">
                 <value>True</value>
             </setting>
+            <setting name="BackgroundColorA" serializeAs="String">
+                <value>255</value>
+            </setting>
             <setting name="BackgroundColorR" serializeAs="String">
                 <value>17</value>
             </setting>
@@ -68,6 +71,18 @@
             <setting name="BackgroundColorB" serializeAs="String">
                 <value>17</value>
             </setting>
+            <setting name="AlternateBackgroundColorA" serializeAs="String">
+                <value>255</value>
+            </setting>
+            <setting name="AlternateBackgroundColorR" serializeAs="String">
+                <value>19</value>
+            </setting>
+            <setting name="AlternateBackgroundColorG" serializeAs="String">
+                <value>19</value>
+            </setting>
+            <setting name="AlternateBackgroundColorB" serializeAs="String">
+                <value>19</value>
+            </setting>
             <setting name="FontColorR" serializeAs="String">
                 <value>255</value>
             </setting>
@@ -86,9 +101,6 @@
             <setting name="VideoCodec" serializeAs="String">
                 <value>H264</value>
             </setting>
-            <setting name="BackgroundColorA" serializeAs="String">
-                <value>255</value>
-            </setting>
             <setting name="OAuth" serializeAs="String">
                 <value />
             </setting>
@@ -227,6 +239,9 @@
             <setting name="DownloadThrottleEnabled" serializeAs="String">
                 <value>False</value>
             </setting>
+            <setting name="AlternateMessageBackgrounds" serializeAs="String">
+                <value>False</value>
+            </setting>
         </TwitchDownloaderWPF.Properties.Settings>
     </userSettings>
 </configuration>
diff --git a/TwitchDownloaderWPF/PageChatRender.xaml b/TwitchDownloaderWPF/PageChatRender.xaml
@@ -50,12 +50,14 @@
                         <TextBlock Text="{lex:Loc ChatFontSize}" HorizontalAlignment="Right" Margin="0,21,0,0" Foreground="{DynamicResource AppText}"/>
                         <TextBlock Text="{lex:Loc FontColor}" HorizontalAlignment="Right" Margin="0,16,0,0" Foreground="{DynamicResource AppText}"/>
                         <TextBlock Text="{lex:Loc BackgroundColor}" HorizontalAlignment="Right" Margin="0,12,0,0" Foreground="{DynamicResource AppText}"/>
+                        <TextBlock Text="{lex:Loc AlternateBackgroundColor}" HorizontalAlignment="Right" Margin="0,12,0,0" Foreground="{DynamicResource AppText}"/>
                     </StackPanel>
                     <StackPanel Orientation="Vertical" Margin="0,10,0,5">
                         <ComboBox x:Name="comboFont" MinWidth="180" MaxWidth="300" HorizontalAlignment="Left" Background="{DynamicResource AppElementBackground}" BorderBrush="{DynamicResource AppElementBorder}" Foreground="{DynamicResource AppText}"/>
                         <hc:NumericUpDown x:Name="numFontSize" Value="12" Width="75" HorizontalAlignment="Left" Margin="0,7,0,0" Minimum="1" Background="{DynamicResource AppElementBackground}" BorderBrush="{DynamicResource AppElementBorder}" Foreground="{DynamicResource AppText}" />
                         <xctk:ColorPicker x:Name="colorFont" SelectedColor="#FFFFFF" Width="50" UsingAlphaChannel="False" Margin="0,5,0,0" HorizontalAlignment="Left" Background="White" BorderBrush="{DynamicResource AppElementInnerBorder}" DropDownBackground="{DynamicResource AppElementInnerBackground}" Foreground="{DynamicResource AppText}" HeaderBackground="{DynamicResource AppElementInnerBackground}" HeaderForeground="{DynamicResource AppText}" TabBackground="{DynamicResource AppElementBorder}" TabForeground="{DynamicResource AppText}"/>
                         <xctk:ColorPicker x:Name="colorBackground" SelectedColor="#111111" Width="50" UsingAlphaChannel="True" Margin="0,5,0,0" HorizontalAlignment="Left" Background="White" BorderBrush="{DynamicResource AppElementInnerBorder}" DropDownBackground="{DynamicResource AppElementInnerBackground}" Foreground="{DynamicResource AppText}" HeaderBackground="{DynamicResource AppElementInnerBackground}" HeaderForeground="{DynamicResource AppText}" TabBackground="{DynamicResource AppElementBorder}" TabForeground="{DynamicResource AppText}"/>
+                        <xctk:ColorPicker x:Name="colorAlternateBackground" SelectedColor="#191919" Width="50" UsingAlphaChannel="True" Margin="0,5,0,0" HorizontalAlignment="Left" Background="White" BorderBrush="{DynamicResource AppElementInnerBorder}" DropDownBackground="{DynamicResource AppElementInnerBackground}" Foreground="{DynamicResource AppText}" HeaderBackground="{DynamicResource AppElementInnerBackground}" HeaderForeground="{DynamicResource AppText}" TabBackground="{DynamicResource AppElementBorder}" TabForeground="{DynamicResource AppText}"/>
                     </StackPanel>
                 </DockPanel>
             </TabItem>
@@ -68,6 +70,7 @@
                         <TextBlock Text="{lex:Loc ChatBadges}" HorizontalAlignment="Right" Margin="0,6,0,0" Foreground="{DynamicResource AppText}"/>
                         <TextBlock Text="{lex:Loc UpdateRate}" HorizontalAlignment="Right" Margin="0,14,0,0" Foreground="{DynamicResource AppText}"/>
                         <TextBlock HorizontalAlignment="Right" Margin="0,14,0,0" Foreground="{DynamicResource AppText}"><Run Text="{lex:Loc MessageDispersion}"/><Hyperlink ToolTipService.ShowDuration="30000" Foreground="{DynamicResource AppHyperlink}"><Hyperlink.ToolTip><Run Text="{lex:Loc MessageDispersionTooltip}"/></Hyperlink.ToolTip>(?)</Hyperlink>:</TextBlock>
+                        <TextBlock HorizontalAlignment="Right" Margin="0,6,0,0" MaxWidth="120" TextWrapping="Wrap" Foreground="{DynamicResource AppText}"><Run Text="{lex:Loc AlternateMessageBackgrounds}"/><Hyperlink ToolTipService.ShowDuration="30000" Foreground="{DynamicResource AppHyperlink}"><Hyperlink.ToolTip><Run Text="{lex:Loc AlternateMessageBackgroundsTooltip}"/></Hyperlink.ToolTip>(?)</Hyperlink>:</TextBlock>
                     </StackPanel>
                     <StackPanel Orientation="Vertical" Margin="0,10,0,5">
                         <CheckBox x:Name="checkOutline" HorizontalAlignment="Left" Margin="0,2,0,0" BorderBrush="{DynamicResource AppElementBorder}"/>
@@ -76,6 +79,7 @@
                         <CheckBox x:Name="checkBadge" HorizontalAlignment="Left" Margin="0,6,0,0" BorderBrush="{DynamicResource AppElementBorder}"/>
                         <TextBox x:Name="textUpdateTime" Text="1.0" Width="50" HorizontalAlignment="Left" Margin="0,7,0,0" Background="{DynamicResource AppElementBackground}" BorderBrush="{DynamicResource AppElementBorder}" Foreground="{DynamicResource AppText}"/>
                         <CheckBox x:Name="checkDispersion" HorizontalAlignment="Left" Margin="0,6,0,0" BorderBrush="{DynamicResource AppElementBorder}"/>
+                        <CheckBox x:Name="checkAlternateMessageBackgrounds" HorizontalAlignment="Left" Margin="0,22,0,0" BorderBrush="{DynamicResource AppElementBorder}"/>
                     </StackPanel>
                     <StackPanel Orientation="Vertical" Margin="15,10,5,2">
                         <TextBlock Text="{lex:Loc BttvEmotes}" HorizontalAlignment="Right" Margin="0,0,0,0" Foreground="{DynamicResource AppText}"/>