Browse Source

start to make ui minimally responsive (#2004)

pull/2013/head
Jason Dove 3 months ago committed by GitHub
parent
commit
b43b66dd35
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 3
      CHANGELOG.md
  2. 1
      ErsatzTV/Pages/Index.razor
  3. 140
      ErsatzTV/Pages/Search.razor
  4. 65
      ErsatzTV/Shared/MainLayout.razor

3
CHANGELOG.md

@ -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 - `ETV_UI_PORT`: port used for admin UI, defaults to 8409
- Publish docker images to ghcr.io (`ghcr.io/ersatztv/ersatztv`) - Publish docker images to ghcr.io (`ghcr.io/ersatztv/ersatztv`)
### Changed
- Start to make UI minimally responsive (functional on smaller screens)
### Fixed ### Fixed
- Fix error message about synchronizing Plex collections from a Plex server that has zero collections - Fix error message about synchronizing Plex collections from a Plex server that has zero collections

1
ErsatzTV/Pages/Index.razor

@ -1,4 +1,5 @@
@page "/" @page "/"
@page "/system/health"
@using System.Reflection @using System.Reflection
@using ErsatzTV.Application.Health @using ErsatzTV.Application.Health
@using ErsatzTV.Core.Health @using ErsatzTV.Core.Health

140
ErsatzTV/Pages/Search.razor

@ -8,7 +8,7 @@
@using ErsatzTV.Extensions @using ErsatzTV.Extensions
@implements IDisposable @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"> <div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%" class="ml-6 mr-6">
@if (IsSelectMode()) @if (IsSelectMode())
{ {
@ -38,78 +38,88 @@
} }
else else
{ {
<MudText Style="margin-bottom: auto; margin-top: auto">@_query</MudText> <div style="align-items: center; display: flex; width: 100%" class="d-none d-md-flex">
if (_movies?.Count > 0) <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> {
} <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) @if (_shows?.Count > 0)
{ {
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#seasons")" Style="margin-bottom: auto; margin-top: auto">@_seasons.Count Seasons</MudLink> <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#shows")" Style="margin-bottom: auto; margin-top: auto">@_shows.Count Shows</MudLink>
} }
if (_episodes?.Count > 0) @if (_seasons?.Count > 0)
{ {
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#episodes")" Style="margin-bottom: auto; margin-top: auto">@_episodes.Count Episodes</MudLink> <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#seasons")" Style="margin-bottom: auto; margin-top: auto">@_seasons.Count Seasons</MudLink>
} }
if (_artists?.Count > 0) @if (_episodes?.Count > 0)
{ {
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#artists")" Style="margin-bottom: auto; margin-top: auto">@_artists.Count Artists</MudLink> <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#episodes")" Style="margin-bottom: auto; margin-top: auto">@_episodes.Count Episodes</MudLink>
} }
if (_musicVideos?.Count > 0) @if (_artists?.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> <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#artists")" Style="margin-bottom: auto; margin-top: auto">@_artists.Count Artists</MudLink>
} }
if (_otherVideos?.Count > 0) @if (_musicVideos?.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> <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#music_videos")" Style="margin-bottom: auto; margin-top: auto">@_musicVideos.Count Music Videos</MudLink>
} }
if (_songs?.Count > 0) @if (_otherVideos?.Count > 0)
{ {
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#songs")" Style="margin-bottom: auto; margin-top: auto">@_songs.Count Songs</MudLink> <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#other_videos")" Style="margin-bottom: auto; margin-top: auto">@_otherVideos.Count Other Videos</MudLink>
} }
if (_images?.Count > 0) @if (_songs?.Count > 0)
{ {
<MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#images")" Style="margin-bottom: auto; margin-top: auto">@_images.Count Images</MudLink> <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#songs")" Style="margin-bottom: auto; margin-top: auto">@_songs.Count Songs</MudLink>
} }
<div style="margin-left: auto"> @if (_images?.Count > 0)
<MudTooltip Text="Add All To Collection"> {
<MudButton Variant="Variant.Filled" <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#images")" Style="margin-bottom: auto; margin-top: auto">@_images.Count Images</MudLink>
Color="Color.Primary" }
StartIcon="@Icons.Material.Filled.Add" <div class="flex-grow-1 d-none d-md-flex"></div>
OnClick="@AddAllToCollection"> <div>
Add All <MudTooltip Text="Add All To Collection">
</MudButton> <MudButton Variant="Variant.Filled"
</MudTooltip> Color="Color.Primary"
<MudTooltip Text="Add All To Playlist"> StartIcon="@Icons.Material.Filled.Add"
<MudButton Class="ml-3" OnClick="@AddAllToCollection">
Variant="Variant.Filled" Add All
Color="Color.Primary" </MudButton>
StartIcon="@Icons.Material.Filled.PlaylistAdd" </MudTooltip>
OnClick="@AddAllToPlaylist"> <MudTooltip Text="Add All To Playlist">
Add All <MudButton Class="ml-3"
</MudButton> Variant="Variant.Filled"
</MudTooltip> Color="Color.Primary"
<MudTooltip Text="Save As Smart Collection"> StartIcon="@Icons.Material.Filled.PlaylistAdd"
<MudButton Class="ml-3" Variant="Variant.Filled" OnClick="@AddAllToPlaylist">
Color="Color.Secondary" Add All
StartIcon="@Icons.Material.Filled.Save" </MudButton>
OnClick="@SaveAsSmartCollection"> </MudTooltip>
Save As <MudTooltip Text="Save As Smart Collection">
</MudButton> <MudButton Class="ml-3" Variant="Variant.Filled"
</MudTooltip> 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>
} }
</div> </div>

