优化回调分离

README.md

@@ -511,6 +511,14 @@ var art = new Artplayer({
                         Click event of the layer
                     </td>
                 </tr>
+                <tr>
+                    <th><code>callback</code></th>
+                    <td>
+                        Type: <code>function</code><br>
+                        Default: <code>undefined</code><br><br>
+                        Callback after mounted;
+                    </td>
+                </tr>
             </table>
         </td>
         <td>
@@ -572,6 +580,14 @@ var art = new Artplayer({
                         Click event of the contextmenu
                     </td>
                 </tr>
+                <tr>
+                    <th><code>callback</code></th>
+                    <td>
+                        Type: <code>function</code><br>
+                        Default: <code>undefined</code><br><br>
+                        Callback after mounted;
+                    </td>
+                </tr>
             </table>
         </td>
         <td>
@@ -715,9 +731,13 @@ var art = new Artplayer({
     </tr>
     <tr>
         <th><code>art.player.switch()</code></th>
-        <td></td>
         <td>
-            <a href="">Demo</a>
+            Switch video url, use in the case of similar switching quality<br>
+            You can also pass a name to the url for display, like:<br>
+            <code>art.player.switch(url, name)</code>
+        </td>
+        <td>
+            <a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%0A%7D)%3B%0A%0Aart.on(%27firstCanplay%27%2C%20function%20()%20%7B%0A%20%20art.player.switch(url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-720p.mp4%27%2C%20%27720p%27)%3B%0A%7D)%3B">Demo</a>
         </td>
     </tr>
     <tr>
@@ -727,7 +747,7 @@ var art = new Artplayer({
             <code>art.player.playbackRateRemove()</code><br>
             <code>art.player.playbackRateReset()</code>
         </th>
-        <td></td>
+        <td>Manage the playback rate, at intervals of 0.1 to 10</td>
         <td>
             <a href="">Demo</a>
         </td>

docs/js/artplayer.js

@@ -1062,6 +1062,9 @@
     Object.defineProperty(player, 'currentTime', {
       get: function get() {
         return art.refs.$video.currentTime || 0;
+      },
+      set: function set(currentTime) {
+        art.refs.$video.currentTime = currentTime;
       }
     });
   }
@@ -1083,20 +1086,23 @@
     Object.defineProperty(player, 'switch', {
       value: function value(url) {
         var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'unknown';
-        var currentTime = player.currentTime;
-        art.emit('beforeMountUrl', url);
-        $video.src = player.mountUrl(url);
-        option.url = url;
-        player.playbackRateRemove();
-        player.aspectRatioRemove();
-        player.seek(currentTime);
 
-        if (isPlaying) {
+        if (url !== option.url) {
-          player.play();
+          var currentTime = player.currentTime;
+          art.emit('beforeMountUrl', url);
+          $video.src = player.mountUrl(url);
+          option.url = url;
+          player.playbackRateRemove();
+          player.aspectRatioRemove();
+          player.seek(currentTime);
+
+          if (isPlaying) {
+            player.play();
+          }
+
+          notice.show("".concat(i18n.get('Switch video'), ": ").concat(name));
+          art.emit('switch', url);
         }
-
-        notice.show("".concat(i18n.get('Switch video'), ": ").concat(name));
-        art.emit('switch', url);
       }
     });
   }
@@ -1126,8 +1132,6 @@
         if (player.$playbackRateState) {
           player.playbackRate(1);
           delete $player.dataset.playbackRate;
-          var $normal = art.contextmenu.playbackRate.querySelector('.normal');
-          inverseClass($normal, 'current');
         }
       }
     });
@@ -1194,8 +1198,6 @@
           setStyle($video, 'height', null);
           setStyle($video, 'padding', null);
           delete $player.dataset.aspectRatio;
-          var $default = art.contextmenu.aspectRatio.querySelector('.default');
-          inverseClass($default, 'current');
         }
       }
     });
@@ -3954,9 +3956,16 @@
 
         if (rate) {
           player.playbackRate(Number(rate));
-          inverseClass(target, 'current');
           art.contextmenu.hide();
         }
+      },
+      callback: function callback($menu) {
+        art.on('playbackRate', function (rate) {
+          var $current = Array.from($menu.querySelectorAll('span')).find(function (item) {
+            return Number(item.dataset.rate) === rate;
+          });
+          inverseClass($current, 'current');
+        });
       }
     };
   }
@@ -3976,9 +3985,16 @@
 
         if (ratio) {
           player.aspectRatio(ratio.split(':'));
-          inverseClass(target, 'current');
           art.contextmenu.hide();
         }
