ersatztv/ErsatzTV/Pages/WatermarkEditor.razor

@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>
                }
                else if (_model.Image is not null)
                {
                    <MudTextField Disabled="true" For="@(() => _model.Image.Path)"/>
                }
            </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 CancellationTokenSource _cts;

    [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()
    {
        _cts?.Cancel();
        _cts?.Dispose();
        _cts = new CancellationTokenSource();
        var token = _cts.Token;

        if (IsEdit)
        {
            try
            {
                Option<WatermarkViewModel> watermark = await Mediator.Send(new GetWatermarkById(Id), token);
                watermark.Match(
                    watermarkViewModel => _model = new WatermarkEditViewModel(watermarkViewModel),
                    () => NavigationManager.NavigateTo("404"));
            }
            catch (OperationCanceledException)
            {
                // do nothing
            }
        }
        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();
        if (!_form.IsValid)
        {
            return;
        }

        try
        {
            var token = _cts?.Token ?? CancellationToken.None;

            ValidationResult result = await _validator.ValidateAsync(_model, token);
            if (result.IsValid)
            {
                Seq<BaseError> errorMessage = IsEdit
                    ? (await Mediator.Send(_model.ToUpdate(), token)).LeftToSeq()
                    : (await Mediator.Send(_model.ToCreate(), token)).LeftToSeq();

                errorMessage.HeadOrNone().Match(
                    error =>
                    {
                        Snackbar.Add("Unexpected error saving watermark");
                        Logger.LogError("Unexpected error saving watermark: {Error}", error.Value);
                    },
                    () => NavigationManager.NavigateTo("watermarks"));
            }
        }
        catch (OperationCanceledException)
        {
            // do nothing
        }
    }

    private async Task UploadWatermark(InputFileChangeEventArgs e)
    {
        try
        {
            var token = _cts?.Token ?? CancellationToken.None;

            Either<BaseError, string> maybeCacheFileName = await Mediator.Send(
                new SaveArtworkToDisk(e.File.OpenReadStream(SystemEnvironment.MaximumUploadMb * 1024 * 1024), ArtworkKind.Watermark, e.File.ContentType),
                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 (OperationCanceledException)
        {
            // do nothing
        }
        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);
        }
    }

}