add cssPropertyMix

packages/artplayer/src/control/progress.js

@@ -1,4 +1,4 @@
-import { query, clamp, append, setStyle, setStyles, secondToTime, includeFromEvent, isMobile } from '../utils';
+import { query, clamp, append, setStyle, secondToTime, includeFromEvent, isMobile } from '../utils';
 
 export function getPosFromEvent(art, event) {
     const { $progress } = art.template;
@@ -49,14 +49,10 @@ export default function progress(options) {
                 const $indicator = query('.art-progress-indicator', $control);
                 const $tip = query('.art-progress-tip', $control);
 
-                setStyle($played, 'backgroundColor', 'var(--art-theme)');
-
                 if (icons.indicator) {
                     append($indicator, icons.indicator);
                 } else {
-                    setStyles($indicator, {
-                        backgroundColor: 'var(--art-theme)',
-                    });
+                    setStyle($indicator, 'backgroundColor', 'var(--art-theme)');
                 }
 
                 function showHighlight(event) {

packages/artplayer/src/icons/index.js

@@ -60,10 +60,10 @@ export default class Icons {
             ...art.option.icons,
         };
 
-        Object.keys(icons).forEach((key) => {
+        for (const key in icons) {
             def(this, key, {
                 get: () => getIcon(key, icons[key]),
             });
-        });
+        }
     }
 }

packages/artplayer/src/mobile.js

@@ -15,9 +15,9 @@ export default class Mobile {
             });
         }
 
-        Object.keys(option.moreVideoAttr).forEach((key) => {
+        for (const key in option.moreVideoAttr) {
             $video[key] = option.moreVideoAttr[key];
-        });
+        }
 
         $video.controls = true;
 

packages/artplayer/src/player/cssPropertyMix.js

@@ -0,0 +1,15 @@
+import { def } from '../utils';
+
+export default function cssPropertyMix(art) {
+    const { $player } = art.template;
+
+    def(art, 'cssProperty', {
+        value(key, value) {
+            if (value) {
+                return $player.style.setProperty(key, value);
+            } else {
+                return getComputedStyle($player).getPropertyValue(key);
+            }
+        },
+    });
+}

packages/artplayer/src/player/index.js

@@ -24,6 +24,7 @@ import miniMix from './miniMix';
 import loopMix from './loopMix';
 import posterMix from './posterMix';
 import autoHeightMix from './autoHeightMix';
+import cssPropertyMix from './cssPropertyMix';
 import themeMix from './themeMix';
 import titleMix from './titleMix';
 import typeMix from './typeMix';
@@ -61,6 +62,7 @@ export default class Player {
         loopMix(art);
         posterMix(art);
         autoHeightMix(art);
+        cssPropertyMix(art);
         themeMix(art);
         titleMix(art);
         typeMix(art);

packages/artplayer/src/player/optionInit.js

@@ -7,9 +7,9 @@ export default function attrInit(art) {
         template: { $video, $poster },
     } = art;
 
-    Object.keys(option.moreVideoAttr).forEach((key) => {
+    for (const key in option.moreVideoAttr) {
         art.attr(key, option.moreVideoAttr[key]);
-    });
+    }
 
     if (option.muted) {
         art.muted = option.muted;
@@ -37,9 +37,5 @@ export default function attrInit(art) {
         $video['webkit-playsinline'] = true;
     }
 
-    if (option.theme) {
-        art.theme = option.theme;
-    }
-
     art.url = option.url;
 }

packages/artplayer/src/player/themeMix.js

@@ -1,18 +1,15 @@
 import { def } from '../utils';
 
 export default function themeMix(art) {
-    const {
-        option,
-        template: { $player },
-    } = art;
+    const { option } = art;
 
     def(art, 'theme', {
         get() {
-            return getComputedStyle($player).getPropertyValue('--art-theme');
+            return art.cssProperty('--art-theme');
         },
         set(theme) {
             option.theme = theme;
-            $player.style.setProperty('--art-theme', theme);
+            art.cssProperty('--art-theme', theme);
         },
     });
 }

packages/artplayer/src/style/progress.less

@@ -35,6 +35,7 @@
                 .art-progress-played {
                     .art-full(20);
                     width: 0%;
+                    background-color: var(--art-theme);
                 }
 
                 .art-progress-highlight {

packages/artplayer/src/template.js

@@ -135,6 +135,14 @@ export default class Template {
         if (isMobile) {
             addClass(this.$player, 'art-mobile');
         }
+
+        if (option.theme) {
+            option.cssVar['--art-theme'] = option.theme;
+        }
+
+        for (const key in option.cssVar) {
+            this.$player.style.setProperty(key, option.cssVar[key]);
+        }
     }
 
     mobile() {

packages/artplayer/src/utils/dom.js

@@ -39,9 +39,9 @@ export function setStyle(element, key, value) {
 }
 
 export function setStyles(element, styles) {
-    Object.keys(styles).forEach((key) => {
+    for (const key in styles) {
         setStyle(element, key, styles[key]);
-    });
+    }
     return element;
 }