Handling Fullscreen Mode in Media Element

[junkse7en]

Greetings to the Community,

I've been integrating the MediaElement control into my application and am impressed with its capabilities and performance. I want to extend my gratitude to the contributors and community for this valuable resource.

Discussion Points on Fullscreen Functionality

I have a few points regarding the fullscreen feature of the MediaElement that I'd like to discuss and seek advice on:

1. Event Handling for Fullscreen Mode: Is there a way to tap into events specifically for entering and exiting fullscreen mode? I'm looking to implement additional logic when the user toggles fullscreen on a video.

2. Custom Controls in Fullscreen: In fullscreen mode, I've observed that custom controls disappear. Is this expected? How can I ensure that my custom video controls are still available and functional when the video is in fullscreen mode?

3. Hiding the Default Fullscreen Toggle: For specific project requirements, I need to manage fullscreen mode programmatically without the default fullscreen toggle button. Is there a procedure to hide this button or disable it, or to programmatically go fullscreen?

Looking forward to any suggestions, workarounds, or guidance you can provide!

[ne0rrmatrix]

There was a fix merged today that should address one of these issues. The full screen button now respects showing/hiding controls settings. So if you create custom controls and hide default controls the full screen controls will be hidden too. This was fixed/merged yesterday. If you set custom controls now and disable default controls full screen controls should be disabled and not visible.

We are looking into the possibility of adding controls that will specifically allow a developer to set full screen in code behind. The only issue with that currently is it would be Windows/Android only. This is because the method used to set full screen in IOS/Mac is a hidden method that is not in UIKit. Or at least the version that is exposed in Maui. This was mentioned in monthly toolkit meeting on youtube. I hope to hear more about with someone creating a proposal with changes.

[Neotrickster]

...
1. Event Handling for Fullscreen Mode: Is there a way to tap into events specifically for entering and exiting fullscreen mode? I'm looking to implement additional logic when the user toggles fullscreen on a video.
...

This one will be awesome, I have an App using portrait mode only but 1 window (the one with MediaPlayer) and I "unlock" landscape mode on appearing on "lock" on dissapearing but logic when the user toggles fullscreen will be ideal to avoid weird interactions.

[ne0rrmatrix]

I just figured out how to hook the full screen events for ios. I can add static event handlers so that you can know when it exits and enters full screen mode. I can provide info on when it does this but not affect the buttons themselves. I can provide full control of events with android and windows. If you find this useful please tell me how you would like to have this added to media element with maybe an API and use case with examples? I was working on adding subtitles and with help from someone in the community figured out how to access the ios events for entering and exiting full screen.

[ne0rrmatrix]

In regards to each question I will respond as to what is currently possible and what issue may be involved in supporting each idea.

1. Supporting adding event handlers to tell developer when entering full screen and returning. Easy to implement and minimal difficulty. Methods for windows and android are easy to implement. IOS and Mac I recently discovered how to do this with help from community.
2. Full screen custom controls not dissearing when entering full screen. That honestly depends on your implementation. For windows and android it should be easy. For Mac/IOS it might be a little more complicated and I would need to talk and discuss a way to handle that and figure out the best way forward. The biggest issue with IOS is starting with IOS 16.x how controls are handled changed and we are still trying to find the best path forward.
3. For hiding full screen toggle it is relatively easy to implement for windows and android. For ios/mac I have no idea if that is even possible. ATM we have no real control over full screen behavior and the methods themselves are hidden and not accessible to developers at all. I have with the help of the community discovered a way to know when avkit puts avplayer in full screen and back out but that is my currently the only detail I can get.

[Neotrickster]

I´ll be more than happy with 1

[ne0rrmatrix]

API that allows developers to hook a media element event and know the full screen status. Is it full screen or normal?
Please comment and reply and ideas or changes you like or want. At this time I am looking for feedback from people who want this feature and I also want feedback from maintainers about things like do we want to add support for enabling and disabling full screen controls on windows and android? I don't think it is possible to do that on IOS/Mac. Do we want to support this only on those devices that have support or should we stick with just letting developers hook the full screen events?

