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. 40
      ErsatzTV/Pages/LocalLibraries.razor
  2. 95
      ErsatzTV/Pages/PlexMediaSources.razor
  3. 23
      ErsatzTV/Shared/RemoteMediaSourceLibrariesEditor.razor
  4. 80
      ErsatzTV/Shared/RemoteMediaSources.razor

40
ErsatzTV/Pages/LocalLibraries.razor
Unescape View File

@ -5,15 +5,23 @@
@inject IMediator Mediator @inject IMediator Mediator
@inject IEntityLocker Locker @inject IEntityLocker Locker
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8"> <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"> <MudTable Hover="true" Items="_libraries" Dense="true">
<ToolBarContent>
<MudText Typo="Typo.h6">Local Libraries</MudText>
</ToolBarContent>
<ColGroup> <ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col/> <col/>
<col/> <col/>
<col style="width: 120px;"/> <col style="width: 120px;"/>
</MudHidden>
</ColGroup> </ColGroup>
<HeaderContent> <HeaderContent>
<MudTh>Name</MudTh> <MudTh>Name</MudTh>
@ -22,7 +30,7 @@
</HeaderContent> </HeaderContent>
<RowTemplate> <RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd> <MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Media Kind">@context.MediaKind</MudTd> <MudTd DataLabel="Media Kind">@StringForMediaKind(context.MediaKind)</MudTd>
<MudTd> <MudTd>
<div style="align-items: center; display: flex;"> <div style="align-items: center; display: flex;">
<MudTooltip Text="Edit Library"> <MudTooltip Text="Edit Library">
@ -41,10 +49,9 @@
</MudTd> </MudTd>
</RowTemplate> </RowTemplate>
</MudTable> </MudTable>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Href="media/sources/local/add" Class="mt-4"> </MudContainer>
Add Local Library </div>
</MudButton> </MudForm>
</MudContainer>
@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();
} }
} }

95
ErsatzTV/Pages/PlexMediaSources.razor
Unescape View File

@ -11,15 +11,51 @@
@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%">
<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>
}
@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"> <MudTable T="PlexMediaSourceViewModel" Hover="true" Dense="true" Items="_mediaSources">
<ToolBarContent>
<MudText Typo="Typo.h6">Plex Media Sources</MudText>
</ToolBarContent>
<ColGroup> <ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col/> <col/>
<col/> <col/>
<col style="width: 120px;"/> <col style="width: 120px;"/>
</MudHidden>
</ColGroup> </ColGroup>
<HeaderContent> <HeaderContent>
<MudTh>Name</MudTh> <MudTh>Name</MudTh>
@ -27,8 +63,8 @@
<MudTh/> <MudTh/>
</HeaderContent> </HeaderContent>
<RowTemplate> <RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd> <MudTd>@context.Name</MudTd>
<MudTd DataLabel="Address">@context.Address</MudTd> <MudTd Style="overflow-wrap: anywhere;">@context.Address</MudTd>
<MudTd> <MudTd>
<div style="align-items: center; display: flex;"> <div style="align-items: center; display: flex;">
<MudTooltip Text="Refresh Libraries"> <MudTooltip Text="Refresh Libraries">
@ -51,39 +87,9 @@
</MudTd> </MudTd>
</RowTemplate> </RowTemplate>
</MudTable> </MudTable>
@if (_mediaSources.Any()) </MudContainer>
{ </div>
<MudButton Variant="Variant.Filled" </MudForm>
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>
@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)
{ {
@ -144,10 +150,17 @@
} }
private async void PlexChanged(object sender, EventArgs e) private async void PlexChanged(object sender, EventArgs e)
{
try
{ {
await InvokeAsync(LoadMediaSources); await InvokeAsync(LoadMediaSources);
await InvokeAsync(StateHasChanged); await InvokeAsync(StateHasChanged);
} }
catch (Exception)
{
// do nothing
}
}
private async Task RefreshLibraries(int mediaSourceId) => private async Task RefreshLibraries(int mediaSourceId) =>
await ScannerWorkerChannel.WriteAsync(new SynchronizePlexLibraries(mediaSourceId)); await ScannerWorkerChannel.WriteAsync(new SynchronizePlexLibraries(mediaSourceId));

23
ErsatzTV/Shared/RemoteMediaSourceLibrariesEditor.razor
Unescape View File

@ -6,15 +6,23 @@
@inject ISnackbar Snackbar @inject ISnackbar Snackbar
@inject IEntityLocker Locker @inject IEntityLocker Locker
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8"> <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"> <MudTable Hover="true" Items="_libraries" Dense="true">
<ToolBarContent>
<MudText Typo="Typo.h6"><b>@_source.Name</b> Libraries</MudText>
</ToolBarContent>
<ColGroup> <ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col/> <col/>
<col/> <col/>
<col style="width: 100px;"/> <col style="width: 100px;"/>
</MudHidden>
</ColGroup> </ColGroup>
<HeaderContent> <HeaderContent>
<MudTh> <MudTh>
@ -37,10 +45,9 @@
</MudTd> </MudTd>
</RowTemplate> </RowTemplate>
</MudTable> </MudTable>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(_ => SaveChanges())" Class="mt-4"> </MudContainer>
Save Changes </div>
</MudButton> </MudForm>
</MudContainer>
@code { @code {
private readonly CancellationTokenSource _cts = new(); private readonly CancellationTokenSource _cts = new();

80
ErsatzTV/Shared/RemoteMediaSources.razor
Unescape View File

@ -7,15 +7,48 @@
@inject IDialogService Dialog @inject IDialogService Dialog
@inject IEntityLocker Locker @inject IEntityLocker Locker
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8"> <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>
}
@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"> <MudTable Hover="true" Dense="true" Items="_mediaSources">
<ToolBarContent>
<MudText Typo="Typo.h6">@Name Media Sources</MudText>
</ToolBarContent>
<ColGroup> <ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col/> <col/>
<col/> <col/>
<col style="width: 120px;"/> <col style="width: 120px;"/>
</MudHidden>
</ColGroup> </ColGroup>
<HeaderContent> <HeaderContent>
<MudTh>Name</MudTh> <MudTh>Name</MudTh>
@ -23,8 +56,8 @@
<MudTh/> <MudTh/>
</HeaderContent> </HeaderContent>
<RowTemplate> <RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd> <MudTd>@context.Name</MudTd>
<MudTd DataLabel="Address">@context.Address</MudTd> <MudTd Style="overflow-wrap: anywhere;">@context.Address</MudTd>
<MudTd> <MudTd>
<div style="align-items: center; display: flex;"> <div style="align-items: center; display: flex;">
<MudTooltip Text="Refresh Libraries"> <MudTooltip Text="Refresh Libraries">
@ -47,36 +80,9 @@
</MudTd> </MudTd>
</RowTemplate> </RowTemplate>
</MudTable> </MudTable>
@if (_mediaSources.Any()) </MudContainer>
{ </div>
<MudButton Variant="Variant.Filled" </MudForm>
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>
@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