Using fetch instead of xhr, grabbing title for YouTube

src/js/media.js

@@ -65,7 +65,6 @@ const media = {
             utils.wrap(this.media, this.elements.wrapper);
         }
 
-        // Embeds
         if (this.isEmbed) {
             switch (this.type) {
                 case 'youtube':
@@ -79,9 +78,9 @@ const media = {
                 default:
                     break;
             }
+        } else {
+            ui.setTitle.call(this);
         }
-
-        ui.setTitle.call(this);
     },
 
     // Cancel current network requests

src/js/plugins/vimeo.js

@@ -56,6 +56,7 @@ const vimeo = {
             title: false,
             speed: true,
             transparent: 0,
+            gesture: 'media',
         };
         const params = utils.buildUrlParameters(options);
         const id = utils.parseVimeoId(player.embedId);
@@ -203,6 +204,7 @@ const vimeo = {
         // Get title
         player.embed.getVideoTitle().then(title => {
             player.config.title = title;
+            ui.setTitle.call(this);
         });
 
         // Get current time

src/js/plugins/youtube.js

@@ -23,6 +23,20 @@ const youtube = {
         // Set ID
         this.media.setAttribute('id', utils.generateId(this.type));
 
+        // Get the title
+        const key = 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c';
+        const url = `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&fields=items(snippet(title))&part=snippet&key=${key}`;
+
+        fetch(url)
+            .then(response => response.json())
+            .then(obj => {
+                if (utils.is.object(obj)) {
+                    this.config.title = obj.items[0].snippet.title;
+                    ui.setTitle.call(this);
+                }
+            })
+            .catch(() => {});
+
         // Setup API
         if (utils.is.object(window.YT)) {
             youtube.ready.call(this, videoId);

src/js/ui.js

@@ -96,11 +96,8 @@ const ui = {
         // Ready event at end of execution stack
         utils.dispatchEvent.call(this, this.media, 'ready');
 
-        // Autoplay
-        // TODO: check we still need this?
-        /* if (this.isEmbed && this.config.autoplay) {
-            this.play();
-        } */
+        // Set the title
+        ui.setTitle.call(this);
     },
 
     // Show the duration on metadataloaded
@@ -137,13 +134,10 @@ const ui = {
         }
 
         // If there's a play button, set label
-        if (this.supported.ui) {
-            if (utils.is.htmlElement(this.elements.buttons.play)) {
-                this.elements.buttons.play.setAttribute('aria-label', label);
-            }
-            if (utils.is.htmlElement(this.elements.buttons.playLarge)) {
-                this.elements.buttons.playLarge.setAttribute('aria-label', label);
-            }
+        if (utils.is.nodeList(this.elements.buttons.play)) {
+            Array.from(this.elements.buttons.play).forEach(button => {
+                button.setAttribute('aria-label', label);
+            });
         }
 
         // Set iframe title

src/js/utils.js

@@ -100,12 +100,12 @@ const utils = {
 
     // Load an external SVG sprite
     loadSprite(url, id) {
-        if (typeof url !== 'string') {
+        if (!utils.is.string(url)) {
             return;
         }
 
         const prefix = 'cache-';
-        const hasId = typeof id === 'string';
+        const hasId = utils.is.string(id);
         let isCached = false;
 
         function updateSprite(data) {
@@ -134,34 +134,25 @@ const utils = {
                 if (isCached) {
                     const data = JSON.parse(cached);
                     updateSprite.call(container, data.content);
+                    return;
                 }
             }
 
-            // ReSharper disable once InconsistentNaming
-            const xhr = new XMLHttpRequest();
+            // Get the sprite
+            fetch(url)
+                .then(response => response.text())
+                .then(text => {
+                    if (support.storage) {
+                        window.localStorage.setItem(
+                            prefix + id,
+                            JSON.stringify({
+                                content: text,
+                            })
+                        );
+                    }
 
-            // XHR for Chrome/Firefox/Opera/Safari
-            if ('withCredentials' in xhr) {
-                xhr.open('GET', url, true);
-            } else {
-                return;
-            }
-
-            // Once loaded, inject to container and body
-            xhr.onload = () => {
-                if (support.storage) {
-                    window.localStorage.setItem(
-                        prefix + id,
-                        JSON.stringify({
-                            content: xhr.responseText,
-                        })
-                    );
-                }
-
-                updateSprite.call(container, xhr.responseText);
-            };
-
-            xhr.send();
+                    updateSprite.call(container, text);
+                });
         }
     },