Route after index in vec has been played. Yew, Tauri app

[m4rtinsk]

Hi community.
Link to full github repo: https://github.com/martinschultzkristensen/yew-web-app/tree/ChoreoToLoad

When a single index in this fn choreo_videos() has ended I want it to Route to navigator.push(&Route::LoadScreenVideo)

Now it stops after one file has been played.

Do I solve this by giving my VideosListProps a pub on_ended: Callback<()>,??

Now it looks like this:

#[derive(Properties, PartialEq)]
pub struct VideosListProps {
    pub videos: Vec<Video>,
    pub current_index: usize, // New property for the current index
}

#[function_component(VideosListNoLoop)]
pub fn videos_list(
    VideosListProps {
        videos,
        current_index,
    }: &VideosListProps,
) -> Html {
    // The current_index to display the corresponding video
    let current_video = &videos[*current_index];

    html! {
        <div>
            <p>{format!("{}", current_video.title)}</p>
            <video src={format!("{}", current_video.url)} autoplay=true loop=false />
        </div>
    }
}

This is just an examble of my Vec<Video> :

pub fn choreo_videos() -> Vec<Video> {
    vec![
        Video {
            id: 1,
            title: "Performance video nr.1".to_string(),
            url: "static/LetsDuet_中文_countdown.mp4".to_string(),
        },
        Video {
            id: 2,
            title: "Performance video nr.2".to_string(),
            url: "static/siblings_中文_countdown.mp4".to_string(),
        },
        Video {
            id: 3,
            title: "TEST VIDEO 3 CHOREO".to_string(),
            url: "static/Hej-Nihao.mp4".to_string(),
        },
        Video {
            id: 4,
            title: "TEST CHOREO VIDEO 4".to_string(), //<-- update string before registering videoUpdate
            url: "static/AI&Boy.mp4".to_string(),
        },
    ]
}

It's being used in this function component:

#[function_component(ChoreoVideo)]
pub fn choreographic_videos() -> Html { 
    let choreo_videos = choreo_videos(); // <-- Used here!
    let choreo_video_index: usize = use_location()
        .and_then(|l| l.state::<usize>().map(|i| *i))
        .unwrap_or(0);

//
    let choreo_video_index: UseStateHandle<usize> = use_state(|| choreo_video_index);
    let navigator = use_navigator().unwrap();




    let restart_app = Callback::from(move |event: KeyboardEvent| {
        if event.key() == "q" {
            navigator.push(&Route::IntroScreen1);
        }
    });

    html! {
        <div onkeydown={restart_app} tabindex="0">
            <VideosListNoLoop videos={choreo_videos} current_index={*choreo_video_index}/>
        </div>
    }
}

In this function I want to implement

// If the video has finished playing, navigate to the load video action
if *has_video_finished.get() {
navigator.push(&loadscreen_video());

Thank you for advice.