WebUI: Update Playlist improvement

Close #5583

Playlist is cached/updated locally within browser instead of
refreshing after each function call.
Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org>

(cherry picked from commit 60758c0313ef5553515bbc545dc5aa4b9299ca3c)
(cherry picked from commit b4cf7a9b5b5c568dd2cec85ff880f92703999814)
Signed-off-by: Jean-Baptiste Kempf <jb@videolan.org>

share/lua/http/dialogs/browse_window.html

@@ -20,6 +20,7 @@
 						switch(browse_target){
 							default:
 								sendCommand('command=in_enqueue&input='+encodeURI(path));
+								setTimeout(function(){updatePlayList(true);},1000);
 								break;
 						}
 					});

share/lua/http/index.html

@@ -108,6 +108,7 @@
 				});
 				$('#buttonPlEmpty').click(function(){
 					sendCommand({'command':'pl_empty'})
+					updatePlayList(true);
 					return false;
 				});
 				$('#buttonLoop').click(function(){
@@ -122,7 +123,10 @@
 					sendCommand({'command':'pl_random'});
 					return false;
 				})
-				$('#buttonRefresh').click(updatePlayList);
+				$('#buttonRefresh').click(function(){
+				    updatePlayList(true);
+				    return false;
+				});
 				$('#buttonPlPlay').click(function(){
 					sendCommand({
 						'command': 'pl_play',
@@ -140,7 +144,7 @@
 						};
 					});
 					$('#libraryTree').jstree('deselect_all');
-					setTimeout(updatePlayList,1000);
+					setTimeout(function(){updatePlayList(true);},1000);
 					return false;
 				});
 				$('#buttonStreams, #buttonStreams2').click(function(){

share/lua/http/js/controlers.js

 var current_id = 1;
 var currentArt = null;
 var current_que = 'main';
+var previous_title = null;
+var current_title = null;
 
 function updateArt(url) {
     $('#albumArt').fadeOut(500, function () {
@@ -72,6 +74,13 @@ function updateStatus() {
                     currentArt = 'images/vlc-48.png';
                     updateArt(currentArt);
                 }
+
+                current_title = $('[name="filename"]', data).text();
+                if (previous_title != current_title) {
+                    updatePlayList();
+                }
+                previous_title = current_title;
+
                 if (pollStatus) {
                     setTimeout(updateStatus, 1000);
                 }
@@ -119,8 +128,34 @@ function updateStatus() {
     });
 }
 
-function updatePlayList() {
-    $('#libraryTree').jstree('refresh', -1);
+function updatePlayList(force_refresh) {
+    if (force_refresh) {
+        //refresh playlist..
+        $('#libraryTree').jstree('refresh', -1);
+    } else {
+        //iterate through playlist..
+        var match = false;
+        $('.jstree-leaf').each(function(){
+            var id = $(this).attr('id');
+            if (id != null && id.substr(0,5) == 'plid_') {
+                var name = $(this).attr('name');
+                if (name != null && name == current_title) {
+                    $(this).addClass('ui-state-highlight');
+                    $(this).attr('current', 'current');
+                    this.scrollIntoView(true);
+                    match = true;
+                } else {
+                    $(this).removeClass('ui-state-highlight');
+                    $(this).removeAttr('current');
+                }
+                if ($(this).children('a').size() > 0) {
+                    $($(this).children('a')[0]).removeClass('ui-state-active');
+                }
+            }
+    	});
+    	//local title wasn't found - refresh playlist..
+    	if (!match) updatePlayList(true);
+    }
 }
 
 function sendCommand(params, append) {
@@ -133,7 +168,6 @@ function sendCommand(params, append) {
                     eval(append);
                 }
                 updateStatus();
-                updatePlayList();
             }
         });
     } else {
@@ -155,7 +189,6 @@ function sendCommand(params, append) {
                     if (append != undefined) {
                         eval(append);
                     }
-                    updatePlayList();
                 }
             });
         }
@@ -197,6 +230,7 @@ function browse(dir) {
                     break;
                 default:
                     sendCommand('command=in_play&input=' + encodeURIComponent($(this).attr('openfile')));
+                    updatePlayList(true);
                     break;
                 }
                 $('#window_browse').dialog('close');
@@ -490,7 +524,6 @@ $(function () {
         event.preventDefault();
         current_id = $(this).parent().attr('id').substr(5);
         sendCommand('command=pl_play&id=' + current_id);
-        updatePlayList();
     });
     updateStatus();
     updateStreams();