+      },
+      callback: function callback($menu) {
+        art.on('aspectRatio', function (ratio) {
+          var $current = Array.from($menu.querySelectorAll('span')).find(function (item) {
+            return item.dataset.ratio === ratio.join(':');
+          });
+          inverseClass($current, 'current');
+        });
       }
     };
   }
@@ -4087,10 +4103,11 @@
             });
           }
 
-          this.art.emit('contextmenu:add', $menu);
-          callback && callback($menu);
-          this[name] = $menu;
           insertByIndex($contextmenu, $menu, menu.index || id$1);
+          this[name] = $menu;
+          menu.callback && menu.callback($menu);
+          callback && callback($menu);
+          this.art.emit('contextmenu:add', $menu);
         }
       }
     }, {
@@ -4922,10 +4939,11 @@
             });
           }
 
-          this.art.emit('layers:add', $layer);
-          callback && callback($layer);
-          this[name] = $layer;
           insertByIndex($layers, $layer, layer.index || id$2);
+          this[name] = $layer;
+          item.callback && item.callback($layer);
+          callback && callback($layer);
+          this.art.emit('layers:add', $layer);
         }
       }
     }, {

docs/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/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.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/index.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.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/node_modules/tiny-emitter/index.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n.js","../../packages/artplayer/src/player/mountUrlMix.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/switchMix.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/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.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/infoLine 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/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.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/index.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.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/node_modules/tiny-emitter/index.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n.js","../../packages/artplayer/src/player/mountUrlMix.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/switchMix.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/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.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/infoLine truncated

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -17,9 +17,16 @@ export default function aspectRatio(art) {
       const { ratio } = target.dataset;
       if (ratio) {
         player.aspectRatio(ratio.split(':'));
-        inverseClass(target, 'current');
         art.contextmenu.hide();
       }
+    },
+    callback: $menu => {
+      art.on('aspectRatio', ratio => {
+        const $current = Array.from($menu.querySelectorAll('span')).find(
+          item => item.dataset.ratio === ratio.join(':')
+        );
+        inverseClass($current, 'current');
+      });
     }
   };
 }

packages/artplayer/src/contextmenu/index.js

@@ -60,10 +60,11 @@ export default class Contextmenu {
           this.art.emit('contextmenu:click', $menu);
         });
       }
-      this.art.emit('contextmenu:add', $menu);
-      callback && callback($menu);
-      this[name] = $menu;
       insertByIndex($contextmenu, $menu, menu.index || id);
+      this[name] = $menu;
+      menu.callback && menu.callback($menu);
+      callback && callback($menu);
+      this.art.emit('contextmenu:add', $menu);
     }
   }
 

packages/artplayer/src/contextmenu/playbackRate.js

@@ -20,9 +20,16 @@ export default function playbackRate(art) {
       const { rate } = target.dataset;
       if (rate) {
         player.playbackRate(Number(rate));
-        inverseClass(target, 'current');
         art.contextmenu.hide();
       }
+    },
+    callback: $menu => {
+      art.on('playbackRate', rate => {
+        const $current = Array.from($menu.querySelectorAll('span')).find(
+          item => Number(item.dataset.rate) === rate
+        );
+        inverseClass($current, 'current');
+      });
     }
   };
 }

packages/artplayer/src/layers.js

@@ -28,10 +28,11 @@ export default class Layers {
           this.art.emit('layers:click', $layer);
         });
       }
-      this.art.emit('layers:add', $layer);
-      callback && callback($layer);
-      this[name] = $layer;
       insertByIndex($layers, $layer, layer.index || id);
+      this[name] = $layer;
+      item.callback && item.callback($layer);
+      callback && callback($layer);
+      this.art.emit('layers:add', $layer);
     }
   }
 

packages/artplayer/src/player/aspectRatioMix.js

@@ -46,8 +46,6 @@ export default function aspectRatioMix(art, player) {
         setStyle($video, 'height', null);
         setStyle($video, 'padding', null);
         delete $player.dataset.aspectRatio;
-        const $default = art.contextmenu.aspectRatio.querySelector('.default');
-        inverseClass($default, 'current');
       }
     }
   });

packages/artplayer/src/player/currentTimeMix.js

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

packages/artplayer/src/player/playbackRateMix.js

@@ -1,4 +1,4 @@
-import { clamp, inverseClass } from '../utils';
+import { clamp } from '../utils';
 
 export default function playbackRateMix(art, player) {
   const { refs: { $video, $player }, i18n, notice } = art;
@@ -22,8 +22,6 @@ export default function playbackRateMix(art, player) {
       if (player.$playbackRateState) {
         player.playbackRate(1);
         delete $player.dataset.playbackRate;
-        const $normal = art.contextmenu.playbackRate.querySelector('.normal');
-        inverseClass($normal, 'current');
       }
     }
   });

packages/artplayer/src/player/switchMix.js

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