fix art.theme

packages/artplayer/src/player/aspectRatioMix.js

@@ -1,4 +1,4 @@
-import { setStyle, def } from '../utils';
+import { setStyle, def, clamp } from '../utils';
 
 export default function aspectRatioMix(art) {
     const {
@@ -20,23 +20,20 @@ export default function aspectRatioMix(art) {
                 delete $player.dataset.aspectRatio;
             } else {
                 const ratioArray = ratio.split(':').map(Number);
-                const { videoWidth, videoHeight } = $video;
                 const { clientWidth, clientHeight } = $player;
-
-                const videoRatio = videoWidth / videoHeight;
                 const playerRatio = clientWidth / clientHeight;
                 const setupRatio = ratioArray[0] / ratioArray[1];
 
-                if (videoRatio > setupRatio) {
-                    const percentage = (setupRatio * videoHeight) / videoWidth;
-                    setStyle($video, 'width', `${percentage * 100}%`);
+                if (playerRatio > setupRatio) {
+                    const width = clamp(setupRatio * clientHeight, 0, clientWidth);
+                    setStyle($video, 'width', `${width}px`);
                     setStyle($video, 'height', '100%');
-                    setStyle($video, 'padding', `0 ${(clientWidth - clientWidth * percentage) / 2}px`);
+                    setStyle($video, 'padding', `0 ${(clientWidth - width) / 2}px`);
                 } else {
-                    const percentage = videoWidth / setupRatio / videoHeight;
+                    const height = clamp(clientWidth / setupRatio, 0, clientHeight);
                     setStyle($video, 'width', '100%');
-                    setStyle($video, 'height', `${percentage * 100}%`);
-                    setStyle($video, 'padding', `${(clientHeight - clientHeight * percentage) / 2}px 0`);
+                    setStyle($video, 'height', `${height}px`);
+                    setStyle($video, 'padding', `${(clientHeight - height) / 2}px 0`);
                 }
 
                 $player.dataset.aspectRatio = ratio;

packages/artplayer/src/player/posterMix.js

@@ -2,14 +2,18 @@ import { def, setStyle } from '../utils';
 
 export default function posterMix(art) {
     const {
-        option,
         template: { $poster },
     } = art;
 
     def(art, 'poster', {
-        get: () => option.poster,
+        get: () => {
+            try {
+                return $poster.style['backgroundImage'].match(/"(.*)"/)[1];
+            } catch (error) {
+                return '';
+            }
+        },
         set(url) {
-            option.poster = url;
             setStyle($poster, 'backgroundImage', `url(${url})`);
         },
     });

packages/artplayer/src/player/themeMix.js

@@ -1,15 +1,12 @@
 import { def } from '../utils';
 
 export default function themeMix(art) {
-    const { option } = art;
-
     def(art, 'theme', {
         get() {
-            return art.cssProperty('--art-theme');
+            return art.cssVar('--art-theme');
         },
         set(theme) {
-            option.theme = theme;
-            art.cssProperty('--art-theme', theme);
+            art.cssVar('--art-theme', theme);
         },
     });
 }

packages/artplayer/src/style/aspectRatio.less

@@ -1,8 +1,10 @@
 .art-video-player {
     &[data-aspect-ratio] {
-        video {
-            box-sizing: content-box;
+        overflow: hidden;
+        .art-video {
             object-fit: fill;
+            box-sizing: content-box;
+            transition: all var(--art-transition-duration) ease;
         }
     }
 }