Image component up to date with other brach

Author: rolandVi

src/Components/Web.JS/src/Rendering/BinaryMedia.ts

@@ -29,6 +29,8 @@ export class BinaryMedia {
 
   private static observer: MutationObserver | null = null;
 
+  private static controllers: WeakMap<HTMLElement, AbortController> = new WeakMap();
+
   private static initializeObserver(): void {
     if (this.observer) {
       return;
@@ -96,6 +98,16 @@ export class BinaryMedia {
       this.loadingElements.delete(el);
       this.activeCacheKey.delete(el);
     }
+    // Abort any in-flight stream tied to this element
+    const controller = this.controllers.get(el);
+    if (controller) {
+      try {
+        controller.abort();
+      } catch {
+        // ignore
+      }
+      this.controllers.delete(el);
+    }
   }
 
   /**
@@ -115,6 +127,20 @@ export class BinaryMedia {
 
     this.initializeObserver();
 
+    // If there was a previous different key for this element, abort its in-flight operation
+    const previousKey = this.activeCacheKey.get(element);
+    if (previousKey && previousKey !== cacheKey) {
+      const prevController = this.controllers.get(element);
+      if (prevController) {
+        try {
+          prevController.abort();
+        } catch {
+          // ignore
+        }
+        this.controllers.delete(element);
+      }
+    }
+
     this.activeCacheKey.set(element, cacheKey);
 
     try {
@@ -180,6 +206,10 @@ export class BinaryMedia {
   ): Promise<string | null> {
     this.loadingElements.add(element);
 
+    // Create and track an AbortController for this element
+    const controller = new AbortController();
+    this.controllers.set(element, controller);
+
     const readable = await streamRef.stream();
     let displayStream = readable;
 
@@ -196,35 +226,49 @@ export class BinaryMedia {
 
     const chunks: Uint8Array[] = [];
     let bytesRead = 0;
+    let aborted = false;
+    let resultUrl: string | null = null;
 
-    for await (const chunk of this.iterateStream(displayStream)) {
-      if (this.activeCacheKey.get(element) !== cacheKey) {
-        return null;
-      }
-
-      chunks.push(chunk);
-      bytesRead += chunk.byteLength;
+    try {
+      for await (const chunk of this.iterateStream(displayStream, controller.signal)) {
+        if (controller.signal.aborted) { // Stream aborted due to a new setImageAsync call with a key change
+          aborted = true;
+          break;
+        }
+        chunks.push(chunk);
+        bytesRead += chunk.byteLength;
 
-      if (totalBytes) {
-        const progress = Math.min(1, bytesRead / totalBytes);
-        element.style.setProperty('--blazor-media-progress', progress.toString());
+        if (totalBytes) {
+          const progress = Math.min(1, bytesRead / totalBytes);
+          element.style.setProperty('--blazor-media-progress', progress.toString());
+        }
       }
-    }
 
-    if (bytesRead === 0) {
-      if (typeof totalBytes === 'number' && totalBytes > 0) {
-        throw new Error('Stream was already consumed or at end position');
+      if (!aborted) {
+        if (bytesRead === 0) {
+          if (typeof totalBytes === 'number' && totalBytes > 0) {
+            throw new Error('Stream was already consumed or at end position');
+          }
+          resultUrl = null;
+        } else {
+          const combined = this.combineChunks(chunks);
+          const blob = new Blob([combined], { type: mimeType });
+          const url = URL.createObjectURL(blob);
+          this.setUrl(element, url, cacheKey, targetAttr);
+          resultUrl = url;
+        }
+      } else {
+        resultUrl = null;
       }
-      return null;
+    } finally {
+      if (this.controllers.get(element) === controller) {
+        this.controllers.delete(element);
+      }
+      this.loadingElements.delete(element);
+      element.style.removeProperty('--blazor-media-progress');
     }
 
-    const combined = this.combineChunks(chunks);
-    const blob = new Blob([combined], { type: mimeType });
-    const url = URL.createObjectURL(blob);
-
-    this.setUrl(element, url, cacheKey, targetAttr);
-
-    return url;
+    return resultUrl;
   }
 
   private static combineChunks(chunks: Uint8Array[]): Uint8Array {
@@ -291,23 +335,35 @@ export class BinaryMedia {
     return cache;
   }
 
-  private static async *iterateStream(stream: ReadableStream<Uint8Array>): AsyncGenerator<Uint8Array, void, unknown> {
+  private static async *iterateStream(stream: ReadableStream<Uint8Array>, signal?: AbortSignal): AsyncGenerator<Uint8Array, void, unknown> {
     const reader = stream.getReader();
+    let finished = false;
     try {
       while (true) {
+        if (signal?.aborted) {
+          try {
+            await reader.cancel();
+          } catch {
+            // ignore
+          }
+          return;
+        }
         const { done, value } = await reader.read();
         if (done) {
+          finished = true;
           return;
         }
         if (value) {
           yield value;
         }
       }
     } finally {
-      try {
-        await reader.cancel();
-      } catch {
-        // ignore
+      if (!finished) {
+        try {
+          await reader.cancel();
+        } catch {
+          // ignore
+        }
       }
       try {
         reader.releaseLock?.();

src/Components/Web/src/Media/MediaComponentBase.cs

@@ -1,7 +1,7 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
-using System.Diagnostics.CodeAnalysis;
+using System.Diagnostics;
 using Microsoft.AspNetCore.Components.Rendering;
 using Microsoft.Extensions.Logging;
 using Microsoft.JSInterop;
@@ -38,7 +38,7 @@ public abstract partial class MediaComponentBase : IComponent, IHandleAfterRende
     /// <summary>
     /// Gets the reference to the rendered HTML element for this media component.
     /// </summary>
-    [DisallowNull] protected ElementReference? Element { get; set; }
+    protected ElementReference? Element { get; set; }
 
     /// <summary>
     /// Gets or sets the JS runtime used for interop with the browser to materialize media object URLs.
@@ -75,7 +75,7 @@ public abstract partial class MediaComponentBase : IComponent, IHandleAfterRende
     /// <summary>
     /// Gets or sets the media source.
     /// </summary>
-    [Parameter] public MediaSource? Source { get; set; }
+    [Parameter, EditorRequired] public required MediaSource Source { get; set; }
 
     /// <summary>
     /// Unmatched attributes applied to the rendered element.
@@ -97,14 +97,19 @@ Task IComponent.SetParametersAsync(ParameterView parameters)
 
         parameters.SetParameterProperties(this);
 
+        if (Source is null)
+        {
+            throw new InvalidOperationException("Image.Source is required.");
+        }
+
         if (!_initialized)
         {
             Render();
             _initialized = true;
             return Task.CompletedTask;
         }
 
-        if (Source != null && !string.Equals(previousSource?.CacheKey, Source.CacheKey, StringComparison.Ordinal))
+        if (!HasSameKey(previousSource, Source))
         {
             Render();
         }
@@ -114,26 +119,24 @@ Task IComponent.SetParametersAsync(ParameterView parameters)
 
     async Task IHandleAfterRender.OnAfterRenderAsync()
     {
-        if (!IsInteractive || Source == null)
+        var source = Source;
+        if (!IsInteractive || source is null)
         {
             return;
         }
 
-        if (_currentSource != null && string.Equals(_currentSource.CacheKey, Source.CacheKey, StringComparison.Ordinal))
+        if (_currentSource != null && HasSameKey(_currentSource, source))
         {
             return;
         }
 
-        try { _loadCts?.Cancel(); } catch { }
-        _loadCts?.Dispose();
-        _loadCts = new CancellationTokenSource();
-        var token = _loadCts.Token;
-
-        _currentSource = Source;
+        CancelPreviousLoad();
+        var token = ResetCancellationToken();
 
+        _currentSource = source;
         try
         {
-            await LoadMediaAsync(Source, token);
+            await LoadMediaAsync(source, token);
         }
         catch (OperationCanceledException)
         {
@@ -142,7 +145,9 @@ async Task IHandleAfterRender.OnAfterRenderAsync()
 
     private void Render()
     {
-        if (!_hasPendingRender && _renderHandle.IsInitialized)
+        Debug.Assert(_renderHandle.IsInitialized);
+
+        if (!_hasPendingRender)
         {
             _hasPendingRender = true;
             _renderHandle.Render(BuildRenderTree);
@@ -247,8 +252,6 @@ private async Task LoadMediaAsync(MediaSource? source, CancellationToken cancell
         }
         catch (OperationCanceledException)
         {
-            // bubble up to caller
-            throw;
         }
         catch (Exception ex)
         {
@@ -268,14 +271,33 @@ public ValueTask DisposeAsync()
         if (!_isDisposed)
         {
             _isDisposed = true;
+            CancelPreviousLoad();
+        }
+        return new ValueTask();
+    }
 
-            // Cancel any pending operations
-            try { _loadCts?.Cancel(); } catch { }
-            _loadCts?.Dispose();
-            _loadCts = null;
+    private void CancelPreviousLoad()
+    {
+        try
+        {
+            _loadCts?.Cancel();
+        }
+        catch
+        {
         }
+        _loadCts?.Dispose();
+        _loadCts = null;
+    }
 
-        return new ValueTask();
+    private CancellationToken ResetCancellationToken()
+    {
+        _loadCts = new CancellationTokenSource();
+        return _loadCts.Token;
+    }
+
+    private static bool HasSameKey(MediaSource? a, MediaSource? b)
+    {
+        return a is not null && b is not null && string.Equals(a.CacheKey, b.CacheKey, StringComparison.Ordinal);
     }
 
     private static partial class Log

src/Components/Web/src/PublicAPI.Unshipped.txt

@@ -23,6 +23,7 @@ Microsoft.AspNetCore.Components.Web.Image.ImageSource.Stream.get -> System.IO.St
 Microsoft.AspNetCore.Components.Web.Internal.IInternalWebJSInProcessRuntime.InvokeJS(in Microsoft.JSInterop.Infrastructure.JSInvocationInfo invocationInfo) -> string!
 Microsoft.AspNetCore.Components.Web.Media.Image
 Microsoft.AspNetCore.Components.Web.Media.Image.Image() -> void
+Microsoft.AspNetCore.Components.Web.Media.MediaComponentBase.Source.get -> Microsoft.AspNetCore.Components.Web.Media.MediaSource!
 Microsoft.AspNetCore.Components.Web.Media.Video
 Microsoft.AspNetCore.Components.Web.Media.Video.Video() -> void
 Microsoft.AspNetCore.Components.Web.Media.MediaComponentBase
@@ -39,7 +40,6 @@ Microsoft.AspNetCore.Components.Web.Media.MediaComponentBase.Logger.get -> Micro
 Microsoft.AspNetCore.Components.Web.Media.MediaComponentBase.LoggerFactory.get -> Microsoft.Extensions.Logging.ILoggerFactory!
 Microsoft.AspNetCore.Components.Web.Media.MediaComponentBase.LoggerFactory.set -> void
 Microsoft.AspNetCore.Components.Web.Media.MediaComponentBase.MediaComponentBase() -> void
-Microsoft.AspNetCore.Components.Web.Media.MediaComponentBase.Source.get -> Microsoft.AspNetCore.Components.Web.Media.MediaSource?
 Microsoft.AspNetCore.Components.Web.Media.MediaComponentBase.Source.set -> void
 Microsoft.AspNetCore.Components.Web.Media.MediaSource
 Microsoft.AspNetCore.Components.Web.Media.MediaSource.CacheKey.get -> string!
@@ -50,4 +50,5 @@ Microsoft.AspNetCore.Components.Web.Media.MediaSource.MimeType.get -> string!
 Microsoft.AspNetCore.Components.Web.Media.MediaSource.Stream.get -> System.IO.Stream!
 override Microsoft.AspNetCore.Components.Forms.InputHidden.BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder! builder) -> void
 override Microsoft.AspNetCore.Components.Forms.InputHidden.TryParseValueFromString(string? value, out string? result, out string? validationErrorMessage) -> bool
+virtual Microsoft.AspNetCore.Components.Routing.NavLink.ShouldMatch(string! uriAbsolute) -> bool
 virtual Microsoft.AspNetCore.Components.Web.Media.MediaComponentBase.BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder! builder) -> void

src/Components/Web/test/Media/ImageTest.cs

@@ -70,18 +70,22 @@ await renderer.RenderRootComponentAsync(id, ParameterView.FromDictionary(new Dic
     }
 
     [Fact]
-    public async Task NullSource_DoesNothing()
+    public async Task NullSource_Throws()
     {
         var js = new FakeMediaJsRuntime(cacheHit: false);
         using var renderer = CreateRenderer(js);
         var comp = (Image)renderer.InstantiateComponent<Image>();
         var id = renderer.AssignRootComponentId(comp);
 
-        await renderer.RenderRootComponentAsync(id, ParameterView.FromDictionary(new Dictionary<string, object?>
+        await Assert.ThrowsAsync<InvalidOperationException>(async () =>
         {
-            [nameof(Image.Source)] = null,
-        }));
+            await renderer.RenderRootComponentAsync(id, ParameterView.FromDictionary(new Dictionary<string, object?>
+            {
+                [nameof(Image.Source)] = null,
+            }));
+        });
 
+        // Ensure no JS interop calls were made
         Assert.Equal(0, js.TotalInvocationCount);
     }