V5 (#500)

* update dep * Update package.json * update contextmenu * update d.ts * update onVttLoad * build artplayer * update style * --art-theme * update style * update style * update user-select * add getIcon * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * add progress-hover * update mini * update style * update style * update style * update style * update style * update volume * update style * add art-backdrop * update style * update style * update style * update currentLevel * update artplayerPluginControl * update artplayerPluginDanmuku * Update package.json
2026-10-25 08:01:20 -08:00 · 2023-04-16 23:01:26 +08:00
1 parent af12bd9634
commit 7b53de941d
@@ -1,52 +1,105 @@
-import { append, setStyle, addClass, removeClass, hasClass, def, isInViewport } from '../utils';
+import { append, setStyle, addClass, removeClass, hasClass, def, isInViewport, createElement } from '../utils';

 export default function miniMix(art) {
    const {
-        i18n,
-        option,
-        storage,
+        icons,
        proxy,
-        template: { $player, $miniClose, $miniTitle, $miniHeader },
+        storage,
+        template: { $player, $video },
    } = art;

    let isDroging = false;
    let lastPageX = 0;
    let lastPageY = 0;
-    let lastPlayerLeft = 0;
-    let lastPlayerTop = 0;

-    proxy($miniHeader, 'mousedown', (event) => {
-        isDroging = true;
-        lastPageX = event.pageX;
-        lastPageY = event.pageY;
-        lastPlayerLeft = art.left;
-        lastPlayerTop = art.top;
-    });
-
-    proxy(document, 'mousemove', (event) => {
-        if (isDroging) {
-            addClass($player, 'art-is-dragging');
-            const top = lastPlayerTop + event.pageY - lastPageY;
-            const left = lastPlayerLeft + event.pageX - lastPageX;
-            setStyle($player, 'top', `${top}px`);
-            setStyle($player, 'left', `${left}px`);
-            storage.set('top', top);
-            storage.set('left', left);
+    function hideMini() {
+        const { $mini } = art.template;
+        if ($mini) {
+            removeClass($player, 'art-mini');
+            setStyle($mini, 'display', 'none');
+            $player.prepend($video);
+            art.emit('mini', false);
        }
-    });
+    }

-    proxy(document, 'mouseup', () => {
-        isDroging = false;
-        removeClass($player, 'art-is-dragging');
-    });
+    function initState($play, $pause) {
+        if (art.playing) {
+            setStyle($play, 'display', `none`);
+            setStyle($pause, 'display', `flex`);
+        } else {
+            setStyle($play, 'display', `flex`);
+            setStyle($pause, 'display', `none`);
+        }
+    }

-    proxy($miniClose, 'click', () => {
-        art.mini = false;
-        isDroging = false;
-        removeClass($player, 'art-is-dragging');
-    });
+    function createMini() {
+        const { $mini } = art.template;
+        if ($mini) {
+            append($mini, $video);
+            return setStyle($mini, 'display', 'flex');
+        } else {
+            const $mini = createElement('div');
+            addClass($mini, 'art-mini-popup');
+            append(document.body, $mini);
+            art.template.$mini = $mini;
+            append($mini, $video);

-    append($miniTitle, option.title || i18n.get('Mini Player'));
+            const $close = append($mini, `<div class="art-mini-close"></div>`);
+            append($close, icons.close);
+            proxy($close, 'click', hideMini);
+
+            const $state = append($mini, `<div class="art-mini-state"></div>`);
+            const $play = append($state, icons.play);
+            const $pause = append($state, icons.pause);
+            proxy($play, 'click', () => art.play());
+            proxy($pause, 'click', () => art.pause());
+            initState($play, $pause);
+            art.on('video:playing', () => initState($play, $pause));
+            art.on('video:pause', () => initState($play, $pause));
+            art.on('video:timeupdate', () => initState($play, $pause));
+
+            proxy($mini, 'mousedown', (event) => {
+                isDroging = event.button === 0;
+                lastPageX = event.pageX;
+                lastPageY = event.pageY;
+            });
+
+            proxy(document, 'mousemove', (event) => {
+                if (isDroging) {
+                    addClass($mini, 'art-mini-droging');
+                    const x = event.pageX - lastPageX;
+                    const y = event.pageY - lastPageY;
+                    setStyle($mini, 'transform', `translate(${x}px, ${y}px)`);
+                }
+            });
+
+            proxy(document, 'mouseup', () => {
+                if (isDroging) {
+                    isDroging = false;
+                    removeClass($mini, 'art-mini-droging');
+                    const rect = $mini.getBoundingClientRect();
+                    storage.set('left', rect.left);
+                    storage.set('top', rect.top);
+                    setStyle($mini, 'left', `${rect.left}px`);
+                    setStyle($mini, 'top', `${rect.top}px`);
+                    setStyle($mini, 'transform', null);
+                }
+            });
+
+            return $mini;
+        }
+    }
+
+    function initMini() {
+        const { $mini } = art.template;
+        const rect = $mini.getBoundingClientRect();
+        const top = window.innerHeight - rect.height - 50;
+        const left = window.innerWidth - rect.width - 50;
+        storage.set('top', top);
+        storage.set('left', left);
+        setStyle($mini, 'top', `${top}px`);
+        setStyle($mini, 'left', `${left}px`);
+    }

    def(art, 'mini', {
        get() {
@@ -54,40 +107,22 @@ export default function miniMix(art) {
        },
        set(value) {
            if (value) {
-                art.normalSize = 'mini';
-                art.autoSize = false;
                addClass($player, 'art-mini');
+                const $mini = createMini();
                const top = storage.get('top');
                const left = storage.get('left');
                if (top && left) {
-                    setStyle($player, 'top', `${top}px`);
-                    setStyle($player, 'left', `${left}px`);
-                    if (!isInViewport($miniHeader)) {
-                        storage.del('top');
-                        storage.del('left');
-                        art.mini = true;
+                    setStyle($mini, 'top', `${top}px`);
+                    setStyle($mini, 'left', `${left}px`);
+                    if (!isInViewport($mini)) {
+                        initMini();
                    }
                } else {
-                    const top = window.innerHeight - art.height - 50;
-                    const left = window.innerWidth - art.width - 50;
-                    storage.set('top', top);
-                    storage.set('left', left);
-                    setStyle($player, 'top', `${top}px`);
-                    setStyle($player, 'left', `${left}px`);
+                    initMini();
                }
-                art.aspectRatio = false;
-                art.playbackRate = false;
-                art.notice.show = '';
                art.emit('mini', true);
            } else {
-                removeClass($player, 'art-mini');
-                setStyle($player, 'top', null);
-                setStyle($player, 'left', null);
-                art.aspectRatio = false;
-                art.playbackRate = false;
-                art.autoSize = option.autoSize;
-                art.notice.show = '';
-                art.emit('mini', false);
+                hideMini();
            }
        },
    });