Improved support for multiple modals and added ability to search for albums and artists on the fly from tracks in music.mpd - vue.js refactoring WIP

platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/index.scss

@@ -21,13 +21,13 @@
         &.selected { background: $selected-bg !important; }
 
         .artist {
-            font-size: $artist-font-size;
+            font-size: .9em;
         }
     }
 
     * > .duration {
         color: $duration-color;
-        font-size: $duration-font-size;
+        font-size: .7em;
     }
 
     * > button {
@@ -65,7 +65,7 @@
         background: $browser-panel-bg;
         border-right: $default-border-2;
         padding: .3rem 1rem 6rem 1rem;
-        font-size: $browser-font-size;
+        font-size: .9em;
 
         .item {
             background: none;
@@ -163,6 +163,15 @@
                 .artist {
                     font-weight: bold;
                 }
+
+                a {
+                    color: initial;
+                    text-decoration: none;
+
+                    &:hover {
+                        color: $track-info-hover-color;
+                    }
+                }
             }
         }
 
@@ -226,8 +235,8 @@
 
         * > .elapsed-time,
         * > .total-time {
-            font-size: $control-time-font-size;
+            font-size: .7em;
-            color: $control-time-color;
+            color: .7em;
         }
 
         * > .elapsed-time {
@@ -267,10 +276,6 @@
             }
         }
 
-        .dropdown {
-            z-index: 503;
-        }
-
         .results-controls {
             position: fixed;
             padding: 0;
@@ -322,6 +327,12 @@
     }
 }
 
