简化player接口

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -15,7 +15,7 @@ export default function aspectRatio(menuOption) {
                 const { target } = event;
                 const { ratio } = target.dataset;
                 if (ratio) {
-                    player.aspectRatio(ratio);
+                    player.aspectRatio = ratio;
                     art.contextmenu.hide();
                 }
             },

packages/artplayer/src/contextmenu/playbackRate.js

@@ -18,7 +18,7 @@ export default function playbackRate(menuOption) {
                 const { target } = event;
                 const { rate } = target.dataset;
                 if (rate) {
-                    player.playbackRate(Number(rate));
+                    player.playbackRate = Number(rate);
                     art.contextmenu.hide();
                 }
             },

packages/artplayer/src/controls/fullscreen.js

@@ -15,7 +15,7 @@ export default function fullscreen(controlOption) {
             tooltip($fullscreen, i18n.get('Fullscreen'));
 
             proxy($control, 'click', () => {
-                player.fullscreenToggle();
+                player.fullscreenToggle = true;
             });
 
             art.on('fullscreen:enabled', () => {

packages/artplayer/src/controls/fullscreenWeb.js

@@ -15,7 +15,7 @@ export default function fullscreenWeb(controlOption) {
             tooltip($fullscreenWeb, i18n.get('Web fullscreen'));
 
             proxy($control, 'click', () => {
-                player.fullscreenWebToggle();
+                player.fullscreenWebToggle = true;
             });
 
             art.on('fullscreenWeb:enabled', () => {

packages/artplayer/src/controls/pip.js

@@ -13,7 +13,7 @@ export default function pip(controlOption) {
             const $pip = append($control, icons.pip);
             tooltip($pip, i18n.get('Mini player'));
             proxy($control, 'click', () => {
-                player.pipEnabled();
+                player.pip = true;
             });
         },
     });

packages/artplayer/src/controls/playAndPause.js

@@ -17,11 +17,11 @@ export default function playAndPause(controlOption) {
             tooltip($pause, i18n.get('Pause'));
 
             proxy($play, 'click', () => {
-                player.play();
+                player.play = true;
             });
 
             proxy($pause, 'click', () => {
-                player.pause();
+                player.pause = true;
             });
 
             function showPlay() {

packages/artplayer/src/controls/progress.js

@@ -121,7 +121,7 @@ export default function progress(controlOption) {
                     if (event.target !== $indicator) {
                         const { second, percentage } = getPosFromEvent(art, event);
                         setBar('played', percentage);
-                        player.seek(second);
+                        player.seek = second;
                     }
                 });
 
@@ -134,7 +134,7 @@ export default function progress(controlOption) {
                         const { second, percentage } = getPosFromEvent(art, event);
                         $indicator.classList.add('art-show-indicator');
                         setBar('played', percentage);
-                        player.seek(second);
+                        player.seek = second;
                     }
                 });
 

packages/artplayer/src/events/mousemoveInit.js

@@ -22,7 +22,7 @@ export default function mousemoveInitInit(art, events) {
         autoHide.clearTimeout();
         $player.classList.remove('artplayer-hide-cursor');
         art.controls.show();
-        if (!art.player.pipState && player.playing && event.target === $video) {
+        if (!art.player.pip && player.playing && event.target === $video) {
             autoHide();
         }
     });

packages/artplayer/src/events/resizeInit.js

@@ -8,13 +8,13 @@ export default function resizeInit(art, events) {
     
     const resizeObserver = new ResizeObserver(() => {
         if (option.autoSize) {
-            if (!art.player.fullscreenState && !art.player.fullscreenWebState && !art.player.pipState) {
-                art.player.autoSize();
+            if (!art.player.fullscreen && !art.player.fullscreenWeb && !art.player.pip) {
+                art.player.autoSize = true;
             } else {
-                art.player.autoSizeRemove();
+                art.player.autoSize = false;
             }
         }
-        art.player.aspectRatioReset();
+        art.player.aspectRatioReset = true;
         art.emit('resize', $player);
     });
     resizeObserver.observe($player);

packages/artplayer/src/hotkey.js

@@ -4,17 +4,17 @@ export default class Hotkey {
         this.keys = {};
 
         this.add(27, () => {
-            if (art.player.fullscreenWebState) {
-                art.player.fullscreenWebExit();
+            if (art.player.fullscreenWeb) {
+                art.player.fullscreenWeb = false;
             }
         });
 
         this.add(32, () => {
-            art.player.toggle();
+            art.player.toggle = true;
         });
 
         this.add(37, () => {
-            art.player.seek(art.player.currentTime - 10);
+            art.player.seek = art.player.currentTime - 10;
         });
 
         this.add(38, () => {
@@ -22,7 +22,7 @@ export default class Hotkey {
         });
 
         this.add(39, () => {
-            art.player.seek(art.player.currentTime + 10);
+            art.player.seek = art.player.currentTime + 10;
         });
 
         this.add(40, () => {

packages/artplayer/src/player/aspectRatioMix.js

@@ -7,45 +7,43 @@ export default function aspectRatioMix(art, player) {
         notice,
     } = art;
 
-    Object.defineProperty(player, 'aspectRatioState', {
-        get: () => $player.dataset.aspectRatio || '',
-    });
-
     Object.defineProperty(player, 'aspectRatio', {
-        value: ratio => {
-            const ratioList = ['default', '4:3', '16:9'];
-            errorHandle(ratioList.includes(ratio), `'aspectRatio' only accept ${ratioList.toString()} as parameters`);
-
-            if (ratio === 'default') {
-                player.aspectRatioRemove();
-            } else {
-                const ratioArray = ratio.split(':');
-                const { videoWidth, videoHeight } = $video;
-                const { clientWidth, clientHeight } = $player;
-                const videoRatio = videoWidth / videoHeight;
-                const setupRatio = ratioArray[0] / ratioArray[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`);
-                }
-            }
-
-            $player.dataset.aspectRatio = ratio;
-            notice.show(`${i18n.get('Aspect ratio')}: ${ratio === 'default' ? i18n.get('Default') : ratio}`);
-            art.emit('aspectRatioChange', ratio);
+        get() {
+            return $player.dataset.aspectRatio || '';
         },
-    });
+        set(ratio) {
+            if (ratio) {
+                const ratioList = ['default', '4:3', '16:9'];
+                errorHandle(
+                    ratioList.includes(ratio),
+                    `'aspectRatio' only accept ${ratioList.toString()} as parameters`,
+                );
 
-    Object.defineProperty(player, 'aspectRatioRemove', {
-        value: () => {
-            if (player.aspectRatioState) {
+                if (ratio === 'default') {
+                    player.aspectRatio = false;
+                } else {
+                    const ratioArray = ratio.split(':');
+                    const { videoWidth, videoHeight } = $video;
+                    const { clientWidth, clientHeight } = $player;
+                    const videoRatio = videoWidth / videoHeight;
+                    const setupRatio = ratioArray[0] / ratioArray[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`);
+                    }
+                }
+
+                $player.dataset.aspectRatio = ratio;
+                notice.show(`${i18n.get('Aspect ratio')}: ${ratio === 'default' ? i18n.get('Default') : ratio}`);
+                art.emit('aspectRatioChange', ratio);
+            } else if (player.aspectRatio) {
                 setStyle($video, 'width', null);
                 setStyle($video, 'height', null);
                 setStyle($video, 'padding', null);
@@ -56,10 +54,9 @@ export default function aspectRatioMix(art, player) {
     });
 
     Object.defineProperty(player, 'aspectRatioReset', {
-        value: () => {
-            const { aspectRatio } = $player.dataset;
-            if (aspectRatio) {
-                player.aspectRatio(aspectRatio);
+        set(value) {
+            if (value && player.aspectRatio) {
+                player.aspectRatio = player.aspectRatio;
                 art.emit('aspectRatioReset');
             }
         },

packages/artplayer/src/player/autoSizeMix.js

@@ -5,36 +5,33 @@ export default function resizeMix(art, player) {
         template: { $container, $player, $video },
     } = art;
 
-    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');
+        get() {
+            return $container.classList.contains('artplayer-auto-size');
         },
-    });
-
-    Object.defineProperty(player, 'autoSizeRemove', {
-        value: () => {
-            $container.classList.remove('artplayer-auto-size');
-            setStyle($player, 'width', null);
-            setStyle($player, 'height', null);
-            art.emit('autoSizeRemove');
+        set(value) {
+            if (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');
+            } else {
+                $container.classList.remove('artplayer-auto-size');
+                setStyle($player, 'width', null);
+                setStyle($player, 'height', null);
+                art.emit('autoSizeRemove');
+            }
         },
     });
 }

packages/artplayer/src/player/eventInit.js

@@ -14,7 +14,7 @@ export default function eventInit(art, player) {
     const maxReconnectTime = 5;
     
     proxy($video, 'click', () => {
-        player.toggle();
+        player.toggle = true;
     });
 
     config.video.events.forEach(eventName => {
@@ -50,8 +50,8 @@ export default function eventInit(art, player) {
         art.controls.show();
         art.mask.show();
         if (option.loop) {
-            player.seek(0);
-            player.play();
+            player.seek = 0;
+            player.play = true;
         }
     });
 
@@ -79,7 +79,7 @@ export default function eventInit(art, player) {
 
     art.on('video:loadedmetadata', () => {
         if (option.autoSize) {
-            player.autoSize();
+            player.autoSize = true;
         }
     });
 

packages/artplayer/src/player/flipMix.js

@@ -1,23 +1,20 @@
 import { errorHandle } from '../utils';
 
 export default function flipMix(art, player) {
-    Object.defineProperty(player, 'flipState', {
-        get: () => art.template.$player.dataset.flip,
-    });
-
     Object.defineProperty(player, 'flip', {
-        value: flip => {
-            const flipList = ['normal', 'horizontal', 'vertical'];
-            errorHandle(flipList.includes(flip), `'flip' only accept ${flipList.toString()} as parameters`);
-            art.template.$player.dataset.flip = flip;
-            art.emit('flipChange', flip);
+        get() {
+            return art.template.$player.dataset.flip;
         },
-    });
-
-    Object.defineProperty(player, 'flipRemove', {
-        value: () => {
-            delete art.template.$player.dataset.flip;
-            art.emit('flipRemove');
+        set(flip) {
+            if (flip) {
+                const flipList = ['normal', 'horizontal', 'vertical'];
+                errorHandle(flipList.includes(flip), `'flip' only accept ${flipList.toString()} as parameters`);
+                art.template.$player.dataset.flip = flip;
+                art.emit('flipChange', flip);
+            } else {
+                delete art.template.$player.dataset.flip;
+                art.emit('flipRemove');
+            }
         },
     });
 }

packages/artplayer/src/player/fullscreenMix.js

@@ -27,50 +27,37 @@ export default function fullscreenMix(art, player) {
         screenfullError();
     }
 
-    Object.defineProperty(player, 'fullscreenState', {
-        get: () => screenfull.isFullscreen,
-    });
-
-    Object.defineProperty(player, 'fullscreenEnabled', {
-        value: () => {
-            if (screenfull.enabled) {
-                if (!player.fullscreenState) {
-                    player.fullscreenWebExit();
-                    screenfull.request($player).then(() => {
-                        $player.classList.add('artplayer-fullscreen');
-                        player.aspectRatioReset();
-                        art.emit('fullscreen:enabled');
-                    });
-                }
-            } else {
-                screenfullError();
-            }
+    Object.defineProperty(player, 'fullscreen', {
+        get() {
+            return screenfull.isFullscreen;
         },
-    });
-
-    Object.defineProperty(player, 'fullscreenExit', {
-        value: () => {
-            if (screenfull.enabled) {
-                if (player.fullscreenState) {
-                    player.fullscreenWebExit();
-                    screenfull.exit().then(() => {
-                        $player.classList.remove('artplayer-fullscreen');
-                        player.aspectRatioReset();
-                        art.emit('fullscreen:exit');
-                    });
+        set(value) {
+            if (value) {
+                if (player.fullscreenWeb) {
+                    player.fullscreenWeb = false;
                 }
+                screenfull.request($player).then(() => {
+                    $player.classList.add('artplayer-fullscreen');
+                    player.aspectRatioReset = true;
+                    art.emit('fullscreen:enabled');
+                });
             } else {
-                screenfullError();
+                if (player.fullscreenWeb) {
+                    player.fullscreenWeb = false;
+                }
+                screenfull.exit().then(() => {
+                    $player.classList.remove('artplayer-fullscreen');
+                    player.aspectRatioReset = true;
+                    art.emit('fullscreen:exit');
+                });
             }
         },
     });
 
     Object.defineProperty(player, 'fullscreenToggle', {
-        value: () => {
-            if (player.fullscreenState) {
-                player.fullscreenExit();
-            } else {
-                player.fullscreenEnabled();
+        set(value) {
+            if (value) {
+                player.fullscreen = !player.fullscreen;
             }
         },
     });

packages/artplayer/src/player/fullscreenWebMix.js

@@ -3,38 +3,33 @@ export default function fullscreenWebMix(art, player) {
         template: { $player },
     } = art;
 
-    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');
-            player.aspectRatioReset();
-            art.emit('fullscreenWeb:enabled');
+    Object.defineProperty(player, 'fullscreenWeb', {
+        get() {
+            return $player.classList.contains('artplayer-web-fullscreen');
         },
-    });
-
-    Object.defineProperty(player, 'fullscreenWebExit', {
-        value: () => {
-            if (player.fullscreenWebState) {
-                player.fullscreenExit();
+        set(value) {
+            if (value) {
+                if (player.fullscreen) {
+                    player.fullscreen = false;
+                }
+                $player.classList.add('artplayer-web-fullscreen');
+                player.aspectRatioReset = true;
+                art.emit('fullscreenWeb:enabled');
+            } else {
+                if (player.fullscreen) {
+                    player.fullscreen = false;
+                }
                 $player.classList.remove('artplayer-web-fullscreen');
-                player.aspectRatioReset();
+                player.aspectRatioReset = true;
                 art.emit('fullscreenWeb:exit');
             }
         },
     });
 
     Object.defineProperty(player, 'fullscreenWebToggle', {
-        value: () => {
-            if (player.fullscreenWebState) {
-                player.fullscreenWebExit();
-            } else {
-                player.fullscreenWebEnabled();
+        set(value) {
+            if (value) {
+                player.fullscreenWeb = !player.fullscreenWeb;
             }
         },
     });

packages/artplayer/src/player/pauseMin.js

@@ -6,10 +6,17 @@ export default function pauseMin(art, player) {
     } = art;
 
     Object.defineProperty(player, 'pause', {
-        value: () => {
-            $video.pause();
-            notice.show(i18n.get('Pause'));
-            art.emit('pause');
+        get() {
+            return $video.paused;
+        },
+        set(value) {
+            if (value) {
+                $video.pause();
+                notice.show(i18n.get('Pause'));
+                art.emit('pause');
+            } else {
+                player.play = true;
+            }
         },
     });
 }

packages/artplayer/src/player/pipMix.js

@@ -10,25 +10,22 @@ function nativePip(art, player) {
 
     $video.disablePictureInPicture = false;
 
-    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, 'pip', {
+        get() {
+            return document.pictureInPictureElement;
         },
-    });
-
-    Object.defineProperty(player, 'pipExit', {
-        value: () => {
-            document.exitPictureInPicture().catch(error => {
-                notice.show(error, true, 3000);
-                console.warn(error);
-            });
+        set(value) {
+            if (value) {
+                $video.requestPictureInPicture().catch(error => {
+                    notice.show(error, true, 3000);
+                    console.warn(error);
+                });
+            } else {
+                document.exitPictureInPicture().catch(error => {
+                    notice.show(error, true, 3000);
+                    console.warn(error);
+                });
+            }
         },
     });
 
@@ -41,8 +38,8 @@ function nativePip(art, player) {
     });
 
     art.on('destroy', () => {
-        if (player.pipState) {
-            player.pipExit();
+        if (player.pip) {
+            player.pip = false;
         }
     });
 }
@@ -52,21 +49,18 @@ function webkitPip(art, player) {
 
     $video.webkitSetPresentationMode('inline');
 
-    Object.defineProperty(player, 'pipState', {
-        get: () => $video.webkitPresentationMode === 'picture-in-picture',
-    });
-
-    Object.defineProperty(player, 'pipEnabled', {
-        value: () => {
-            $video.webkitSetPresentationMode('picture-in-picture');
-            art.emit('pipEnabled');
+    Object.defineProperty(player, 'pip', {
+        get() {
+            return $video.webkitPresentationMode === 'picture-in-picture';
         },
-    });
-
-    Object.defineProperty(player, 'pipExit', {
-        value: () => {
-            $video.webkitSetPresentationMode('inline');
-            art.emit('pipExit');
+        set(value) {
+            if (value) {
+                $video.webkitSetPresentationMode('picture-in-picture');
+                art.emit('pipEnabled');
+            } else {
+                $video.webkitSetPresentationMode('inline');
+                art.emit('pipExit');
+            }
         },
     });
 }
@@ -81,55 +75,50 @@ function customPip(art, player) {
     let cachePos = null;
     let draggie = null;
 
-    Object.defineProperty(player, 'pipState', {
-        get: () => $player.classList.contains('artplayer-pip'),
-    });
-
-    Object.defineProperty(player, 'pipEnabled', {
-        value: () => {
-            if (player.autoSizeState) {
-                player.autoSizeRemove();
-            }
-
-            if (!draggie) {
-                draggie = new Draggabilly($player, {
-                    handle: '.artplayer-pip-header',
-                });
-
-                append($pipTitle, option.title || i18n.get('Mini player'));
-
-                proxy($pipClose, 'click', () => {
-                    player.pipExit();
-                });
-
-                destroyEvents.push(() => {
-                    draggie.destroy();
-                });
-            } else if (cachePos && cachePos.x !== 0 && cachePos.y !== 0) {
-                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');
+    Object.defineProperty(player, 'pip', {
+        get() {
+            return $player.classList.contains('artplayer-pip');
         },
-    });
+        set(value) {
+            if (value) {
+                if (player.autoSize) {
+                    player.autoSize = false;
+                }
 
-    Object.defineProperty(player, 'pipExit', {
-        value: () => {
-            if (player.pipState) {
+                if (!draggie) {
+                    draggie = new Draggabilly($player, {
+                        handle: '.artplayer-pip-header',
+                    });
+
+                    append($pipTitle, option.title || i18n.get('Mini player'));
+
+                    proxy($pipClose, 'click', () => {
+                        player.pip = false;
+                    });
+
+                    destroyEvents.push(() => {
+                        draggie.destroy();
+                    });
+                } else if (cachePos && cachePos.x !== 0 && cachePos.y !== 0) {
+                    setStyle($player, 'left', `${cachePos.x}px`);
+                    setStyle($player, 'top', `${cachePos.y}px`);
+                }
+
+                $player.classList.add('artplayer-pip');
+                player.fullscreen = false;
+                player.fullscreenWeb = false;
+                player.aspectRatio = false;
+                player.playbackRate = false;
+                art.emit('pipEnabled');
+            } else if (player.pip) {
                 $player.classList.remove('artplayer-pip');
                 cachePos = draggie.position;
                 setStyle($player, 'left', null);
                 setStyle($player, 'top', null);
-                player.fullscreenExit();
-                player.fullscreenWebExit();
-                player.aspectRatioRemove();
-                player.playbackRateRemove();
+                player.fullscreen = false;
+                player.fullscreenWeb = false;
+                player.aspectRatio = false;
+                player.playbackRate = false;
                 art.emit('pipExit');
             }
         },
@@ -147,11 +136,9 @@ export default function pipMix(art, player) {
     }
 
     Object.defineProperty(player, 'pipToggle', {
-        value: () => {
-            if (player.pipState) {
-                player.pipExit();
-            } else {
-                player.pipEnabled();
+        set(value) {
+            if (value) {
+                player.pip = !player.pip;
             }
         },
     });

packages/artplayer/src/player/playMix.js

@@ -7,21 +7,29 @@ export default function playMix(art, player) {
     } = 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);
-                });
-            }
+        set(value) {
+            if (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 = true;
+                        });
+                }
 
-            notice.show(i18n.get('Play'));
-            art.emit('play');
+                notice.show(i18n.get('Play'));
+                art.emit('play');
+            } else {
+                player.pause = true;
+            }
         },
     });
 }

packages/artplayer/src/player/playbackRateMix.js

@@ -7,30 +7,25 @@ export default function playbackRateMix(art, player) {
         notice,
     } = art;
 
-    Object.defineProperty(player, 'playbackRateState', {
-        get: () => $player.dataset.playbackRate,
-    });
-
     Object.defineProperty(player, 'playbackRate', {
-        value: rate => {
-            const rateList = [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
-            errorHandle(rateList.includes(rate), `'playbackRate' only accept ${rateList.toString()} as parameters`);
-
-            if (rate === $player.dataset.playbackRate) {
-                return;
-            }
-
-            $video.playbackRate = rate;
-            $player.dataset.playbackRate = rate;
-            notice.show(`${i18n.get('Rate')}: ${rate === 1.0 ? i18n.get('Normal') : `${rate}x`}`);
-            art.emit('playbackRateChange', rate);
+        get() {
+            return $player.dataset.playbackRate;
         },
-    });
+        set(rate) {
+            if (rate) {
+                const rateList = [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
+                errorHandle(rateList.includes(rate), `'playbackRate' only accept ${rateList.toString()} as parameters`);
 
-    Object.defineProperty(player, 'playbackRateRemove', {
-        value: () => {
-            if (player.playbackRateState) {
-                player.playbackRate(1);
+                if (rate === $player.dataset.playbackRate) {
+                    return;
+                }
+
+                $video.playbackRate = rate;
+                $player.dataset.playbackRate = rate;
+                notice.show(`${i18n.get('Rate')}: ${rate === 1.0 ? i18n.get('Normal') : `${rate}x`}`);
+                art.emit('playbackRateChange', rate);
+            } else if (player.playbackRate) {
+                player.playbackRate = 1;
                 delete $player.dataset.playbackRate;
                 art.emit('playbackRateRemove');
             }
@@ -38,11 +33,13 @@ export default function playbackRateMix(art, player) {
     });
 
     Object.defineProperty(player, 'playbackRateReset', {
-        value: () => {
-            const { playbackRate } = $player.dataset;
-            if (playbackRate) {
-                player.playbackRate(Number(playbackRate));
-                art.emit('playbackRateReset');
+        set(value) {
+            if (value) {
+                const { playbackRate } = $player.dataset;
+                if (playbackRate) {
+                    player.playbackRate = Number(playbackRate);
+                    art.emit('playbackRateReset');
+                }
             }
         },
     });

packages/artplayer/src/player/seekMix.js

@@ -4,7 +4,7 @@ export default function seekMix(art, player) {
     const { notice } = art;
 
     Object.defineProperty(player, 'seek', {
-        value: time => {
+        set(time) {
             player.currentTime = time;
             notice.show(`${secondToTime(time)} / ${secondToTime(player.duration)}`);
             art.emit('seek', time);

packages/artplayer/src/player/switchMix.js

@@ -7,13 +7,13 @@ export default function switchMix(art, player) {
                 const { currentTime, playing } = player;
                 return player.attachUrl(url).then(() => {
                     option.url = url;
-                    player.playbackRateRemove();
-                    player.aspectRatioRemove();
+                    player.playbackRate = false;
+                    player.aspectRatio = false;
                     art.once('video:canplay', () => {
                         player.currentTime = currentTime;
                     });
                     if (playing) {
-                        player.play();
+                        player.play = true;
                     }
                     notice.show(`${i18n.get('Switch video')}: ${name}`);
                     art.emit('switch', url);
@@ -29,11 +29,11 @@ export default function switchMix(art, player) {
                 const { playing } = player;
                 return player.attachUrl(url).then(() => {
                     option.url = url;
-                    player.playbackRateRemove();
-                    player.aspectRatioRemove();
+                    player.playbackRate = false;
+                    player.aspectRatio = false;
                     player.currentTime = 0;
                     if (playing) {
-                        player.play();
+                        player.play = true;
                     }
                     notice.show(`${i18n.get('Switch video')}: ${name}`);
                     art.emit('switch', url);

packages/artplayer/src/player/toggleMix.js

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

packages/artplayer/src/plugins/localPreview.js

@@ -25,8 +25,8 @@ export default function localPreview(art) {
             const canPlayType = template.$video.canPlayType(file.type);
             if (canPlayType === 'maybe' || canPlayType === 'probably') {
                 const url = URL.createObjectURL(file);
-                player.playbackRateRemove();
-                player.aspectRatioRemove();
+                player.playbackRate = false;
+                player.aspectRatio = false;
                 template.$video.src = url;
                 sleep(1000).then(() => {
                     player.currentTime = 0;

packages/artplayer/src/setting/aspectRatio.js

@@ -22,7 +22,7 @@ export default function aspectRatio(settingOption) {
             click: event => {
                 const { value } = event.target.dataset;
                 if (value) {
-                    player.aspectRatio(value);
+                    player.aspectRatio = value;
                 }
             },
             mounted: $setting => {

packages/artplayer/src/setting/flip.js

@@ -22,7 +22,7 @@ export default function flip(settingOption) {
             click: event => {
                 const { value } = event.target.dataset;
                 if (value) {
-                    player.flip(value);
+                    player.flip = value;
                 }
             },
             mounted: $setting => {

packages/artplayer/src/setting/playbackRate.js

@@ -21,7 +21,7 @@ export default function playbackRate(settingOption) {
                 proxy($range, 'change', () => {
                     const { value } = $range;
                     $value.innerText = value;
-                    player.playbackRate(Number(value));
+                    player.playbackRate = Number(value);
                 });
 
                 art.on('playbackRateChange', rate => {