Aliyundrive (#436)

* init

* init

* add example

* add initControl

* add initControl

* update style

* update style

* update style

* update style

* update style

* update style

* update style

* update style

* build all

* build all

* update style

packages/artplayer-plugin-control/src/index.js

@@ -0,0 +1,74 @@
+import style from 'bundle-text:./style.less';
+
+function checkVersion(art) {
+    const {
+        version,
+        utils: { errorHandle },
+    } = art.constructor;
+    const arr = version.split('.').map(Number);
+    const major = arr[0];
+    const minor = arr[1] / 100;
+    errorHandle(
+        major + minor >= 4.06,
+        `Artplayer.js@${version} is not compatible the artplayerPluginControl@${artplayerPluginControl.version}. Please update it to version Artplayer.js@4.6.x`,
+    );
+}
+
+export default function artplayerPluginControl() {
+    return (art) => {
+        checkVersion(art);
+
+        const {
+            template: { $bottom, $player },
+            constructor: {
+                utils: { append, secondToTime, addClass, removeClass, hasClass },
+            },
+        } = art;
+
+        const className = 'artplayer-plugin-control';
+        addClass($player, className);
+
+        const $current = append($bottom, `<div class="apa-control-current"></div>`);
+        const $duration = append($bottom, `<div class="apa-control-duration"></div>`);
+
+        const events = ['video:loadedmetadata', 'video:timeupdate', 'video:progress'];
+
+        for (let index = 0; index < events.length; index++) {
+            art.on(events[index], () => {
+                $current.innerText = secondToTime(art.currentTime);
+                $duration.innerText = secondToTime(art.duration);
+            });
+        }
+
+        return {
+            name: 'artplayerPluginControl',
+            get enable() {
+                return hasClass($player, className);
+            },
+            set enable(state) {
+                if (state) {
+                    addClass($player, className);
+                } else {
+                    removeClass($player, className);
+                }
+            },
+        };
+    };
+}
+
+artplayerPluginControl.env = process.env.NODE_ENV;
+artplayerPluginControl.version = process.env.APP_VER;
+artplayerPluginControl.build = process.env.BUILD_DATE;
+
+if (typeof document !== 'undefined') {
+    if (!document.getElementById('artplayer-plugin-control')) {
+        const $style = document.createElement('style');
+        $style.id = 'artplayer-plugin-control';
+        $style.textContent = style;
+        document.head.appendChild($style);
+    }
+}
+
+if (typeof window !== 'undefined') {
+    window['artplayerPluginControl'] = artplayerPluginControl;
+}

packages/artplayer-plugin-control/src/style.less

@@ -0,0 +1,95 @@
+.artplayer-plugin-control {
+    .art-bottom {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        position: absolute;
+        height: 68px;
+        max-width: 520px;
+        user-select: none;
+        border-radius: 10px;
+        transition: opacity 0.3s ease;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 10px;
+        font-size: 13px;
+        -webkit-backdrop-filter: saturate(180%) blur(20px);
+        backdrop-filter: saturate(180%) blur(20px);
+        background-color: rgba(0, 0, 0, 0.7);
+        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2);
+        background-image: none;
+        padding: 0;
+
+        .art-progress {
+            width: 65%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+
+            .art-control-thumbnails {
+                bottom: 35px;
+            }
+
+            .art-control-progress {
+                width: 100%;
+            }
+
+            .art-progress-tip {
+                top: -40px !important;
+            }
+        }
+
+        .art-controls {
+            width: 100%;
+            height: auto;
+            flex: 1;
+            padding: 0 5px;
+
+            .art-control-time {
+                display: none;
+            }
+
+            .art-volume-panel {
+                width: 60px !important;
+            }
+        }
+
+        .art-selector-list {
+            background-color: rgba(0, 0, 0, 0.8) !important;
+        }
+
+        .apa-control-current,
+        .apa-control-duration {
+            display: flex;
+            justify-content: center;
+            line-height: 1;
+            width: 17.5%;
+            position: absolute;
+            top: 10px;
+        }
+
+        .apa-control-current {
+            left: 0;
+        }
+
+        .apa-control-duration {
+            right: 0;
+        }
+    }
+
+    .art-settings {
+        bottom: 85px;
+    }
+
+    &.art-control-show {
+        .art-subtitle {
+            bottom: 80px;
+        }
+    }
+}
+
+.apa-control-current,
+.apa-control-duration {
+    display: none;
+}