65
ErsatzTV/Shared/MainLayout.razor

@ -16,7 +16,8 @@
<MudLayout @onclick="@(() => _isOpen = false)"> <MudLayout @onclick="@(() => _isOpen = false)">
<MudAppBar Elevation="1" Class="app-bar"> <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=""> <a href="">
<img src="images/ersatztv.png" alt="ErsatzTV"/> <img src="images/ersatztv.png" alt="ErsatzTV"/>
</a> </a>
@ -70,33 +71,35 @@
</EditForm> </EditForm>
</div> </div>
} }
<MudSpacer/> <div class="flex-grow-1 d-none d-md-flex"></div>
@if (SystemStartup.IsDatabaseReady && SystemStartup.IsSearchIndexReady) <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="@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"> @* <MudLink Color="Color.Info" Href="/swagger" Target="_blank" Class="mr-4" Underline="Underline.None">API</MudLink> *@
<MudIconButton Icon="@Icons.Material.Filled.Help" Color="Color.Primary" Href="https://ersatztv.org" Target="_blank"/> <MudTooltip Text="Documentation">
</MudTooltip> <MudIconButton Icon="@Icons.Material.Filled.Help" Color="Color.Primary" Href="https://ersatztv.org" Target="_blank"/>
<MudTooltip Text="Discord"> </MudTooltip>
<MudIconButton Icon="fab fa-discord" Color="Color.Primary" Href="https://discord.gg/hHaJm3yGy6" Target="_blank"/> <MudTooltip Text="Discord">
</MudTooltip> <MudIconButton Icon="fab fa-discord" Color="Color.Primary" Href="https://discord.gg/hHaJm3yGy6" Target="_blank"/>
<MudTooltip Text="GitHub"> </MudTooltip>
<MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Primary" Href="https://github.com/ErsatzTV/ErsatzTV" Target="_blank"/> <MudTooltip Text="GitHub">
</MudTooltip> <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Primary" Href="https://github.com/ErsatzTV/ErsatzTV" Target="_blank"/>
<AuthorizeView> </MudTooltip>
<form action="/account/logout" method="post"> <AuthorizeView>
<MudTooltip Text="Logout"> <form action="/account/logout" method="post">
<MudIconButton Icon="@Icons.Material.Filled.Logout" Color="Color.Secondary" ButtonType="ButtonType.Submit"/> <MudTooltip Text="Logout">
</MudTooltip> <MudIconButton Icon="@Icons.Material.Filled.Logout" Color="Color.Secondary" ButtonType="ButtonType.Submit"/>
</form> </MudTooltip>
</AuthorizeView> </form>
</AuthorizeView>
</div>
</MudAppBar> </MudAppBar>
@if (SystemStartup.IsDatabaseReady && SystemStartup.IsSearchIndexReady) @if (SystemStartup.IsDatabaseReady && SystemStartup.IsSearchIndexReady)
{ {
<MudDrawer Open="true" Elevation="2" ClipMode="DrawerClipMode.Always"> <MudDrawer @bind-Open="@_drawerIsOpen" Elevation="2" ClipMode="DrawerClipMode.Always">
<MudNavMenu> <MudNavMenu>
<MudNavLink Href="channels">Channels</MudNavLink> <MudNavLink Href="channels">Channels</MudNavLink>
<MudNavLink Href="ffmpeg">FFmpeg Profiles</MudNavLink> <MudNavLink Href="ffmpeg">FFmpeg Profiles</MudNavLink>
@ -133,6 +136,7 @@
</MudNavGroup> </MudNavGroup>
<MudNavLink Href="settings">Settings</MudNavLink> <MudNavLink Href="settings">Settings</MudNavLink>
<MudNavGroup Title="Support" Expanded="true"> <MudNavGroup Title="Support" Expanded="true">
<MudNavLink Href="system/health">Health Checks</MudNavLink>
<MudNavLink Href="system/logs">Logs</MudNavLink> <MudNavLink Href="system/logs">Logs</MudNavLink>
<MudNavLink Href="system/troubleshooting">Troubleshooting</MudNavLink> <MudNavLink Href="system/troubleshooting">Troubleshooting</MudNavLink>
</MudNavGroup> </MudNavGroup>
@ -159,6 +163,7 @@
private record SearchModel; private record SearchModel;
private readonly SearchModel _dummyModel = new(); private readonly SearchModel _dummyModel = new();
private bool _drawerIsOpen = true;
private bool _isOpen; private bool _isOpen;
private List<SearchTargetViewModel> _searchTargets; private List<SearchTargetViewModel> _searchTargets;
@ -188,11 +193,12 @@
ActionDefault = "rgba(255,255,255, 0.80)", ActionDefault = "rgba(255,255,255, 0.80)",
Primary = "#009000", Primary = "#009000",
Secondary = "#009090", Secondary = "#009090",
Surface = "#1f1f1f",
AppbarBackground = "#121212", AppbarBackground = "#121212",
Background = "#272727", AppbarText = "rgba(255,255,255, 0.80)",
DrawerBackground = "#1f1f1f", DrawerBackground = "#1f1f1f",
Surface = "#1f1f1f",
DrawerText = "rgba(255,255,255, 0.80)", DrawerText = "rgba(255,255,255, 0.80)",
Background = "#272727",
TextPrimary = "rgba(255,255,255, 0.80)", TextPrimary = "rgba(255,255,255, 0.80)",
TextSecondary = "rgba(255,255,255, 0.80)", TextSecondary = "rgba(255,255,255, 0.80)",
TextDisabled = "rgba(255,255,255, 0.40)", TextDisabled = "rgba(255,255,255, 0.40)",
@ -290,4 +296,9 @@
var uri = new Uri(NavigationManager.Uri); var uri = new Uri(NavigationManager.Uri);
return $"{uri.Scheme}://{uri.Host}:{Settings.StreamingPort}/iptv/{path}"; return $"{uri.Scheme}://{uri.Host}:{Settings.StreamingPort}/iptv/{path}";
} }
private void ToggleDrawer()
{
_drawerIsOpen = !_drawerIsOpen;
}
} }
Loading…
Cancel
Save