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

165
ErsatzTV/Pages/PlexMediaSources.razor
Unescape View File

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

77
ErsatzTV/Shared/RemoteMediaSourceLibrariesEditor.razor
Unescape View File

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

146
ErsatzTV/Shared/RemoteMediaSources.razor
Unescape View File

@ -7,76 +7,82 @@
@inject IDialogService Dialog @inject IDialogService Dialog
@inject IEntityLocker Locker @inject IEntityLocker Locker
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8"> <MudForm Style="max-height: 100%">
<MudTable Hover="true" Dense="true" Items="_mediaSources"> <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100; align-items: center">
<ToolBarContent> @if (_mediaSources.Any())
<MudText Typo="Typo.h6">@Name Media Sources</MudText> {
</ToolBarContent> <MudButton Variant="Variant.Filled"
<ColGroup> Color="Color.Error"
<col/> OnClick="@(_ => Disconnect())"
<col/> Class="ml-8">
<col style="width: 120px;"/> Disconnect @Name
</ColGroup> </MudButton>
<HeaderContent> }
<MudTh>Name</MudTh> else
<MudTh>Address</MudTh> {
<MudTh/> <MudButton Variant="Variant.Filled"
</HeaderContent> Color="Color.Primary"
<RowTemplate> Href="@($"media/sources/{Name.ToLowerInvariant()}/edit")"
<MudTd DataLabel="Name">@context.Name</MudTd> Class="ml-8">
<MudTd DataLabel="Address">@context.Address</MudTd> Connect @Name
<MudTd> </MudButton>
<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>
}
</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 { @code {
private readonly CancellationTokenSource _cts = new(); private readonly CancellationTokenSource _cts = new();
@ -121,7 +127,7 @@
var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.Small }; var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.Small };
IDialogReference dialog = await Dialog.ShowAsync<DisconnectRemoteMediaSourceDialog>($"Disconnect {Name}", parameters, options); IDialogReference dialog = await Dialog.ShowAsync<DisconnectRemoteMediaSourceDialog>($"Disconnect {Name}", parameters, options);
DialogResult result = await dialog.Result; DialogResult result = await dialog.Result;
if (!result.Canceled) if (result is { Canceled: false })
{ {
if (Locker.LockRemoteMediaSource<TMediaSource>()) if (Locker.LockRemoteMediaSource<TMediaSource>())
{ {

Write Preview
Loading…
Cancel
Save