UX: Refactor video playback in search results & albums #935

This commit is contained in:
Michael Mayer 2021-01-21 09:27:18 +01:00
parent 64c77c61d6
commit 8f4c7f535e
7 changed files with 12 additions and 12 deletions

View file

@ -57,8 +57,8 @@
:ripple="false"
flat icon large absolute class="input-open"
@click.stop.prevent="openPhoto(props.index, true)">
<v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">$vuetify.icons.live_photo</v-icon>
<v-icon color="white" class="default-hidden action-play" :title="$gettext('Video')">movie</v-icon>
<v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">play_arrow</v-icon>
<v-icon color="white" class="default-hidden action-play" :title="$gettext('Video')">play_arrow</v-icon>
</v-btn>
</v-img>
</td>

View file

@ -290,7 +290,6 @@
margin: 0 !important;
}
#photoprism .search-results.cards-view .type-video.is-playable .input-play,
#photoprism .search-results.list-view .type-video.is-playable .input-play,
#photoprism .search-results.list-view .type-live.is-playable .input-play {
display: inline-flex;

View file

@ -177,9 +177,9 @@ export default {
const selected = this.results[index];
if (showMerged && (selected.Type === TypeVideo || selected.Type === TypeLive)) {
if (showMerged && selected.Type === TypeLive || selected.Type === TypeVideo) {
if (this.results[index].isPlayable()) {
this.$modal.show('video', {video: selected, album: this.album});
this.$modal.show("video", {video: selected, album: this.album});
} else {
this.$viewer.show(Thumb.fromPhotos(this.results), index);
}

View file

@ -41,7 +41,7 @@
</template>
<script>
import Photo from "model/photo";
import {Photo, TypeLive, TypeVideo} from "model/photo";
import Thumb from "model/thumb";
import Event from "pubsub-js";
@ -217,9 +217,9 @@ export default {
const selected = this.results[index];
if (showMerged && (selected.Type === 'video' || selected.Type === 'live')) {
if (showMerged && selected.Type === TypeLive || selected.Type === TypeVideo) {
if (selected.isPlayable()) {
this.$modal.show('video', {video: selected, album: null});
this.$modal.show("video", {video: selected, album: null});
} else {
this.$viewer.show(Thumb.fromPhotos(this.results), index);
}

View file

@ -53,8 +53,8 @@
:ripple="false"
flat icon large absolute class="input-open"
@click.stop.prevent="openPhoto(props.index, true)">
<v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">$vuetify.icons.live_photo</v-icon>
<v-icon color="white" class="default-hidden action-play" :title="$gettext('Video')">movie</v-icon>
<v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">play_arrow</v-icon>
<v-icon color="white" class="default-hidden action-play" :title="$gettext('Video')">play_arrow</v-icon>
</v-btn>
</v-img>
</td>

View file

@ -74,6 +74,7 @@
icon flat small absolute :title="$gettext('Play')"
@touchstart.stop.prevent="openPhoto(index, true)"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="openPhoto(index, true)">
<v-icon color="white" class="action-play">play_arrow</v-icon>
</v-btn>

View file

@ -232,9 +232,9 @@ export default {
const selected = this.results[index];
if (showMerged && (selected.Type === TypeVideo || selected.Type === TypeLive)) {
if (showMerged && selected.Type === TypeLive || selected.Type === TypeVideo) {
if (this.results[index].isPlayable()) {
this.$modal.show('video', {video: selected, album: this.album});
this.$modal.show("video", {video: selected, album: this.album});
} else {
this.$viewer.show(Thumb.fromPhotos(this.results), index);
}