Invalid Vimeo URL causes TypeError in player.es.js

[JaykrishnaArhamlabs]

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

1. Provide a list of Vimeo URLs where some URLs are all valid.
2. Attempt to load these URLs using the Vimeo player.
3. 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.

[rkrishnan8594]

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.

[iangoodall]

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.

Codepen of the issue.

[Ihor-Karpyn]

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.

[Ihor-Karpyn]

There is an example of an issue. Please take a look.

code sandbox

CC @rkrishnan8594

[iangoodall]

Thanks for creating these GIFs. They illustrate the issue perfectly :)

[iangoodall]

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

[rkrishnan8594]

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.

[rkrishnan8594]

This issue should now be fixed.

[iangoodall]

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.

[hoopsalytics]

Also still broken for me. Using player.js to load a video like this:
https://player.vimeo.com/video/912088535?h=37366bc1ae

[arturor1990]

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.