Vimeo Product Video Not Found

gcampedelli commented 3 years ago

Preconditions (*)

It was previoulys working, tested in Magento 2.4.0.

Steps to reproduce (*)

So upgrade to 2.4.1. Do not upgrade and remain in 2.4.0 in another cloned enviroment
Go to product page
Insert a product video in product page using the regular insert video button. It previously worked.
Few days later try to do it again. Vimeo returns 404
Try to upload to another Vimeo account to check if a setting may be blocking. No, it returns 404
curl -i https://vimeo.com/videoId. It returns 200 and a response with json and ajax call
Try to get in browser Vimeo dowload a file a does not print information on client
Try the same in postman, it returns Json
Try to debug Magento
Check if it is Cors. Vimeo Cors is declared in Csp policy

Expected result (*)

1.Insert url in Product Video and it is found

Video displays in fotorama

Actual result (*)

Video not found. Unable to display Vimeo on Fotorama

Please provide Severity assessment for the Issue as Reporter. This information will help during Confirmation and Issue triage processes.

[ ] Severity: S0 - Affects critical data or functionality and leaves users without workaround.
[ ] Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
[ ] Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
[ ] Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
[X ] Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

m2-assistant[bot] commented 3 years ago

Hi @gcampedelli. Thank you for your report. To help us process this issue please make sure that you provided the following information:

Summary of the issue
Information on your environment
Steps to reproduce
Expected and actual results

Please make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, please, add a comment to the issue:

@magento give me 2.4-develop instance - upcoming 2.4.x release

For more details, please, review the Magento Contributor Assistant documentation.

Please, add a comment to assign the issue: @magento I am working on this

Join Magento Community Engineering Slack and ask your questions in #github channel.

:warning: According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

:clock10: You can find the schedule on the Magento Community Calendar page.

:telephone_receiver: The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, please join the Community Contributions Triage session to discuss the appropriate ticket.

:movie_camera: You can find the recording of the previous Community Contributions Triage on the Magento Youtube Channel

:pencil2: Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

hostep commented 3 years ago

A colleague of mine just reported the same error today and tested various Magento versions: 2.3.2, 2.3.5 & 2.3.6. I'm guessing something changed at Vimeo's side and Magento is no longer compatible with the change.

Somebody will need to debug and figure out what happens and how it can be corrected in Magento to make it work again.

Or maybe it's a problem at Vimeo itself and we should just wait a few hours until it gets resolved, that might be an option as well...

Screenshot of problem:

m2-assistant[bot] commented 3 years ago

Hi @engcom-Delta. Thank you for working on this issue. In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

[ ] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
Details
If the issue has a valid description, the label Issue: Format is valid will be added to the issue automatically. Please, edit issue description if needed, until label Issue: Format is valid appears.
[ ] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue. If the report is valid, add Issue: Clear Description label to the issue by yourself.
[ ] 3. Add Component: XXXXX label(s) to the ticket, indicating the components it may be related to.
[ ] 4. Verify that the issue is reproducible on 2.4-develop branch
Details
- Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
- If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
- If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
[ ] 5. Add label Issue: Confirmed once verification is complete.
[ ] 6. Make sure that automatic system confirms that report has been added to the backlog.

magento-engcom-team commented 3 years ago

:white_check_mark: Confirmed by @engcom-Delta Thank you for verifying the issue. Based on the provided information internal tickets MC-40467 were created

Issue Available: @engcom-Delta, You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself.

andy-aware commented 3 years ago

Just checked this by modifying the following file:

vendor/magento/module-product-video/view/adminhtml/web/js/get-video-information.js

Just for sanity, removing the www from the URL doesn't make a difference.

url: 'https://vimeo.com/api/v2/video/' + id + '.json',

The API request still fails and we still get the same error.

novikor commented 3 years ago

Applying the patch fixes the problem locally:

