MC-40463: Vimeo simple API stop working as expected

Author: zakdma

app/code/Magento/ProductVideo/Test/Mftf/ActionGroup/AssertProductVideoStorefrontProductPageActionGroup.xml

@@ -17,6 +17,7 @@
             <argument name="videoType" type="string" defaultValue="youtube"/>
         </arguments>
 
+        <waitForElementVisible selector="{{StorefrontProductInfoMainSection.productVideo(videoType)}}" stepKey="waitVideoElementVisible"/>
         <seeElement selector="{{StorefrontProductInfoMainSection.productVideo(videoType)}}" stepKey="seeProductVideoDataType"/>
     </actionGroup>
 </actionGroups>

app/code/Magento/ProductVideo/etc/csp_whitelist.xml

@@ -14,12 +14,18 @@
                 <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">
             <values>
                 <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>

app/code/Magento/ProductVideo/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),

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);
                 }
             });