build all

Refactor utility functions for improved readability and consistency

- Updated compatibility.js to use consistent line endings and formatting.
- Refactored component.js for better readability and structure, including consistent use of arrow functions and binding.
- Simplified dom.js functions with consistent formatting and improved readability.
- Enhanced emitter.js with consistent formatting and arrow function usage.
- Streamlined error.js for improved readability and consistency.
- Refactored file.js to use consistent formatting and improved readability.
- Improved format.js functions for better readability and consistency.
- Updated index.js to maintain consistent export formatting.
- Refactored property.js for improved readability and consistency.
- Enhanced subtitle.js with consistent formatting and improved readability.
- Refactored time.js for better readability and consistent formatting.

fix: update lint script to target only source files for consistency

Revert "fix: restore export statements for various plugins and update type definitions for better clarity"

This reverts commit b5e969d81ec765cd8a34b06e6ef4f232ef25087f.

fix: restore export statements for various plugins and update type definitions for better clarity

Refactor type definitions to use interfaces instead of type aliases for better extensibility and clarity across i18n, icons, option, player, quality, setting, subtitle, template, and utils modules.

packages/artplayer/src/events/clickInit.js

@@ -1,59 +1,62 @@
-import { includeFromEvent, isMobile } from '../utils';
+import { includeFromEvent, isMobile } from '../utils'
 
 export default function clickInit(art, events) {
-    const {
-        constructor,
-        template: { $player, $video },
-    } = art;
+  const {
+    constructor,
+    template: { $player, $video },
+  } = art
 
-    events.proxy(document, ['click', 'contextmenu'], (event) => {
-        if (includeFromEvent(event, $player)) {
-            art.isInput = event.target.tagName === 'INPUT';
-            art.isFocus = true;
-            art.emit('focus', event);
-        } else {
-            art.isInput = false;
-            art.isFocus = false;
-            art.emit('blur', event);
+  events.proxy(document, ['click', 'contextmenu'], (event) => {
+    if (includeFromEvent(event, $player)) {
+      art.isInput = event.target.tagName === 'INPUT'
+      art.isFocus = true
+      art.emit('focus', event)
+    }
+    else {
+      art.isInput = false
+      art.isFocus = false
+      art.emit('blur', event)
+    }
+  })
+
+  let clickTimes = []
+  events.proxy($video, 'click', (event) => {
+    const now = Date.now()
+    clickTimes.push(now)
+    const { MOBILE_CLICK_PLAY, DBCLICK_TIME, MOBILE_DBCLICK_PLAY, DBCLICK_FULLSCREEN } = constructor
+
+    const clicks = clickTimes.filter(t => now - t <= DBCLICK_TIME)
+    switch (clicks.length) {
+      case 1:
+        art.emit('click', event)
+
+        if (isMobile) {
+          if (!art.isLock && MOBILE_CLICK_PLAY) {
+            art.toggle()
+          }
         }
-    });
-
-    let clickTimes = [];
-    events.proxy($video, 'click', (event) => {
-        const now = Date.now();
-        clickTimes.push(now);
-        const { MOBILE_CLICK_PLAY, DBCLICK_TIME, MOBILE_DBCLICK_PLAY, DBCLICK_FULLSCREEN } = constructor;
-
-        const clicks = clickTimes.filter((t) => now - t <= DBCLICK_TIME);
-        switch (clicks.length) {
-            case 1:
-                art.emit('click', event);
-
-                if (isMobile) {
-                    if (!art.isLock && MOBILE_CLICK_PLAY) {
-                        art.toggle();
-                    }
-                } else {
-                    art.toggle();
-                }
-                clickTimes = clicks;
-                break;
-            case 2:
-                art.emit('dblclick', event);
-
-                if (isMobile) {
-                    if (!art.isLock && MOBILE_DBCLICK_PLAY) {
-                        art.toggle();
-                    }
-                } else {
-                    if (DBCLICK_FULLSCREEN) {
-                        art.fullscreen = !art.fullscreen;
-                    }
-                }
-                clickTimes = [];
-                break;
-            default:
-                clickTimes = [];
+        else {
+          art.toggle()
         }
-    });
+        clickTimes = clicks
+        break
+      case 2:
+        art.emit('dblclick', event)
+
+        if (isMobile) {
+          if (!art.isLock && MOBILE_DBCLICK_PLAY) {
+            art.toggle()
+          }
+        }
+        else {
+          if (DBCLICK_FULLSCREEN) {
+            art.fullscreen = !art.fullscreen
+          }
+        }
+        clickTimes = []
+        break
+      default:
+        clickTimes = []
+    }
+  })
 }

packages/artplayer/src/events/documentInit.js

@@ -1,9 +1,9 @@
 export default function documentInit(art, events) {
-    events.proxy(document, 'mousemove', (event) => {
-        art.emit('document:mousemove', event);
-    });
+  events.proxy(document, 'mousemove', (event) => {
+    art.emit('document:mousemove', event)
+  })
 
-    events.proxy(document, 'mouseup', (event) => {
-        art.emit('document:mouseup', event);
-    });
+  events.proxy(document, 'mouseup', (event) => {
+    art.emit('document:mouseup', event)
+  })
 }

packages/artplayer/src/events/gestureInit.js

@@ -1,101 +1,104 @@
-import { clamp, secondToTime, isMobile } from '../utils';
-import { setCurrentTime } from '../control/progress';
+import { setCurrentTime } from '../control/progress'
+import { clamp, isMobile, secondToTime } from '../utils'
 
 function GetSlideAngle(dx, dy) {
-    return (Math.atan2(dy, dx) * 180) / Math.PI;
+  return (Math.atan2(dy, dx) * 180) / Math.PI
 }
 
 function GetSlideDirection(startX, startY, endX, endY) {
-    var dy = startY - endY;
-    var dx = endX - startX;
-    var result = 0;
+  const dy = startY - endY
+  const dx = endX - startX
+  let result = 0
 
-    if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
-        return result;
-    }
+  if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
+    return result
+  }
 
-    var angle = GetSlideAngle(dx, dy);
-    if (angle >= -45 && angle < 45) {
-        result = 4;
-    } else if (angle >= 45 && angle < 135) {
-        result = 1;
-    } else if (angle >= -135 && angle < -45) {
-        result = 2;
-    } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
-        result = 3;
-    }
+  const angle = GetSlideAngle(dx, dy)
+  if (angle >= -45 && angle < 45) {
+    result = 4
+  }
+  else if (angle >= 45 && angle < 135) {
+    result = 1
+  }
+  else if (angle >= -135 && angle < -45) {
+    result = 2
+  }
+  else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
+    result = 3
+  }
 