Index: app/code/Magento/ProductVideo/view/adminhtml/web/js/get-video-information.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/code/Magento/ProductVideo/view/adminhtml/web/js/get-video-information.js b/app/code/Magento/ProductVideo/view/adminhtml/web/js/get-video-information.js
--- a/app/code/Magento/ProductVideo/view/adminhtml/web/js/get-video-information.js  (revision 49d4a2fd48c750e97846140b68ea8e63827610b7)
+++ b/app/code/Magento/ProductVideo/view/adminhtml/web/js/get-video-information.js  (date 1611072804688)
@@ -539,7 +539,7 @@
                     );
                 } else if (type === 'vimeo') {
                     $.ajax({
-                        url: 'https://www.vimeo.com/api/v2/video/' + id + '.json',
+                        url: 'https://vimeo.com//api/v2/video/' + id + '.json',
                         dataType: 'jsonp',
                         data: {
                             format: 'json'

omaxmo commented 3 years ago

@magento I am working on this

gcampedelli commented 3 years ago

Just checked this by modifying the following file:

vendor/magento/module-product-video/view/adminhtml/web/js/get-video-information.js

Just for sanity, removing the www from the URL doesn't make a difference.

url: 'https://vimeo.com/api/v2/video/' + id + '.json',

The API request still fails and we still get the same error.

I did it and it just changed the 301 redirect to 200 redirect but still no video found

gcampedelli commented 3 years ago

Hi I've got it this way

       ```
   /**
             * @private
             */
            function logResults(json){
                console.log(json);
            }
            function _onVimeoLoaded(data) {
                var tmp,
                    respData;

                if (data.length < 1) {
                    this._onRequestError($.mage.__('Video not found'));

                    return null;
                }
                tmp = data[0];
                respData = {
                    duration: this._formatVimeoDuration(tmp.duration),
                    channel: tmp['user_name'],
                    channelId: tmp['user_url'],
                    uploaded: tmp['upload_date'],
                    title: tmp.title,
                    description: tmp.description.replace(/(&nbsp;|<([^>]+)>)/ig, ''),
                    thumbnail: tmp['thumbnail_large'],
                    videoId: videoInfo.id,
                    videoProvider: videoInfo.type
                };
                this._videoInformation = respData;
                this.element.trigger(this._UPDATE_VIDEO_INFORMATION_TRIGGER, respData);
                this.element.trigger(this._FINISH_UPDATE_INFORMATION_TRIGGER, true);
            }

            type = videoInfo.type;
            id = videoInfo.id;

            if (type === 'youtube') {
                googleapisUrl = 'https://www.googleapis.com/youtube/v3/videos?id=' +
                    id +
                    '&part=snippet,contentDetails&key=' +
                    this.options.youtubeKey + '&alt=json&callback=?';
                $.getJSON(googleapisUrl,
                    {
                        format: 'json'
                    },
                    $.proxy(_onYouTubeLoaded, self)
                ).fail(
                    function () {
                        self._onRequestError('Video not found');
                    }
                );
            } else if (type === 'vimeo') {
                $.ajax({
                    url: 'https://vimeo.com/api/v2/video/' + id + '.json',
                    dataType: 'jsonp',
                    jsonpCallback: "logResults",
                    data: {
                        format: 'json'
                    },
                    timeout: 5000,
                    success:  $.proxy(_onVimeoLoaded, self),

                    /**
                     * @private
                     */


Any better ideas? I've added a function

 " function logResults(json){
                    console.log(json);
                }"

and added callback to  "$.ajax({
                        url: 'https://vimeo.com/api/v2/video/' + id + '.json',
                        dataType: 'jsonp',
                        **jsonpCallback: "logResults",**
                        data: {
                            format: 'json'
                        },"

It got the video
![image](https://user-images.githubusercontent.com/7084395/105107434-e3e59400-5a96-11eb-8641-3ae9da877f6e.png)
And there is a log

![image](https://user-images.githubusercontent.com/7084395/105107450-efd15600-5a96-11eb-9893-d4759705a54b.png)

omaxmo commented 3 years ago

@gcampedelli you can look at the pull request https://github.com/magento/magento2/pull/31767 https://github.com/magento/magento2/pull/31767/files

gcampedelli commented 3 years ago

@gcampedelli you can look at the pull request #31767 https://github.com/magento/magento2/pull/31767/files

I did I'm proposing another PR as I need it to 2.3.5 also

gcampedelli commented 3 years ago

@magento I am working on this

m2-assistant[bot] commented 3 years ago

Hi @gcampedelli! :wave: Thank you for collaboration. Only members of Community Contributors Team are allowed to be assigned to the issue. Please use @magento add to contributors team command to join Contributors team.

gcampedelli commented 3 years ago

I have a PR

@magento add to contributors team

m2-assistant[bot] commented 3 years ago

Hi @gcampedelli! :wave: Thank you for joining. Please accept team invitation :point_right: here :point_left: and add your comment one more time.

gcampedelli commented 3 years ago

--- get-video-information.js    2021-01-20 02:55:31.728803743 +0000
+++ get-video-information-diff.js   2021-01-20 02:54:54.724128474 +0000
@@ -316,7 +316,7 @@
                 }

                 src = 'https://player.vimeo.com/video/' +
-                    this._code + '?api=1&player_id=vimeo' +
+                    this._code + '?api=2&player_id=vimeo' +
                     this._code +
                     timestamp +
                     additionalParams;
@@ -493,6 +493,9 @@
                 /**
                  * @private
                  */
+                function jsonResults(json){
+                   return json;
+                }
                 function _onVimeoLoaded(data) {
                     var tmp,
                         respData;
@@ -539,8 +542,9 @@
                     );
                 } else if (type === 'vimeo') {
                     $.ajax({
-                        url: 'https://www.vimeo.com/api/v2/video/' + id + '.json',
+                        url: 'https://vimeo.com/api/v2/video/' + id + '.json',
                         dataType: 'jsonp',
+                        jsonpCallback:"jsonResults",
                         data: {
                             format: 'json'
                         },

@gcampedelli you can look at the pull request #31767 https://github.com/magento/magento2/pull/31767/files

Hi @omaxmo. Your solution may work in my install, but I proposed another PR because of lower Magento2 version facing same problem. Thank you.

omaxmo commented 3 years ago

@gcampedelli Vimeo recommends use oEmbed implementation.

The Simple API was a basic way for users to get public metadata about their albums, channels, groups, users, videos. The URL structure for the Simple API looked like this:

http://vimeo.com/api/v2/album/album_id/request.json
http://vimeo.com/api/v2/channel/channel_name/request.json
http://vimeo.com/api/v2/group/group_name/request.json
http://vimeo.com/api/v2/username/request.json
http://vimeo.com/api/v2/video/video_id.json

**This API is no longer maintained or supported. We recommend developers utilize our oEmbed implementation to get that same metadata for embeddable videos.**

https://vimeo.zendesk.com/hc/en-us/articles/360042975791-Deprecated-APIs-libraries-and-upload-methods

zakdma commented 3 years ago

Bug was fixed ins scope of internal jira ticket MC-40463

ihor-sviziev commented 3 years ago

FYI here is a commit that fixes this issue https://github.com/magento/magento2/commit/f2231f8d953bb650c3462a824716fd8972c6bb6c

orthener commented 3 years ago

FYI here is a commit that fixes this issue f2231f8

Patch file (if it help someone) MC-40463__Vimeo-simple-API-stop-working-as-expected.patch (tested on M2.4.1)

From f2231f8d953bb650c3462a824716fd8972c6bb6c Mon Sep 17 00:00:00 2001
From: Myroslav Dobra <dmaraptor@gmail.com>
Date: Wed, 20 Jan 2021 11:27:26 +0200
Subject: [PATCH] MC-40463: Vimeo simple API stop working as expected

---
 .../module-product-video/etc/csp_whitelist.xml    |  6 ++++++
 .../adminhtml/web/js/get-video-information.js     | 15 ++++++++-------
 lib/web/fotorama/fotorama.js                      |  9 ++++++---
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/vendor/magento/module-product-video/etc/csp_whitelist.xml b/vendor/magento/module-product-video//etc/csp_whitelist.xml
index ca453605710..2e091440330 100644
--- a/vendor/magento/module-product-video/etc/csp_whitelist.xml
+++ b/vendor/magento/module-product-video/etc/csp_whitelist.xml
@@ -14,6 +14,7 @@
                 <value id="google_video" type="host">www.googleapis.com</value>
                 <value id="vimeo" type="host">vimeo.com</value>
                 <value id="www_vimeo" type="host">www.vimeo.com</value>
+                <value id="vimeo_cdn" type="host">*.vimeocdn.com</value>
             </values>
         </policy>
         <policy id="img-src">
@@ -21,5 +22,10 @@
                 <value id="vimeo_cdn" type="host">*.vimeocdn.com</value>
             </values>
         </policy>
+        <policy id="frame-src">
+            <values>
+                <value id="player_vimeo" type="host">player.vimeo.com</value>
+            </values>
+        </policy>
     </policies>
 </csp_whitelist>
diff --git a/vendor/magento/module-product-video/view/adminhtml/web/js/get-video-information.js b/vendor/magento/module-product-video/view/adminhtml/web/js/get-video-information.js
index cb56a085304..4b3c1b7f8ee 100644
--- a/vendor/magento/module-product-video/view/adminhtml/web/js/get-video-information.js
+++ b/vendor/magento/module-product-video/view/adminhtml/web/js/get-video-information.js
@@ -497,20 +497,20 @@ define([
                     var tmp,
                         respData;

-                    if (data.length < 1) {
+                    if (!data) {
                         this._onRequestError($.mage.__('Video not found'));

                         return null;
                     }
-                    tmp = data[0];
+                    tmp = data;
                     respData = {
                         duration: this._formatVimeoDuration(tmp.duration),
-                        channel: tmp['user_name'],
-                        channelId: tmp['user_url'],
+                        channel: tmp['author_name'],
+                        channelId: tmp['author_url'],
                         uploaded: tmp['upload_date'],
                         title: tmp.title,
                         description: tmp.description.replace(/(&nbsp;|<([^>]+)>)/ig, ''),
-                        thumbnail: tmp['thumbnail_large'],
+                        thumbnail: tmp['thumbnail_url'],
                         videoId: videoInfo.id,
                         videoProvider: videoInfo.type
                     };
@@ -539,10 +539,11 @@ define([
                     );
                 } else if (type === 'vimeo') {
                     $.ajax({
-                        url: 'https://www.vimeo.com/api/v2/video/' + id + '.json',
+                        url: 'https://vimeo.com/api/oembed.json',
                         dataType: 'jsonp',
                         data: {
-                            format: 'json'
+                            format: 'json',
+                            url: 'https://vimeo.com/' + id
                         },
                         timeout: 5000,
                         success:  $.proxy(_onVimeoLoaded, self),
diff --git a/lib/web/fotorama/fotorama.js b/lib/web/fotorama/fotorama.js
index 314949bd2f4..f268c9aa736 100644
--- a/lib/web/fotorama/fotorama.js
+++ b/lib/web/fotorama/fotorama.js
@@ -858,13 +858,16 @@ fotoramaVersion = '4.6.4';
             dataFrame.thumbsReady = true;
         } else if (video.type === 'vimeo') {
             $.ajax({
-                url: getProtocol() + 'vimeo.com/api/v2/video/' + video.id + '.json',
+                url: getProtocol() + 'vimeo.com/api/oembed.json',
+                data: {
+                    url: 'https://vimeo.com/' + video.id
+                },
                 dataType: 'jsonp',
                 success: function (json) {
                     dataFrame.thumbsReady = true;
                     updateData(data, {
-                        img: json[0].thumbnail_large,
-                        thumb: json[0].thumbnail_small
+                        img: json[0].thumbnail_url,
+                        thumb: json[0].thumbnail_url
                     }, dataFrame.i, fotorama);
                 }
             });
-- 
2.17.1

MirkoHuf commented 3 years ago

Hi, any help for Magento 2.3.6 available? In 2.3.5-p2 I don't have a app/code/Magento/ProductVideo/Test/Mftf/ActionGroup/AssertProductVideoStorefrontProductPageActionGroup.xml file. I changed all the rest - but it didn't work. I have already cleared the cache and did a "php bin/magento setup:static-content:deploy --theme Magento/backend". But the problem still exist. Thanks in advance.

gcampedelli commented 3 years ago

Hi, any help for Magento 2.3.6 available? In 2.3.5-p2 I don't have a app/code/Magento/ProductVideo/Test/Mftf/ActionGroup/AssertProductVideoStorefrontProductPageActionGroup.xml file. I changed all the rest - but it didn't work. I have already cleared the cache and did a "php bin/magento setup:static-content:deploy --theme Magento/backend". But the problem still exist. Thanks in advance.

Hi, you can try my patch in this topic, or just manually change "get-video-information.js" accordingly.

lewisje commented 2 years ago

@MirkoHuf, I've tried a later PR by @gcampedelli, putting the patched file into Magento_ProductVideo/web/js/ inside of a custom admin theme.

magento / magento2