more settings updates (#2111)

* update logging settings layout

* update hdhomerun settings layout

* update scanner settings layout

* update playout settings layout

* update xmltv settings layout

* update changelog

CHANGELOG.md

@@ -72,7 +72,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Remove some limits on multithreading that are no longer needed with latest ffmpeg
   - Mixed transcoding (software decode, hardware filters/encode) can now use multiple decode threads
 - Split main `Settings` page into multiple pages
-- Rework `FFmpeg Settings` layout to be less cramped and to work better on mobile
+  - Update layout on all new settings pages to be less cramped and to work better on mobile
 
 ### Fixed
 - Fix QSV acceleration in docker with older Intel devices

ErsatzTV/Pages/Settings/HDHRSettings.razor

@@ -1,37 +1,41 @@
 @page "/settings/hdhr"
+@using ErsatzTV.Annotations
 @using ErsatzTV.Application.HDHR
 @implements IDisposable
 @inject IMediator Mediator
 @inject ISnackbar Snackbar
 @inject ILogger<HDHRSettings> Logger
 
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+<MudForm @bind-IsValid="@_hdhrSuccess" Style="max-height: 100%">
-    <MudCard Style="width: 350px">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
-        <MudCardHeader>
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@(!_hdhrSuccess)" OnClick="@(_ => SaveHDHRSettings())" Class="ml-8" StartIcon="@Icons.Material.Filled.Save">Save Settings</MudButton>
-            <CardHeaderContent>
+    </MudPaper>
-                <MudText Typo="Typo.h6">HDHomeRun Settings</MudText>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
-            </CardHeaderContent>
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
-        </MudCardHeader>
+            <MudText Typo="Typo.h5" Class="mb-2">HDHomeRun</MudText>
-        <MudCardContent>
+            <MudDivider Class="mb-6" />
-            <MudTextField T="Guid" Label="UUID" @bind-Value="_uuid" ReadOnly="true" Disabled="true"/>
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
-        </MudCardContent>
+                <div class="d-flex justify-md-end">
-        <MudCardContent>
+                    <MudText>UUID</MudText>
-            <MudForm @bind-IsValid="@_hdhrSuccess">
+                </div>
-                <MudTextField T="int" Label="Tuner Count" @bind-Value="_tunerCount" Validation="@(new Func<int, string>(ValidateTunerCount))" Required="true" RequiredError="Tuner count is required!"/>
+                <MudTextField @bind-Value="_uuid" Disabled="true" />
-            </MudForm>
+            </MudStack>
-        </MudCardContent>
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
-        <MudCardActions>
+                <div class="d-flex justify-md-end">
-            <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@(!_hdhrSuccess)" OnClick="@(_ => SaveHDHRSettings())">Save Settings</MudButton>
+                    <MudText>Tuner Count</MudText>
-        </MudCardActions>
+                </div>
-    </MudCard>
+                <MudTextField @bind-Value="_tunerCount" Validation="@(new Func<int, string>(ValidateTunerCount))" Required="true" RequiredError="Tuner count is required!" />
-</MudContainer>
+            </MudStack>
+        </MudContainer>
+    </div>
+</MudForm>
 
 @code {
 	private readonly CancellationTokenSource _cts = new();
 
 	private bool _hdhrSuccess;
 	private int _tunerCount;
-    private Guid _uuid;
+    [UsedImplicitly] private Guid _uuid;
 
 	public void Dispose()
 	{

ErsatzTV/Pages/Settings/LoggingSettings.razor

@@ -6,69 +6,72 @@
 @inject ISnackbar Snackbar
 @inject ILogger<LoggingSettings> Logger
 
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+<MudForm Style="max-height: 100%">
-    <MudCard Style="width: 350px">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
-        <MudCardHeader>
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(_ => SaveLoggingSettings())" Class="ml-8" StartIcon="@Icons.Material.Filled.Save">Save Settings</MudButton>
-            <CardHeaderContent>
+    </MudPaper>
-                <MudText Typo="Typo.h6">Logging Settings</MudText>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
-            </CardHeaderContent>
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
-        </MudCardHeader>
+            <MudText Typo="Typo.h5" Class="mb-2">Logging</MudText>
-        <MudCardContent>
+            <MudDivider Class="mb-6" />
-            <MudForm>
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
-                <MudSelect Class="mt-3"
+                <div class="d-flex justify-md-end">
-                           Label="Default Minimum Log Level"
+                    <MudText>Default Minimum Log Level</MudText>
-                           @bind-Value="_loggingSettings.DefaultMinimumLogLevel"
+                </div>
-                           For="@(() => _loggingSettings.DefaultMinimumLogLevel)">
+                <MudSelect @bind-Value="_loggingSettings.DefaultMinimumLogLevel">
                     <MudSelectItem Value="@LogEventLevel.Debug">Debug</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Information">Information</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Warning">Warning</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Error">Error</MudSelectItem>
                 </MudSelect>
-                <MudSelect Class="mt-3"
+            </MudStack>
-                           Label="Scanning Minimum Log Level"
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
-                           @bind-Value="_loggingSettings.ScanningMinimumLogLevel"
+                <div class="d-flex justify-md-end">
-                           For="@(() => _loggingSettings.ScanningMinimumLogLevel)">
+                    <MudText>Scanning Minimum Log Level</MudText>
+                </div>
+                <MudSelect @bind-Value="_loggingSettings.ScanningMinimumLogLevel">
                     <MudSelectItem Value="@LogEventLevel.Debug">Debug</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Information">Information</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Warning">Warning</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Error">Error</MudSelectItem>
                 </MudSelect>
-                <MudSelect Class="mt-3"
+            </MudStack>
-                           Label="Scheduling Minimum Log Level"
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
-                           @bind-Value="_loggingSettings.SchedulingMinimumLogLevel"
+                <div class="d-flex justify-md-end">
-                           For="@(() => _loggingSettings.SchedulingMinimumLogLevel)">
+                    <MudText>Scheduling Minimum Log Level</MudText>
+                </div>
+                <MudSelect @bind-Value="_loggingSettings.SchedulingMinimumLogLevel">
                     <MudSelectItem Value="@LogEventLevel.Debug">Debug</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Information">Information</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Warning">Warning</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Error">Error</MudSelectItem>
                 </MudSelect>
-                <MudSelect Class="mt-3"
+            </MudStack>
-                           Label="Streaming Minimum Log Level"
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
-                           @bind-Value="_loggingSettings.StreamingMinimumLogLevel"
+                <div class="d-flex justify-md-end">
-                           For="@(() => _loggingSettings.StreamingMinimumLogLevel)">
+                    <MudText>Streaming Minimum Log Level</MudText>
+                </div>
+                <MudSelect @bind-Value="_loggingSettings.StreamingMinimumLogLevel">
                     <MudSelectItem Value="@LogEventLevel.Debug">Debug</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Information">Information</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Warning">Warning</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Error">Error</MudSelectItem>
                 </MudSelect>
-                <MudSelect Class="mt-3"
+            </MudStack>
-                           Label="Request Logging Minimum Log Level"
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
-                           @bind-Value="_loggingSettings.HttpMinimumLogLevel"
+                <div class="d-flex justify-md-end">
-                           For="@(() => _loggingSettings.HttpMinimumLogLevel)">
+                    <MudText>Request Logging Minimum Log Level</MudText>
+                </div>
+                <MudSelect @bind-Value="_loggingSettings.HttpMinimumLogLevel">
                     <MudSelectItem Value="@LogEventLevel.Debug">Debug</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Information">Information</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Warning">Warning</MudSelectItem>
                     <MudSelectItem Value="@LogEventLevel.Error">Error</MudSelectItem>
                 </MudSelect>
-            </MudForm>
+            </MudStack>
-        </MudCardContent>
+        </MudContainer>
-        <MudCardActions>
+    </div>
-            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(_ => SaveLoggingSettings())" StartIcon="@Icons.Material.Filled.Save">
+</MudForm>
-                Save Settings
-            </MudButton>
-        </MudCardActions>
-    </MudCard>
-</MudContainer>
 
 @code {
 	private readonly CancellationTokenSource _cts = new();

ErsatzTV/Pages/Settings/PlayoutSettings.razor

@@ -5,37 +5,31 @@
 @inject ISnackbar Snackbar
 @inject ILogger<PlayoutSettings> Logger
 
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+<MudForm @bind-IsValid="@_playoutSuccess" Style="max-height: 100%">
-    <MudCard Style="width: 350px">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
-        <MudCardHeader>
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@(!_playoutSuccess)" OnClick="@(_ => SavePlayoutSettings())" Class="ml-8" StartIcon="@Icons.Material.Filled.Save">Save Settings</MudButton>
-            <CardHeaderContent>
+    </MudPaper>
-                <MudText Typo="Typo.h6">Playout Settings</MudText>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
-            </CardHeaderContent>
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
-        </MudCardHeader>
+            <MudText Typo="Typo.h5" Class="mb-2">Playout</MudText>
-        <MudCardContent>
+            <MudDivider Class="mb-6" />
-            <MudForm @bind-IsValid="@_playoutSuccess">
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
-                <MudTextField T="int"
+                <div class="d-flex justify-md-end">
-                              Label="Days To Build"
+                    <MudText>Days To Build</MudText>
-                              @bind-Value="_playoutSettings.DaysToBuild"
+                </div>
-                              Validation="@(new Func<int, string>(ValidatePlayoutDaysToBuild))"
+                <MudTextField @bind-Value="_playoutSettings.DaysToBuild" Validation="@(new Func<int, string>(ValidatePlayoutDaysToBuild))" Required="true" RequiredError="Playout days to build is required!" Adornment="Adornment.End" AdornmentText="days" />
-                              Required="true"
+            </MudStack>
-                              RequiredError="Playout days to build is required!"
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
-                              Adornment="Adornment.End"
+                <div class="d-flex justify-md-end">
-                              AdornmentText="Days"/>
+                    <MudText>Skip Missing Items</MudText>
-                <MudElement HtmlTag="div" Class="mt-3">
+                </div>
-                    <MudTooltip Text="Controls whether file-not-found or unavailable items should be included in playouts">
+                <MudCheckBox @bind-Value="_playoutSettings.SkipMissingItems" Dense="true">
-                        <MudCheckBox Label="Skip Missing Items"
+                    <MudText Typo="Typo.caption" Style="font-weight: normal">Controls whether file-not-found or unavailable items should be included in playouts</MudText>
-                                     @bind-Value="_playoutSettings.SkipMissingItems"
+                </MudCheckBox>
-                                     For="@(() => _playoutSettings.SkipMissingItems)"/>
+            </MudStack>
-                    </MudTooltip>
+        </MudContainer>
-                </MudElement>
+    </div>
-            </MudForm>
+</MudForm>
-        </MudCardContent>
-        <MudCardActions>
-            <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@(!_playoutSuccess)" OnClick="@(_ => SavePlayoutSettings())">Save Settings</MudButton>
-        </MudCardActions>
-    </MudCard>
-</MudContainer>
 
 @code {
 	private readonly CancellationTokenSource _cts = new();

ErsatzTV/Pages/Settings/ScannerSettings.razor

@@ -5,30 +5,23 @@
 @inject ISnackbar Snackbar
 @inject ILogger<ScannerSettings> Logger
 
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+<MudForm @bind-IsValid="@_scannerSuccess" Style="max-height: 100%">
-    <MudCard Style="width: 350px">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
-        <MudCardHeader>
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@(!_scannerSuccess)" OnClick="@(_ => SaveScannerSettings())" Class="ml-8" StartIcon="@Icons.Material.Filled.Save">Save Settings</MudButton>
-            <CardHeaderContent>
+    </MudPaper>
-                <MudText Typo="Typo.h6">Scanner Settings</MudText>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
-            </CardHeaderContent>
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
-        </MudCardHeader>
+            <MudText Typo="Typo.h5" Class="mb-2">Scanner</MudText>
-        <MudCardContent>
+            <MudDivider Class="mb-6" />
-            <MudForm @bind-IsValid="@_scannerSuccess">
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
-                <MudTextField T="int"
+                <div class="d-flex justify-md-end">
-                              Label="Library Refresh Interval"
+                    <MudText>Library Refresh Interval</MudText>
-                              @bind-Value="_libraryRefreshInterval"
+                </div>
-                              Validation="@(new Func<int, string>(ValidateLibraryRefreshInterval))"
+                <MudTextField @bind-Value="_libraryRefreshInterval" Validation="@(new Func<int, string>(ValidateLibraryRefreshInterval))" Required="true" RequiredError="Library refresh interval is required!" Adornment="Adornment.End" AdornmentText="hours" />
-                              Required="true"
+            </MudStack>
-                              RequiredError="Library refresh interval is required!"
+        </MudContainer>
-                              Adornment="Adornment.End"
+    </div>
-                              AdornmentText="Hours"/>
+</MudForm>
-            </MudForm>
-        </MudCardContent>
-        <MudCardActions>
-            <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@(!_scannerSuccess)" OnClick="@(_ => SaveScannerSettings())">Save Settings</MudButton>
-        </MudCardActions>
-    </MudCard>
-</MudContainer>
 
 @code {
 	private readonly CancellationTokenSource _cts = new();

ErsatzTV/Pages/Settings/XMLTVSettings.razor

@@ -5,37 +5,32 @@
 @inject ISnackbar Snackbar
 @inject ILogger<XMLTVSettings> Logger
 
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+<MudForm Style="max-height: 100%">
-    <MudCard Style="width: 350px">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
-        <MudCardHeader>
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(_ => SaveXmltvSettings())" Class="ml-8" StartIcon="@Icons.Material.Filled.Save">Save Settings</MudButton>
-            <CardHeaderContent>
+    </MudPaper>
-                <MudText Typo="Typo.h6">XMLTV Settings</MudText>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
-            </CardHeaderContent>
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
-        </MudCardHeader>
+            <MudText Typo="Typo.h5" Class="mb-2">XMLTV</MudText>
-        <MudCardContent>
+            <MudDivider Class="mb-6" />
-            <MudTextField T="int"
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
-                          Label="Days To Build"
+                <div class="d-flex justify-md-end">
-                          @bind-Value="_xmltvSettings.DaysToBuild"
+                    <MudText>Days To Build</MudText>
-                          Validation="@(new Func<int, string>(ValidateXmltvDaysToBuild))"
+                </div>
-                          Required="true"
+                <MudTextField @bind-Value="_xmltvSettings.DaysToBuild" Validation="@(new Func<int, string>(ValidateXmltvDaysToBuild))" Required="true" RequiredError="XMLTV days to build is required!" Adornment="Adornment.End" AdornmentText="days" />
-                          RequiredError="XMLTV days to build is required!"
+            </MudStack>
-                          Adornment="Adornment.End"
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
-                          AdornmentText="Days"/>
+                <div class="d-flex justify-md-end">
-            <MudSelect Class="mt-3"
+                    <MudText>XMLTV Time Zone</MudText>
-                       Label="XMLTV Time Zone"
+                </div>
-                       @bind-Value="_xmltvSettings.TimeZone"
+                <MudSelect @bind-Value="_xmltvSettings.TimeZone">
-                       For="@(() => _xmltvSettings.TimeZone)">
                     <MudSelectItem Value="@XmltvTimeZone.Local">Local</MudSelectItem>
                     <MudSelectItem Value="@XmltvTimeZone.Utc">UTC</MudSelectItem>
                 </MudSelect>
-        </MudCardContent>
+            </MudStack>
-        <MudCardActions>
+        </MudContainer>
-            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(_ => SaveXmltvSettings())" StartIcon="@Icons.Material.Filled.Save">
+    </div>
-                Save Settings
+</MudForm>
-            </MudButton>
-        </MudCardActions>
-    </MudCard>
-</MudContainer>
 
 @code {
 	private readonly CancellationTokenSource _cts = new();