Removed unsorted video list from default list builder

web/Music/index.html

@@ -611,6 +611,12 @@
 				<i class="ellipsis vertical icon" style="top:30%;"></i>\
 			</div>\
 		</div>';
+
+		if ($("#searchModeMenu").is(":hidden")){
+			//The user exited search mode before the search results come back
+			//Dispose the search result
+			return;
+		}
 		
 		if (data.length == 0){
 			//No search results.

web/Video/backend/buildPlaylist.js

@@ -25,7 +25,6 @@ function basename(filepath){
 
 function scanPathForVideo(thisDir, thisStorageName){
     var playlistInThisStorage = [];
-    var unsortedVideoInThisStorage = [];
     var thisStoragePlaylist = {};
     
     if (filelib.fileExists(thisDir + "Video/")){
@@ -91,56 +90,9 @@ function scanPathForVideo(thisDir, thisStorageName){
         //Push scan into results
         if (playlistInThisStorage.length > 0){
             thisStoragePlaylist["PlayLists"] = playlistInThisStorage;
-            thisStoragePlaylist["UnsortedVideos"] = unsortedFileList;
+            //thisStoragePlaylist["UnsortedVideos"] = unsortedFileList;
             playlist.push(thisStoragePlaylist);
         }
-     
-       
-
-        //
-
-        /*
-        //Video folder exists in this directory
-        thisStoragePlaylist["StorageName"] = thisStorageName;
-        var fileList = filelib.glob(thisDir + "Video/*");
-        for (var j =0; j < fileList.length; j++){ 
-            if (filelib.isDir(fileList[j])){
-                //This is a directory. Scan this playlist content
-                var playlistFilelist = filelib.aglob(fileList[j] + "/*.*")
-                var playlistName = basename(fileList[j]);
-                var thisPlaylistObject = {};
-                thisPlaylistObject["Name"] = playlistName;
-                thisPlaylistObject["Files"] = [];
-                for (var k =0; k < playlistFilelist.length; k++){
-                    //For each files in this folder
-                    if (!filelib.isDir(playlistFilelist[k]) && validVideoFormat.indexOf(ext(playlistFilelist[k])) > -1 ){
-                        //This is a video file 
-                        thisPlaylistObject["Files"].push(buildFileObject(playlistFilelist[k]));
-                    }
-                }
-                if (thisPlaylistObject["Files"].length  > 0){
-                    playlistInThisStorage.push(thisPlaylistObject)
-                }
-            }else{
-                //This is just a normal file. Add to unsorted files
-                if (validVideoFormat.indexOf(ext(fileList[j])) > -1 ){
-                    unsortedVideoInThisStorage.push(buildFileObject(fileList[j]))
-                }
-                
-            }
-            
-        }
-
-         //Push scan into results
-        thisStoragePlaylist["PlayLists"] = playlistInThisStorage;
-        thisStoragePlaylist["UnsortedVideos"] = unsortedVideoInThisStorage;
-        playlist.push(thisStoragePlaylist);
-
-        */
-
-      
-        
-
     }
     
 }

web/Video/backend/getThumbnail.js

@@ -0,0 +1,43 @@
+/*
+
+    Music Module Thumbnail Getter
+    author: tobychui
+
+    This script handle thumbnail loading from the local filesystem
+
+    Require paramter: file
+    Return: base64 of the image content
+*/
+
+function main(){
+    if (!requirelib("filelib")){
+        return;
+    }
+    if (!requirelib("imagelib")){
+        return;
+    }
+
+    //Check for source file exists
+    if (filelib.fileExists(file)){
+        //File exists. Load thumb
+        var thumbImageBase64 = imagelib.loadThumbString(file);
+        if (thumbImageBase64 != false){
+            //Set the respond header to image
+            sendResp(thumbImageBase64)
+        }else{
+            sendJSONResp(JSON.stringify({
+                error: "Thumb load failed",
+            }))
+        }
+    }else{
+        sendJSONResp(JSON.stringify({
+            error: "File not exists, given: " + file,
+        }))
+    }
+
+}
+
+main();
+
+
+

web/Video/img/no_preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z"/></svg>

web/Video/index.html

@@ -59,6 +59,11 @@
 
             .videoObject{
                 padding:6px !important; 
+                cursor: pointer;
+            }
+
+            .videoObject:hover{
+                background-color: #ffdd91;
             }
 
         </style>
@@ -76,16 +81,17 @@
             </h3>
             <div class="ui segment">
                 <p><i class="expand icon"></i>Screen Size</p>
-                <button class="ui tiny button" onclick="setScreenSize('50%');">
-                    Small
-                </button>
+                <!--
+                    <button class="ui tiny button" onclick="setScreenSize('50%');">
+                        Small
+                    </button>
+                 -->
                 <button class="ui tiny button" onclick="setScreenSize('70%');">
                     Normal
                 </button>
                 <button class="ui tiny button" onclick="setScreenSize('100%');">
                     Full Width
                 </button>
-                <br><br>
                 <div class="ui toggle right floated checkbox">
                     <input id="autoplayToggle" type="checkbox" name="autoplay" onchange="setAutoplay(this);">
                     <label>Autoplay</label>
@@ -111,7 +117,7 @@
             var AllPlaylist = [];
             var currentPlaylist = [];
             var currentPlaying;
-            var unsortedVideoFiles = [];
+            //var unsortedVideoFiles = [];
             var autoPlay = false;
             var previousScreenSize = "70%";
             $('.ui.dropdown').dropdown();
@@ -238,25 +244,28 @@
                            var thisDevice = data[i];
                            var thisDeviceName = thisDevice.StorageName;
                            var playlistInThisDevice = thisDevice.PlayLists;
-                           var unsortedVideoInThisDevice = thisDevice.UnsortedVideos;
+                           //var unsortedVideoInThisDevice = thisDevice.UnsortedVideos;
                            //Append playlist
                            for (var j = 0; j < playlistInThisDevice.length; j++){
                                var thisPlaylistName = playlistInThisDevice[j].Name;
                                AllPlaylist.push(JSON.parse(JSON.stringify(playlistInThisDevice[j])));
                                $("#playListSelector").append(`<option class="playlistObject" value="${thisPlaylistName}" device="${thisDeviceName}">${thisPlaylistName}</option>`);
                            }
+                           /*
                            for (var k = 0; k < unsortedVideoInThisDevice.length; k++){
                                 unsortedVideoFiles.push(JSON.parse(JSON.stringify(unsortedVideoInThisDevice[k])));
                            }
+                           */
                            
                        }
                         //Append unsorted into playlist
-                       $("#playListSelector").append(`<option class="playlistObject" value="unsorted" device="">Unsorted Playlist</option>`);
+                        //$("#playListSelector").append(`<option class="playlistObject" value="unsorted" device="">Unsorted Playlist</option>`);
                         updateWindowEvents();
                     }
                 });
             }
 