+#music-mpd-search-modal {
+    .dropdown {
+        z-index: 503;
+    }
+}
+
 @media #{map-get($widths, 's')} {
     #music-mpd-info {
         .modal {

platypush/backend/http/static/css/source/webpanel/plugins/music.mpd/vars.scss

@@ -2,18 +2,13 @@ $button-enabled-color: #59df3e;
 $button-hover-color: $button-enabled-color;
 $play-button-hover-color: #64ef4a;
 
-$artist-font-size: $font-size * 0.9333;
-
 $duration-color: #666;
-$duration-font-size: $font-size * 0.86666;
 
 $control-panel-bg: rgba(245,245,245,0.95);
 $control-panel-shadow: 0 -2.5px 4px 0 #c0c0c0;
 $control-time-color: #666;
-$control-time-font-size: $font-size * 0.666666;
 
 $browser-panel-bg: rgba(248,250,250,0.95);
-$browser-font-size: $font-size * 0.8666;
 
 $empty-playlist-color: rgba(200,200,200,0.7);
 $empty-playlist-shadow: 2px 1px rgb(235,235,235);
@@ -30,4 +25,5 @@ $search-modal-footer-border: 1px solid #ccc;
 
 $info-modal-row-border: 1px solid #ddd;
 $info-modal-attr-color: #777;
+$track-info-hover-color: rgb(46,190,110);
 

platypush/backend/http/static/js/elements/modal.js

@@ -69,6 +69,28 @@ Vue.component('modal', {
             this.prevValue = this.value;
         }
 
+        if (this.value) {
+            // Make sure that a newly opened or visible+updated modal always comes to the front
+            const myZIndex = parseInt(getComputedStyle(this.$el).zIndex);
+            var maxZIndex = myZIndex;
+            var outermostModals = [];
+
+            for (const modal of document.querySelectorAll('.modal-container:not(.hidden)')) {
+                const zIndex = parseInt(getComputedStyle(modal).zIndex);
+
+                if (zIndex > maxZIndex) {
+                    maxZIndex = zIndex;
+                    outermostModals = [modal];
+                } else if (zIndex == maxZIndex) {
+                    outermostModals.push(modal);
+                }
+            }
+
+            if (outermostModals.indexOf(this.$el) < 0 || outermostModals.length > 1) {
+                this.$el.style.zIndex = maxZIndex+1;
+            }
+        }
+
         if (this.value && this.timeout && !this.timeoutId) {
             var handler = (self) => {
                 return () => {

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

@@ -46,14 +46,39 @@ Vue.component('music-mpd', {
             var items = [];
 
             if (Object.keys(this.selectedPlaylistItems).length === 1) {
+                const track = Object.values(this.selectedPlaylistItems)[0];
+
                 items.push({
-                    text: 'Play',
+                        text: 'Play',
-                    icon: 'play',
+                        icon: 'play',
-                    click: async function() {
+                        click: async function() {
-                        await self.playpos();
+                            await self.playpos();
-                        self.selectedPlaylistItems = {};
+                            self.selectedPlaylistItems = {};
-                    },
+                        },
-                });
+                    }
+                );
+
+                if (track.artist && track.artist.length) {
+                    items.push({
+                        text: 'View artist',
+                        icon: 'user',
+                        click: async function() {
+                            await self.searchArtist(track);
+                            self.selectedPlaylistItems = {};
+                        }
+                    });
+                }
+
+                if (track.album && track.album.length) {
+                    items.push({
+                        text: 'View album',
+                        icon: 'compact-disc',
+                        click: async function() {
+                            await self.searchAlbum(track);
+                            self.selectedPlaylistItems = {};
+                        },
+                    });
+                }
             }
 
             items.push({
@@ -85,8 +110,7 @@ Vue.component('music-mpd', {
                     text: 'View track info',
                     icon: 'info',
                     click: async function() {
-                        self.infoItem = Object.values(self.selectedPlaylistItems)[0];
+                        await self.info(Object.values(self.selectedPlaylistItems)[0]);
-                        self.modalVisible.info = true;
                     },
                 });
             }
@@ -111,6 +135,8 @@ Vue.component('music-mpd', {
             }
 
             if (Object.keys(this.selectedBrowserItems).length === 1) {
+                const item = Object.values(this.selectedBrowserItems)[0];
+
                 items.push(
                     {
                         text: 'Play',
@@ -169,6 +195,28 @@ Vue.component('music-mpd', {
                         },
                     }
                 );
+
+                if (item.artist && item.artist.length) {
+                    items.push({
+                        text: 'View artist',
+                        icon: 'user',
+                        click: async function() {
+                            await self.searchArtist(item);
+                            self.selectedPlaylistItems = {};
+                        }
+                    });
+                }
+
+                if (item.album && item.album.length) {
+                    items.push({
+                        text: 'View album',
+                        icon: 'compact-disc',
+                        click: async function() {
+                            await self.searchAlbum(item);
+                            self.selectedPlaylistItems = {};
+                        },
+                    });
+                }
             }
 
             items.push(
@@ -547,6 +595,41 @@ Vue.component('music-mpd', {
             this._parseBrowserItems(items);
         },
 
+        info: async function(item) {
+            var info = item;
+
+            if (typeof(item) === 'string') {
+                item = await request('music.mpd.search', {filter: {file: info}});
+            }
+
+            this.infoItem = item;
+            this.modalVisible.info = true;
+        },
+
+        searchArtist: async function(item) {
+            await this.search({artist: item.artist});
+        },
+
+        searchAlbum: async function(item) {
+            var query = {};
+
+            if (item['x-albumuri']) {
+                query.file = item['x-albumuri'];
+            } else {
+                query.artist = item.albumartist || item.artist;
+                query.album = item.album;
+            }
+
+            await this.search(query);
+        },
+
+        search: async function(query) {
+            this.$refs.search.resetQuery();
+            this.$refs.search.query = query;
+            this.$refs.search.visible = true;
+            await this.$refs.search.search();
+        },
+
         onNewPlayingTrack: async function(event) {
             var previousTrack = {
                 file: this.track.file,
@@ -791,7 +874,21 @@ Vue.component('music-mpd', {
         scrollToActiveTrack: function() {
             if (this.$refs.activePlaylistTrack && this.$refs.activePlaylistTrack.length) {
                 this.$refs.activePlaylistTrack[0].$el.scrollIntoView({behavior: 'smooth'});
+            } else {
+                return;
             }
+
+            const self = this;
+            setTimeout(() => {
+                var parent = self.$refs.activePlaylistTrack[0].$el.parentElement;
+                if (parent.clientHeight + parent.scrollTop < parent.scrollHeight) {
+                    if (parent.scrollTop-50 > 0) {
+                        parent.scrollTop -= 50;
+                    } else {
+                        parent.scrollTop = 0;
+                    }
+                }
+            }, 750);
         },
 
         addToPlaylistPrompt: async function() {

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

@@ -5,13 +5,14 @@ Vue.component('music-mpd-search', {
         return {
             visible: false,
             showResults: false,
-            results: false,
+            results: [],
             filter: '',
             selectionMode: false,
             selectedItems: {},
 
             query: {
                 any: '',
+                file: '',
                 artist: '',
                 title: '',
                 album: '',
@@ -66,9 +67,36 @@ Vue.component('music-mpd-search', {
             );
 
             if (Object.keys(this.selectedItems).length === 1) {
+                const item = Object.values(this.selectedItems)[0];
+
+                if (item.artist && item.artist.length) {
+                    items.push({
+                        text: 'View artist',
+                        icon: 'user',
+                        click: async function() {
+                            await self.mpd.searchArtist(item);
+                            self.selectedItems = {};
+                        }
+                    });
+                }
+
+                if (item.album && item.album.length) {
+                    items.push({
+                        text: 'View album',
+                        icon: 'compact-disc',
+                        click: async function() {
+                            await self.mpd.searchAlbum(item);
+                            self.selectedItems = {};
+                        },
+                    });
+                }
+
                 items.push({
                     text: 'View info',
                     icon: 'info',
+                    click: function() {
+                        self.$emit('info', item);
+                    },
                 });
             }
 
@@ -86,7 +114,9 @@ Vue.component('music-mpd-search', {
                 return items;
             }, []);
 
+            this.results = [];
             var results = await request('music.mpd.search', {filter: filter});
+
             this.results = results.sort((a,b) => {
                 const tokenize = (t) => {
                     return ''.concat(t.artist || '', '-', t.album || '', '-', t.disc || '', '-', t.track || '', t.title || '').toLocaleLowerCase();
@@ -135,11 +165,18 @@ Vue.component('music-mpd-search', {
             this.selectionMode = true;
 
             for (var item of this.results) {
-                this.selectedItems[item.id] = item;
+                this.selectedItems[item.file] = item;
             }
 
             openDropdown(this.$refs.dropdown.$el);
         },
+
+        resetQuery: function() {
+            this.filter = '';
+            for (const attr of Object.keys(this.query)) {
+                this.query[attr] = '';
+            }
+        },
     },
 });
 

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

@@ -6,7 +6,10 @@
 
 <script type="text/x-template" id="tmpl-music-mpd">
     <div class="row music-mpd-container">
-        <music-mpd-search ref="search" :mpd="this"></music-mpd-search>
+        <music-mpd-search ref="search"
+                          @info="info"
+                          :mpd="this">
+        </music-mpd-search>
 
         <modal id="music-mpd-info" title="Info" v-model="modalVisible.info" ref="modal">
             <div class="info-container">
@@ -30,6 +33,11 @@
                     <div class="col-8 value" v-text="infoItem.album"></div>
                 </div>
 
+                <div class="row" v-if="infoItem.year">
+                    <div class="col-4 attr">Year</div>
+                    <div class="col-8 value" v-text="infoItem.year"></div>
+                </div>
+
                 <div class="row" v-if="infoItem.disc">
                     <div class="col-4 attr">Disc</div>
                     <div class="col-8 value" v-text="infoItem.disc"></div>
@@ -174,8 +182,14 @@
         <div class="row controls">
             <div class="col-3 track-container">
                 <div class="track-info" v-if="status.state == 'play' || status.state == 'pause'">
-                    <div class="row artist" v-text="track.artist"></div>
+                    <div class="row artist">
-                    <div class="row title" v-text="track.title"></div>
+                        <a href="#" v-text="track.artist" @click="searchArtist(track)" v-if="track.artist"></a>
+                        <span v-text="track.artist" v-else></span>
+                    </div>
+                    <div class="row title">
+                        <a href="#" v-text="track.title" @click="searchAlbum(track)" v-if="track.album"></a>
+                        <span v-text="track.title" v-else></span>
+                    </div>
                 </div>
             </div>
 

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

@@ -4,10 +4,19 @@
     <modal id="music-mpd-search-modal" title="Search" v-model="visible"
            :width="showResults ? '90vw' : 'initial'" ref="modal"
            @open="$refs.form.querySelector('input[type=text]:first-child').focus()">
+        <dropdown id="music-mpd-search-dropdown"
+                  v-if="results.length > 0"
+                  ref="dropdown"
+                  :items="dropdownItems">
+        </dropdown>
+
         <div class="search">
             <form ref="form" @submit.prevent="search" :class="{hidden: showResults}">
                 <div class="row">
-                    <input type="text" v-model.lazy.trim="query.any" placeholder="Free-text search">
+                    <input type="text" v-model.lazy.trim="query.any" placeholder="Any field">
+                </div>
+                <div class="row">
+                    <input type="text" v-model.lazy.trim="query.file" placeholder="Filename or URI">
                 </div>
                 <div class="row">
                     <input type="text" v-model.lazy.trim="query.artist" placeholder="Artist">
@@ -56,12 +65,6 @@
                 </div>
             </div>
 
-            <dropdown id="music-mpd-search-dropdown"
-                      v-if="results.length > 0"
-                      ref="dropdown"
-                      :items="dropdownItems">
-            </dropdown>
-
             <div class="results" :class="{hidden: !showResults}">
                 <div class="no-results" v-if="results.length === 0">No results</div>
                 <div v-else>