Added WIP thumbnail caching mechanism

web/Music/index.html

@@ -397,7 +397,8 @@
 		cacheDbConn.onupgradeneeded = function(event) { 
 			cacheDb = event.target.result;
 			cacheDbTx = event.target.transaction;
-			cacheStore = cacheDb.createObjectStore("files",{keyPath:"filename"})
+			cacheStore = cacheDb.createObjectStore("files",{keyPath:"filename"});
+			cacheStore = cacheDb.createObjectStore("thumblist",{keyPath:"filename"});
 		};
 		cacheDbConn.onerror = function(event) {
 			console.log("ERROR: " + event.target.errorCode)
@@ -1237,6 +1238,27 @@
 		highLightPlayingMusic();
 	}
 
+	//Check if a music file thumbnail exists in cache
+	function getThumbnailFromCache(filepath, callback){
+		if (dbExists){
+			let dbTx = cacheDb.transaction("thumblist","readwrite");
+			let tstore = dbTx.objectStore("thumblist");
+			let retrv = tstore.get(filepath);
+			retrv.onsuccess = (event) => {
+				let cachefile = retrv.result;
+				if (cachefile == undefined || cachefile.content == undefined){
+					//thumbnail not exists in cache.
+					callback(undefined);
+				}else{
+					//load from cache
+					callback(cachefile);
+				}
+			}
+				
+		}
+		return callback(undefined);
+	}
+
 	function loadThumbnailToMusicList(selector = ".mainList.file.item"){
 		$(selector).each(function(){
 			let filepath = JSON.parse(decodeURIComponent($(this).attr("filepath")));
@@ -1247,21 +1269,50 @@
 			realVpath.shift();
 			realVpath = realVpath.join("=");
 			//console.log(thisFileItemID, realVpath, rawname);
-			//Load the thumbnail for this item in list
-			fetch("../system/file_system/loadThumbnail?vpath=" + encodeURIComponent(realVpath))
-			.then((response) => response.json())
-			.then((data) => {
-				if (data.error !== undefined || data.trim() == ""){
-					return;
+
+			getThumbnailFromCache(realVpath, function(cachedThumb){
+				if (cachedThumb == undefined){
+					//Load the thumbnail for this item in list
+					fetch("../system/file_system/loadThumbnail?vpath=" + encodeURIComponent(realVpath))
+					.then((response) => response.json())
+					.then((data) => {
+						if (data.error !== undefined || data.trim() == ""){
+							return;
+						}
+						$("#" + thisFileItemID).find("img").attr("src","data:image/jpg;base64," + data);
+						
+						$(".dropdownList.file.item").each(function(){
+							var thisFilepath = JSON.parse(decodeURIComponent($(this).attr("filepath")));
+							if ($(this).attr("listid") == thisFileItemID && thisFilepath == filepath){
+								$(this).find("img").attr("src","data:image/jpg;base64," + data);
+							}
+						});
+
+						if (dbExists){
+							//Put this thumbnail into cache
+							let dbTx = cacheDb.transaction("thumblist","readwrite");
+							let tstore = dbTx.objectStore("thumblist");
+							let retrv = tstore.put({
+								"filename": realVpath,
+								"cachetime":parseInt(Date.now() / 1000),
+								"content": data,
+							});
+						}
+					});
+				}else{
+					//Use the result as thumbnail
+					console.log("Loaded from cache" , realVpath)
+					$("#" + thisFileItemID).find("img").attr("src","data:image/jpg;base64," + cachedThumb);
+					$(".dropdownList.file.item").each(function(){
+						var thisFilepath = JSON.parse(decodeURIComponent($(this).attr("filepath")));
+						if ($(this).attr("listid") == thisFileItemID && thisFilepath == filepath){
+							$(this).find("img").attr("src","data:image/jpg;base64," + cachedThumb);
+						}
+					});
 				}
-				$("#" + thisFileItemID).find("img").attr("src","data:image/jpg;base64," + data);
-				$(".dropdownList.file.item").each(function(){
-					var thisFilepath = JSON.parse(decodeURIComponent($(this).attr("filepath")));
-					if ($(this).attr("listid") == thisFileItemID && thisFilepath == filepath){
-						$(this).find("img").attr("src","data:image/jpg;base64," + data);
-					}
-				});
 			});
+			
+			
 			/*
 			ao_module_agirun("Music/functions/getThumbnail.js", {
 				file: realVpath,
@@ -1287,30 +1338,50 @@
 		var realVpath = filepath.split("=");
 		realVpath.shift();
 		realVpath = realVpath.join("=");
-		ao_module_agirun("Music/functions/getThumbnail.js", {
-			file: realVpath,
-		}, function(data){
-			if (data.error !== undefined){
-				console.log(data.error)
-				$("#albumnArtImage").attr("src","img/default.png");
-				$("#smallPlayerThumb").attr("src","img/default.png");
-				if (navigator.mediaSession.metadata){
-					navigator.mediaSession.metadata.artwork = [
-						{ src: "img/default.png",   sizes: '512x512',   type: 'image/png' }
-					]
-				}
+		getThumbnailFromCache(realVpath, function(thumbdata){
+			if (thumbdata == undefined){
+				//No thumbnail found. Load it from server
+				console.log("Thumbnail cache not found", realVpath);
+				ao_module_agirun("Music/functions/getThumbnail.js", {
+					file: realVpath,
+				}, function(data){
+					if (data.error !== undefined){
+						console.log(data.error)
+						$("#albumnArtImage").attr("src","img/default.png");
+						$("#smallPlayerThumb").attr("src","img/default.png");
+						if (navigator.mediaSession.metadata){
+							navigator.mediaSession.metadata.artwork = [
+								{ src: "img/default.png",   sizes: '512x512',   type: 'image/png' }
+							]
+						}
+					}else{
+						$("#albumnArtImage").attr("src","data:image/jpg;base64," + data);
+						$("#smallPlayerThumb").attr("src","data:image/jpg;base64," + data);
+						if (isAndroid && navigator.mediaSession.metadata){
+							//Android
+							navigator.mediaSession.metadata.artwork = [
+								{ src: "data:image/jpg;base64," + data,   sizes: '480x480',   type: 'image/jpg' }
+							]
+						}
+					}
+					resizeQuickAdjust();
+				});
 			}else{
-				$("#albumnArtImage").attr("src","data:image/jpg;base64," + data);
-				$("#smallPlayerThumb").attr("src","data:image/jpg;base64," + data);
+				//Thumbnail found.
+				console.log("Loaded song thumbnail from cache: " , realVpath);
+				$("#albumnArtImage").attr("src","data:image/jpg;base64," + thumbdata);
+				$("#smallPlayerThumb").attr("src","data:image/jpg;base64," + thumbdata);
 				if (isAndroid && navigator.mediaSession.metadata){
 					//Android
 					navigator.mediaSession.metadata.artwork = [
-						{ src: "data:image/jpg;base64," + data,   sizes: '480x480',   type: 'image/jpg' }
+						{ src: "data:image/jpg;base64," + thumbdata,   sizes: '480x480',   type: 'image/jpg' }
 					]
 				}
+
 			}
-			resizeQuickAdjust();
+			
 		});
+		
 	}
 	
 	function nextSong(id = false,forcePlayEvenStopped = false){
@@ -1492,6 +1563,8 @@
 	    }
 	}
 
+	
+
 	function loadAndPlayAudioFile(sourceURL,playAfterLoad = true){
 		var audio = audioElement;