[Android] Remote access: add an icon to the browsing audio/video/playlist routes
Nicolas Pomepuy
git at videolan.org
Thu Apr 11 11:04:55 UTC 2024
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 } },
More information about the Android
mailing list