Full Screen feature for the Media Element on Android

[vhugogarcia]

History
Video player in Android uses ExoPlayer StyledPlayerView. This video library provides the elements to play videos and all around it. However, full screen is not implemented out-of-box and for instance it requires a custom implementation.

Proposal
Enable the simple full screen feature for the media element on Android devices. iOS already have the full screen feature natively, this is purely for Android since this feature requires custom implementation.

Enable the Full screen button on the ExploPlayer
ExoPlayer has a listener that identifies when a method has been assigned to the click event, so it automatically adds the Full Screen icon to the player.
playerView.FullscreenButtonClick += PlayerView_FullscreenButtonClick;

New method that reacts to the tap event of the Full screen button in the ExoPlayer:

        /// <summary>
	/// Allows the video to enter or exist a full screen mode
	/// </summary>
	/// <param name="sender"></param>
	/// <param name="e"></param>
	void PlayerView_FullscreenButtonClick(object? sender, StyledPlayerView.FullscreenButtonClickEventArgs e)
	{
		// Ensure there is a player view
		if (this.playerView is null)
		{
			return;
		}

		// Ensure current activity exists
		var currentActivity = Platform.CurrentActivity;
		if (currentActivity is null)
		{
			return;
		}

		// Ensure current window is available
		var currentWindow = currentActivity.Window;
		if (currentWindow is null)
		{
			return;
		}

		// Ensure current resources exist
		var currentResources = currentActivity.Resources;
		if (currentResources is null)
		{
			return;
		}

		if (e.IsFullScreen)
		{
			// Get the original values
			originalHeight = this.playerView.Height;

			// Force the landscape on the device
			currentActivity.RequestedOrientation = Android.Content.PM.ScreenOrientation.Landscape;

			// Hide the status bar and enter a full screen immerse mode
			if (Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.R)
			{
				currentWindow.SetDecorFitsSystemWindows(false);
				currentWindow.InsetsController?.Hide(WindowInsets.Type.SystemBars());
			}
			else
			{
				originalUiOptions = (int)currentWindow.DecorView.SystemUiVisibility;
				var newUiOptions = (int)SystemUiFlags.Fullscreen;

				currentWindow.DecorView.SystemUiVisibility = (StatusBarVisibility)newUiOptions;
			}

			// We update the player layout
			if (currentWindow.DecorView is FrameLayout)
			{
				var currentDisplayMetrics = currentResources.DisplayMetrics;
				if (currentDisplayMetrics is not null)
				{
					var customHeight = currentDisplayMetrics.WidthPixels;
					var customWidth = currentDisplayMetrics.HeightPixels;

					var frameLayoutParameters = new FrameLayout.LayoutParams(customWidth, customHeight, GravityFlags.CenterHorizontal);
					this.playerView.LayoutParameters = frameLayoutParameters;
				}
			}
		}
		else
		{
			currentActivity.RequestedOrientation = Android.Content.PM.ScreenOrientation.Portrait;

			if (Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.R)
			{
				currentWindow.SetDecorFitsSystemWindows(false);
				currentWindow.InsetsController?.Show(WindowInsets.Type.SystemBars());
			}
			else
			{
				currentWindow.DecorView.SystemUiVisibility = (StatusBarVisibility)originalUiOptions;
			}

			var frameLayoutParameters = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, originalHeight);
			playerView.LayoutParameters = frameLayoutParameters;
		}
	}

New Property for future releases

• IsFullScreen property, where the user can know when the video is playing in full screen or no. I tried already without luck :(

New Method for future releases

• SetFullScreen(true/false) method, where the user can programmatically set the video in full screen or no.

Video Demo

Media-Element-Full-Screen-Demo-Android.mp4

I sincerely apologize for jumping ahead and creating a PR before starting this discussion: #994

Thanks in advance to all the community here, I'm open to ideas, recommendations. I'm happy to learn 👍🏻

[brminnick]

Is it possible to add support for iOS, MacCatalyst, Windows and Tizen too?

[vhugogarcia]

Thanks @brminnick for bringing that question.

• iOS and MacOS already provides a full screen button natively on the player. However, if we need to start the video in full screen programmatically and get the status of the video if it is on Full Screen or no. We can probably (I'm not 100% sure) use these AVPlayerViewControllerDelegate delegate methods :

func playerViewController(AVPlayerViewController, willBeginFullScreenPresentationWithAnimationCoordinator: UIViewControllerTransitionCoordinator)
func playerViewController(AVPlayerViewController, willEndFullScreenPresentationWithAnimationCoordinator: UIViewControllerTransitionCoordinator)

• Windows, I believe we can use the IsFullWindow property, it helps to enable and disable full window rendering. This ensures system level optimizations are used during media playback. On this, honestly, I don't have experience, I'm just sharing what I found in the official documentation.
• Tizen, I'm not sure, per Samsung's official documentation I don't see a way to identify when the video is playing full screen or no. I guess it is based on the display metrics, so if the video view takes the full width and height of the device in a landscape/portrait mode it can identify that the video is being played in Full screen mode. And to enable full screen mode, maybe it just resizes the video to take the full width and height of the device.

If you all agree with that, I can change the name of the topic of this discussion so it does not specify it only for Android.

[brminnick]

Good points! I'll defer to our MediaElement guru, @jfversluis, for next steps.

[brminnick]

@jfversluis Could you take the lead on this? Victor has opened a preliminary PR here: #994

[vhugogarcia]

I'm closing this discussion, since our friend James @ne0rrmatrix has a better implementation than mine and currently a PR is actively in review.

Thanks all for the help :)

[EdwardMcFlurry]

@vhugogarcia since @ne0rrmatrix PR has been closed now for some time, are you not moving forward with your own implementation. This functionality on Android is a MUST have, wouldn't you agree?