Skip to content
Snippets Groups Projects
Commit 8500fa6b authored by Nicolas Pomepuy's avatar Nicolas Pomepuy
Browse files

Remote access: improve the video list UI

parent 4581f9e6
No related branches found
No related tags found
1 merge request!1833Implement the video grouping in the remote access
<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
......@@ -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
......@@ -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') {
......
......@@ -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') {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment