Added new multicapture camera UI (#893)

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: VegardHV

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [61.4.0]
+- [ImageCapture] When taking several photos in a row, the most recent photo now shows as a thumbnail in the bottom-left corner of the camera and updates with each capture. The thumbnail can be tapped to review and/or remove photos from the capture session.
+- [ImageCapture] Added MaxImageCount with a default of 15 when using MultiImageCapture to avoid crash as images are stored in-memory only.
+- [Gallery] Fixed issue where gallery always reset to the first image when the collection changed.
+
 ## [61.3.0] 
 - Resources was updated from DIPS.Mobile.DesignTokens
 

src/app/Components/ComponentsSamples/ImageCapturing/MultiImageCaptureModalPage.xaml.cs

@@ -9,6 +9,7 @@ public partial class MultiImageCaptureModalPage
     private readonly bool m_requiresConfirmation;
     private readonly List<CapturedImage> m_capturedImages = [];
     private readonly ImageCapture m_imageCapture = new();
+    private bool m_hasStartedCapture;
     private readonly TaskCompletionSource<List<CapturedImage>> m_completion =
         new(TaskCreationOptions.RunContinuationsAsynchronously);
 
@@ -24,6 +25,10 @@ protected override async void OnAppearing()
     {
         base.OnAppearing();
 
+        if (m_hasStartedCapture)
+            return;
+        m_hasStartedCapture = true;
+
         var cameraOptions = new CameraOptions
         {
             CancelButtonCommand = new Command(OnCancelled)
@@ -32,16 +37,21 @@ protected override async void OnAppearing()
         var multiImageCaptureOptions = new MultiImageCaptureOptions
         {
             RequiresConfirmationOnEachImage = m_requiresConfirmation,
-            FinishedButtonCommand = new Command(OnFinished)
+            FinishedButtonCommand = new Command(OnFinished),
+            MaxImageCount = 10,
+            OnImageRemoved = OnImageRemoved
         };
 
         await m_imageCapture.StartMultiImageCapture(CameraPreview, OnImageCaptured, OnCameraFailed,
             cameraOptions, multiImageCaptureOptions);
     }
 
-    protected override void OnDisappearing()
+    protected override void OnHandlerChanging(HandlerChangingEventArgs args)
     {
-        base.OnDisappearing();
+        base.OnHandlerChanging(args);
+
+        if (args.NewHandler is not null)
+            return;
 
         m_imageCapture.Stop();
 
@@ -54,6 +64,11 @@ private void OnImageCaptured(CapturedImage capturedImage)
         m_capturedImages.Add(capturedImage);
     }
 
+    private void OnImageRemoved(CapturedImage capturedImage)
+    {
+        m_capturedImages.Remove(capturedImage);
+    }
+
     private async void OnFinished()
     {
         m_completion.TrySetResult(m_capturedImages);

src/library/DIPS.Mobile.UI/API/Camera/Gallery/BottomSheet/BottomToolbar/GalleryBottomSheetBottomToolbar.cs

@@ -39,6 +39,6 @@ public void GoToDefaultState(IGalleryDefaultStateObserver observer)
         };
 
         Add(removeButtonWithText);
-        Add(doneButtonWithText);   
+        Add(doneButtonWithText);
     }
 }

src/library/DIPS.Mobile.UI/API/Camera/Gallery/BottomSheet/GalleryBottomSheet.cs

@@ -212,7 +212,7 @@ protected override void OnHandlerChanging(HandlerChangingEventArgs args)
         if (args.NewHandler is not null)
         {
             OnImagesChanged();
-            _ = OnCarouselViewPositionChanged(m_carouselView!.Position);    
+            _ = OnCarouselViewPositionChanged(m_carouselView!.Position);
         }
     }
 

src/library/DIPS.Mobile.UI/API/Camera/ImageCapturing/Android/ImageCapture.cs

