update fastForward

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

@@ -1062,7 +1062,7 @@ var art = new Artplayer({
 -   Type: `Boolean`
 -   Default: `false`
 
-Whether to display a fast forward button on the mobile
+Whether to add fast forward function on the mobile, when long press the video
 
 <div className="run-code">▶ Run Code</div>
 

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

@@ -1063,7 +1063,7 @@ var art = new Artplayer({
 -   类型: `Boolean`
 -   默认: `false`
 
-是否在移动端显示一个快进按钮
+是否在移动端添加长按视频快进功能
 
 <div className="run-code">▶ Run Code</div>
 

packages/artplayer/src/icons/index.js

@@ -19,7 +19,6 @@ 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) {
@@ -44,7 +43,6 @@ export default class Icons {
             config,
             lock,
             unlock,
-            fastForward,
             ...art.option.icons,
         };
 

packages/artplayer/src/plugins/fastForward.js

@@ -2,35 +2,35 @@ import { hasClass, addClass, removeClass } from '../utils';
 
 export default function fastForward(art) {
     const {
-        layers,
-        icons,
         events: { proxy },
-        template: { $player },
+        template: { $player, $video },
     } = art;
 
-    layers.add({
-        name: 'fast-forward',
-        html: icons.fastForward,
-        mounted($layer) {
-            let isPress = false;
+    let isPress = false;
+    let timer = null;
 
-            proxy($layer, 'touchstart', () => {
-                if (art.playing) {
-                    isPress = true;
-                    art.playbackRate = 3;
-                    addClass($player, 'art-fast-forward');
-                }
-            });
+    const onStart = () => {
+        if (art.playing) {
+            timer = setTimeout(() => {
+                isPress = true;
+                art.playbackRate = 3;
+                addClass($player, 'art-fast-forward');
+            }, 1000);
+        }
+    };
 
-            proxy(document, 'touchend', () => {
-                if (isPress) {
-                    isPress = false;
-                    art.playbackRate = 1;
-                    removeClass($player, 'art-fast-forward');
-                }
-            });
-        },
-    });
+    const onStop = () => {
+        clearTimeout(timer);
+        if (isPress) {
+            isPress = false;
+            art.playbackRate = 1;
+            removeClass($player, 'art-fast-forward');
+        }
+    };
+
+    proxy($video, 'touchstart', onStart);
+    proxy(document, 'touchmove', onStop);
+    proxy(document, 'touchend', onStop);
 
     return {
         name: 'fastForward',