299 lines
15 KiB
Plaintext
299 lines
15 KiB
Plaintext
@page "/watermarks/{Id:int}"
|
|
@page "/watermarks/add"
|
|
@using ErsatzTV.Application.Artworks
|
|
@using ErsatzTV.Application.Images
|
|
@using ErsatzTV.Application.Watermarks
|
|
@using ErsatzTV.FFmpeg.State
|
|
@using ErsatzTV.Validators
|
|
@using FluentValidation.Results
|
|
@implements IDisposable
|
|
@inject NavigationManager NavigationManager
|
|
@inject ILogger<WatermarkEditor> Logger
|
|
@inject ISnackbar Snackbar
|
|
@inject IMediator Mediator
|
|
|
|
<MudForm Model="@_model" @ref="@_form" Validation="@(_validator.ValidateValue)" ValidationDelay="0" 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-6" OnClick="@HandleSubmitAsync" StartIcon="@(IsEdit ? Icons.Material.Filled.Save : Icons.Material.Filled.Add)">@(IsEdit ? "Save Watermark" : "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">Watermark</MudText>
|
|
<MudDivider Class="mb-6"/>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Name</MudText>
|
|
</div>
|
|
<MudTextField @bind-Value="_model.Name" For="@(() => _model.Name)"/>
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Mode</MudText>
|
|
</div>
|
|
<MudSelect @bind-Value="_model.Mode" For="@(() => _model.Mode)">
|
|
<MudSelectItem Value="@(ChannelWatermarkMode.None)">None</MudSelectItem>
|
|
<MudSelectItem Value="@(ChannelWatermarkMode.Permanent)">Permanent</MudSelectItem>
|
|
<MudSelectItem Value="@(ChannelWatermarkMode.Intermittent)">Intermittent</MudSelectItem>
|
|
<MudSelectItem Value="@(ChannelWatermarkMode.OpacityExpression)">Opacity Expression</MudSelectItem>
|
|
</MudSelect>
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Image Source</MudText>
|
|
</div>
|
|
<MudSelect @bind-Value="_model.ImageSource"
|
|
For="@(() => _model.ImageSource)"
|
|
Disabled="@(_model.Mode == ChannelWatermarkMode.None)">
|
|
<MudSelectItem Value="@(ChannelWatermarkImageSource.Custom)">Custom</MudSelectItem>
|
|
<MudSelectItem Value="@(ChannelWatermarkImageSource.ChannelLogo)">Channel Logo</MudSelectItem>
|
|
</MudSelect>
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Image</MudText>
|
|
</div>
|
|
<InputFile id="watermarkFileInput" OnChange="@UploadWatermark" style="display: none;"/>
|
|
<MudButton HtmlTag="label"
|
|
Variant="Variant.Filled"
|
|
Color="Color.Primary"
|
|
StartIcon="@Icons.Material.Filled.CloudUpload"
|
|
Disabled="@(_model.ImageSource != ChannelWatermarkImageSource.Custom)"
|
|
for="watermarkFileInput">
|
|
Upload Image
|
|
</MudButton>
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Image Preview</MudText>
|
|
</div>
|
|
@if (!string.IsNullOrWhiteSpace(_model.Image?.Path) && _model.ImageSource == ChannelWatermarkImageSource.Custom)
|
|
{
|
|
<div class="d-flex" style="max-height: 50px">
|
|
<MudElement HtmlTag="img" src="@($"artwork/watermarks/{_model.Image.UrlWithContentType}")" />
|
|
</div>
|
|
}
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Location</MudText>
|
|
</div>
|
|
<MudSelect @bind-Value="_model.Location"
|
|
For="@(() => _model.Location)"
|
|
Disabled="@(_model.Mode == ChannelWatermarkMode.None)">
|
|
<MudSelectItem Value="@(WatermarkLocation.BottomRight)">Bottom Right</MudSelectItem>
|
|
<MudSelectItem Value="@(WatermarkLocation.BottomMiddle)">Bottom Middle</MudSelectItem>
|
|
<MudSelectItem Value="@(WatermarkLocation.BottomLeft)">Bottom Left</MudSelectItem>
|
|
<MudSelectItem Value="@(WatermarkLocation.LeftMiddle)">Left Middle</MudSelectItem>
|
|
<MudSelectItem Value="@(WatermarkLocation.TopLeft)">Top Left</MudSelectItem>
|
|
<MudSelectItem Value="@(WatermarkLocation.TopMiddle)">Top Middle</MudSelectItem>
|
|
<MudSelectItem Value="@(WatermarkLocation.TopRight)">Top Right</MudSelectItem>
|
|
<MudSelectItem Value="@(WatermarkLocation.RightMiddle)">Right Middle</MudSelectItem>
|
|
</MudSelect>
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Place Within Source Content</MudText>
|
|
</div>
|
|
<MudCheckBox @bind-Value="_model.PlaceWithinSourceContent"
|
|
For="@(() => _model.PlaceWithinSourceContent)"
|
|
Disabled="@(_model.Mode == ChannelWatermarkMode.None)"
|
|
Dense="true"/>
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Size</MudText>
|
|
</div>
|
|
<MudSelect @bind-Value="_model.Size"
|
|
For="@(() => _model.Size)"
|
|
Disabled="@(_model.Mode == ChannelWatermarkMode.None)">
|
|
<MudSelectItem Value="@(WatermarkSize.Scaled)">Scaled</MudSelectItem>
|
|
<MudSelectItem Value="@(WatermarkSize.ActualSize)">Actual Size</MudSelectItem>
|
|
</MudSelect>
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Width</MudText>
|
|
</div>
|
|
<MudTextField @bind-Value="_model.Width"
|
|
For="@(() => _model.Width)"
|
|
Adornment="Adornment.End"
|
|
AdornmentText="%"
|
|
Disabled="@(_model.Mode == ChannelWatermarkMode.None || _model.Size == WatermarkSize.ActualSize)"
|
|
Immediate="true"/>
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Horizontal Margin</MudText>
|
|
</div>
|
|
<MudTextField @bind-Value="_model.HorizontalMargin"
|
|
For="@(() => _model.HorizontalMargin)"
|
|
Adornment="Adornment.End"
|
|
AdornmentText="%"
|
|
Disabled="@(_model.Mode == ChannelWatermarkMode.None)"
|
|
Immediate="true"/>
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Vertical Margin</MudText>
|
|
</div>
|
|
<MudTextField @bind-Value="_model.VerticalMargin"
|
|
For="@(() => _model.VerticalMargin)"
|
|
Adornment="Adornment.End"
|
|
AdornmentText="%"
|
|
Disabled="@(_model.Mode == ChannelWatermarkMode.None)"
|
|
Immediate="true"/>
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Frequency</MudText>
|
|
</div>
|
|
<MudSelect @bind-Value="_model.FrequencyMinutes"
|
|
For="@(() => _model.FrequencyMinutes)"
|
|
Disabled="@(_model.Mode != 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>
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Duration</MudText>
|
|
</div>
|
|
<MudTextField @bind-Value="_model.DurationSeconds"
|
|
For="@(() => _model.DurationSeconds)"
|
|
Adornment="Adornment.End"
|
|
AdornmentText="seconds"
|
|
Disabled="@(_model.Mode != ChannelWatermarkMode.Intermittent)"
|
|
Immediate="true"/>
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Opacity</MudText>
|
|
</div>
|
|
<MudTextField @bind-Value="_model.Opacity"
|
|
For="@(() => _model.Opacity)"
|
|
Adornment="Adornment.End"
|
|
AdornmentText="%"
|
|
Disabled="@(_model.Mode is ChannelWatermarkMode.None or ChannelWatermarkMode.OpacityExpression)"
|
|
Immediate="true"/>
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Opacity Expression</MudText>
|
|
</div>
|
|
<MudTextField @bind-Value="_model.OpacityExpression"
|
|
For="@(() => _model.OpacityExpression)"
|
|
Disabled="@(_model.Mode != ChannelWatermarkMode.OpacityExpression)"/>
|
|
</MudStack>
|
|
<MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="form-field-stack gap-md-8 mb-5">
|
|
<div class="d-flex">
|
|
<MudText>Z-Index</MudText>
|
|
</div>
|
|
<MudTextField @bind-Value="_model.ZIndex" For="@(() => _model.ZIndex)"/>
|
|
</MudStack>
|
|
</MudContainer>
|
|
</div>
|
|
</MudForm>
|
|
|
|
@code {
|
|
private readonly CancellationTokenSource _cts = new();
|
|
|
|
[Parameter]
|
|
public int Id { get; set; }
|
|
|
|
private WatermarkEditViewModel _model = new();
|
|
private readonly WatermarkEditViewModelValidator _validator = new();
|
|
private MudForm _form;
|
|
|
|
public void Dispose()
|
|
{
|
|
_cts.Cancel();
|
|
_cts.Dispose();
|
|
}
|
|
|
|
protected override async Task OnParametersSetAsync()
|
|
{
|
|
if (IsEdit)
|
|
{
|
|
Option<WatermarkViewModel> watermark = await Mediator.Send(new GetWatermarkById(Id), _cts.Token);
|
|
watermark.Match(
|
|
watermarkViewModel => _model = new WatermarkEditViewModel(watermarkViewModel),
|
|
() => NavigationManager.NavigateTo("404"));
|
|
}
|
|
else
|
|
{
|
|
_model = new WatermarkEditViewModel
|
|
{
|
|
Name = string.Empty,
|
|
Mode = ChannelWatermarkMode.Permanent,
|
|
Image = ArtworkContentTypeModel.None,
|
|
Location = WatermarkLocation.BottomRight,
|
|
Size = WatermarkSize.Scaled,
|
|
Width = 15,
|
|
HorizontalMargin = 5,
|
|
VerticalMargin = 5,
|
|
FrequencyMinutes = 15,
|
|
DurationSeconds = 15,
|
|
Opacity = 100,
|
|
PlaceWithinSourceContent = false,
|
|
OpacityExpression = string.Empty,
|
|
ZIndex = 0
|
|
};
|
|
}
|
|
}
|
|
|
|
private bool IsEdit => Id != 0;
|
|
|
|
private async Task HandleSubmitAsync()
|
|
{
|
|
await _form.Validate();
|
|
ValidationResult result = await _validator.ValidateAsync(_model, _cts.Token);
|
|
if (result.IsValid)
|
|
{
|
|
Seq<BaseError> errorMessage = IsEdit ? (await Mediator.Send(_model.ToUpdate(), _cts.Token)).LeftToSeq() : (await Mediator.Send(_model.ToCreate(), _cts.Token)).LeftToSeq();
|
|
|
|
errorMessage.HeadOrNone().Match(
|
|
error =>
|
|
{
|
|
Snackbar.Add("Unexpected error saving watermark");
|
|
Logger.LogError("Unexpected error saving watermark: {Error}", error.Value);
|
|
},
|
|
() => NavigationManager.NavigateTo("watermarks"));
|
|
}
|
|
}
|
|
|
|
private async Task UploadWatermark(InputFileChangeEventArgs e)
|
|
{
|
|
try
|
|
{
|
|
Either<BaseError, string> maybeCacheFileName = await Mediator.Send(
|
|
new SaveArtworkToDisk(e.File.OpenReadStream(SystemEnvironment.MaximumUploadMb * 1024 * 1024), ArtworkKind.Watermark, e.File.ContentType),
|
|
_cts.Token);
|
|
maybeCacheFileName.Match(
|
|
relativeFileName =>
|
|
{
|
|
_model.Image = new ArtworkContentTypeModel(relativeFileName, e.File.ContentType);
|
|
StateHasChanged();
|
|
},
|
|
error =>
|
|
{
|
|
Snackbar.Add($"Unexpected error saving watermark: {error.Value}", Severity.Error);
|
|
Logger.LogError("Unexpected error saving watermark: {Error}", error.Value);
|
|
});
|
|
}
|
|
catch (IOException)
|
|
{
|
|
Snackbar.Add($"Watermark exceeds maximum allowed file size of {SystemEnvironment.MaximumUploadMb} MB", Severity.Error);
|
|
Logger.LogError("Watermark exceeds maximum allowed file size of {MaximumUploadMb} MB", SystemEnvironment.MaximumUploadMb);
|
|
}
|
|
catch (Exception ex)
|
|
{
|
|
Snackbar.Add($"Unexpected error saving watermark: {ex.Message}", Severity.Error);
|
|
Logger.LogError("Unexpected error saving watermark: {Error}", ex.Message);
|
|
}
|
|
}
|
|
|
|
} |