update docs

packages/artplayer-plugin-dash-quality/package.json

@@ -21,4 +21,4 @@
         "video",
         "player"
     ]
-}
+}

packages/artplayer-plugin-hls-quality/package.json

@@ -21,4 +21,4 @@
         "video",
         "player"
     ]
-}
+}

packages/artplayer-vitepress/docs/advanced/built-in.md

@@ -234,8 +234,10 @@ art.on('ready', () => {
 管理播放器的层
 
 - `add` 方法用于动态添加层
+- `remove` 方法用于动态删除层
+- `update` 方法用于动态更新层
 - `show` 属性用于设置是否显示全部层
-- `toggle` 属性用于切换是否显示全部层
+- `toggle` 方法用于切换是否显示全部层
 
 <div className="run-code">▶ Run Code</div>
 
@@ -267,8 +269,10 @@ art.on('ready', () => {
 管理播放器的控制器
 
 - `add` 方法用于动态添加控制器
+- `remove` 方法用于动态删除控制器
+- `update` 方法用于动态更新控制器
 - `show` 属性用于设置是否显示全部控制器
-- `toggle` 属性用于切换是否显示全部控制器
+- `toggle` 方法用于切换是否显示全部控制器
 
 <div className="run-code">▶ Run Code</div>
 
@@ -301,8 +305,10 @@ art.on('ready', () => {
 管理播放器的右键菜单
 
 - `add` 方法用于动态添加菜单
+- `remove` 方法用于动态删除菜单
+- `update` 方法用于动态更新菜单
 - `show` 属性用于设置是否显示全部菜单
-- `toggle` 属性用于切换是否显示全部菜单
+- `toggle` 方法用于切换是否显示全部菜单
 
 <div className="run-code">▶ Run Code</div>
 
@@ -438,9 +444,10 @@ art.on('ready', () => {
 管理播放器的设置面板
 
 - `add` 方法用于动态添加设置项
+- `remove` 方法用于动态删除设置项
+- `update` 方法用于动态更新设置项
 - `show` 属性用于设置是否显示全部设置项
-- `toggle` 属性用于切换是否显示全部设置项
-- `update` 方法动态更新设置项
+- `toggle` 方法用于切换是否显示全部设置项
 
 <div className="run-code">▶ Run Code</div>
 

packages/artplayer-vitepress/docs/advanced/class.md

@@ -2,12 +2,6 @@
 
 这里的 `静态属性` 是指挂载在 `构造函数` 的 `一级属性`，非常少使用
 
-:::warning 提示
-
-有些属性是全大写的，说明这些属性是不稳定的，可能会在将来被更改
-
-:::
-
 ## `instances`
 
 返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性
@@ -139,76 +133,4 @@ console.info(Artplayer.html);
 
 ```js
 console.info(Artplayer.option);
-```
-
-## `DEBUG`
-
-## `CONTEXTMENU`
-
-## `NOTICE_TIME`
-
-## `SETTING_WIDTH`
-
-## `SETTING_ITEM_WIDTH`
-
-## `SETTING_ITEM_HEIGHT`
-
-## `INDICATOR_SIZE`
-
-## `INDICATOR_SIZE_ICON`
-
-## `INDICATOR_SIZE_MOBILE`
-
-## `INDICATOR_SIZE_MOBILE_ICON`
-
-## `VOLUME_PANEL_WIDTH`
-
-## `VOLUME_HANDLE_WIDTH`
-
-## `RESIZE_TIME`
-
-## `SCROLL_TIME`
-
-## `SCROLL_GAP`
-
-## `AUTO_PLAYBACK_MAX`
-
-## `AUTO_PLAYBACK_MIN`
-
-## `AUTO_PLAYBACK_TIMEOUT`
-
-## `RECONNECT_TIME_MAX`
-
-## `RECONNECT_SLEEP_TIME`
-
-## `CONTROL_HIDE_TIME`
-
-## `DB_CLICE_TIME`
-
-## `MOBILE_AUTO_PLAYBACKRATE`
-
-## `MOBILE_AUTO_PLAYBACKRATE_TIME`
-
-## `MOBILE_AUTO_ORIENTATION_TIME`
-
-## `INFO_LOOP_TIME`
-
-## `FAST_FORWARD_VALUE`
-
-## `FAST_FORWARD_TIME`
-
-## `TOUCH_MOVE_RATIO`
-
-## `VOLUME_STEP`
-
-## `SEEK_STEP`
-
-## `PROGRESS_HEIGHT`
-
-## `PLAYBACK_RATE`
-
-## `ASPECT_RATIO`
-
-## `FLIP`
-
-## `FULLSCREEN_WEB_IN_BODY`
+```

packages/artplayer-vitepress/docs/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`
 
 当播放器长宽比变化时触发

packages/artplayer-vitepress/docs/advanced/property.md

@@ -907,4 +907,25 @@ var art = new Artplayer({
 });
 
 console.info(art.video);
+```
+
+## `cssVar`
+
+-   Type: `Function`
+
+动态获取或设置 `css` 变量
+
+<div className="run-code">▶ Run Code</div>
+
+```js{8}
+var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.log(art.cssVar('--art-theme'));
+    art.cssVar('--art-theme', 'green');
+    console.log(art.cssVar('--art-theme'));
+});
 ```

packages/artplayer-vitepress/docs/component/controls.md

@@ -64,7 +64,7 @@ var art = new Artplayer({
 
 // Get the Element of control by name
 console.info(art.controls['your-button']);
-console.info(art.controls.subtitle);
+console.info(art.controls['subtitle']);
 ```
 
 ## 添加
@@ -95,7 +95,7 @@ art.controls.add({
 });
 
 // Get the Element of control by name
-console.info(art.controls.button1);
+console.info(art.controls['button1']);
 ```
 
 ## 删除

packages/artplayer-vitepress/package.json

@@ -13,4 +13,4 @@
         "vitepress-plugin-search": "^1.0.4-alpha.20",
         "vue": "^3.2.47"
     }
-}
+}

packages/artplayer/src/style/bottom.less

@@ -13,7 +13,8 @@
         background-size: 100% var(--art-bottom-height);
         .art-bottom-gradient();
 
-        .art-controls, .art-progress {
+        .art-controls,
+        .art-progress {
             transform: translateY(var(--art-bottom-offset));
             transition: transform var(--art-transition-duration) ease;
         }
@@ -23,7 +24,8 @@
     &.art-hover {
         .art-bottom {
             opacity: 1;
-            .art-controls, .art-progress {
+            .art-controls,
+            .art-progress {
                 transform: translateY(0);
             }
         }

packages/artplayer/types/events.d.ts

@@ -61,6 +61,6 @@ export type Events = {
     screenshot: [dataUri: string];
     seek: [currentTime: number];
     subtitleOffset: [offset: number];
-    restart: [];
+    restart: [url: string];
     loop: [start?: number, end?: number];
 };

packages/artplayer/types/option.d.ts

@@ -6,7 +6,7 @@ import { CssVar } from './cssVar';
 import { ComponentOption } from './component';
 import Artplayer = require('./artplayer');
 
-type CustomType = 'flv' | 'm3u8' | 'hls' | 'ts' | 'mpd' | 'torrent' | (string & Record<never, never>);
+export type CustomType = 'flv' | 'm3u8' | 'hls' | 'ts' | 'mpd' | 'torrent' | (string & Record<never, never>);
 
 export type Option = {
     /**

packages/artplayer/types/player.d.ts

@@ -1,4 +1,5 @@
 import { CssVar } from './cssVar';
+import { CustomType } from './option';
 
 export type AspectRatio = 'default' | '4:3' | '16:9' | (`${number}:${number}` & Record<never, never>);
 export type PlaybackRate = 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 1.75 | 2.0 | (number & Record<never, never>);
@@ -10,6 +11,8 @@ export declare class Player {
     set aspectRatio(ratio: AspectRatio);
     get state(): State;
     set state(state: State);
+    get type(): CustomType;
+    set type(name: CustomType);
     get playbackRate(): PlaybackRate;
     set playbackRate(rate: PlaybackRate);
     get autoSize(): boolean;