init

OpenArchival.Blazor.FileViewer/FileViewers/ImageViewer.razor

@@ -5,39 +5,41 @@
 @using MudBlazor
 @using OpenArchival.DataAccess
 
-<div @ref="_imageContainer" style="height:100%; width:100%;">
-    <MudImage Src="@($"/api/files/{File.Id}")"
-              Style="max-height: 100%; max-width: 100%; object-fit: contain;"></MudImage>
+@inject IJSRuntime JSRuntime
+
+<div @ref="_imageContainer" style="height:auto; width:100%; display: flex; justify-content: center;">
+    <img src="@($"/api/files/{File.Id}/large")"
+         @onload="MeasureHeight"
+         style="max-height: 80vh; max-width: 100%; object-fit: contain; display: block;" />
 </div>
 
-@inject IJSRuntime JSRuntime;
 @code {
     [Parameter]
     public required FilePathListing File { get; set; }
-    public int Height { get; private set; }
+    
     [Parameter]
     public EventCallback<int> OnHeightMeasured { get; set; }
 
     private ElementReference _imageContainer;
 
+    private async Task MeasureHeight()
+    {
+        try 
+        {
+            var height = await JSRuntime.InvokeAsync<double>("centerImageAndGetHeight", _imageContainer);
+            await OnHeightMeasured.InvokeAsync((int)Math.Ceiling(height));
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error measuring image height: {ex.Message}");
+        }
+    }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            try
-            {
-                await Task.Delay(50);
-                Height = await JSRuntime.InvokeAsync<int>("centerImageAndGetHeight", _imageContainer);
-
-                if (Height > 0)
-                {
-                    await OnHeightMeasured.InvokeAsync(Height);
-                }
-            }
-            catch (JSException ex)
-            {
-                Console.WriteLine($"[ERROR] JavaScript Interop failed: {ex.Message}");
-            }
+            await MeasureHeight();
         }
     }
 }