格式化

packages/artplayer/src/player/aspectRatioMix.js

@@ -1,63 +1,67 @@
 import { setStyle } from '../utils';
 
 export default function aspectRatioMix(art, player) {
-  const { refs: { $video, $player }, i18n, notice } = art;
+    const {
+        refs: { $video, $player },
+        i18n,
+        notice,
+    } = art;
 
-  Object.defineProperty(player, 'aspectRatioState', {
-    get: () => $player.dataset.aspectRatio
-  });
+    Object.defineProperty(player, 'aspectRatioState', {
+        get: () => $player.dataset.aspectRatio,
+    });
 
-  Object.defineProperty(player, 'aspectRatio', {
-    value: ratio => {
-      const ratioName = ratio.length === 2 ? `${ratio[0]}:${ratio[1]}` : i18n.get('Default');
+    Object.defineProperty(player, 'aspectRatio', {
+        value: ratio => {
+            const ratioName = ratio.length === 2 ? `${ratio[0]}:${ratio[1]}` : i18n.get('Default');
 
-      if (ratio.length === 2) {
-        const { videoWidth, videoHeight } = $video;
-        const { clientWidth, clientHeight } = $player;
-        const videoRatio = videoWidth / videoHeight;
-        const setupRatio = Number(ratio[0]) / Number(ratio[1]);
+            if (ratio.length === 2) {
+                const { videoWidth, videoHeight } = $video;
+                const { clientWidth, clientHeight } = $player;
+                const videoRatio = videoWidth / videoHeight;
+                const setupRatio = Number(ratio[0]) / Number(ratio[1]);
 
-        if (videoRatio > setupRatio) {
-          const percentage = setupRatio * videoHeight / videoWidth;
-          setStyle($video, 'width', `${percentage * 100}%`);
-          setStyle($video, 'height', '100%');
-          setStyle($video, 'padding', `0 ${(clientWidth - clientWidth * percentage) / 2}px`);
-        } else {
-          const percentage = videoWidth / setupRatio / videoHeight;
-          setStyle($video, 'width', '100%');
-          setStyle($video, 'height', `${percentage * 100}%`);
-          setStyle($video, 'padding', `${(clientHeight - clientHeight * percentage) / 2}px 0`);
-        }
+                if (videoRatio > setupRatio) {
+                    const percentage = (setupRatio * videoHeight) / videoWidth;
+                    setStyle($video, 'width', `${percentage * 100}%`);
+                    setStyle($video, 'height', '100%');
+                    setStyle($video, 'padding', `0 ${(clientWidth - clientWidth * percentage) / 2}px`);
+                } else {
+                    const percentage = videoWidth / setupRatio / videoHeight;
+                    setStyle($video, 'width', '100%');
+                    setStyle($video, 'height', `${percentage * 100}%`);
+                    setStyle($video, 'padding', `${(clientHeight - clientHeight * percentage) / 2}px 0`);
+                }
 
-        $player.dataset.aspectRatio = ratioName;
-      } else {
-        player.aspectRatioRemove();
-      }
+                $player.dataset.aspectRatio = ratioName;
+            } else {
+                player.aspectRatioRemove();
+            }
 
-      notice.show(`${i18n.get('Aspect ratio')}: ${ratioName}`);
-      art.emit('aspectRatioChange', ratio);
-    }
-  });
+            notice.show(`${i18n.get('Aspect ratio')}: ${ratioName}`);
+            art.emit('aspectRatioChange', ratio);
+        },
+    });
 
-  Object.defineProperty(player, 'aspectRatioRemove', {
-    value: () => {
-      if (player.aspectRatioState) {
-        setStyle($video, 'width', null);
-        setStyle($video, 'height', null);
-        setStyle($video, 'padding', null);
-        delete $player.dataset.aspectRatio;
-        art.emit('aspectRatioRemove');
-      }
-    }
-  });
+    Object.defineProperty(player, 'aspectRatioRemove', {
+        value: () => {
+            if (player.aspectRatioState) {
+                setStyle($video, 'width', null);
+                setStyle($video, 'height', null);
+                setStyle($video, 'padding', null);
+                delete $player.dataset.aspectRatio;
+                art.emit('aspectRatioRemove');
+            }
+        },
+    });
 
-  Object.defineProperty(player, 'aspectRatioReset', {
-    value: () => {
-      const { aspectRatio } = $player.dataset;
-      if (aspectRatio) {
-        player.aspectRatio(aspectRatio.split(':'));
-        art.emit('aspectRatioReset');
-      }
-    }
-  });
+    Object.defineProperty(player, 'aspectRatioReset', {
+        value: () => {
+            const { aspectRatio } = $player.dataset;
+            if (aspectRatio) {
+                player.aspectRatio(aspectRatio.split(':'));
+                art.emit('aspectRatioReset');
+            }
+        },
+    });
 }

packages/artplayer/src/player/attrInit.js

