start to make ui minimally responsive (#2004)
This commit is contained in:
Jason Dove
@@ -14,6 +14,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
||||
- `ETV_UI_PORT`: port used for admin UI, defaults to 8409
|
||||
- Publish docker images to ghcr.io (`ghcr.io/ersatztv/ersatztv`)
|
||||
|
||||
### Changed
|
||||
- Start to make UI minimally responsive (functional on smaller screens)
|
||||
|
||||
### Fixed
|
||||
- Fix error message about synchronizing Plex collections from a Plex server that has zero collections
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@page "/"
|
||||
@page "/system/health"
|
||||
@using System.Reflection
|
||||
@using ErsatzTV.Application.Health
|
||||
@using ErsatzTV.Core.Health
|
||||
|
||||
+75
-65
@@ -8,7 +8,7 @@
|
||||
@using ErsatzTV.Extensions
|
||||
@implements IDisposable
|
||||
|
||||
<MudPaper Square="true" Style="display: flex; height: 64px; left: 240px; padding: 0; position: fixed; right: 0; z-index: 100;">
|
||||
<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())
|
||||
{
|
||||
@@ -38,78 +38,88 @@
|
||||
}
|
||||
else
|
||||
{
|
||||
<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>
|
||||
}
|
||||
<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 (_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 (_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 (_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 (_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 (_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 (_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 (_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 style="margin-left: auto">
|
||||
<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>
|
||||
@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>
|
||||
|
||||
@@ -16,7 +16,8 @@
|
||||
|
||||
<MudLayout @onclick="@(() => _isOpen = false)">
|
||||
<MudAppBar Elevation="1" Class="app-bar">
|
||||
<div style="min-width: 240px">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" />
|
||||
<div style="min-width: 240px" class="ml-3 d-none d-md-flex">
|
||||
<a href="">
|
||||
<img src="images/ersatztv.png" alt="ErsatzTV"/>
|
||||
</a>
|
||||
@@ -70,33 +71,35 @@
|
||||
</EditForm>
|
||||
</div>
|
||||
}
|
||||
<MudSpacer/>
|
||||
@if (SystemStartup.IsDatabaseReady && SystemStartup.IsSearchIndexReady)
|
||||
{
|
||||
<MudLink Color="Color.Info" Href="@IptvUrl("channels.m3u")" Target="_blank" Underline="Underline.None">M3U</MudLink>
|
||||
<MudLink Color="Color.Info" Href="@IptvUrl("xmltv.xml")" Target="_blank" Class="mx-4" Underline="Underline.None">XMLTV</MudLink>
|
||||
}
|
||||
@* <MudLink Color="Color.Info" Href="/swagger" Target="_blank" Class="mr-4" Underline="Underline.None">API</MudLink> *@
|
||||
<MudTooltip Text="Documentation">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Help" Color="Color.Primary" Href="https://ersatztv.org" Target="_blank"/>
|
||||
</MudTooltip>
|
||||
<MudTooltip Text="Discord">
|
||||
<MudIconButton Icon="fab fa-discord" Color="Color.Primary" Href="https://discord.gg/hHaJm3yGy6" Target="_blank"/>
|
||||
</MudTooltip>
|
||||
<MudTooltip Text="GitHub">
|
||||
<MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Primary" Href="https://github.com/ErsatzTV/ErsatzTV" Target="_blank"/>
|
||||
</MudTooltip>
|
||||
<AuthorizeView>
|
||||
<form action="/account/logout" method="post">
|
||||
<MudTooltip Text="Logout">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Logout" Color="Color.Secondary" ButtonType="ButtonType.Submit"/>
|
||||
</MudTooltip>
|
||||
</form>
|
||||
</AuthorizeView>
|
||||
<div class="flex-grow-1 d-none d-md-flex"></div>
|
||||
<div style="align-items: center; display: flex;" class="d-none d-md-flex">
|
||||
@if (SystemStartup.IsDatabaseReady && SystemStartup.IsSearchIndexReady)
|
||||
{
|
||||
<MudLink Color="Color.Info" Href="@IptvUrl("channels.m3u")" Target="_blank" Underline="Underline.None">M3U</MudLink>
|
||||
<MudLink Color="Color.Info" Href="@IptvUrl("xmltv.xml")" Target="_blank" Class="mx-4" Underline="Underline.None">XMLTV</MudLink>
|
||||
}
|
||||
@* <MudLink Color="Color.Info" Href="/swagger" Target="_blank" Class="mr-4" Underline="Underline.None">API</MudLink> *@
|
||||
<MudTooltip Text="Documentation">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Help" Color="Color.Primary" Href="https://ersatztv.org" Target="_blank"/>
|
||||
</MudTooltip>
|
||||
<MudTooltip Text="Discord">
|
||||
<MudIconButton Icon="fab fa-discord" Color="Color.Primary" Href="https://discord.gg/hHaJm3yGy6" Target="_blank"/>
|
||||
</MudTooltip>
|
||||
<MudTooltip Text="GitHub">
|
||||
<MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Primary" Href="https://github.com/ErsatzTV/ErsatzTV" Target="_blank"/>
|
||||
</MudTooltip>
|
||||
<AuthorizeView>
|
||||
<form action="/account/logout" method="post">
|
||||
<MudTooltip Text="Logout">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Logout" Color="Color.Secondary" ButtonType="ButtonType.Submit"/>
|
||||
</MudTooltip>
|
||||
</form>
|
||||
</AuthorizeView>
|
||||
</div>
|
||||
</MudAppBar>
|
||||
@if (SystemStartup.IsDatabaseReady && SystemStartup.IsSearchIndexReady)
|
||||
{
|
||||
<MudDrawer Open="true" Elevation="2" ClipMode="DrawerClipMode.Always">
|
||||
<MudDrawer @bind-Open="@_drawerIsOpen" Elevation="2" ClipMode="DrawerClipMode.Always">
|
||||
<MudNavMenu>
|
||||
<MudNavLink Href="channels">Channels</MudNavLink>
|
||||
<MudNavLink Href="ffmpeg">FFmpeg Profiles</MudNavLink>
|
||||
@@ -133,6 +136,7 @@
|
||||
</MudNavGroup>
|
||||
<MudNavLink Href="settings">Settings</MudNavLink>
|
||||
<MudNavGroup Title="Support" Expanded="true">
|
||||
<MudNavLink Href="system/health">Health Checks</MudNavLink>
|
||||
<MudNavLink Href="system/logs">Logs</MudNavLink>
|
||||
<MudNavLink Href="system/troubleshooting">Troubleshooting</MudNavLink>
|
||||
</MudNavGroup>
|
||||
@@ -159,6 +163,7 @@
|
||||
private record SearchModel;
|
||||
|
||||
private readonly SearchModel _dummyModel = new();
|
||||
private bool _drawerIsOpen = true;
|
||||
private bool _isOpen;
|
||||
private List<SearchTargetViewModel> _searchTargets;
|
||||
|
||||
@@ -188,11 +193,12 @@
|
||||
ActionDefault = "rgba(255,255,255, 0.80)",
|
||||
Primary = "#009000",
|
||||
Secondary = "#009090",
|
||||
AppbarBackground = "#121212",
|
||||
Background = "#272727",
|
||||
DrawerBackground = "#1f1f1f",
|
||||
Surface = "#1f1f1f",
|
||||
AppbarBackground = "#121212",
|
||||
AppbarText = "rgba(255,255,255, 0.80)",
|
||||
DrawerBackground = "#1f1f1f",
|
||||
DrawerText = "rgba(255,255,255, 0.80)",
|
||||
Background = "#272727",
|
||||
TextPrimary = "rgba(255,255,255, 0.80)",
|
||||
TextSecondary = "rgba(255,255,255, 0.80)",
|
||||
TextDisabled = "rgba(255,255,255, 0.40)",
|
||||
@@ -290,4 +296,9 @@
|
||||
var uri = new Uri(NavigationManager.Uri);
|
||||
return $"{uri.Scheme}://{uri.Host}:{Settings.StreamingPort}/iptv/{path}";
|
||||
}
|
||||
|
||||
private void ToggleDrawer()
|
||||
{
|
||||
_drawerIsOpen = !_drawerIsOpen;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user