Example API:

	/// <summary>
	/// Backing store for the <see cref="FullScreenState"/> property.
	/// </summary>
	public static readonly BindableProperty FullScreenProperty =
		BindableProperty.Create(nameof(FullScreenState), typeof(MediaElementScreenState), typeof(MediaElement), 
			MediaElementScreenState.Default, propertyChanged: OnFullScreenPropertyChanged);

Example usage:

public MediaElementPage(MediaElementViewModel viewModel, ILogger<MediaElementPage> logger) : base(viewModel)
{
	InitializeComponent();
	MediaElement.FullScreenStateChanged += MediaElement_FullScreenStateChanged;
}
        
void MediaElement_FullScreenStateChanged(object? sender, FullScreenStateChangedEventArgs e) =>
	logger.LogInformation("FullScreen State Changed. Old State: {PreviousState}, New State: {NewState}", e.PreviousState, e.NewState);

[Neotrickster]

What´s next step for this to make it real ??

[ne0rrmatrix]

@Neotrickster Someone needs to write out a proposal and find a team member to sponsor this. At this time I am happy to write the eventhandler for all devices. But supporting programmatically changing full screen is not possible for IOS/mac and we need to decide whether we want to support that on windows/android and not ios/mac? If we can decide that I am happy to write a proposal.

We need to decide if we are going to support an EventHandler or more? Are we going to have device specific options for windows/android adding functionality unavailable in IOS/Mac? I would be alot more comfortable if we decide that before moving any further.

[Neotrickster]

Hi @ne0rrmatrix , I just see you in the monthly CTK show grats on that. I just thought @bijington commented about a v1 (the one you proposed:

Example API:

	/// <summary>
	/// Backing store for the <see cref="FullScreenState"/> property.
	/// </summary>
	public static readonly BindableProperty FullScreenProperty =
		BindableProperty.Create(nameof(FullScreenState), typeof(MediaElementScreenState), typeof(MediaElement), 
			MediaElementScreenState.Default, propertyChanged: OnFullScreenPropertyChanged);

Example usage:

public MediaElementPage(MediaElementViewModel viewModel, ILogger<MediaElementPage> logger) : base(viewModel)
{
	InitializeComponent();
	MediaElement.FullScreenStateChanged += MediaElement_FullScreenStateChanged;
}
        
void MediaElement_FullScreenStateChanged(object? sender, FullScreenStateChangedEventArgs e) =>
	logger.LogInformation("FullScreen State Changed. Old State: {PreviousState}, New State: {NewState}", e.PreviousState, e.NewState);

For me, this is the way, only this very first basic functionality, and then iterate from there.

PS: Sorry for my ignorance but how you get an sponsor ?

[ne0rrmatrix]

The first step is to read this and create a new discussion. It will be reviewed at the monthly toolkit meeting if there is enough interest in the community to add this feature. https://github.com/CommunityToolkit/Maui/wiki/Submitting-a-New-Feature

[Neotrickster]

I see, thanks a lot.

[Neotrickster]

Before I migrate to MAUI MediaElement I was using Xamarin with Xamarians/MediaPlayer [https://github.com/Xamarians/MediaPlayer] , looks simple enough from a use perspective:

public partial class SegnalesEnVivoPage : ContentPage
{
		public SegnalesEnVivoPage()
		{
			InitializeComponent();
			BindingContext = new SegnalesEnVivoViewModel();

			VideoPlayer.FullScreenStatusChanged += VideoPlayer_FullScreenStatusChanged;
		}

                private void VideoPlayer_FullScreenStatusChanged(object sender, bool value)
		{
			NavigationPage.SetHasNavigationBar(this, !value);
			Shell.SetNavBarIsVisible(this, !value);
			frmInformation.IsVisible = !value;
			frmBackground.IsVisible = !value;
			frmPlayer.Margin = value ? new Thickness(0, 0, 0, 0) : new Thickness(10, 20, 10, 10);
			VideoPlayer.HeightRequest = value ? deviceScreenHeight : 240;
			InvalidateMeasure();
		}

}

I don´t know if that´s better or no but I hope it helps.

As a mater of fact, this player keep working until today (Xamarin) on android and stop working on iOS 16 but the project was abandoned long long time ago so migrate into MAUI MediaElement was just a life saver

[nathanAjacobs]

Would it be possible to add support to enter full screen from code?