KoogleApp/src/Koogle.Web/Components/Game/GifPlayer.razor

@inherits Fluxor.Blazor.Web.Components.FluxorComponent

@using Fluxor
@using Koogle.Application.DTOs
@using Koogle.Application.Interfaces
@using Koogle.Domain.Enums
@using Koogle.Web.Store.GifState
@inject IClubTerminologyService Terms

@inject IState<GifPlaybackState> GifState
@inject IDispatcher Dispatcher

@if (GifState.Value.IsPlaying && GifState.Value.CurrentGif != null)
{
    <MudOverlay Visible="true" DarkBackground="true" ZIndex="9999" OnClick="DismissGif">
        <div class="gif-player-container" @onclick:stopPropagation="true">
            <div class="gif-content">
                @if (IsVideo)
                {
                    <video autoplay muted loop class="gif-display" @ref="_videoElement">
                        <source src="@GifState.Value.CurrentGif.Url" type="@GifState.Value.CurrentGif.ContentType" />
                    </video>
                }
                else
                {
                    <img src="@GifState.Value.CurrentGif.Url" class="gif-display" alt="@GifState.Value.CurrentGif.Name" />
                }
            </div>

            <div class="gif-info">
                <MudText Typo="Typo.h3" Class="gif-event-name">
                    @GetEventDisplayName(GifState.Value.TriggerEvent)
                </MudText>
                <MudText Typo="Typo.subtitle1" Class="gif-name">
                    @GifState.Value.CurrentGif.Name
                </MudText>
            </div>

            <MudIconButton Icon="@Icons.Material.Filled.Close"
                           Color="Color.Default"
                           Size="Size.Large"
                           Class="gif-close-button"
                           OnClick="DismissGif" />

            @if (ShowRating)
            {
                <div class="gif-rating">
                    <MudIconButton Icon="@Icons.Material.Filled.ThumbUp"
                                   Color="Color.Success"
                                   Size="Size.Medium"
                                   OnClick="@(() => RateGif(1))" />
                    <MudIconButton Icon="@Icons.Material.Filled.ThumbDown"
                                   Color="Color.Error"
                                   Size="Size.Medium"
                                   OnClick="@(() => RateGif(-1))" />
                </div>
            }
        </div>
    </MudOverlay>
}

<style>
    .gif-player-container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 90vw;
        max-height: 90vh;
    }

    .gif-content {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .gif-display {
        max-width: 80vw;
        max-height: 60vh;
        border-radius: 8px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }

    .gif-info {
        margin-top: 16px;
        text-align: center;
        color: white;
    }

    .gif-event-name {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        margin-bottom: 8px;
    }

    .gif-name {
        opacity: 0.8;
    }

    .gif-close-button {
        position: absolute;
        top: -40px;
        right: -40px;
        background: rgba(255, 255, 255, 0.2);
        color: white !important;
    }

    .gif-close-button:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    .gif-rating {
        position: absolute;
        bottom: -60px;
        display: flex;
        gap: 16px;
        background: rgba(0, 0, 0, 0.5);
        padding: 8px 16px;
        border-radius: 24px;
    }
</style>

@code {
    private ElementReference _videoElement;

    [Parameter]
    public bool ShowRating { get; set; } = true;

    [Parameter]
    public Guid? UserProfileId { get; set; }

    private bool IsVideo => GifState.Value.CurrentGif?.ContentType.StartsWith("video/") ?? false;

    private void DismissGif()
    {
        Dispatcher.Dispatch(new EndGifPlaybackAction());
    }

    private void RateGif(int value)
    {
        if (UserProfileId.HasValue && GifState.Value.CurrentGif != null)
        {
            Dispatcher.Dispatch(new RateCurrentGifAction(UserProfileId.Value, value));
        }
        DismissGif();
    }

    private string _termNoWood = "PUDEL!";

    private string _termGutter = "RINNE!";

    private string _termBell = "GLOCKE!";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var noWood = await Terms.GetTermAsync(TermKey.NoWood);
            _termNoWood = $"{noWood.ToUpper()}!";

            var gutter = await Terms.GetTermAsync(TermKey.Gutter);
            _termGutter = $"{gutter.ToUpper()}!";

            var bell = await Terms.GetTermAsync(TermKey.Gutter);
            _termBell = $"{bell.ToUpper()}!";


            StateHasChanged();
        }
    }

    private string GetEventDisplayName(ThrowEventType? eventType) => eventType switch
    {
        ThrowEventType.Strike => "ALLE NEUNE!",
        ThrowEventType.Circle => "KRANZ!",
        ThrowEventType.Bell => _termBell,
        ThrowEventType.Gutter => _termGutter,
        ThrowEventType.NoWood => _termNoWood,
        ThrowEventType.Cleared => "ABGER<45>UMT!",
        _ => ""
    };
}