Add Full Screen/Windows Support for MediaElement

[jfversluis]

This is being asked a lot. While it seems trivial to add, it actually seems to be a very hard thing to do. Here is a couple of reasons why:

• On iOS I think you can only let the player for fullscreen whenever it starts playing. There is, afaik, no way to toggle fullscreen and back programmatically. However, through the built-in controls full screen is already possible on iOS and macOS.
• On Android, with ExoPlayer, there seems to be no built-in way to go full-screen, a lot of solutions are there, we need to look into those and see if something is feasible.
• On Windows there is a property for IsFullWindow, this seems do what we want but I haven't seen it work yet. Also this is a difference in behavior where on mobile the video is ideally showing full screen overlapping everything. That is also how it works on macOS, but then on Windows it seems to only do the full size of the current window, not the entire screen.

I'd like to think about and discuss how we can come up with a solution that we can implement for MediaElement so we can bring you full screen/window functionality! Any input is appreciated!

[ne0rrmatrix]

In MainActivity.cs for Android you could use:

 protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        Platform.Init(this, savedInstanceState);
        this.Window.AddFlags(WindowManagerFlags.KeepScreenOn);
        this.Window.DecorView.SystemUiVisibility = (StatusBarVisibility)
            (SystemUiFlags.ImmersiveSticky | SystemUiFlags.HideNavigation | SystemUiFlags.LowProfile |
            SystemUiFlags.Fullscreen | SystemUiFlags.Immersive);
    }

Or if you do not want to save instance state you can use:

 protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        Window.AddFlags(WindowManagerFlags.KeepScreenOn);
        Window.DecorView.SystemUiVisibility = (StatusBarVisibility)
            (SystemUiFlags.ImmersiveSticky | SystemUiFlags.HideNavigation | SystemUiFlags.LowProfile |
            SystemUiFlags.Fullscreen | SystemUiFlags.Immersive);
    }

For Windows you can use in your Program.cs:

using Microsoft.Maui.LifecycleEvents;
#if WINDOWS
                        using Microsoft.UI;
                       using Microsoft.UI.Windowing;
                        using Windows.Graphics;
#endif

#if WINDOWS
            
 builder.ConfigureLifecycleEvents(events =>  
        {  
            events.AddWindows(wndLifeCycleBuilder =>  
            {  
                wndLifeCycleBuilder.OnWindowCreated(window =>  
                {  
                    window.ExtendsContentIntoTitleBar = false;  
                    IntPtr hWnd = WinRT.Interop.WindowNative.GetWindowHandle(window);  
                    WindowId myWndId = Win32Interop.GetWindowIdFromWindow(hWnd);  
                    var _appWindow = AppWindow.GetFromWindowId(myWndId);  
                    _appWindow.SetPresenter(AppWindowPresenterKind.FullScreen);                          
                });  
            });  
        });  
#endif

Just remember to put the using statements at top above namespace.

I am using this currently to have android and Windows app full screen. The only drawback is the app is always full screen. I have not solved the issue of how to get in and out of full screen so I can navigate properly. I have gesture controls working with swipe right to back to previous page on pages. But on pages with media element active and playing full screen the "ShouldShowPlaybackControls" blocks swipe gestures. But If all you want is full screen the code above will do it. BTW it is deprecated but still works in Android 33.0. It will give you a warning at compile time but it works.

[ne0rrmatrix]

Sorry I am using GlobalUsings.cs and forget to include the usings in example. BTW Shell Flyout controls use swipe action and that works for menus' if you want a work around for Exoplayer blocking swipe. Exoplayer has no plans to change behavior so you would have to override it to change it. It was in a closed bug report and marked as intended behavior.

[Tuurash]

I have created a workaround to fix this issue here.
Suggest me if u have better ideas

[ne0rrmatrix]

I opened a new discussion for this. I have a working implementation that I have added to media element in a fork of this repo. I am looking for input on adding it media element. I have tested it against my app and I am hoping the team looks at it and gives some advice on how to move forward. It is in New Feature discussion here: #1123

I have made a fork and done the initial work to make:

FullScreen();
RestoreScreen();

I have added those functions to media element and added the device specific implementations for windows and android. I am hoping to get feedback on changes that need to be done and/or for people to make comments on how to move forward.

Here is a link to forked repo with the additions: https://github.com/ne0rrmatrix/Maui/tree/FullScreen

[Neotrickster]

Hi @ne0rrmatrix , someone closed your discussion, so no opportunity to thank for your work. The repo have a 404 error so no chance to check any changes (but probably they are too advanced for me anyway). I still struggling into iOS implementation for my app so I will keep an eye on this.

[ne0rrmatrix]

I also noticed with IOS apps even the ones by Apple themselves only have full screen at start of video. I think apple limits that and there is no way to do it otherwise. I have no info on Mac, I don't have one or have access to one atm.

[fzarief]

I'd like to ask if there any updates for the full screen mode?

[ne0rrmatrix]

I ran into a roadblock with media element full screen. I was making the page full screen not just media element. Until I figure out how to choose just media element and make it full screen and back someone else will have to move forward with it. I spend a little time each week looking for a solution but I have been clue less as to how to select anything other than the Page element to alter for full screen.

[EdwardMcFlurry]

What about the workaround that @Tuurash created but I don't if he still maintains it and would love to hear the thoughts from MAUI Team 🤷🏻‍♂️

