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

improve mobile layout for some media source pages (#2132)

pull/2133/head
Jason Dove 1 month ago committed by GitHub
parent
7df33425fa
commit
cecf18a7b5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 268 additions and 222 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 102
      ErsatzTV/Pages/LocalLibraries.razor
  2. 165
      ErsatzTV/Pages/PlexMediaSources.razor
  3. 77
      ErsatzTV/Shared/RemoteMediaSourceLibrariesEditor.razor
  4. 146
      ErsatzTV/Shared/RemoteMediaSources.razor

102
ErsatzTV/Pages/LocalLibraries.razor
Unescape View File

@ -5,46 +5,53 @@ @@ -5,46 +5,53 @@
@inject IMediator Mediator
@inject IEntityLocker Locker
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<MudTable Hover="true" Items="_libraries" Dense="true">
<ToolBarContent>
<MudText Typo="Typo.h6">Local Libraries</MudText>
</ToolBarContent>
<ColGroup>
<col/>
<col/>
<col style="width: 120px;"/>
</ColGroup>
<HeaderContent>
<MudTh>Name</MudTh>
<MudTh>Media Kind</MudTh>
<MudTh/>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Media Kind">@context.MediaKind</MudTd>
<MudTd>
<div style="align-items: center; display: flex;">
<MudTooltip Text="Edit Library">
<MudIconButton Icon="@Icons.Material.Filled.Edit"
Disabled="@Locker.IsLibraryLocked(context.Id)"
Href="@($"media/sources/local/{context.Id}/edit")">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Delete Library">
<MudIconButton Icon="@Icons.Material.Filled.Delete"
Disabled="@Locker.IsLibraryLocked(context.Id)"
OnClick="@(() => DeleteLibrary(context))">
</MudIconButton>
</MudTooltip>
</div>
</MudTd>
</RowTemplate>
</MudTable>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Href="media/sources/local/add" Class="mt-4">
Add Local Library
</MudButton>
</MudContainer>
<MudForm Style="max-height: 100%">
<MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-8" StartIcon="@Icons.Material.Filled.Add" Href="media/sources/local/add">
Add Local Library
</MudButton>
</MudPaper>
<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">Local Libraries</MudText>
<MudDivider Class="mb-6"/>
<MudTable Hover="true" Items="_libraries" Dense="true">
<ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col/>
<col/>
<col style="width: 120px;"/>
</MudHidden>
</ColGroup>
<HeaderContent>
<MudTh>Name</MudTh>
<MudTh>Media Kind</MudTh>
<MudTh/>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Media Kind">@StringForMediaKind(context.MediaKind)</MudTd>
<MudTd>
<div style="align-items: center; display: flex;">
<MudTooltip Text="Edit Library">
<MudIconButton Icon="@Icons.Material.Filled.Edit"
Disabled="@Locker.IsLibraryLocked(context.Id)"
Href="@($"media/sources/local/{context.Id}/edit")">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Delete Library">
<MudIconButton Icon="@Icons.Material.Filled.Delete"
Disabled="@Locker.IsLibraryLocked(context.Id)"
OnClick="@(() => DeleteLibrary(context))">
</MudIconButton>
</MudTooltip>
</div>
</MudTd>
</RowTemplate>
</MudTable>
</MudContainer>
</div>
</MudForm>
@code {
private readonly CancellationTokenSource _cts = new();
@ -74,13 +81,25 @@ @@ -74,13 +81,25 @@
IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Library", parameters, options);
DialogResult result = await dialog.Result;
if (!result.Canceled)
if (result is { Canceled: false })
{
await Mediator.Send(new DeleteLocalLibrary(library.Id), _cts.Token);
await LoadLibraries(_cts.Token);
}
}
private static string StringForMediaKind(LibraryMediaKind mediaKind) =>
mediaKind switch
{
LibraryMediaKind.Movies => "Movies",
LibraryMediaKind.Shows => "Shows",
LibraryMediaKind.MusicVideos => "Music Videos",
LibraryMediaKind.OtherVideos => "Other Videos",
LibraryMediaKind.Songs => "Songs",
LibraryMediaKind.Images => "Images",
_ => "Unknown"
};
void IDisposable.Dispose()
{
Locker.OnLibraryChanged -= LockChanged;
@ -89,4 +108,5 @@ @@ -89,4 +108,5 @@
_cts.Dispose();
}
}

165
ErsatzTV/Pages/PlexMediaSources.razor
Unescape View File

