Popup: Added Audio and Video support (MAUI iOS and Windows) (#697)

* Add audio and video support in HtmlToView

Implements handling for `source`, `Audio` and `Video` tags.

* Added UI to play pause and reply the media in WPF Popup Media control.

* Fixing WinUI Audio and Video markups

* Moved Media UI to separate file

* Missed file

* Updated Audio nad Video markups processing to Block.

Added Play/Pause, Time slider and time display to Popup playback controls.

* Addressing code review comments

* Adding Video and Audio support for iOS and Windows in MAUI.

* Adding fallback text

* Enhance MauiMediaElement with documentation and fixes
Changed MauiMediaElement declaration to a partial class
Enhanced the Dispose method to properly remove media items

* Removed unnecessary namespaces

* Remove unnecessary ConnectHandler methods

* Add Android-specific handling for Audio and Video Support

* Removing mediaType parsing

* Adding else block for ADNROID check adn removing redundant condition on goto statement

Author: prathameshnarkhede

src/Toolkit/Toolkit.Maui/AppHostBuilderExtensions.cs

@@ -1,3 +1,5 @@
+using Esri.ArcGISRuntime.Toolkit.Maui.Internal;
+
 namespace Esri.ArcGISRuntime.Toolkit.Maui
 {
     /// <summary>
@@ -12,9 +14,13 @@ public static class AppHostBuilderExtensions
         /// <returns>The host builder</returns>
         public static MauiAppBuilder UseArcGISToolkit(this MauiAppBuilder builder)
         {
-            return builder.ConfigureFonts(fonts => fonts
+#if WINDOWS || __IOS__
+            builder.ConfigureMauiHandlers(handler => handler.AddHandler<MauiMediaElement, MauiMediaElementHandler>());
+#endif
+            builder.ConfigureFonts(fonts => fonts
                 .AddEmbeddedResourceFont(typeof(AppHostBuilderExtensions).Assembly, "toolkit-icons.ttf", ToolkitIcons.FontFamilyName)
                 );
+            return builder;
         }
     }
 }

src/Toolkit/Toolkit.Maui/Internal/HtmlToView.Maui.cs

@@ -14,7 +14,7 @@
 //  *   limitations under the License.
 //  ******************************************************************************/
 
-
+using Esri.ArcGISRuntime.Toolkit.Maui.Internal;
 using Esri.ArcGISRuntime.Toolkit.Maui.Primitives;
 
 namespace Esri.ArcGISRuntime.Toolkit.Internal;
@@ -163,6 +163,41 @@ private static View CreateBlock(MarkupNode node, EventHandler<Uri>? urlClickHand
                     imageElement.Source = imageSource;
                 return imageElement;
 
+            case MarkupType.Audio:
+            case MarkupType.Video:
+#if ANDROID // TODO: This needs to be revisited when we have a support for Android
+                goto case MarkupType.Block;
+#else
+                // Find the first valid <source> child, or use the node's Content
+                string? mediaSrc = node.Content;
+                foreach (var child in node.Children)
+                {
+                    if (child.Type is MarkupType.Source && !string.IsNullOrEmpty(child.Content))
+                    {
+                        mediaSrc = child.Content;
+                        break;
+                    }
+                }
+                if (!string.IsNullOrEmpty(mediaSrc))
+                {
+                    if (Uri.TryCreate(mediaSrc, UriKind.Absolute, out var mediaUri))
+                    {
+                        var mediaElement = new MauiMediaElement
+                        {
+                            Source = mediaUri,
+                            HorizontalOptions = LayoutOptions.Fill,
+                            VerticalOptions = LayoutOptions.Center,
+                        };
+                        return mediaElement;
+                    }
+                    else
+                    {
+                        return new Label { Text = "Invalid media URL" };
+                    }
+                }
+                return new Label { Text = "Media not available" };
+#endif
+
             case MarkupType.Link:
                 // If the link wraps block content (like <img>), render it as a tappable ContentView.
                 if (Uri.TryCreate(node.Content, UriKind.Absolute, out var linkUri))
@@ -470,6 +505,6 @@ private static bool HasAnyBlocks(MarkupNode node)
 
     private static bool MapsToBlock(MarkupNode node)
     {
-        return node.Type is MarkupType.List or MarkupType.Table or MarkupType.Block or MarkupType.Divider or MarkupType.Image;
+        return node.Type is MarkupType.List or MarkupType.Table or MarkupType.Block or MarkupType.Divider or MarkupType.Image or MarkupType.Audio or MarkupType.Video;
     }
 }

src/Toolkit/Toolkit.Maui/Internal/MauiMediaElement.cs

@@ -0,0 +1,16 @@
+namespace Esri.ArcGISRuntime.Toolkit.Maui.Internal;
+
+/// <summary>
+/// A view that displays audio or video media from a specified source.
+/// </summary>
+internal partial class MauiMediaElement : View
+{
+    public static readonly BindableProperty SourceProperty =
+        BindableProperty.Create(nameof(Source), typeof(Uri), typeof(MauiMediaElement), null);
+
+    public Uri Source
+    {
+        get => (Uri)GetValue(SourceProperty);
+        set => SetValue(SourceProperty, value);
+    }
+}

src/Toolkit/Toolkit.Maui/Internal/MauiMediaElementHandler.Windows.cs

@@ -0,0 +1,29 @@
+#if WINDOWS
+using Microsoft.Maui.Handlers;
+using Microsoft.UI.Xaml.Controls;
+using Windows.Media.Core;
+
+namespace Esri.ArcGISRuntime.Toolkit.Maui.Internal
+{
+    internal partial class MauiMediaElementHandler : ViewHandler<MauiMediaElement, MediaPlayerElement>
+    {
+        protected override MediaPlayerElement CreatePlatformView() => new();
+
+        public void UpdateSource(Uri source)
+        {
+            if (source is not null && PlatformView is MediaPlayerElement platformView)
+            {
+                platformView.Source = MediaSource.CreateFromUri(source);
+                platformView.AreTransportControlsEnabled = true;
+                platformView.Stretch = Microsoft.UI.Xaml.Media.Stretch.Uniform;
+            }
+        }
+
+        protected override void DisconnectHandler(MediaPlayerElement platformView)
+        {
+            platformView.Source = null;
+            base.DisconnectHandler(platformView);
+        }
+    }
+} 
+#endif

src/Toolkit/Toolkit.Maui/Internal/MauiMediaElementHandler.cs

@@ -0,0 +1,25 @@
+#if WINDOWS || __IOS__
+using Microsoft.Maui.Handlers;
+
+namespace Esri.ArcGISRuntime.Toolkit.Maui.Internal
+{
+    internal partial class MauiMediaElementHandler
+    {
+        public static readonly IPropertyMapper<MauiMediaElement, MauiMediaElementHandler> PropertyMapper =
+        new PropertyMapper<MauiMediaElement, MauiMediaElementHandler>(ViewHandler.ViewMapper)
+        {
+            [nameof(MauiMediaElement.Source)] = MapSource,
+        };
+
+        public MauiMediaElementHandler() : base(PropertyMapper)
+        {
+        }
+
+        private static void MapSource(MauiMediaElementHandler handler, MauiMediaElement view)
+        {
+            handler.UpdateSource(view.Source);
+        }
+    }
+}
+
+#endif

src/Toolkit/Toolkit.Maui/Internal/MauiMediaElementHandler.iOS.cs

@@ -0,0 +1,60 @@
+#if __IOS__
+using AVFoundation;
+using AVKit;
+using CoreGraphics;
+using Foundation;
+using Microsoft.Maui.Handlers;
+using UIKit;
+
+namespace Esri.ArcGISRuntime.Toolkit.Maui.Internal;
+
+internal partial class MauiMediaElementHandler : ViewHandler<MauiMediaElement, UIView>, IDisposable
+{
+    private AVPlayer? _player;
+    private AVPlayerViewController? _playerController;
+    private UIView _playerView;
+
+    protected override UIView CreatePlatformView()
+    {
+        _player = new AVPlayer();
+        _playerController = new AVPlayerViewController
+        {
+            Player = _player,
+        };
+        _playerView = _playerController.View;
+        _playerView.Frame = new CGRect(0, 0, 320, 180); // Default size, The aspect ratio is still maintained if video has different dimensions
+
+        return _playerView;
+    }
+
+    public void UpdateSource(Uri source)
+    {
+        if (source is not null)
+        {
+            var url = NSUrl.FromString(source.ToString());
+            _player.ReplaceCurrentItemWithPlayerItem(new AVPlayerItem(url));
+        }
+    }
+
+    protected override void DisconnectHandler(UIView platformView)
+    {
+        Dispose();
+        base.DisconnectHandler(platformView);
+    }
+
+    public void Dispose()
+    {
+        // Cleanup resources
+        _player?.Pause();
+        _player.ReplaceCurrentItemWithPlayerItem(null);
+        _player?.Dispose();
+        _player = null;
+        _playerController?.Dispose();
+        _playerController = null;
+        _playerView?.RemoveFromSuperview();
+        _playerView?.Dispose();
+        _playerView = null;
+    }
+}
+
+#endif