add umute overlay.

client/src/components/video.vue

@@ -21,8 +21,11 @@
           @mouseenter.stop.prevent="onMouseEnter"
           @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 ref="aspect" class="player-aspect" />
       </div>
@@ -151,14 +154,12 @@
           display: flex;
           justify-content: center;
           align-items: center;
-
-          i {
           cursor: pointer;
-            &::before {
+
+          i::before {
             font-size: 120px;
             text-align: center;
           }
-          }
 
           &.hidden {
             display: none;
@@ -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