+            /*
             function listUnsortedFiles(){
                  //Append unsorted files
                  $("#videolist").html("");
@@ -265,15 +274,16 @@
                     var thisVideoName = unsortedVideoFiles[k].Filename;
                     var thisFilePath = unsortedVideoFiles[k].Filepath;
                     var ext = unsortedVideoFiles[k].Ext;
-                    $("#videolist").append(`<div class="item videoObject" filename="${thisVideoName}" filepath="${thisFilePath}" ext="${ext}" playlist="Unsorted">
+                    $("#videolist").append(`<div class="item videoObject" onclick="playThisFile(this);" filename="${thisVideoName}" filepath="${thisFilePath}" ext="${ext}" playlist="Unsorted">
                         <i class="file icon"></i>
                         <div class="content">
-                            <a class="header" onclick="playThisFile(this);">${thisVideoName}</a>
+                            <a class="header">${thisVideoName}</a>
                             <div class="description">${thisFilePath} / [${ext}]</div>
                         </div>
                     </div>`);
                 }
             }
+            */
 
             function listPlayList(playlistName){
                 $("#videolist").html("");
@@ -288,21 +298,39 @@
                 for (var i = 0; i < currentPlaylist.length; i++){
                     var playListName = targetPlaylist.Name;
                     var thisVideoName = currentPlaylist[i].Filename;
+                    thisVideoName = thisVideoName.split(".");
+                    thisVideoName.pop();
+                    thisVideoName = thisVideoName.join(".");
                     var thisFilePath = currentPlaylist[i].Filepath;
                     var ext = currentPlaylist[i].Ext;
-                    $("#videolist").append(`<div class="item videoObject" filename="${thisVideoName}" filepath="${thisFilePath}" ext="${ext}" playlist="${playListName}">
-                        <i class="file icon"></i>
-                        <div class="content">
-                            <a class="header" onclick="playThisFile(this);">${thisVideoName}</a>
-                            <div class="description">${thisFilePath} / [${ext}]</div>
+                    $("#videolist").append(`<div class="item videoObject" onclick="playThisFile(this);" filename="${thisVideoName}" filepath="${thisFilePath}" ext="${ext}" playlist="${playListName}">
+                        <img class="ui top aligned tiny image thumbnail" src="img/no_preview.svg">
+                        <div class="content" style="width: calc(100% - 100px);">
+                            <p class="header">${thisVideoName}</p>
+                            <div class="description">${thisFilePath} <br> ${ext.substr(1)}</div>
                         </div>
                     </div>`);
                 }
+
+                //Render the thumbnail
+                $(".videoObject").each(function(){
+                    let vidDomElet = $(this);
+                    ao_module_agirun("Video/backend/getThumbnail.js", {
+                        file: $(this).attr("filepath")
+                    },function(data){
+                        if (data.error == undefined && data.length > 0){
+                            //Thumbnail get. Render it to the DOM element
+                            $(vidDomElet).find(".thumbnail").attr("src", 'data:image/jpg;base64,' + data);
+                        }
+                    } );
+                });
+
             }
 
             function playThisFile(obj){
                 $(".playing").removeClass("playing");
-                var fileDescriptor = $(obj).parent().parent();
+                //var fileDescriptor = $(obj).parent().parent();
+                var fileDescriptor = $(obj);
                 $("#videoname").text(fileDescriptor.attr("filename"));
                 $("#playlistName").text(fileDescriptor.attr("playlist"));
                 $("#ext").text("[" + fileDescriptor.attr("ext") + "]" );