@ -11,79 +11,85 @@ @@ -11,79 +11,85 @@
@inject IPlexSecretStore PlexSecretStore
@inject ChannelWriter<IScannerBackgroundServiceRequest> ScannerWorkerChannel
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<MudTable T="PlexMediaSourceViewModel" Hover="true" Dense="true" Items="_mediaSources">
<ToolBarContent>
<MudText Typo="Typo.h6">Plex Media Sources</MudText>
</ToolBarContent>
<ColGroup>
<col/>
<col/>
<col style="width: 120px;"/>
</ColGroup>
<HeaderContent>
<MudTh>Name</MudTh>
<MudTh>Address</MudTh>
<MudTh/>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Address">@context.Address</MudTd>
<MudTd>
<div style="align-items: center; display: flex;">
<MudTooltip Text="Refresh Libraries">
<MudIconButton Icon="@Icons.Material.Filled.Refresh"
Disabled="@(Locker.IsPlexLocked())"
OnClick="@(_ => RefreshLibraries(context.Id))">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Edit Libraries">
<MudIconButton Icon="@Icons.Material.Filled.VideoLibrary"
Href="@($"media/sources/plex/{context.Id}/libraries")">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Edit Path Replacements">
<MudIconButton Icon="@Icons.Material.Filled.Folder"
Href="@($"media/sources/plex/{context.Id}/paths")">
</MudIconButton>
</MudTooltip>
</div>
</MudTd>
</RowTemplate>
</MudTable>
@if (_mediaSources.Any())
{
<MudButton Variant="Variant.Filled"
Color="Color.Error"
OnClick="@(_ => SignOutOfPlex())"
Disabled="@Locker.IsPlexLocked()"
Class="mt-4">
Sign out of plex
</MudButton>
}
else
{
<MudButton Variant="Variant.Filled"
Color="Color.Primary"
OnClick="@(_ => AddPlexMediaSource())"
Disabled="@Locker.IsPlexLocked()"
Class="mt-4">
Sign in to plex
</MudButton>
}
@if (_mediaSources.Any() && !_isAuthorized)
{
<MudButton Variant="Variant.Filled"
Color="Color.Secondary"
OnClick="@(_ => AddPlexMediaSource())"
Disabled="@Locker.IsPlexLocked()"
Class="ml-4 mt-4">
Fix Plex Credentials
</MudButton>
}
<MudForm Style="max-height: 100%">
<MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
@if (_mediaSources.Any())
{
<MudButton Variant="Variant.Filled"
Color="Color.Error"
OnClick="@(_ => SignOutOfPlex())"
Disabled="@Locker.IsPlexLocked()"
Class="ml-8">
Sign out of plex
</MudButton>
}
else
{
<MudButton Variant="Variant.Filled"
Color="Color.Primary"
OnClick="@(_ => AddPlexMediaSource())"
Disabled="@Locker.IsPlexLocked()"
Class="ml-8">
Sign in to plex
</MudButton>
}
</MudContainer>
@if (_mediaSources.Any() && !_isAuthorized)
{
<MudButton Variant="Variant.Filled"
Color="Color.Secondary"
OnClick="@(_ => AddPlexMediaSource())"
Disabled="@Locker.IsPlexLocked()"
Class="ml-4">
Fix Plex Credentials
</MudButton>
}
</MudPaper>
<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">Plex Media Sources</MudText>
<MudDivider Class="mb-6"/>
<MudTable T="PlexMediaSourceViewModel" Hover="true" Dense="true" Items="_mediaSources">
<ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col/>
<col/>
<col style="width: 120px;"/>
</MudHidden>
</ColGroup>
<HeaderContent>
<MudTh>Name</MudTh>
<MudTh>Address</MudTh>
<MudTh/>
</HeaderContent>
<RowTemplate>
<MudTd>@context.Name</MudTd>
<MudTd Style="overflow-wrap: anywhere;">@context.Address</MudTd>
<MudTd>
<div style="align-items: center; display: flex;">
<MudTooltip Text="Refresh Libraries">
<MudIconButton Icon="@Icons.Material.Filled.Refresh"
Disabled="@(Locker.IsPlexLocked())"
OnClick="@(_ => RefreshLibraries(context.Id))">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Edit Libraries">
<MudIconButton Icon="@Icons.Material.Filled.VideoLibrary"
Href="@($"media/sources/plex/{context.Id}/libraries")">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Edit Path Replacements">
<MudIconButton Icon="@Icons.Material.Filled.Folder"
Href="@($"media/sources/plex/{context.Id}/paths")">
</MudIconButton>
</MudTooltip>
</div>
</MudTd>
</RowTemplate>
</MudTable>
</MudContainer>
</div>
</MudForm>
@code {
private List<PlexMediaSourceViewModel> _mediaSources = new();
@ -106,7 +112,7 @@ @@ -106,7 +112,7 @@
var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.Small };
IDialogReference dialog = await Dialog.ShowAsync<SignOutOfPlexDialog>("Sign out of Plex", options);
DialogResult result = await dialog.Result;
if (!result.Canceled)
if (result is { Canceled: false })
{
if (Locker.LockPlex())
{
@ -126,7 +132,7 @@ @@ -126,7 +132,7 @@
{
try
{
await JsRuntime.InvokeAsync<object>("open", new object[] { url, "_blank" });
await JsRuntime.InvokeAsync<object>("open", [url, "_blank"]);
}
catch (Exception)
{
@ -145,8 +151,15 @@ @@ -145,8 +151,15 @@
private async void PlexChanged(object sender, EventArgs e)
{
await InvokeAsync(LoadMediaSources);
await InvokeAsync(StateHasChanged);
try
{
await InvokeAsync(LoadMediaSources);
await InvokeAsync(StateHasChanged);
}
catch (Exception)
{
// do nothing
}
}
private async Task RefreshLibraries(int mediaSourceId) =>

77
ErsatzTV/Shared/RemoteMediaSourceLibrariesEditor.razor
Unescape View File

@ -6,41 +6,48 @@ @@ -6,41 +6,48 @@
@inject ISnackbar Snackbar
@inject IEntityLocker Locker
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<MudTable Hover="true" Items="_libraries" Dense="true">
<ToolBarContent>
<MudText Typo="Typo.h6"><b>@_source.Name</b> Libraries</MudText>
</ToolBarContent>
<ColGroup>
<col/>
<col/>
<col style="width: 100px;"/>
</ColGroup>
<HeaderContent>
<MudTh>
<MudTableSortLabel SortBy="new Func<RemoteMediaSourceLibraryEditViewModel, object>(x => x.Name)">
Name
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel SortBy="new Func<RemoteMediaSourceLibraryEditViewModel, object>(x => x.MediaKind)">
Media Kind
</MudTableSortLabel>
</MudTh>
<MudTh>Synchronize</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="MediaType">@context.MediaKind</MudTd>
<MudTd DataLabel="Synchronize">
<MudSwitch T="bool" @bind-Value="@context.ShouldSyncItems" Color="Color.Primary"/>
</MudTd>
</RowTemplate>
</MudTable>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(_ => SaveChanges())" Class="mt-4">
Save Changes
</MudButton>
</MudContainer>
<MudForm Style="max-height: 100%">
<MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-8" StartIcon="@Icons.Material.Filled.Save" OnClick="@(_ => SaveChanges())">
Save Changes
</MudButton>
</MudPaper>
<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"><b>@_source.Name</b> Libraries</MudText>
<MudDivider Class="mb-6"/>
<MudTable Hover="true" Items="_libraries" Dense="true">
<ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col/>
<col/>
<col style="width: 100px;"/>
</MudHidden>
</ColGroup>
<HeaderContent>
<MudTh>
<MudTableSortLabel SortBy="new Func<RemoteMediaSourceLibraryEditViewModel, object>(x => x.Name)">
Name
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel SortBy="new Func<RemoteMediaSourceLibraryEditViewModel, object>(x => x.MediaKind)">
Media Kind
</MudTableSortLabel>
</MudTh>
<MudTh>Synchronize</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="MediaType">@context.MediaKind</MudTd>
<MudTd DataLabel="Synchronize">
<MudSwitch T="bool" @bind-Value="@context.ShouldSyncItems" Color="Color.Primary"/>
</MudTd>
</RowTemplate>
</MudTable>
</MudContainer>
</div>
</MudForm>
@code {
private readonly CancellationTokenSource _cts = new();

146
ErsatzTV/Shared/RemoteMediaSources.razor
Unescape View File

@ -7,76 +7,82 @@ @@ -7,76 +7,82 @@
@inject IDialogService Dialog
@inject IEntityLocker Locker
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<MudTable Hover="true" Dense="true" Items="_mediaSources">
<ToolBarContent>
<MudText Typo="Typo.h6">@Name Media Sources</MudText>
</ToolBarContent>
<ColGroup>
<col/>
<col/>
<col style="width: 120px;"/>
</ColGroup>
<HeaderContent>
<MudTh>Name</MudTh>
<MudTh>Address</MudTh>
<MudTh/>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Address">@context.Address</MudTd>
<MudTd>
<div style="align-items: center; display: flex;">
<MudTooltip Text="Refresh Libraries">
<MudIconButton Icon="@Icons.Material.Filled.Refresh"
Disabled="@(Locker.IsRemoteMediaSourceLocked<TMediaSource>())"
OnClick="@(_ => RefreshLibraries(context.Id))">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Edit Libraries">
<MudIconButton Icon="@Icons.Material.Filled.VideoLibrary"
Href="@($"media/sources/{Name.ToLowerInvariant()}/{context.Id}/libraries")">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Edit Path Replacements">
<MudIconButton Icon="@Icons.Material.Filled.Folder"
Href="@($"media/sources/{Name.ToLowerInvariant()}/{context.Id}/paths")">
</MudIconButton>
</MudTooltip>
</div>
</MudTd>
</RowTemplate>
</MudTable>
@if (_mediaSources.Any())
{
<MudButton Variant="Variant.Filled"
Color="Color.Error"
OnClick="@(_ => Disconnect())"
Class="mt-4">
Disconnect @Name
</MudButton>
}
else
{
<MudButton Variant="Variant.Filled"
Color="Color.Primary"
Href="@($"media/sources/{Name.ToLowerInvariant()}/edit")"
Class="mt-4">
Connect @Name
</MudButton>
}
@if (_mediaSources.Any() && !_isAuthorized)
{
<MudButton Variant="Variant.Filled"
Color="Color.Secondary"
Href="@($"media/sources/{Name.ToLowerInvariant()}/edit")"
Class="ml-4 mt-4">
Fix @Name Connection
</MudButton>
}
<MudForm Style="max-height: 100%">
<MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
@if (_mediaSources.Any())
{
<MudButton Variant="Variant.Filled"
Color="Color.Error"
OnClick="@(_ => Disconnect())"
Class="ml-8">
Disconnect @Name
</MudButton>
}
else
{
<MudButton Variant="Variant.Filled"
Color="Color.Primary"
Href="@($"media/sources/{Name.ToLowerInvariant()}/edit")"
Class="ml-8">
Connect @Name
</MudButton>
}
</MudContainer>
@if (_mediaSources.Any() && !_isAuthorized)
{
<MudButton Variant="Variant.Filled"
Color="Color.Secondary"
Href="@($"media/sources/{Name.ToLowerInvariant()}/edit")"
Class="ml-4">
Fix @Name Connection
</MudButton>
}
</MudPaper>
<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">@Name Media Sources</MudText>
<MudDivider Class="mb-6"/>
<MudTable Hover="true" Dense="true" Items="_mediaSources">
<ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col/>
<col/>
<col style="width: 120px;"/>
</MudHidden>
</ColGroup>
<HeaderContent>
<MudTh>Name</MudTh>
<MudTh>Address</MudTh>
<MudTh/>
</HeaderContent>
<RowTemplate>
<MudTd>@context.Name</MudTd>
<MudTd Style="overflow-wrap: anywhere;">@context.Address</MudTd>
<MudTd>
<div style="align-items: center; display: flex;">
<MudTooltip Text="Refresh Libraries">
<MudIconButton Icon="@Icons.Material.Filled.Refresh"
Disabled="@(Locker.IsRemoteMediaSourceLocked<TMediaSource>())"
OnClick="@(_ => RefreshLibraries(context.Id))">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Edit Libraries">
<MudIconButton Icon="@Icons.Material.Filled.VideoLibrary"
Href="@($"media/sources/{Name.ToLowerInvariant()}/{context.Id}/libraries")">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Edit Path Replacements">
<MudIconButton Icon="@Icons.Material.Filled.Folder"
Href="@($"media/sources/{Name.ToLowerInvariant()}/{context.Id}/paths")">
</MudIconButton>
</MudTooltip>
</div>
</MudTd>
</RowTemplate>
</MudTable>
</MudContainer>
</div>
</MudForm>
@code {
private readonly CancellationTokenSource _cts = new();
@ -121,7 +127,7 @@ @@ -121,7 +127,7 @@
var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.Small };
IDialogReference dialog = await Dialog.ShowAsync<DisconnectRemoteMediaSourceDialog>($"Disconnect {Name}", parameters, options);
DialogResult result = await dialog.Result;
if (!result.Canceled)
if (result is { Canceled: false })
{
if (Locker.LockRemoteMediaSource<TMediaSource>())
{

Write Preview
Loading…
Cancel
Save