Fixed minor desktop css issue

web/Video/index.html

@@ -68,6 +68,7 @@
 
             .playlistObject{
                 padding: 0.8em !important;
+                cursor: pointer;
             }
 
             .playlistObject:hover{
@@ -108,7 +109,8 @@
                     <input id="autoplayToggle" type="checkbox" name="autoplay" onchange="setAutoplay(this);">
                     <label>Autoplay</label>
                 </div>
-
+                <button onclick="playNextVideo();" class="ui tiny right floated basic icon button"><i class="step forward icon"></i></button>
+                <button onclick="playPreviousVideo();" class="ui tiny right floated basic icon button"><i class="step backward icon"></i></button>
             </div>
             
             <div class="ui fluid segment">
@@ -192,34 +194,11 @@
                 dp.on('ended', function() {
                     if (autoPlay){
                         //Play next item in list
-                        var nextToPlay = 0;
-                        for (var i =0; i < currentPlaylist.length; i++){
-                            if (currentPlaylist[i].Filename == currentPlaying){
-                                nextToPlay = i + 1;
-                                if (nextToPlay >= currentPlaylist.length){
-                                    //last video. loop back to first esp
-                                    nextToPlay = 0;
-                                }
-                            }
-                        }
-
-                        //Play the selected item
-                        var nextPlayObject = currentPlaylist[nextToPlay];
-                        console.log(currentPlaylist[nextToPlay],nextToPlay);
-                        $("#videoname").text(nextPlayObject.Filename);
-                        $("#ext").text("[" + nextPlayObject.Ext + "]" );
-                        currentPlaying = nextPlayObject.Filename;
-                        playVideo("../media?file=" + encodeURIComponent(nextPlayObject.Filepath));
-                        $("#videolist").find(".search").val(nextPlayObject.Filename);
-                        $(".playing").removeClass("playing");
-                        $(".videoObject").each(function(){
-                            if ($(this).attr("filename") + $(this).attr("ext") == nextPlayObject.Filename){
-                                $(this).addClass("playing");
-                            }
-                        });
+                        playNextVideo();
                     }
                 });
 
+
                 //Handle full screen
                 dp.on('fullscreen', function() {
                     //previousScreenSize = $("#dplayer").css("width");
@@ -232,6 +211,71 @@
 
             }
 
+            function playNextVideo(){
+                var nextToPlay = 0;
+                for (var i =0; i < currentPlaylist.length; i++){
+                    if (currentPlaylist[i].Filename == currentPlaying){
+                        nextToPlay = i + 1;
+                        if (nextToPlay >= currentPlaylist.length){
+                            //last video. loop back to first esp
+                            nextToPlay = 0;
+                        }
+                    }
+                }
+
+                //Play the selected item
+                var nextPlayObject = currentPlaylist[nextToPlay];
+                if (nextPlayObject  == undefined){
+                    //No playlist or no object to play
+                    return;
+                }
+                console.log(currentPlaylist[nextToPlay],nextToPlay);
+                $("#videoname").text(nextPlayObject.Filename);
+                $("#ext").text("[" + nextPlayObject.Ext + "]" );
+                currentPlaying = nextPlayObject.Filename;
+                playVideo("../media?file=" + encodeURIComponent(nextPlayObject.Filepath));
+                $("#videolist").find(".search").val(nextPlayObject.Filename);
+                $(".playing").removeClass("playing");
+                $(".videoObject").each(function(){
+                    if ($(this).attr("filename") + $(this).attr("ext") == nextPlayObject.Filename){
+                        $(this).addClass("playing");
+                    }
+                });
+            }
+
+            function playPreviousVideo(){
+                var nextToPlay = 0;
+                for (var i =0; i < currentPlaylist.length; i++){
+                    if (currentPlaylist[i].Filename == currentPlaying){
+                        nextToPlay = i - 1;
+                        if (nextToPlay < 0){
+                            //First video. Loopback to the final video
+                            nextToPlay = currentPlaylist.length - 1;
+                        }
+                    }
+                }
+
+                //Play the selected item
+                var nextPlayObject = currentPlaylist[nextToPlay];
+                if (nextPlayObject  == undefined){
+                    //No playlist or no object to play
+                    return;
+                }
+                console.log(currentPlaylist[nextToPlay],nextToPlay);
+                $("#videoname").text(nextPlayObject.Filename);
+                $("#ext").text("[" + nextPlayObject.Ext + "]" );
+                currentPlaying = nextPlayObject.Filename;
+                playVideo("../media?file=" + encodeURIComponent(nextPlayObject.Filepath));
+                $("#videolist").find(".search").val(nextPlayObject.Filename);
+                $(".playing").removeClass("playing");
+                $(".videoObject").each(function(){
+                    if ($(this).attr("filename") + $(this).attr("ext") == nextPlayObject.Filename){
+                        $(this).addClass("playing");
+                    }
+                });
+            }
+
+
             function setAutoplay(obj){
                 autoPlay = obj.checked;
                 if (autoPlay){
@@ -300,9 +344,8 @@
                                 AllPlaylist.push(JSON.parse(JSON.stringify(playlistInThisDevice[j])));
                                 //$("#playListSelector").append(`<option class="playlistObject" value="${thisPlaylistName}" device="${thisDeviceName}">${thisPlaylistName}</option>`);
                                 $("#playListSelector").append(`
-                                    <div class="playlistObject item">
+                                    <div class="playlistObject item" onclick="selectedPlaylist(this,'${thisPlaylistName}');">
                                         <div class="right floated content">
-                                            <div onclick="selectedPlaylist(this.parentElement.parentElement,'${thisPlaylistName}');" class="ui yellow icon button"><i class="play icon"></i></div>
                                             <div onclick="ao_module_openPath('${playlistInThisDevice[j].Folderpath}');" class="ui icon button"><i class="folder open icon"></i></div>
                                         </div>
                                         <img class="ui tiny image " src="${thisPlaylistThumbnail}">
@@ -382,6 +425,7 @@
                 playVideo("../media?file=" + encodeURIComponent(fileDescriptor.attr("filepath")));
                 $(fileDescriptor).addClass("playing");
                 window.scrollTo(0, 0); 
+                ao_module_setWindowTitle("Video - " + fileDescriptor.attr("filename"));
             }
 
             function playVideo(src){

web/desktop.system

@@ -317,7 +317,8 @@
             word-break: break-all;
             text-overflow: ellipsis;
             white-space: nowrap;
-            width: calc(100% - 4px);
+            width: calc(100% - 2em);
+            display: inline-block;
         }
         
         #stackedWindowList .item.clickable:hover {
@@ -804,6 +805,12 @@
             opacity: 0.5;
         }
 
+        .stackedWindowButton{
+            text-overflow: ellipsis !important;
+            white-space: nowrap;
+            word-break: break-all;
+        }
+
         .iframewrapper iframe{
             border: 0px;
         }
@@ -1853,7 +1860,7 @@
                     for (var i = 0; i < windowIdList.length; i++) {
                         var iconURL = getFloatWindowIconByID(windowIdList[i]);
                         var title = getFloatWindowTitleByID(windowIdList[i]);
-                        $("#stackedWindowList").append(`<div class="item clickable" windowId="${windowIdList[i]}" onclick="bringFloatWindowToFrontByFWB(this,event);"  ontouchstart="bringFloatWindowToFrontByFWB(this,event);"><span><img src="${iconURL}"></img>${title}</span><div class="closebtn" onclick="closeFWviaFWB(this,event);"><img src="img/system/close.png"></img></div></div>`);
+                        $("#stackedWindowList").append(`<div class="stackedWindowButton item clickable" windowId="${windowIdList[i]}" onclick="bringFloatWindowToFrontByFWB(this,event);"  ontouchstart="bringFloatWindowToFrontByFWB(this,event);"><span><img src="${iconURL}"></img>${title}</span><div class="closebtn" onclick="closeFWviaFWB(this,event);"><img src="img/system/close.png"></img></div></div>`);
                     }
                     $("#stackedWindowList").show();
                     stackedFloatWindowListShown = true;
@@ -2782,6 +2789,7 @@
         function setFloatWindowTitle(targetFWId, newTitle) {
             var targetfw = getFloatWindowByID(targetFWId);
             $(targetfw).find(".title").text(newTitle);
+            
         }
 
         function openFileWithModule(moduleLaunchInfo, openFileList) {