init

OpenArchival.Blazor.FileViewer/FileViewerCarousel.razor

@@ -1,11 +1,12 @@
-@namespace OpenArchival.Blazor.FileViewer
+@namespace OpenArchival.Blazor.FileViewer
 
 @using Microsoft.Extensions.Logging
+@using Microsoft.JSInterop
 @using OpenArchival.DataAccess;
 @using MudBlazor;
 
-<MudCarousel Style="@_carouselStyle"
-             Class="mud-width-full auto-height-carousel"
+<MudCarousel Class="mud-width-full auto-height-carousel"
+             Style="@($"height: {(_currentHeight > 0 ? $"{_currentHeight}px" : "400px")}; max-height: 80vh; {(MaxHeight > 0 ? $"max-height: {Math.Min(MaxHeight, 800)}px;" : "")}")"
              TData="object"
              AutoCycle=false
              @bind-SelectedIndex="SelectedIndex"
@@ -18,13 +19,17 @@
             continue; 
         }
 
-        <MudCarouselItem @key="file.value" Style="width:auto;">
-            @CreateDynamicComponent(file.value, file.i == SelectedIndex)
+        <MudCarouselItem @key="file.value" Class="@(file.i == SelectedIndex ? "mud-carousel-item-active" : "")">
+            @if (file.i == SelectedIndex)
+            {
+                @CreateDynamicComponent(file.value)
+            }
         </MudCarouselItem>
     }
 </MudCarousel>
 
 @inject ILogger<FileViewerCarousel> Logger;
+@inject IJSRuntime JSRuntime;
 @code {
     [Parameter]
     public bool ShowUnsupportedFiles { get; set; }
@@ -35,35 +40,28 @@
     [Parameter]
     public int MaxHeight { get; set; } 
 
-    private string _carouselStyle = "height: 350px;"; // Initial height
     public int SelectedIndex { get; set; }
 
-    // 1. CREATE a handler that receives the height from the child.
-    private void OnChildHeightMeasured(int newHeight)
+    private int _currentHeight = 400;
+
+    private void HandleHeightMeasured(int height)
     {
-        if (newHeight > 0)
+        if (height > 0 && height != _currentHeight)
         {
-            _carouselStyle = $"height: {Math.Min(newHeight, MaxHeight)}px;";
+            _currentHeight = height;
             StateHasChanged();
         }
     }
 
-    // 2. MODIFY the dynamic component creator to pass the handler.
-    private RenderFragment CreateDynamicComponent(FilePathListing file, bool isSelected)
+    private RenderFragment CreateDynamicComponent(FilePathListing file)
     {
-        // Only render the component if it is the selected one to get its height
-        if (!isSelected) return builder => { };
-
         return builder =>
         {
             Type componentType = FileViewerFactory.GetViewerComponent(file.OriginalName);
             builder.OpenComponent(0, componentType);
             builder.AddAttribute(1, "File", file);
-
-            // Pass the callback method to the child's "OnHeightMeasured" parameter.
-            builder.AddAttribute(2, "OnHeightMeasured", EventCallback.Factory.Create<int>(this, OnChildHeightMeasured));
-
+            builder.AddAttribute(2, "OnHeightMeasured", EventCallback.Factory.Create<int>(this, HandleHeightMeasured));
             builder.CloseComponent();
         };
     }
-}
+}