From eac37379d39bfd2bbf81d2d2dc48b5bf25d6c0ec Mon Sep 17 00:00:00 2001
From: Harvey Zack <laozhaochaguan@gmail.com>
Date: Thu, 29 Jun 2023 21:44:33 +0800
Subject: [PATCH] add muted

---
 CHANGELOG_CN.md                               |  1 +
 .../docs/advanced/event.md                    | 17 ++++
 .../docs/en/advanced/event.md                 | 97 ++++++++++++-------
 packages/artplayer/src/player/volumeMix.js    |  1 +
 packages/artplayer/types/events.d.ts          |  1 +
 5 files changed, 84 insertions(+), 33 deletions(-)

diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
index c6379e55d..c6bb77a01 100644
--- a/CHANGELOG_CN.md
+++ b/CHANGELOG_CN.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 -   当播放地址发生错误到达上限后，不会再主动销毁播放器
 -   更新组件时，支持填写只更新的字段 [pull/549](https://github.com/zhw2590582/ArtPlayer/pull/549)
 -   当 `autoPlayback` 和 `autoplay` 同时为 `true` 时，会自动跳转播放
+-   添加 `muted` 事件，当静音的状态变化时触发
 
 ## [5.0.9] - 2023-5-14
 
diff --git a/packages/artplayer-vitepress/docs/advanced/event.md b/packages/artplayer-vitepress/docs/advanced/event.md
index 0c0582659..b58e8e0e1 100644
--- a/packages/artplayer-vitepress/docs/advanced/event.md
+++ b/packages/artplayer-vitepress/docs/advanced/event.md
@@ -777,6 +777,23 @@ art.on('setting', (state) => {
 });
 ```
 
+## `muted`
+
+当静音的状态变化时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('muted', (state) => {
+    console.log(state);
+});
+```
+
 ## `video:canplay`
 
 浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容
diff --git a/packages/artplayer-vitepress/docs/en/advanced/event.md b/packages/artplayer-vitepress/docs/en/advanced/event.md
index a0f1ed821..b58e8e0e1 100644
--- a/packages/artplayer-vitepress/docs/en/advanced/event.md
+++ b/packages/artplayer-vitepress/docs/en/advanced/event.md
@@ -102,8 +102,25 @@ art.on('ready', () => {
     art.url = '/assets/sample/video.mp4'
 });
 
-art.on('restart', () => {
-    console.info('restart');
+art.on('restart', (url) => {
+    console.info('restart', url);
+});
+```
+
+## `loop`
+
+当出现区间循环时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('loop', (start, end) => {
+    console.info('loop', start, end);
 });
 ```
 
@@ -179,27 +196,6 @@ art.on('destroy', () => {
 });
 ```
 
-## `url`
-
-当视频地址变化时触发
-
-<div className="run-code">▶ Run Code</div>
-
-```js{10}
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4?t=0'
-});
-
-art.on('url', (url) => {
-    console.info('url', url);
-});
-```
-
 ## `focus`
 
 当播放器获得焦点时触发
@@ -212,8 +208,8 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
 });
 
-art.on('focus', () => {
-    console.info('focus');
+art.on('focus', (event) => {
+    console.info('focus', event);
 });
 ```
 
@@ -229,8 +225,8 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
 });
 
-art.on('blur', () => {
-    console.info('blur');
+art.on('blur', (event) => {
+    console.info('blur', event);
 });
 ```
 
@@ -246,8 +242,8 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
 });
 
-art.on('dblclick', () => {
-    console.info('dblclick');
+art.on('dblclick', (event) => {
+    console.info('dblclick', event);
 });
 ```
 
@@ -263,8 +259,8 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
 });
 
-art.on('click', () => {
-    console.info('click');
+art.on('click', (event) => {
+    console.info('click', event);
 });
 ```
 
@@ -297,8 +293,8 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
 });
 
-art.on('hover', (state) => {
-    console.info('hover', state);
+art.on('hover', (state, event) => {
+    console.info('hover', state, event);
 });
 ```
 
@@ -353,6 +349,24 @@ art.on('view', (state) => {
 });
 ```
 
+## `lock`
+
+在移动端，当锁定的状态发生变化时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});
+
+art.on('lock', (state) => {
+    console.info('lock', state);
+});
+```
+
 ## `aspectRatio`
 
 当播放器长宽比变化时触发
@@ -763,6 +777,23 @@ art.on('setting', (state) => {
 });
 ```
 
+## `muted`
+
+当静音的状态变化时触发
+
+<div className="run-code">▶ Run Code</div>
+
+```js{6}
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('muted', (state) => {
+    console.log(state);
+});
+```
+
 ## `video:canplay`
 
 浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容
diff --git a/packages/artplayer/src/player/volumeMix.js b/packages/artplayer/src/player/volumeMix.js
index 852ba42c0..506b7c1cf 100644
--- a/packages/artplayer/src/player/volumeMix.js
+++ b/packages/artplayer/src/player/volumeMix.js
@@ -23,6 +23,7 @@ export default function volumeMix(art) {
         get: () => $video.muted,
         set: (muted) => {
             $video.muted = muted;
+            art.emit('muted', muted);
         },
     });
 }
diff --git a/packages/artplayer/types/events.d.ts b/packages/artplayer/types/events.d.ts
index 28e53e282..f8cc7ff9b 100644
--- a/packages/artplayer/types/events.d.ts
+++ b/packages/artplayer/types/events.d.ts
@@ -63,4 +63,5 @@ export type Events = {
     subtitleOffset: [offset: number];
     restart: [url: string];
     loop: [start?: number, end?: number];
+    muted: [state: boolean];
 };