@@ -1,25 +1,28 @@
 import { clamp, sleep } from '../utils';
 
 export default function attrInit(art, player) {
-  const { option, refs: { $video } } = art;
-  Object.keys(option.moreVideoAttr).forEach(key => {
-    $video[key] = option.moreVideoAttr[key];
-  });
+    const {
+        option,
+        refs: { $video },
+    } = art;
+    Object.keys(option.moreVideoAttr).forEach(key => {
+        $video[key] = option.moreVideoAttr[key];
+    });
 
-  if (option.volume) {
-    $video.volume = clamp(option.volume, 0, 1);
-  }
+    if (option.volume) {
+        $video.volume = clamp(option.volume, 0, 1);
+    }
 
-  if (option.poster) {
-    $video.poster = option.poster;
-  }
+    if (option.poster) {
+        $video.poster = option.poster;
+    }
 
-  if (option.autoplay) {
-    $video.autoplay = option.autoplay;
-  }
+    if (option.autoplay) {
+        $video.autoplay = option.autoplay;
+    }
 
-  sleep().then(() => {
-    art.emit('beforeMountUrl', option.url);
-    $video.src = player.mountUrl(option.url);
-  });
+    sleep().then(() => {
+        art.emit('beforeMountUrl', option.url);
+        $video.src = player.mountUrl(option.url);
+    });
 }

packages/artplayer/src/player/autoSizeMix.js

@@ -1,38 +1,40 @@
 import { setStyle } from '../utils';
 
 export default function resizeMix(art, player) {
-  const { refs: { $container, $player, $video } } = art;
+    const {
+        refs: { $container, $player, $video },
+    } = art;
 
-  Object.defineProperty(player, 'autoSizeState', {
-    get: () => $container.classList.contains('artplayer-auto-size')
-  });
+    Object.defineProperty(player, 'autoSizeState', {
+        get: () => $container.classList.contains('artplayer-auto-size'),
+    });
 
-  Object.defineProperty(player, 'autoSize', {
-    value: () => {
-      const { videoWidth, videoHeight } = $video;
-      const { width, height } = $container.getBoundingClientRect();
-      const videoRatio = videoWidth / videoHeight;
-      const containerRatio = width / height;
-      $container.classList.add('artplayer-auto-size');
-      if (containerRatio > videoRatio) {
-        const percentage = height * videoRatio / width * 100;
-        setStyle($player, 'width', `${percentage}%`);
-        setStyle($player, 'height', '100%');
-      } else {
-        const percentage = width / videoRatio / height * 100;
-        setStyle($player, 'width', '100%');
-        setStyle($player, 'height', `${percentage}%`);
-      }
-      art.emit('autoSizeChange');
-    }
-  });
+    Object.defineProperty(player, 'autoSize', {
+        value: () => {
+            const { videoWidth, videoHeight } = $video;
+            const { width, height } = $container.getBoundingClientRect();
+            const videoRatio = videoWidth / videoHeight;
+            const containerRatio = width / height;
+            $container.classList.add('artplayer-auto-size');
+            if (containerRatio > videoRatio) {
+                const percentage = ((height * videoRatio) / width) * 100;
+                setStyle($player, 'width', `${percentage}%`);
+                setStyle($player, 'height', '100%');
+            } else {
+                const percentage = (width / videoRatio / height) * 100;
+                setStyle($player, 'width', '100%');
+                setStyle($player, 'height', `${percentage}%`);
+            }
+            art.emit('autoSizeChange');
+        },
+    });
 
-  Object.defineProperty(player, 'autoSizeRemove', {
-    value: () => {
-      $container.classList.remove('artplayer-auto-size');
-      setStyle($player, 'width', null);
-      setStyle($player, 'height', null);
-      art.emit('autoSizeRemove');
-    }
-  });
+    Object.defineProperty(player, 'autoSizeRemove', {
+        value: () => {
+            $container.classList.remove('artplayer-auto-size');
+            setStyle($player, 'width', null);
+            setStyle($player, 'height', null);
+            art.emit('autoSizeRemove');
+        },
+    });
 }

packages/artplayer/src/player/currentTimeMix.js

@@ -1,8 +1,8 @@
 export default function currentTimeMix(art, player) {
-  Object.defineProperty(player, 'currentTime', {
-    get: () => art.refs.$video.currentTime || 0,
-    set: currentTime => {
-      art.refs.$video.currentTime = currentTime;
-    }
-  });
+    Object.defineProperty(player, 'currentTime', {
+        get: () => art.refs.$video.currentTime || 0,
+        set: currentTime => {
+            art.refs.$video.currentTime = currentTime;
+        },
+    });
 }

packages/artplayer/src/player/durationMix.js

@@ -1,5 +1,5 @@
 export default function durationMix(art, player) {
-  Object.defineProperty(player, 'duration', {
-    get: () => art.refs.$video.duration || 0
-  });
+    Object.defineProperty(player, 'duration', {
+        get: () => art.refs.$video.duration || 0,
+    });
 }

packages/artplayer/src/player/eventInit.js

