use new form layout for channel editor (#2112)

This commit is contained in:
Jason Dove
2025-07-05 11:20:53 +00:00
committed by GitHub
parent 93afcd2f57
commit aff4fb0deb
7 changed files with 255 additions and 165 deletions
+3 -1
View File
@@ -72,7 +72,9 @@ 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 - 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 - Mixed transcoding (software decode, hardware filters/encode) can now use multiple decode threads
- Split main `Settings` page into multiple pages - Split main `Settings` page into multiple pages
- Update layout on all new settings pages to be less cramped and to work better on mobile - Update form layout to be less cramped and to work better on mobile
- All new (split) settings pages
- Channel editor
### Fixed ### Fixed
- Fix QSV acceleration in docker with older Intel devices - Fix QSV acceleration in docker with older Intel devices
@@ -44,5 +44,6 @@
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=subtitles_005Ccommands/@EntryIndexedValue">True</s:Boolean> <s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=subtitles_005Ccommands/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=television_005Cqueries/@EntryIndexedValue">True</s:Boolean> <s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=television_005Cqueries/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=templates_005Cqueries/@EntryIndexedValue">True</s:Boolean> <s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=templates_005Cqueries/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=validators/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=watermarks_005Ccommands/@EntryIndexedValue">True</s:Boolean> <s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=watermarks_005Ccommands/@EntryIndexedValue">True</s:Boolean>
<s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=watermarks_005Cqueries/@EntryIndexedValue">True</s:Boolean></wpf:ResourceDictionary> <s:Boolean x:Key="/Default/CodeInspection/NamespaceProvider/NamespaceFoldersToSkip/=watermarks_005Cqueries/@EntryIndexedValue">True</s:Boolean></wpf:ResourceDictionary>
@@ -1,7 +1,7 @@
using System.Linq.Expressions; using System.Linq.Expressions;
using System.Reflection; using System.Reflection;
namespace ErsatzTV; namespace ErsatzTV.Application;
public static partial class Validators public static partial class Validators
{ {
@@ -1,7 +1,7 @@
using System.Linq.Expressions; using System.Linq.Expressions;
using ErsatzTV.Core; using ErsatzTV.Core;
namespace ErsatzTV; namespace ErsatzTV.Application;
public static partial class Validators public static partial class Validators
{ {
@@ -1,7 +1,7 @@
using System.Linq.Expressions; using System.Linq.Expressions;
using ErsatzTV.Core; using ErsatzTV.Core;
namespace ErsatzTV; namespace ErsatzTV.Application;
public static partial class Validators public static partial class Validators
{ {
+239 -161
View File
@@ -1,6 +1,5 @@
@page "/channels/{Id:int?}" @page "/channels/{Id:int?}"
@page "/channels/add" @page "/channels/add"
@using System.Net
@using ErsatzTV.Application.Artworks @using ErsatzTV.Application.Artworks
@using ErsatzTV.Application.Channels @using ErsatzTV.Application.Channels
@using ErsatzTV.Application.FFmpegProfiles @using ErsatzTV.Application.FFmpegProfiles
@@ -10,6 +9,8 @@
@using ErsatzTV.Application.Templates @using ErsatzTV.Application.Templates
@using ErsatzTV.Application.Watermarks @using ErsatzTV.Application.Watermarks
@using ErsatzTV.Core.Domain.Filler @using ErsatzTV.Core.Domain.Filler
@using ErsatzTV.Validators
@using FluentValidation.Results
@using static Prelude @using static Prelude
@implements IDisposable @implements IDisposable
@inject NavigationManager NavigationManager @inject NavigationManager NavigationManager
@@ -17,161 +18,243 @@
@inject ISnackbar Snackbar @inject ISnackbar Snackbar
@inject IMediator Mediator @inject IMediator Mediator
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8"> <MudForm Model="@_model" @ref="@_form" Validation="@(_validator.ValidateValue)" ValidationDelay="0" Style="max-height: 100%">
<div style="max-width: 400px;"> <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
<EditForm EditContext="_editContext" OnSubmit="@HandleSubmitAsync"> <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-8" OnClick="HandleSubmitAsync" StartIcon="@(IsEdit ? Icons.Material.Filled.Save : Icons.Material.Filled.Add)">@(IsEdit ? "Save Changes" : "Add Channel")</MudButton>
<FluentValidationValidator/> </MudPaper>
<MudCard> <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
<MudCardHeader> <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<CardHeaderContent> <MudText Typo="Typo.h5" Class="mb-2">@(IsEdit ? "Edit Channel" : "Add Channel")</MudText>
<MudText Typo="Typo.h5">@(IsEdit ? "Edit Channel" : "Add Channel")</MudText> <MudDivider Class="mb-6"/>
</CardHeaderContent> <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
</MudCardHeader> <div class="d-flex justify-md-end">
<MudCardContent> <MudText>Number</MudText>
<MudTextField Label="Number" @bind-Value="_model.Number" For="@(() => _model.Number)" Immediate="true"/> </div>
<MudTextField Class="mt-3" Label="Name" @bind-Value="_model.Name" For="@(() => _model.Name)"/> <MudTextField @bind-Value="_model.Number" For="@(() => _model.Number)" Immediate="true"/>
<MudTextField Class="mt-3" Label="Group" @bind-Value="_model.Group" For="@(() => _model.Group)"/> </MudStack>
<MudTextField Class="mt-3" Label="Categories" @bind-Value="_model.Categories" For="@(() => _model.Categories)" Placeholder="Comma-separated list of categories"/> <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<MudSelect Class="mt-3" Label="Active Mode" @bind-Value="_model.ActiveMode" For="@(() => _model.ActiveMode)"> <div class="d-flex justify-md-end">
<MudSelectItem Value="@(ChannelActiveMode.Active)">Active</MudSelectItem> <MudText>Name</MudText>
<MudSelectItem Value="@(ChannelActiveMode.Hidden)">Hidden</MudSelectItem> </div>
<MudSelectItem Value="@(ChannelActiveMode.Inactive)">Inactive</MudSelectItem> <MudTextField @bind-Value="_model.Name" For="@(() => _model.Name)"/>
</MudSelect> </MudStack>
<MudSelect Class="mt-3" Label="Progress Mode" @bind-Value="_model.ProgressMode" For="@(() => _model.ProgressMode)"> <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<MudSelectItem Value="@(ChannelProgressMode.Always)">Always</MudSelectItem> <div class="d-flex justify-md-end">
<MudSelectItem Value="@(ChannelProgressMode.OnDemand)">On Demand</MudSelectItem> <MudText>Group</MudText>
</MudSelect> </div>
<MudSelect Class="mt-3" Label="Streaming Mode" @bind-Value="_model.StreamingMode" For="@(() => _model.StreamingMode)"> <MudTextField @bind-Value="_model.Group" For="@(() => _model.Group)"/>
<MudSelectItem Value="@(StreamingMode.TransportStreamHybrid)">MPEG-TS</MudSelectItem> </MudStack>
<MudSelectItem Value="@(StreamingMode.TransportStream)">MPEG-TS (Legacy)</MudSelectItem> <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<MudSelectItem Value="@(StreamingMode.HttpLiveStreamingDirect)">HLS Direct</MudSelectItem> <div class="d-flex justify-md-end">
<MudSelectItem Value="@(StreamingMode.HttpLiveStreamingSegmenter)">HLS Segmenter</MudSelectItem> <MudText>Categories</MudText>
<MudSelectItem Value="@(StreamingMode.HttpLiveStreamingSegmenterV2)">HLS Segmenter V2</MudSelectItem> </div>
</MudSelect> <MudTextField @bind-Value="_model.Categories" For="@(() => _model.Categories)" HelperText="Comma-separated list of categories"/>
<MudSelect Class="mt-3" Label="FFmpeg Profile" @bind-Value="_model.FFmpegProfileId" For="@(() => _model.FFmpegProfileId)" </MudStack>
Disabled="@(_model.StreamingMode == StreamingMode.HttpLiveStreamingDirect)"> <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
@foreach (FFmpegProfileViewModel profile in _ffmpegProfiles) <div class="d-flex justify-md-end">
{ <MudText>Active Mode</MudText>
<MudSelectItem Value="@profile.Id">@profile.Name</MudSelectItem> </div>
} <MudSelect @bind-Value="_model.ActiveMode" For="@(() => _model.ActiveMode)">
</MudSelect> <MudSelectItem Value="@(ChannelActiveMode.Active)">Active</MudSelectItem>
<MudSelect Class="mt-3" Label="Stream Selector Mode" @bind-Value="_model.StreamSelectorMode" For="@(() => _model.StreamSelectorMode)"> <MudSelectItem Value="@(ChannelActiveMode.Hidden)">Hidden</MudSelectItem>
<MudSelectItem Value="@(ChannelStreamSelectorMode.Default)">Default</MudSelectItem> <MudSelectItem Value="@(ChannelActiveMode.Inactive)">Inactive</MudSelectItem>
<MudSelectItem Value="@(ChannelStreamSelectorMode.Custom)">Custom</MudSelectItem> </MudSelect>
</MudSelect> </MudStack>
@if (_model.StreamSelectorMode is ChannelStreamSelectorMode.Default) <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<div class="d-flex justify-md-end">
<MudText>Progress Mode</MudText>
</div>
<MudSelect @bind-Value="_model.ProgressMode" For="@(() => _model.ProgressMode)">
<MudSelectItem Value="@(ChannelProgressMode.Always)">Always</MudSelectItem>
<MudSelectItem Value="@(ChannelProgressMode.OnDemand)">On Demand</MudSelectItem>
</MudSelect>
</MudStack>
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<div class="d-flex justify-md-end">
<MudText>Streaming Mode</MudText>
</div>
<MudSelect @bind-Value="_model.StreamingMode" For="@(() => _model.StreamingMode)">
<MudSelectItem Value="@(StreamingMode.TransportStreamHybrid)">MPEG-TS</MudSelectItem>
<MudSelectItem Value="@(StreamingMode.TransportStream)">MPEG-TS (Legacy)</MudSelectItem>
<MudSelectItem Value="@(StreamingMode.HttpLiveStreamingDirect)">HLS Direct</MudSelectItem>
<MudSelectItem Value="@(StreamingMode.HttpLiveStreamingSegmenter)">HLS Segmenter</MudSelectItem>
<MudSelectItem Value="@(StreamingMode.HttpLiveStreamingSegmenterV2)">HLS Segmenter V2</MudSelectItem>
</MudSelect>
</MudStack>
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<div class="d-flex justify-md-end">
<MudText>FFmpeg Profile</MudText>
</div>
<MudSelect @bind-Value="_model.FFmpegProfileId" For="@(() => _model.FFmpegProfileId)"
Disabled="@(_model.StreamingMode == StreamingMode.HttpLiveStreamingDirect)">
@foreach (FFmpegProfileViewModel profile in _ffmpegProfiles)
{ {
<MudSelect Class="mt-3" <MudSelectItem Value="@profile.Id">@profile.Name</MudSelectItem>
Label="Preferred Audio Language"
@bind-Value="_model.PreferredAudioLanguageCode"
For="@(() => _model.PreferredAudioLanguageCode)"
Clearable="true">
<MudSelectItem Value="@((string)null)">(none)</MudSelectItem>
@foreach (LanguageCodeViewModel culture in _availableCultures)
{
<MudSelectItem Value="@culture.ThreeLetterISOLanguageName">@culture.EnglishName</MudSelectItem>
}
</MudSelect>
<MudTextField Label="Preferred Audio Title" @bind-Value="_model.PreferredAudioTitle" For="@(() => _model.PreferredAudioTitle)"/>
<MudSelect Class="mt-3"
Label="Preferred Subtitle Language"
@bind-Value="_model.PreferredSubtitleLanguageCode"
For="@(() => _model.PreferredSubtitleLanguageCode)"
Clearable="true">
<MudSelectItem Value="@((string)null)">(none)</MudSelectItem>
@foreach (LanguageCodeViewModel culture in _availableCultures)
{
<MudSelectItem Value="@culture.ThreeLetterISOLanguageName">@culture.EnglishName</MudSelectItem>
}
</MudSelect>
<MudSelect Class="mt-3" Label="Subtitle Mode" @bind-Value="_model.SubtitleMode" For="@(() => _model.SubtitleMode)">
<MudSelectItem Value="@(ChannelSubtitleMode.None)">None</MudSelectItem>
<MudSelectItem Value="@(ChannelSubtitleMode.Forced)">Forced</MudSelectItem>
<MudSelectItem Value="@(ChannelSubtitleMode.Default)">Default</MudSelectItem>
<MudSelectItem Value="@(ChannelSubtitleMode.Any)">Any</MudSelectItem>
</MudSelect>
} }
else </MudSelect>
</MudStack>
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<div class="d-flex justify-md-end">
<MudText>Stream Selector Mode</MudText>
</div>
<MudSelect @bind-Value="_model.StreamSelectorMode" For="@(() => _model.StreamSelectorMode)">
<MudSelectItem Value="@(ChannelStreamSelectorMode.Default)">Default</MudSelectItem>
<MudSelectItem Value="@(ChannelStreamSelectorMode.Custom)">Custom</MudSelectItem>
</MudSelect>
</MudStack>
@if (_model.StreamSelectorMode is ChannelStreamSelectorMode.Default)
{
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<div class="d-flex justify-md-end">
<MudText>Preferred Audio Language</MudText>
</div>
<MudSelect @bind-Value="_model.PreferredAudioLanguageCode"
For="@(() => _model.PreferredAudioLanguageCode)"
Clearable="true">
<MudSelectItem Value="@((string)null)">(none)</MudSelectItem>
@foreach (LanguageCodeViewModel culture in _availableCultures)
{
<MudSelectItem Value="@culture.ThreeLetterISOLanguageName">@culture.EnglishName</MudSelectItem>
}
</MudSelect>
</MudStack>
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<div class="d-flex justify-md-end">
<MudText>Preferred Audio Title</MudText>
</div>
<MudTextField @bind-Value="_model.PreferredAudioTitle" For="@(() => _model.PreferredAudioTitle)"/>
</MudStack>
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<div class="d-flex justify-md-end">
<MudText>Preferred Subtitle Language</MudText>
</div>
<MudSelect @bind-Value="_model.PreferredSubtitleLanguageCode"
For="@(() => _model.PreferredSubtitleLanguageCode)"
Clearable="true">
<MudSelectItem Value="@((string)null)">(none)</MudSelectItem>
@foreach (LanguageCodeViewModel culture in _availableCultures)
{
<MudSelectItem Value="@culture.ThreeLetterISOLanguageName">@culture.EnglishName</MudSelectItem>
}
</MudSelect>
</MudStack>
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<div class="d-flex justify-md-end">
<MudText>Subtitle Mode</MudText>
</div>
<MudSelect @bind-Value="_model.SubtitleMode" For="@(() => _model.SubtitleMode)">
<MudSelectItem Value="@(ChannelSubtitleMode.None)">None</MudSelectItem>
<MudSelectItem Value="@(ChannelSubtitleMode.Forced)">Forced</MudSelectItem>
<MudSelectItem Value="@(ChannelSubtitleMode.Default)">Default</MudSelectItem>
<MudSelectItem Value="@(ChannelSubtitleMode.Any)">Any</MudSelectItem>
</MudSelect>
</MudStack>
}
else
{
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<div class="d-flex justify-md-end">
<MudText>Stream Selector</MudText>
</div>
<MudSelect @bind-Value="_model.StreamSelector"
For="@(() => _model.StreamSelector)">
<MudSelectItem T="string" Value="@((string)null)">(none)</MudSelectItem>
@foreach (string selector in _streamSelectors)
{
<MudSelectItem T="string" Value="@selector">@selector</MudSelectItem>
}
</MudSelect>
</MudStack>
}
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<div class="d-flex justify-md-end">
<MudText>Music Video Credits Mode</MudText>
</div>
<MudSelect @bind-Value="_model.MusicVideoCreditsMode" For="@(() => _model.MusicVideoCreditsMode)">
<MudSelectItem Value="@(ChannelMusicVideoCreditsMode.None)">None</MudSelectItem>
<MudSelectItem Value="@(ChannelMusicVideoCreditsMode.GenerateSubtitles)">Generate Subtitles</MudSelectItem>
</MudSelect>
</MudStack>
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<div class="d-flex justify-md-end">
<MudText>Music Video Credits Template</MudText>
</div>
<MudSelect @bind-Value="_model.MusicVideoCreditsTemplate"
For="@(() => _model.MusicVideoCreditsTemplate)"
Disabled="@(_model.MusicVideoCreditsMode != ChannelMusicVideoCreditsMode.GenerateSubtitles)">
<MudSelectItem T="string" Value="@((string)null)">(none)</MudSelectItem>
@foreach (string template in _musicVideoCreditsTemplates)
{ {
<MudSelect Class="mt-3" <MudSelectItem T="string" Value="@template">@template</MudSelectItem>
Label="Stream Selector"
@bind-Value="_model.StreamSelector"
For="@(() => _model.StreamSelector)">
<MudSelectItem T="string" Value="@((string)null)">(none)</MudSelectItem>
@foreach (string selector in _streamSelectors)
{
<MudSelectItem T="string" Value="@selector">@selector</MudSelectItem>
}
</MudSelect>
} }
<MudSelect Class="mt-3" Label="Music Video Credits Mode" @bind-Value="_model.MusicVideoCreditsMode" For="@(() => _model.MusicVideoCreditsMode)"> </MudSelect>
<MudSelectItem Value="@(ChannelMusicVideoCreditsMode.None)">None</MudSelectItem> </MudStack>
<MudSelectItem Value="@(ChannelMusicVideoCreditsMode.GenerateSubtitles)">Generate Subtitles</MudSelectItem> <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
</MudSelect> <div class="d-flex justify-md-end">
<MudSelect Class="mt-3" <MudText>Song Video Mode</MudText>
Label="Music Video Credits Template" </div>
@bind-Value="_model.MusicVideoCreditsTemplate" <MudSelect @bind-Value="_model.SongVideoMode" For="@(() => _model.SongVideoMode)">
For="@(() => _model.MusicVideoCreditsTemplate)" <MudSelectItem Value="@(ChannelSongVideoMode.Default)">Default</MudSelectItem>
Disabled="@(_model.MusicVideoCreditsMode != ChannelMusicVideoCreditsMode.GenerateSubtitles)"> <MudSelectItem Value="@(ChannelSongVideoMode.WithProgress)">With Progress</MudSelectItem>
<MudSelectItem T="string" Value="@((string)null)">(none)</MudSelectItem> </MudSelect>
@foreach (string template in _musicVideoCreditsTemplates) </MudStack>
{ <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<MudSelectItem T="string" Value="@template">@template</MudSelectItem> <div class="d-flex justify-md-end">
} <MudText>Logo</MudText>
</MudSelect> </div>
<MudSelect Class="mt-3" Label="Song Video Mode" @bind-Value="_model.SongVideoMode" For="@(() => _model.SongVideoMode)"> <InputFile id="fileInput" OnChange="UploadLogo" hidden/>
<MudSelectItem Value="@(ChannelSongVideoMode.Default)">Default</MudSelectItem> <MudButton HtmlTag="label"
<MudSelectItem Value="@(ChannelSongVideoMode.WithProgress)">With Progress</MudSelectItem> Variant="Variant.Filled"
</MudSelect> Color="Color.Primary"
<MudGrid Class="mt-3" Style="align-items: center" Justify="Justify.Center"> StartIcon="@Icons.Material.Filled.CloudUpload"
<MudItem xs="6"> for="fileInput">
<InputFile id="fileInput" OnChange="UploadLogo" hidden/> Upload Logo
@if (!string.IsNullOrWhiteSpace(_model.Logo?.Path) || !string.IsNullOrWhiteSpace(_model.ExternalLogoUrl)) </MudButton>
{ </MudStack>
<MudElement HtmlTag="img" src="@(string.IsNullOrWhiteSpace(_model.ExternalLogoUrl) ? _model.Logo.UrlWithContentType : _model.ExternalLogoUrl)" Style="max-height: 50px"/> <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
} <div class="d-flex justify-md-end">
</MudItem> <MudText>External Logo URL</MudText>
<MudItem xs="6"> </div>
<MudButton Class="ml-auto" HtmlTag="label" <MudTextField @bind-Value="_model.ExternalLogoUrl" For="@(() => _model.ExternalLogoUrl)"/>
Variant="Variant.Filled" </MudStack>
Color="Color.Primary" <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
StartIcon="@Icons.Material.Filled.CloudUpload" <div class="d-flex justify-md-end">
for="fileInput"> <MudText>Logo Preview</MudText>
Upload Logo </div>
</MudButton> @if (!string.IsNullOrWhiteSpace(_model.Logo?.Path) || !string.IsNullOrWhiteSpace(_model.ExternalLogoUrl))
</MudItem> {
</MudGrid> <MudElement HtmlTag="img" src="@(string.IsNullOrWhiteSpace(_model.ExternalLogoUrl) ? _model.Logo.UrlWithContentType : _model.ExternalLogoUrl)" Style="max-height: 50px"/>
<MudTextField Label="External Logo URL" @bind-Value="_model.ExternalLogoUrl" For="@(() => _model.ExternalLogoUrl)"/> }
<MudSelect Class="mt-3" Label="Watermark" @bind-Value="_model.WatermarkId" For="@(() => _model.WatermarkId)" </MudStack>
Disabled="@(_model.StreamingMode == StreamingMode.HttpLiveStreamingDirect)" <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
Clearable="true"> <div class="d-flex justify-md-end">
<MudSelectItem T="int?" Value="@((int?)null)">(none)</MudSelectItem> <MudText>Watermark</MudText>
@foreach (WatermarkViewModel watermark in _watermarks) </div>
{ <MudSelect @bind-Value="_model.WatermarkId" For="@(() => _model.WatermarkId)"
<MudSelectItem T="int?" Value="@watermark.Id">@watermark.Name</MudSelectItem> Disabled="@(_model.StreamingMode == StreamingMode.HttpLiveStreamingDirect)"
} Clearable="true">
</MudSelect> <MudSelectItem T="int?" Value="@((int?)null)">(none)</MudSelectItem>
<MudSelect Class="mt-3" @foreach (WatermarkViewModel watermark in _watermarks)
Label="Fallback Filler" {
@bind-Value="_model.FallbackFillerId" <MudSelectItem T="int?" Value="@watermark.Id">@watermark.Name</MudSelectItem>
For="@(() => _model.FallbackFillerId)" }
Clearable="true"> </MudSelect>
<MudSelectItem T="int?" Value="@((int?)null)">(none)</MudSelectItem> </MudStack>
@foreach (FillerPresetViewModel fillerPreset in _fillerPresets) <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
{ <div class="d-flex justify-md-end">
<MudSelectItem T="int?" Value="@fillerPreset.Id">@fillerPreset.Name</MudSelectItem> <MudText>Fallback Filler</MudText>
} </div>
</MudSelect> <MudSelect @bind-Value="_model.FallbackFillerId" For="@(() => _model.FallbackFillerId)" Clearable="true">
</MudCardContent> <MudSelectItem T="int?" Value="@((int?)null)">(none)</MudSelectItem>
<MudCardActions> @foreach (FillerPresetViewModel fillerPreset in _fillerPresets)
<MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary"> {
@(IsEdit ? "Save Changes" : "Add Channel") <MudSelectItem T="int?" Value="@fillerPreset.Id">@fillerPreset.Name</MudSelectItem>
</MudButton> }
</MudCardActions> </MudSelect>
</MudCard> </MudStack>
</EditForm> </MudContainer>
</div> </div>
</MudContainer> </MudForm>
@code { @code {
private readonly CancellationTokenSource _cts = new(); private readonly CancellationTokenSource _cts = new();
@@ -180,8 +263,8 @@
public int? Id { get; set; } public int? Id { get; set; }
private readonly ChannelEditViewModel _model = new(); private readonly ChannelEditViewModel _model = new();
private EditContext _editContext; private readonly ChannelEditViewModelValidator _validator = new();
private ValidationMessageStore _messageStore; private MudForm _form;
private List<FFmpegProfileViewModel> _ffmpegProfiles = []; private List<FFmpegProfileViewModel> _ffmpegProfiles = [];
private List<LanguageCodeViewModel> _availableCultures = []; private List<LanguageCodeViewModel> _availableCultures = [];
@@ -260,12 +343,6 @@
} }
} }
protected override void OnInitialized()
{
_editContext = new EditContext(_model);
_messageStore = new ValidationMessageStore(_editContext);
}
private bool IsEdit => Id.HasValue; private bool IsEdit => Id.HasValue;
private async Task LoadFFmpegProfiles(CancellationToken cancellationToken) => private async Task LoadFFmpegProfiles(CancellationToken cancellationToken) =>
@@ -286,8 +363,9 @@
private async Task HandleSubmitAsync() private async Task HandleSubmitAsync()
{ {
_messageStore.Clear(); await _form.Validate();
if (_editContext.Validate()) ValidationResult result = await _validator.ValidateAsync(_model, _cts.Token);
if (result.IsValid)
{ {
Seq<BaseError> errorMessage = IsEdit ? (await Mediator.Send(_model.ToUpdate(), _cts.Token)).LeftToSeq() : (await Mediator.Send(_model.ToCreate(), _cts.Token)).LeftToSeq(); Seq<BaseError> errorMessage = IsEdit ? (await Mediator.Send(_model.ToUpdate(), _cts.Token)).LeftToSeq() : (await Mediator.Send(_model.ToCreate(), _cts.Token)).LeftToSeq();
@@ -1,6 +1,7 @@
using ErsatzTV.Core.Domain; using ErsatzTV.Core.Domain;
using ErsatzTV.ViewModels; using ErsatzTV.ViewModels;
using FluentValidation; using FluentValidation;
using FluentValidation.Results;
namespace ErsatzTV.Validators; namespace ErsatzTV.Validators;
@@ -24,4 +25,12 @@ public class ChannelEditViewModelValidator : AbstractValidator<ChannelEditViewMo
.WithMessage("External logo url is invalid"); .WithMessage("External logo url is invalid");
}); });
} }
public Func<object, string, Task<IEnumerable<string>>> ValidateValue => async (model, propertyName) =>
{
ValidationResult result = await ValidateAsync(ValidationContext<ChannelEditViewModel>.CreateWithOptions((ChannelEditViewModel)model, x => x.IncludeProperties(propertyName)));
if (result.IsValid)
return [];
return result.Errors.Select(e => e.ErrorMessage);
};
} }