Fix minor bugs and remove loop control

packages/artplayer/src/control/index.js

@@ -10,7 +10,6 @@ import volume from './volume';
 import setting from './setting';
 import thumbnails from './thumbnails';
 import screenshot from './screenshot';
-import loop from './loop';
 import airplay from './airplay';
 
 export default class Control extends Component {
@@ -21,6 +20,7 @@ export default class Control extends Component {
         this.timer = Date.now();
 
         const { constructor } = art;
+        const { $player } = this.art.template;
 
         art.on('mousemove', () => {
             if (!isMobile) {
@@ -42,32 +42,20 @@ export default class Control extends Component {
             }
         });
 
+        art.on('control', (state) => {
+            if (state) {
+                removeClass($player, 'art-hide-cursor');
+                addClass($player, 'art-hover');
+                this.timer = Date.now();
+            } else {
+                addClass($player, 'art-hide-cursor');
+                removeClass($player, 'art-hover');
+            }
+        });
+
         this.init();
     }
 
-    set show(state) {
-        const { $player } = this.art.template;
-
-        if (state) {
-            removeClass($player, 'art-hide-cursor');
-            addClass($player, 'art-hover');
-            this.timer = Date.now();
-        } else {
-            addClass($player, 'art-hide-cursor');
-            removeClass($player, 'art-hover');
-        }
-
-        super.show = state;
-    }
-
-    get show() {
-        return super.show;
-    }
-
-    toggle() {
-        this.show = !this.show;
-    }
-
     init() {
         const { option } = this.art;
 
@@ -91,14 +79,6 @@ export default class Control extends Component {
             );
         }
 
-        this.add(
-            loop({
-                name: 'loop',
-                position: 'top',
-                index: 30,
-            }),
-        );
-
         this.add(
             playAndPause({
                 name: 'playAndPause',

packages/artplayer/src/control/loop.js

@@ -1,21 +0,0 @@
-import { append, setStyle } from '../utils';
-
-export default function loop(option) {
-    return (art) => ({
-        ...option,
-        mounted: ($control) => {
-            const $left = append($control, `<span class="art-loop-point"></span>`);
-            const $right = append($control, `<span class="art-loop-point"></span>`);
-
-            art.on('loop', (value) => {
-                if (value && value.length) {
-                    setStyle($control, 'display', 'flex');
-                    setStyle($left, 'left', `calc(${(value[0] / art.duration) * 100}% - ${$left.clientWidth}px)`);
-                    setStyle($right, 'left', `${(value[1] / art.duration) * 100}%`);
-                } else {
-                    setStyle($control, 'display', 'none');
-                }
-            });
-        },
-    });
-}

packages/artplayer/src/player/index.js

@@ -21,7 +21,6 @@ import autoSizeMix from './autoSizeMix';
 import rectMix from './rectMix';
 import flipMix from './flipMix';
 import miniMix from './miniMix';
-import loopMix from './loopMix';
 import posterMix from './posterMix';
 import autoHeightMix from './autoHeightMix';
 import cssVarMix from './cssVarMix';
@@ -59,7 +58,6 @@ export default class Player {
         rectMix(art);
         flipMix(art);
         miniMix(art);
-        loopMix(art);
         posterMix(art);
         autoHeightMix(art);
         cssVarMix(art);

packages/artplayer/src/player/loopMix.js

@@ -1,30 +0,0 @@
-import { def, clamp } from '../utils';
-
-export default function loopMix(art) {
-    let interval = [];
-    def(art, 'loop', {
-        get: () => interval,
-        set: (value) => {
-            if (Array.isArray(value) && typeof value[0] === 'number' && typeof value[1] === 'number') {
-                const start = clamp(value[0], 0, Math.min(value[1], art.duration));
-                const end = clamp(value[1], start, art.duration);
-                if (end - start >= 1) {
-                    interval = [start, end];
-                } else {
-                    interval = [];
-                }
-            } else {
-                interval = [];
-            }
-            art.emit('loop', interval);
-        },
-    });
-
-    art.on('video:timeupdate', () => {
-        if (interval.length) {
-            if (art.currentTime < interval[0] || art.currentTime > interval[1]) {
-                art.seek = interval[0];
-            }
-        }
-    });
-}

packages/artplayer/src/style/plugins.less

@@ -3,7 +3,7 @@
         display: flex;
         .art-full();
         top: auto;
-        height: var(--art-mini-progress-height);
+        height: var(--art-mini-progress-height) !important;
         background-color: var(--art-theme);
     }
 

packages/artplayer/src/style/progress.less

@@ -47,7 +47,7 @@
                         .art-full();
                         right: auto;
                         pointer-events: auto;
-                        width: var(--art-highlight-width);
+                        width: var(--art-highlight-width) !important;
                         transform: translateX(calc(var(--art-highlight-width) / -2));
                         background-color: var(--art-highlight-color);
                     }
@@ -112,20 +112,6 @@
             background-color: var(--art-widget-background);
             box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
         }
-
-        .art-control-loop {
-            .art-full();
-            display: none;
-            pointer-events: none;
-
-            .art-loop-point {
-                .art-full();
-                left: 0%;
-                width: var(--art-loop-width);
-                background-color: var(--art-loop-color);
-                transform: translateX(calc(var(--art-loop-width) / -2)) scaleY(1.5);
-            }
-        }
     }
 
     &:hover {

packages/artplayer/src/style/variables.less

@@ -10,7 +10,6 @@
     --art-progress-color: rgba(255, 255, 255, 0.2);
     --art-hover-color: rgba(255, 255, 255, 0.5);
     --art-loaded-color: rgba(255, 255, 255, 0.2);
-    --art-loop-color: rgba(255, 255, 255, 0.75);
     --art-state-size: 80px;
     --art-state-opacity: 0.8;
     --art-bottom-height: 100px;
@@ -18,7 +17,6 @@
     --art-bottom-gap: 5px;
     --art-highlight-width: 8px;
     --art-highlight-color: rgba(255, 255, 255, 0.5);
-    --art-loop-width: 2px;
     --art-control-height: 46px;
     --art-control-opacity: 0.75;
     --art-control-icon-size: 36px;

packages/artplayer/types/cssVar.d.ts

@@ -10,7 +10,6 @@ export type CssVar = {
     '--art-progress-color': string;
     '--art-hover-color': string;
     '--art-loaded-color': string;
-    '--art-loop-color': string;
     '--art-state-size': string;
     '--art-state-opacity': number;
     '--art-bottom-height': string;
@@ -18,7 +17,6 @@ export type CssVar = {
     '--art-bottom-gap': string;
     '--art-highlight-width': string;
     '--art-highlight-color': string;
-    '--art-loop-width': string;
     '--art-control-height': string;
     '--art-control-opacity': number;
     '--art-control-icon-size': string;

packages/artplayer/types/events.d.ts

@@ -62,6 +62,5 @@ export type Events = {
     seek: [currentTime: number];
     subtitleOffset: [offset: number];
     restart: [url: string];
-    loop: [start?: number, end?: number];
     muted: [state: boolean];
 };

packages/artplayer/types/player.d.ts

@@ -31,8 +31,6 @@ export declare class Player {
     set fullscreenWebToggle(state: boolean);
     get loaded(): number;
     get loadedTime(): number;
-    get loop(): number[];
-    set loop(value: number[]);
     get mini(): boolean;
     set mini(state: boolean);
     get pip(): boolean;