@@ -62,7 +62,7 @@ private partial void PlatformCapturePhoto()
             ? AndroidX.Camera.Core.ImageCapture.FlashModeOn
             : AndroidX.Camera.Core.ImageCapture.FlashModeOff;
 
-        m_imageCaptureCallback?.Dispose();
+        m_imageCaptureCallback?.IgnoreRemainingCallbacks();
         m_imageCaptureCallback = new ImageCaptureCallback(
             onCaptureStarted: () => SimulateCameraShutter(false),
             onImageCaptureFailed: InvokeOnImageCaptureFailed,
@@ -80,7 +80,7 @@ private partial async Task PlatformStop()
     {
         CancelAnyActiveImageProcessing();
 
-        m_imageCaptureCallback?.Dispose();
+        m_imageCaptureCallback?.IgnoreRemainingCallbacks();
         m_imageCaptureCallback = null;
 
         await base.TryStop();
@@ -96,7 +96,7 @@ private void InvokeOnImageCaptureFailed(ImageCaptureException imageCaptureExcept
     {
         if (imageCaptureException.Message != null)
         {
-            PlatformOnCameraFailed(new CameraException("DidTryCaptureImage", imageCaptureException));
+            OnImageCaptureFailed(new CameraException("DidTryCaptureImage", imageCaptureException));
         }
     }
 
@@ -135,7 +135,7 @@ private async void ProcessImageAndGoToConfirmState(IImageProxy imageProxy)
         }
         catch (Exception e)
         {
-            PlatformOnCameraFailed(new CameraException("ProcessImageFailed", e));
+            OnImageCaptureFailed(new CameraException("ProcessImageFailed", e));
         }
     }
 

src/library/DIPS.Mobile.UI/API/Camera/ImageCapturing/Android/ImageCaptureCallback.cs

@@ -1,3 +1,4 @@
+using Android.Runtime;
 using AndroidX.Camera.Core;
 
 namespace DIPS.Mobile.UI.API.Camera.ImageCapturing;
@@ -17,11 +18,25 @@ public ImageCaptureCallback(
         m_onImageCaptured = onImageCaptured;
         m_onImageCaptureFailed = onImageCaptureFailed;
     }
+    
+    /// <remarks>
+    /// If CameraX hands this Java callback to managed code after the C# instance has been disposed, Android will try to rebuild the
+    /// managed object, and crash if this constructor doesn't exist.
+    ///
+    /// From the .NET for Android architecture docs, "Premature Dispose() Calls" section:
+    /// https://learn.microsoft.com/en-us/previous-versions/xamarin/android/internals/architecture
+    /// "If a JNI handle enters managed code after the mapping has been broken, it looks like Java Activation,
+    /// and the (IntPtr, JniHandleOwnership) constructor will be checked for and invoked. If the constructor
+    /// doesn't exist, then an exception will be thrown."
+    /// </remarks>
+    protected ImageCaptureCallback(IntPtr javaReference, JniHandleOwnership transfer)
+        : base(javaReference, transfer)
+    {
+    }
 
     /// <summary>
     /// Called when the camera hardware has started exposing the sensor.
     /// Use this to display shutter animation or similar feedback.
-    ///
     /// </summary>
     /// <remarks>
     /// From docs:
@@ -41,18 +56,24 @@ public override void OnError(ImageCaptureException exception)
     {
         m_onImageCaptureFailed?.Invoke(exception);
         base.OnError(exception);
-        ClearDelegates();
+        IgnoreRemainingCallbacks();
     }
 
     public override void OnCaptureSuccess(IImageProxy image)
     {
         m_onImageCaptured?.Invoke(image);
         base.OnCaptureSuccess(image);
         image?.Close();
-        ClearDelegates();
+        IgnoreRemainingCallbacks();
     }
-
-    private void ClearDelegates()
+    
+    /// <remarks>
+    /// From the .NET for Android architecture docs, "Premature Dispose() Calls" section:
+    /// https://learn.microsoft.com/en-us/previous-versions/xamarin/android/internals/architecture
+    /// "Only Dispose() of managed callable wrapper subclasses when you know that the Java object will not be
+    /// used anymore..."
+    /// </remarks>
+    internal void IgnoreRemainingCallbacks()
     {
         m_onCaptureStarted = null;
         m_onImageCaptured = null;
@@ -61,7 +82,7 @@ private void ClearDelegates()
 
     protected override void Dispose(bool disposing)
     {
-        ClearDelegates();
+        IgnoreRemainingCallbacks();
         base.Dispose(disposing);
     }
 }

src/library/DIPS.Mobile.UI/API/Camera/ImageCapturing/ImageCapture.CapturedImagesGallery.cs

@@ -0,0 +1,148 @@
+using DIPS.Mobile.UI.API.Camera.ImageCapturing.Views;
+using DIPS.Mobile.UI.API.Camera.ImageCapturing.Views.BottomToolbar.StreamingState;
+using DIPS.Mobile.UI.Components.Alerting.Dialog;
+using DIPS.Mobile.UI.Resources.LocalizedStrings.LocalizedStrings;
+
+namespace DIPS.Mobile.UI.API.Camera.ImageCapturing;
+
+public partial class ImageCapture
+{
+    private readonly List<CapturedImage> m_capturedImages = [];
+    private CapturedImagesGalleryButton? m_capturedImagesGalleryButton;
+    private CapturedImagesGalleryOverlay? m_galleryOverlay;
+
+    private bool HasReachedImageLimit =>
+        m_cameraSession is MultiCaptureSession multiCaptureSession
+        && m_capturedImages.Count >= multiCaptureSession.MultiImageCaptureOptions.MaxImageCount;
+
+    /// <summary>
+    /// Only show optimistic UI when no per-image confirmation is needed. With per-image confirmation, the image is not
+    /// committed until the user accepts it, and should not update UI optimistically.
+    /// </summary>
+    private bool ShouldUpdateImagePreviewImmediately =>
+        m_cameraSession is MultiCaptureSession { MultiImageCaptureOptions.RequiresConfirmationOnEachImage: false };
+    
+    private void OptimisticallyUpdateGalleryButton()
+    {
+        if (!ShouldUpdateImagePreviewImmediately)
+            return;
+
+        var pendingImageCount = m_capturedImages.Count + 1;
+        m_capturedImagesGalleryButton?.ShowPendingCapture(pendingImageCount);
+    }
+
+    private CapturedImagesGalleryButton? CreateCapturedImagesGalleryButtonForMultiCapture()
+    {
+        if (m_cameraSession is not MultiCaptureSession)
+        {
+            m_capturedImagesGalleryButton = null;
+            return null;
+        }
+
+        m_capturedImagesGalleryButton = new CapturedImagesGalleryButton(OpenCapturedImagesGallery);
+        
+        m_capturedImagesGalleryButton.ShowMostRecentImageAndCount(m_capturedImages);
+        
+        return m_capturedImagesGalleryButton;
+    }
+
+    private void AddImageAndUpdateImagePreview(CapturedImage capturedImage)
+    {
+        m_capturedImages.Add(capturedImage);
+        
+        m_capturedImagesGalleryButton?.ShowMostRecentImageAndCount(m_capturedImages);
+
+        if (HasReachedImageLimit)
+        {
+            ShowMaxImagesReachedMessage();
+        }
+    }
+
+    private void ShowMaxImagesReachedMessage()
+    {
+        if (m_cameraSession is not MultiCaptureSession multiCaptureSession)
+            throw new InvalidOperationException($"{nameof(ShowMaxImagesReachedMessage)} is only valid during a multi capture session, but the session was {m_cameraSession?.GetType().Name ?? "null"}.");
+
+        var maxImageCount = multiCaptureSession.MultiImageCaptureOptions.MaxImageCount;
+        _ = DialogService.ShowMessage(configurator => configurator
+            .SetTitle(DUILocalizedStrings.MaxImagesReachedTitle)
+            .SetDescription(string.Format(DUILocalizedStrings.MaxImagesReachedMessage, maxImageCount))
+            .SetActionTitle(DUILocalizedStrings.Ok));
+    }
+
+    private void OpenCapturedImagesGallery()
+    {
+        if (m_capturedImages.Count == 0)
+            throw new InvalidOperationException("Captured-images gallery opened with no images. The preview is hidden when empty, so this should be unreachable.");
+
+        if (m_cameraPreview is null)
+            throw new InvalidOperationException("Captured-images gallery opened after the camera preview was torn down.");
+
+        // Guard against repeat taps
+        if (m_galleryOverlay is not null)
+            return;
+        
+        m_cameraPreview.HidePreview();
+
+        var startingIndex = m_capturedImages.Count - 1;
+        
+        m_galleryOverlay = new CapturedImagesGalleryOverlay(
+            m_capturedImages, 
+            startingIndex, 
+            onRemoveImageAtAction: RemoveImageAndUpdateGalleryButton, 
+            onCloseAction: CloseCapturedImagesGallery);
+        
+        m_cameraPreview.AddViewToRoot(m_galleryOverlay);
+    }
+
+    private async void CloseCapturedImagesGallery()
+    {
+        try
+        {
+            ArgumentNullException.ThrowIfNull(m_cameraPreview);
+            ArgumentNullException.ThrowIfNull(m_galleryOverlay);
+            
+            var overlay = m_galleryOverlay;
+            m_galleryOverlay = null;
+            
+            m_cameraPreview.ShowPreview();
+            
+            await overlay.FadeOutAsync();
+
+            // The user can navigate away from the page during the fade, which nulls the preview.
+            if (m_cameraPreview is null)
+                return;
+
+            m_cameraPreview.RemoveViewFromRoot(overlay);
+
+            m_capturedImagesGalleryButton?.ShowMostRecentImageAndCount(m_capturedImages);
+            m_bottomToolbarView?.SetShutterButtonEnabled(true);
+        }
+        catch (Exception e)
+        {
+            Log(e.Message);
+        }
+    }
+
+    private void TearDownGalleryOverlay()
+    {
+        m_cameraPreview?.RemoveViewFromRoot(m_galleryOverlay);
+        m_galleryOverlay = null;
+    }
+
+    private void RemoveImageAndUpdateGalleryButton(int index)
+    {
+        if (index < 0 || index >= m_capturedImages.Count)
+            throw new ArgumentOutOfRangeException(nameof(index), index, $"The gallery asked to remove an image at an index outside the captured set (count {m_capturedImages.Count}).");
+
+        var removedImage = m_capturedImages[index];
+        m_capturedImages.RemoveAt(index);
+
+        if (m_cameraSession is MultiCaptureSession multiCaptureSession)
+        {
+            multiCaptureSession.MultiImageCaptureOptions.OnImageRemoved?.Invoke(removedImage);
+        }
+
+        m_capturedImagesGalleryButton?.ShowMostRecentImageAndCount(m_capturedImages);
+    }
+}

src/library/DIPS.Mobile.UI/API/Camera/ImageCapturing/ImageCapture.ConfirmState.cs

@@ -72,16 +72,16 @@ void IConfirmStateObserver.OnEditButtonTapped()
     void IConfirmStateObserver.OnUsePhotoButtonTapped()
     {
         m_onImageCapturedDelegate?.Invoke(m_currentlyCapturedImage);
-        
+
         if (m_cameraSession is MultiCaptureSession)
         {
+            AddImageAndUpdateImagePreview(m_currentlyCapturedImage);
             GoToStreamingState();
             _ = PlatformStart(m_cameraSession.CameraOptions, m_cameraFailedDelegate);
             return;
         }
 
-        ResetAllVisuals();
-        PlatformStop();
+        Stop();
     }
 
     void IConfirmStateObserver.OnRetakePhotoButtonTapped()