[ghost]

On MAUI Project in Visual Studio 2022 when I run the project on iOS simulator

on the Program.cs under Platforms/iOS folder on below line

	UIApplication.Main(args, null, typeof(AppDelegate));

it gives below error

ObjCRuntime.ObjCException: 'Objective-C exception thrown. Name: UIViewControllerHierarchyInconsistency Reason: child view controller:<AVPlayerViewController: 0x14cdaa200> should have parent view controller:<Microsoft_Maui_Controls_Handlers_Items_CarouselViewController: 0x14bd9aa90> but actual parent is:<Microsoft_Maui_Controls_Platform_Compatibility_ShellFlyoutRenderer: 0x14bd55530>

My XAML PAge is like below

<ContentPage.Resources>
    <ResourceDictionary>
        <converters:NotNullOrEmptyStringConverter x:Key="NotNullOrEmptyStringConverter"/>
    </ResourceDictionary>
</ContentPage.Resources>

<ContentPage.BindingContext>
    <local:CardVM  />
</ContentPage.BindingContext>

<CarouselView x:Name="carouselView" 
          ItemsSource="{Binding Cards}" 
          RemainingItemsThreshold="2" 
          RemainingItemsThresholdReached="OnRemainingItemsThresholdReached" 
          VerticalOptions="FillAndExpand" 
          HorizontalOptions="FillAndExpand"
              ItemsLayout="VerticalList" >
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <ScrollView>
                <StackLayout>

                    <!-- Display Text -->
                    <Label Text="{Binding Text}" 
                       FontSize="Large" 
                       HorizontalOptions="CenterAndExpand" 
                       VerticalOptions="CenterAndExpand"
                       IsVisible="{Binding Text, Converter={StaticResource NotNullOrEmptyStringConverter}}"/>

                    <!-- Display Image -->


                    <Image  
                               Source="{Binding ImageSource}" 
                               HorizontalOptions="FillAndExpand"
                               VerticalOptions="FillAndExpand"
                               Aspect="AspectFill"
                               IsVisible="{Binding ImageSource, Converter={StaticResource NotNullOrEmptyStringConverter}}" />


                    <toolkit:MediaElement Source="https://jlmscloudstorelocal.blob.core.windows.net/audiofiles/video1.mp4" 
                                          ShouldAutoPlay="True"
                                          ShouldKeepScreenOn="True"
                                          ShouldLoopPlayback="False"
                                          ShouldShowPlaybackControls="True"
                          IsVisible="{Binding VideoSource, Converter={StaticResource NotNullOrEmptyStringConverter}}" 
                          HorizontalOptions="FillAndExpand" 
                          VerticalOptions="FillAndExpand"
                                          Aspect="AspectFill"
                                          />

                </StackLayout>
            </ScrollView>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

I have tried with latest 2.0 version of CommunityToolkit.Maui.MediaElement as well as with 1.0.2 version. It gives error in both version.

Can any one help with this?

[jfversluis]

Would you be able to try the resulting artifact from #1657 as per these instructions and let me know? https://github.com/CommunityToolkit/Maui/wiki/Preview-Packages#pull-requests-

[BinaryAssault]

Bumping as would be nice to have this feature. In the meantime, I have a low effort partial-fix I'd like to submit for people in the same scenario. It accomplishes what @Tuurash did in his example, but with less steps involved.

Note, this does not hide the status bar, but that isn't something I 100% need at the moment so it works for me. I do understand this isn't a full full screen

Do the following:
For the content page (layout taken from @Tuurash's example)

<Content page ....
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
<!-- add this -->
    Shell.NavBarIsVisible="{Binding IsFullScreen}"
    Shell.TabBarIsVisible="{Binding IsFullScreen}" <!-- only needed if using tabs -->
....

<Grid>
    <Grid
        Padding="0,10,0,0"
        HorizontalOptions="FillAndExpand"
        RowDefinitions="Auto,Auto"
        VerticalOptions="StartAndExpand">

        <Grid Grid.Row="0" RowDefinitions="*">
            <toolkit:MediaElement
                x:Name="mediaElement"
                Aspect="AspectFit" <!-- important, set Aspect to AspectFit  -->
                ShouldAutoPlay="True"
                ShouldKeepScreenOn="True"
                ShouldShowPlaybackControls="True"
                Source="{Binding MediaSource}" />

            <ImageButton
                Grid.Row="0"
                Margin="10" Command="{Binding FullScreenCommand}"
                HeightRequest="40"
                HorizontalOptions="End"
                Source="iconfullscreen.png" <!-- this is a local resource -->
                VerticalOptions="Start"
                WidthRequest="40">
                <ImageButton.Behaviors>
                    <toolkit:IconTintColorBehavior TintColor="White" />
                </ImageButton.Behaviors>
            </ImageButton>
        </Grid>
    </Grid>
</Grid>
</ContentPage>

In your ViewModel:

...
[ObservableProperty]
private bool _isFullScreen;

[RelayCommand]
public void FullScreen()
{
    IsFullScreen = !IsFullScreen;
}

Now each time the full screen button is toggled, the page will appear to fill the screen. You can also add in additional controls as others have done, using the same method

[CliffAgius]

There is an older discussion that has been closed here - #1123

[CliffAgius]

Currently being worked on with #1679 so closing the discussion here to clean up.