CODEWITHSUNDEEP
javascriptc#webviewuwp
Edgar
Edgar

Reputation: 4488

How to inject webkitRequestFullscreen() into UWP WebView

I have a WebView control in a UWP app which loads a Steam broadcast page URL. It works well and I also have a full-screen button to switch the whole window to full screen.

But the Steam broadcast has its own full-screen toggle button, which I would like to click programmatically so that when I press my full screen button, both the window and the broadcast are switched to full screen.

I tried to achieve this via JS injection, but it seems that the webkitRequestFullscreen() function only responds if it's called inside an event handler. How can I inject an event handler into the WebView and call it?

WebView

Here's the XAML:

<Grid Background="{StaticResource AppBackgroundColor}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>

    <WebView Grid.Row="0" x:Name="Browser" />

    <CommandBar x:Name="WatchCommandBar" Grid.Row="1" FlowDirection="LeftToRight">
        <AppBarButton Icon="FullScreen" Label="Full Screen" Tapped="AppBarFullScreenButton_Tapped" />
    </CommandBar>
</Grid>

And here's the C#:

private void AppBarFullScreenButton_Tapped(object sender, RoutedEventArgs e)
{
    var view = ApplicationView.GetForCurrentView();

    if (view.IsFullScreenMode)
    {
        view.ExitFullScreenMode();
        WatchCommandBar.Visibility = Visibility.Visible;
    }
    else
    {
        view.TryEnterFullScreenMode();
        WatchCommandBar.Visibility = Visibility.Collapsed;
    }
}

I've tried calling these functions when switching to full-screen, but neither of them work:

await Browser.InvokeScriptAsync("eval", new [] { "BroadcastWatch.m_playerUI.ToggleFullscreen();" });
await Browser.InvokeScriptAsync("eval", new [] { "document.getElementById('videoplayer').webkitRequestFullscreen();" });

Upvotes: 0

Views: 516

Answers (1)

Edgar
Edgar

Reputation: 4488

Apparently it's not possible to inject the full screen request. And I wasn't able to spoof the mouse click event that would theoretically make the request either.

As a workaround I ended up hiding and styling elements that I did not want to see by injecting this script when the WebView has finished loading:

private async void Browser_HideElements(object sender, WebViewDOMContentLoadedEventArgs args)
{
    try
    {
        var elementsToHide = "#global_header, #footer_spacer, #footer_responsive_optin_spacer, #footer, #ChatWindow, .BroadcastInfoWrapper, .fullscreen_button";

        // Hide HTML elements and change styles so it looks like the broadcast is in full-screen
        // We can't call the broadcast's own toggle full-screen function
        var lines = new[]
        {
            "document.body.style.overflow = 'hidden';",
            "document.getElementById('video_wrapper').className += ' fullscreen';",
            "document.getElementById('video_content').style.padding = 0;",
            "document.getElementById('video_content').style.margin = 0;",
            "document.getElementsByClassName('pagecontent')[0].style.padding = 0;",
            "var list = document.querySelectorAll('" + elementsToHide + "');",
            "for (var i = 0; i < list.length; i++) { var e = list[i]; e.style.display = 'none'; }"
        };
        await Browser.InvokeScriptAsync("eval", new[] { string.Join(" ", lines) });
    }
    catch
    {
        // Ignore script exceptions
    }
}

So it looks like the broadcast is running in full screen, and when my own button is pressed, the title bar disappears and it goes into proper full screen.

WebView

Upvotes: 0

Related Questions