[Android] Remote access: improve the video list UI
Nicolas Pomepuy
git at videolan.org
Thu Feb 22 13:29:25 UTC 2024
vlc-android | branch: master | Nicolas Pomepuy <nicolas at videolabs.io> | Tue Jan 30 09:30:31 2024 +0100| [8500fa6b4c1f0c70be586b28c0c65323da91a09d] | committer: Nicolas Pomepuy
Remote access: improve the video list UI
> https://code.videolan.org/videolan/vlc-android/commit/8500fa6b4c1f0c70be586b28c0c65323da91a09d
---
.../network-sharing-server/public/icons/open.svg | 1 +
.../src/components/AppHeader.vue | 36 ++++++++++++----------
.../src/components/MediaCardItem.vue | 7 +++--
.../src/components/MediaListItem.vue | 7 +++--
4 files changed, 30 insertions(+), 21 deletions(-)
diff --git a/buildsystem/network-sharing-server/public/icons/open.svg b/buildsystem/network-sharing-server/public/icons/open.svg
new file mode 100644
index 0000000000..433c97504a
--- /dev/null
+++ b/buildsystem/network-sharing-server/public/icons/open.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>
\ No newline at end of file
diff --git a/buildsystem/network-sharing-server/src/components/AppHeader.vue b/buildsystem/network-sharing-server/src/components/AppHeader.vue
index 4dcce0a9af..01b00dad8d 100644
--- a/buildsystem/network-sharing-server/src/components/AppHeader.vue
+++ b/buildsystem/network-sharing-server/src/components/AppHeader.vue
@@ -36,8 +36,8 @@
<ImageButton type="search" data-bs-toggle="tooltip" data-bs-placement="bottom" :title="$t('SEARCH')" />
</RouterLink>
<div class="dropdown dropstart">
- <ImageButton type="more_vert" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" />
- <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+ <ImageButton type="more_vert" data-bs-toggle="dropdown" aria-expanded="false" />
+ <ul class="dropdown-menu">
<li>
<a v-on:click="this.$emit('send-files')" v-t="'SEND_FILES'" class="dropdown-item clickable"></a>
</li>
@@ -56,6 +56,20 @@
<ImageButton type="view_list" v-show="!this.appStore.displayType[this.$route.name]" data-bs-toggle="tooltip"
data-bs-placement="bottom" :title="$t('DISPLAY_LIST')" aria-expanded="false"
v-on:click.stop="this.appStore.toggleDisplayType(this.$route.name)" />
+ <div class="dropdown" v-show="this.$route.meta.showGrouping">
+ <button class="btn btn-lg image-button hidden-arrow" type="button" data-bs-toggle="dropdown"
+ aria-expanded="false">
+ <img class="image-button-image" v-bind:src="$getAppAsset('ic_group', 24)">
+ </button>
+ <ul class="dropdown-menu dropdown-menu-start">
+ <li><a class="dropdown-item cursor-pointer" v-bind:class="isActive(0) ? 'active' : ''"
+ v-t="'VIDEO_GROUP_NONE'" v-on:click="this.appStore.changeGrouping(0)"></a></li>
+ <li><a class="dropdown-item cursor-pointer" v-bind:class="isActive(1) ? 'active' : ''"
+ v-t="'VIDEO_GROUP_BY_FOLDER'" v-on:click="this.appStore.changeGrouping(1)"></a></li>
+ <li><a class="dropdown-item cursor-pointer" v-bind:class="isActive(2) ? 'active' : ''"
+ v-t="'VIDEO_GROUP_BY_NAME'" v-on:click="this.appStore.changeGrouping(2)"></a></li>
+ </ul>
+ </div>
</div>
<ul class="nav justify-content-center navtabs">
<li class="nav-item">
@@ -96,22 +110,11 @@
</nav>
</div>
- <div class="d-flex align-items-center" v-else-if="this.getTitle()">
- <p class="text-primary breadcrumb">{{this.getTitle()}}</p>
+ <div class="d-flex align-items-center" v-else-if="this.getTitle()">
+ <p class="text-primary breadcrumb">{{ this.getTitle() }}</p>
</div>
<div class="flex1 d-flex justify-content-end align-items-center">
- <div class="dropdown" v-show="this.$route.meta.showGrouping">
- <button class="btn btn-lg image-button hidden-arrow" type="button" id="dropdownMenuButton1"
- data-bs-toggle="dropdown" aria-expanded="false">
- <img class="image-button-image" v-bind:src="$getAppAsset('ic_group', 24)">
- </button>
- <ul class="dropdown-menu dropdown-menu-end">
- <li><a class="dropdown-item cursor-pointer" v-bind:class=" isActive(0) ? 'active' : ''" v-t="'VIDEO_GROUP_NONE'" v-on:click="this.appStore.changeGrouping(0)"></a></li>
- <li><a class="dropdown-item cursor-pointer" v-bind:class=" isActive(1) ? 'active' : ''" aria-current="true" v-t="'VIDEO_GROUP_BY_FOLDER'" v-on:click="this.appStore.changeGrouping(1)"></a></li>
- <li><a class="dropdown-item cursor-pointer" v-bind:class=" isActive(2) ? 'active' : ''" v-t="'VIDEO_GROUP_BY_NAME'" v-on:click="this.appStore.changeGrouping(2)"></a></li>
- </ul>
- </div>
<button class="btn btn-lg image-button" v-show="this.$route.meta.showResume"
v-on:click.stop="$resumePlayback(this.$route.meta.isAudio)" data-bs-toggle="tooltip" data-bs-placement="bottom"
:title="$t('RESUME_PLAYBACK')">
@@ -231,5 +234,4 @@ export default {
.cursor-pointer {
cursor: pointer;
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/buildsystem/network-sharing-server/src/components/MediaCardItem.vue b/buildsystem/network-sharing-server/src/components/MediaCardItem.vue
index 303d7917ee..13c53b165e 100644
--- a/buildsystem/network-sharing-server/src/components/MediaCardItem.vue
+++ b/buildsystem/network-sharing-server/src/components/MediaCardItem.vue
@@ -2,7 +2,7 @@
<div v-on:click="manageClick" class="ratio clickable" v-bind:class="(mainImgClasses())">
<img v-lazy="$getImageUrl(media, this.mediaType+'_big')" class="media-img-top">
<div class="media-overlay" v-show="!isBrowse()">
- <img class="overlay-play" :src="(`./icons/play_circle_white.svg`)" width="48" />
+ <img class="overlay-play" :src="(isOpenable() ? `./icons/open.svg` : `./icons/play_circle_white.svg`)" width="48" />
</div>
<span v-if="(mediaType == 'video' && media.resolution != '')" class="resolution">{{ media.resolution }}</span>
<img class="played" :src="(`./icons/played.svg`)" v-show="(media.played && mediaType == 'video')"/>
@@ -58,7 +58,10 @@ export default {
return ''
},
isBrowse() {
- return (this.mediaType == 'folder' || this.mediaType == 'network' || this.mediaType == 'stream' || this.mediaType == 'new-stream' || this.mediaType == 'video-group' || this.mediaType == 'video-folder')
+ return (this.mediaType == 'folder' || this.mediaType == 'network' || this.mediaType == 'stream' || this.mediaType == 'new-stream')
+ },
+ isOpenable() {
+ return ['video-group', 'video-folder'].includes(this.mediaType)
},
manageClick() {
if (this.mediaType == 'video-group') {
diff --git a/buildsystem/network-sharing-server/src/components/MediaListItem.vue b/buildsystem/network-sharing-server/src/components/MediaListItem.vue
index b77326ca9e..ffc0fd8faf 100644
--- a/buildsystem/network-sharing-server/src/components/MediaListItem.vue
+++ b/buildsystem/network-sharing-server/src/components/MediaListItem.vue
@@ -4,7 +4,7 @@
<img v-if="this.mediaType == 'file'" v-lazy="$getImageUrl(media, media.fileType)" class="media-img-list">
<img v-else v-lazy="$getImageUrl(media, this.mediaType)" class="media-img-list">
<div class="media-overlay" v-show="!isBrowse()">
- <img class="overlay-play" :src="(`./icons/play_circle_white.svg`)" width="24" />
+ <img class="overlay-play" :src="(isOpenable() ? `./icons/open.svg` : `./icons/play_circle_white.svg`)" width="24" />
</div>
<span v-if="(mediaType == 'video' && media.resolution != '')" class="resolution">{{ media.resolution }}</span>
<img class="played" :src="(`./icons/played.svg`)" v-show="(media.played && mediaType == 'video')"/>
@@ -56,7 +56,10 @@ export default {
return ''
},
isBrowse() {
- return (this.mediaType == 'folder' || this.mediaType == 'network' || this.mediaType == 'stream' || this.mediaType == 'new-stream' || this.mediaType == 'video-group' || this.mediaType == 'video-folder')
+ return (this.mediaType == 'folder' || this.mediaType == 'network' || this.mediaType == 'stream' || this.mediaType == 'new-stream')
+ },
+ isOpenable() {
+ return ['video-group', 'video-folder'].includes(this.mediaType)
},
manageClick() {
if (this.mediaType == 'video-group') {
More information about the Android
mailing list