[Android] Remote access: add an icon to the browsing audio/video/playlist routes

[Nicolas Pomepuy]

vlc-android | branch: master | Nicolas Pomepuy <nicolas at videolabs.io> | Wed Apr 10 15:13:17 2024 +0200| [49237d1d177390df9ed4de6c7490db6127e629e2] | committer: Duncan McNamara

Remote access: add an icon to the browsing audio/video/playlist routes

> https://code.videolan.org/videolan/vlc-android/commit/49237d1d177390df9ed4de6c7490db6127e629e2
---

 .../network-sharing-server/src/components/AppHeader.vue     | 13 +++++++++++--
 buildsystem/network-sharing-server/src/routes.js            | 10 +++++-----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/buildsystem/network-sharing-server/src/components/AppHeader.vue b/buildsystem/network-sharing-server/src/components/AppHeader.vue
index c05b6fefa6..57b89e225e 100644
--- a/buildsystem/network-sharing-server/src/components/AppHeader.vue
+++ b/buildsystem/network-sharing-server/src/components/AppHeader.vue
@@ -202,7 +202,7 @@
 
       </div>
       <div class="d-flex align-items-center" v-else-if="this.getTitle()">
-        <p class="text-primary breadcrumb">{{ this.getTitle() }}</p>
+        <div class="text-primary breadcrumb"><img v-bind:src="$getAppAsset($route.meta.icon)"> <span class="breadcrumb-content-item">{{ this.getTitle() }}</span></div>
       </div>
 
       <div class="flex1 d-flex justify-content-end align-items-center">
@@ -352,7 +352,7 @@ export default {
   filter: invert(61%) sepia(64%) saturate(4340%) hue-rotate(358deg) brightness(99%) contrast(109%);
 }
 
-.nav-button img {
+.nav-button img, .breadcrumb img {
   color: $primary-color;
   filter: var(--img-tint);
 }
@@ -387,6 +387,15 @@ export default {
   flex-wrap: wrap;
 }
 
+.breadcrumb-content-item {
+  margin-left: var(--bs-breadcrumb-item-padding-x);
+}
+
+.breadcrumb-content-item::before {
+  content: '>';
+  margin-right: var(--bs-breadcrumb-item-padding-x);
+}
+
 @keyframes blinker {
   50% {
     opacity: 0;
diff --git a/buildsystem/network-sharing-server/src/routes.js b/buildsystem/network-sharing-server/src/routes.js
index bfbcaf724b..3aa22dc999 100644
--- a/buildsystem/network-sharing-server/src/routes.js
+++ b/buildsystem/network-sharing-server/src/routes.js
@@ -20,8 +20,8 @@ const routes = [
     path: '/videos', name: 'Video',
     children: [
       { path: '', component: VideoList, name: 'VideoList', meta: { showDisplayBar: true, showResume: true, showGrouping: true } },
-       { path: 'group/:groupId', component: VideoList, name: 'VideoGroupList', meta: { showDisplayBar: true, showFAB: true, playAllType: "video-group" } },
-       { path: 'folder/:folderId', component: VideoList, name: 'VideoFolderList', meta: { showDisplayBar: true, showFAB: true, playAllType: "video-folder" } },
+       { path: 'group/:groupId', component: VideoList, name: 'VideoGroupList', meta: { showDisplayBar: true, showFAB: true, playAllType: "video-group", icon:"ic_video" } },
+       { path: 'folder/:folderId', component: VideoList, name: 'VideoFolderList', meta: { showDisplayBar: true, showFAB: true, playAllType: "video-folder", icon:"ic_folder" } },
     ]
   },
   {
@@ -31,8 +31,8 @@ const routes = [
       { path: 'albums', component: AudioAlbums, name: 'AudioAlbums', meta: { showDisplayBar: true, isAudio: true, showResume: true, showGrouping: false } },
       { path: 'tracks', component: AudioTracks, name: 'AudioTracks', meta: { showDisplayBar: true, isAudio: true, showResume: true, showGrouping: false, showFAB: true, playAllType: "tracks" } },
       { path: 'genres', component: AudioGenres, name: 'AudioGenres', meta: { showDisplayBar: true, isAudio: true, showResume: true, showGrouping: false } },
-      { path: 'artist/:artistId', component: ArtistDetails, name: 'ArtistDetails', meta: { showDisplayBar: true, isAudio: false, showResume: false, showGrouping: false, showFAB: true, playAllType: "artist" } },
-      { path: 'album/:albumId', component: AlbumDetails, name: 'AlbumDetails', meta: { showDisplayBar: true, isAudio: false, showResume: false, showGrouping: false, showFAB: true, playAllType: "album" } },
+      { path: 'artist/:artistId', component: ArtistDetails, name: 'ArtistDetails', meta: { showDisplayBar: true, isAudio: false, showResume: false, showGrouping: false, showFAB: true, playAllType: "artist", icon:"ic_no_artist" } },
+      { path: 'album/:albumId', component: AlbumDetails, name: 'AlbumDetails', meta: { showDisplayBar: true, isAudio: false, showResume: false, showGrouping: false, showFAB: true, playAllType: "album", icon:"ic_album" } },
     ]
   },
   {
@@ -46,7 +46,7 @@ const routes = [
     path: '/playlists', redirect: '/playlists/all', name: 'Playlist',
     children : [
       {path: 'all', component: PlaylistList, name: 'PlaylistList', meta: { showDisplayBar: true }},
-      { path: 'playlist/:playlistId', component: PlaylistDetails, name: 'PlaylistDetails', meta: { showDisplayBar: true, isAudio: false, showResume: false, showGrouping: false, showFAB: true, playAllType: "playlist" } }
+      { path: 'playlist/:playlistId', component: PlaylistDetails, name: 'PlaylistDetails', meta: { showDisplayBar: true, isAudio: false, showResume: false, showGrouping: false, showFAB: true, playAllType: "playlist", icon:"ic_playlist" } }
     ]
 },
   { path: '/search', component: SearchList, name: 'SearchList', meta: { showDisplayBar: false } },