Preview: I'm building a workout application where users select exercises for their plan. A link to YouTube is tied to a video icon associated with the selected exercise. The YouTube url for a selected exercise points to a unique video. Initially, this worked. After a couple of days, an exception was thrown with no relevant exception message (something like xyH2Dc) when trying to go to the exact same url as before. Alright, so I replaced the url value for an associated exercise in the api I was calling. I changed it to https://google.com. This worked and I could access google - no problem. At this point I figured it had something to do with the way YouTube was rendering the video? Fine, instead of using links to the actual videos, I just used the link to the query result page of YouTube. This would be the link to a YouTube page after searching something like "Squat Tutorial" or "Deadlift Tutorial." I replaced all the links associated with every workout in the API. This worked. Until today (2-3 weeks later). This time, there is an exception message.
NOTE: While all this is going on, after clicking "Continue" in Visual Studio 1+ times, I can still navigate to the YouTube video and the application can proceed as normal.
Goal: Navigate to YouTube Video from App.
Problem: Receiving the following exception:
TypeError: Failed to execute 'query' on 'Permissions': Illegal invocation
The Call Stack looks like this:
What I've Tried:
- Used a href tag within component
- Used NavigationManager NavigateTo method within component
- Used IJSRuntime, which looks like this:
public async Task GoToNavigationLink(string url) { try { await jsRuntime.InvokeAsync<object>("open", url, "_blank"); } catch(NavigationException e) { Console.WriteLine(e.Message); } }and within the component:
<a class="text-decoration-none col-1 d-flex justify-content-center align-items-center" @onclick="() => (navLinksManager.GoToNavigationLink(listOfUserExercisesInSelectedDay[j].VideoUrl))"><i class="fa-solid fa-video fa-lg"></i></a>All of the above attempts gave the same exception.
Moving Forward: If you have the answer, great. If this is indeed a problem with how JavaScript is working with Blazor, please expand on the relationship between the two.