From ef7975af80599e848f1f98a52bfee44d6eeef733 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Sat, 27 Nov 2021 18:20:01 +0100
Subject: [PATCH] add umute overlay.

---
 client/src/components/video.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

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