Added thumbnail on Music module

web/Music/img/eq.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<path fill="#FFFFFF" d="M13.95,36.15v-24.3h3.3v24.3H13.95z M22.35,44.15V3.85h3.3v40.3H22.35z M5.6,28.15v-8.3h3.25v8.3H5.6z
+	 M30.75,36.15v-24.3h3.3v24.3H30.75z M39.15,28.15v-8.3h3.25v8.3H39.15z"/>
+</svg>

web/Music/img/musicnote.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<path fill="#FFFFFF" d="M19.55,42.35c-2.167,0-3.992-0.75-5.475-2.25c-1.483-1.5-2.225-3.316-2.225-5.449
+	c0-2.167,0.742-3.992,2.225-5.476c1.483-1.483,3.308-2.225,5.475-2.225c0.9,0,1.708,0.116,2.425,0.35s1.342,0.567,1.875,1V5.65h12.3
+	v7.15h-8.9V34.65c0,2.133-0.742,3.949-2.225,5.449C23.542,41.6,21.717,42.35,19.55,42.35z"/>
+</svg>

web/Music/index.html

@@ -1157,6 +1157,30 @@
 		highLightPlayingMusic();
 	}
 
+	function loadThumbnailToMusicList(){
+		$(".mainList.file.item").each(function(){
+			let filepath = JSON.parse(decodeURIComponent($(this).attr("filepath")));
+			let thisFileItemID = $(this).attr("id");
+			let rawname = JSON.parse(decodeURIComponent($(this).attr("rawname")));
+			
+
+			let realVpath = filepath.split("=");
+			realVpath.shift();
+			realVpath = realVpath.join("=");
+			console.log(thisFileItemID, realVpath, rawname);
+			//Load the thumbnail for this item in list
+			ao_module_agirun("Music/functions/getThumbnail.js", {
+				file: realVpath,
+			}, function(data){
+				if (data.error !== undefined){
+
+				}else{
+					$("#" + thisFileItemID).find("img").attr("src","data:image/jpg;base64," + data);
+				}
+			});
+		})
+	}
+
 	function loadThumbnail(filepath){
 		//Load the thumbnail
 		var realVpath = filepath.split("=");
@@ -1686,9 +1710,10 @@
             <i class="chevron right icon" style="top:30%;"></i>\
         </div>\
     </div>';
-    var fileTemplate = '<div class="mainList item" filepath={filepath} id={id} rawname={rawname}>\
+    var fileTemplate = `<div class="mainList file item" filepath={filepath} id={id} rawname={rawname}>\
         <div class="ts header selectable" style="margin:0px !important;" onClick="playSong(this);">\
-            <i class="music icon whiteFont" style="overflow:hidden;"></i>\
+            <img class="ui small image" src="img/eq.svg" style="margin-right: 0.2em;"></img>
+			<!-- <i class="music icon whiteFont" style="overflow:hidden;"></i> -->\
             <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
                 {songtitle}\
                 <div class="sub header fileinfo" style="color: #c7c7c7;">{ext} / {size}</div>\
@@ -1700,7 +1725,7 @@
         <div class="mainList rightFunctionBar" type="file" align="center">\
             <i class="ellipsis vertical icon" style="top:30%;"></i>\
         </div>\
-    </div>';
+    </div>`;
 
         var targetPath = decodeURIComponent($(object).attr("filepath"));
         if (targetPath == "root" || targetPath == "/"){
@@ -1749,7 +1774,7 @@
 						continue;
 					}
     	            box = replaceAll("{filepath}",encodeURIComponent(folderPath),box);
-    	            box = replaceAll("{id}",i + 1,box);
+    	            box = replaceAll("{id}","folder-" + i + 1,box);
     	            box = replaceAll("{foldername}",ao_module_codec.decodeHexFoldername(folderName),box);
     	            var fileinfo = "[" + fileCount + " files]"
     	            if (folderCount > 0){
@@ -1758,7 +1783,8 @@
     	            box = replaceAll("{fileinfo}",fileinfo,box);
     	             $("#mainList").append(box);
     	        }
-                
+            
+
                 //List all files
                 for ( var i =0; i < files.length; i++){
 					var songInfo = files[i];
@@ -1810,6 +1836,9 @@
 					}
 				});
 			}
+
+			//Load thumbnail for song in list
+			loadThumbnailToMusicList();
 	    });
 	}