remove player object

README.md

@@ -8,7 +8,6 @@
 </p>
 
 <p align="center">
-  <img src="https://img.shields.io/github/checks-status/zhw2590582/artplayer/master" alt="Build Status">
   <img src="https://img.shields.io/bundlephobia/minzip/artplayer" alt="Size">
   <img src="https://img.shields.io/npm/dm/artplayer.svg?sanitize=true" alt="Downloads">
   <img src="https://img.shields.io/npm/v/artplayer.svg?sanitize=true" alt="Version">

packages/artplayer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artplayer",
-  "version": "4.1.4",
+  "version": "5.0.0",
   "expose": "Artplayer",
   "description": "ArtPlayer.js is a modern and full featured HTML5 video player",
   "main": "dist/artplayer.js",

packages/artplayer/src/ads.js

@@ -30,7 +30,7 @@ export default class Ads {
 
     play(item = {}) {
         if (this.isEnd) return;
-        this.art.player.switchUrl(item.url);
+        this.art.switchUrl(item.url);
 
         this.art.once('video:timeupdate', () => {
             this.art.emit('ads:start', item);
@@ -52,7 +52,7 @@ export default class Ads {
         this.isEnd = true;
         this.playing = false;
         this.art.option.url = this.urlCache;
-        this.art.player.switchUrl(this.urlCache);
+        this.art.switchUrl(this.urlCache);
         this.art.emit('ads:end');
     }
 }

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -2,7 +2,7 @@ import { inverseClass, queryAll } from '../utils';
 
 export default function aspectRatio(option) {
     return (art) => {
-        const { i18n, player } = art;
+        const { i18n } = art;
         return {
             ...option,
             html: `${i18n.get('Aspect ratio')}:
@@ -13,7 +13,7 @@ export default function aspectRatio(option) {
             click: (contextmenu, event) => {
                 const { ratio } = event.target.dataset;
                 if (ratio) {
-                    player.aspectRatio = ratio;
+                    art.aspectRatio = ratio;
                     contextmenu.show = false;
                 }
             },

packages/artplayer/src/contextmenu/playbackRate.js

@@ -2,7 +2,7 @@ import { inverseClass, queryAll } from '../utils';
 
 export default function playbackRate(option) {
     return (art) => {
-        const { i18n, player } = art;
+        const { i18n } = art;
         return {
             ...option,
             html: `${i18n.get('Play speed')}:
@@ -16,7 +16,7 @@ export default function playbackRate(option) {
             click: (contextmenu, event) => {
                 const { rate } = event.target.dataset;
                 if (rate) {
-                    player.playbackRate = Number(rate);
+                    art.playbackRate = Number(rate);
                     contextmenu.show = false;
                 }
             },

packages/artplayer/src/control/fullscreen.js

@@ -9,13 +9,12 @@ export default function fullscreen(option) {
                 events: { proxy },
                 icons,
                 i18n,
-                player,
             } = art;
 
             append($control, icons.fullscreen);
 
             proxy($control, 'click', () => {
-                player.fullscreen = !player.fullscreen;
+                art.fullscreen = !art.fullscreen;
             });
 
             art.on('fullscreen', (value) => {

packages/artplayer/src/control/fullscreenWeb.js

@@ -9,13 +9,12 @@ export default function fullscreenWeb(option) {
                 events: { proxy },
                 icons,
                 i18n,
-                player,
             } = art;
 
             append($control, icons.fullscreenWeb);
 
             proxy($control, 'click', () => {
-                player.fullscreenWeb = !player.fullscreenWeb;
+                art.fullscreenWeb = !art.fullscreenWeb;
             });
 
             art.on('fullscreenWeb', (value) => {

packages/artplayer/src/control/index.js

@@ -36,7 +36,7 @@ export default class Control extends Component {
         });
 
         art.on('video:timeupdate', () => {
-            if (player.playing && this.show && Date.now() - this.mouseMoveTime >= 3000) {
+            if (art.playing && this.show && Date.now() - this.mouseMoveTime >= 3000) {
                 this.show = false;
                 addClass($player, 'art-hide-cursor');
                 removeClass($player, 'art-hover');

packages/artplayer/src/control/loop.js

@@ -4,16 +4,14 @@ export default function loop(option) {
     return (art) => ({
         ...option,
         mounted: ($control) => {
-            const { player } = art;
-
             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) {
                     setStyle($control, 'display', 'block');
-                    setStyle($left, 'left', `calc(${(value[0] / player.duration) * 100}% - ${$left.clientWidth}px)`);
-                    setStyle($right, 'left', `${(value[1] / player.duration) * 100}%`);
+                    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/control/pip.js

@@ -9,13 +9,12 @@ export default function pip(option) {
                 events: { proxy },
                 icons,
                 i18n,
-                player,
             } = art;
 
             append($control, icons.pip);
 
             proxy($control, 'click', () => {
-                player.pip = !player.pip;
+                art.pip = !art.pip;
             });
 
             art.on('pip', (value) => {

packages/artplayer/src/control/playAndPause.js

@@ -1,14 +1,13 @@
 import { append, tooltip, setStyle } from '../utils';
 
 export default function playAndPause(option) {
-    return art => ({
+    return (art) => ({
         ...option,
-        mounted: $control => {
+        mounted: ($control) => {
             const {
                 events: { proxy },
                 icons,
                 i18n,
-                player,
             } = art;
 
             const $play = append($control, icons.play);
@@ -17,11 +16,11 @@ export default function playAndPause(option) {
             tooltip($pause, i18n.get('Pause'));
 
             proxy($play, 'click', () => {
-                player.play();
+                art.play();
             });
 
             proxy($pause, 'click', () => {
-                player.pause();
+                art.pause();
             });
 
             function showPlay() {
@@ -34,7 +33,7 @@ export default function playAndPause(option) {
                 setStyle($pause, 'display', 'flex');
             }
 
-            if (player.playing) {
+            if (art.playing) {
                 showPause();
             } else {
                 showPlay();

packages/artplayer/src/control/progress.js

@@ -2,13 +2,12 @@ import { query, clamp, append, setStyle, setStyles, secondToTime, includeFromEve
 
 export function getPosFromEvent(art, event) {
     const {
-        player,
         template: { $progress },
     } = art;
 
     const { left } = $progress.getBoundingClientRect();
     const width = clamp(event.pageX - left, 0, $progress.clientWidth);
-    const second = (width / $progress.clientWidth) * player.duration;
+    const second = (width / $progress.clientWidth) * art.duration;
     const time = secondToTime(second);
     const percentage = clamp(width / $progress.clientWidth, 0, 1);
     return { second, time, width, percentage };
@@ -19,7 +18,6 @@ export default function progress(option) {
         const {
             option: { highlight, theme },
             events: { proxy },
-            player,
             icons,
         } = art;
         return {
@@ -98,21 +96,21 @@ export default function progress(option) {
                 }
 
                 highlight.forEach((item) => {
-                    const left = (clamp(item.time, 0, player.duration) / player.duration) * 100;
+                    const left = (clamp(item.time, 0, art.duration) / art.duration) * 100;
                     append(
                         $highlight,
                         `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`,
                     );
                 });
 
-                setBar('loaded', player.loaded);
+                setBar('loaded', art.loaded);
 
                 art.on('video:progress', () => {
-                    setBar('loaded', player.loaded);
+                    setBar('loaded', art.loaded);
                 });
 
                 art.on('video:timeupdate', () => {
-                    setBar('played', player.played);
+                    setBar('played', art.played);
                 });
 
                 art.on('video:ended', () => {
@@ -136,7 +134,7 @@ export default function progress(option) {
                     if (event.target !== $indicator) {
                         const { second, percentage } = getPosFromEvent(art, event);
                         setBar('played', percentage);
-                        player.seek = second;
+                        art.seek = second;
                     }
                 });
 
@@ -148,7 +146,7 @@ export default function progress(option) {
                     if (isDroging) {
                         const { second, percentage } = getPosFromEvent(art, event);
                         setBar('played', percentage);
-                        player.seek = second;
+                        art.seek = second;
                     }
                 });
 

packages/artplayer/src/control/quality.js

@@ -7,7 +7,7 @@ export default function quality(option) {
             html: qualityDefault ? qualityDefault.html : '',
             selector: qualityOption,
             onSelect(item) {
-                art.player.switchQuality(item.url, item.html);
+                art.switchQuality(item.url, item.html);
             },
         };
     };

packages/artplayer/src/control/screenshot.js

@@ -1,19 +1,18 @@
 import { append } from '../utils';
 
 export default function screenshot(option) {
-    return art => ({
+    return (art) => ({
         ...option,
         tooltip: art.i18n.get('Screenshot'),
-        mounted: $control => {
+        mounted: ($control) => {
             const {
                 events: { proxy },
                 icons,
-                player,
             } = art;
 
             append($control, icons.screenshot);
             proxy($control, 'click', () => {
-                player.screenshot();
+                art.screenshot();
             });
         },
     });

packages/artplayer/src/control/time.js

@@ -5,7 +5,7 @@ export default function time(option) {
         ...option,
         mounted: $control => {
             function getTime() {
-                const newTime = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;
+                const newTime = `${secondToTime(art.currentTime)} / ${secondToTime(art.duration)}`;
                 if (newTime !== $control.innerText) {
                     $control.innerText = newTime;
                 }

packages/artplayer/src/control/volume.js

@@ -7,7 +7,6 @@ export default function volume(option) {
             const {
                 events: { proxy },
                 icons,
-                player,
                 i18n,
             } = art;
 
@@ -34,7 +33,7 @@ export default function volume(option) {
             }
 
             function setVolumeHandle(percentage = 0.7) {
-                if (player.muted || percentage === 0) {
+                if (art.muted || percentage === 0) {
                     setStyle($volume, 'display', 'none');
                     setStyle($volumeClose, 'display', 'flex');
                     setStyle($volumeHandle, 'left', '0');
@@ -46,22 +45,22 @@ export default function volume(option) {
                 }
             }
 
-            setVolumeHandle(player.volume);
+            setVolumeHandle(art.volume);
             art.on('video:volumechange', () => {
-                setVolumeHandle(player.volume);
+                setVolumeHandle(art.volume);
             });
 
             proxy($volume, 'click', () => {
-                player.muted = true;
+                art.muted = true;
             });
 
             proxy($volumeClose, 'click', () => {
-                player.muted = false;
+                art.muted = false;
             });
 
             proxy($volumePanel, 'click', (event) => {
-                player.muted = false;
-                player.volume = volumeChangeFromEvent(event);
+                art.muted = false;
+                art.volume = volumeChangeFromEvent(event);
             });
 
             proxy($volumeHandle, 'mousedown', () => {
@@ -70,8 +69,8 @@ export default function volume(option) {
 
             proxy($control, 'mousemove', (event) => {
                 if (isDroging) {
-                    player.muted = false;
-                    player.volume = volumeChangeFromEvent(event);
+                    art.muted = false;
+                    art.volume = volumeChangeFromEvent(event);
                 }
             });
 

packages/artplayer/src/events/gestureInit.js

@@ -3,7 +3,6 @@ import { clamp, secondToTime, isMobile } from '../utils';
 export default function gestureInit(art, events) {
     if (isMobile && !art.option.isLive) {
         const {
-            player,
             notice,
             template: { $video },
         } = art;
@@ -23,14 +22,14 @@ export default function gestureInit(art, events) {
             if (event.touches.length === 1 && isDroging) {
                 const widthDiff = event.touches[0].clientX - startX;
                 const proportion = clamp(widthDiff / $video.clientWidth, -1, 1);
-                currentTime = clamp(player.currentTime + 60 * proportion, 0, player.duration);
-                notice.show = `${secondToTime(currentTime)} / ${secondToTime(player.duration)}`;
+                currentTime = clamp(art.currentTime + 60 * proportion, 0, art.duration);
+                notice.show = `${secondToTime(currentTime)} / ${secondToTime(art.duration)}`;
             }
         });
 
         events.proxy(document, 'touchend', () => {
             if (isDroging && currentTime) {
-                player.seek = currentTime;
+                art.seek = currentTime;
             }
             isDroging = false;
             startX = 0;

packages/artplayer/src/events/resizeInit.js

@@ -1,13 +1,13 @@
 import { throttle } from '../utils';
 
 export default function resizeInit(art, events) {
-    const { option, player } = art;
+    const { option } = art;
 
     const resizeFn = throttle(() => {
-        if (player.normalSize) {
-            player.autoSize = option.autoSize;
+        if (art.normalSize) {
+            art.autoSize = option.autoSize;
         }
-        player.aspectRatioReset = true;
+        art.aspectRatioReset = true;
         art.emit('resize');
     }, 500);
 

packages/artplayer/src/events/viewInit.js

@@ -17,7 +17,7 @@ export default function viewInit(art, events) {
 
     art.on('view', (state) => {
         if (option.autoMini) {
-            player.mini = !state;
+            art.mini = !state;
         }
     });
 }

packages/artplayer/src/hotkey.js

@@ -13,29 +13,29 @@ export default class Hotkey {
         if (option.hotkey) {
             art.once('ready', () => {
                 this.add(27, () => {
-                    if (player.fullscreenWeb) {
-                        player.fullscreenWeb = false;
+                    if (art.fullscreenWeb) {
+                        art.fullscreenWeb = false;
                     }
                 });
 
                 this.add(32, () => {
-                    player.toggle();
+                    art.toggle();
                 });
 
                 this.add(37, () => {
-                    player.backward = 5;
+                    art.backward = 5;
                 });
 
                 this.add(38, () => {
-                    player.volume += 0.1;
+                    art.volume += 0.1;
                 });
 
                 this.add(39, () => {
-                    player.forward = 5;
+                    art.forward = 5;
                 });
 
                 this.add(40, () => {
-                    player.volume -= 0.1;
+                    art.volume -= 0.1;
                 });
 
                 proxy(window, 'keydown', (event) => {

packages/artplayer/src/player/aspectRatioMix.js

@@ -1,19 +1,17 @@
 import { setStyle, errorHandle, def } from '../utils';
 
-export default function aspectRatioMix(art, player) {
+export default function aspectRatioMix(art) {
     const {
         template: { $video, $player },
         i18n,
         notice,
     } = art;
 
-    def(player, 'aspectRatio', {
+    def(art, 'aspectRatio', {
         get() {
             return $player.dataset.aspectRatio || '';
         },
-        set(ratio) {
-            if (!ratio) ratio = 'default';
-
+        set(ratio = 'default') {
             const ratioList = ['default', '4:3', '16:9'];
             errorHandle(ratioList.includes(ratio), `'aspectRatio' only accept ${ratioList.toString()} as parameters`);
 
@@ -23,7 +21,7 @@ export default function aspectRatioMix(art, player) {
                 setStyle($video, 'padding', null);
                 delete $player.dataset.aspectRatio;
             } else {
-                const ratioArray = ratio.split(':');
+                const ratioArray = ratio.split(':').map(Number);
                 const { videoWidth, videoHeight } = $video;
                 const { clientWidth, clientHeight } = $player;
                 const videoRatio = videoWidth / videoHeight;
@@ -47,11 +45,11 @@ export default function aspectRatioMix(art, player) {
         },
     });
 
-    def(player, 'aspectRatioReset', {
+    def(art, 'aspectRatioReset', {
         set(value) {
-            if (value && player.aspectRatio) {
-                const { aspectRatio } = player;
-                player.aspectRatio = aspectRatio;
+            if (value && art.aspectRatio) {
+                const { aspectRatio } = art;
+                art.aspectRatio = aspectRatio;
             }
         },
     });

packages/artplayer/src/player/attrInit.js

@@ -1,6 +1,6 @@
 import { clamp, setStyle } from '../utils';
 
-export default function attrInit(art, player) {
+export default function attrInit(art) {
     const {
         option,
         storage,
@@ -36,6 +36,6 @@ export default function attrInit(art, player) {
     $video.controls = false;
 
     if (option.ads.length === 0) {
-        player.url = option.url;
+        art.url = option.url;
     }
 }

packages/artplayer/src/player/autoHeightMix.js

@@ -1,6 +1,6 @@
 import { setStyle, hasClass, addClass, removeClass, def } from '../utils';
 
-export default function autoHeightMix(art, player) {
+export default function autoHeightMix(art) {
     const {
         option,
         template: { $container, $video },
@@ -8,7 +8,7 @@ export default function autoHeightMix(art, player) {
 
     const heightCache = $container.style.height;
 
-    def(player, 'autoHeight', {
+    def(art, 'autoHeight', {
         get() {
             return hasClass($container, 'art-auto-height');
         },
@@ -19,12 +19,12 @@ export default function autoHeightMix(art, player) {
                 const height = videoHeight * (clientWidth / videoWidth);
                 setStyle($container, 'height', height + 'px');
                 addClass($container, 'art-auto-height');
-                player.autoSize = option.autoSize;
+                art.autoSize = option.autoSize;
                 art.emit('autoHeight', height);
             } else {
                 setStyle($container, 'height', heightCache);
                 removeClass($container, 'art-auto-height');
-                player.autoSize = option.autoSize;
+                art.autoSize = option.autoSize;
                 art.emit('autoHeight');
             }
         },

packages/artplayer/src/player/autoSizeMix.js

@@ -1,9 +1,9 @@
 import { setStyle, addClass, removeClass, hasClass, def } from '../utils';
 
-export default function resizeMix(art, player) {
+export default function resizeMix(art) {
     const { $container, $player, $video } = art.template;
 
-    def(player, 'autoSize', {
+    def(art, 'autoSize', {
         get() {
             return hasClass($container, 'art-auto-size');
         },
@@ -24,8 +24,8 @@ export default function resizeMix(art, player) {
                     setStyle($player, 'height', `${percentage}%`);
                 }
                 art.emit('autoSize', {
-                    width: player.width,
-                    height: player.height,
+                    width: art.width,
+                    height: art.height,
                 });
             } else {
                 removeClass($container, 'art-auto-size');

packages/artplayer/src/player/currentTimeMix.js

@@ -1,13 +1,13 @@
 import { clamp, def } from '../utils';
 
-export default function currentTimeMix(art, player) {
+export default function currentTimeMix(art) {
     const { $video } = art.template;
 
-    def(player, 'currentTime', {
+    def(art, 'currentTime', {
         get: () => $video.currentTime || 0,
         set: (time) => {
             // Fixed: The provided double value is non-finite
-            $video.currentTime = clamp(parseFloat(time.toFixed(3)), 0, player.duration);
+            $video.currentTime = clamp(parseFloat(time.toFixed(3)), 0, art.duration);
         },
     });
 }

packages/artplayer/src/player/durationMix.js

@@ -1,7 +1,7 @@
 import { def } from '../utils';
 
-export default function durationMix(art, player) {
-    def(player, 'duration', {
+export default function durationMix(art) {
+    def(art, 'duration', {
         get: () => {
             const { duration } = art.template.$video;
             if (duration === Infinity) return 0;

packages/artplayer/src/player/eventInit.js

@@ -1,7 +1,7 @@
 import config from '../config';
 import { sleep, addClass, setStyle, isMobile } from '../utils';
 
-export default function eventInit(art, player) {
+export default function eventInit(art) {
     const {
         option,
         events: { proxy },
@@ -14,11 +14,11 @@ export default function eventInit(art, player) {
     const maxReconnectTime = 5;
 
     proxy($video, 'click', () => {
-        player.toggle();
+        art.toggle();
     });
 
     proxy($video, 'dblclick', () => {
-        player.fullscreen = !player.fullscreen;
+        art.fullscreen = !art.fullscreen;
     });
 
     config.events.forEach((eventName) => {
@@ -58,8 +58,8 @@ export default function eventInit(art, player) {
 
     art.on('video:ended', () => {
         if (option.loop) {
-            player.seek = 0;
-            player.play();
+            art.seek = 0;
+            art.play();
             art.controls.show = false;
             art.mask.show = false;
         } else {
@@ -72,7 +72,7 @@ export default function eventInit(art, player) {
         if (reconnectTime < maxReconnectTime) {
             sleep(1000).then(() => {
                 reconnectTime += 1;
-                player.url = option.url;
+                art.url = option.url;
                 notice.show = `${i18n.get('Reconnect')}: ${reconnectTime}`;
                 art.emit('error', reconnectTime);
             });
@@ -92,7 +92,7 @@ export default function eventInit(art, player) {
     // });
 
     art.once('video:loadedmetadata', () => {
-        player.autoSize = option.autoSize;
+        art.autoSize = option.autoSize;
         if (isMobile) {
             art.loading.show = false;
             art.controls.show = true;

packages/artplayer/src/player/exclusiveInit.js

@@ -1,17 +1,17 @@
 import { def } from '../utils';
 
-export default function exclusiveInit(art, player) {
+export default function exclusiveInit(art) {
     const sizeProps = ['mini', 'pip', 'fullscreen', 'fullscreenWeb'];
 
     function exclusive(props) {
         props.forEach((name) => {
             art.on(name, () => {
-                if (player[name]) {
+                if (art[name]) {
                     props
                         .filter((item) => item !== name)
                         .forEach((item) => {
-                            if (player[item]) {
-                                player[item] = false;
+                            if (art[item]) {
+                                art[item] = false;
                             }
                         });
                 }
@@ -21,9 +21,9 @@ export default function exclusiveInit(art, player) {
 
     exclusive(sizeProps);
 
-    def(player, 'normalSize', {
+    def(art, 'normalSize', {
         get() {
-            return sizeProps.every((name) => !player[name]);
+            return sizeProps.every((name) => !art[name]);
         },
     });
 }

packages/artplayer/src/player/flipMix.js

@@ -1,13 +1,13 @@
 import { errorHandle, def } from '../utils';
 
-export default function flipMix(art, player) {
+export default function flipMix(art) {
     const {
         template: { $player },
         i18n,
         notice,
     } = art;
 
-    def(player, 'flip', {
+    def(art, 'flip', {
         get() {
             return $player.dataset.flip;
         },
@@ -20,7 +20,7 @@ export default function flipMix(art, player) {
             if (flip === 'normal') {
                 delete $player.dataset.flip;
             } else {
-                player.rotate = false;
+                art.rotate = false;
                 $player.dataset.flip = flip;
             }
 
@@ -30,11 +30,11 @@ export default function flipMix(art, player) {
         },
     });
 
-    def(player, 'flipReset', {
+    def(art, 'flipReset', {
         set(value) {
-            if (value && player.flip) {
-                const { flip } = player;
-                player.flip = flip;
+            if (value && art.flip) {
+                const { flip } = art;
+                art.flip = flip;
             }
         },
     });

packages/artplayer/src/player/fullscreenMix.js

@@ -1,12 +1,12 @@
 import screenfull from 'screenfull';
 import { addClass, removeClass, def, get } from '../utils';
 
-const nativeScreenfull = (art, player) => {
+const nativeScreenfull = (art) => {
     const { $player } = art.template;
 
     screenfull.on('change', () => art.emit('fullscreen', screenfull.isFullscreen));
 
-    def(player, 'fullscreen', {
+    def(art, 'fullscreen', {
         get() {
             return screenfull.isFullscreen;
         },
@@ -14,16 +14,16 @@ const nativeScreenfull = (art, player) => {
             if (value) {
                 screenfull.request($player).then(() => {
                     addClass($player, 'art-fullscreen');
-                    player.aspectRatioReset = true;
-                    player.autoSize = false;
+                    art.aspectRatioReset = true;
+                    art.autoSize = false;
                     art.emit('resize');
                     art.emit('fullscreen', true);
                 });
             } else {
                 screenfull.exit().then(() => {
                     removeClass($player, 'art-fullscreen');
-                    player.aspectRatioReset = true;
-                    player.autoSize = art.option.autoSize;
+                    art.aspectRatioReset = true;
+                    art.autoSize = art.option.autoSize;
                     art.emit('resize');
                     art.emit('fullscreen');
                 });
@@ -32,10 +32,10 @@ const nativeScreenfull = (art, player) => {
     });
 };
 
-const webkitScreenfull = (art, player) => {
+const webkitScreenfull = (art) => {
     const { $video } = art.template;
 
-    def(player, 'fullscreen', {
+    def(art, 'fullscreen', {
         get() {
             return $video.webkitDisplayingFullscreen;
         },
@@ -51,7 +51,7 @@ const webkitScreenfull = (art, player) => {
     });
 };
 
-export default function fullscreenMix(art, player) {
+export default function fullscreenMix(art) {
     const {
         i18n,
         notice,
@@ -60,11 +60,11 @@ export default function fullscreenMix(art, player) {
 
     art.once('ready', () => {
         if (screenfull.isEnabled) {
-            nativeScreenfull(art, player);
+            nativeScreenfull(art);
         } else if (document.fullscreenEnabled || $video.webkitSupportsFullscreen) {
-            webkitScreenfull(art, player);
+            webkitScreenfull(art);
         } else {
-            def(player, 'fullscreen', {
+            def(art, 'fullscreen', {
                 get() {
                     return false;
                 },
@@ -74,7 +74,7 @@ export default function fullscreenMix(art, player) {
             });
         }
 
-        // 异步设置
-        def(art, 'fullscreen', get(player, 'fullscreen'));
+        // Asynchronous setting
+        def(art, 'fullscreen', get(art, 'fullscreen'));
     });
 }

packages/artplayer/src/player/fullscreenWebMix.js

@@ -1,23 +1,23 @@
 import { addClass, removeClass, hasClass, def } from '../utils';
 
-export default function fullscreenWebMix(art, player) {
+export default function fullscreenWebMix(art) {
     const { $player } = art.template;
 
-    def(player, 'fullscreenWeb', {
+    def(art, 'fullscreenWeb', {
         get() {
             return hasClass($player, 'art-fullscreen-web');
         },
         set(value) {
             if (value) {
                 addClass($player, 'art-fullscreen-web');
-                player.aspectRatioReset = true;
-                player.autoSize = false;
+                art.aspectRatioReset = true;
+                art.autoSize = false;
                 art.emit('resize');
                 art.emit('fullscreenWeb', true);
             } else {
                 removeClass($player, 'art-fullscreen-web');
-                player.aspectRatioReset = true;
-                player.autoSize = art.option.autoSize;
+                art.aspectRatioReset = true;
+                art.autoSize = art.option.autoSize;
                 art.emit('resize');
                 art.emit('fullscreenWeb');
             }

packages/artplayer/src/player/index.js

@@ -27,39 +27,37 @@ import loopMin from './loopMin';
 import rotateMix from './rotateMix';
 import posterMix from './posterMix';
 import autoHeightMix from './autoHeightMix';
-import { proxyPropertys } from '../utils';
 
 export default class Player {
     constructor(art) {
-        urlMix(art, this);
-        eventInit(art, this);
-        attrInit(art, this);
-        exclusiveInit(art, this);
-        playMix(art, this);
-        pauseMix(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);
-        playingMix(art, this);
-        autoSizeMix(art, this);
-        rectMix(art, this);
-        flipMix(art, this);
-        miniMix(art, this);
-        loopMin(art, this);
-        rotateMix(art, this);
-        posterMix(art, this);
-        autoHeightMix(art, this);
-        proxyPropertys(art, this);
+        urlMix(art);
+        eventInit(art);
+        attrInit(art);
+        exclusiveInit(art);
+        playMix(art);
+        pauseMix(art);
+        toggleMix(art);
+        seekMix(art);
+        volumeMix(art);
+        currentTimeMix(art);
+        durationMix(art);
+        switchMix(art);
+        playbackRateMix(art);
+        aspectRatioMix(art);
+        screenshotMix(art);
+        fullscreenMix(art);
+        fullscreenWebMix(art);
+        pipMix(art);
+        loadedMix(art);
+        playedMix(art);
+        playingMix(art);
+        autoSizeMix(art);
+        rectMix(art);
+        flipMix(art);
+        miniMix(art);
+        loopMin(art);
+        rotateMix(art);
+        posterMix(art);
+        autoHeightMix(art);
     }
 }

packages/artplayer/src/player/loadedMix.js

@@ -1,13 +1,13 @@
 import { def } from '../utils';
 
-export default function seekMix(art, player) {
+export default function seekMix(art) {
     const { $video } = art.template;
 
-    def(player, 'loaded', {
-        get: () => player.loadedTime / $video.duration,
+    def(art, 'loaded', {
+        get: () => art.loadedTime / $video.duration,
     });
 
-    def(player, 'loadedTime', {
+    def(art, 'loadedTime', {
         get: () => ($video.buffered.length ? $video.buffered.end($video.buffered.length - 1) : 0),
     });
 }

packages/artplayer/src/player/loopMin.js

@@ -1,13 +1,13 @@
 import { def, clamp } from '../utils';
 
-export default function loopMin(art, player) {
+export default function loopMin(art) {
     let interval = [];
-    def(player, 'loop', {
+    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], player.duration));
-                const end = clamp(value[1], start, player.duration);
+                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];
                     art.emit('loop', interval);
@@ -24,8 +24,8 @@ export default function loopMin(art, player) {
 
     art.on('video:timeupdate', () => {
         if (interval.length) {
-            if (player.currentTime < interval[0] || player.currentTime > interval[1]) {
-                player.seek = interval[0];
+            if (art.currentTime < interval[0] || art.currentTime > interval[1]) {
+                art.seek = interval[0];
             }
         }
     });

packages/artplayer/src/player/miniMix.js

@@ -1,6 +1,6 @@
 import { append, setStyle, addClass, removeClass, hasClass, def, isInViewport } from '../utils';
 
-export default function miniMix(art, player) {
+export default function miniMix(art) {
     const {
         i18n,
         option,
@@ -20,8 +20,8 @@ export default function miniMix(art, player) {
         isDroging = true;
         lastPageX = event.pageX;
         lastPageY = event.pageY;
-        lastPlayerLeft = player.left;
-        lastPlayerTop = player.top;
+        lastPlayerLeft = art.left;
+        lastPlayerTop = art.top;
     });
 
     proxy(document, 'mousemove', (event) => {
@@ -42,20 +42,20 @@ export default function miniMix(art, player) {
     });
 
     proxy($miniClose, 'click', () => {
-        player.mini = false;
+        art.mini = false;
         isDroging = false;
         removeClass($player, 'art-is-dragging');
     });
 
     append($miniTitle, option.title || i18n.get('Mini player'));
 
-    def(player, 'mini', {
+    def(art, 'mini', {
         get() {
             return hasClass($player, 'art-mini');
         },
         set(value) {
             if (value) {
-                player.autoSize = false;
+                art.autoSize = false;
                 cacheStyle = $player.style.cssText;
                 addClass($player, 'art-mini');
                 const top = storage.get('top');
@@ -66,28 +66,28 @@ export default function miniMix(art, player) {
                     if (!isInViewport($miniHeader)) {
                         storage.del('top');
                         storage.del('left');
-                        player.mini = true;
+                        art.mini = true;
                     }
                 } else {
                     const $body = document.body;
-                    const top = $body.clientHeight - player.height - 50;
-                    const left = $body.clientWidth - player.width - 50;
+                    const top = $body.clientHeight - art.height - 50;
+                    const left = $body.clientWidth - art.width - 50;
                     storage.set('top', top);
                     storage.set('left', left);
                     setStyle($player, 'top', `${top}px`);
                     setStyle($player, 'left', `${left}px`);
                 }
-                player.aspectRatio = false;
-                player.playbackRate = false;
+                art.aspectRatio = false;
+                art.playbackRate = false;
                 art.emit('mini', true);
             } else {
                 $player.style.cssText = cacheStyle;
                 removeClass($player, 'art-mini');
                 setStyle($player, 'top', null);
                 setStyle($player, 'left', null);
-                player.aspectRatio = false;
-                player.playbackRate = false;
-                player.autoSize = option.autoSize;
+                art.aspectRatio = false;
+                art.playbackRate = false;
+                art.autoSize = option.autoSize;
                 art.emit('mini');
             }
         },

packages/artplayer/src/player/pauseMix.js

@@ -1,13 +1,13 @@
 import { def } from '../utils';
 
-export default function pauseMix(art, player) {
+export default function pauseMix(art) {
     const {
         template: { $video },
         i18n,
         notice,
     } = art;
 
-    def(player, 'pause', {
+    def(art, 'pause', {
         value() {
             const result = $video.pause();
             notice.show = i18n.get('Pause');

packages/artplayer/src/player/pipMix.js

@@ -1,6 +1,6 @@
 import { def } from '../utils';
 
-function nativePip(art, player) {
+function nativePip(art) {
     const {
         template: { $video },
         events: { proxy },
@@ -9,7 +9,7 @@ function nativePip(art, player) {
 
     $video.disablePictureInPicture = false;
 
-    def(player, 'pip', {
+    def(art, 'pip', {
         get() {
             return document.pictureInPictureElement;
         },
@@ -37,12 +37,12 @@ function nativePip(art, player) {
     });
 }
 
-function webkitPip(art, player) {
+function webkitPip(art) {
     const { $video } = art.template;
 
     $video.webkitSetPresentationMode('inline');
 
-    def(player, 'pip', {
+    def(art, 'pip', {
         get() {
             return $video.webkitPresentationMode === 'picture-in-picture';
         },
@@ -58,18 +58,18 @@ function webkitPip(art, player) {
     });
 }
 
-export default function pipMix(art, player) {
+export default function pipMix(art) {
     const {
         i18n,
         notice,
         template: { $video },
     } = art;
     if (document.pictureInPictureEnabled) {
-        nativePip(art, player);
+        nativePip(art);
     } else if ($video.webkitSupportsPresentationMode) {
-        webkitPip(art, player);
+        webkitPip(art);
     } else {
-        def(player, 'pip', {
+        def(art, 'pip', {
             get() {
                 return false;
             },

packages/artplayer/src/player/playMix.js

@@ -1,6 +1,6 @@
 import { def } from '../utils';
 
-export default function playMix(art, player) {
+export default function playMix(art) {
     const {
         i18n,
         notice,
@@ -9,7 +9,7 @@ export default function playMix(art, player) {
         template: { $video },
     } = art;
 
-    def(player, 'play', {
+    def(art, 'play', {
         value() {
             const promise = $video.play();
 
@@ -21,11 +21,7 @@ export default function playMix(art, player) {
             }
 
             if (mutex) {
-                instances
-                    .filter((item) => item !== art)
-                    .forEach((item) => {
-                        item.player.pause();
-                    });
+                instances.filter((item) => item !== art).forEach((item) => item.pause());
             }
 
             notice.show = i18n.get('Play');

packages/artplayer/src/player/playbackRateMix.js

@@ -1,13 +1,13 @@
 import { errorHandle, def } from '../utils';
 
-export default function playbackRateMix(art, player) {
+export default function playbackRateMix(art) {
     const {
         template: { $video, $player },
         i18n,
         notice,
     } = art;
 
-    def(player, 'playbackRate', {
+    def(art, 'playbackRate', {
         get() {
             return $player.dataset.playbackRate;
         },
@@ -20,20 +20,20 @@ export default function playbackRateMix(art, player) {
                 $player.dataset.playbackRate = rate;
                 notice.show = `${i18n.get('Rate')}: ${rate === 1.0 ? i18n.get('Normal') : `${rate}x`}`;
                 art.emit('playbackRate', rate);
-            } else if (player.playbackRate) {
-                player.playbackRate = 1;
+            } else if (art.playbackRate) {
+                art.playbackRate = 1;
                 delete $player.dataset.playbackRate;
                 art.emit('playbackRate');
             }
         },
     });
 
-    def(player, 'playbackRateReset', {
+    def(art, 'playbackRateReset', {
         set(value) {
             if (value) {
                 const { playbackRate } = $player.dataset;
                 if (playbackRate) {
-                    player.playbackRate = Number(playbackRate);
+                    art.playbackRate = Number(playbackRate);
                 }
             }
         },

packages/artplayer/src/player/playedMix.js

@@ -1,7 +1,7 @@
 import { def } from '../utils';
 
-export default function playedMix(art, player) {
-    def(player, 'played', {
-        get: () => player.currentTime / player.duration,
+export default function playedMix(art) {
+    def(art, 'played', {
+        get: () => art.currentTime / art.duration,
     });
 }

packages/artplayer/src/player/playingMix.js

@@ -1,8 +1,8 @@
 import { def } from '../utils';
 
-export default function playingMix(art, player) {
+export default function playingMix(art) {
     const { $video } = art.template;
-    def(player, 'playing', {
+    def(art, 'playing', {
         get: () => !!($video.currentTime > 0 && !$video.paused && !$video.ended && $video.readyState > 2),
     });
 }

packages/artplayer/src/player/posterMix.js

@@ -1,12 +1,12 @@
 import { def, setStyle } from '../utils';
 
-export default function posterMix(art, player) {
+export default function posterMix(art) {
     const {
         option,
         template: { $poster },
     } = art;
 
-    def(player, 'poster', {
+    def(art, 'poster', {
         get: () => option.poster,
         set(url) {
             option.poster = url;

packages/artplayer/src/player/rectMix.js

@@ -1,29 +1,29 @@
 import { def } from '../utils';
 
-export default function rectMix(art, player) {
-    def(player, 'rect', {
+export default function rectMix(art) {
+    def(art, 'rect', {
         get: () => {
             return art.template.$player.getBoundingClientRect();
         },
     });
 
-    ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach(key => {
-        def(player, key, {
+    ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach((key) => {
+        def(art, key, {
             get: () => {
-                return player.rect[key];
+                return art.rect[key];
             },
         });
     });
 
-    def(player, 'x', {
+    def(art, 'x', {
         get: () => {
-            return player.left + window.pageXOffset;
+            return art.left + window.pageXOffset;
         },
     });
 
-    def(player, 'y', {
+    def(art, 'y', {
         get: () => {
-            return player.top + window.pageYOffset;
+            return art.top + window.pageYOffset;
         },
     });
 }

packages/artplayer/src/player/rotateMix.js

@@ -1,13 +1,13 @@
 import { setStyle, errorHandle, def } from '../utils';
 
-export default function rotateMix(art, player) {
+export default function rotateMix(art) {
     const {
         template: { $video, $player },
         i18n,
         notice,
     } = art;
 
-    def(player, 'rotate', {
+    def(art, 'rotate', {
         get: () => Number($player.dataset.rotate) || 0,
         set: (deg) => {
             if (!deg) deg = 0;
@@ -19,7 +19,7 @@ export default function rotateMix(art, player) {
                 delete $player.dataset.rotate;
                 setStyle($video, 'transform', null);
             } else {
-                player.flip = false;
+                art.flip = false;
                 art.autoSize = true;
                 $player.dataset.rotate = deg;
 
@@ -65,11 +65,11 @@ export default function rotateMix(art, player) {
         },
     });
 
-    def(player, 'rotateReset', {
+    def(art, 'rotateReset', {
         set(value) {
-            if (value && player.rotate) {
-                const { rotate } = player;
-                player.rotate = rotate;
+            if (value && art.rotate) {
+                const { rotate } = art;
+                art.rotate = rotate;
             }
         },
     });

packages/artplayer/src/player/screenshotMix.js

@@ -1,6 +1,6 @@
 import { secondToTime, download, def } from '../utils';
 
-export default function screenshotMix(art, player) {
+export default function screenshotMix(art) {
     const {
         option,
         notice,
@@ -9,7 +9,7 @@ export default function screenshotMix(art, player) {
 
     const $canvas = document.createElement('canvas');
 
-    def(player, 'getDataURL', {
+    def(art, 'getDataURL', {
         value: () =>
             new Promise((resolve, reject) => {
                 try {
@@ -24,7 +24,7 @@ export default function screenshotMix(art, player) {
             }),
     });
 
-    def(player, 'getBlobUrl', {
+    def(art, 'getBlobUrl', {
         value: () =>
             new Promise((resolve, reject) => {
                 try {
@@ -41,9 +41,9 @@ export default function screenshotMix(art, player) {
             }),
     });
 
-    def(player, 'screenshot', {
+    def(art, 'screenshot', {
         value: () => {
-            return player.getDataURL().then((dataUri) => {
+            return art.getDataURL().then((dataUri) => {
                 download(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
                 art.emit('screenshot', dataUri);
                 return dataUri;

packages/artplayer/src/player/seekMix.js

@@ -1,27 +1,27 @@
 import { secondToTime, def } from '../utils';
 
-export default function seekMix(art, player) {
+export default function seekMix(art) {
     const { notice } = art;
 
-    def(player, 'seek', {
+    def(art, 'seek', {
         set(time) {
-            player.currentTime = time;
-            art.emit('seek', player.currentTime);
-            if (player.duration) {
-                notice.show = `${secondToTime(player.currentTime)} / ${secondToTime(player.duration)}`;
+            art.currentTime = time;
+            art.emit('seek', art.currentTime);
+            if (art.duration) {
+                notice.show = `${secondToTime(art.currentTime)} / ${secondToTime(art.duration)}`;
             }
         },
     });
 
-    def(player, 'forward', {
+    def(art, 'forward', {
         set(time) {
-            player.seek = player.currentTime + time;
+            art.seek = art.currentTime + time;
         },
     });
 
     def(player, 'backward', {
         set(time) {
-            player.seek = player.currentTime - time;
+            art.seek = art.currentTime - time;
         },
     });
 }

packages/artplayer/src/player/switchMix.js

@@ -1,22 +1,22 @@
 import { def } from '../utils';
 
-export default function switchMix(art, player) {
+export default function switchMix(art) {
     const { i18n, option, notice } = art;
 
     function switchUrl(url, name, currentTime) {
         return new Promise((resolve) => {
-            if (url === player.url) return resolve(url);
-            URL.revokeObjectURL(player.url);
-            player.url = url;
+            if (url === art.url) return resolve(url);
+            URL.revokeObjectURL(art.url);
+            art.url = url;
             art.once('video:canplay', () => {
-                player.playbackRate = false;
-                player.aspectRatio = false;
-                player.flip = 'normal';
-                player.autoSize = option.autoSize;
-                player.currentTime = currentTime;
+                art.playbackRate = false;
+                art.aspectRatio = false;
+                art.flip = 'normal';
+                art.autoSize = option.autoSize;
+                art.currentTime = currentTime;
                 art.notice.show = '';
-                if (player.playing) {
-                    player.play();
+                if (art.playing) {
+                    art.play();
                 }
                 if (name) {
                     notice.show = `${i18n.get('Switch video')}: ${name}`;
@@ -27,13 +27,13 @@ export default function switchMix(art, player) {
         });
     }
 
-    def(player, 'switchQuality', {
+    def(art, 'switchQuality', {
         value: (url, name) => {
-            return switchUrl(url, name, player.currentTime);
+            return switchUrl(url, name, art.currentTime);
         },
     });
 
-    def(player, 'switchUrl', {
+    def(art, 'switchUrl', {
         value: (url, name) => {
             return switchUrl(url, name, 0);
         },

packages/artplayer/src/player/toggleMix.js

@@ -1,12 +1,12 @@
 import { def } from '../utils';
 
-export default function toggleMix(art, player) {
-    def(player, 'toggle', {
+export default function toggleMix(art) {
+    def(art, 'toggle', {
         value() {
-            if (player.playing) {
-                return player.pause();
+            if (art.playing) {
+                return art.pause();
             } else {
-                return player.play();
+                return art.play();
             }
         },
     });

packages/artplayer/src/player/urlMix.js

@@ -1,12 +1,12 @@
 import { getExt, def, sleep } from '../utils';
 
-export default function urlMix(art, player) {
+export default function urlMix(art) {
     const {
         option,
         template: { $video },
     } = art;
 
-    def(player, 'url', {
+    def(art, 'url', {
         get() {
             return $video.currentSrc;
         },
@@ -19,7 +19,7 @@ export default function urlMix(art, player) {
                     typeCallback.call(art, $video, url, art);
                 });
             } else {
-                if (player.url && player.url !== url) {
+                if (art.url && art.url !== url) {
                     art.once('video:canplay', () => {
                         if (art.isReady) {
                             art.emit('restart');

packages/artplayer/src/player/volumeMix.js

@@ -1,6 +1,6 @@
 import { clamp, def } from '../utils';
 
-export default function volumeMix(art, player) {
+export default function volumeMix(art) {
     const {
         template: { $video },
         i18n,
@@ -8,9 +8,9 @@ export default function volumeMix(art, player) {
         storage,
     } = art;
 
-    def(player, 'volume', {
+    def(art, 'volume', {
         get: () => $video.volume || 0,
-        set: percentage => {
+        set: (percentage) => {
             $video.volume = clamp(percentage, 0, 1);
             notice.show = `${i18n.get('Volume')}: ${parseInt($video.volume * 100, 10)}`;
             if ($video.volume !== 0) {
@@ -20,9 +20,9 @@ export default function volumeMix(art, player) {
         },
     });
 
-    def(player, 'muted', {
+    def(art, 'muted', {
         get: () => $video.muted,
-        set: muted => {
+        set: (muted) => {
             $video.muted = muted;
             art.emit('volume', $video.volume);
         },

packages/artplayer/src/plugins/localVideo.js

@@ -4,7 +4,6 @@ export default function localVideo(art) {
     const {
         events: { proxy },
         template,
-        player,
         option,
         setting,
         i18n,
@@ -16,7 +15,7 @@ export default function localVideo(art) {
             if (canPlayType === 'maybe' || canPlayType === 'probably') {
                 const url = URL.createObjectURL(file);
                 option.title = file.name;
-                player.switchUrl(url, file.name);
+                art.switchUrl(url, file.name);
                 art.emit('localVideo', file);
             } else {
                 errorHandle(false, 'Playback of this file format is not supported');
@@ -24,12 +23,12 @@ export default function localVideo(art) {
         }
     }
 
-    proxy(template.$player, 'dragover', e => {
-        e.preventDefault();
+    proxy(template.$player, 'dragover', (event) => {
+        event.preventDefault();
     });
 
-    proxy(template.$player, 'drop', e => {
-        e.preventDefault();
+    proxy(template.$player, 'drop', (event) => {
+        event.preventDefault();
         const file = e.dataTransfer.files[0];
         loadVideo(file);
     });
@@ -65,10 +64,10 @@ export default function localVideo(art) {
                     <div class="art-upload-value"></div>
                 </div>
             `,
-            mounted: $setting => {
+            mounted: ($setting) => {
                 const $btn = query('.art-upload-btn', $setting);
                 const $value = query('.art-upload-value', $setting);
-                art.on('localVideo', file => {
+                art.on('localVideo', (file) => {
                     $value.textContent = file.name;
                     $value.title = file.name;
                 });

packages/artplayer/src/plugins/miniProgressBar.js

@@ -1,7 +1,6 @@
 export default function miniProgressBar(art) {
     const {
         layers,
-        player,
         option: { theme },
     } = art;
 
@@ -26,7 +25,7 @@ export default function miniProgressBar(art) {
             });
 
             art.on('video:timeupdate', () => {
-                $progressBar.style.width = `${player.played * 100}%`;
+                $progressBar.style.width = `${art.played * 100}%`;
             });
         },
     });

packages/artplayer/src/plugins/subtitleOffset.js

@@ -46,7 +46,7 @@ function settingMix(art) {
 
 export default function subtitleOffset(art) {
     const { clamp } = art.constructor.utils;
-    const { setting, notice, template, i18n, player } = art;
+    const { setting, notice, template, i18n } = art;
 
     setting.add(settingMix);
     let cuesCache = [];
@@ -67,8 +67,8 @@ export default function subtitleOffset(art) {
                             endTime: cue.endTime,
                         };
                     }
-                    cue.startTime = clamp(cuesCache[index].startTime + time, 0, player.duration);
-                    cue.endTime = clamp(cuesCache[index].endTime + time, 0, player.duration);
+                    cue.startTime = clamp(cuesCache[index].startTime + time, 0, art.duration);
+                    cue.endTime = clamp(cuesCache[index].endTime + time, 0, art.duration);
                 });
                 notice.show = `${i18n.get('Subtitle offset time')}: ${value}s`;
                 art.emit('subtitleOffset', value);

packages/artplayer/src/setting/aspectRatio.js

@@ -1,8 +1,8 @@
 import { inverseClass, queryAll } from '../utils';
 
 export default function aspectRatio(option) {
-    return art => {
-        const { i18n, player } = art;
+    return (art) => {
+        const { i18n } = art;
         return {
             ...option,
             html: `
@@ -19,15 +19,15 @@ export default function aspectRatio(option) {
                     </div>
                 </div>
             `,
-            click: (setting, event) => {
+            click: (_, event) => {
                 const { value } = event.target.dataset;
                 if (value) {
-                    player.aspectRatio = value;
+                    art.aspectRatio = value;
                 }
             },
-            mounted: $setting => {
-                art.on('aspectRatio', ratio => {
-                    const $current = queryAll('button', $setting).find(item => item.dataset.value === ratio);
+            mounted: ($setting) => {
+                art.on('aspectRatio', (ratio) => {
+                    const $current = queryAll('button', $setting).find((item) => item.dataset.value === ratio);
                     if ($current) {
                         inverseClass($current.parentElement, 'current');
                     }

packages/artplayer/src/setting/flip.js

@@ -1,8 +1,8 @@
 import { inverseClass, queryAll } from '../utils';
 
 export default function flip(option) {
-    return art => {
-        const { i18n, player } = art;
+    return (art) => {
+        const { i18n } = art;
         return {
             ...option,
             html: `
@@ -19,15 +19,15 @@ export default function flip(option) {
                     </div>
                 </div>
             `,
-            click: (setting, event) => {
+            click: (_, event) => {
                 const { value } = event.target.dataset;
                 if (value) {
-                    player.flip = value;
+                    art.flip = value;
                 }
             },
-            mounted: $setting => {
-                art.on('flip', flip => {
-                    const $current = queryAll('button', $setting).find(item => item.dataset.value === flip);
+            mounted: ($setting) => {
+                art.on('flip', (flip) => {
+                    const $current = queryAll('button', $setting).find((item) => item.dataset.value === flip);
                     if ($current) {
                         inverseClass($current.parentElement, 'current');
                     }

packages/artplayer/src/setting/playbackRate.js

@@ -1,10 +1,9 @@
 import { query } from '../utils';
 
 export default function playbackRate(option) {
-    return art => {
+    return (art) => {
         const {
             i18n,
-            player,
             events: { proxy },
         } = art;
         return {
@@ -17,16 +16,16 @@ export default function playbackRate(option) {
                     <input class="art-subtitle-range" value="1" type="range" min="0.5" max="2" step="0.25">
                 </div>
             `,
-            mounted: $setting => {
+            mounted: ($setting) => {
                 const $range = query('.art-setting-range input', $setting);
                 const $value = query('.art-subtitle-value', $setting);
                 proxy($range, 'change', () => {
                     const { value } = $range;
                     $value.innerText = value;
-                    player.playbackRate = Number(value);
+                    art.playbackRate = Number(value);
                 });
 
-                art.on('playbackRate', rate => {
+                art.on('playbackRate', (rate) => {
                     if (rate && $range.value !== rate) {
                         $range.value = rate;
                         $value.innerText = rate;

packages/artplayer/src/setting/rotate.js

@@ -2,7 +2,7 @@ import { query } from '../utils';
 
 export default function rotate(option) {
     return (art) => {
-        const { i18n, player } = art;
+        const { i18n } = art;
         return {
             ...option,
             html: `
@@ -21,14 +21,14 @@ export default function rotate(option) {
             click: (setting, event) => {
                 const { value } = event.target.dataset;
                 if (value) {
-                    const deg = player.rotate + Number(value);
+                    const deg = art.rotate + Number(value);
                     if (deg === 360 || deg === -360) {
-                        player.rotate = 0;
+                        art.rotate = 0;
                     } else {
-                        player.rotate = deg;
+                        art.rotate = deg;
                     }
                 } else {
-                    player.rotate = 0;
+                    art.rotate = 0;
                 }
             },
             mounted: ($setting) => {

packages/artplayer/src/whitelist.js

@@ -2,11 +2,15 @@ import { userAgent, isMobile } from './utils';
 
 export default class Whitelist {
     constructor(art) {
+        this.art = art;
+    }
+
+    get state() {
         const {
             constructor: { kindOf },
             option: { whitelist },
-        } = art;
-        this.state =
+        } = this.art;
+        return (
             !isMobile ||
             whitelist.some((item) => {
                 switch (kindOf(item)) {
@@ -19,6 +23,7 @@ export default class Whitelist {
                     default:
                         return false;
                 }
-            });
+            })
+        );
     }
 }