Fullscreen

Present an element — or the whole page — fullscreen via IFullscreen (the Fullscreen API), passing an ElementRef to target one box. WASM-only: requestFullscreen needs a live user gesture. Pairs with Orientation — locking the orientation generally requires fullscreen first.

RequestAsync(ElementRef?) fullscreens that element (or the page when null); ExitAsync leaves. Gate on IsSupportedAsync and wrap in try/catch — a request without activation rejects.

FullscreenDemo.cs

using Rask.Core;
using Rask.Site;
using Rask.Wasm.Browser;

namespace Rask.Site.Features;

/// <summary>
///     <see cref="IFullscreen" /> — present a single element fullscreen, then exit. Pass an
///     <see cref="ElementRef" /> to fullscreen just that box (or nothing to fullscreen the whole page).
///     Pairs with <see cref="IScreenOrientation" />: orientation locking needs fullscreen first.
/// </summary>
public sealed partial class FullscreenDemo(IFullscreen fullscreen) : Component
{
    private readonly ElementRef _stage = ElementRef.New();
    private string? _status;

    protected override Component? Render() =>
        Div.Class($"{Tw.Card} shadow-sm border-0")[
            Div.Class(Tw.CardBody)[
                Div
                    .Ref(_stage)
                    .Class("border rounded bg-ui-well flex items-center justify-center mb-2")
                    .Style("min-height: 8rem")[
                    Span.Class("text-ui-muted text-sm")["This box goes fullscreen."]
                ],
                Div.Class("flex gap-2 flex-wrap mb-2")[
                    Button.Class(Tw.BtnPrimary).Id("fullscreen-enter").OnClickAsync(Enter)[
                        "Fullscreen this box"],
                    Button.Class(Tw.BtnOutlinePrimary).Id("fullscreen-page").OnClickAsync(EnterPage)[
                        "Fullscreen the page"],
                    Button.Class(Tw.BtnOutlineDanger).Id("fullscreen-exit").OnClickAsync(Exit)["Exit"]
                ],
                Div.Class("text-sm text-ui-muted")["Status: ", Code.Id("fullscreen-status")[_status ?? "(idle)"]]
            ]
        ];

    private async Task Enter()
    {
        try
        {
            if (!await fullscreen.IsSupportedAsync())
            {
                _status = "Fullscreen not available in this browser";
                return;
            }

            await fullscreen.RequestAsync(_stage);
            _status = "Box is fullscreen — press Esc or Exit to leave";
        }
        catch (Exception ex)
        {
            _status = "Failed: " + ex.Message;
        }
    }

    private async Task EnterPage()
    {
        try
        {
            await fullscreen.RequestAsync();
            _status = "Page is fullscreen";
        }
        catch (Exception ex)
        {
            _status = "Failed: " + ex.Message;
        }
    }

    private async Task Exit()
    {
        await fullscreen.ExitAsync();
        _status = await fullscreen.IsActiveAsync() ? "Still fullscreen" : "Exited fullscreen";
    }
}
Live result
This box goes fullscreen.
Status: (idle)