video doesn't change when source is updated

[godmar]

Hi, when the components source property changes, should the video that's displayed be updated?

My test case:

<script>
    import VideoPlayer from 'svelte-video-player';
    let src1 = 'https://res.cloudinary.com/dvm02rtnk/video/upload/v1628057414/blender/HERO_Blender_Grease_Pencil_Showcase_1080p_ctsjpy.mp4';
    let src2 = 'https://res.cloudinary.com/dvm02rtnk/video/upload/v1628057411/blender/Agent_327_Operation_Barbershop_1080p_hf1iq7.mp4';

    let source = "please select a video";
</script>
<h1>svelte-video-player</h1>
<div style="max-width: 40%">
    <div>
    Select
    <button on:click={() => source = src1}>Video 1</button>
    <button on:click={() => source = src2}>Video 2</button>
    </div>
    <div>
    Currently playing: {source}
    </div>
    <VideoPlayer bind:source={source} />
</div>

Pressing a button changes source, but VideoPlayer seems to want to play please select a video (if I do let source = src1 is player the first video, always.

[godmar]

PS: I believe that HTML5 video requires calling .load() when the sources or src changes, see HTMLMediaElement: load method.

The component as currently written doesn't appear to do this. I'm also not sure how to retrieve the <video> element from it, but here's a work around I found works:

<script>
    import VideoPlayer from 'svelte-video-player';
    let src1 = 'https://res.cloudinary.com/dvm02rtnk/video/upload/v1628057414/blender/HERO_Blender_Grease_Pencil_Showcase_1080p_ctsjpy.mp4';
    let src2 = 'https://res.cloudinary.com/dvm02rtnk/video/upload/v1628057411/blender/Agent_327_Operation_Barbershop_1080p_hf1iq7.mp4';

    let source = "please select a video";
    let player;
    function select(k) {
        source = k;
        player.querySelectorAll('video')[0].load();
    }
</script>
<h1>svelte-video-player</h1>
<div style="max-width: 40%">
    <div>
    Select
    <button on:click={() => select(src1)}>Video 1</button>
    <button on:click={() => select(src2)}>Video 2</button>
    </div>
    <div bind:this={player}>
    Currently playing: {source}
        <VideoPlayer source={source} />
    </div>
</div>