@@ -2,97 +2,103 @@ import config from '../config';
 import { sleep } from '../utils';
 
 export default function eventInit(art, player) {
-  const { option, events: { proxy }, refs: { $player, $video }, i18n, notice } = art;
-  let firstCanplay = false;
-  let reconnectTime = 0;
-  const maxReconnectTime = 5;
+    const {
+        option,
+        events: { proxy },
+        refs: { $player, $video },
+        i18n,
+        notice,
+    } = art;
+    let firstCanplay = false;
+    let reconnectTime = 0;
+    const maxReconnectTime = 5;
 
-  proxy($video, 'click', () => {
-    player.toggle();
-  });
-
-  art.on('video:loadstart', () => {
-    art.loading.show();
-  });
-
-  art.on('video:loadedmetadata', () => {
-    if (option.autoSize) {
-      player.autoSize();
-    }
-  });
-
-  art.on('video:loadeddata', () => {
-    art.loading.hide();
-  });
-
-  art.on('video:waiting', () => {
-    art.loading.show();
-  });
-
-  art.on('video:seeking', () => {
-    art.loading.show();
-  });
-
-  art.on('video:canplay', () => {
-    reconnectTime = 0;
-    if (!firstCanplay) {
-      firstCanplay = true;
-      art.emit('firstCanplay');
-    }
-
-    art.controls.show();
-    art.mask.show();
-    art.loading.hide();
-    if (option.autoplay) {
-      player.play();
-    }
-  });
-
-  art.on('video:playing', () => {
-    art.isPlaying = true;
-    art.controls.hide();
-    art.mask.hide();
-  });
-
-  art.on('video:pause', () => {
-    art.isPlaying = false;
-    art.controls.show();
-    art.mask.show();
-  });
-
-  art.on('video:ended', () => {
-    art.isPlaying = false;
-    art.controls.show();
-    art.mask.show();
-    if (option.loop) {
-      player.seek(0);
-      player.play();
-    }
-  });
-
-  art.on('video:error', () => {
-    if (reconnectTime < maxReconnectTime) {
-      sleep(1000).then(() => {
-        reconnectTime++;
-        art.emit('beforeMountUrl', option.url);
-        $video.src = player.mountUrl(option.url);
-        notice.show(`${i18n.get('Reconnect')}: ${reconnectTime}`);
-      });
-    } else {
-      art.isPlaying = false;
-      art.loading.hide();
-      art.controls.hide();
-      $player.classList.add('artplayer-error');
-      sleep(1000).then(() => {
-        notice.show(i18n.get('Video load failed'), false);
-        art.destroy();
-      });
-    }
-  });
-
-  config.video.events.forEach(eventName => {
-    proxy($video, eventName, event => {
-      art.emit(`video:${event.type}`, event);
+    proxy($video, 'click', () => {
+        player.toggle();
+    });
+
+    art.on('video:loadstart', () => {
+        art.loading.show();
+    });
+
+    art.on('video:loadedmetadata', () => {
+        if (option.autoSize) {
+            player.autoSize();
+        }
+    });
+
+    art.on('video:loadeddata', () => {
+        art.loading.hide();
+    });
+
+    art.on('video:waiting', () => {
+        art.loading.show();
+    });
+
+    art.on('video:seeking', () => {
+        art.loading.show();
+    });
+
+    art.on('video:canplay', () => {
+        reconnectTime = 0;
+        if (!firstCanplay) {
+            firstCanplay = true;
+            art.emit('firstCanplay');
+        }
+
+        art.controls.show();
+        art.mask.show();
+        art.loading.hide();
+        if (option.autoplay) {
+            player.play();
+        }
+    });
+
+    art.on('video:playing', () => {
+        art.isPlaying = true;
+        art.controls.hide();
+        art.mask.hide();
+    });
+
+    art.on('video:pause', () => {
+        art.isPlaying = false;
+        art.controls.show();
+        art.mask.show();
+    });
+
+    art.on('video:ended', () => {
+        art.isPlaying = false;
+        art.controls.show();
+        art.mask.show();
+        if (option.loop) {
+            player.seek(0);
+            player.play();
+        }
+    });
+
+    art.on('video:error', () => {
+        if (reconnectTime < maxReconnectTime) {
+            sleep(1000).then(() => {
+                reconnectTime += 1;
+                art.emit('beforeMountUrl', option.url);
+                $video.src = player.mountUrl(option.url);
+                notice.show(`${i18n.get('Reconnect')}: ${reconnectTime}`);
+            });
+        } else {
+            art.isPlaying = false;
+            art.loading.hide();
+            art.controls.hide();
+            $player.classList.add('artplayer-error');
+            sleep(1000).then(() => {
+                notice.show(i18n.get('Video load failed'), false);
+                art.destroy();
+            });
+        }
+    });
+
+    config.video.events.forEach(eventName => {
+        proxy($video, eventName, event => {
+            art.emit(`video:${event.type}`, event);
+        });
     });
-  });
 }

packages/artplayer/src/player/flipMix.js

@@ -1,23 +1,26 @@
 import { errorHandle } from '../utils';
 
 export default function flipMix(art, player) {
-  Object.defineProperty(player, 'flipState', {
-    get: () => art.refs.$player.dataset.flip
-  });
+    Object.defineProperty(player, 'flipState', {
+        get: () => art.refs.$player.dataset.flip,
+    });
 
-  Object.defineProperty(player, 'flip', {
-    value: flip => {
-      const flipList = ['normal', 'horizontal', 'vertical'];
-      errorHandle(flipList.includes(flip), `The 'angle' need to be one of '[normal, horizontal, vertical]', but got ${flip}`);
-      art.refs.$player.dataset.flip = flip;
-      art.emit('flipChange', flip);
-    }
-  });
+    Object.defineProperty(player, 'flip', {
+        value: flip => {
+            const flipList = ['normal', 'horizontal', 'vertical'];
+            errorHandle(
+                flipList.includes(flip),
+                `The 'angle' need to be one of '[normal, horizontal, vertical]', but got ${flip}`,
+            );
+            art.refs.$player.dataset.flip = flip;
+            art.emit('flipChange', flip);
+        },
+    });
 
-  Object.defineProperty(player, 'flipRemove', {
-    value: () => {
-      delete art.refs.$player.dataset.flip;
-      art.emit('flipRemove');
-    }
-  });
+    Object.defineProperty(player, 'flipRemove', {
+        value: () => {
+            delete art.refs.$player.dataset.flip;
+            art.emit('flipRemove');
+        },
+    });
 }

packages/artplayer/src/player/fullscreenMix.js

@@ -1,56 +1,60 @@
 import screenfull from 'screenfull';
 
 export default function fullscreenMix(art, player) {
-  const { notice, events: { destroyEvents }, refs: { $player } } = art;
+    const {
+        notice,
+        events: { destroyEvents },
+        refs: { $player },
+    } = art;
 
-  const screenfullChange = () => {
-    art.emit('fullscreen', screenfull.isFullscreen);
-  };
+    const screenfullChange = () => {
+        art.emit('fullscreen', screenfull.isFullscreen);
+    };
 
-  const screenfullError = () => {
-    notice.show('Your browser does not seem to support full screen functionality.');
-  };
+    const screenfullError = () => {
+        notice.show('Your browser does not seem to support full screen functionality.');
+    };
 
-  screenfull.on('change', screenfullChange);
-  screenfull.on('error', screenfullError);
-  destroyEvents.push(() => {
-    screenfull.off('change', screenfullChange);
-    screenfull.off('error', screenfullError);
-  });
+    screenfull.on('change', screenfullChange);
+    screenfull.on('error', screenfullError);
+    destroyEvents.push(() => {
+        screenfull.off('change', screenfullChange);
+        screenfull.off('error', screenfullError);
+    });
 
-  Object.defineProperty(player, 'fullscreenState', {
-    get: () => screenfull.isFullscreen
-  });
+    Object.defineProperty(player, 'fullscreenState', {
+        get: () => screenfull.isFullscreen,
+    });
 
-  Object.defineProperty(player, 'fullscreenEnabled', {
-    value: () => {
-      if (player.fullscreenWebState) {
-        player.fullscreenWebExit();
-      }
-      $player.classList.add('artplayer-fullscreen');
-      screenfull.request($player);
-      art.emit('fullscreen:enabled');
-    }
-  });
+    Object.defineProperty(player, 'fullscreenEnabled', {
+        value: () => {
+            if (player.fullscreenWebState) {
+                player.fullscreenWebExit();
+            }
+            $player.classList.add('artplayer-fullscreen');
+            screenfull.request($player);
+            art.emit('fullscreen:enabled');
+        },
+    });
 
-  Object.defineProperty(player, 'fullscreenExit', {
-    value: () => {
-      if (player.fullscreenState) {
-        player.fullscreenWebExit();
-        $player.classList.remove('artplayer-fullscreen');
-        screenfull.exit();
-        art.emit('fullscreen:exit');
-      }
-    }
-  });
+    Object.defineProperty(player, 'fullscreenExit', {
+        value: () => {
+            if (player.fullscreenState) {
+                player.fullscreenWebExit();
+                $player.classList.remove('artplayer-fullscreen');
+                screenfull.exit();
+                art.emit('fullscreen:exit');
+            }
+        },
+    });
 
-  Object.defineProperty(player, 'fullscreenToggle', {
-    value: () => {
-      if (player.fullscreenState) {
-        player.fullscreenExit();
-      } else {
-        player.fullscreenEnabled();
-      }
-    }
-  });
+    Object.defineProperty(player, 'fullscreenToggle', {
+        value: () => {
+            if (player.fullscreenState) {
+                player.fullscreenExit();
+            } else {
+                player.fullscreenEnabled();
+            }
+        },
+    });
 }

packages/artplayer/src/player/fullscreenWebMix.js

@@ -1,37 +1,39 @@
 export default function fullscreenWebMix(art, player) {
-  const { refs: { $player } } = art;
+    const {
+        refs: { $player },
+    } = art;
 
-  Object.defineProperty(player, 'fullscreenWebState', {
-    get: () => $player.classList.contains('artplayer-web-fullscreen')
-  });
+    Object.defineProperty(player, 'fullscreenWebState', {
+        get: () => $player.classList.contains('artplayer-web-fullscreen'),
+    });
 
-  Object.defineProperty(player, 'fullscreenWebEnabled', {
-    value: () => {
-      if (player.fullscreenState) {
-        player.fullscreenExit();
-      }
-      $player.classList.add('artplayer-web-fullscreen');
-      art.emit('fullscreenWeb:enabled');
-    }
-  });
+    Object.defineProperty(player, 'fullscreenWebEnabled', {
+        value: () => {
+            if (player.fullscreenState) {
+                player.fullscreenExit();
+            }
+            $player.classList.add('artplayer-web-fullscreen');
+            art.emit('fullscreenWeb:enabled');
+        },
+    });
 
-  Object.defineProperty(player, 'fullscreenWebExit', {
-    value: () => {
-      if (player.fullscreenWebState) {
-        player.fullscreenExit();
-        $player.classList.remove('artplayer-web-fullscreen');
-        art.emit('fullscreenWeb:exit');
-      }
-    }
-  });
+    Object.defineProperty(player, 'fullscreenWebExit', {
+        value: () => {
+            if (player.fullscreenWebState) {
+                player.fullscreenExit();
+                $player.classList.remove('artplayer-web-fullscreen');
+                art.emit('fullscreenWeb:exit');
+            }
+        },
+    });
 
-  Object.defineProperty(player, 'fullscreenWebToggle', {
-    value: () => {
-      if (player.fullscreenWebState) {
-        player.fullscreenWebExit();
-      } else {
-        player.fullscreenWebEnabled();
-      }
-    }
-  });
+    Object.defineProperty(player, 'fullscreenWebToggle', {
+        value: () => {
+            if (player.fullscreenWebState) {
+                player.fullscreenWebExit();
+            } else {
+                player.fullscreenWebEnabled();
+            }
+        },
+    });
 }

packages/artplayer/src/player/index.js

@@ -21,27 +21,27 @@ import autoSizeMix from './autoSizeMix';
 import flipMix from './flipMix';
 
 export default class Player {
-  constructor(art) {
-    mountUrlMix(art, this);
-    eventInit(art, this);
-    attrInit(art, this);
-    playMix(art, this);
-    pauseMin(art, this);
-    toggleMix(art, this);
-    seekMix(art, this);
-    volumeMix(art, this);
-    currentTimeMix(art, this);
-    durationMix(art, this);
-    switchMix(art, this);
-    playbackRateMix(art, this);
-    aspectRatioMix(art, this);
-    screenshotMix(art, this);
-    fullscreenMix(art, this);
-    fullscreenWebMix(art, this);
-    pipMix(art, this);
-    loadedMix(art, this);
-    playedMix(art, this);
-    autoSizeMix(art, this);
-    flipMix(art, this);
-  }
+    constructor(art) {
+        mountUrlMix(art, this);
+        eventInit(art, this);
+        attrInit(art, this);
+        playMix(art, this);
+        pauseMin(art, this);
+        toggleMix(art, this);
+        seekMix(art, this);
+        volumeMix(art, this);
+        currentTimeMix(art, this);
+        durationMix(art, this);
+        switchMix(art, this);
+        playbackRateMix(art, this);
+        aspectRatioMix(art, this);
+        screenshotMix(art, this);
+        fullscreenMix(art, this);
+        fullscreenWebMix(art, this);
+        pipMix(art, this);
+        loadedMix(art, this);
+        playedMix(art, this);
+        autoSizeMix(art, this);
+        flipMix(art, this);
+    }
 }

packages/artplayer/src/player/loadedMix.js

@@ -1,9 +1,8 @@
 export default function seekMix(art, player) {
-  Object.defineProperty(player, 'loaded', {
-    get: () =>
-      art.refs.$video.buffered.length
-        ? art.refs.$video.buffered.end(art.refs.$video.buffered.length - 1) /
-          art.refs.$video.duration
-        : 0
-  });
+    Object.defineProperty(player, 'loaded', {
+        get: () =>
+            art.refs.$video.buffered.length
+                ? art.refs.$video.buffered.end(art.refs.$video.buffered.length - 1) / art.refs.$video.duration
+                : 0,
+    });
 }

packages/artplayer/src/player/mountUrlMix.js

@@ -1,6 +1,6 @@
 export default function mountUrlMix(art, player) {
-  Object.defineProperty(player, 'mountUrl', {
-    writable: true,
-    value: url => url
-  });
+    Object.defineProperty(player, 'mountUrl', {
+        writable: true,
+        value: url => url,
+    });
 }

packages/artplayer/src/player/pauseMin.js

@@ -1,11 +1,15 @@
 export default function pauseMin(art, player) {
-  const { refs: { $video }, i18n, notice } = art;
+    const {
+        refs: { $video },
+        i18n,
+        notice,
+    } = art;
 
-  Object.defineProperty(player, 'pause', {
-    value: () => {
-      $video.pause();
-      notice.show(i18n.get('Pause'));
-      art.emit('pause');
-    }
-  });
+    Object.defineProperty(player, 'pause', {
+        value: () => {
+            $video.pause();
+            notice.show(i18n.get('Pause'));
+            art.emit('pause');
+        },
+    });
 }

packages/artplayer/src/player/pipMix.js

@@ -2,137 +2,137 @@ import Draggabilly from 'draggabilly';
 import { setStyle, append } from '../utils';
 
 function nativePip(art, player) {
-  const {
-    notice,
-    refs: { $video },
-    events: { proxy }
-  } = art;
+    const {
+        notice,
+        refs: { $video },
+        events: { proxy },
+    } = art;
 
-  $video.disablePictureInPicture = false;
+    $video.disablePictureInPicture = false;
 
-  Object.defineProperty(player, 'pipState', {
-    get: () => document.pictureInPictureElement
-  });
+    Object.defineProperty(player, 'pipState', {
+        get: () => document.pictureInPictureElement,
+    });
 
-  Object.defineProperty(player, 'pipEnabled', {
-    value: () => {
-      $video.requestPictureInPicture().catch(error => {
-        notice.show(error, true, 3000);
-        console.warn(error);
-      });
-    }
-  });
+    Object.defineProperty(player, 'pipEnabled', {
+        value: () => {
+            $video.requestPictureInPicture().catch(error => {
+                notice.show(error, true, 3000);
+                console.warn(error);
+            });
+        },
+    });
 
-  Object.defineProperty(player, 'pipExit', {
-    value: () => {
-      document.exitPictureInPicture().catch(error => {
-        notice.show(error, true, 3000);
-        console.warn(error);
-      });
-    }
-  });
+    Object.defineProperty(player, 'pipExit', {
+        value: () => {
+            document.exitPictureInPicture().catch(error => {
+                notice.show(error, true, 3000);
+                console.warn(error);
+            });
+        },
+    });
 
-  Object.defineProperty(player, 'pipToggle', {
-    value: () => {
-      if (player.pipState) {
-        player.pipExit();
-      } else {
-        player.pipEnabled();
-      }
-    }
-  });
+    Object.defineProperty(player, 'pipToggle', {
+        value: () => {
+            if (player.pipState) {
+                player.pipExit();
+            } else {
+                player.pipEnabled();
+            }
+        },
+    });
 
-  proxy($video, 'enterpictureinpicture', () => {
-    art.emit('pipEnabled');
-  });
+    proxy($video, 'enterpictureinpicture', () => {
+        art.emit('pipEnabled');
+    });
 
-  proxy($video, 'leavepictureinpicture', () => {
-    art.emit('pipExit');
-    if (art.isPlaying) {
-      player.play();
-    }
-  });
+    proxy($video, 'leavepictureinpicture', () => {
+        art.emit('pipExit');
+        if (art.isPlaying) {
+            player.play();
+        }
+    });
 }
 
 function customPip(art, player) {
-  const {
-    option,
-    i18n,
-    refs: { $player, $pipClose, $pipTitle },
-    events: { destroyEvents, proxy }
-  } = art;
-  let cachePos = null;
-  let draggie = null;
+    const {
+        option,
+        i18n,
+        refs: { $player, $pipClose, $pipTitle },
+        events: { destroyEvents, proxy },
+    } = art;
+    let cachePos = null;
+    let draggie = null;
 
-  Object.defineProperty(player, 'pipState', {
-    get: () => $player.classList.contains('artplayer-pip')
-  });
+    Object.defineProperty(player, 'pipState', {
+        get: () => $player.classList.contains('artplayer-pip'),
+    });
 
-  Object.defineProperty(player, 'pipEnabled', {
-    value: () => {
-      if (player.autoSizeState) {
-        player.autoSizeRemove();
-      }
+    Object.defineProperty(player, 'pipEnabled', {
+        value: () => {
+            if (player.autoSizeState) {
+                player.autoSizeRemove();
+            }
 
-      if (!draggie) {
-        draggie = new Draggabilly($player, {
-          handle: '.artplayer-pip-header'
-        });
+            if (!draggie) {
+                draggie = new Draggabilly($player, {
+                    handle: '.artplayer-pip-header',
+                });
 
-        append($pipTitle, option.title || i18n.get('Mini player'));
+                append($pipTitle, option.title || i18n.get('Mini player'));
 
-        proxy($pipClose, 'click', () => {
-          player.pipExit();
-        });
+                proxy($pipClose, 'click', () => {
+                    player.pipExit();
+                });
 
-        destroyEvents.push(() => {
-          draggie.destroy();
-        });
-      } else {
-        setStyle($player, 'left', `${cachePos.x}px`);
-        setStyle($player, 'top', `${cachePos.y}px`);
-      }
+                destroyEvents.push(() => {
+                    draggie.destroy();
+                });
+            } else {
+                setStyle($player, 'left', `${cachePos.x}px`);
+                setStyle($player, 'top', `${cachePos.y}px`);
+            }
 
-      $player.classList.add('artplayer-pip');
-      player.fullscreenExit();
-      player.fullscreenWebExit();
-      player.aspectRatioRemove();
-      player.playbackRateRemove();
-      art.emit('pipEnabled');
-    }
-  });
+            $player.classList.add('artplayer-pip');
+            player.fullscreenExit();
+            player.fullscreenWebExit();
+            player.aspectRatioRemove();
+            player.playbackRateRemove();
+            art.emit('pipEnabled');
+        },
+    });
 
-  Object.defineProperty(player, 'pipExit', {
-    value: () => {
-      if (player.pipState) {
-        $player.classList.remove('artplayer-pip');
-        cachePos = draggie.position;
-        setStyle($player, 'left', null);
-        setStyle($player, 'top', null);
-        player.fullscreenExit();
-        player.fullscreenWebExit();
-        player.aspectRatioRemove();
-        player.playbackRateRemove();
-        art.emit('pipExit');
-      }
-    }
-  });
+    Object.defineProperty(player, 'pipExit', {
+        value: () => {
+            if (player.pipState) {
+                $player.classList.remove('artplayer-pip');
+                cachePos = draggie.position;
+                setStyle($player, 'left', null);
+                setStyle($player, 'top', null);
+                player.fullscreenExit();
+                player.fullscreenWebExit();
+                player.aspectRatioRemove();
+                player.playbackRateRemove();
+                art.emit('pipExit');
+            }
+        },
+    });
 
-  Object.defineProperty(player, 'pipToggle', {
-    value: () => {
-      if (player.pipState) {
-        player.pipExit();
-      } else {
-        player.pipEnabled();
-      }
-    }
-  });
+    Object.defineProperty(player, 'pipToggle', {
+        value: () => {
+            if (player.pipState) {
+                player.pipExit();
+            } else {
+                player.pipEnabled();
+            }
+        },
+    });
 }
 
 export default function pipMix(art, player) {
-  if (document.pictureInPictureEnabled) {
-    nativePip(art, player);
-  } else {
-    customPip(art, player);
-  }
+    if (document.pictureInPictureEnabled) {
+        nativePip(art, player);
+    } else {
+        customPip(art, player);
+    }
 }

packages/artplayer/src/player/playMix.js

@@ -1,24 +1,27 @@
 export default function playMix(art, player) {
-  const { refs: { $video }, i18n, notice, option: { mutex } } = art;
+    const {
+        refs: { $video },
+        i18n,
+        notice,
+        option: { mutex },
+    } = art;
 
-  Object.defineProperty(player, 'play', {
-    value: () => {
-      const promise = $video.play();
-      if (promise !== undefined) {
-        promise.then().catch(err => {
-          notice.show(err, true, 3000);
-          console.warn(err);
-        });
-      }
+    Object.defineProperty(player, 'play', {
+        value: () => {
+            const promise = $video.play();
+            if (promise !== undefined) {
+                promise.then().catch(err => {
+                    notice.show(err, true, 3000);
+                    console.warn(err);
+                });
+            }
 
-      if (mutex) {
-        art.constructor.instances
-          .filter(item => item !== art)
-          .forEach(item => item.player.pause());
-      }
+            if (mutex) {
+                art.constructor.instances.filter(item => item !== art).forEach(item => item.player.pause());
+            }
 
-      notice.show(i18n.get('Play'));
-      art.emit('play');
-    }
-  });
+            notice.show(i18n.get('Play'));
+            art.emit('play');
+        },
+    });
 }

packages/artplayer/src/player/playbackRateMix.js

@@ -1,39 +1,43 @@
 import { clamp } from '../utils';
 
 export default function playbackRateMix(art, player) {
-  const { refs: { $video, $player }, i18n, notice } = art;
+    const {
+        refs: { $video, $player },
+        i18n,
+        notice,
+    } = art;
 
-  Object.defineProperty(player, 'playbackRateState', {
-    get: () => $player.dataset.playbackRate
-  });
+    Object.defineProperty(player, 'playbackRateState', {
+        get: () => $player.dataset.playbackRate,
+    });
 
-  Object.defineProperty(player, 'playbackRate', {
-    value: rate => {
-      const newRate = clamp(rate, 0.1, 10);
-      $video.playbackRate = newRate;
-      $player.dataset.playbackRate = newRate;
-      notice.show(`${i18n.get('Rate')}: ${newRate === 1 ? i18n.get('Normal') : `${newRate}x`}`);
-      art.emit('playbackRateChange', newRate);
-    }
-  });
+    Object.defineProperty(player, 'playbackRate', {
+        value: rate => {
+            const newRate = clamp(rate, 0.1, 10);
+            $video.playbackRate = newRate;
+            $player.dataset.playbackRate = newRate;
+            notice.show(`${i18n.get('Rate')}: ${newRate === 1 ? i18n.get('Normal') : `${newRate}x`}`);
+            art.emit('playbackRateChange', newRate);
+        },
+    });
 
-  Object.defineProperty(player, 'playbackRateRemove', {
-    value: () => {
-      if (player.$playbackRateState) {
-        player.playbackRate(1);
-        delete $player.dataset.playbackRate;
-        art.emit('playbackRateRemove');
-      }
-    }
-  });
+    Object.defineProperty(player, 'playbackRateRemove', {
+        value: () => {
+            if (player.$playbackRateState) {
+                player.playbackRate(1);
+                delete $player.dataset.playbackRate;
+                art.emit('playbackRateRemove');
+            }
+        },
+    });
 
-  Object.defineProperty(player, 'playbackRateReset', {
-    value: () => {
-      const { playbackRate } = $player.dataset;
-      if (playbackRate) {
-        player.playbackRate(Number(playbackRate));
-        art.emit('playbackRateReset');
-      }
-    }
-  });
+    Object.defineProperty(player, 'playbackRateReset', {
+        value: () => {
+            const { playbackRate } = $player.dataset;
+            if (playbackRate) {
+                player.playbackRate(Number(playbackRate));
+                art.emit('playbackRateReset');
+            }
+        },
+    });
 }

packages/artplayer/src/player/playedMix.js

@@ -1,5 +1,5 @@
 export default function seekMix(art, player) {
-  Object.defineProperty(player, 'played', {
-    get: () => art.refs.$video.currentTime / art.refs.$video.duration
-  });
+    Object.defineProperty(player, 'played', {
+        get: () => art.refs.$video.currentTime / art.refs.$video.duration,
+    });
 }

packages/artplayer/src/player/screenshotMix.js

@@ -1,37 +1,41 @@
 import { setStyle, secondToTime } from '../utils';
 
 export default function screenshotMix(art, player) {
-  const { option, notice, refs: { $video } } = art;
+    const {
+        option,
+        notice,
+        refs: { $video },
+    } = art;
 
-  function captureFrame() {
-    const canvas = document.createElement('canvas');
-    canvas.width = $video.videoWidth;
-    canvas.height = $video.videoHeight;
-    canvas.getContext('2d').drawImage($video, 0, 0);
-    const dataUri = canvas.toDataURL('image/png');
-    const elink = document.createElement('a');
-    setStyle(elink, 'display', 'none');
-    elink.href = dataUri;
-    elink.download = `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`;
-    document.body.appendChild(elink);
-    elink.click();
-    document.body.removeChild(elink);
-    return dataUri;
-  }
-
-  Object.defineProperty(player, 'screenshot', {
-    value: () => {
-      const { crossOrigin } = $video;
-      try {
-        $video.crossOrigin = 'anonymous';
-        const dataUri = captureFrame();
-        art.emit('screenshot', dataUri);
-      } catch (error) {
-        notice.show(error);
-        console.warn(error);
-      } finally {
-        $video.crossOrigin = crossOrigin;
-      }
+    function captureFrame() {
+        const canvas = document.createElement('canvas');
+        canvas.width = $video.videoWidth;
+        canvas.height = $video.videoHeight;
+        canvas.getContext('2d').drawImage($video, 0, 0);
+        const dataUri = canvas.toDataURL('image/png');
+        const elink = document.createElement('a');
+        setStyle(elink, 'display', 'none');
+        elink.href = dataUri;
+        elink.download = `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`;
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        return dataUri;
     }
-  });
+
+    Object.defineProperty(player, 'screenshot', {
+        value: () => {
+            const { crossOrigin } = $video;
+            try {
+                $video.crossOrigin = 'anonymous';
+                const dataUri = captureFrame();
+                art.emit('screenshot', dataUri);
+            } catch (error) {
+                notice.show(error);
+                console.warn(error);
+            } finally {
+                $video.crossOrigin = crossOrigin;
+            }
+        },
+    });
 }

packages/artplayer/src/player/seekMix.js

@@ -1,17 +1,17 @@
 import { secondToTime } from '../utils';
 
 export default function seekMix(art, player) {
-  const { notice } = art;
+    const { notice } = art;
 
-  Object.defineProperty(player, 'seek', {
-    value: time => {
-      let newTime = Math.max(time, 0);
-      if (player.duration) {
-        newTime = Math.min(newTime, player.duration);
-      }
-      player.currentTime = newTime;
-      notice.show(`${secondToTime(newTime)} / ${secondToTime(player.duration)}`);
-      art.emit('seek', newTime);
-    }
-  });
+    Object.defineProperty(player, 'seek', {
+        value: time => {
+            let newTime = Math.max(time, 0);
+            if (player.duration) {
+                newTime = Math.min(newTime, player.duration);
+            }
+            player.currentTime = newTime;
+            notice.show(`${secondToTime(newTime)} / ${secondToTime(player.duration)}`);
+            art.emit('seek', newTime);
+        },
+    });
 }

packages/artplayer/src/player/switchMix.js

@@ -1,22 +1,28 @@
 export default function switchMix(art, player) {
-  const { refs: { $video }, i18n, notice, isPlaying, option } = art;
+    const {
+        refs: { $video },
+        i18n,
+        notice,
+        isPlaying,
+        option,
+    } = art;
 
-  Object.defineProperty(player, 'switch', {
-    value: (url, name = 'unknown') => {
-      if (url !== option.url) {
-        const { currentTime } = player;
-        art.emit('beforeMountUrl', url);
-        $video.src = player.mountUrl(url);
-        option.url = url;
-        player.playbackRateRemove();
-        player.aspectRatioRemove();
-        player.seek(currentTime);
-        if (isPlaying) {
-          player.play();
-        }
-        notice.show(`${i18n.get('Switch video')}: ${name}`);
-        art.emit('switch', url);
-      }
-    }
-  });
+    Object.defineProperty(player, 'switch', {
+        value: (url, name = 'unknown') => {
+            if (url !== option.url) {
+                const { currentTime } = player;
+                art.emit('beforeMountUrl', url);
+                $video.src = player.mountUrl(url);
+                option.url = url;
+                player.playbackRateRemove();
+                player.aspectRatioRemove();
+                player.seek(currentTime);
+                if (isPlaying) {
+                    player.play();
+                }
+                notice.show(`${i18n.get('Switch video')}: ${name}`);
+                art.emit('switch', url);
+            }
+        },
+    });
 }

packages/artplayer/src/player/toggleMix.js

@@ -1,11 +1,11 @@
 export default function toggleMix(art, player) {
-  Object.defineProperty(player, 'toggle', {
-    value: () => {
-      if (art.isPlaying) {
-        player.pause();
-      } else {
-        player.play();
-      }
-    }
-  });
+    Object.defineProperty(player, 'toggle', {
+        value: () => {
+            if (art.isPlaying) {
+                player.pause();
+            } else {
+                player.play();
+            }
+        },
+    });
 }

packages/artplayer/src/player/volumeMix.js

@@ -1,25 +1,30 @@
 import { clamp } from '../utils';
 
 export default function volumeMix(art, player) {
-  const { refs: { $video }, i18n, notice, storage } = art;
+    const {
+        refs: { $video },
+        i18n,
+        notice,
+        storage,
+    } = art;
 
-  Object.defineProperty(player, 'volume', {
-    get: () => $video.volume || 0,
-    set: percentage => {
-      if (percentage !== undefined) {
-        $video.volume = clamp(percentage, 0, 1);
-        notice.show(`${i18n.get('Volume')}: ${parseInt($video.volume * 100)}`);
-        if ($video.volume !== 0) {
-          storage.set('volume', $video.volume);
-        }
-        art.emit('volumeChange', $video.volume);
-      }
-    }
-  });
+    Object.defineProperty(player, 'volume', {
+        get: () => $video.volume || 0,
+        set: percentage => {
+            if (percentage !== undefined) {
+                $video.volume = clamp(percentage, 0, 1);
+                notice.show(`${i18n.get('Volume')}: ${parseInt($video.volume * 100, 10)}`);
+                if ($video.volume !== 0) {
+                    storage.set('volume', $video.volume);
+                }
+                art.emit('volumeChange', $video.volume);
+            }
+        },
+    });
 
-  Object.defineProperty(player, 'mute', {
-    value: () => {
-      player.volume = 0;
-    }
-  });
+    Object.defineProperty(player, 'mute', {
+        value: () => {
+            player.volume = 0;
+        },
+    });
 }