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 pages with tables (#2130)

pull/2131/head
Jason Dove 1 month ago committed by GitHub
parent
28a65e74bb
commit
5dfaa1a7ad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 250 additions and 225 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. 211
      ErsatzTV/Pages/Channels.razor
  2. 125
      ErsatzTV/Pages/FFmpeg.razor
  3. 135
      ErsatzTV/Pages/Watermarks.razor
  4. 4
      ErsatzTV/wwwroot/css/site.css

211
ErsatzTV/Pages/Channels.razor
Unescape View File

@ -10,107 +10,114 @@ @@ -10,107 +10,114 @@
@inject NavigationManager NavigationManager
@inject IFFmpegSegmenterService SegmenterService
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<MudTable Hover="true"
@bind-RowsPerPage="@_rowsPerPage"
ServerData="@(new Func<TableState, CancellationToken, Task<TableData<ChannelViewModel>>>(ServerReload))"
@ref="_table">
<ToolBarContent>
<MudText Typo="Typo.h6">Channels</MudText>
</ToolBarContent>
<ColGroup>
<col style="width: 60px;"/>
<col/>
<col style="width: 15%"/>
<col style="width: 15%"/>
<col style="width: 15%"/>
<col style="width: 15%"/>
<col style="width: 240px;"/>
</ColGroup>
<HeaderContent>
<MudTh>
<MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<ChannelViewModel, object>(x => decimal.Parse(x.Number, CultureInfo.InvariantCulture))">Number</MudTableSortLabel>
</MudTh>
<MudTh>Logo</MudTh>
<MudTh>
<MudTableSortLabel SortBy="new Func<ChannelViewModel, object>(x => x.Name)">Name</MudTableSortLabel>
</MudTh>
<MudTh>Language</MudTh>
<MudTh>Mode</MudTh>
<MudTh>FFmpeg Profile</MudTh>
<MudTh/>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Number">@context.Number</MudTd>
<MudTd DataLabel="Logo">
@if (!string.IsNullOrWhiteSpace(context.Logo?.Path))
{
<MudElement HtmlTag="img" src="@context.Logo.UrlWithContentType" Style="max-height: 50px"/>
}
else
{
<MudElement HtmlTag="img" src="@($"iptv/logos/gen?text={context.WebEncodedName}")" Style="max-height: 50px"/>
}
</MudTd>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Language">@context.PreferredAudioLanguageCode</MudTd>
<MudTd DataLabel="Mode">@GetStreamingMode(context.StreamingMode)</MudTd>
<MudTd DataLabel="FFmpeg Profile">
@if (context.StreamingMode != StreamingMode.HttpLiveStreamingDirect)
{
@_ffmpegProfiles.Find(p => p.Id == context.FFmpegProfileId)?.Name
}
</MudTd>
<MudTd>
<div style="align-items: center; display: flex;">
@if (CanPreviewChannel(context))
{
<MudTooltip Text="Preview Channel">
<MudIconButton Icon="@Icons.Material.Filled.PlayCircle"
OnClick="@(_ => PreviewChannel(context))">
</MudIconButton>
</MudTooltip>
}
else
{
<MudTooltip Text="Channel preview requires playout, MPEG-TS/HLS Segmenter, and H264/AAC">
<MudIconButton Icon="@Icons.Material.Filled.PlayCircle" Disabled="true">
</MudIconButton>
</MudTooltip>
}
@if (SegmenterService.IsActive(context.Number))
{
<MudTooltip Text="Stop Transcode Session">
<MudIconButton Icon="@Icons.Material.Filled.Stop"
OnClick="@(_ => StopChannel(context))">
</MudIconButton>
</MudTooltip>
}
else
{
<div style="width: 48px"></div>
}
<MudTooltip Text="Edit Channel">
<MudIconButton Icon="@Icons.Material.Filled.Edit"
Href="@($"channels/{context.Id}")">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Delete Channel">
<MudIconButton Icon="@Icons.Material.Filled.Delete"
OnClick="@(_ => DeleteChannelAsync(context))">
</MudIconButton>
</MudTooltip>
</div>
</MudTd>
</RowTemplate>
<PagerContent>
<MudTablePager/>
</PagerContent>
</MudTable>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Href="channels/add" Class="mt-4">
Add Channel
</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="channels/add">
Add Channel
</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">Channels</MudText>
<MudDivider Class="mb-6"/>
<MudTable Hover="true"
@bind-RowsPerPage="@_rowsPerPage"
ServerData="@(new Func<TableState, CancellationToken, Task<TableData<ChannelViewModel>>>(ServerReload))"
@ref="_table">
<ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col style="width: 60px;"/>
<col/>
<col style="width: 15%"/>
<col style="width: 15%"/>
<col style="width: 15%"/>
<col style="width: 15%"/>
<col style="width: 240px;"/>
</MudHidden>
</ColGroup>
<HeaderContent>
<MudTh>
<MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<ChannelViewModel, object>(x => decimal.Parse(x.Number, CultureInfo.InvariantCulture))">Number</MudTableSortLabel>
</MudTh>
<MudTh>Logo</MudTh>
<MudTh>
<MudTableSortLabel SortBy="new Func<ChannelViewModel, object>(x => x.Name)">Name</MudTableSortLabel>
</MudTh>
<MudTh>Language</MudTh>
<MudTh>Mode</MudTh>
<MudTh>FFmpeg Profile</MudTh>
<MudTh/>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Number">@context.Number</MudTd>
<MudTd DataLabel="Logo">
@if (!string.IsNullOrWhiteSpace(context.Logo?.Path))
{
<MudElement HtmlTag="img" src="@context.Logo.UrlWithContentType" Style="max-height: 50px"/>
}
else
{
<MudElement HtmlTag="img" src="@($"iptv/logos/gen?text={context.WebEncodedName}")" Style="max-height: 50px"/>
}
</MudTd>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Language">@context.PreferredAudioLanguageCode</MudTd>
<MudTd DataLabel="Mode">@GetStreamingMode(context.StreamingMode)</MudTd>
<MudTd DataLabel="FFmpeg Profile">
@if (context.StreamingMode != StreamingMode.HttpLiveStreamingDirect)
{
@_ffmpegProfiles.Find(p => p.Id == context.FFmpegProfileId)?.Name
}
</MudTd>
<MudTd>
<div style="align-items: center; display: flex;">
@if (CanPreviewChannel(context))
{
<MudTooltip Text="Preview Channel">
<MudIconButton Icon="@Icons.Material.Filled.PlayCircle"
OnClick="@(_ => PreviewChannel(context))">
</MudIconButton>
</MudTooltip>
}
else
{
<MudTooltip Text="Channel preview requires playout, MPEG-TS/HLS Segmenter, and H264/AAC">
<MudIconButton Icon="@Icons.Material.Filled.PlayCircle" Disabled="true">
</MudIconButton>
</MudTooltip>
}
@if (SegmenterService.IsActive(context.Number))
{
<MudTooltip Text="Stop Transcode Session">
<MudIconButton Icon="@Icons.Material.Filled.Stop"
OnClick="@(_ => StopChannel(context))">
</MudIconButton>
</MudTooltip>
}
else
{
<div style="width: 48px"></div>
}
<MudTooltip Text="Edit Channel">
<MudIconButton Icon="@Icons.Material.Filled.Edit"
Href="@($"channels/{context.Id}")">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Delete Channel">
<MudIconButton Icon="@Icons.Material.Filled.Delete"
OnClick="@(_ => DeleteChannelAsync(context))">
</MudIconButton>
</MudTooltip>
</div>
</MudTd>
</RowTemplate>
<PagerContent>
<MudTablePager/>
</PagerContent>
</MudTable>
</MudContainer>
</div>
</MudForm>
@code {
private readonly CancellationTokenSource _cts = new();
@ -209,7 +216,7 @@ @@ -209,7 +216,7 @@
IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Channel", parameters, options);
DialogResult result = await dialog.Result;
if (!result.Canceled)
if (result is { Canceled: false })
{
await Mediator.Send(new DeleteChannel(channel.Id), _cts.Token);
if (_table != null)

125
ErsatzTV/Pages/FFmpeg.razor
Unescape View File

@ -5,64 +5,71 @@ @@ -5,64 +5,71 @@
@inject IMediator Mediator
@inject NavigationManager NavigationManager
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<MudTable Hover="true" Items="_ffmpegProfiles">
<ToolBarContent>
<MudText Typo="Typo.h6">FFmpeg Profiles</MudText>
</ToolBarContent>
<ColGroup>
<col/>
<col/>
<col/>
<col/>
<col style="width: 180px;"/>
</ColGroup>
<HeaderContent>
<MudTh>Name</MudTh>
<MudTh>Resolution</MudTh>
<MudTh>Video Format</MudTh>
<MudTh>Audio Format</MudTh>
<MudTh/>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Resolution">@context.Resolution.Name</MudTd>
<MudTd DataLabel="Video Format">
@if (context.HardwareAcceleration != HardwareAccelerationKind.None)
{
@($"{context.VideoFormat.ToString().ToLowerInvariant()} / {context.HardwareAcceleration.ToString().ToLowerInvariant()}")
}
else
{
@context.VideoFormat.ToString().ToLowerInvariant()
}
</MudTd>
<MudTd DataLabel="Audio Format">@context.AudioFormat.ToString().ToLowerInvariant()</MudTd>
<MudTd>
<div style="align-items: center; display: flex;">
<MudTooltip Text="Edit Profile">
<MudIconButton Icon="@Icons.Material.Filled.Edit"
Href="@($"ffmpeg/{context.Id}")">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Copy Profile">
<MudIconButton Icon="@Icons.Material.Filled.ContentCopy"
OnClick="@(_ => CopyProfileAsync(context))">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Delete Profile">
<MudIconButton Icon="@Icons.Material.Filled.Delete"
OnClick="@(_ => DeleteProfileAsync(context))">
</MudIconButton>
</MudTooltip>
</div>
</MudTd>
</RowTemplate>
</MudTable>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Href="ffmpeg/add" Class="mt-4">
Add Profile
</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="ffmpeg/add">
Add Profile
</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">FFmpeg Profiles</MudText>
<MudDivider Class="mb-6"/>
<MudTable Hover="true" Items="_ffmpegProfiles">
<ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col/>
<col/>
<col/>
<col/>
<col style="width: 180px;"/>
</MudHidden>
</ColGroup>
<HeaderContent>
<MudTh>Name</MudTh>
<MudTh>Resolution</MudTh>
<MudTh>Video Format</MudTh>
<MudTh>Audio Format</MudTh>
<MudTh/>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Resolution">@context.Resolution.Name</MudTd>
<MudTd DataLabel="Video Format">
@if (context.HardwareAcceleration != HardwareAccelerationKind.None)
{
@($"{context.VideoFormat.ToString().ToLowerInvariant()} / {context.HardwareAcceleration.ToString().ToLowerInvariant()}")
}
else
{
@context.VideoFormat.ToString().ToLowerInvariant()
}
</MudTd>
<MudTd DataLabel="Audio Format">@context.AudioFormat.ToString().ToLowerInvariant()</MudTd>
<MudTd>
<div style="align-items: center; display: flex;">
<MudTooltip Text="Edit Profile">
<MudIconButton Icon="@Icons.Material.Filled.Edit"
Href="@($"ffmpeg/{context.Id}")">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Copy Profile">
<MudIconButton Icon="@Icons.Material.Filled.ContentCopy"
OnClick="@(_ => CopyProfileAsync(context))">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Delete Profile">
<MudIconButton Icon="@Icons.Material.Filled.Delete"
OnClick="@(_ => DeleteProfileAsync(context))">
</MudIconButton>
</MudTooltip>
</div>
</MudTd>
</RowTemplate>
</MudTable>
</MudContainer>
</div>
</MudForm>
@code {
private readonly CancellationTokenSource _cts = new();
@ -87,7 +94,7 @@ @@ -87,7 +94,7 @@
IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete FFmpeg Profile", parameters, options);
DialogResult result = await dialog.Result;
if (!result.Canceled)
if (result is { Canceled: false })
{
await Mediator.Send(new DeleteFFmpegProfile(ffmpegProfile.Id), _cts.Token);
await LoadFFmpegProfilesAsync(_cts.Token);

135
ErsatzTV/Pages/Watermarks.razor
Unescape View File

@ -5,68 +5,75 @@ @@ -5,68 +5,75 @@
@inject IMediator Mediator
@inject NavigationManager NavigationManager
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
<MudTable Hover="true" Items="_watermarks">
<ToolBarContent>
<MudText Typo="Typo.h6">Watermarks</MudText>
</ToolBarContent>
<ColGroup>
<col/>
<col/>
<col/>
<col/>
<col style="width: 180px;"/>
</ColGroup>
<HeaderContent>
<MudTh>Name</MudTh>
<MudTh>Image</MudTh>
<MudTh>Mode</MudTh>
<MudTh>Location</MudTh>
<MudTh/>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Image">
@if (!string.IsNullOrWhiteSpace(context.Image?.Path))
{
<MudElement HtmlTag="img" src="@($"artwork/watermarks/{context.Image.UrlWithContentType}")" Style="max-height: 50px"/>
}
else if (context.ImageSource == ChannelWatermarkImageSource.ChannelLogo)
{
<MudText>[channel logo]</MudText>
}
</MudTd>
<MudTd DataLabel="Mode">
@context.Mode
</MudTd>
<MudTd DataLabel="Location">
@context.Location
</MudTd>
<MudTd>
<div style="align-items: center; display: flex;">
<MudTooltip Text="Edit Watermark">
<MudIconButton Icon="@Icons.Material.Filled.Edit"
Href="@($"watermarks/{context.Id}")">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Copy Watermark">
<MudIconButton Icon="@Icons.Material.Filled.ContentCopy"
OnClick="@(_ => CopyWatermarkAsync(context))">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Delete Watermark">
<MudIconButton Icon="@Icons.Material.Filled.Delete"
OnClick="@(_ => DeleteWatermarkAsync(context))">
</MudIconButton>
</MudTooltip>
</div>
</MudTd>
</RowTemplate>
</MudTable>
<MudButton Variant="Variant.Filled" Color="Color.Primary" Href="watermarks/add" Class="mt-4">
Add Watermark
</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="watermarks/add">
Add Watermark
</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">Watermarks</MudText>
<MudDivider Class="mb-6"/>
<MudTable Hover="true" Items="_watermarks">
<ColGroup>
<MudHidden Breakpoint="Breakpoint.Xs">
<col/>
<col/>
<col/>
<col/>
<col style="width: 180px;"/>
</MudHidden>
</ColGroup>
<HeaderContent>
<MudTh>Name</MudTh>
<MudTh>Image</MudTh>
<MudTh>Mode</MudTh>
<MudTh>Location</MudTh>
<MudTh/>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Name">@context.Name</MudTd>
<MudTd DataLabel="Image">
@if (!string.IsNullOrWhiteSpace(context.Image?.Path))
{
<MudElement HtmlTag="img" src="@($"artwork/watermarks/{context.Image.UrlWithContentType}")" Style="max-height: 50px"/>
}
else if (context.ImageSource == ChannelWatermarkImageSource.ChannelLogo)
{
<MudText>[channel logo]</MudText>
}
</MudTd>
<MudTd DataLabel="Mode">
@context.Mode
</MudTd>
<MudTd DataLabel="Location">
@context.Location
</MudTd>
<MudTd>
<div style="align-items: center; display: flex;">
<MudTooltip Text="Edit Watermark">
<MudIconButton Icon="@Icons.Material.Filled.Edit"
Href="@($"watermarks/{context.Id}")">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Copy Watermark">
<MudIconButton Icon="@Icons.Material.Filled.ContentCopy"
OnClick="@(_ => CopyWatermarkAsync(context))">
</MudIconButton>
</MudTooltip>
<MudTooltip Text="Delete Watermark">
<MudIconButton Icon="@Icons.Material.Filled.Delete"
OnClick="@(_ => DeleteWatermarkAsync(context))">
</MudIconButton>
</MudTooltip>
</div>
</MudTd>
</RowTemplate>
</MudTable>
</MudContainer>
</div>
</MudForm>
@code {
private readonly CancellationTokenSource _cts = new();
@ -91,7 +98,7 @@ @@ -91,7 +98,7 @@
IDialogReference dialog = await Dialog.ShowAsync<DeleteDialog>("Delete Watermark", parameters, options);
DialogResult result = await dialog.Result;
if (!result.Canceled)
if (result is { Canceled: false })
{
await Mediator.Send(new DeleteWatermark(watermark.Id), _cts.Token);
await LoadWatermarksAsync();
@ -105,7 +112,7 @@ @@ -105,7 +112,7 @@
IDialogReference dialog = await Dialog.ShowAsync<CopyWatermarkDialog>("Copy Watermark", parameters, options);
DialogResult dialogResult = await dialog.Result;
if (!dialogResult.Canceled && dialogResult.Data is WatermarkViewModel data)
if (dialogResult is { Canceled: false, Data: WatermarkViewModel data })
{
NavigationManager.NavigateTo($"/watermarks/{data.Id}");
}

4
ErsatzTV/wwwroot/css/site.css
Unescape View File

@ -158,4 +158,8 @@ @@ -158,4 +158,8 @@
.form-field-stack div.mud-input-control {
max-width: 500px;
}
.mud-table-smalldevices-sortselect {
display: none !important;
}
Write Preview
Loading…
Cancel
Save