4.2.0

packages/artplayer/src/control/progress.js

@@ -1,10 +1,7 @@
 import { query, clamp, append, setStyle, setStyles, secondToTime, includeFromEvent } from '../utils';
 
 export function getPosFromEvent(art, event) {
-    const {
-        template: { $progress },
-    } = art;
-
+    const { $progress } = art.template;
     const { left } = $progress.getBoundingClientRect();
     const width = clamp(event.pageX - left, 0, $progress.clientWidth);
     const second = (width / $progress.clientWidth) * art.duration;

packages/artplayer/src/hotkey.js

@@ -69,5 +69,6 @@ export default class Hotkey {
                 this.keys[key].splice(index, 1);
             }
         }
+        return this;
     }
 }

packages/artplayer/src/player/optionInit.js

@@ -16,12 +16,12 @@ export default function attrInit(art) {
     }
 
     if (option.volume) {
-        art.volume = clamp(option.volume, 0, 1);
+        $video.volume = clamp(option.volume, 0, 1);
     }
 
-    const volume = storage.get('volume');
-    if (volume) {
-        art.volume = clamp(volume, 0, 1);
+    const volumeStorage = storage.get('volume');
+    if (typeof volumeStorage === 'number') {
+        $video.volume = clamp(volumeStorage, 0, 1);
     }
 
     if (option.poster) {

packages/artplayer/src/plugins/miniProgressBar.js

@@ -1,5 +1,5 @@
 export default function miniProgressBar(art) {
-    const { layers, option } = art;
+    const { layers } = art;
 
     layers.add({
         name: 'miniProgressBar',

packages/artplayer/src/template.js

@@ -3,27 +3,28 @@ import { errorHandle, query, addClass, replaceElement, isMobile } from './utils'
 export default class Template {
     constructor(art) {
         this.art = art;
+        const { option, constructor, whitelist } = art;
 
-        this.query = this.query.bind(this);
-
-        if (art.option.container instanceof Element) {
-            this.$container = art.option.container;
+        if (option.container instanceof Element) {
+            this.$container = option.container;
         } else {
-            this.$container = query(art.option.container);
-            errorHandle(this.$container, `No container element found by ${art.option.container}`);
+            this.$container = query(option.container);
+            errorHandle(this.$container, `No container element found by ${option.container}`);
         }
 
         const type = this.$container.tagName.toLowerCase();
         errorHandle(type === 'div', `Unsupported container element type, only support 'div' but got '${type}'`);
 
         errorHandle(
-            art.constructor.instances.every((ins) => ins.template.$container !== this.$container),
+            constructor.instances.every((ins) => ins.template.$container !== this.$container),
             'Cannot mount multiple instances on the same dom element',
         );
 
+        this.query = this.query.bind(this);
+        this.$container.dataset.artId = art.id;
         this.$original = this.$container.cloneNode(true);
 
-        if (art.whitelist.state) {
+        if (whitelist.state) {
             this.desktop();
         } else {
             this.mobile();
@@ -102,9 +103,9 @@ export default class Template {
     }
 
     desktop() {
-        const { backdrop, useSSR } = this.art.option;
+        const { option } = this.art;
 
-        if (!useSSR) {
+        if (!option.useSSR) {
             this.$container.innerHTML = Template.html;
         }
 
@@ -135,9 +136,7 @@ export default class Template {
         this.$miniClose = this.query('.art-mini-close');
         this.$contextmenu = this.query('.art-contextmenus');
 
-        this.$container.dataset.artId = this.art.id;
-
-        if (backdrop) {
+        if (option.backdrop) {
             addClass(this.$settingInner, 'art-backdrop-filter');
             addClass(this.$contextmenu, 'art-backdrop-filter');
             addClass(this.$info, 'art-backdrop-filter');