add umute overlay.

This commit is contained in:
Miroslav Šedivý 2021-11-27 18:20:01 +01:00
parent d23e5db118
commit ef7975af80

View File

@ -21,8 +21,11 @@
@mouseenter.stop.prevent="onMouseEnter" @mouseenter.stop.prevent="onMouseEnter"
@mouseleave.stop.prevent="onMouseLeave" @mouseleave.stop.prevent="onMouseLeave"
/> />
<div v-if="!playing" class="player-overlay"> <div v-if="!playing && playable" class="player-overlay" @click.stop.prevent="toggle">
<i @click.stop.prevent="toggle" v-if="playable" class="fas fa-play-circle" /> <i class="fas fa-play-circle" />
</div>
<div v-if="mutedOverlay && muted" class="player-overlay" @click.stop.prevent="unmute">
<i class="fas fa-volume-up" />
</div> </div>
<div ref="aspect" class="player-aspect" /> <div ref="aspect" class="player-aspect" />
</div> </div>
@ -151,13 +154,11 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer;
i { i::before {
cursor: pointer; font-size: 120px;
&::before { text-align: center;
font-size: 120px;
text-align: center;
}
} }
&.hidden { &.hidden {
@ -220,6 +221,7 @@
private focused = false private focused = false
private fullscreen = false private fullscreen = false
private startsMuted = true private startsMuted = true
private mutedOverlay = true
get admin() { get admin() {
return this.$accessor.user.admin return this.$accessor.user.admin
@ -515,6 +517,11 @@
} }
} }
unmute() {
this.$accessor.video.setMuted(false)
this.mutedOverlay = false
}
toggleControl() { toggleControl() {
if (!this.playable) { if (!this.playable) {
return return