add fastForward

packages/artplayer-document/docs/en/Options.md

@@ -1043,7 +1043,7 @@ var art = new Artplayer({
 ## lock
 
 -   Type: `Boolean`
--   Default: `true`
+-   Default: `false`
 
 Whether to display a lock button on the mobile side to hide the bottom control bar
 
@@ -1057,6 +1057,23 @@ var art = new Artplayer({
 });
 ```
 
+## fastForward
+
+-   Type: `Boolean`
+-   Default: `false`
+
+Whether to display a fast forward button on the mobile
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});
+```
+
 ## autoPlayback
 
 -   Type: `Boolean`

packages/artplayer-document/docs/zh-cn/Options.md

@@ -1044,7 +1044,7 @@ var art = new Artplayer({
 ## lock
 
 -   类型: `Boolean`
--   默认: `true`
+-   默认: `false`
 
 是否在移动端显示一个锁定按钮，用于隐藏底部控制栏
 
@@ -1058,6 +1058,23 @@ var art = new Artplayer({
 });
 ```
 
+## fastForward
+
+-   类型: `Boolean`
+-   默认: `false`
+
+是否在移动端显示一个快进按钮
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});
+```
+
 ## autoPlayback
 
 -   类型: `Boolean`

packages/artplayer/package.json

@@ -1,6 +1,6 @@
 {
     "name": "artplayer",
-    "version": "4.3.9",
+    "version": "4.3.10",
     "expose": "Artplayer",
     "description": "ArtPlayer.js is a modern and full featured HTML5 video player",
     "main": "dist/artplayer.js",

packages/artplayer/src/icons/fast-forward.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1651038028334" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3595" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22">
+<path d="M825.8 498.005l-287.404-248.12c-10.695-9.188-26.396-0.882-26.396 14.023v496.298c0 14.905 15.701 23.182 26.396 13.995L825.8 525.995a18.859 18.859 0 0 0 0-27.99z m-320 0l-287.404-248.12c-10.695-9.188-26.396-0.882-26.396 14.023v496.298c0 14.905 15.701 23.182 26.396 13.995L505.8 525.995A18.603 18.603 0 0 0 512 512a18.603 18.603 0 0 0-6.2-13.995z" p-id="3596"></path>
+</svg>

packages/artplayer/src/icons/index.js

@@ -19,6 +19,7 @@ import config from './config.svg';
 import pip from './pip.svg';
 import lock from './lock.svg';
 import unlock from './unlock.svg';
+import fastForward from './fast-forward.svg';
 
 export default class Icons {
     constructor(art) {
@@ -43,6 +44,7 @@ export default class Icons {
             config,
             lock,
             unlock,
+            fastForward,
             ...art.option.icons,
         };
 

packages/artplayer/src/index.js

@@ -146,7 +146,8 @@ export default class Artplayer extends Emitter {
             miniProgressBar: false,
             useSSR: false,
             playsInline: true,
-            lock: true,
+            lock: false,
+            fastForward: false,
             autoPlayback: false,
             autoOrientation: false,
             ads: [],

packages/artplayer/src/plugins/fastForward.js

@@ -0,0 +1,39 @@
+import { hasClass, addClass, removeClass } from '../utils';
+
+export default function fastForward(art) {
+    const {
+        layers,
+        icons,
+        events: { proxy },
+        template: { $player },
+    } = art;
+
+    layers.add({
+        name: 'fast-forward',
+        html: icons.fastForward,
+        mounted($layer) {
+            let isPress = false;
+
+            proxy($layer, 'touchstart', () => {
+                isPress = true;
+                art.playbackRate = 3;
+                addClass($player, 'art-fast-forward');
+            });
+
+            proxy(document, 'touchend', () => {
+                if (isPress) {
+                    isPress = false;
+                    art.playbackRate = 1;
+                    removeClass($player, 'art-fast-forward');
+                }
+            });
+        },
+    });
+
+    return {
+        name: 'fastForward',
+        get state() {
+            return hasClass($player, 'art-fast-forward');
+        },
+    };
+}

packages/artplayer/src/plugins/index.js

@@ -2,6 +2,7 @@ import { errorHandle, isMobile, has, def } from '../utils';
 import miniProgressBar from './miniProgressBar';
 import autoOrientation from './autoOrientation';
 import autoPlayback from './autoPlayback';
+import fastForward from './fastForward';
 import lock from './lock';
 
 export default class Plugins {
@@ -27,6 +28,10 @@ export default class Plugins {
             this.add(autoOrientation);
         }
 
+        if (option.fastForward && isMobile) {
+            this.add(fastForward);
+        }
+
         for (let index = 0; index < option.plugins.length; index++) {
             this.add(option.plugins[index]);
         }

packages/artplayer/src/scheme/index.js

@@ -57,6 +57,7 @@ export default {
     useSSR: b,
     playsInline: b,
     lock: b,
+    fastForward: b,
     autoPlayback: b,
     autoOrientation: b,
     ads: [

packages/artplayer/src/style/plugins.scss

@@ -13,14 +13,9 @@
         background-color: rgba(0, 0, 0, 0.5);
     }
 
-    &.art-control-show {
-        .art-layer-lock {
-            display: flex;
-        }
-    }
-
     &.art-lock {
-        .art-bottom {
+        .art-bottom,
+        .art-layer-fast-forward {
             display: none !important;
         }
 
@@ -28,4 +23,28 @@
             bottom: 10px !important;
         }
     }
+
+    .art-layer-fast-forward {
+        display: none;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        right: 15px;
+        top: calc(50% - 17px);
+        height: 34px;
+        width: 34px;
+        color: #fff;
+        border-radius: 50%;
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    &.art-control-show {
+        .art-layer-lock {
+            display: flex;
+        }
+
+        .art-layer-fast-forward {
+            display: flex;
+        }
+    }
 }

packages/artplayer/types/artplayer.d.ts

@@ -329,6 +329,11 @@ type Option = {
      */
     lock?: boolean;
 
+    /**
+     * Whether use fast forward in mobile
+     */
+    fastForward?: boolean;
+
     /**
      * Whether use auto playback
      */