From e72dae3aebdac162e0ddabc935cad29d52c38f81 Mon Sep 17 00:00:00 2001
From: Ed Linklater <ed@edgar.industries>
Date: Mon, 30 Oct 2017 11:55:02 +1300
Subject: [PATCH] Load video information on page load, add caching

---
 javascript/YouTubeField.js | 95 +++++++++++++++++++++++---------------
 1 file changed, 57 insertions(+), 38 deletions(-)

diff --git a/javascript/YouTubeField.js b/javascript/YouTubeField.js
index e5b2370..b45bf6a 100644
--- a/javascript/YouTubeField.js
+++ b/javascript/YouTubeField.js
@@ -1,51 +1,70 @@
 (function($) {
-	$(document).ready(function () {
+    $.entwine(function($) {
 
-		$('input.youtube').keyup(function(){
-			getYouTubeSnippet($(this));
-		});
+        $('input.youtube').entwine({
+            onmatch: function() {
+                if (this.val().length > 0) {
+                    getYouTubeSnippet(this);
+                }
+            },
+            onkeyup: function() {
+                getYouTubeSnippet(this);
+            }
+        });
 
-	});
+    });
 }(jQuery));
 
 function getYouTubeSnippet(element) {
-	var infobox = element.parent().find('.youtube-info');
 	var api_key = element.data('apikey');
+	var youtube_id = element.val().match(/[a-zA-Z0-9_-]{11}/);
 
-	var regex = /[a-zA-Z0-9_-]{11}/;
-	var youtube_id = element.val().match(regex);
-
-	if(youtube_id) {
-		var request = gapi.client.youtube.videos.list({
-			id: youtube_id[0],
-			part: 'snippet,statistics,contentDetails',
-			key: api_key
-		});
-
-		request.execute(function(response) {
-			var yt = response.items[0];
-
-			if(typeof yt !== 'undefined') {
-				element.parent().addClass('youtube-active');
-				infobox.find('.youtube-info-title a').text(yt.snippet.title);
-				infobox.find('.youtube-info-title a').attr('href', 'https://www.youtube.com/watch?v=' + yt.id);
-				infobox.find('.youtube-info-more').html([
-					'<strong>' + yt.snippet.channelTitle + '</strong>',
-					'Duration: ' + parseYouTubeDuration(yt.contentDetails.duration),
-					'Views: ' + parseInt(yt.statistics.viewCount).toLocaleString()
-				].join(' &middot; '));
-				infobox.find('.youtube-info-thumb').attr('src', yt.snippet.thumbnails.default.url);
-			}
-		});
-	} else {
-		element.parent().removeClass('youtube-active');
-	}
+	if (!youtube_id) {
+        element.parent().removeClass('youtube-active');
+        return false;
+    }
+
+    var yt = JSON.parse(localStorage.getItem('youtube-' + youtube_id[0]));
+	if (yt) {
+        return showYouTubeSnippet(element, yt);
+    }
+
+    var request = gapi.client.youtube.videos.list({
+        id: youtube_id[0],
+        part: 'snippet,statistics,contentDetails',
+        key: api_key
+    });
+
+    request.execute(function(response) {
+        var yt = response.items[0];
+
+        if(typeof yt !== 'undefined') {
+            localStorage.setItem('youtube-' + youtube_id[0], JSON.stringify(yt));
+            return showYouTubeSnippet(element, yt);
+        }
+    });
+}
+
+function showYouTubeSnippet(element, yt) {
+    var infobox = element.parent().find('.youtube-info');
+
+    element.parent().addClass('youtube-active');
+    infobox.find('.youtube-info-title a').text(yt.snippet.title);
+    infobox.find('.youtube-info-title a').attr('href', 'https://www.youtube.com/watch?v=' + yt.id);
+    infobox.find('.youtube-info-more').html([
+        '<strong>' + yt.snippet.channelTitle + '</strong>',
+        'Duration: ' + parseYouTubeDuration(yt.contentDetails.duration),
+        'Views: ' + parseInt(yt.statistics.viewCount).toLocaleString()
+    ].join(' &middot; '));
+    infobox.find('.youtube-info-thumb').attr('src', yt.snippet.thumbnails.default.url);
+
+    return true;
 }
 
 function googleApiClientReady() {
-	gapi.client.load('youtube', 'v3', function() {
-		getYouTubeSnippet(jQuery('input.youtube'));
-	});
+    gapi.client.load('youtube', 'v3', function() {
+        getYouTubeSnippet(jQuery('input.youtube'));
+    });
 }
 
-function parseYouTubeDuration(e){var n=e.replace(/D|H|M/g,":").replace(/P|T|S/g,"").split(":");if(1==n.length)2!=n[0].length&&(n[0]="0"+n[0]),n[0]="0:"+n[0];else for(var r=1,l=n.length-1;l>=r;r++)2!=n[r].length&&(n[r]="0"+n[r]);return n.join(":")}
\ No newline at end of file
+function parseYouTubeDuration(e){var n=e.replace(/D|H|M/g,":").replace(/P|T|S/g,"").split(":");if(1==n.length)2!=n[0].length&&(n[0]="0"+n[0]),n[0]="0:"+n[0];else for(var r=1,l=n.length-1;l>=r;r++)2!=n[r].length&&(n[r]="0"+n[r]);return n.join(":")}