Cannot change the source of loaded player

[Seekeer]

I have defined player like that in Angular App:

<vm-player (vmPlaybackEnded)="videoEnded()" #player >
  <vm-video cross-origin="true" >
    <source src="{{videoURL}}" type="video/mp4" />
  </vm-video>

Everything is fine, inspite of the fact that when Im changing videoURL property - I couldnt make player to play video from new source. I got following HTML, where api/Files/getFileById?fileId=6177 is old video, which is still @playing, getRandomFileBySeriesId?seriesId=5 is a new one and this request is never called.

<source _ngcontent-loi-c159="" type="video/mp4" data-vs="http://192.168.1.55:51951/api/Files/getFileById?fileId=6177" src="http://192.168.1.55:51951/api/Files/getRandomFileBySeriesId?seriesId=5">

When I'm changing source this way in ordinary HTML

[jbjhjm]

I'm experiencing this issue too, however only since I migrated the project to angular 13 / Ivy. Will share here if I find something.

Edit: I have to correct myself. The issue is already present in our live built that still uses angular 11 + View Engine. I'm sure this was working fine earlier... but I cannot reproduce working state.

[jbjhjm]

Running these lines after src has been updated shows that the provider data actually changes:

player.getProvider().then(prov=>{
            console.log(prov)
        })

So for me this is a buggy behavior and should be fixed. I suspect that vime has issues with updated src attributes and expects the element to be fully replaced instead to trigger change handling. I'm right now trying to find a workaround to fix it temporarily.

[jbjhjm]

ALright, the only workaround that I was able to find is to remove and rebuild the whole vime component:

// ng template
`<vm-player *ngIf="url" #player playsinline >
    <vm-video cross-origin="true" #video>
        <source [src]="url" type="video/mp4" />
    </vm-video>
</vm-player>
`
class VideoPlayer {
    loaded = false;
    url: string;

    @Input('url') set _url(url:string) {
        if(!this.loaded) {
            // assign url immediately on first assignment
            this.url = url;
            this.loaded = true; 
        } else {
            // set url to null to remove player through ngIf, 
            //then assign new url in next tick to create new vime instance
            this.url = null; 
            setTimeout(()=>{
                this.url = url;
            },1);
        }
    }

}

[Seekeer]

@jbjhjm Thanks, that worked!