-    return result;
+  return result
 }
 
 export default function gestureInit(art, events) {
-    if (isMobile && !art.option.isLive) {
-        const { $video, $progress } = art.template;
+  if (isMobile && !art.option.isLive) {
+    const { $video, $progress } = art.template
 
-        let touchTarget = null;
-        let isDragging = false;
-        let startX = 0;
-        let startY = 0;
-        let startTime = 0;
+    let touchTarget = null
+    let isDragging = false
+    let startX = 0
+    let startY = 0
+    let startTime = 0
 
-        const onTouchStart = (event) => {
-            if (event.touches.length === 1 && !art.isLock) {
-                if (touchTarget === $progress) {
-                    setCurrentTime(art, event);
-                }
-
-                isDragging = true;
-                const { pageX, pageY } = event.touches[0];
-                startX = pageX;
-                startY = pageY;
-                startTime = art.currentTime;
-            }
-        };
-
-        const onTouchMove = (event) => {
-            if (event.touches.length === 1 && isDragging && art.duration) {
-                const { pageX, pageY } = event.touches[0];
-                const direction = GetSlideDirection(startX, startY, pageX, pageY);
-                const isHorizontal = [3, 4].includes(direction);
-                const isVertical = [1, 2].includes(direction);
-                const isLegal = (isHorizontal && !art.isRotate) || (isVertical && art.isRotate);
-                if (isLegal) {
-                    const ratioX = clamp((pageX - startX) / art.width, -1, 1);
-                    const ratioY = clamp((pageY - startY) / art.height, -1, 1);
-                    const ratio = art.isRotate ? ratioY : ratioX;
-                    const TOUCH_MOVE_RATIO = touchTarget === $video ? art.constructor.TOUCH_MOVE_RATIO : 1;
-                    const currentTime = clamp(startTime + art.duration * ratio * TOUCH_MOVE_RATIO, 0, art.duration);
-                    art.seek = currentTime;
-                    art.emit('setBar', 'played', clamp(currentTime / art.duration, 0, 1), event);
-                    art.notice.show = `${secondToTime(currentTime)} / ${secondToTime(art.duration)}`;
-                }
-            }
-        };
-
-        const onTouchEnd = () => {
-            if (isDragging) {
-                startX = 0;
-                startY = 0;
-                startTime = 0;
-                isDragging = false;
-                touchTarget = null;
-            }
-        };
-
-        if (art.option.gesture) {
-            events.proxy($video, 'touchstart', (event) => {
-                touchTarget = $video;
-                onTouchStart(event);
-            });
-            events.proxy($video, 'touchmove', onTouchMove);
+    const onTouchStart = (event) => {
+      if (event.touches.length === 1 && !art.isLock) {
+        if (touchTarget === $progress) {
+          setCurrentTime(art, event)
         }
 
-        events.proxy($progress, 'touchstart', (event) => {
-            touchTarget = $progress;
-            onTouchStart(event);
-        });
-
-        events.proxy($progress, 'touchmove', onTouchMove);
-        events.proxy(document, 'touchend', onTouchEnd);
+        isDragging = true
+        const { pageX, pageY } = event.touches[0]
+        startX = pageX
+        startY = pageY
+        startTime = art.currentTime
+      }
     }
+
+    const onTouchMove = (event) => {
+      if (event.touches.length === 1 && isDragging && art.duration) {
+        const { pageX, pageY } = event.touches[0]
+        const direction = GetSlideDirection(startX, startY, pageX, pageY)
+        const isHorizontal = [3, 4].includes(direction)
+        const isVertical = [1, 2].includes(direction)
+        const isLegal = (isHorizontal && !art.isRotate) || (isVertical && art.isRotate)
+        if (isLegal) {
+          const ratioX = clamp((pageX - startX) / art.width, -1, 1)
+          const ratioY = clamp((pageY - startY) / art.height, -1, 1)
+          const ratio = art.isRotate ? ratioY : ratioX
+          const TOUCH_MOVE_RATIO = touchTarget === $video ? art.constructor.TOUCH_MOVE_RATIO : 1
+          const currentTime = clamp(startTime + art.duration * ratio * TOUCH_MOVE_RATIO, 0, art.duration)
+          art.seek = currentTime
+          art.emit('setBar', 'played', clamp(currentTime / art.duration, 0, 1), event)
+          art.notice.show = `${secondToTime(currentTime)} / ${secondToTime(art.duration)}`
+        }
+      }
+    }
+
+    const onTouchEnd = () => {
+      if (isDragging) {
+        startX = 0
+        startY = 0
+        startTime = 0
+        isDragging = false
+        touchTarget = null
+      }
+    }
+
+    if (art.option.gesture) {
+      events.proxy($video, 'touchstart', (event) => {
+        touchTarget = $video
+        onTouchStart(event)
+      })
+      events.proxy($video, 'touchmove', onTouchMove)
+    }
+
+    events.proxy($progress, 'touchstart', (event) => {
+      touchTarget = $progress
+      onTouchStart(event)
+    })
+
+    events.proxy($progress, 'touchmove', onTouchMove)
+    events.proxy(document, 'touchend', onTouchEnd)
+  }
 }

packages/artplayer/src/events/hoverInit.js

@@ -1,17 +1,17 @@
-import { addClass, removeClass } from '../utils';
+import { addClass, removeClass } from '../utils'
 
 export default function hoverInit(art, events) {
-    const { $player } = art.template;
+  const { $player } = art.template
 
-    events.hover(
-        $player,
-        (event) => {
-            addClass($player, 'art-hover');
-            art.emit('hover', true, event);
-        },
-        (event) => {
-            removeClass($player, 'art-hover');
-            art.emit('hover', false, event);
-        },
-    );
+  events.hover(
+    $player,
+    (event) => {
+      addClass($player, 'art-hover')
+      art.emit('hover', true, event)
+    },
+    (event) => {
+      removeClass($player, 'art-hover')
+      art.emit('hover', false, event)
+    },
+  )
 }

packages/artplayer/src/events/index.js

@@ -1,61 +1,59 @@
-import clickInit from './clickInit';
-import hoverInit from './hoverInit';
-import moveInit from './moveInit';
-import resizeInit from './resizeInit';
-import gestureInit from './gestureInit';
-import viewInit from './viewInit';
-import documentInit from './documentInit';
-import updateInit from './updateInit';
-import restoreInit from './restoreInit';
+import clickInit from './clickInit'
+import documentInit from './documentInit'
+import gestureInit from './gestureInit'
+import hoverInit from './hoverInit'
+import moveInit from './moveInit'
+import resizeInit from './resizeInit'
+import updateInit from './updateInit'
+import viewInit from './viewInit'
 
 export default class Events {
-    constructor(art) {
-        this.destroyEvents = [];
-        this.proxy = this.proxy.bind(this);
-        this.hover = this.hover.bind(this);
+  constructor(art) {
+    this.destroyEvents = []
+    this.proxy = this.proxy.bind(this)
+    this.hover = this.hover.bind(this)
 
-        clickInit(art, this);
-        hoverInit(art, this);
-        moveInit(art, this);
-        resizeInit(art, this);
-        gestureInit(art, this);
-        viewInit(art, this);
-        documentInit(art, this);
-        updateInit(art, this);
-        restoreInit(art, this);
+    clickInit(art, this)
+    hoverInit(art, this)
+    moveInit(art, this)
+    resizeInit(art, this)
+    gestureInit(art, this)
+    viewInit(art, this)
+    documentInit(art, this)
+    updateInit(art, this)
+  }
+
+  proxy(target, name, callback, option = {}) {
+    if (Array.isArray(name)) {
+      return name.map(item => this.proxy(target, item, callback, option))
     }
 
-    proxy(target, name, callback, option = {}) {
-        if (Array.isArray(name)) {
-            return name.map((item) => this.proxy(target, item, callback, option));
-        }
+    target.addEventListener(name, callback, option)
+    const destroy = () => target.removeEventListener(name, callback, option)
+    this.destroyEvents.push(destroy)
+    return destroy
+  }
 
-        target.addEventListener(name, callback, option);
-        const destroy = () => target.removeEventListener(name, callback, option);
-        this.destroyEvents.push(destroy);
-        return destroy;
+  hover(target, mouseenter, mouseleave) {
+    if (mouseenter) {
+      this.proxy(target, 'mouseenter', mouseenter)
     }
+    if (mouseleave) {
+      this.proxy(target, 'mouseleave', mouseleave)
+    }
+  }
 
-    hover(target, mouseenter, mouseleave) {
-        if (mouseenter) {
-            this.proxy(target, 'mouseenter', mouseenter);
-        }
-        if (mouseleave) {
-            this.proxy(target, 'mouseleave', mouseleave);
-        }
+  remove(destroyEvent) {
+    const index = this.destroyEvents.indexOf(destroyEvent)
+    if (index > -1) {
+      destroyEvent()
+      this.destroyEvents.splice(index, 1)
     }
+  }
 
-    remove(destroyEvent) {
-        const index = this.destroyEvents.indexOf(destroyEvent);
-        if (index > -1) {
-            destroyEvent();
-            this.destroyEvents.splice(index, 1);
-        }
-    }
-
-    destroy() {
-        for (let index = 0; index < this.destroyEvents.length; index++) {
-            this.destroyEvents[index]();
-        }
+  destroy() {
+    for (let index = 0; index < this.destroyEvents.length; index++) {
+      this.destroyEvents[index]()
     }
+  }
 }

packages/artplayer/src/events/moveInit.js

@@ -1,7 +1,7 @@
 export default function moveInit(art, events) {
-    const { $player } = art.template;
+  const { $player } = art.template
 
-    events.proxy($player, 'mousemove', (event) => {
-        art.emit('mousemove', event);
-    });
+  events.proxy($player, 'mousemove', (event) => {
+    art.emit('mousemove', event)
+  })
 }

packages/artplayer/src/events/resizeInit.js

@@ -1,20 +1,20 @@
-import { debounce } from '../utils';
+import { debounce } from '../utils'
 
 export default function resizeInit(art, events) {
-    const { option, constructor } = art;
+  const { option, constructor } = art
 
-    art.on('resize', () => {
-        const { aspectRatio, notice } = art;
-        if (art.state === 'standard' && option.autoSize) {
-            art.autoSize();
-        }
-        art.aspectRatio = aspectRatio;
-        notice.show = '';
-    });
-
-    const resizeFn = debounce(() => art.emit('resize'), constructor.RESIZE_TIME);
-    events.proxy(window, ['orientationchange', 'resize'], () => resizeFn());
-    if (screen && screen.orientation && screen.orientation.onchange) {
-        events.proxy(screen.orientation, 'change', () => resizeFn());
+  art.on('resize', () => {
+    const { aspectRatio, notice } = art
+    if (art.state === 'standard' && option.autoSize) {
+      art.autoSize()
     }
+    art.aspectRatio = aspectRatio
+    notice.show = ''
+  })
+
+  const resizeFn = debounce(() => art.emit('resize'), constructor.RESIZE_TIME)
+  events.proxy(window, ['orientationchange', 'resize'], () => resizeFn())
+  if (screen && screen.orientation && screen.orientation.onchange) {
+    events.proxy(screen.orientation, 'change', () => resizeFn())
+  }
 }

packages/artplayer/src/events/restoreInit.js

@@ -1,3 +0,0 @@
-export default function restoreInit(art, events) {
-    //
-}

packages/artplayer/src/events/updateInit.js

@@ -1,19 +1,19 @@
 export default function updateInit(art) {
-    if (art.constructor.USE_RAF) {
-        let timer = null;
+  if (art.constructor.USE_RAF) {
+    let timer = null;
 
-        (function update() {
-            if (art.playing) {
-                art.emit('raf');
-            }
+    (function update() {
+      if (art.playing) {
+        art.emit('raf')
+      }
 
-            if (!art.isDestroy) {
-                timer = requestAnimationFrame(update);
-            }
-        })();
+      if (!art.isDestroy) {
+        timer = requestAnimationFrame(update)
+      }
+    })()
 
-        art.on('destroy', () => {
-            cancelAnimationFrame(timer);
-        });
-    }
+    art.on('destroy', () => {
+      cancelAnimationFrame(timer)
+    })
+  }
 }

packages/artplayer/src/events/viewInit.js

@@ -1,21 +1,21 @@
-import { throttle, isInViewport } from '../utils';
+import { isInViewport, throttle } from '../utils'
 
 export default function viewInit(art, events) {
-    const {
-        option,
-        constructor,
-        template: { $container },
-    } = art;
+  const {
+    option,
+    constructor,
+    template: { $container },
+  } = art
 
-    const scrollFn = throttle(() => {
-        art.emit('view', isInViewport($container, constructor.SCROLL_GAP));
-    }, constructor.SCROLL_TIME);
+  const scrollFn = throttle(() => {
+    art.emit('view', isInViewport($container, constructor.SCROLL_GAP))
+  }, constructor.SCROLL_TIME)
 
-    events.proxy(window, 'scroll', () => scrollFn());
+  events.proxy(window, 'scroll', () => scrollFn())
 
-    art.on('view', (state) => {
-        if (option.autoMini) {
-            art.mini = !state;
-        }
-    });
+  art.on('view', (state) => {
+    if (option.autoMini) {
+      art.mini = !state
+    }
+  })
 }