Browse Source

Fixed some minor thumbnail loading bug

Toby Chui 2 years ago
parent
commit
205e0e0365
1 changed files with 41 additions and 5 deletions
  1. 41 5
      web/Music/index.html

+ 41 - 5
web/Music/index.html

@@ -370,6 +370,7 @@
 	var audioElement = $("#mainAudioPlayer");
 	var audioElement = $("#mainAudioPlayer");
 	var audioElementObject = document.getElementById("mainAudioPlayer"); //Directly expose the audio object
 	var audioElementObject = document.getElementById("mainAudioPlayer"); //Directly expose the audio object
 	var playingFileDetail = []; //[id, filepath]
 	var playingFileDetail = []; //[id, filepath]
+	var playingSongVpath = ""; //For cache key checking
 	var displayList = []; //This is the list where the current UI is displaying.
 	var displayList = []; //This is the list where the current UI is displaying.
 	var playingList = []; //This is the list where the player last clicked on an item to play
 	var playingList = []; //This is the list where the player last clicked on an item to play
 	var pagingEnabled = false; //Enable this when there are too many songs in list
 	var pagingEnabled = false; //Enable this when there are too many songs in list
@@ -1310,7 +1311,7 @@
 							let retrv = tstore.put({
 							let retrv = tstore.put({
 								"filename": realVpath,
 								"filename": realVpath,
 								"cachetime":parseInt(Date.now() / 1000),
 								"cachetime":parseInt(Date.now() / 1000),
-								"content": data,
+								"content": data.content,
 							});
 							});
 						}
 						}
 					});
 					});
@@ -1353,13 +1354,22 @@
 		var realVpath = filepath.split("=");
 		var realVpath = filepath.split("=");
 		realVpath.shift();
 		realVpath.shift();
 		realVpath = realVpath.join("=");
 		realVpath = realVpath.join("=");
+		playingSongVpath = realVpath;
 		getThumbnailFromCache(realVpath, function(thumbdata){
 		getThumbnailFromCache(realVpath, function(thumbdata){
+			if (playingSongVpath != realVpath){
+				//Already switch to another song
+				return;
+			}
 			if (thumbdata == undefined){
 			if (thumbdata == undefined){
 				//No thumbnail found. Load it from server
 				//No thumbnail found. Load it from server
 				//console.log("Thumbnail cache not found", realVpath);
 				//console.log("Thumbnail cache not found", realVpath);
 				ao_module_agirun("Music/functions/getThumbnail.js", {
 				ao_module_agirun("Music/functions/getThumbnail.js", {
 					file: realVpath,
 					file: realVpath,
 				}, function(data){
 				}, function(data){
+					if (playingSongVpath != realVpath){
+						//Already switch to another song
+						return;
+					}
 					if (data.error !== undefined){
 					if (data.error !== undefined){
 						console.log(data.error)
 						console.log(data.error)
 						$("#albumnArtImage").attr("src","img/default.png");
 						$("#albumnArtImage").attr("src","img/default.png");
@@ -1578,7 +1588,13 @@
 	    }
 	    }
 	}
 	}
 
 
-	
+	function isSupportedCachingAudioFormat(ext){
+		if (ext == "mp3" || ext == "aac" || ext == "flac"|| ext == "wav"|| ext == "ogg"){
+			return true;
+		}
+
+		return false;
+	}
 
 
 	function loadAndPlayAudioFile(sourceURL,playAfterLoad = true){
 	function loadAndPlayAudioFile(sourceURL,playAfterLoad = true){
 		var audio = audioElement;
 		var audio = audioElement;
@@ -1589,6 +1605,7 @@
 		var filename = fd.join("=");
 		var filename = fd.join("=");
 		var playbackURL = "../" + rootPath + "=" + encodeURIComponent(filename); //Convert absolute dir to relative
 		var playbackURL = "../" + rootPath + "=" + encodeURIComponent(filename); //Convert absolute dir to relative
 		var ext = filename.split(".").pop();
 		var ext = filename.split(".").pop();
+		playingSongVpath = filename;
 		if (dbExists && (!isFirefox)){
 		if (dbExists && (!isFirefox)){
 			cacheDbTx = cacheDb.transaction("files","readwrite");
 			cacheDbTx = cacheDb.transaction("files","readwrite");
 			cacheStore = cacheDbTx.objectStore("files");
 			cacheStore = cacheDbTx.objectStore("files");
@@ -1602,7 +1619,7 @@
 					startPlaybackAfterAudioLoaded(audio, playAfterLoad);
 					startPlaybackAfterAudioLoaded(audio, playAfterLoad);
 
 
 					//Only cache non video audio tracks
 					//Only cache non video audio tracks
-					if (ext == "mp3" || ext == "flac" || ext == "aac" || ext == "wav" || ext == "ogg"){
+					if (isSupportedCachingAudioFormat(ext)){
 						loadAudioFileURLAsBlob(playbackURL, function(fileBlob){
 						loadAudioFileURLAsBlob(playbackURL, function(fileBlob){
 							//Store the blob into indexDB
 							//Store the blob into indexDB
 							let cacheDbTx2 = cacheDb.transaction("files","readwrite");
 							let cacheDbTx2 = cacheDb.transaction("files","readwrite");
@@ -1615,16 +1632,35 @@
 						});
 						});
 					}
 					}
 					
 					
-				}else{
+				}else if (isSupportedCachingAudioFormat(ext)){
 					//Cache exists. Load this instead
 					//Cache exists. Load this instead
 					console.log("[AirMusic] Loaded from cache ", filename)
 					console.log("[AirMusic] Loaded from cache ", filename)
 					let reader = new FileReader();
 					let reader = new FileReader();
 					reader.onload = function(e) {
 					reader.onload = function(e) {
+						if (playingSongVpath != filename){
+							//Already switch to another song
+							return;
+						}
 						let srcUrl = e.target.result;
 						let srcUrl = e.target.result;
-						$("#mainAudioPlayer").attr("src", srcUrl);
+
+						//Force overwrite mime type
+						let dx = srcUrl.split(";base64");
+						let ext = cachefile.filename.split(".").pop();
+						let mime = dx.shift();
+						mime = mime.split("/")
+						mime.pop();
+						mime = mime[0] + "/" + ext;
+						let adjustedAudioData = mime + ";base64" + dx[0];
+
+						//Put the final data into audio elements
+						$("#mainAudioPlayer").attr("src", adjustedAudioData);
 						startPlaybackAfterAudioLoaded(audio, playAfterLoad);
 						startPlaybackAfterAudioLoaded(audio, playAfterLoad);
 					};
 					};
 					reader.readAsDataURL(cachefile.content);
 					reader.readAsDataURL(cachefile.content);
+				}else{
+					//fallback
+					$("#mainAudioPlayer").attr("src", playbackURL);
+					startPlaybackAfterAudioLoaded(audio, playAfterLoad);
 				}
 				}
 			}
 			}
 		}else{
 		}else{