@page "/" @inject IJSRuntime theJavaScriptEngine; <!-- Buttons for interaction --> <button @onclick="StartVideo">Start video</button> <button @onclick="RepeatExcercises">Repeat Excercises</button> <button @onclick="ModifyUrl"> Modify Url (of Two Sided Videos)</button> <!-- Video Element --> <div class="align-content-center"> <video id="videoTagId" autoplay width="1080" height="720" @onended="NextVideo"> <source id="videoSourceId" src="@Videos[selected_video_id].CurrentUrl" type="video/mp4"/> </video> </div> <!-- Developer output --> @foreach(var v in Videos) { <li><code>Name: </code>@v.Name</li> <li><code>Video Current URl</code>@v.CurrentUrl</li> <li><code>Video URl 1</code>@v.Url1</li> <li><code>Video URL 2</code>@v.Url2</li> <li><code>Two Sided</code>@v.TwoSided</li> <li>...</li> } @code { public int selected_video_id { get; set; } = 0; public IList<ExcerciseVideo>? Videos; // The list we use to store the Videos public int Repetitions { get; set; } = 2; // we want each exercise two times public string sidePlayNext {get; set; } = "left"; public class ExcerciseVideo { public string Name { get; set; } public string CurrentUrl { get; set; } public string Url1 { get; set; } public string Url2{ get; set; } // right hand side of each excercise public bool TwoSided { get; set; } } protected override void OnInitialized() { Videos = new List<ExcerciseVideo>() { new ExcerciseVideo { Name="Excercise A", CurrentUrl = "https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4", Url1="https://backtrainingapp.blob.core.windows.net/backtrainingvideos/20220220_184806[1].mp4", Url2="https://backtrainingapp.blob.core.windows.net/backtrainingvideos/20220220_184806[1].mp4", TwoSided=false}, new ExcerciseVideo { Name="Excercise B", CurrentUrl = "https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4", Url1="https://backtrainingapp.blob.core.windows.net/backtrainingvideos/20220220_184632[1].mp4", Url2="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4", TwoSided=true} }; } public void RepeatExcercises() { // obtain values of the Video List int old_video_count = Videos.Count; int my_index = 0; // Create a copy of the Video List IList<ExcerciseVideo> originalVideos = new List<ExcerciseVideo>(Videos); Videos.Clear(); // Clear the list --> we need a clean list for item insertion (in order to not have old items included) // we loop over the list to repeat Videos // and insert them for (int l = 0; l < old_video_count; l++) { for (int repeats = 0; repeats < Repetitions; repeats++) { Videos.Insert(my_index, originalVideos[l]); my_index++; // increment the index } } StateHasChanged(); // Make sure that the changes are updated } // Modify the Url of twoSided Videos public void ModifyUrl() { for (int m = 0; m < Videos.Count; m++) { // check whether a video is twosided if (Videos[m].TwoSided == true) { // check whether left side should be played // set Url1 in this case as value if (sidePlayNext == "left") { Videos[m].CurrentUrl = Videos[m].Url1; Console.WriteLine(sidePlayNext); Console.WriteLine(Videos[m].CurrentUrl); sidePlayNext = "right"; } // check whether right side should be played // set Url2 in this case as value else if (sidePlayNext == "right") { Videos[m].CurrentUrl = Videos[m].Url2; Console.WriteLine(sidePlayNext); Console.WriteLine(Videos[m].CurrentUrl); sidePlayNext = "left"; } } // All other cases in which no two sided videos are present // --> Current URl should correspond to Url1 else if (Videos[m].TwoSided == false) { Videos[m].CurrentUrl = Videos[m].Url1; Console.WriteLine("No Direction"); Console.WriteLine(Videos[m].CurrentUrl); } } StateHasChanged(); } protected void StartVideo() { selected_video_id = 0; theJavaScriptEngine.InvokeVoidAsync("loadVideo"); } protected void NextVideo() { selected_video_id = selected_video_id + 1; theJavaScriptEngine.InvokeVoidAsync("loadVideo"); } }