Lenaisten/bday2020
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

optimizations mainly for mobile

Browse source
This commit is contained in:
Jörn-Michael Miehe 2020-09-06 18:12:22 +02:00
parent 5a3a26139a
commit 4ac92d972c
1 changed files with 16 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
ui/src/components/BDay.vue
View file

@ -8,11 +8,12 @@
<vue-plyr <vue-plyr
ref="plyr" ref="plyr"
:options="plyrOptions" :options="plyrOptions"
:emit="['timeupdate']" :emit="['timeupdate', 'ready']"
@timeupdate="videoTimeUpdated" @timeupdate="videoTimeUpdated"
@ready="videoLoaded"
> >
<!-- inserted dynamically --> <!-- inserted dynamically -->
<video /> <video poster="../assets/poster.png" />
</vue-plyr> </vue-plyr>
</div> </div>
</template> </template>
@ -22,8 +23,8 @@ export default {
name: "BDay", name: "BDay",
data: () => ({ data: () => ({
sourceNames: ["part1", "part2"], videoQueue: ["part1", "part2"],
playing: null, currentVideo: -1,
playVisible: true, playVisible: true,
@ -45,13 +46,12 @@ export default {
getVideoSource: function (index) { getVideoSource: function (index) {
let source = { let source = {
type: "video", type: "video",
poster: "../assets/poster.png",
sources: [], sources: [],
}; };
for (const height of [240, 360, 480]) { for (const height of [240, 360, 480]) {
source.sources.push({ source.sources.push({
src: "/fake_api/" + this.sourceNames[index] + "_" + height + ".mp4", src: "/fake_api/" + this.videoQueue[index] + "_" + height + ".mp4",
type: "video/mp4", type: "video/mp4",
size: height, size: height,
}); });
@ -60,41 +60,30 @@ export default {
return source; return source;
}, },
videoTimeUpdated: function (event) { videoTimeUpdated: function () {
// show play button after 3 seconds, then disable this event // show play button after 3 seconds, then disable this event
if (event.timeStamp > 3000) { if (this.player.currentTime > 3) {
this.playVisible = true; this.playVisible = true;
this.videoTimeUpdated = () => true; this.videoTimeUpdated = () => true;
} }
}, },
videoLoaded: function () {
if (this.currentVideo >= 0) {
this.player.play();
}
},
playClicked: function () { playClicked: function () {
this.playVisible = false; this.playVisible = false;
switch (this.playing) { this.currentVideo += 1;
case null: this.player.source = this.getVideoSource(this.currentVideo);
// nothing playing: play first source
this.playing = 0;
this.player.play();
break;
case 0:
// first source playing: play second source
this.playing = 1;
this.player.source = this.getVideoSource(1);
this.player.play();
break;
default:
console.log("ERROR: Stranger things are starting to begin!");
break;
}
}, },
}, },
mounted() { mounted() {
document.title = "Herzlichen Glückwunsch!"; document.title = "Herzlichen Glückwunsch!";
this.player.source = this.getVideoSource(0);
}, },
}; };
</script> </script>