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

responsivity

Browse source
This commit is contained in:
Jörn-Michael Miehe 2020-09-06 19:09:02 +02:00
parent 4ac92d972c
commit ad4493380a
1 changed files with 42 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,20 +1,29 @@
<template> <template>
<div id="bday"> <div class="bday">
<h1>Alles Gute zu Deinem Geburtstag!</h1> <h1>Alles Gute zu Deinem Geburtstag!</h1>
<img id="play" src="../assets/play.png" usemap="#play" v-if="playVisible" /> <div ref="plyrContainer" class="plyrContainer">
<map name="#play"> <img
<area shape="circle" coords="50, 50, 50" @click="playClicked" /> ref="play"
</map> class="play"
<vue-plyr src="../assets/play.png"
ref="plyr" usemap="#play"
:options="plyrOptions" v-show="playVisible"
:emit="['timeupdate', 'ready']" @click="playClicked"
@timeupdate="videoTimeUpdated" />
@ready="videoLoaded" <map name="#play">
> <area shape="circle" coords="50, 50, 50" @click="playClicked" />
<!-- inserted dynamically --> </map>
<video poster="../assets/poster.png" /> <vue-plyr
</vue-plyr> ref="plyr"
:options="plyrOptions"
:emit="['timeupdate', 'ready']"
@timeupdate="videoTimeUpdated"
@ready="videoLoaded"
>
<!-- inserted dynamically -->
<video poster="../assets/poster.png" />
</vue-plyr>
</div>
</div> </div>
</template> </template>
@ -69,6 +78,7 @@ export default {
}, },
videoLoaded: function () { videoLoaded: function () {
this.placePlay();
if (this.currentVideo >= 0) { if (this.currentVideo >= 0) {
this.player.play(); this.player.play();
} }
@ -80,22 +90,36 @@ export default {
this.currentVideo += 1; this.currentVideo += 1;
this.player.source = this.getVideoSource(this.currentVideo); this.player.source = this.getVideoSource(this.currentVideo);
}, },
placePlay: function () {
let top = (this.$refs.plyrContainer.offsetHeight - 100) / 2;
let left = (this.$refs.plyrContainer.offsetWidth - 100) / 2;
console.log(left, top);
this.$refs.play.style.top = top + "px";
this.$refs.play.style.left = left + "px";
},
}, },
mounted() { mounted() {
document.title = "Herzlichen Glückwunsch!"; document.title = "Herzlichen Glückwunsch!";
window.addEventListener("resize", this.placePlay);
}, },
}; };
</script> </script>
<style scoped> <style scoped>
div#bday { div.bday {
margin: auto; margin: auto;
width: 854px; max-width: 854px;
}
div.plyrContainer {
position: relative; position: relative;
} }
img#play { img.play {
outline: none; outline: none;
-webkit-user-select: none; /* Safari */ -webkit-user-select: none; /* Safari */
@ -104,8 +128,6 @@ img#play {
user-select: none; /* Standard */ user-select: none; /* Standard */
position: absolute; position: absolute;
bottom: 190px;
left: 377px;
z-index: 1001; z-index: 1001;
} }