Finished custom wallpaper folder selection

desktop.go

@@ -424,16 +424,18 @@ func desktop_fileLocation_handler(w http.ResponseWriter, r *http.Request) {
 ////////////////////////////////   END OF DESKTOP FILE ICON HANDLER ///////////////////////////////////////////////////
 
 func desktop_theme_handler(w http.ResponseWriter, r *http.Request) {
-	username, err := authAgent.GetUserName(w, r)
+	userinfo, err := userHandler.GetUserInfoFromRequest(w, r)
 	if err != nil {
 		sendErrorResponse(w, "User not logged in")
 		return
 	}
+	username := userinfo.Username
 
 	//Check if the set GET paramter is set.
 	targetTheme, _ := mv(r, "set", false)
 	getUserTheme, _ := mv(r, "get", false)
-	if targetTheme == "" && getUserTheme == "" {
+	loadUserTheme, _ := mv(r, "load", false)
+	if targetTheme == "" && getUserTheme == "" && loadUserTheme == "" {
 		//List all the currnet themes in the list
 		themes, err := filepath.Glob("web/img/desktop/bg/*")
 		if err != nil {
@@ -493,6 +495,52 @@ func desktop_theme_handler(w http.ResponseWriter, r *http.Request) {
 			sendJSONResponse(w, string("\""+result+"\""))
 			return
 		}
+	} else if loadUserTheme != "" {
+		//Load user theme base on folder path
+		rpath, err := userinfo.VirtualPathToRealPath(loadUserTheme)
+		if err != nil {
+			sendErrorResponse(w, "Custom folder load failed")
+			return
+		}
+
+		//Check if the folder exists
+		if !fileExists(rpath) {
+			sendErrorResponse(w, "Custom folder load failed")
+			return
+		}
+
+		if userinfo.CanRead(loadUserTheme) == false {
+			//No read permission
+			sendErrorResponse(w, "Permission denied")
+			return
+		}
+
+		//Scan for jpg, gif or png
+		imageList := []string{}
+		scanPath := filepath.ToSlash(filepath.Clean(rpath)) + "/"
+		pngFiles, _ := filepath.Glob(scanPath + "*.png")
+		jpgFiles, _ := filepath.Glob(scanPath + "*.jpg")
+		gifFiles, _ := filepath.Glob(scanPath + "*.gif")
+
+		//Merge all 3 slice into one image list
+		imageList = append(imageList, pngFiles...)
+		imageList = append(imageList, jpgFiles...)
+		imageList = append(imageList, gifFiles...)
+
+		//Convert the image list back to vpaths
+		virtualImageList := []string{}
+		for _, image := range imageList {
+			vpath, err := userinfo.RealPathToVirtualPath(image)
+			if err != nil {
+				continue
+			}
+
+			virtualImageList = append(virtualImageList, vpath)
+		}
+
+		js, _ := json.Marshal(virtualImageList)
+		sendJSONResponse(w, string(js))
+
 	} else if targetTheme != "" {
 		//Set the current user theme
 		sysdb.Write("desktop", username+"/theme", targetTheme)

web/Music/native.js

@@ -0,0 +1,35 @@
+/*
+    Native.js
+
+    This script is used to match the Music Player to as native as possible
+    for some advanced use case (like PWA)
+*/
+
+//Native Media Player
+function updateTitle(){
+    if ('mediaSession' in navigator) {
+        navigator.mediaSession.metadata = new MediaMetadata({
+        title: 'Unforgettable',
+        artist: 'Nat King Cole',
+        album: 'The Ultimate Collection (Remastered)',
+        artwork: [
+            { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
+            { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
+            { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
+            { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
+            { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
+            { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
+        ]
+        });
+    
+        navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
+        navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
+        navigator.mediaSession.setActionHandler('stop', function() { /* Code excerpted. */ });
+        navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
+        navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
+        navigator.mediaSession.setActionHandler('seekto', function() { /* Code excerpted. */ });
+        navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
+        navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
+        navigator.mediaSession.setActionHandler('skipad', function() { /* Code excerpted. */ });
+    }
+}

web/SystemAO/desktop/personalization.html

@@ -68,11 +68,12 @@
                         Background Wallpaper
                         <div class="sub header">Set your desktop background wallpaper theme.</div>
                     </h4>
-                    <select id="wallpaperlist" class="ui fluid dropdown" onchange="handleBackgroundSelectionChange(this.value);">
+                    <select id="wallpaperlist" class="ui fluid dropdown allowSelectDefaultThemes" onchange="handleBackgroundSelectionChange(this.value);">
                         <option value="">Wallpaper Packs</option>
                     </select>
-                    <br>
-                    <button class="ui small green right floated button" onclick="applyWallpaper();"><i class="checkmark icon"></i> Apply Wallpaper</button>
+                    <small>This option will be disabled by default if you have set your "User Defined Wallpaper" in Advance tab.</small>
+                    <br> <br>
+                    <button class="ui small green right floated button allowSelectDefaultThemes" onclick="applyWallpaper();"><i class="checkmark icon"></i> Apply Wallpaper</button>
                     <br><br><br>
                     <div class="ui green segment" style="display:none" id="wallpaperChangeConfirm">
                         <h4 class="ui header">
@@ -165,17 +166,28 @@
 
 
             //Startup process
-            initCurrentBackgroundPreview();
             initDefaultBackgroundChangeValue();
-            initUserDefinedWallpaperFolder();
+            initUserDefinedWallpaperFolder(function(themeName){
+                initCurrentBackgroundPreview(themeName);
+            });
 
-            function initUserDefinedWallpaperFolder(){
-                var userDefinedFolder = localStorage.getItem("ao/desktop/backgroundoverwrite");
-                if (userDefinedFolder == null){
-                    $("#userSelectedFolderPath").text("Disabled");
-                }else{
-                    $("#userSelectedFolderPath").text(userDefinedFolder);
-                }
+            //Return the data stored in the theme settings
+            //Will return either theme pack name or path for user defined folder
+            function initUserDefinedWallpaperFolder(callback = undefined){
+                $.get("../../system/desktop/theme?get=true", function(data) {
+                    if (data.includes(":/")){
+                        //This is a path
+                        $("#userSelectedFolderPath").text(data);
+                        $(".allowSelectDefaultThemes").addClass("disabled");
+                    }else{
+                        $("#userSelectedFolderPath").text("Disabled");
+                    }
+
+                    if (callback != undefined){
+                        callback(data);
+                    }
+                    
+                });
             }
             
 
@@ -221,15 +233,37 @@
                     var filepath = filedata[i].filepath;
 
                     //Save the overwrite folder path
-                    localStorage.setItem("ao/desktop/backgroundoverwrite",filepath);
                     $("#userSelectedFolderPath").text(filepath);
+                    $.get("../../system/desktop/theme?set=" + filepath, function(data) {
+                         //Reload desktop background pack
+                         if (ao_module_virtualDesktop){
+                            parent.changeDesktopTheme(filepath);
+                         }
+
+                         //Disable change to system build in themes
+                         $(".allowSelectDefaultThemes").addClass("disabled");
+
+                         //Load the preview
+                         initCurrentBackgroundPreview();
+                    });
                 }
             }
 
             function clearUserSelectedFolder(){
                 //Clear user selected folder
-                localStorage.removeItem("ao/desktop/backgroundoverwrite");
-                initUserDefinedWallpaperFolder();
+                $.get("../../system/desktop/theme?set=default", function(data) {
+                         //Reload desktop background pack
+                         if (ao_module_virtualDesktop){
+                            parent.changeDesktopTheme("default");
+                         }
+
+                          //Re-enable the default theme seelct
+                        $(".allowSelectDefaultThemes").removeClass("disabled");
+                        $("#userSelectedFolderPath").text("Disabled");
+
+                        initUserDefinedWallpaperFolder();
+                        initCurrentBackgroundPreview();
+                    });
             }
 
             function initCurrentBackgroundPreview(){
@@ -253,32 +287,55 @@
                         //Get the user theme settings
                         $(".backgroundpreview").attr('src','../../img/desktop/bg/nobg.jpg');
                         
-                        //Check if the theme exists
-                        var themeExists = false;
-                        var targetThemeObject;
-                        desktopThemeList.forEach(theme => {
-                            if (theme.Theme == data){
-                                //Theme exists
-                                themeExists = true;
-                                targetThemeObject = theme;
-                            }
-                        });
 
-                        if (themeExists == false){
-                            //This theme not exists. Do not load preview
-                            $("#wallpaperlist").dropdown("set selected","Default");
+                        //Check if the theme is custom path
+                        if (data.includes(":/")){
+                            //Is path. Load path preview
+                            $.get("../../system/desktop/theme?load=" + data, function(imagelist){
+                                //Load background preview
+                                loadBackgroundPreviewForCustomFolder(imagelist);
+                                 //End of startup process
+                                isStartingUp = false;
+                            });
                         }else{
-                            loadBackgroundPreview(targetThemeObject);
-                            var themeName = data.charAt(0).toUpperCase() + data.slice(1)
-                            $("#wallpaperlist").dropdown("set selected",themeName);
+                            //Check if the theme exists
+                            var themeExists = false;
+                            var targetThemeObject;
+                            desktopThemeList.forEach(theme => {
+                                if (theme.Theme == data){
+                                    //Theme exists
+                                    themeExists = true;
+                                    targetThemeObject = theme;
+                                }
+                            });
+
+                            if (themeExists == false){
+                                //This theme not exists. Do not load preview
+                                $("#wallpaperlist").dropdown("set selected","Default");
+                            }else{
+                                loadBackgroundPreview(targetThemeObject);
+                                var themeName = data.charAt(0).toUpperCase() + data.slice(1)
+                                $("#wallpaperlist").dropdown("set selected",themeName);
+                            }
+                            
+                            //End of startup process
+                            isStartingUp = false;
                         }
-                        
-                        //End of startup process
-                        isStartingUp = false;
                     });
                 });
             }
 
+            function loadBackgroundPreviewForCustomFolder(imageList){
+                $("#backgroundPreviewList").html("");
+                $("#mainBackground").attr("src","../../media/?file=" + imageList[0]);
+                
+                for (var i = 1; i < imageList.length; i++){
+                    $("#backgroundPreviewList").append(`<div class="four wide column">
+                        <img class="ui fluid image backgroundpreview" src="${"../../media/?file=" + imageList[i]}">
+                    </div>`);
+                }
+            }
+
             function loadBackgroundPreview(targetThemeObject){
                 $("#backgroundPreviewList").html("");
                 var imageList = targetThemeObject.Bglist;

web/desktop.system

@@ -2196,6 +2196,8 @@
 
         //Initiate desktop theme list and user current theme
         function initDesktopTheme() {
+            //Update 1 April 2021: Check if the user customize the desktop with the given path
+
             $.get("system/desktop/theme", function(data) {
                 //Return a list of theme stored on the system
                 desktopThemeList = data;
@@ -2239,33 +2241,71 @@
         //Function for changing the desktop theme
         function changeDesktopTheme(targetThemeName) {
             currentUserTheme = targetThemeName;
-            for (var i = 0; i < desktopThemeList.length; i++) {
-                var thisTheme = desktopThemeList[i];
-                if (thisTheme["Theme"] == targetThemeName) {
-                    //Use this config as the target theme
-                    currentBackgroundList = thisTheme["Bglist"];
-                    break;
+
+            if (currentUserTheme.includes(":/") == false){
+                //This is default theme pack name
+                for (var i = 0; i < desktopThemeList.length; i++) {
+                    var thisTheme = desktopThemeList[i];
+                    if (thisTheme["Theme"] == targetThemeName) {
+                        //Use this config as the target theme
+                        currentBackgroundList = thisTheme["Bglist"];
+                        break;
+                    }
                 }
-            }
-            //Initiate the background image.
-            $("#bgwrapper").html("");
-            for (var i = 0; i < currentBackgroundList.length; i++) {
-                var id = "dbg" + i;
-                var thisImage = "img/desktop/bg/" + currentUserTheme + "/" + currentBackgroundList[i];
-                $("#bgwrapper").append('<img id="' + id + '" rel="preload" draggable="false" style="background-image:url(\'' + thisImage + '\');" class="backgroundFrame"></img>');
-            }
-            setTimeout(function() {
-                $("#dbg0").addClass("showBackground");
-            }, 300);
-
-            if (currentBackgroundList.length == 1) {
-                //There are only 1 background in this pack. Make the next slice be 0 as well.
-                nextSlideshowIndex = 0;
-            }else if (currentBackgroundList.length == 0){
-                //Background no longer exists. Change to default
-                changeDesktopTheme("default");
-            } else {
-                nextSlideshowIndex = 1;
+                //Initiate the background image.
+                $("#bgwrapper").html("");
+                for (var i = 0; i < currentBackgroundList.length; i++) {
+                    var id = "dbg" + i;
+                    var thisImage = "img/desktop/bg/" + currentUserTheme + "/" + currentBackgroundList[i];
+                    $("#bgwrapper").append('<img id="' + id + '" rel="preload" draggable="false" style="background-image:url(\'' + thisImage + '\');" class="backgroundFrame"></img>');
+                }
+                setTimeout(function() {
+                    $("#dbg0").addClass("showBackground");
+                }, 300);
+
+                if (currentBackgroundList.length == 1) {
+                    //There are only 1 background in this pack. Make the next slice be 0 as well.
+                    nextSlideshowIndex = 0;
+                }else if (currentBackgroundList.length == 0){
+                    //Background no longer exists. Change to default
+                    changeDesktopTheme("default");
+                } else {
+                    nextSlideshowIndex = 1;
+                }
+            }else{
+                //This is user defined photo file
+                $.get("system/desktop/theme?load=" + targetThemeName, function(data){
+                    if (data.error !== undefined){
+                        //The folder is gone. Use default instead
+                        console.log(data.error);
+                        changeDesktopTheme("default");
+                    }else{
+                        //OK! Load it
+                        currentBackgroundList = data;
+     
+                        $("#bgwrapper").html("");
+                        for (var i = 0; i < currentBackgroundList.length; i++) {
+                            var id = "dbg" + i;
+                            var thisImage = "media/?file=" + currentBackgroundList[i];
+                            $("#bgwrapper").append('<img id="' + id + '" rel="preload" draggable="false" style="background-image:url(\'' + thisImage + '\');" class="backgroundFrame"></img>');
+                        }
+                        setTimeout(function() {
+                            $("#dbg0").addClass("showBackground");
+                        }, 300);
+
+                        if (currentBackgroundList.length == 1) {
+                            //There are only 1 background in this pack. Make the next slice be 0 as well.
+                            nextSlideshowIndex = 0;
+                        }else if (currentBackgroundList.length == 0){
+                            //Background no longer exists. Change to default
+                            changeDesktopTheme("default");
+                        } else {
+                            nextSlideshowIndex = 1;
+                        }
+
+                    }
+                });
+               
             }
 
         }