Optimized Music module thumbnail loading

file_system.go

@@ -2911,22 +2911,32 @@ func system_fs_handleThumbnailLoad(w http.ResponseWriter, r *http.Request) {
 		common.SendErrorResponse(w, "vpath not defined")
 		return
 	}
+
+	byteMode, _ := common.Mv(r, "bytes", false)
+	isByteMode := byteMode == "true"
 	fsh, subpath, err := GetFSHandlerSubpathFromVpath(vpath)
 	if err != nil {
+		if isByteMode {
+			http.NotFound(w, r)
+			return
+		}
 		common.SendErrorResponse(w, "Unable to resolve target directory")
 		return
 	}
 	rpath, err := fsh.FileSystemAbstraction.VirtualPathToRealPath(subpath, userinfo.Username)
 	if err != nil {
+		if isByteMode {
+			http.NotFound(w, r)
+			return
+		}
 		common.SendErrorResponse(w, err.Error())
 		return
 	}
 
-	byteMode, _ := common.Mv(r, "bytes", false)
-	if byteMode == "true" {
+	if isByteMode {
 		thumbnailBytes, err := thumbRenderHandler.LoadCacheAsBytes(fsh, vpath, userinfo.Username, false)
 		if err != nil {
-			common.SendErrorResponse(w, err.Error())
+			http.NotFound(w, r)
 			return
 		}
 		filetype := http.DetectContentType(thumbnailBytes)

web/Music/index.html

@@ -1218,6 +1218,21 @@
 			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;
+				}
+				$("#" + 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,
 			}, function(data){
@@ -1233,6 +1248,7 @@
 					})
 				}
 			});
+			*/
 		})
 	}
 
@@ -1263,9 +1279,6 @@
 					]
 				}
 			}
-
-			
-
 			resizeQuickAdjust();
 		});
 	}
@@ -2108,39 +2121,21 @@
 			//Get thumbnail from the current list to prevent re-loading form remote
 			let targetThumbnail = $("#" + (i + 1)).find("img").attr("src");
 			let opacityShowing = "";
+			let realVpath = playingList[i][0].split("=");
+			realVpath.shift();
+			realVpath = realVpath.join("=");
+
 			if ($("#" + (i + 1)).length == 0 && displayList.length == playingList.length){
 				//Item not exists
 				targetThumbnail = "img/eq.svg";
 				opacityShowing = "opacity: 0.6;"
-			}else if ($("#" + (i + 1)).attr("filepath") != ao_module_utils.objectToAttr(playingList[i][0])){
-				//Display list and playing list mismatch. Get thumbnail from server again and update later
-				targetThumbnail = "img/eq.svg";
-				let realVpath = playingList[i][0].split("=");
-				realVpath.shift();
-				realVpath = realVpath.join("=");
-				let matchingListID = i + 1;
-				let rawFilepath = ao_module_utils.objectToAttr(playingList[i][0]);
-				ao_module_agirun("Music/functions/getThumbnail.js", {
-					file: realVpath,
-				}, function(data){
-					if (data.error !== undefined){
-
-					}else{
-						//Update the playing list to match thumbnail
-						$("#currentPlayingMainList").find(".dropdownList.file").each(function(){
-							if ($(this).attr("filepath") == rawFilepath && $(this).attr("listid") == matchingListID){
-								//This is the one to update
-								$(this).find("img").attr("src","data:image/jpg;base64," + data);
-							}
-						});
-					}
-				});
+			}else{
+				targetThumbnail = `../system/file_system/loadThumbnail?bytes=true&vpath=${encodeURIComponent(realVpath)}`;
 			}
-			
 
 			$("#currentPlayingMainList").append(`<div class="dropdownList file item" style="${opacityShowing}" filepath="${ao_module_utils.objectToAttr(playingList[i][0])}" listid="${i + 1}" rawname="${ao_module_utils.objectToAttr(playingList[i][1])}">
 				<div class="ui header selectable" style="margin:0px !important;" onClick="playSongFromDropdownList(this);">
-					<img class="ui small image" src="${targetThumbnail}" style="margin-right: 0.2em;"></img>
+					<img class="ui small image" src="${targetThumbnail}" onError="replaceImageToDefault(this);" style="margin-right: 0.2em;"></img>
 					<div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">
 						<span style="font-weight: lighter;">${displayname}</span>
 						<div class="sub header fileinfo" style="color: #c7c7c7;">${playingList[i][2]} / ${playingList[i][3]}</div>
@@ -2160,6 +2155,10 @@
 		});
 
 	}
+
+	function replaceImageToDefault(target){
+		$(target).attr('src', "img/eq.svg");
+	}
 	
 	function loadSongList(type = "all"){
 		currentPath = "";