Invalid Vimeo URL causes TypeError in player.es.js
JaykrishnaArhamlabs opened this issue · comments
Expected Behavior
The Vimeo player should validate the URL before attempting to load it. If the URL is invalid, an appropriate error message should be logged, and the user should be informed without the script crashing.
Actual Behavior
When an valid Vimeo URL is provided, after the onChange on list of items with valid vimeo urls , the following error is thrown:
Uncaught (in promise) TypeError: The url must be a valid Vimeo url.
at player.es.js:1255:1
at Array.forEach ()
at processData (player.es.js:1254:1)
at _this._onMessage (player.es.js:2168:1)
Steps to Reproduce
- Provide a list of Vimeo URLs where some URLs are all valid.
- Attempt to load these URLs using the Vimeo player.
- Click or change the item to trigger the player loading.
Package Version:
"@u-wave/react-vimeo": "^0.9.10",
"@vimeo/player": "^2.23.0",
Temporary Solution:
Adding a setTimeout in the onChange event to reload or update the player component using a React hook like useState.
Hi @JaykrishnaArhamlabs - can you provide a CodePen or JSFiddle (or some other test page) where this issue can be reproduced? It's not clear to me what the issue is with the URL validation that is already performed.
Hi @rkrishnan8594. We are having the same issue because we created a little app that shows different videos and their chapters. Noticed that it stopped working yesterday with the same error. Occurs when we use the loadVideo() function with the URL that is supplied from the share link in Vimeo.
Here is a Codepen of the issue in isolation for us. You can see it loads the originally linked video but the error is thrown in the console after loadVideo() is called.
Hi, we are encountering the same issue. I'm not sure when it started, but it seems to have been happening since Friday.
We have a list of videos and buttons that can change the URLs that we pass to Vimeo using . When the URL in the React state changes, we get the same error.
Thanks for creating these GIFs. They illustrate the issue perfectly :)
To add more clarity here, it also occurs in the Vimeo API Demo.
Here's a screenshot after I've put in the URL to the video which is https://vimeo.com/864270837
Hi all - thanks for reporting this issue. While we work on deploying a fix, my recommendation would be to provide video IDs or player.vimeo.com/video/12345678 URLs to the loadVideo() method, as these are officially supported argument types.
This issue should now be fixed.
Hi @rkrishnan8594 , just wanted to note that your previous comment before the issue is marked as fixed mentioned using the URL format player.vimeo.com/video/12345678 for example. We implemented this as a fix on our end and now since you've marked this issue as fixed, our fix which changed our use of the standard URL to the player URL is no longer working. This is occurring on the Vimeo Player API demo site
For our video https://player.vimeo.com/video/545813409 for example, it works now on the API site with https://vimeo.com/545813409 but throws the error when I use the player URL. I've taken a screenshot to demonstrate.
Also still broken for me. Using player.js to load a video like this:
https://player.vimeo.com/video/912088535?h=37366bc1ae
same problem here with all the videos on my app (this one for example https://player.vimeo.com/video/935732439?h=88bdbf3431) TypeError: The url must be a valid Vimeo url.
This issue should now be fixed.
Hi @rkrishnan8594, the issue appeared fix for a while and the above comments were correct that using the https://player.vimeo.com/video/123456789 style of link did not, but when I checked today the issue as originally reported is back.
Working again for me :)
There is an example of an issue. Please take a look.
What is about this issue? how to resolve this @rkrishnan8594
What is about this issue? how to resolve this
@JaykrishnaArhamlabs Hey, it looks like the team has fixed the issue, and the code in the sandbox is working well.
@rkrishnan8594 Thanks for the help ❤️
What is about this issue? how to resolve this
@JaykrishnaArhamlabs Hey, it looks like the team has fixed the issue, and the code in the sandbox is working well.
@rkrishnan8594 Thanks for the help ❤️
@Ihor-Karpyn can you please send the code sandbox link so I can test exactly what you have implemented which is shown in GIF.
@Ihor-Karpyn can you please send the code sandbox link so I can test exactly what you have implemented which is shown in GIF.
@JaykrishnaArhamlabs You can find link to code sand box in this message