luisgulo/photoprism
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UX: Don't load full length videos in live player #477 #500 #862

Browse source
This commit is contained in:
Michael Mayer 2021-01-11 17:48:47 +01:00
parent e01b193f88
commit 27d5455153
6 changed files with 21 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/component/photo/cards.vue
View file

@ -42,7 +42,7 @@
@mousedown="onMouseDown($event, index)"
@click.stop.prevent="onClick($event, index)"
>
<v-layout v-if="photo.Type === 'video' || photo.Type === 'live'" class="live-player">
<v-layout v-if="photo.Type === 'live'" class="live-player">
<video :key="photo.ID" width="500" height="500" autoplay loop muted playsinline>
<source :src="photo.videoUrl()" type="video/mp4">
</video>

2
frontend/src/component/photo/mosaic.vue
View file

@ -41,7 +41,7 @@
@mousedown="onMouseDown($event, index)"
@click.stop.prevent="onClick($event, index)"
>
<v-layout v-if="photo.Type === 'video' || photo.Type === 'live'" class="live-player">
<v-layout v-if="photo.Type === 'live'" class="live-player">
<video :key="photo.ID" width="224" height="224" autoplay loop muted playsinline>
<source :src="photo.videoUrl()" type="video/mp4">
</video>

30
frontend/src/component/video/player.vue
View file

@ -1,5 +1,5 @@
<template>
<video class="p-video-player" ref="player" :height="height" :width="width" :autoplay="autoplay"
<video ref="player" class="p-video-player" :height="height" :width="width" :autoplay="autoplay"
:preload="preload"></video>
</template>
@ -7,7 +7,7 @@
import "mediaelement";
export default {
name: "p-photo-player",
name: "PPhotoPlayer",
props: {
show: {
type: Boolean,
@ -61,10 +61,21 @@ export default {
refresh: false,
player: null,
}),
watch: {
source: function (source) {
if (source) {
this.setSource(source);
}
},
},
mounted() {
document.body.classList.add("player");
this.render();
},
beforeDestroy() {
document.body.classList.remove("player");
this.remove();
},
methods: {
render() {
const {MediaElementPlayer} = global;
@ -114,7 +125,7 @@ export default {
this.player.videoHeight = this.height;
this.player.videoWidth = this.width;
this.player.loop = this.loop;
this.$el.style.cssText = "width: " + this.width + "px; height: " + this.height + "px;"
this.$el.style.cssText = "width: " + this.width + "px; height: " + this.height + "px;";
this.player.setSrc(src);
this.player.setPoster("");
@ -126,16 +137,5 @@ export default {
}
},
},
beforeDestroy() {
document.body.classList.remove("player");
this.remove();
},
watch: {
source: function (source) {
if (source) {
this.setSource(source);
}
},
},
}
};
</script>

3
frontend/src/css/search.css
View file

@ -280,7 +280,8 @@
display: none;
}
#photoprism .search-results .type-video.is-playable:hover .input-play {
#photoprism .search-results .type-video.is-playable:hover .input-play,
#photoprism .search-results.list-view .type-live.is-playable:hover .input-play {
display: inline-flex;
opacity: 0.75;
margin-left: auto;

2
frontend/src/share/photo/cards.vue
View file

@ -38,7 +38,7 @@
@mousedown="onMouseDown($event, index)"
@click.stop.prevent="onClick($event, index)"
>
<v-layout v-if="photo.Type === 'video' || photo.Type === 'live'" class="live-player">
<v-layout v-if="photo.Type === 'live'" class="live-player">
<video :key="photo.ID" width="500" height="500" autoplay loop muted playsinline>
<source :src="photo.videoUrl()" type="video/mp4">
</video>

2
frontend/src/share/photo/mosaic.vue
View file

@ -37,7 +37,7 @@
@mousedown="onMouseDown($event, index)"
@click.stop.prevent="onClick($event, index)"
>
<v-layout v-if="photo.Type === 'video' || photo.Type === 'live'" class="live-player">
<v-layout v-if="photo.Type === 'live'" class="live-player">
<video :key="photo.ID" width="224" height="224" autoplay loop muted playsinline>
<source :src="photo.videoUrl()" type="video/mp4">
</video>