添加区间循环UI

packages/artplayer/src/control/index.js

@@ -12,6 +12,7 @@ import setting from './setting';
 import thumbnails from './thumbnails';
 import screenshot from './screenshot';
 import quality from './quality';
+import loop from './loop';
 
 export default class Control extends Component {
     constructor(art) {
@@ -54,6 +55,15 @@ export default class Control extends Component {
                 }),
             );
 
+            this.add(
+                loop({
+                    name: 'loop',
+                    disable: false,
+                    position: 'top',
+                    index: 30,
+                }),
+            );
+
             this.add(
                 playAndPause({
                     name: 'playAndPause',

packages/artplayer/src/control/loop.js

@@ -0,0 +1,23 @@
+import { append, setStyle } from '../utils';
+
+export default function loop(option) {
+    return (art) => ({
+        ...option,
+        mounted: ($control) => {
+            const { player } = art;
+
+            const $left = append($control, '<span class="art-loop-left"></span>');
+            const $right = append($control, '<span class="art-loop-right"></span>');
+
+            art.on('loopAdd', (value) => {
+                setStyle($control, 'display', 'block');
+                setStyle($left, 'left', `calc(${(value[0] / player.duration) * 100}% - 6px)`);
+                setStyle($right, 'left', `${(value[1] / player.duration) * 100}%`);
+            });
+
+            art.on('loopRemove', () => {
+                setStyle($control, 'display', 'node');
+            });
+        },
+    });
+}

packages/artplayer/src/style/bottom.scss

@@ -128,6 +128,32 @@
                 pointer-events: none;
                 background-color: rgba(0, 0, 0, 0.7);
             }
+
+            .art-control-loop {
+                display: none;
+                position: absolute;
+                width: 100%;
+                bottom: 10px;
+                pointer-events: none;
+
+                .art-loop-left {
+                    position: absolute;
+                    left: 0;
+                    width: 0;
+                    height: 0;
+                    border-bottom: 6px solid #fff;
+                    border-left: 6px solid transparent;
+                }
+
+                .art-loop-right {
+                    position: absolute;
+                    left: 0;
+                    width: 0;
+                    height: 0;
+                    border-bottom: 6px solid #fff;
+                    border-right: 6px solid transparent;
+                }
+            }
         }
 
         .art-controls {