add themeMix

packages/artplayer/src/control/index.js

@@ -22,7 +22,6 @@ export default class Control extends Component {
 
         const {
             option,
-            player,
             template: { $player },
         } = art;
 

packages/artplayer/src/control/progress.js

@@ -13,15 +13,16 @@ export function getPosFromEvent(art, event) {
     return { second, time, width, percentage };
 }
 
-export default function progress(option) {
+export default function progress(options) {
     return (art) => {
         const {
-            option: { highlight, theme },
-            events: { proxy },
             icons,
+            option,
+            events: { proxy },
         } = art;
+
         return {
-            ...option,
+            ...options,
             html: `
                 <div class="art-control-progress-inner">
                     <div class="art-progress-loaded"></div>
@@ -39,7 +40,7 @@ export default function progress(option) {
                 const $indicator = query('.art-progress-indicator', $control);
                 const $tip = query('.art-progress-tip', $control);
 
-                setStyle($played, 'backgroundColor', theme);
+                setStyle($played, 'backgroundColor', 'var(--theme)');
 
                 let indicatorSize = 14;
                 if (icons.indicator) {
@@ -47,7 +48,7 @@ export default function progress(option) {
                     append($indicator, icons.indicator);
                 } else {
                     setStyles($indicator, {
-                        backgroundColor: theme,
+                        backgroundColor: 'var(--theme)',
                     });
                 }
 
@@ -95,7 +96,7 @@ export default function progress(option) {
                     }
                 }
 
-                highlight.forEach((item) => {
+                option.highlight.forEach((item) => {
                     const left = (clamp(item.time, 0, art.duration) / art.duration) * 100;
                     append(
                         $highlight,

packages/artplayer/src/control/thumbnails.js

@@ -1,12 +1,12 @@
 import { setStyle } from '../utils';
 import { getPosFromEvent } from './progress';
 
-export default function thumbnails(option) {
-    return art => ({
-        ...option,
-        mounted: $control => {
+export default function thumbnails(options) {
+    return (art) => ({
+        ...options,
+        mounted: ($control) => {
             const {
-                option: { thumbnails },
+                option,
                 template: { $progress },
                 events: { proxy, loadImg },
             } = art;
@@ -16,7 +16,7 @@ export default function thumbnails(option) {
 
             function showThumbnails(event) {
                 const { width: posWidth } = getPosFromEvent(art, event);
-                const { url, height, width, number, column } = thumbnails;
+                const { url, height, width, number, column } = option.thumbnails;
                 const perWidth = $progress.clientWidth / number;
                 const perIndex = Math.floor(posWidth / perWidth);
                 const yIndex = Math.ceil(perIndex / column) - 1;
@@ -34,10 +34,10 @@ export default function thumbnails(option) {
                 }
             }
 
-            proxy($progress, 'mousemove', event => {
+            proxy($progress, 'mousemove', (event) => {
                 if (!loading) {
                     loading = true;
-                    loadImg(thumbnails.url).then(() => {
+                    loadImg(option.thumbnails.url).then(() => {
                         isLoad = true;
                     });
                 }