From 6fa8c3c1f8eefe3e270ea729cc65afec692a5b97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Sun, 29 Nov 2020 12:06:01 +0100
Subject: [PATCH] add video mute event.

---
 src/component/internal/video.ts | 2 ++
 src/component/main.vue          | 9 +++++++++
 src/component/types/state.ts    | 3 ++-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/component/internal/video.ts b/src/component/internal/video.ts
index 0446a2bc..9b284bb5 100644
--- a/src/component/internal/video.ts
+++ b/src/component/internal/video.ts
@@ -20,10 +20,12 @@ export function register(el: HTMLVideoElement, state: Video) {
     Vue.set(state, 'playing', false)
   })
   el.addEventListener('volumechange', (value) => {
+    Vue.set(state, 'muted', el.muted)
     Vue.set(state, 'volume', el.volume)
   })
 
   // Initial state
+  Vue.set(state, 'muted', el.muted)
   Vue.set(state, 'volume', el.volume)
   Vue.set(state, 'playing', !el.paused)
 }
diff --git a/src/component/main.vue b/src/component/main.vue
index 347c49b9..8e979eaa 100644
--- a/src/component/main.vue
+++ b/src/component/main.vue
@@ -83,6 +83,7 @@
         playable: false,
         playing: false,
         volume: 0,
+        muted: false,
         fullscreen: false,
       },
       control: {
@@ -156,6 +157,14 @@
       this._video.pause()
     }
 
+    public mute() {
+      this._video.muted = true
+    }
+
+    public unmute() {
+      this._video.muted = false
+    }
+
     public setVolume(value: number) {
       if (value < 0 || value > 1) {
         throw new Error('Out of range. Value must be between 0 and 1.')
diff --git a/src/component/types/state.ts b/src/component/types/state.ts
index eeebd644..3e59974e 100644
--- a/src/component/types/state.ts
+++ b/src/component/types/state.ts
@@ -25,7 +25,8 @@ export interface Connection {
 export interface Video {
   playable: boolean
   playing: boolean
-  volume: number 
+  volume: number
+  muted: boolean
   fullscreen: boolean
 }