优化playing

docs/docs/README.md

@@ -103,9 +103,9 @@ Specify the format for the `url`, use with `customType`
 ```js
 var url = 'https://blog.zhw-island.com/assets-cdn';
 var art = new Artplayer({
-  container: '.artplayer-app',
-  url: url + '/video/one-more-time-one-more-chance-480p.flv',
-  type: 'flv'
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.flv',
+    type: 'flv',
 });
 ```
 
@@ -803,11 +803,10 @@ art.plugins.myPlugin.doSomething();
 
 ## Instance
 
-| propertie   | type       | Description                                      |
-| ----------- | ---------- | ------------------------------------------------ |
-| `isFocus`   | `Boolean`  | Return to focus state                            |
-| `isPlaying` | `Boolean`  | Return to playing state                          |
-| `destroy`   | `Function` | Destroy instance, will not remove dom by default |
+| propertie | type       | Description                                      |
+| --------- | ---------- | ------------------------------------------------ |
+| `isFocus` | `Boolean`  | Return to focus state                            |
+| `destroy` | `Function` | Destroy instance, will not remove dom by default |
 
 [Run Code](/)
 
@@ -867,6 +866,7 @@ Player core function
 | `playbackRateRemove`   | `Function` | Remove the playback rate                                                                          |
 | `playbackRateReset`    | `Function` | Recalculate the playback rate                                                                     |
 | `played`               | `Number`   | Return the proportion of the played                                                               |
+| `playing`              | `Boolean`  | Return to playing state                                                                           |
 | `screenshot`           | `Function` | Download a screenshot of current time                                                             |
 | `seek`                 | `Function` | Set the current time                                                                              |
 | `switchQuality`        | `Function` | Switch quality                                                                                    |

docs/lab/js/artplayer.js

@@ -1013,7 +1013,6 @@
     // });
 
     art.on('video:ended', function () {
-      art.isPlaying = false;
       art.controls.show();
       art.mask.show();
 
@@ -1030,7 +1029,6 @@
           notice.show("".concat(i18n.get('Reconnect'), ": ").concat(reconnectTime));
         });
       } else {
-        art.isPlaying = false;
         art.loading.hide();
         art.controls.hide();
         $player.classList.add('artplayer-error');
@@ -1051,17 +1049,14 @@
       art.loading.show();
     });
     art.on('video:pause', function () {
-      art.isPlaying = false;
       art.controls.show();
       art.mask.show();
     });
     art.on('video:play', function () {
-      art.isPlaying = true;
       art.controls.hide();
       art.mask.hide();
     });
     art.on('video:playing', function () {
-      art.isPlaying = true;
       art.controls.hide();
       art.mask.hide();
     }); // art.on('video:progress', () => {
