MediaElement - Fullscreen not able to call dispose / stop

[cvazquez08]

Hi,

I am working on implementing a full-screen video player using the Community Toolkit MediaElement in a .NET MAUI app. I am encountering an issue where, after displaying the video in full screen and using the built-in "X" close button in the MediaElement controls, none of my event handlers are triggered. As a result, the video continues to play in the background even after the player is closed. Additionally, the OnDisappearing method for the page does not seem to be called in this scenario.

Here is a sample of my current implementation. Could someone please guide me on the correct approach to ensure that the video stops playing and resources are properly cleaned up when the close button is used?

Thank you!

Base page where video is being called from

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage
    x:Class="DebugMenu.VideoPlayerDebugPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:rds="http://rs.com/schemas/2024/rds">
    <ContentPage.Content>
        <VerticalStackLayout Margin="16">
            <Button
                Clicked="OnFullScreenTapped"
                Style="{rds:Buttons Subtle}"
                Text="Full Screen" />
        </VerticalStackLayout>
    </ContentPage.Content>
</ContentPage>

using DebugMenu.Views;

namespace DebugMenu;

public partial class VideoPlayerDebugPage
{
  public VideoPlayerDebugPage()
  {
    this.InitializeComponent();
  }

  private async void OnFullScreenTapped(object? sender, EventArgs e)
  {
      await Shell.Current.Navigation.PushModalAsync(new VideoFullScreen());
  }
}

Video Player

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage
    x:Class="DebugMenu.Views.VideoFullScreen"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <toolkit:MediaElement
        x:Name="VideoPlayer"
        MediaEnded="OnMediaEnded"
        MediaFailed="OnMediaFailed"
        ShouldAutoPlay="True"
        ShouldShowPlaybackControls="True"
        Source="https://cdn.ramseysolutions.net/media/everydollar/videos/education/learn_to_budget.mp4"
        StateChanged="OnStateChanged"
        HorizontalOptions="Fill"
        VerticalOptions="Fill" />
</ContentPage>

None of these handlers are being fired when closing the video.

using CommunityToolkit.Maui.Core.Primitives;
using CommunityToolkit.Maui.Views;

namespace DebugMenu.Views;

public partial class VideoFullScreen
{
  public VideoFullScreen()
  {
    this.InitializeComponent();
  }

  protected override void OnAppearing()
  {
    base.OnAppearing();
    Console.WriteLine("ON APPEARING HAS FIRED");
  }

  protected override void OnDisappearing()
  {
    base.OnDisappearing();
    Console.WriteLine("ON DISAPPEARING FIRED");
    this.VideoPlayer.Stop();
  }

  private void OnMediaEnded(object? sender, EventArgs e)
  {
    Console.WriteLine("ON MEDIA ENDED FIRED");
    this.VideoPlayer.Stop();
  }

  private void OnMediaFailed(object? sender, MediaFailedEventArgs e)
  {
    Console.WriteLine("ON MEDIA FAILED FIRED");
  }

  private void OnStateChanged(object? sender, MediaStateChangedEventArgs e)
  {
    Console.WriteLine("ON STATE CHANGED FIRED");
  }
  
  protected override void OnHandlerChanging(HandlerChangingEventArgs args)
  {
    base.OnHandlerChanging(args);

    if (args.NewHandler != null)
    {
      return;
    }

    this.VideoPlayer.Handler?.DisconnectHandler();
    this.VideoPlayer.Dispose();
  }
}

[ne0rrmatrix]

Can you open a bug report and submit a sample to show what the issue is?

[ne0rrmatrix]

Media Element has support for full screen built in for all platforms. There is a PR out now #2041 that will let you know when it enters/exits full screen state. But as for switching states there is clickable element in each device type that lets you switch to full screen and back. There are no manual controls to do this.

The reason for not having manual controls that let developers controls full screen is an issue with iOS. We don't have access to the API and can only support the existing full screen functionality that iOS provides built into AVPlayer. We can track the status of full screen events but not invoke them. On all other devices we can do this. But this would split the behavior the API between different devices. Which is something we don't want to do. We want unified behavior where ever possible.

[cvazquez08]

Excellent, just looked at the code changes in that PR. So long as that event fires when exiting full screen that should solve the problem.

Do you still need me to open a bug ticket for this?

[ne0rrmatrix]

If the PR fixes your issue there is no need to file a bug report. It is a feature request that is already approved. I will close this discussion once the PR is out and you reply back it's working. Otherwise file a bug report at that time.

[CliffAgius]

Closed as answered, if closed in error please let us know to re-open.