Плеер не показывает нужный фильм без перезагрузки?

Question

[Urope]

Я встроил плеер на сайт, который вызывается по нажатию на кнопку:

<input @bind-value="title"/>
    <div id="chat-bottom-button-right-row">                
         <button @onclick="(() => RunMovie(title))">Chat</button>
    </div>

А вот сам метод:

[Inject]
public IJSRuntime Js { get; set; }
string title;
    
private async Task RunMovie(string title)
{
    await Js.InvokeVoidAsync("kinX").AsTask();
}

Т.е логика такая: я запускаю сайт, ввожу название фильма, нажимаю на кнопку и появляется плеер с фильмом.
Но если я ввожу название другого фильма, плеер начинает воспроизводить тот же фильм. Т.е он будто не видит новые значения и приходится перезагружать страницу, чего мне не хочется делать, т.к это спа.
Мне кажется, что проблема в Js.InvokeVoidAsync() - он как-то странно работает

Answer 1

[Urope]

Blazor контролирует DOM-дерево и js, который применяется для этого плеера, наглым образом вторгается в это DOM-дерево, втыкая разметку, а потом кеширует это. Blazor во время рендера старается как можно меньше времени работать с домом, поэтому использует подкапотный итератор элементов.

public RenderFragment BuildPlayer() => builder =>
{
     unchecked
     {
         builder.OpenElement(iterator++, "div");
         builder.AddAttribute(iterator++, "Id", "video");
         builder.OpenElement(iterator++, "div");
         builder.AddAttribute(iterator++, "Id", "kin-x");
         builder.AddAttribute(iterator++, "data-height", "640");
         builder.AddAttribute(iterator++, "data-title", Movie?.Title);
         builder.CloseElement();
         builder.CloseElement();
     }
};

В нормальной ситуации, тут надо писать руками ( 0 1 2 3 4 5 6 7 8 ). Это делается для того, чтобы выдать id для куска дома. И когда что-то изменится, blazor рассчитал, что изменилось и изменил только это. В нормальной ситуации - это было бы преступление такое писать, но в данном случае js вмешивается в дом, поэтому приходится портить оптимизацию для этого участка.