update stateMix

packages/artplayer/src/events/resizeInit.js

@@ -4,7 +4,7 @@ export default function resizeInit(art, events) {
     const { option } = art;
 
     const resizeFn = throttle(() => {
-        if (art.normalSize) {
+        if (!art.state) {
             art.autoSize = option.autoSize;
         }
         art.aspectRatioReset();

packages/artplayer/src/player/fullscreenMix.js

@@ -19,7 +19,7 @@ export default function fullscreenMix(art) {
             },
             async set(value) {
                 if (value) {
-                    art.normalSize = 'fullscreen';
+                    art.state = 'fullscreen';
                     art.aspectRatioReset();
                     art.autoSize = false;
                     await screenfull.request($player);
@@ -45,7 +45,7 @@ export default function fullscreenMix(art) {
             },
             set(value) {
                 if (value) {
-                    art.normalSize = 'fullscreen';
+                    art.state = 'fullscreen';
                     $video.webkitEnterFullscreen();
                     art.emit('fullscreen', true);
                     notice.show = '';

packages/artplayer/src/player/fullscreenWebMix.js

@@ -19,7 +19,7 @@ export default function fullscreenWebMix(art) {
                 if (constructor.FULLSCREEN_WEB_IN_BODY) {
                     append(document.body, $player);
                 }
-                art.normalSize = 'fullscreenWeb';
+                art.state = 'fullscreenWeb';
                 addClass($player, 'art-fullscreen-web');
                 art.aspectRatioReset();
                 art.autoSize = false;

packages/artplayer/src/player/index.js

@@ -28,7 +28,7 @@ import cssVarMix from './cssVarMix';
 import themeMix from './themeMix';
 import titleMix from './titleMix';
 import typeMix from './typeMix';
-import normalSizeMix from './normalSizeMix';
+import stateMix from './stateMix';
 import subtitleOffsetMix from './subtitleOffsetMix';
 import airplayMix from './airplayMix';
 import optionInit from './optionInit';
@@ -66,7 +66,7 @@ export default class Player {
         themeMix(art);
         titleMix(art);
         typeMix(art);
-        normalSizeMix(art);
+        stateMix(art);
         subtitleOffsetMix(art);
         airplayMix(art);
         eventInit(art);

packages/artplayer/src/player/normalSizeMix.js

@@ -1,20 +0,0 @@
-import { def } from '../utils';
-
-export default function normalSizeMix(art) {
-    const sizeProps = ['mini', 'pip', 'fullscreen', 'fullscreenWeb'];
-
-    def(art, 'normalSize', {
-        get() {
-            return sizeProps.find((name) => art[name]) || '';
-        },
-        set(name) {
-            sizeProps
-                .filter((item) => item !== name)
-                .forEach((item) => {
-                    if (art[item]) {
-                        art[item] = false;
-                    }
-                });
-        },
-    });
-}

packages/artplayer/src/player/pipMix.js

@@ -15,7 +15,7 @@ function nativePip(art) {
         },
         set(value) {
             if (value) {
-                art.normalSize = 'pip';
+                art.state = 'pip';
                 $video.requestPictureInPicture().catch((err) => {
                     notice.show = err;
                     throw err;
@@ -49,7 +49,7 @@ function webkitPip(art) {
         },
         set(value) {
             if (value) {
-                art.normalSize = 'pip';
+                art.state = 'pip';
                 $video.webkitSetPresentationMode('picture-in-picture');
                 art.emit('pip', true);
             } else {

packages/artplayer/src/player/stateMix.js

@@ -0,0 +1,16 @@
+import { def } from '../utils';
+
+export default function stateMix(art) {
+    const states = ['mini', 'pip', 'fullscreen', 'fullscreenWeb'];
+    def(art, 'state', {
+        get: () => states.find((name) => art[name]) || '',
+        set(name) {
+            for (let index = 0; index < states.length; index++) {
+                const prop = states[index];
+                if (prop !== name) {
+                    art[prop] = false;
+                }
+            }
+        },
+    });
+}

packages/artplayer/src/style/mobile.less

@@ -1,6 +1,5 @@
 .art-mobile {
-    --art-padding: 8px;
-    --art-bottom-gap: 8px;
+    --art-bottom-gap: 10px;
     --art-control-height: 38px;
     --art-control-icon-scale: 1;
     --art-state-size: 60px;
@@ -8,6 +7,13 @@
     --art-settings-max-height: 180px;
     --art-selector-max-height: 180px;
     --art-indicator-scale: 1;
-    --art-indicator-size: 20px;
     --art-control-opacity: 1;
+
+    .art-controls-left {
+        margin-left: calc(var(--art-padding) / -1);
+    }
+
+    .art-controls-right {
+        margin-right: calc(var(--art-padding) / -1);
+    }
 }

packages/artplayer/types/player.d.ts

@@ -5,8 +5,8 @@ export type Flip = 'normal' | 'horizontal' | 'vertical' | (string & Record<never
 export declare class Player {
     get aspectRatio(): AspectRatio;
     set aspectRatio(ratio: AspectRatio);
-    get normalSize(): string;
-    set normalSize(name: string);
+    get enable(): string;
+    set enable(state: string);
     get playbackRate(): PlaybackRate;
     set playbackRate(rate: PlaybackRate);
     get autoSize(): boolean;