@@ -1136,7 +1131,7 @@
   function toggleMix(art, player) {
     Object.defineProperty(player, 'toggle', {
       value: function value() {
-        if (art.isPlaying) {
+        if (player.playing) {
           player.pause();
         } else {
           player.play();
@@ -1223,15 +1218,15 @@
         var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'unknown';
 
         if (url !== option.url) {
-          var isPlaying = art.isPlaying;
-          var currentTime = player.currentTime;
+          var currentTime = player.currentTime,
+              playing = player.playing;
           player.attachUrl(url).then(function () {
             option.url = url;
             player.playbackRateRemove();
             player.aspectRatioRemove();
             player.seek(currentTime);
 
-            if (isPlaying) {
+            if (playing) {
               player.play();
             }
 
@@ -3013,7 +3008,7 @@
     proxy($video, 'leavepictureinpicture', function () {
       art.emit('pipExit');
 
-      if (art.isPlaying) {
+      if (player.playing) {
         player.play();
       }
     });
@@ -3122,6 +3117,15 @@
     });
   }
 
+  function playingMix(art, player) {
+    var $video = art.template.$video;
+    Object.defineProperty(player, 'playing', {
+      get: function get() {
+        return !!($video.currentTime > 0 && !$video.paused && !$video.ended && $video.readyState > 2);
+      }
+    });
+  }
+
   function resizeMix(art, player) {
     var _art$template = art.template,
         $container = _art$template.$container,
@@ -3213,6 +3217,7 @@
     pipMix(art, this);
     seekMix$1(art, this);
     seekMix$2(art, this);
+    playingMix(art, this);
     resizeMix(art, this);
     flipMix(art, this);
   };
@@ -4605,14 +4610,15 @@
   function mousemoveInitInit(art, events) {
     var _art$template = art.template,
         $player = _art$template.$player,
-        $video = _art$template.$video;
+        $video = _art$template.$video,
+        player = art.player;
     var autoHide = debounce(function () {
       $player.classList.add('artplayer-hide-cursor');
       $player.classList.remove('artplayer-hover');
       art.controls.hide();
     }, 5000);
     art.on('hoverleave', function () {
-      if (art.isPlaying) {
+      if (player.playing) {
         autoHide();
       }
     });
@@ -4621,7 +4627,7 @@
       $player.classList.remove('artplayer-hide-cursor');
       art.controls.show();
 
-      if (!art.player.pipState && art.isPlaying && event.target === $video) {
+      if (!art.player.pipState && player.playing && event.target === $video) {
         autoHide();
       }
     });
@@ -5422,7 +5428,6 @@
       key: "init",
       value: function init() {
         this.isFocus = false;
-        this.isPlaying = false;
         this.whitelist = new Whitelist(this);
         this.template = new Template(this);
         this.storage = new Storage(this);

docs/lab/js/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../../packages/artplayer/node_modules/tiny-emitter/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/node_modules/deepmerge/dist/es.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/error.js","../../../packages/artplayer/src/utils/dom.js","../../../packages/artplayer/src/utils/subtitle.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.js","../../../packages/artplayer/src/scheme/index.js","../../../packages/artplayer/src/config/mimeCodec.js","../../../packages/artplayer/src/config/mse.js","../../../packages/artplayer/src/config/video.js","../../../packages/artplayer/src/config/index.js","../../../packages/artplayer/src/whitelist.js","../../../packages/artplayer/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/attachUrlMix.js","../../../packages/artplayer/src/player/attrInit.js","../../../packages/artplayer/src/player/eventInit.js","../../../packages/artplayer/src/player/playMix.js","../../../packages/artplayer/src/player/pauseMin.js","../../../packages/artplayer/src/player/toggleMix.js","../../../packages/artplayer/src/player/seekMix.js","../../../packages/artplayer/src/player/volumeMix.js","../../../packages/artplayer/src/player/currentTimeMix.js","../../../packages/artplayer/src/player/durationMix.js","../../../packages/artplayer/src/player/switchQualityMix.js","../../../packages/artplayer/src/player/playbackRateMix.js","../../../packages/artplayer/src/player/aspectRatioMix.js","../../../packages/artplayer/src/player/screenshotMix.js","../../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../../packages/artplayer/src/player/fullscreenMix.js","../../../packages/artplayer/src/player/fullscreenWebMix.js","../../../packages/artplayer/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/src/mse.js","../../../packages/artplayer/src/utils/component.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.js","../../../packages/artplayer/src/controls/fullscreen.js","../../../packages/artplayer/src/controls/fullscreenWeb.js","../../../packages/artplayer/src/controls/pip.js","../../../packages/artplayer/src/controls/playAndPause.js","../../../packages/artplayer/src/controls/progress.js","../../../packages/artplayer/src/controls/subtitle.js","../../../packages/artplayer/src/controls/time.js","../../../packages/artplayer/src/controls/volume.js","../../../packages/artplayer/src/controls/setting.js","../../../packages/artplayer/src/controls/thumbnails.js","../../../packages/artplayer/src/controls/screenshot.js","../../../packages/artplayer/src/controls/quality.js","../../../packages/artplayer/src/controls/index.js","../../../packages/artplayer/src/contextmenu/playbackRate.js","../../../packages/artplayer/src/contextmenu/aspectRatio.jLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../../packages/artplayer/node_modules/tiny-emitter/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/node_modules/deepmerge/dist/es.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/error.js","../../../packages/artplayer/src/utils/dom.js","../../../packages/artplayer/src/utils/subtitle.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.js","../../../packages/artplayer/src/scheme/index.js","../../../packages/artplayer/src/config/mimeCodec.js","../../../packages/artplayer/src/config/mse.js","../../../packages/artplayer/src/config/video.js","../../../packages/artplayer/src/config/index.js","../../../packages/artplayer/src/whitelist.js","../../../packages/artplayer/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/attachUrlMix.js","../../../packages/artplayer/src/player/attrInit.js","../../../packages/artplayer/src/player/eventInit.js","../../../packages/artplayer/src/player/playMix.js","../../../packages/artplayer/src/player/pauseMin.js","../../../packages/artplayer/src/player/toggleMix.js","../../../packages/artplayer/src/player/seekMix.js","../../../packages/artplayer/src/player/volumeMix.js","../../../packages/artplayer/src/player/currentTimeMix.js","../../../packages/artplayer/src/player/durationMix.js","../../../packages/artplayer/src/player/switchQualityMix.js","../../../packages/artplayer/src/player/playbackRateMix.js","../../../packages/artplayer/src/player/aspectRatioMix.js","../../../packages/artplayer/src/player/screenshotMix.js","../../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../../packages/artplayer/src/player/fullscreenMix.js","../../../packages/artplayer/src/player/fullscreenWebMix.js","../../../packages/artplayer/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/playingMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/src/mse.js","../../../packages/artplayer/src/utils/component.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.js","../../../packages/artplayer/src/controls/fullscreen.js","../../../packages/artplayer/src/controls/fullscreenWeb.js","../../../packages/artplayer/src/controls/pip.js","../../../packages/artplayer/src/controls/playAndPause.js","../../../packages/artplayer/src/controls/progress.js","../../../packages/artplayer/src/controls/subtitle.js","../../../packages/artplayer/src/controls/time.js","../../../packages/artplayer/src/controls/volume.js","../../../packages/artplayer/src/controls/setting.js","../../../packages/artplayer/src/controls/thumbnails.js","../../../packages/artplayer/src/controls/screenshot.js","../../../packages/artplayer/src/controls/quality.js","../../../packages/artplayer/src/controls/index.js","../../../packages/artplayer/src/contextmenu/playbackRate.js","..Line truncated

packages/artplayer/src/events/mousemoveInit.js

@@ -3,6 +3,7 @@ import { debounce } from '../utils';
 export default function mousemoveInitInit(art, events) {
     const {
         template: { $player, $video },
+        player
     } = art;
 
     const autoHide = debounce(() => {
@@ -12,7 +13,7 @@ export default function mousemoveInitInit(art, events) {
     }, 5000);
 
     art.on('hoverleave', () => {
-        if (art.isPlaying) {
+        if (player.playing) {
             autoHide();
         }
     });
@@ -21,7 +22,7 @@ export default function mousemoveInitInit(art, events) {
         autoHide.clearTimeout();
         $player.classList.remove('artplayer-hide-cursor');
         art.controls.show();
-        if (!art.player.pipState && art.isPlaying && event.target === $video) {
+        if (!art.player.pipState && player.playing && event.target === $video) {
             autoHide();
         }
     });

packages/artplayer/src/index.js

@@ -108,7 +108,6 @@ class Artplayer extends Emitter {
 
     init() {
         this.isFocus = false;
-        this.isPlaying = false;
         
         this.whitelist = new Whitelist(this);
         this.template = new Template(this);

packages/artplayer/src/player/eventInit.js

@@ -55,7 +55,6 @@ export default function eventInit(art, player) {
     // });
 
     art.on('video:ended', () => {
-        art.isPlaying = false;
         art.controls.show();
         art.mask.show();
         if (option.loop) {
@@ -72,7 +71,6 @@ export default function eventInit(art, player) {
                 notice.show(`${i18n.get('Reconnect')}: ${reconnectTime}`);
             });
         } else {
-            art.isPlaying = false;
             art.loading.hide();
             art.controls.hide();
             $player.classList.add('artplayer-error');
@@ -98,19 +96,16 @@ export default function eventInit(art, player) {
     });
 
     art.on('video:pause', () => {
-        art.isPlaying = false;
         art.controls.show();
         art.mask.show();
     });
 
     art.on('video:play', () => {
-        art.isPlaying = true;
         art.controls.hide();
         art.mask.hide();
     });
 
     art.on('video:playing', () => {
-        art.isPlaying = true;
         art.controls.hide();
         art.mask.hide();
     });

packages/artplayer/src/player/index.js

@@ -17,6 +17,7 @@ import fullscreenWebMix from './fullscreenWebMix';
 import pipMix from './pipMix';
 import loadedMix from './loadedMix';
 import playedMix from './playedMix';
+import playingMix from './playingMix';
 import autoSizeMix from './autoSizeMix';
 import flipMix from './flipMix';
 
@@ -41,6 +42,7 @@ export default class Player {
         pipMix(art, this);
         loadedMix(art, this);
         playedMix(art, this);
+        playingMix(art, this);
         autoSizeMix(art, this);
         flipMix(art, this);
     }

packages/artplayer/src/player/pipMix.js

@@ -38,7 +38,7 @@ function nativePip(art, player) {
 
     proxy($video, 'leavepictureinpicture', () => {
         art.emit('pipExit');
-        if (art.isPlaying) {
+        if (player.playing) {
             player.play();
         }
     });

packages/artplayer/src/player/playingMix.js

@@ -0,0 +1,6 @@
+export default function playingMix(art, player) {
+    const { $video } = art.template;
+    Object.defineProperty(player, 'playing', {
+        get: () => !!($video.currentTime > 0 && !$video.paused && !$video.ended && $video.readyState > 2),
+    });
+}

packages/artplayer/src/player/switchQualityMix.js

@@ -8,14 +8,13 @@ export default function switchMix(art, player) {
     Object.defineProperty(player, 'switchQuality', {
         value: (url, name = 'unknown') => {
             if (url !== option.url) {
-                const { isPlaying } = art;
-                const { currentTime } = player;
+                const { currentTime, playing } = player;
                 player.attachUrl(url).then(() => {
                     option.url = url;
                     player.playbackRateRemove();
                     player.aspectRatioRemove();
                     player.seek(currentTime);
-                    if (isPlaying) {
+                    if (playing) {
                         player.play();
                     }
                     notice.show(`${i18n.get('Switch video')}: ${name}`);

packages/artplayer/src/player/toggleMix.js

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