pimhwang
/
ErsatzTV
mirror of https://github.com/ErsatzTV/ErsatzTV.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

rework playlist editor (#2145)

pull/2146/head
Jason Dove 1 month ago committed by GitHub
parent
448d29546c
commit
cd75046348
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 284 additions and 246 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      ErsatzTV/Pages/BlockEditor.razor
  2. 518
      ErsatzTV/Pages/PlaylistEditor.razor

12
ErsatzTV/Pages/BlockEditor.razor
Unescape View File

@ -27,7 +27,7 @@
<div style="align-items: center; display: flex; margin-left: auto;" class="d-md-none"> <div style="align-items: center; display: flex; margin-left: auto;" class="d-md-none">
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
<MudMenu Icon="@Icons.Material.Filled.MoreVert"> <MudMenu Icon="@Icons.Material.Filled.MoreVert">
<MudMenuItem Icon="@Icons.Material.Filled.Save" Label="Save Block" OnClick="@SaveChanges"/> <MudMenuItem Icon="@Icons.Material.Filled.Save" Label="Save Block" OnClick="SaveChanges"/>
<MudMenuItem Icon="@Icons.Material.Filled.PlaylistAdd" Label="Add Block Item" OnClick="AddBlockItem"/> <MudMenuItem Icon="@Icons.Material.Filled.PlaylistAdd" Label="Add Block Item" OnClick="AddBlockItem"/>
<MudMenuItem Icon="@Icons.Material.Filled.Preview" Label="Preview Block Playout" OnClick="PreviewPlayout"/> <MudMenuItem Icon="@Icons.Material.Filled.Preview" Label="Preview Block Playout" OnClick="PreviewPlayout"/>
</MudMenu> </MudMenu>
@ -159,7 +159,7 @@
<div class="d-flex"> <div class="d-flex">
<MudText>Collection</MudText> <MudText>Collection</MudText>
</div> </div>
<MudAutocomplete Class="mt-3" T="MediaCollectionViewModel" <MudAutocomplete T="MediaCollectionViewModel"
@bind-Value="_selectedItem.Collection" SearchFunc="@SearchCollections" @bind-Value="_selectedItem.Collection" SearchFunc="@SearchCollections"
ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..."> ToStringFunc="@(c => c?.Name)" Placeholder="Type to search...">
<MoreItemsTemplate> <MoreItemsTemplate>
@ -176,7 +176,7 @@
<div class="d-flex"> <div class="d-flex">
<MudText>Multi Collection</MudText> <MudText>Multi Collection</MudText>
</div> </div>
<MudAutocomplete Class="mt-3" T="MultiCollectionViewModel" <MudAutocomplete T="MultiCollectionViewModel"
@bind-Value="_selectedItem.MultiCollection" SearchFunc="@SearchMultiCollections" @bind-Value="_selectedItem.MultiCollection" SearchFunc="@SearchMultiCollections"
ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..."> ToStringFunc="@(c => c?.Name)" Placeholder="Type to search...">
<MoreItemsTemplate> <MoreItemsTemplate>
@ -193,7 +193,7 @@
<div class="d-flex"> <div class="d-flex">
<MudText>Smart Collection</MudText> <MudText>Smart Collection</MudText>
</div> </div>
<MudAutocomplete Class="mt-3" T="SmartCollectionViewModel" <MudAutocomplete T="SmartCollectionViewModel"
@bind-Value="_selectedItem.SmartCollection" SearchFunc="@SearchSmartCollections" @bind-Value="_selectedItem.SmartCollection" SearchFunc="@SearchSmartCollections"
ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..."> ToStringFunc="@(c => c?.Name)" Placeholder="Type to search...">
<MoreItemsTemplate> <MoreItemsTemplate>
@ -210,7 +210,7 @@
<div class="d-flex"> <div class="d-flex">
<MudText>Television Show</MudText> <MudText>Television Show</MudText>
</div> </div>
<MudAutocomplete Class="mt-3" T="NamedMediaItemViewModel" <MudAutocomplete T="NamedMediaItemViewModel"
@bind-Value="_selectedItem.MediaItem" SearchFunc="@SearchTelevisionShows" @bind-Value="_selectedItem.MediaItem" SearchFunc="@SearchTelevisionShows"
ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..."> ToStringFunc="@(c => c?.Name)" Placeholder="Type to search...">
<MoreItemsTemplate> <MoreItemsTemplate>
@ -227,7 +227,7 @@
<div class="d-flex"> <div class="d-flex">
<MudText>Television Season</MudText> <MudText>Television Season</MudText>
</div> </div>
<MudAutocomplete Class="mt-3" T="NamedMediaItemViewModel" <MudAutocomplete T="NamedMediaItemViewModel"
@bind-Value="_selectedItem.MediaItem" SearchFunc="@SearchTelevisionSeasons" @bind-Value="_selectedItem.MediaItem" SearchFunc="@SearchTelevisionSeasons"
ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..." ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..."
MaxItems="20"> MaxItems="20">

518
ErsatzTV/Pages/PlaylistEditor.razor
Unescape View File

@ -9,216 +9,253 @@
@inject ISnackbar Snackbar @inject ISnackbar Snackbar
@inject IMediator Mediator @inject IMediator Mediator
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8"> <MudForm Style="max-height: 100%">
<MudText Typo="Typo.h4" Class="mb-4">Edit Playlist</MudText> <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
<div style="max-width: 400px"> <div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%; align-items: center" class="ml-6 mr-6">
<MudCard> <div class="d-none d-md-flex">
<MudCardContent> <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SaveChanges" StartIcon="@Icons.Material.Filled.Save">
<MudTextField Label="Name" @bind-Value="_playlist.Name" For="@(() => _playlist.Name)"/> Save Playlist
</MudCardContent> </MudButton>
</MudCard> <MudButton Class="ml-3" Variant="Variant.Filled" Color="Color.Default" OnClick="AddPlaylistItem" StartIcon="@Icons.Material.Filled.PlaylistAdd">
</div> Add Playlist Item
<MudButton Variant="Variant.Filled" Color="Color.Default" OnClick="@(_ => AddPlaylistItem())" Class="mt-4"> </MudButton>
Add Playlist Item <MudButton Class="ml-3" Variant="Variant.Filled" Color="Color.Secondary" OnClick="PreviewPlayout" StartIcon="@Icons.Material.Filled.Preview">
</MudButton> Preview Playlist Playout
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(_ => SaveChanges())" Class="mt-4 ml-4"> </MudButton>
Save Changes </div>
</MudButton> <div style="align-items: center; display: flex; margin-left: auto;" class="d-md-none">
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="@(_ => PreviewPlayout())" Class="mt-4 ml-4"> <div class="flex-grow-1"></div>
Preview Playlist Playout <MudMenu Icon="@Icons.Material.Filled.MoreVert">
</MudButton> <MudMenuItem Icon="@Icons.Material.Filled.Save" Label="Save Playlist" OnClick="SaveChanges"/>
<MudGrid> <MudMenuItem Icon="@Icons.Material.Filled.PlaylistAdd" Label="Add Playlist Item" OnClick="AddPlaylistItem"/>
<MudItem xs="12"> <MudMenuItem Icon="@Icons.Material.Filled.Preview" Label="Preview Playlist Playout" OnClick="PreviewPlayout"/>
<MudTable Class="mt-6" Hover="true" Items="_playlist.Items.OrderBy(i => i.Index)" Dense="true" @bind-SelectedItem="_selectedItem"> </MudMenu>
<ColGroup> </div>
<col/> </div>
<col/> </MudPaper>
<col/> <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
<col/> <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<col/> <MudText Typo="Typo.h5" Class="mb-2">Playlist</MudText>
<col style="width: 60px;"/> <MudDivider Class="mb-6"/>
<col style="width: 60px;"/> <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<col style="width: 60px;"/> <div class="d-flex">
<col style="width: 60px;"/> <MudText>Name</MudText>
</ColGroup> </div>
<HeaderContent> <MudTextField @bind-Value="_playlist.Name" For="@(() => _playlist.Name)"/>
<MudTh>Item Type</MudTh> </MudStack>
<MudTh>Item</MudTh> <MudText Typo="Typo.h5" Class="mt-10 mb-2">Playlist Items</MudText>
<MudTh>Playback Order</MudTh> <MudDivider Class="mb-6"/>
<MudTh>Play All</MudTh> <MudTable Hover="true" Items="_playlist.Items.OrderBy(i => i.Index)" Dense="true" @bind-SelectedItem="_selectedItem" RowClassFunc="@SelectedRowClassFunc">
<MudTh>Show In EPG</MudTh> <ColGroup>
<MudTh/> <MudHidden Breakpoint="Breakpoint.Xs">
<MudTh/> <col/>
<MudTh/> <col/>
<MudTh/> <col/>
</HeaderContent> <col/>
<RowTemplate> <col/>
<MudTd DataLabel="Item Type"> <col style="width: 240px;"/>
<MudText Typo="@(context == _selectedItem ? Typo.subtitle2 : Typo.body2)"> </MudHidden>
@context.ItemType </ColGroup>
</MudText> <HeaderContent>
</MudTd> <MudTh>Item Type</MudTh>
<MudTd DataLabel="Item"> <MudTh>Item</MudTh>
<MudText Typo="@(context == _selectedItem ? Typo.subtitle2 : Typo.body2)"> <MudTh>Playback Order</MudTh>
@context.ItemName <MudTh>Play All</MudTh>
</MudText> <MudTh>Show In EPG</MudTh>
</MudTd> <MudTh/>
<MudTd DataLabel="Playback Order"> </HeaderContent>
<MudText Typo="@(context == _selectedItem ? Typo.subtitle2 : Typo.body2)"> <RowTemplate>
@(context.PlaybackOrder > 0 ? context.PlaybackOrder : "") <MudTd DataLabel="Item Type">
</MudText> <MudText Typo="@(context == _selectedItem ? Typo.subtitle2 : Typo.body2)">
</MudTd> @context.ItemType
<MudTd> </MudText>
<MudCheckBox T="bool" Value="@context.PlayAll" ValueChanged="@(e => UpdatePlayAll(context, e))"/> </MudTd>
</MudTd> <MudTd DataLabel="Item">
<MudTd> <MudText Typo="@(context == _selectedItem ? Typo.subtitle2 : Typo.body2)">
<MudCheckBox T="bool" Value="@context.IncludeInProgramGuide" ValueChanged="@(e => UpdateEPG(context, e))"/> @context.ItemName
</MudTd> </MudText>
<MudTd> </MudTd>
<MudIconButton Icon="@Icons.Material.Filled.ContentCopy" <MudTd DataLabel="Playback Order">
OnClick="@(_ => CopyItem(context))"> <MudText Typo="@(context == _selectedItem ? Typo.subtitle2 : Typo.body2)">
</MudIconButton> @(context.PlaybackOrder > 0 ? context.PlaybackOrder : "")
</MudTd> </MudText>
<MudTd> </MudTd>
<MudIconButton Icon="@Icons.Material.Filled.ArrowUpward" <MudTd DataLabel="Play All">
OnClick="@(_ => MoveItemUp(context))" <MudCheckBox T="bool" Value="@context.PlayAll" ValueChanged="@(e => UpdatePlayAll(context, e))"/>
Disabled="@(_playlist.Items.All(x => x.Index >= context.Index))"> </MudTd>
</MudIconButton> <MudTd DataLabel="Show In EPG">
</MudTd> <MudCheckBox T="bool" Value="@context.IncludeInProgramGuide" ValueChanged="@(e => UpdateEPG(context, e))"/>
<MudTd> </MudTd>
<MudIconButton Icon="@Icons.Material.Filled.ArrowDownward" <MudTd>
OnClick="@(_ => MoveItemDown(context))" <div class="d-flex">
Disabled="@(_playlist.Items.All(x => x.Index <= context.Index))"> <MudIconButton Icon="@Icons.Material.Filled.ContentCopy"
</MudIconButton> OnClick="@(_ => CopyItem(context))">
</MudTd> </MudIconButton>
<MudTd> <MudIconButton Icon="@Icons.Material.Filled.ArrowUpward"
<MudIconButton Icon="@Icons.Material.Filled.Delete" OnClick="@(_ => MoveItemUp(context))"
OnClick="@(_ => RemovePlaylistItem(context))"> Disabled="@(_playlist.Items.All(x => x.Index >= context.Index))">
</MudIconButton> </MudIconButton>
</MudTd> <MudIconButton Icon="@Icons.Material.Filled.ArrowDownward"
</RowTemplate> OnClick="@(_ => MoveItemDown(context))"
</MudTable> Disabled="@(_playlist.Items.All(x => x.Index <= context.Index))">
</MudItem> </MudIconButton>
</MudGrid> <MudIconButton Icon="@Icons.Material.Filled.Delete"
<div class="mt-4"> OnClick="@(_ => RemovePlaylistItem(context))">
@if (_selectedItem is not null) </MudIconButton>
{ </div>
<EditForm Model="_selectedItem"> </MudTd>
<FluentValidationValidator/> </RowTemplate>
<div style="max-width: 400px;" class="mr-6"> </MudTable>
<MudCard> @if (_selectedItem is not null)
<MudCardContent> {
<MudSelect Class="mt-3" Label="Collection Type" @bind-Value="_selectedItem.CollectionType" For="@(() => _selectedItem.CollectionType)"> <MudText Typo="Typo.h5" Class="mt-10 mb-2">Playlist Item</MudText>
<MudSelectItem Value="ProgramScheduleItemCollectionType.Collection">Collection</MudSelectItem> <MudDivider Class="mb-6"/>
<MudSelectItem Value="ProgramScheduleItemCollectionType.TelevisionShow">Television Show</MudSelectItem> <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<MudSelectItem Value="ProgramScheduleItemCollectionType.TelevisionSeason">Television Season</MudSelectItem> <div class="d-flex">
<MudSelectItem Value="ProgramScheduleItemCollectionType.Artist">Artist</MudSelectItem> <MudText>Collection Type</MudText>
<MudSelectItem Value="ProgramScheduleItemCollectionType.MultiCollection">Multi Collection</MudSelectItem> </div>
<MudSelectItem Value="ProgramScheduleItemCollectionType.SmartCollection">Smart Collection</MudSelectItem> <MudSelect @bind-Value="_selectedItem.CollectionType" For="@(() => _selectedItem.CollectionType)">
<MudSelectItem Value="ProgramScheduleItemCollectionType.Movie">Movie</MudSelectItem> <MudSelectItem Value="ProgramScheduleItemCollectionType.Collection">Collection</MudSelectItem>
<MudSelectItem Value="ProgramScheduleItemCollectionType.Episode">Episode</MudSelectItem> <MudSelectItem Value="ProgramScheduleItemCollectionType.TelevisionShow">Television Show</MudSelectItem>
<MudSelectItem Value="ProgramScheduleItemCollectionType.MusicVideo">Music Video</MudSelectItem> <MudSelectItem Value="ProgramScheduleItemCollectionType.TelevisionSeason">Television Season</MudSelectItem>
<MudSelectItem Value="ProgramScheduleItemCollectionType.OtherVideo">Other Video</MudSelectItem> <MudSelectItem Value="ProgramScheduleItemCollectionType.Artist">Artist</MudSelectItem>
<MudSelectItem Value="ProgramScheduleItemCollectionType.Song">Song</MudSelectItem> <MudSelectItem Value="ProgramScheduleItemCollectionType.MultiCollection">Multi Collection</MudSelectItem>
<MudSelectItem Value="ProgramScheduleItemCollectionType.Image">Image</MudSelectItem> <MudSelectItem Value="ProgramScheduleItemCollectionType.SmartCollection">Smart Collection</MudSelectItem>
</MudSelect> <MudSelectItem Value="ProgramScheduleItemCollectionType.Movie">Movie</MudSelectItem>
@if (_selectedItem.CollectionType == ProgramScheduleItemCollectionType.Collection) <MudSelectItem Value="ProgramScheduleItemCollectionType.Episode">Episode</MudSelectItem>
{ <MudSelectItem Value="ProgramScheduleItemCollectionType.MusicVideo">Music Video</MudSelectItem>
<MudAutocomplete Class="mt-3" T="MediaCollectionViewModel" Label="Collection" <MudSelectItem Value="ProgramScheduleItemCollectionType.OtherVideo">Other Video</MudSelectItem>
@bind-Value="_selectedItem.Collection" SearchFunc="@SearchCollections" <MudSelectItem Value="ProgramScheduleItemCollectionType.Song">Song</MudSelectItem>
ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..."> <MudSelectItem Value="ProgramScheduleItemCollectionType.Image">Image</MudSelectItem>
<MoreItemsTemplate> </MudSelect>
<MudText Align="Align.Center" Class="px-4 py-1"> </MudStack>
Only the first 10 items are shown @if (_selectedItem.CollectionType == ProgramScheduleItemCollectionType.Collection)
</MudText> {
</MoreItemsTemplate> <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
</MudAutocomplete> <div class="d-flex">
} <MudText>Collection</MudText>
</div>
@if (_selectedItem.CollectionType == ProgramScheduleItemCollectionType.MultiCollection) <MudAutocomplete T="MediaCollectionViewModel"
{ @bind-Value="_selectedItem.Collection" SearchFunc="@SearchCollections"
<MudAutocomplete Class="mt-3" T="MultiCollectionViewModel" Label="Multi Collection" ToStringFunc="@(c => c?.Name)" Placeholder="Type to search...">
@bind-Value="_selectedItem.MultiCollection" SearchFunc="@SearchMultiCollections" <MoreItemsTemplate>
ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..."> <MudText Align="Align.Center" Class="px-4 py-1">
<MoreItemsTemplate> Only the first 10 items are shown
<MudText Align="Align.Center" Class="px-4 py-1"> </MudText>
Only the first 10 items are shown </MoreItemsTemplate>
</MudText> </MudAutocomplete>
</MoreItemsTemplate> </MudStack>
</MudAutocomplete> }
} @if (_selectedItem.CollectionType == ProgramScheduleItemCollectionType.MultiCollection)
{
@if (_selectedItem.CollectionType == ProgramScheduleItemCollectionType.SmartCollection) <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
{ <div class="d-flex">
<MudAutocomplete Class="mt-3" T="SmartCollectionViewModel" Label="Smart Collection" <MudText>Multi Collection</MudText>
@bind-Value="_selectedItem.SmartCollection" SearchFunc="@SearchSmartCollections" </div>
ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..."> <MudAutocomplete T="MultiCollectionViewModel"
<MoreItemsTemplate> @bind-Value="_selectedItem.MultiCollection" SearchFunc="@SearchMultiCollections"
<MudText Align="Align.Center" Class="px-4 py-1"> ToStringFunc="@(c => c?.Name)" Placeholder="Type to search...">
Only the first 10 items are shown <MoreItemsTemplate>
</MudText> <MudText Align="Align.Center" Class="px-4 py-1">
</MoreItemsTemplate> Only the first 10 items are shown
</MudAutocomplete> </MudText>
} </MoreItemsTemplate>
</MudAutocomplete>
@if (_selectedItem.CollectionType == ProgramScheduleItemCollectionType.TelevisionShow) </MudStack>
{ }
<MudAutocomplete Class="mt-3" T="NamedMediaItemViewModel" Label="Television Show" @if (_selectedItem.CollectionType == ProgramScheduleItemCollectionType.SmartCollection)
@bind-Value="_selectedItem.MediaItem" SearchFunc="@SearchTelevisionShows" {
ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..."> <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<MoreItemsTemplate> <div class="d-flex">
<MudText Align="Align.Center" Class="px-4 py-1"> <MudText>Smart Collection</MudText>
Only the first 10 items are shown </div>
</MudText> <MudAutocomplete T="SmartCollectionViewModel"
</MoreItemsTemplate> @bind-Value="_selectedItem.SmartCollection" SearchFunc="@SearchSmartCollections"
</MudAutocomplete> ToStringFunc="@(c => c?.Name)" Placeholder="Type to search...">
} <MoreItemsTemplate>
<MudText Align="Align.Center" Class="px-4 py-1">
@if (_selectedItem.CollectionType == ProgramScheduleItemCollectionType.TelevisionSeason) Only the first 10 items are shown
{ </MudText>
<MudAutocomplete Class="mt-3" T="NamedMediaItemViewModel" Label="Television Season" </MoreItemsTemplate>
@bind-Value="_selectedItem.MediaItem" SearchFunc="@SearchTelevisionSeasons" </MudAutocomplete>
ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..." </MudStack>
MaxItems="20"> }
<MoreItemsTemplate> @if (_selectedItem.CollectionType == ProgramScheduleItemCollectionType.TelevisionShow)
<MudText Align="Align.Center" Class="px-4 py-1"> {
Only the first 20 items are shown <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
</MudText> <div class="d-flex">
</MoreItemsTemplate> <MudText>Television Show</MudText>
</MudAutocomplete> </div>
} <MudAutocomplete T="NamedMediaItemViewModel"
@bind-Value="_selectedItem.MediaItem" SearchFunc="@SearchTelevisionShows"
@if (_selectedItem.CollectionType == ProgramScheduleItemCollectionType.Artist) ToStringFunc="@(c => c?.Name)" Placeholder="Type to search...">
{ <MoreItemsTemplate>
<MudAutocomplete Class="mt-3" T="NamedMediaItemViewModel" Label="Artist" <MudText Align="Align.Center" Class="px-4 py-1">
@bind-Value="_selectedItem.MediaItem" SearchFunc="@SearchArtists" Only the first 10 items are shown
ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..." </MudText>
MaxItems="10"> </MoreItemsTemplate>
<MoreItemsTemplate> </MudAutocomplete>
<MudText Align="Align.Center" Class="px-4 py-1"> </MudStack>
Only the first 10 items are shown }
</MudText> @if (_selectedItem.CollectionType == ProgramScheduleItemCollectionType.TelevisionSeason)
</MoreItemsTemplate> {
</MudAutocomplete> <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
} <div class="d-flex">
<MudText>Television Season</MudText>
@if (_selectedItem.CollectionType == ProgramScheduleItemCollectionType.Movie) </div>
{ <MudAutocomplete T="NamedMediaItemViewModel"
<MudAutocomplete Class="mt-3" T="NamedMediaItemViewModel" Label="Movie" @bind-Value="_selectedItem.MediaItem" SearchFunc="@SearchTelevisionSeasons"
@bind-Value="_selectedItem.MediaItem" SearchFunc="@SearchMovies" ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..."
ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..." MaxItems="20">
MaxItems="10"> <MoreItemsTemplate>
<MoreItemsTemplate> <MudText Align="Align.Center" Class="px-4 py-1">
<MudText Align="Align.Center" Class="px-4 py-1"> Only the first 20 items are shown
Only the first 10 items are shown </MudText>
</MudText> </MoreItemsTemplate>
</MoreItemsTemplate> </MudAutocomplete>
</MudAutocomplete> </MudStack>
} }
@if (_selectedItem.CollectionType == ProgramScheduleItemCollectionType.Artist)
<MudSelect Class="mt-3" {
Label="Playback Order" <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
@bind-Value="@_selectedItem.PlaybackOrder" <div class="d-flex">
<MudText>Artist</MudText>
</div>
<MudAutocomplete T="NamedMediaItemViewModel"
@bind-Value="_selectedItem.MediaItem" SearchFunc="@SearchArtists"
ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..."
MaxItems="10">
<MoreItemsTemplate>
<MudText Align="Align.Center" Class="px-4 py-1">
Only the first 10 items are shown
</MudText>
</MoreItemsTemplate>
</MudAutocomplete>
</MudStack>
}
@if (_selectedItem.CollectionType == ProgramScheduleItemCollectionType.Movie)
{
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<div class="d-flex">
<MudText>Movie</MudText>
</div>
<MudAutocomplete T="NamedMediaItemViewModel"
@bind-Value="_selectedItem.MediaItem" SearchFunc="@SearchMovies"
ToStringFunc="@(c => c?.Name)" Placeholder="Type to search..."
MaxItems="10">
<MoreItemsTemplate>
<MudText Align="Align.Center" Class="px-4 py-1">
Only the first 10 items are shown
</MudText>
</MoreItemsTemplate>
</MudAutocomplete>
</MudStack>
}
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
<div class="d-flex">
<MudText>Playback Order</MudText>
</div>
<MudSelect @bind-Value="@_selectedItem.PlaybackOrder"
For="@(() => _selectedItem.PlaybackOrder)" For="@(() => _selectedItem.PlaybackOrder)"
Disabled="@(_selectedItem.CollectionType is ProgramScheduleItemCollectionType.Movie or ProgramScheduleItemCollectionType.Episode or ProgramScheduleItemCollectionType.MusicVideo or ProgramScheduleItemCollectionType.OtherVideo or ProgramScheduleItemCollectionType.Song or ProgramScheduleItemCollectionType.Image)"> Disabled="@(_selectedItem.CollectionType is ProgramScheduleItemCollectionType.Movie or ProgramScheduleItemCollectionType.Episode or ProgramScheduleItemCollectionType.MusicVideo or ProgramScheduleItemCollectionType.OtherVideo or ProgramScheduleItemCollectionType.Song or ProgramScheduleItemCollectionType.Image)">
@switch (_selectedItem.CollectionType) @switch (_selectedItem.CollectionType)
@ -251,36 +288,35 @@
break; break;
} }
</MudSelect> </MudSelect>
</MudCardContent> </MudStack>
</MudCard> }
</div> else if (_previewItems is not null)
</EditForm> {
} <MudText Typo="Typo.h5" Class="mt-10 mb-2">Preview</MudText>
</div> <MudDivider Class="mb-6"/>
@if (_previewItems != null) <MudTable Hover="true"
{ Dense="true"
<MudTable Class="mt-8" Items="_previewItems">
Hover="true" <ToolBarContent>
Dense="true" <MudText Typo="Typo.h6">Playlist Playout Preview</MudText>
Items="_previewItems"> </ToolBarContent>
<ToolBarContent> <HeaderContent>
<MudText Typo="Typo.h6">Playlist Playout Preview</MudText> <MudTh>Start</MudTh>
</ToolBarContent> <MudTh>Finish</MudTh>
<HeaderContent> <MudTh>Media Item</MudTh>
<MudTh>Start</MudTh> <MudTh>Duration</MudTh>
<MudTh>Finish</MudTh> </HeaderContent>
<MudTh>Media Item</MudTh> <RowTemplate>
<MudTh>Duration</MudTh> <MudTd DataLabel="Start">@context.Start.ToString(@"hh\:mm\:ss")</MudTd>
</HeaderContent> <MudTd DataLabel="Finish">@context.Finish.ToString(@"hh\:mm\:ss")</MudTd>
<RowTemplate> <MudTd DataLabel="Media Item">@context.Title</MudTd>
<MudTd DataLabel="Start">@context.Start.ToString(@"hh\:mm\:ss")</MudTd> <MudTd DataLabel="Duration">@context.Duration</MudTd>
<MudTd DataLabel="Finish">@context.Finish.ToString(@"hh\:mm\:ss")</MudTd> </RowTemplate>
<MudTd DataLabel="Media Item">@context.Title</MudTd> </MudTable>
<MudTd DataLabel="Duration">@context.Duration</MudTd> }
</RowTemplate> </MudContainer>
</MudTable> </div>
} </MudForm>
</MudContainer>
@code { @code {
private readonly CancellationTokenSource _cts = new(); private readonly CancellationTokenSource _cts = new();
@ -511,4 +547,6 @@
private static void UpdateEPG(PlaylistItemEditViewModel context, bool includeInProgramGuide) => context.IncludeInProgramGuide = includeInProgramGuide; private static void UpdateEPG(PlaylistItemEditViewModel context, bool includeInProgramGuide) => context.IncludeInProgramGuide = includeInProgramGuide;
private static void UpdatePlayAll(PlaylistItemEditViewModel context, bool playAll) => context.PlayAll = playAll; private static void UpdatePlayAll(PlaylistItemEditViewModel context, bool playAll) => context.PlayAll = playAll;
private string SelectedRowClassFunc(PlaylistItemEditViewModel element, int rowNumber) => _selectedItem != null && _selectedItem == element ? "selected" : string.Empty;
} }
Write Preview
Loading…
Cancel
Save