improve search results ui on mobile (#2133)
* show brief health check messages on mobile * update libraries layout * improve search results ui on mobile
This commit is contained in:
Jason Dove
+18
-13
@@ -84,21 +84,26 @@
|
||||
</div>
|
||||
</MudTd>
|
||||
<MudTd>
|
||||
@if (context.Link.IsSome)
|
||||
{
|
||||
foreach (string link in context.Link)
|
||||
<MudHidden Breakpoint="Breakpoint.Xs">
|
||||
@if (context.Link.IsSome)
|
||||
{
|
||||
<MudLink Href="@link">
|
||||
@context.Message
|
||||
</MudLink>
|
||||
foreach (string link in context.Link)
|
||||
{
|
||||
<MudLink Href="@link">
|
||||
@context.Message
|
||||
</MudLink>
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudText>
|
||||
@context.Message
|
||||
</MudText>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudText>
|
||||
@context.Message
|
||||
</MudText>
|
||||
}
|
||||
</MudHidden>
|
||||
<MudHidden Breakpoint="Breakpoint.Xs" Invert="true">
|
||||
@context.BriefMessage
|
||||
</MudHidden>
|
||||
</MudTd>
|
||||
</RowTemplate>
|
||||
</MudTable>
|
||||
|
||||
+123
-120
@@ -13,132 +13,135 @@
|
||||
@inject ChannelWriter<IScannerBackgroundServiceRequest> ScannerWorkerChannel;
|
||||
@inject ICourier Courier
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
|
||||
<MudTable Hover="true" Items="_libraries" Dense="true">
|
||||
<ToolBarContent>
|
||||
<MudText Typo="Typo.h6">Libraries</MudText>
|
||||
</ToolBarContent>
|
||||
<ColGroup>
|
||||
<col/>
|
||||
@if (_showServerNames)
|
||||
{
|
||||
<col/>
|
||||
}
|
||||
<col/>
|
||||
<col/>
|
||||
<col style="width: 180px;"/>
|
||||
</ColGroup>
|
||||
<HeaderContent>
|
||||
<MudTh>Library Kind</MudTh>
|
||||
@if (_showServerNames)
|
||||
{
|
||||
<MudTh>Server Name</MudTh>
|
||||
}
|
||||
<MudTh>Library Name</MudTh>
|
||||
<MudTh>Media Kind</MudTh>
|
||||
<MudTh/>
|
||||
</HeaderContent>
|
||||
<RowTemplate>
|
||||
<MudTd DataLabel="Library Kind">@context.LibraryKind</MudTd>
|
||||
@if (_showServerNames)
|
||||
{
|
||||
<MudTd DataLabel="Server Name">@context.MediaSourceName</MudTd>
|
||||
}
|
||||
<MudTd DataLabel="Library Name">@context.Name</MudTd>
|
||||
<MudTd DataLabel="Media Kind">@context.MediaKind</MudTd>
|
||||
<MudTd>
|
||||
<div style="align-items: center; display: flex;">
|
||||
@if (Locker.IsLibraryLocked(context.Id))
|
||||
<MudForm Style="max-height: 100%">
|
||||
<div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
|
||||
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
|
||||
<MudText Typo="Typo.h5" Class="mb-2">Libraries</MudText>
|
||||
<MudDivider Class="mb-6"/>
|
||||
<MudTable Hover="true" Items="_libraries" Dense="true" Class="mb-5">
|
||||
<ColGroup>
|
||||
<MudHidden Breakpoint="Breakpoint.Xs">
|
||||
<col/>
|
||||
@if (_showServerNames)
|
||||
{
|
||||
<col/>
|
||||
}
|
||||
<col/>
|
||||
<col/>
|
||||
<col style="width: 180px;"/>
|
||||
</MudHidden>
|
||||
</ColGroup>
|
||||
<HeaderContent>
|
||||
<MudTh>Library Kind</MudTh>
|
||||
@if (_showServerNames)
|
||||
{
|
||||
<div style="width: 48px">
|
||||
@if (_progressByLibrary[context.Id] > 0)
|
||||
<MudTh>Server Name</MudTh>
|
||||
}
|
||||
<MudTh>Library Name</MudTh>
|
||||
<MudTh>Media Kind</MudTh>
|
||||
<MudTh/>
|
||||
</HeaderContent>
|
||||
<RowTemplate>
|
||||
<MudTd DataLabel="Library Kind">@context.LibraryKind</MudTd>
|
||||
@if (_showServerNames)
|
||||
{
|
||||
<MudTd DataLabel="Server Name">@context.MediaSourceName</MudTd>
|
||||
}
|
||||
<MudTd DataLabel="Library Name">@context.Name</MudTd>
|
||||
<MudTd DataLabel="Media Kind">@context.MediaKind</MudTd>
|
||||
<MudTd>
|
||||
<div style="align-items: center; display: flex;">
|
||||
@if (Locker.IsLibraryLocked(context.Id))
|
||||
{
|
||||
<MudText Color="Color.Primary">
|
||||
@($"{_progressByLibrary[context.Id]} %")
|
||||
</MudText>
|
||||
<div style="width: 48px">
|
||||
@if (_progressByLibrary[context.Id] > 0)
|
||||
{
|
||||
<MudText Color="Color.Primary">
|
||||
@($"{_progressByLibrary[context.Id]} %")
|
||||
</MudText>
|
||||
}
|
||||
</div>
|
||||
<div style="align-items: center; display: flex; height: 48px; justify-content: center; width: 48px;">
|
||||
<MudProgressCircular Color="Color.Primary" Size="Size.Small" Indeterminate="true"/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div style="align-items: center; display: flex; height: 48px; justify-content: center; width: 48px;">
|
||||
<MudProgressCircular Color="Color.Primary" Size="Size.Small" Indeterminate="true"/>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
if (context is PlexLibraryViewModel or EmbyLibraryViewModel or JellyfinLibraryViewModel)
|
||||
{
|
||||
<MudTooltip Text="Deep Scan Library">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.FindReplace"
|
||||
Disabled="@Locker.IsLibraryLocked(context.Id)"
|
||||
OnClick="@(_ => ScanLibrary(context, true))">
|
||||
else
|
||||
{
|
||||
if (context is PlexLibraryViewModel or EmbyLibraryViewModel or JellyfinLibraryViewModel)
|
||||
{
|
||||
<MudTooltip Text="Deep Scan Library">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.FindReplace"
|
||||
Disabled="@Locker.IsLibraryLocked(context.Id)"
|
||||
OnClick="@(_ => ScanLibrary(context, true))">
|
||||
</MudIconButton>
|
||||
</MudTooltip>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div style="width: 48px"></div>
|
||||
}
|
||||
|
||||
<MudTooltip Text="Scan Library">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Refresh"
|
||||
Disabled="@Locker.IsLibraryLocked(context.Id)"
|
||||
OnClick="@(_ => ScanLibrary(context))">
|
||||
</MudIconButton>
|
||||
</MudTooltip>
|
||||
}
|
||||
<MudTooltip Text="Search Library">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Search"
|
||||
Href="@($"search?query=library_id%3a{context.Id}")">
|
||||
</MudIconButton>
|
||||
</MudTooltip>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div style="width: 48px"></div>
|
||||
}
|
||||
|
||||
<MudTooltip Text="Scan Library">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Refresh"
|
||||
Disabled="@Locker.IsLibraryLocked(context.Id)"
|
||||
OnClick="@(_ => ScanLibrary(context))">
|
||||
</MudIconButton>
|
||||
</MudTooltip>
|
||||
}
|
||||
<MudTooltip Text="Search Library">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Search"
|
||||
Href="@($"search?query=library_id%3a{context.Id}")">
|
||||
</MudIconButton>
|
||||
</MudTooltip>
|
||||
</div>
|
||||
</MudTd>
|
||||
</RowTemplate>
|
||||
</MudTable>
|
||||
</MudContainer>
|
||||
|
||||
@if (_externalCollections.Any())
|
||||
{
|
||||
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
|
||||
<MudTable Hover="true" Items="_externalCollections" Dense="true">
|
||||
<ToolBarContent>
|
||||
<MudText Typo="Typo.h6">External Collections</MudText>
|
||||
</ToolBarContent>
|
||||
<ColGroup>
|
||||
<col/>
|
||||
<col style="width: 180px;"/>
|
||||
</ColGroup>
|
||||
<HeaderContent>
|
||||
<MudTh>Library Kind</MudTh>
|
||||
<MudTh/>
|
||||
</HeaderContent>
|
||||
<RowTemplate>
|
||||
<MudTd DataLabel="Library Kind">@context.LibraryKind</MudTd>
|
||||
<MudTd>
|
||||
<div style="align-items: center; display: flex;">
|
||||
<div style="width: 48px"></div>
|
||||
@if (AreCollectionsLocked(context.LibraryKind))
|
||||
{
|
||||
<div style="align-items: center; display: flex; height: 48px; justify-content: center; width: 48px;">
|
||||
<MudProgressCircular Color="Color.Primary" Size="Size.Small" Indeterminate="true"/>
|
||||
</div>
|
||||
</MudTd>
|
||||
</RowTemplate>
|
||||
</MudTable>
|
||||
<MudText Typo="Typo.h5" Class="mb-2">External Collections</MudText>
|
||||
<MudDivider Class="mb-6"/>
|
||||
@if (_externalCollections.Any())
|
||||
{
|
||||
<MudTable Hover="true" Items="_externalCollections" Dense="true">
|
||||
<ColGroup>
|
||||
<MudHidden Breakpoint="Breakpoint.Xs">
|
||||
<col/>
|
||||
<col style="width: 180px;"/>
|
||||
</MudHidden>
|
||||
</ColGroup>
|
||||
<HeaderContent>
|
||||
<MudTh>Library Kind</MudTh>
|
||||
<MudTh/>
|
||||
</HeaderContent>
|
||||
<RowTemplate>
|
||||
<MudTd>@context.LibraryKind</MudTd>
|
||||
<MudTd>
|
||||
<div style="align-items: center; display: flex;">
|
||||
<div style="width: 48px"></div>
|
||||
@if (AreCollectionsLocked(context.LibraryKind))
|
||||
{
|
||||
<div style="align-items: center; display: flex; height: 48px; justify-content: center; width: 48px;">
|
||||
<MudProgressCircular Color="Color.Primary" Size="Size.Small" Indeterminate="true"/>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div style="width: 48px"></div>
|
||||
<MudTooltip Text="Scan Collections">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Refresh"
|
||||
Disabled="@AreCollectionsLocked(context.LibraryKind)"
|
||||
OnClick="@(_ => ScanExternalCollections(context))">
|
||||
</MudIconButton>
|
||||
</MudTooltip>
|
||||
}
|
||||
<div style="width: 48px"></div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div style="width: 48px"></div>
|
||||
<MudTooltip Text="Scan Collections">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Refresh"
|
||||
Disabled="@AreCollectionsLocked(context.LibraryKind)"
|
||||
OnClick="@(_ => ScanExternalCollections(context))">
|
||||
</MudIconButton>
|
||||
</MudTooltip>
|
||||
}
|
||||
<div style="width: 48px"></div>
|
||||
</div>
|
||||
</MudTd>
|
||||
</RowTemplate>
|
||||
</MudTable>
|
||||
</MudContainer>
|
||||
}
|
||||
</MudTd>
|
||||
</RowTemplate>
|
||||
</MudTable>
|
||||
}
|
||||
</MudContainer>
|
||||
</div>
|
||||
</MudForm>
|
||||
|
||||
@code {
|
||||
private readonly CancellationTokenSource _cts = new();
|
||||
|
||||
+394
-371
@@ -8,372 +8,395 @@
|
||||
@using ErsatzTV.Extensions
|
||||
@implements IDisposable
|
||||
|
||||
<MudPaper Square="true" Style="display: flex; height: 64px; width: 100%; z-index: 100;">
|
||||
<div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%" class="ml-6 mr-6">
|
||||
@if (IsSelectMode())
|
||||
{
|
||||
<MudText Typo="Typo.h6" Color="Color.Primary">@SelectionLabel()</MudText>
|
||||
<div style="margin-left: auto">
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
StartIcon="@Icons.Material.Filled.Add"
|
||||
OnClick="@(_ => AddSelectionToCollection())">
|
||||
Add To Collection
|
||||
</MudButton>
|
||||
<MudButton Class="ml-3"
|
||||
Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
StartIcon="@Icons.Material.Filled.PlaylistAdd"
|
||||
OnClick="@(_ => AddSelectionToPlaylist())">
|
||||
Add To Playlist
|
||||
</MudButton>
|
||||
<MudButton Class="ml-3"
|
||||
Variant="Variant.Filled"
|
||||
Color="Color.Secondary"
|
||||
StartIcon="@Icons.Material.Filled.Check"
|
||||
OnClick="@(_ => ClearSelection())">
|
||||
Clear Selection
|
||||
</MudButton>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div style="align-items: center; display: flex; width: 100%" class="d-none d-md-flex">
|
||||
<MudText Style="margin-bottom: auto; margin-top: auto">@_query</MudText>
|
||||
@if (_movies?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#movies")" Style="margin-bottom: auto; margin-top: auto">@_movies.Count Movies</MudLink>
|
||||
}
|
||||
|
||||
@if (_shows?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#shows")" Style="margin-bottom: auto; margin-top: auto">@_shows.Count Shows</MudLink>
|
||||
}
|
||||
|
||||
@if (_seasons?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#seasons")" Style="margin-bottom: auto; margin-top: auto">@_seasons.Count Seasons</MudLink>
|
||||
}
|
||||
|
||||
@if (_episodes?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#episodes")" Style="margin-bottom: auto; margin-top: auto">@_episodes.Count Episodes</MudLink>
|
||||
}
|
||||
|
||||
@if (_artists?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#artists")" Style="margin-bottom: auto; margin-top: auto">@_artists.Count Artists</MudLink>
|
||||
}
|
||||
|
||||
@if (_musicVideos?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#music_videos")" Style="margin-bottom: auto; margin-top: auto">@_musicVideos.Count Music Videos</MudLink>
|
||||
}
|
||||
|
||||
@if (_otherVideos?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#other_videos")" Style="margin-bottom: auto; margin-top: auto">@_otherVideos.Count Other Videos</MudLink>
|
||||
}
|
||||
|
||||
@if (_songs?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#songs")" Style="margin-bottom: auto; margin-top: auto">@_songs.Count Songs</MudLink>
|
||||
}
|
||||
|
||||
@if (_images?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#images")" Style="margin-bottom: auto; margin-top: auto">@_images.Count Images</MudLink>
|
||||
}
|
||||
<div class="flex-grow-1 d-none d-md-flex"></div>
|
||||
<div>
|
||||
<MudTooltip Text="Add All To Collection">
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
StartIcon="@Icons.Material.Filled.Add"
|
||||
OnClick="@AddAllToCollection">
|
||||
Add All
|
||||
</MudButton>
|
||||
</MudTooltip>
|
||||
<MudTooltip Text="Add All To Playlist">
|
||||
<MudButton Class="ml-3"
|
||||
Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
StartIcon="@Icons.Material.Filled.PlaylistAdd"
|
||||
OnClick="@AddAllToPlaylist">
|
||||
Add All
|
||||
</MudButton>
|
||||
</MudTooltip>
|
||||
<MudTooltip Text="Save As Smart Collection">
|
||||
<MudButton Class="ml-3" Variant="Variant.Filled"
|
||||
Color="Color.Secondary"
|
||||
StartIcon="@Icons.Material.Filled.Save"
|
||||
OnClick="@SaveAsSmartCollection">
|
||||
Save As
|
||||
</MudButton>
|
||||
</MudTooltip>
|
||||
<MudForm Style="max-height: 100%">
|
||||
<MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100;">
|
||||
<div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%" class="ml-6 mr-6">
|
||||
@if (IsSelectMode())
|
||||
{
|
||||
<div style="align-items: center; display: flex; width: 100%;">
|
||||
<MudText Typo="Typo.h6" Color="Color.Primary">@SelectionLabel()</MudText>
|
||||
</div>
|
||||
</div>
|
||||
<div style="align-items: center; display: flex; width: 100%" class="d-md-none">
|
||||
<div class="flex-grow-1"></div>
|
||||
<MudMenu Icon="@Icons.Material.Filled.MoreVert">
|
||||
<MudMenuItem Icon="@Icons.Material.Filled.Add" Label="Add All To Collection" OnClick="@AddAllToCollection"/>
|
||||
<MudMenuItem Icon="@Icons.Material.Filled.PlaylistAdd" Label="Add All To Playlist" OnClick="AddAllToPlaylist"/>
|
||||
<MudMenuItem Icon="@Icons.Material.Filled.Save" Label="Save As Smart Collection" OnClick="SaveAsSmartCollection"/>
|
||||
</MudMenu>
|
||||
</div>
|
||||
}
|
||||
<div style="margin-left: auto" class="d-none d-md-flex">
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
StartIcon="@Icons.Material.Filled.Add"
|
||||
OnClick="@(_ => AddSelectionToCollection())">
|
||||
Add To Collection
|
||||
</MudButton>
|
||||
<MudButton Class="ml-3"
|
||||
Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
StartIcon="@Icons.Material.Filled.PlaylistAdd"
|
||||
OnClick="@(_ => AddSelectionToPlaylist())">
|
||||
Add To Playlist
|
||||
</MudButton>
|
||||
<MudButton Class="ml-3"
|
||||
Variant="Variant.Filled"
|
||||
Color="Color.Secondary"
|
||||
StartIcon="@Icons.Material.Filled.Check"
|
||||
OnClick="@(_ => ClearSelection())">
|
||||
Clear Selection
|
||||
</MudButton>
|
||||
</div>
|
||||
<div style="align-items: center; display: flex; margin-left: auto;" class="d-md-none">
|
||||
<div class="flex-grow-1"></div>
|
||||
<MudMenu Icon="@Icons.Material.Filled.MoreVert">
|
||||
<MudMenuItem Icon="@Icons.Material.Filled.Add" Label="Add To Collection" OnClick="@AddSelectionToCollection"/>
|
||||
<MudMenuItem Icon="@Icons.Material.Filled.PlaylistAdd" Label="Add To Playlist" OnClick="AddSelectionToPlaylist"/>
|
||||
<MudMenuItem Icon="@Icons.Material.Filled.Check" Label="Clear Selection" OnClick="ClearSelection"/>
|
||||
</MudMenu>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div style="align-items: center; display: flex; width: 100%" class="d-none d-md-flex">
|
||||
<MudText>@_query</MudText>
|
||||
@if (_movies?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#movies")" Style="margin-bottom: auto; margin-top: auto">@_movies.Count Movies</MudLink>
|
||||
}
|
||||
|
||||
@if (_shows?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#shows")" Style="margin-bottom: auto; margin-top: auto">@_shows.Count Shows</MudLink>
|
||||
}
|
||||
|
||||
@if (_seasons?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#seasons")" Style="margin-bottom: auto; margin-top: auto">@_seasons.Count Seasons</MudLink>
|
||||
}
|
||||
|
||||
@if (_episodes?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#episodes")" Style="margin-bottom: auto; margin-top: auto">@_episodes.Count Episodes</MudLink>
|
||||
}
|
||||
|
||||
@if (_artists?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#artists")" Style="margin-bottom: auto; margin-top: auto">@_artists.Count Artists</MudLink>
|
||||
}
|
||||
|
||||
@if (_musicVideos?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#music_videos")" Style="margin-bottom: auto; margin-top: auto">@_musicVideos.Count Music Videos</MudLink>
|
||||
}
|
||||
|
||||
@if (_otherVideos?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#other_videos")" Style="margin-bottom: auto; margin-top: auto">@_otherVideos.Count Other Videos</MudLink>
|
||||
}
|
||||
|
||||
@if (_songs?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#songs")" Style="margin-bottom: auto; margin-top: auto">@_songs.Count Songs</MudLink>
|
||||
}
|
||||
|
||||
@if (_images?.Count > 0)
|
||||
{
|
||||
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#images")" Style="margin-bottom: auto; margin-top: auto">@_images.Count Images</MudLink>
|
||||
}
|
||||
<div class="flex-grow-1 d-none d-md-flex"></div>
|
||||
<div>
|
||||
<MudTooltip Text="Add All To Collection">
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
StartIcon="@Icons.Material.Filled.Add"
|
||||
OnClick="@AddAllToCollection">
|
||||
Add All
|
||||
</MudButton>
|
||||
</MudTooltip>
|
||||
<MudTooltip Text="Add All To Playlist">
|
||||
<MudButton Class="ml-3"
|
||||
Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
StartIcon="@Icons.Material.Filled.PlaylistAdd"
|
||||
OnClick="@AddAllToPlaylist">
|
||||
Add All
|
||||
</MudButton>
|
||||
</MudTooltip>
|
||||
<MudTooltip Text="Save As Smart Collection">
|
||||
<MudButton Class="ml-3" Variant="Variant.Filled"
|
||||
Color="Color.Secondary"
|
||||
StartIcon="@Icons.Material.Filled.Save"
|
||||
OnClick="@SaveAsSmartCollection">
|
||||
Save As
|
||||
</MudButton>
|
||||
</MudTooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div style="align-items: center; display: flex; width: 100%" class="d-md-none">
|
||||
<div class="flex-grow-1"></div>
|
||||
<MudMenu Icon="@Icons.Material.Filled.MoreVert">
|
||||
<MudMenuItem Icon="@Icons.Material.Filled.Add" Label="Add All To Collection" OnClick="@AddAllToCollection"/>
|
||||
<MudMenuItem Icon="@Icons.Material.Filled.PlaylistAdd" Label="Add All To Playlist" OnClick="AddAllToPlaylist"/>
|
||||
<MudMenuItem Icon="@Icons.Material.Filled.Save" Label="Save As Smart Collection" OnClick="SaveAsSmartCollection"/>
|
||||
</MudMenu>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</MudPaper>
|
||||
<div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
|
||||
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
|
||||
@if (_movies?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "movies" } })">
|
||||
Movies
|
||||
</MudText>
|
||||
@if (_movies.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetMoviesLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
<MudDivider Class="mb-6"/>
|
||||
|
||||
<MudStack Row="true" Wrap="Wrap.Wrap">
|
||||
@foreach (MovieCardViewModel card in _movies.Cards.OrderBy(m => m.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href="@($"media/movies/{card.MovieId}")"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudStack>
|
||||
}
|
||||
|
||||
@if (_shows?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "shows" } })">
|
||||
Shows
|
||||
</MudText>
|
||||
@if (_shows.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetShowsLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
<MudDivider Class="mb-6"/>
|
||||
|
||||
<MudStack Row="true" Wrap="Wrap.Wrap">
|
||||
@foreach (TelevisionShowCardViewModel card in _shows.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href="@($"media/tv/shows/{card.TelevisionShowId}")"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudStack>
|
||||
}
|
||||
|
||||
@if (_seasons?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "seasons" } })">
|
||||
Seasons
|
||||
</MudText>
|
||||
@if (_seasons.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetSeasonsLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
<MudDivider Class="mb-6"/>
|
||||
|
||||
<MudStack Row="true" Wrap="Wrap.Wrap">
|
||||
@foreach (TelevisionSeasonCardViewModel card in _seasons.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href="@($"media/tv/seasons/{card.TelevisionSeasonId}")"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudStack>
|
||||
}
|
||||
|
||||
@if (_episodes?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "episodes" } })">
|
||||
Episodes
|
||||
</MudText>
|
||||
@if (_episodes.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetEpisodesLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
<MudDivider Class="mb-6"/>
|
||||
|
||||
<MudStack Row="true" Wrap="Wrap.Wrap">
|
||||
@foreach (TelevisionEpisodeCardViewModel card in _episodes.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
Href="@($"media/tv/seasons/{card.SeasonId}#episode-{card.EpisodeId}")"
|
||||
Subtitle="@($"{card.ShowTitle} - S{card.Season} E{card.Episode}")"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudStack>
|
||||
}
|
||||
|
||||
@if (_artists?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "artists" } })">
|
||||
Artists
|
||||
</MudText>
|
||||
@if (_artists.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetArtistsLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
<MudDivider Class="mb-6"/>
|
||||
|
||||
<MudStack Row="true" Wrap="Wrap.Wrap">
|
||||
@foreach (ArtistCardViewModel card in _artists.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href="@($"media/music/artists/{card.ArtistId}")"
|
||||
ArtworkKind="ArtworkKind.Thumbnail"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudStack>
|
||||
}
|
||||
|
||||
@if (_musicVideos?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "music_videos" } })">
|
||||
Music Videos
|
||||
</MudText>
|
||||
@if (_musicVideos.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetMusicVideosLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
<MudDivider Class="mb-6"/>
|
||||
|
||||
<MudStack Row="true" Wrap="Wrap.Wrap">
|
||||
@foreach (MusicVideoCardViewModel card in _musicVideos.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href=""
|
||||
ArtworkKind="ArtworkKind.Thumbnail"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudStack>
|
||||
}
|
||||
|
||||
@if (_otherVideos?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "other_videos" } })">
|
||||
Other Videos
|
||||
</MudText>
|
||||
@if (_otherVideos.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetOtherVideosLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
<MudDivider Class="mb-6"/>
|
||||
|
||||
<MudStack Row="true" Wrap="Wrap.Wrap">
|
||||
@foreach (OtherVideoCardViewModel card in _otherVideos.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href=""
|
||||
ArtworkKind="ArtworkKind.Thumbnail"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudStack>
|
||||
}
|
||||
|
||||
@if (_songs?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "songs" } })">
|
||||
Songs
|
||||
</MudText>
|
||||
@if (_songs.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetSongsLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
<MudDivider Class="mb-6"/>
|
||||
|
||||
<MudStack Row="true" Wrap="Wrap.Wrap">
|
||||
@foreach (SongCardViewModel card in _songs.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href=""
|
||||
ArtworkKind="ArtworkKind.Thumbnail"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudStack>
|
||||
}
|
||||
|
||||
@if (_images?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "images" } })">
|
||||
Images
|
||||
</MudText>
|
||||
@if (_images.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetImagesLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
<MudDivider Class="mb-6"/>
|
||||
|
||||
<MudStack Row="true" Wrap="Wrap.Wrap">
|
||||
@foreach (ImageCardViewModel card in _images.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href=""
|
||||
ArtworkKind="ArtworkKind.Thumbnail"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudStack>
|
||||
}
|
||||
</MudContainer>
|
||||
</div>
|
||||
</MudPaper>
|
||||
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Style="margin-top: 96px">
|
||||
@if (_movies?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "movies" } })">
|
||||
Movies
|
||||
</MudText>
|
||||
@if (_movies.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetMoviesLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
|
||||
@foreach (MovieCardViewModel card in _movies.Cards.OrderBy(m => m.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href="@($"media/movies/{card.MovieId}")"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudContainer>
|
||||
}
|
||||
|
||||
@if (_shows?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "shows" } })">
|
||||
Shows
|
||||
</MudText>
|
||||
@if (_shows.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetShowsLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
|
||||
@foreach (TelevisionShowCardViewModel card in _shows.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href="@($"media/tv/shows/{card.TelevisionShowId}")"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudContainer>
|
||||
}
|
||||
|
||||
@if (_seasons?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "seasons" } })">
|
||||
Seasons
|
||||
</MudText>
|
||||
@if (_seasons.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetSeasonsLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
|
||||
@foreach (TelevisionSeasonCardViewModel card in _seasons.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href="@($"media/tv/seasons/{card.TelevisionSeasonId}")"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudContainer>
|
||||
}
|
||||
|
||||
@if (_episodes?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "episodes" } })">
|
||||
Episodes
|
||||
</MudText>
|
||||
@if (_episodes.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetEpisodesLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
|
||||
@foreach (TelevisionEpisodeCardViewModel card in _episodes.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
Href="@($"media/tv/seasons/{card.SeasonId}#episode-{card.EpisodeId}")"
|
||||
Subtitle="@($"{card.ShowTitle} - S{card.Season} E{card.Episode}")"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudContainer>
|
||||
}
|
||||
|
||||
@if (_artists?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "artists" } })">
|
||||
Artists
|
||||
</MudText>
|
||||
@if (_artists.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetArtistsLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
|
||||
@foreach (ArtistCardViewModel card in _artists.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href="@($"media/music/artists/{card.ArtistId}")"
|
||||
ArtworkKind="ArtworkKind.Thumbnail"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudContainer>
|
||||
}
|
||||
|
||||
@if (_musicVideos?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "music_videos" } })">
|
||||
Music Videos
|
||||
</MudText>
|
||||
@if (_musicVideos.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetMusicVideosLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
|
||||
@foreach (MusicVideoCardViewModel card in _musicVideos.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href=""
|
||||
ArtworkKind="ArtworkKind.Thumbnail"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudContainer>
|
||||
}
|
||||
|
||||
@if (_otherVideos?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "other_videos" } })">
|
||||
Other Videos
|
||||
</MudText>
|
||||
@if (_otherVideos.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetOtherVideosLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
|
||||
@foreach (OtherVideoCardViewModel card in _otherVideos.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href=""
|
||||
ArtworkKind="ArtworkKind.Thumbnail"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudContainer>
|
||||
}
|
||||
|
||||
@if (_songs?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "songs" } })">
|
||||
Songs
|
||||
</MudText>
|
||||
@if (_songs.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetSongsLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
|
||||
@foreach (SongCardViewModel card in _songs.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href=""
|
||||
ArtworkKind="ArtworkKind.Thumbnail"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudContainer>
|
||||
}
|
||||
|
||||
@if (_images?.Count > 0)
|
||||
{
|
||||
<div class="mb-4" style="align-items: baseline; display: flex; flex-direction: row;">
|
||||
<MudText Typo="Typo.h4"
|
||||
Style="scroll-margin-top: 160px"
|
||||
UserAttributes="@(new Dictionary<string, object> { { "id", "images" } })">
|
||||
Images
|
||||
</MudText>
|
||||
@if (_images.Count > 50)
|
||||
{
|
||||
<MudLink Href="@GetImagesLink()" Class="ml-4">See All >></MudLink>
|
||||
}
|
||||
</div>
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
|
||||
@foreach (ImageCardViewModel card in _images.Cards.OrderBy(s => s.SortTitle))
|
||||
{
|
||||
<MediaCard Data="@card"
|
||||
Href=""
|
||||
ArtworkKind="ArtworkKind.Thumbnail"
|
||||
AddToCollectionClicked="@AddToCollection"
|
||||
SelectClicked="@(e => SelectClicked(card, e))"
|
||||
IsSelected="@IsSelected(card)"
|
||||
IsSelectMode="@IsSelectMode()"/>
|
||||
}
|
||||
</MudContainer>
|
||||
}
|
||||
</MudContainer>
|
||||
</MudForm>
|
||||
|
||||
@code {
|
||||
private string _query;
|
||||
@@ -525,7 +548,7 @@
|
||||
|
||||
IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
|
||||
DialogResult result = await dialog.Result;
|
||||
if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
|
||||
if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
|
||||
{
|
||||
var request = new AddMovieToCollection(collection.Id, movie.MovieId);
|
||||
Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
|
||||
@@ -546,7 +569,7 @@
|
||||
|
||||
IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
|
||||
DialogResult result = await dialog.Result;
|
||||
if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
|
||||
if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
|
||||
{
|
||||
var request = new AddShowToCollection(collection.Id, show.TelevisionShowId);
|
||||
Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
|
||||
@@ -567,7 +590,7 @@
|
||||
|
||||
IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
|
||||
DialogResult result = await dialog.Result;
|
||||
if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
|
||||
if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
|
||||
{
|
||||
var request = new AddEpisodeToCollection(collection.Id, episode.EpisodeId);
|
||||
Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
|
||||
@@ -588,7 +611,7 @@
|
||||
|
||||
IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
|
||||
DialogResult result = await dialog.Result;
|
||||
if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
|
||||
if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
|
||||
{
|
||||
var request = new AddArtistToCollection(collection.Id, artist.ArtistId);
|
||||
Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
|
||||
@@ -609,7 +632,7 @@
|
||||
|
||||
IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
|
||||
DialogResult result = await dialog.Result;
|
||||
if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
|
||||
if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
|
||||
{
|
||||
var request = new AddMusicVideoToCollection(collection.Id, musicVideo.MusicVideoId);
|
||||
Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
|
||||
@@ -630,7 +653,7 @@
|
||||
|
||||
IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
|
||||
DialogResult result = await dialog.Result;
|
||||
if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
|
||||
if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
|
||||
{
|
||||
var request = new AddOtherVideoToCollection(collection.Id, otherVideo.OtherVideoId);
|
||||
Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
|
||||
@@ -651,7 +674,7 @@
|
||||
|
||||
IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
|
||||
DialogResult result = await dialog.Result;
|
||||
if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
|
||||
if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
|
||||
{
|
||||
var request = new AddSongToCollection(collection.Id, song.SongId);
|
||||
Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
|
||||
|
||||
Reference in New Issue
Block a user