Filter implementation for music.mpd

platypush/backend/http/__init__.py

@@ -23,6 +23,8 @@ class HttpBackend(Backend):
             -d '{"type":"request","target":"nodename","action":"tts.say","args": {"phrase":"This is a test"}}' \
             http://localhost:8008/execute """
 
+    websocket_ping_tries = 3
+
     def __init__(self, port=8008, websocket_port=8009, disable_websocket=False,
                  token=None, **kwargs):
         super().__init__(**kwargs)
@@ -117,15 +119,27 @@ class HttpBackend(Backend):
 
         async def register_websocket(websocket, path):
             logging.info('New websocket connection from {}'.format(websocket.remote_address[0]))
+            websocket.remaining_ping_tries = self.websocket_ping_tries
             self.active_websockets.add(websocket)
 
             while True:
                 try:
                     waiter = await websocket.ping()
-                    await asyncio.wait_for(waiter, timeout=5)
+                    await asyncio.wait_for(waiter, timeout=3)
-                    time.sleep(5)
+                    time.sleep(3)
                 except (asyncio.TimeoutError, websockets.exceptions.ConnectionClosed) as e:
-                    logging.info('Client {} closed connection'.format(websocket.remote_address[0]))
+                    close = False
+                    if isinstance(e, asyncio.TimeoutError):
+                        websocket.remaining_ping_tries -= 1
+                        if websocket.remaining_ping_tries <= 0:
+                            close = True
+                    else:
+                        close = True
+
+                    if close:
+                        logging.info('Websocket client {} closed connection'
+                                     .format(websocket.remote_address[0]))
+
                         self.active_websockets.remove(websocket)
                         break
 

platypush/backend/http/static/css/application.css

@@ -100,7 +100,7 @@ button[disabled] {
 }
 
 #playlist-content, #music-browser {
-    height: 32.2rem;
+    height: 27.2rem;
     overflow-y: scroll;
 }
 
@@ -108,6 +108,20 @@ button[disabled] {
     padding-top: 0;
 }
 
+#browser-filter {
+    width: 95%;
+    margin-bottom: 1.5rem;
+}
+
+#playlist-filter-container {
+    height: 5rem;
+}
+
+#playlist-filter {
+    width: 100%;
+    margin-bottom: 1.5rem;
+}
+
 .music-pane {
     height: 40rem;
     padding: 15px 15px 0 5px;

platypush/backend/http/static/js/music.mpd.js

@@ -242,6 +242,7 @@ $(document).ready(function() {
             var $element = $('<div></div>')
                 .addClass('playlist-track')
                 .addClass('row').addClass('music-item')
+                .data('name', (track.artist || '') + ' ' + (track.title || ''))
                 .data('track-id', parseInt(track.id))
                 .data('pos', parseInt(track.pos))
                 .data('file', track.file);
@@ -396,12 +397,14 @@ $(document).ready(function() {
 
     var updateBrowser = function(items) {
         var $browserContent = $('#music-browser');
+        var $browserFilter = $('#browser-filter');
         var $addButton = $('#browser-controls').find('button[data-action="add"]');
         var directories = [];
         var playlists = [];
         var files = [];
 
         $browserContent.find('.music-item').remove();
+        $browserFilter.text('');
 
         for (var item of items) {
             if ('directory' in item) {
@@ -492,6 +495,9 @@ $(document).ready(function() {
         window.registerEventListener(onEvent);
         var $playbackControls = $('.playback-controls, #playlist-controls').find('button');
         var $playlistContent = $('#playlist-content');
+        var $playlistFilter = $('#playlist-filter');
+        var $browserContent = $('#music-browser');
+        var $browserFilter = $('#browser-filter');
         var $browserAddBtn = $('#browser-controls').find('button[data-action="add"]');
         var $volumeCtrl = $('#volume-ctrl');
         var $trackSeeker = $('#track-seeker');
@@ -569,7 +575,6 @@ $(document).ready(function() {
         });
 
         $browserAddBtn.on('click touch', function(event) {
-            var $browserContent = $('#music-browser');
             var $items = $browserContent.find('.music-item').slice(1, -1);
             var $selectedItems = $browserContent.find('.music-item.selected');
 
@@ -587,6 +592,30 @@ $(document).ready(function() {
                 );
             }
         });
+
+        $browserFilter.on('keyup', function(event) {
+            var filterText = $(this).val().trim().toLowerCase();
+            var $browserItems = $browserContent.find('.browser-item');
+            $browserItems.hide();
+
+            var matchedItems = $.grep($browserItems, function(item) {
+                return $(item).data('name').toLowerCase().indexOf(filterText) >= 0;
+            });
+
+            $(matchedItems).show();
+        });
+
+        $playlistFilter.on('keyup', function(event) {
+            var filterText = $(this).val().trim().toLowerCase();
+            var $playlistItems = $playlistContent.find('.playlist-track');
+            $playlistItems.hide();
+
+            var matchedItems = $.grep($playlistItems, function(item) {
+                return $(item).data('name').toLowerCase().indexOf(filterText) >= 0;
+            });
+
+            $(matchedItems).show();
+        });
     };
 
     var init = function() {

platypush/backend/http/templates/plugins/music.mpd.html

@@ -64,6 +64,11 @@
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
+
+            <div id="browser-filter-container">
+                <input type="text" id="browser-filter" placeholder="Filter">
+            </div>
+
             <div id="music-browser" class="music-pane"></div>
         </div>
     </div>
@@ -75,6 +80,11 @@
                     <i class="fa fa-eraser"></i>
                 </button>
             </div>
+
+            <div id="playlist-filter-container">
+                <input type="text" id="playlist-filter" placeholder="Filter">
+            </div>
+
             <div id="playlist-content"></div>
         </div>
     </div>