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

125
ErsatzTV/Pages/FFmpeg.razor
Unescape View File

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

135
ErsatzTV/Pages/Watermarks.razor
Unescape View File

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

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

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