280 lines
16 KiB
Plaintext
280 lines
16 KiB
Plaintext
@page "/channels/{Id:int?}"
|
|
@page "/channels/add"
|
|
@using static LanguageExt.Prelude
|
|
@using ErsatzTV.Application.FFmpegProfiles
|
|
@using ErsatzTV.Application.FFmpegProfiles.Queries
|
|
@using ErsatzTV.Application.Images.Commands
|
|
@using ErsatzTV.Application.MediaItems.Queries
|
|
@using System.Globalization
|
|
@using ErsatzTV.Application.Channels
|
|
@using ErsatzTV.Application.Channels.Queries
|
|
@inject NavigationManager _navigationManager
|
|
@inject ILogger<ChannelEditor> _logger
|
|
@inject ISnackbar _snackbar
|
|
@inject IMediator _mediator
|
|
|
|
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
|
|
<div style="max-width: 400px;">
|
|
<MudText Typo="Typo.h4" Class="mb-4">@(IsEdit ? "Edit Channel" : "Add Channel")</MudText>
|
|
|
|
<EditForm EditContext="_editContext" OnSubmit="@HandleSubmitAsync">
|
|
<FluentValidator/>
|
|
<MudCard>
|
|
<MudCardHeader>
|
|
<CardHeaderContent>
|
|
<MudText Typo="Typo.h6">Channel Settings</MudText>
|
|
</CardHeaderContent>
|
|
</MudCardHeader>
|
|
<MudCardContent>
|
|
<MudTextField Label="Number" @bind-Value="_model.Number" For="@(() => _model.Number)" Immediate="true"/>
|
|
<MudTextField Class="mt-3" Label="Name" @bind-Value="_model.Name" For="@(() => _model.Name)"/>
|
|
<MudSelect Class="mt-3" Label="Streaming Mode" @bind-Value="_model.StreamingMode" For="@(() => _model.StreamingMode)">
|
|
<MudSelectItem Value="@(StreamingMode.TransportStream)">MPEG-TS</MudSelectItem>
|
|
<MudSelectItem Value="@(StreamingMode.HttpLiveStreamingDirect)">HLS Direct</MudSelectItem>
|
|
<MudSelectItem Value="@(StreamingMode.HttpLiveStreamingHybrid)">HLS Hybrid</MudSelectItem>
|
|
</MudSelect>
|
|
<MudSelect Class="mt-3" Label="FFmpeg Profile" @bind-Value="_model.FFmpegProfileId" For="@(() => _model.FFmpegProfileId)"
|
|
Disabled="@(_model.StreamingMode == StreamingMode.HttpLiveStreamingDirect)">
|
|
@foreach (FFmpegProfileViewModel profile in _ffmpegProfiles)
|
|
{
|
|
<MudSelectItem Value="@profile.Id">@profile.Name</MudSelectItem>
|
|
}
|
|
</MudSelect>
|
|
<MudSelect Class="mt-3" Label="Preferred Language" @bind-Value="_model.PreferredLanguageCode" For="@(() => _model.PreferredLanguageCode)">
|
|
<MudSelectItem Value="@((string) null)">(none)</MudSelectItem>
|
|
@foreach (CultureInfo culture in _availableCultures)
|
|
{
|
|
<MudSelectItem Value="@culture.ThreeLetterISOLanguageName">@culture.EnglishName</MudSelectItem>
|
|
}
|
|
</MudSelect>
|
|
<MudGrid Class="mt-3" Style="align-items: center" Justify="Justify.Center">
|
|
<MudItem xs="6">
|
|
<InputFile id="fileInput" OnChange="UploadLogo" hidden/>
|
|
@if (!string.IsNullOrWhiteSpace(_model.Logo))
|
|
{
|
|
<MudElement HtmlTag="img" src="@($"iptv/logos/{_model.Logo}")" Style="max-height: 50px"/>
|
|
}
|
|
</MudItem>
|
|
<MudItem xs="6">
|
|
<MudButton Class="ml-auto" HtmlTag="label"
|
|
Variant="Variant.Filled"
|
|
Color="Color.Primary"
|
|
StartIcon="@Icons.Material.Filled.CloudUpload"
|
|
for="fileInput">
|
|
Upload Logo
|
|
</MudButton>
|
|
</MudItem>
|
|
</MudGrid>
|
|
<div style="padding-bottom: 16px; padding-top: 20px;">
|
|
<MudText Typo="Typo.h6">Watermark Settings</MudText>
|
|
</div>
|
|
<MudSelect Class="mt-3" Label="Mode" @bind-Value="_model.WatermarkMode"
|
|
For="@(() => _model.WatermarkMode)"
|
|
Disabled="@(_model.StreamingMode == StreamingMode.HttpLiveStreamingDirect)">
|
|
<MudSelectItem Value="@(ChannelWatermarkMode.None)">None</MudSelectItem>
|
|
<MudSelectItem Value="@(ChannelWatermarkMode.Permanent)">Permanent</MudSelectItem>
|
|
<MudSelectItem Value="@(ChannelWatermarkMode.Intermittent)">Intermittent</MudSelectItem>
|
|
</MudSelect>
|
|
<MudSelect Class="mt-3" Label="Location" @bind-Value="_model.WatermarkLocation"
|
|
For="@(() => _model.WatermarkLocation)"
|
|
Disabled="@(_model.StreamingMode == StreamingMode.HttpLiveStreamingDirect || _model.WatermarkMode == ChannelWatermarkMode.None)">
|
|
<MudSelectItem Value="@(ChannelWatermarkLocation.BottomRight)">Bottom Right</MudSelectItem>
|
|
<MudSelectItem Value="@(ChannelWatermarkLocation.BottomLeft)">Bottom Left</MudSelectItem>
|
|
<MudSelectItem Value="@(ChannelWatermarkLocation.TopRight)">Top Right</MudSelectItem>
|
|
<MudSelectItem Value="@(ChannelWatermarkLocation.TopLeft)">Top Left</MudSelectItem>
|
|
</MudSelect>
|
|
<MudGrid Class="mt-3" Style="align-items: start" Justify="Justify.Center">
|
|
<MudItem xs="6">
|
|
<MudSelect Label="Size" @bind-Value="_model.WatermarkSize"
|
|
For="@(() => _model.WatermarkSize)"
|
|
Disabled="@(_model.StreamingMode == StreamingMode.HttpLiveStreamingDirect || _model.WatermarkMode == ChannelWatermarkMode.None)">
|
|
<MudSelectItem Value="@(ChannelWatermarkSize.Scaled)">Scaled</MudSelectItem>
|
|
<MudSelectItem Value="@(ChannelWatermarkSize.ActualSize)">Actual Size</MudSelectItem>
|
|
</MudSelect>
|
|
</MudItem>
|
|
<MudItem xs="6">
|
|
<MudTextField Label="Width" @bind-Value="_model.WatermarkWidth"
|
|
For="@(() => _model.WatermarkWidth)"
|
|
Adornment="Adornment.End"
|
|
AdornmentText="%"
|
|
Disabled="@(_model.StreamingMode == StreamingMode.HttpLiveStreamingDirect || _model.WatermarkMode == ChannelWatermarkMode.None || _model.WatermarkSize == ChannelWatermarkSize.ActualSize)"
|
|
Immediate="true"/>
|
|
</MudItem>
|
|
</MudGrid>
|
|
<MudGrid Class="mt-3" Style="align-items: start" Justify="Justify.Center">
|
|
<MudItem xs="6">
|
|
<MudTextField Label="Horizontal Margin" @bind-Value="_model.WatermarkHorizontalMargin"
|
|
For="@(() => _model.WatermarkHorizontalMargin)"
|
|
Adornment="Adornment.End"
|
|
AdornmentText="%"
|
|
Disabled="@(_model.StreamingMode == StreamingMode.HttpLiveStreamingDirect || _model.WatermarkMode == ChannelWatermarkMode.None)"
|
|
Immediate="true"/>
|
|
</MudItem>
|
|
<MudItem xs="6">
|
|
<MudTextField Label="Vertical Margin" @bind-Value="_model.WatermarkVerticalMargin"
|
|
For="@(() => _model.WatermarkVerticalMargin)"
|
|
Adornment="Adornment.End"
|
|
AdornmentText="%"
|
|
Disabled="@(_model.StreamingMode == StreamingMode.HttpLiveStreamingDirect || _model.WatermarkMode == ChannelWatermarkMode.None)"
|
|
Immediate="true"/>
|
|
</MudItem>
|
|
</MudGrid>
|
|
<MudGrid Class="mt-3" Style="align-items: start" Justify="Justify.Center">
|
|
<MudItem xs="6">
|
|
<MudSelect Label="Frequency" @bind-Value="_model.WatermarkFrequencyMinutes"
|
|
For="@(() => _model.WatermarkFrequencyMinutes)"
|
|
Disabled="@(_model.StreamingMode == StreamingMode.HttpLiveStreamingDirect || _model.WatermarkMode != ChannelWatermarkMode.Intermittent)">
|
|
<MudSelectItem Value="5">5 minutes</MudSelectItem>
|
|
<MudSelectItem Value="10">10 minutes</MudSelectItem>
|
|
<MudSelectItem Value="15">15 minutes</MudSelectItem>
|
|
<MudSelectItem Value="20">20 minutes</MudSelectItem>
|
|
<MudSelectItem Value="30">30 minutes</MudSelectItem>
|
|
<MudSelectItem Value="60">60 minutes</MudSelectItem>
|
|
</MudSelect>
|
|
</MudItem>
|
|
<MudItem xs="6">
|
|
<MudTextField Label="Duration" @bind-Value="_model.WatermarkDurationSeconds"
|
|
For="@(() => _model.WatermarkDurationSeconds)"
|
|
Adornment="Adornment.End"
|
|
AdornmentText="seconds"
|
|
Disabled="@(_model.StreamingMode == StreamingMode.HttpLiveStreamingDirect || _model.WatermarkMode != ChannelWatermarkMode.Intermittent)"
|
|
Immediate="true"/>
|
|
</MudItem>
|
|
</MudGrid>
|
|
</MudCardContent>
|
|
<MudCardActions>
|
|
<MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary">
|
|
@(IsEdit ? "Save Changes" : "Add Channel")
|
|
</MudButton>
|
|
</MudCardActions>
|
|
</MudCard>
|
|
</EditForm>
|
|
</div>
|
|
</MudContainer>
|
|
|
|
@code {
|
|
|
|
[Parameter]
|
|
public int? Id { get; set; }
|
|
|
|
private readonly ChannelEditViewModel _model = new();
|
|
private EditContext _editContext;
|
|
private ValidationMessageStore _messageStore;
|
|
|
|
private List<FFmpegProfileViewModel> _ffmpegProfiles;
|
|
private List<CultureInfo> _availableCultures;
|
|
|
|
protected override async Task OnParametersSetAsync()
|
|
{
|
|
await LoadFFmpegProfilesAsync();
|
|
_availableCultures = await _mediator.Send(new GetAllLanguageCodes());
|
|
|
|
if (Id.HasValue)
|
|
{
|
|
Option<ChannelViewModel> maybeChannel = await _mediator.Send(new GetChannelById(Id.Value));
|
|
maybeChannel.Match(
|
|
channelViewModel =>
|
|
{
|
|
_model.Id = channelViewModel.Id;
|
|
_model.Name = channelViewModel.Name;
|
|
_model.Number = channelViewModel.Number;
|
|
_model.FFmpegProfileId = channelViewModel.FFmpegProfileId;
|
|
_model.Logo = channelViewModel.Logo;
|
|
_model.StreamingMode = channelViewModel.StreamingMode;
|
|
_model.PreferredLanguageCode = channelViewModel.PreferredLanguageCode;
|
|
_model.WatermarkMode = channelViewModel.WatermarkMode;
|
|
_model.WatermarkLocation = channelViewModel.WatermarkLocation;
|
|
_model.WatermarkSize = channelViewModel.WatermarkSize;
|
|
_model.WatermarkWidth = channelViewModel.WatermarkWidth;
|
|
_model.WatermarkHorizontalMargin = channelViewModel.WatermarkHorizontalMargin;
|
|
_model.WatermarkVerticalMargin = channelViewModel.WatermarkVerticalMargin;
|
|
_model.WatermarkFrequencyMinutes = channelViewModel.WatermarkFrequencyMinutes;
|
|
_model.WatermarkDurationSeconds = channelViewModel.WatermarkDurationSeconds;
|
|
},
|
|
() => _navigationManager.NavigateTo("404"));
|
|
}
|
|
else
|
|
{
|
|
FFmpegSettingsViewModel ffmpegSettings = await _mediator.Send(new GetFFmpegSettings());
|
|
|
|
// TODO: command for new channel
|
|
IEnumerable<int> channelNumbers = await _mediator.Send(new GetAllChannels())
|
|
.Map(list => list.Map(c => int.TryParse(c.Number.Split(".").Head(), out int result) ? result : 0));
|
|
int maxNumber = Optional(channelNumbers).Flatten().DefaultIfEmpty(0).Max();
|
|
_model.Number = (maxNumber + 1).ToString();
|
|
_model.Name = "New Channel";
|
|
_model.FFmpegProfileId = ffmpegSettings.DefaultFFmpegProfileId;
|
|
_model.StreamingMode = StreamingMode.TransportStream;
|
|
_model.WatermarkMode = ChannelWatermarkMode.None;
|
|
_model.WatermarkLocation = ChannelWatermarkLocation.BottomRight;
|
|
_model.WatermarkSize = ChannelWatermarkSize.Scaled;
|
|
_model.WatermarkWidth = 15;
|
|
_model.WatermarkHorizontalMargin = 5;
|
|
_model.WatermarkVerticalMargin = 5;
|
|
_model.WatermarkFrequencyMinutes = 15;
|
|
_model.WatermarkDurationSeconds = 15;
|
|
}
|
|
}
|
|
|
|
protected override void OnInitialized()
|
|
{
|
|
_editContext = new EditContext(_model);
|
|
_messageStore = new ValidationMessageStore(_editContext);
|
|
}
|
|
|
|
private bool IsEdit => Id.HasValue;
|
|
|
|
private async Task LoadFFmpegProfilesAsync() =>
|
|
_ffmpegProfiles = await _mediator.Send(new GetAllFFmpegProfiles());
|
|
|
|
private async Task HandleSubmitAsync()
|
|
{
|
|
_messageStore.Clear();
|
|
if (_editContext.Validate())
|
|
{
|
|
Seq<BaseError> errorMessage = IsEdit ?
|
|
(await _mediator.Send(_model.ToUpdate())).LeftToSeq() :
|
|
(await _mediator.Send(_model.ToCreate())).LeftToSeq();
|
|
|
|
errorMessage.HeadOrNone().Match(
|
|
error =>
|
|
{
|
|
_snackbar.Add(error.Value, Severity.Error);
|
|
_logger.LogError("Unexpected error saving channel: {Error}", error.Value);
|
|
},
|
|
() => _navigationManager.NavigateTo("/channels"));
|
|
}
|
|
}
|
|
|
|
private async Task UploadLogo(InputFileChangeEventArgs e)
|
|
{
|
|
try
|
|
{
|
|
var buffer = new byte[e.File.Size];
|
|
await e.File.OpenReadStream(maxAllowedSize: 10 * 1024 * 1024).ReadAsync(buffer);
|
|
Either<BaseError, string> maybeCacheFileName = await _mediator.Send(new SaveArtworkToDisk(buffer, ArtworkKind.Logo));
|
|
maybeCacheFileName.Match(
|
|
relativeFileName =>
|
|
{
|
|
_model.Logo = relativeFileName;
|
|
StateHasChanged();
|
|
},
|
|
error =>
|
|
{
|
|
_snackbar.Add($"Unexpected error saving channel logo: {error.Value}", Severity.Error);
|
|
_logger.LogError("Unexpected error saving channel logo: {Error}", error.Value);
|
|
});
|
|
}
|
|
catch (IOException)
|
|
{
|
|
_snackbar.Add("Channel logo exceeds maximum allowed file size of 10 MB", Severity.Error);
|
|
_logger.LogError("Channel logo exceeds maximum allowed file size of 10 MB");
|
|
}
|
|
catch (Exception ex)
|
|
{
|
|
_snackbar.Add($"Unexpected error saving channel logo: {ex.Message}", Severity.Error);
|
|
_logger.LogError("Unexpected error saving channel logo: {Error}", ex.Message);
|
|
}
|
|
}
|
|
|
|
} |