Show also invalid playlist entries on the web UI

If the viewed playlist contains any references to tracks which do not exist,
the corresponding line on the UI now shows "ERROR: invalid track". This way,
it's easy for the user to remove those invalid references from the playlists.

refs #1087

CHANGELOG.md

@@ -57,6 +57,8 @@
 - Small optimization on the size of the `collection.json` loaded by the web front-end
 - Order the playlists by name in the navigation pane, navigate automatically to the created or renamed playlist
   [#1083](https://github.com/owncloud/music/issues/1083)
+- Any invalid playlist entries are now visible on the web UI to enable easy removal
+  [#1087](https://github.com/owncloud/music/issues/1087)
 
 ### Fixed
 - Subsonic API:

js/app/services/libraryservice.ts

@@ -195,12 +195,25 @@ export class LibraryService {
 		array.splice(to, 0, array.splice(from, 1)[0]);
 	}
 
+	#errorTrack(trackId : number) : Track {
+		return {
+			id : trackId,
+			type : 'error',
+			title : 'ERROR: invalid track',
+			album : null,
+			artistId : null,
+			artist : null,
+			folder : null,
+			genre : null
+		};
+	}
+
 	#playlistEntry<T extends BaseTrack>(track : T) : PlaylistEntry<T> {
 		return (track !== null) ? { track: track } : null;
 	}
 
 	#playlistEntryFromId(trackId : number) : PlaylistEntry<Track> {
-		return this.#playlistEntry(this.#tracksIndex[trackId] ?? null);
+		return this.#playlistEntry(this.#tracksIndex[trackId] ?? this.#errorTrack(trackId));
 	}
 
 	#wrapRadioStation(station : any) : PlaylistEntry<RadioStation> {
@@ -210,7 +223,7 @@ export class LibraryService {
 
 	#wrapPlaylist(playlist : any) : Playlist {
 		let wrapped = $.extend({}, playlist); // clone the playlist
-		wrapped.tracks = _(playlist.trackIds).map((id) => this.#playlistEntryFromId(id)).reject(_.isNull).value(); // null-values are possible during scanning
+		wrapped.tracks = _(playlist.trackIds).map((id) => this.#playlistEntryFromId(id)).value();
 		delete wrapped.trackIds;
 		return wrapped;
 	}

templates/partials/views/playlistview.php

@@ -21,7 +21,8 @@
 					<div>{{ ::song.artist.name }} - {{ ::song.title }}</div>
 				</div>
 				<button class="action icon-details" ng-click="showTrackDetails(song.id)"
-					alt="{{ 'Details' | translate }}" title="{{ 'Details' | translate }}"></button>
+					alt="{{ 'Details' | translate }}" title="{{ 'Details' | translate }}"
+					ng-if="song.type != 'error'"></button>
 				<button class="action icon-close" ng-click="removeTrack($index)"
 					alt="{{ 'Remove' | translate }}" title="{{ 'Remove track from playlist' | translate }}"></button>
 			</div>