add attrMix.js

packages/artplayer/src/hotkey.js

@@ -1,5 +1,3 @@
-import { errorHandle } from './utils';
-
 export default class Hotkey {
     constructor(art) {
         this.keys = {};
@@ -56,8 +54,6 @@ export default class Hotkey {
     }
 
     add(key, event) {
-        errorHandle(typeof key === 'number', 'The Hotkey.add() first parameter is not a number');
-        errorHandle(typeof event === 'function', 'The Hotkey.add() second parameter is not a function');
         if (this.keys[key]) {
             this.keys[key].push(event);
         } else {
@@ -65,4 +61,13 @@ export default class Hotkey {
         }
         return this;
     }
+
+    remove(key, event) {
+        if (this.keys[key]) {
+            const index = this.keys[key].indexOf(event);
+            if (index !== -1) {
+                this.keys[key].splice(index, 1);
+            }
+        }
+    }
 }

packages/artplayer/src/mobile.js

@@ -9,13 +9,13 @@ export default class Mobile {
             template: { $video },
         } = art;
 
-        config.events.forEach(eventName => {
-            proxy($video, eventName, event => {
+        config.events.forEach((eventName) => {
+            proxy($video, eventName, (event) => {
                 art.emit(`video:${event.type}`, event);
             });
         });
 
-        Object.keys(option.moreVideoAttr).forEach(key => {
+        Object.keys(option.moreVideoAttr).forEach((key) => {
             $video[key] = option.moreVideoAttr[key];
         });
 
@@ -35,8 +35,6 @@ export default class Mobile {
             $video.autoplay = option.autoplay;
         }
 
-        $video.controls = true;
-
         const typeName = option.type || getExt(option.url);
         const typeCallback = option.customType[typeName];
         if (typeName && typeCallback) {

packages/artplayer/src/player/attrMix.js

@@ -0,0 +1,14 @@
+import { def } from '../utils';
+
+export default function attrMix(art) {
+    const {
+        template: { $video },
+    } = art;
+
+    def(art, 'attr', {
+        value(key, value) {
+            if (value === undefined) return $video[key];
+            $video[key] = value;
+        },
+    });
+}

packages/artplayer/src/player/exclusiveMix.js

@@ -1,6 +1,6 @@
 import { def } from '../utils';
 
-export default function exclusiveInit(art) {
+export default function exclusiveMix(art) {
     const sizeProps = ['mini', 'pip', 'fullscreen', 'fullscreenWeb'];
 
     function exclusive(props) {

packages/artplayer/src/player/index.js

@@ -1,7 +1,5 @@
 import urlMix from './urlMix';
-import attrInit from './attrInit';
-import eventInit from './eventInit';
-import exclusiveInit from './exclusiveInit';
+import attrMix from './attrMix';
 import playMix from './playMix';
 import pauseMix from './pauseMix';
 import toggleMix from './toggleMix';
@@ -29,13 +27,14 @@ import posterMix from './posterMix';
 import autoHeightMix from './autoHeightMix';
 import themeMix from './themeMix';
 import titleMix from './titleMix';
+import exclusiveMix from './exclusiveMix';
+import optionInit from './optionInit';
+import eventInit from './eventInit';
 
 export default class Player {
     constructor(art) {
         urlMix(art);
-        eventInit(art);
-        attrInit(art);
-        exclusiveInit(art);
+        attrMix(art);
         playMix(art);
         pauseMix(art);
         toggleMix(art);
@@ -63,5 +62,8 @@ export default class Player {
         autoHeightMix(art);
         themeMix(art);
         titleMix(art);
+        exclusiveMix(art);
+        eventInit(art);
+        optionInit(art);
     }
 }

packages/artplayer/src/player/optionInit.js

@@ -8,24 +8,23 @@ export default function attrInit(art) {
     } = art;
 
     Object.keys(option.moreVideoAttr).forEach((key) => {
-        $video[key] = option.moreVideoAttr[key];
+        art.attr(key, option.moreVideoAttr[key]);
     });
 
     if (option.muted) {
-        $video.muted = option.muted;
+        art.muted = option.muted;
     }
 
     if (option.volume) {
-        $video.volume = clamp(option.volume, 0, 1);
+        art.volume = clamp(option.volume, 0, 1);
     }
 
     const volume = storage.get('volume');
     if (volume) {
-        $video.volume = clamp(volume, 0, 1);
+        art.volume = clamp(volume, 0, 1);
     }
 
     if (option.poster) {
-        // $video.poster = option.poster;
         setStyle($poster, 'backgroundImage', `url(${option.poster})`);
     }
 
@@ -33,7 +32,9 @@ export default function attrInit(art) {
         $video.autoplay = option.autoplay;
     }
 
-    $video.controls = false;
+    if (option.theme) {
+        art.theme = option.theme;
+    }
 
     if (option.ads.length === 0) {
         art.url = option.url;

packages/artplayer/src/player/themeMix.js

@@ -8,7 +8,7 @@ export default function themeMix(art) {
 
     def(art, 'theme', {
         get() {
-            return $player.style.getProperty('--theme');
+            return getComputedStyle($player).getPropertyValue('--theme');
         },
         set(theme) {
             option.theme = theme;

packages/artplayer/src/plugins/index.js

@@ -34,7 +34,6 @@ export default class Plugins {
 
     add(plugin) {
         this.id += 1;
-        errorHandle(typeof plugin === 'function', `The Plugins.add() first parameter is not a function`);
         const result = plugin.call(this, this.art);
         const pluginName = (result && result.name) || plugin.name || `plugin${this.id}`;
         errorHandle(!has(this, pluginName), `Cannot add a plugin that already has the same name: ${pluginName}`);

packages/artplayer/src/plugins/localVideo.js

@@ -3,7 +3,7 @@ import { append, query, setStyle, setStyles, errorHandle } from '../utils';
 export default function localVideo(art) {
     const {
         events: { proxy },
-        template,
+        template: { $video, $player },
         option,
         setting,
         i18n,
@@ -11,7 +11,7 @@ export default function localVideo(art) {
 
     function loadVideo(file) {
         if (file) {
-            const canPlayType = template.$video.canPlayType(file.type);
+            const canPlayType = $video.canPlayType(file.type);
             if (canPlayType === 'maybe' || canPlayType === 'probably') {
                 const url = URL.createObjectURL(file);
                 option.title = file.name;
@@ -23,13 +23,13 @@ export default function localVideo(art) {
         }
     }
 
-    proxy(template.$player, 'dragover', (event) => {
+    proxy($player, 'dragover', (event) => {
         event.preventDefault();
     });
 
-    proxy(template.$player, 'drop', (event) => {
+    proxy($player, 'drop', (event) => {
         event.preventDefault();
-        const file = e.dataTransfer.files[0];
+        const file = event.dataTransfer.files[0];
         loadVideo(file);
     });
 

packages/artplayer/src/template.js

@@ -102,7 +102,7 @@ export default class Template {
     }
 
     desktop() {
-        const { backdrop, theme, useSSR } = this.art.option;
+        const { backdrop, useSSR } = this.art.option;
 
         if (!useSSR) {
             this.$container.innerHTML = Template.html;
@@ -135,7 +135,6 @@ export default class Template {
         this.$miniClose = this.query('.art-mini-close');
         this.$contextmenu = this.query('.art-contextmenus');
 
-        this.$player.style.setProperty('--theme', theme);
         this.$container.dataset.artId = this.art.id;
 
         if (backdrop) {