From fa42a3a6870d0688f9707ff69224420c1af5a35f Mon Sep 17 00:00:00 2001
From: vexorian <vexorian@gmail.com>
Date: Sun, 24 Jan 2021 11:37:54 -0400
Subject: [PATCH] Tweaks to music library UI. Playlists were acting strange.
 Year and date weren't getting added at times.

---
 web/public/templates/plex-library.html | 14 ++++----
 web/services/plex.js                   | 50 +++++++++++++++++++++-----
 2 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/web/public/templates/plex-library.html b/web/public/templates/plex-library.html
index aa06c8d..ee23347 100644
--- a/web/public/templates/plex-library.html
+++ b/web/public/templates/plex-library.html
@@ -63,21 +63,21 @@
                                     </div>
                                     <ul ng-if="b.collapse" class="list-group">
                                         <li ng-repeat="c in b.nested"
-                                            class="list-group-item {{ c.type !== 'movie' && c.type !== 'episode' ? 'list-group-item-dark' : 'list-group-item-video' }}">
+                                            class="list-group-item {{ c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track' ? 'list-group-item-dark' : 'list-group-item-video' }}">
                                             <div class="flex-container"
-                                                ng-click="c.type !== 'movie' && c.type !== 'episode' ? getNested(c) : selectItem(c, true)">
-                                                <span ng-if="c.type === 'movie' || c.type === 'episode'"
+                                                ng-click="c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track' ? getNested(c) : selectItem(c, true)">
+                                                <span ng-if="c.type === 'movie' || c.type === 'episode' || c.type === 'track'"
                                                     class="fa fa-plus-circle tab"></span>
-                                                <span ng-if="c.type !== 'movie' && c.type !== 'episode'"
+                                                <span ng-if="c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track'"
                                                     class="tab"></span>
-                                                <span ng-if="c.type !== 'movie' && c.type !== 'episode'"
+                                                <span ng-if="c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track'"
                                                     class="tab"></span>
-                                                <span ng-if="c.type !== 'movie' && c.type !== 'episode'"
+                                                <span ng-if="c.type !== 'movie' && c.type !== 'episode' && c.type !== 'track'"
                                                     class="fa {{ c.collapse ? 'fa-chevron-down' : 'fa-chevron-right' }} tab"></span>
                                                 <img ng-if="displayImages" lazy-img="{{c.type === 'episode' ? c.episodeIcon : c.icon }}" />
                                                 {{ c.type === 'episode' ? c.showTitle + ' - S' + c.season.toString().padStart(2,'0') + 'E' + c.episode.toString().padStart(2,'0') + ' - ' : '' }}
                                                 {{c.title}}
-                                                <span ng-if="c.type === 'movie' || c.type === 'episode'"
+                                                <span ng-if="c.type === 'movie' || c.type === 'episode' || c.type === 'track' "
                                                     class="flex-pull-right">
                                                     {{c.durationStr}}
                                                 </span>
diff --git a/web/services/plex.js b/web/services/plex.js
index f71895b..5677988 100644
--- a/web/services/plex.js
+++ b/web/services/plex.js
@@ -178,7 +178,29 @@ module.exports = function ($http, $window, $interval) {
             }
             var seenFiles = {};
             var collections = {};
-            for (let i = 0, l = typeof res.Metadata !== 'undefined' ? res.Metadata.length : 0; i < l; i++) {
+
+            let albumKeys = {};
+            let albums = {};
+            for (let i = 0; i < res.size; i++) {
+                let meta = res.Metadata[i];
+                if (meta.type === 'track') {
+                    albumKeys[ meta.parentKey ] = false;
+                }
+            }
+            albumKeys = Object.keys( albumKeys );
+            await Promise.all( albumKeys.map( async(albumKey) => {
+                try {
+                    let album = await client.Get(albumKey);
+                    if ( (typeof(album)!=='undefined') && album.size == 1) {
+                        album = album.Metadata[0];
+                    }
+                    albums[albumKey] = album;
+                } catch (err) {
+                    console.error(err);
+                }
+            } ) );
+
+            for (let i = 0; i < res.size; i++) {
               try {
                 // Skip any videos (movie or episode) without a duration set...
                 if (typeof res.Metadata[i].duration === 'undefined' && (res.Metadata[i].type === "episode" || res.Metadata[i].type === "movie"))
@@ -186,12 +208,17 @@ module.exports = function ($http, $window, $interval) {
                 if (res.Metadata[i].duration <= 0 && (res.Metadata[i].type === "episode" || res.Metadata[i].type === "movie"))
                     continue
                 let year = res.Metadata[i].year;
-                if (typeof(year)==='undefined') {
-                    year = lib.year;
-                }
                 let date = res.Metadata[i].originallyAvailableAt;
-                if ( (typeof(date)==='undefined') || (typeof(year)!=='undefined') ) {
-                    //albums don't have date , only year, so let's fill it
+                let album = undefined;
+                if (res.Metadata[i].type === 'track') {
+                    //complete album year and date
+                    album = albums[res.Metadata[i].parentKey];
+                    if (typeof(album) !== 'undefined') {
+                        year = album.year;
+                        date = album.originallyAvailableAt;
+                    }
+                }
+                if ( (typeof(date)==='undefined') && (typeof(year)!=='undefined') ) {
                     date = `${year}-01-01`;
                 }
                 var program = {
@@ -235,8 +262,15 @@ module.exports = function ($http, $window, $interval) {
                     program.episodeIcon = `${server.uri}${res.Metadata[i].thumb}?X-Plex-Token=${server.accessToken}`
                     program.seasonIcon = `${server.uri}${res.Metadata[i].parentThumb}?X-Plex-Token=${server.accessToken}`
                     program.showIcon = `${server.uri}${res.Metadata[i].grandparentThumb}?X-Plex-Token=${server.accessToken}`
-                }
-                else if (program.type === 'movie') {
+                } else if (program.type === 'track') {
+                    if (typeof(album) !== 'undefined') {
+                        program.showTitle = album.title;
+                    } else {
+                        program.showTitle = res.Metadata[i].title
+                    }
+                    program.episode = res.Metadata[i].index;
+                    program.season = res.Metadata[i].parentIndex;
+                } else if (program.type === 'movie') {
                     program.showTitle = res.Metadata[i].title
                     program.episode = 1
                     program.season = 1