update

.gitignore

@@ -1,6 +1,8 @@
 node_modules
 .vscode
 .DS_Store
+.parcel-cache
+dist
 *.log
 commit.json
 package-lock.json

package.json

@@ -1,6 +1,7 @@
 {
   "name": "artplayer-packages",
   "version": "4.3.0",
+  "type": "module",
   "description": "ArtPlayer.js is a modern and full featured HTML5 video player",
   "scripts": {
     "bootstrap": "npx lerna bootstrap",
@@ -37,6 +38,7 @@
     "lerna": "^4.0.0",
     "mocha": "^9.2.2",
     "mocha-chrome": "^2.2.0",
+    "servor": "^4.0.2",
     "workbox-build": "^6.5.3"
   }
-}
+}

packages/artplayer-document/package.json

@@ -1,29 +1,42 @@
 {
-	"name": "artplayer-document",
-	"version": "1.0.0",
-	"dependencies": {
-		"@docusaurus/core": "2.0.0-beta.15",
-		"@docusaurus/preset-classic": "2.0.0-beta.15",
-		"@mdx-js/react": "^1.6.22",
-		"@svgr/webpack": "^6.1.0",
-		"clsx": "^1.1.1",
-		"docusaurus-lunr-search": "^2.1.15",
-		"file-loader": "^6.2.0",
-		"prism-react-renderer": "^1.2.1",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2",
-		"url-loader": "^4.1.1"
-	},
-	"browserslist": {
-		"production": [
-			">0.5%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	}
+    "name": "artplayer-document",
+    "version": "1.0.0",
+    "scripts": {
+        "docusaurus": "docusaurus",
+        "start": "npx docusaurus start",
+        "build": "npx docusaurus build && npm run copy",
+        "copy": "rm -rf ../../docs/document && mv build ../../docs/document",
+        "commit": "git add . && git commit -m \"build document\" -n",
+        "swizzle": "npx docusaurus swizzle",
+        "deploy": "npx docusaurus deploy",
+        "clear": "npx docusaurus clear",
+        "serve": "npx docusaurus serve",
+        "write-translations": "npx docusaurus write-translations",
+        "write-heading-ids": "npx docusaurus write-heading-ids"
+    },
+    "dependencies": {
+        "@docusaurus/core": "2.0.0-beta.15",
+        "@docusaurus/preset-classic": "2.0.0-beta.15",
+        "@mdx-js/react": "^1.6.22",
+        "@svgr/webpack": "^6.1.0",
+        "clsx": "^1.1.1",
+        "docusaurus-lunr-search": "^2.1.15",
+        "file-loader": "^6.2.0",
+        "prism-react-renderer": "^1.2.1",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "url-loader": "^4.1.1"
+    },
+    "browserslist": {
+        "production": [
+            ">0.5%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
 }

packages/artplayer-document/package.json.lerna_backup

@@ -1,42 +0,0 @@
-{
-    "name": "artplayer-document",
-    "version": "1.0.0",
-    "scripts": {
-        "docusaurus": "docusaurus",
-        "start": "npx docusaurus start",
-        "build": "npx docusaurus build && npm run copy",
-        "copy": "rm -rf ../../docs/document && mv build ../../docs/document",
-        "commit": "git add . && git commit -m \"build document\" -n",
-        "swizzle": "npx docusaurus swizzle",
-        "deploy": "npx docusaurus deploy",
-        "clear": "npx docusaurus clear",
-        "serve": "npx docusaurus serve",
-        "write-translations": "npx docusaurus write-translations",
-        "write-heading-ids": "npx docusaurus write-heading-ids"
-    },
-    "dependencies": {
-        "@docusaurus/core": "2.0.0-beta.15",
-        "@docusaurus/preset-classic": "2.0.0-beta.15",
-        "@mdx-js/react": "^1.6.22",
-        "@svgr/webpack": "^6.1.0",
-        "clsx": "^1.1.1",
-        "docusaurus-lunr-search": "^2.1.15",
-        "file-loader": "^6.2.0",
-        "prism-react-renderer": "^1.2.1",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "url-loader": "^4.1.1"
-    },
-    "browserslist": {
-        "production": [
-            ">0.5%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    }
-}

packages/artplayer/src/index.js

@@ -1,4 +1,4 @@
-import './style/index.scss';
+import './style/index.less';
 import validator from 'option-validator';
 import Emitter from './utils/emitter';
 import * as utils from './utils';

packages/artplayer/src/style/balloon.scss

@@ -1,123 +0,0 @@
-// https://github.com/kazzkiq/balloon.css
-// 1.0.3
-
-//
-// Variables
-// -----------------------------------------
-
-$balloon-bg: fade-out(#101010, 0.05) !default;
-$balloon-base-size: 12px !default;
-$balloon-arrow-size: 5px !default;
-$balloon-move: 4px !default;
-
-//
-// Mixins
-// -----------------------------------------
-
-@mixin arrow-down() {
-    width: 0;
-    height: 0;
-    border: $balloon-arrow-size solid transparent;
-    border-top-color: var(--balloon-color);
-}
-
-@mixin base-effects() {
-    opacity: 0;
-    pointer-events: none;
-    transition: all 0.18s ease-out 0.18s;
-}
-
-@mixin normalized-text() {
-    text-indent: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-        'Helvetica Neue', sans-serif;
-    font-weight: normal;
-    font-style: normal;
-    text-shadow: none;
-    font-size: var(--balloon-font-size);
-}
-
-//
-// Styles
-// -----------------------------------------
-
-:root {
-    --balloon-color: #{$balloon-bg};
-    --balloon-font-size: #{$balloon-base-size};
-    --balloon-move: #{$balloon-move};
-}
-
-// IE 11 button bugfix
-button[aria-label] {
-    &[data-balloon-pos] {
-        overflow: visible;
-    }
-}
-
-[aria-label] {
-    &[data-balloon-pos] {
-        position: relative; // alt. absolute or fixed
-
-        // Fixing iOS Safari event issue.
-        // More info at: https://goo.gl/w8JF4W
-        cursor: pointer;
-
-        &:after {
-            @include base-effects();
-            @include normalized-text();
-
-            background: var(--balloon-color);
-            border-radius: 2px;
-            color: #fff;
-            content: attr(aria-label);
-            padding: 0.5em 1em;
-            position: absolute;
-            white-space: nowrap;
-            line-height: 1.2;
-            z-index: 10;
-        }
-
-        &:before {
-            @include arrow-down();
-            @include base-effects();
-
-            content: '';
-            position: absolute;
-            z-index: 10;
-        }
-
-        &:hover {
-            &:before,
-            &:after {
-                opacity: 1;
-                pointer-events: none;
-            }
-        }
-
-        &[data-balloon-pos='up'] {
-            &:after {
-                bottom: 100%;
-                left: 50%;
-                margin-bottom: $balloon-arrow-size + 5px;
-                transform: translate(-50%, var(--balloon-move));
-                transform-origin: top;
-            }
-            &:before {
-                bottom: 100%;
-                left: 50%;
-                transform: translate(-50%, var(--balloon-move));
-                transform-origin: top;
-            }
-
-            &:hover {
-                &:after {
-                    transform: translate(-50%, 0);
-                }
-
-                &:before {
-                    transform: translate(-50%, 0);
-                }
-            }
-        }
-    }
-}

packages/artplayer/src/style/index.less

@@ -0,0 +1,22 @@
+@import './artplayer.less';
+@import './video.less';
+@import './poster.less';
+@import './subtitle.less';
+@import './danmuku.less';
+@import './layers.less';
+@import './mask.less';
+@import './loading.less';
+@import './bottom.less';
+@import './notice.less';
+@import './contextmenu.less';
+@import './setting.less';
+@import './info.less';
+@import './hideCursor.less';
+@import './aspectRatio.less';
+@import './fullscreenWeb.less';
+@import './fullscreenRotate.less';
+@import './mini.less';
+@import './autoSize.less';
+@import './flip.less';
+@import './plugins.less';
+@import './selector.less';

packages/artplayer/src/style/index.scss

@@ -1,23 +0,0 @@
-@import './artplayer.scss';
-@import './video.scss';
-@import './poster.scss';
-@import './subtitle.scss';
-@import './danmuku.scss';
-@import './layers.scss';
-@import './mask.scss';
-@import './loading.scss';
-@import './bottom.scss';
-@import './notice.scss';
-@import './contextmenu.scss';
-@import './setting.scss';
-@import './info.scss';
-@import './hideCursor.scss';
-@import './aspectRatio.scss';
-@import './fullscreenWeb.scss';
-@import './fullscreenRotate.scss';
-@import './mini.scss';
-@import './autoSize.scss';
-@import './flip.scss';
-@import './plugins.scss';
-@import './selector.scss';
-@import './balloon.scss';

scripts/dev.js

@@ -1,13 +1,11 @@
-const inquirer = require('inquirer');
-const rollup = require('rollup');
-const servor = require('servor');
-const logger = require('./logger');
-const projects = require('./getProjects')();
-const creatRollupConfig = require('./creatRollupConfig');
-const openBrowser = require('servor/utils/openBrowser');
+import inquirer from 'inquirer';
+import servor from 'servor';
+import projects from './projects.js';
+import openBrowser from 'servor/utils/openBrowser.js';
+import { Parcel } from '@parcel/core';
+import { fileURLToPath } from 'url';
 
-async function develop(projectPath) {
-    const config = creatRollupConfig(projectPath);
+async function develop(name) {
     const { url } = await servor({
         root: 'docs',
         fallback: 'index.html',
@@ -15,30 +13,35 @@ async function develop(projectPath) {
         port: 8081,
     });
     openBrowser(url);
-    const watcher = rollup.watch(config);
-    watcher.on('event', (event) => {
-        switch (event.code) {
-            case 'START':
-                logger.log('checking rollup version...');
-                break;
-            case 'BUNDLE_START':
-                logger.log(`bundling ${config.output.file}...`);
-                break;
-            case 'BUNDLE_END':
-                logger.success(`${config.output.file} bundled in ${event.duration}ms.`);
-                logger.success('Watching for changes...');
-                break;
-            case 'END':
-                logger.success('finished building all bundles');
-                break;
-            case 'ERROR':
-                logger.warn(`error: ${event.error}`);
-                break;
-            case 'FATAL':
-                logger.warn(`fatal: ${event.error}`);
-                break;
-            default:
-                logger.warn(`unknown event: ${event.code}`);
+
+    const dir = projects[name];
+    const bundler = new Parcel({
+        entries: `${dir}/src/index.js`,
+        defaultConfig: '@parcel/config-default',
+        mode: 'development',
+        defaultTargetOptions: {
+            engines: {
+                browsers: ['last 1 Chrome version'],
+            },
+        },
+        env: {
+            NODE_ENV: 'development',
+        },
+        additionalReporters: [
+            {
+                packageName: '@parcel/reporter-cli',
+                resolveFrom: fileURLToPath(import.meta.url),
+            },
+        ],
+    });
+
+    bundler.watch(async (error, event) => {
+        if (error) throw error;
+        if (event.type === 'buildSuccess') {
+            const bundles = event.bundleGraph.getBundles();
+            console.log(`[${name}]`, `✨ Built ${bundles.length} bundles in ${event.buildTime}ms!`);
+        } else if (event.type === 'buildFailure') {
+            console.log(`[${name}]`, event.diagnostics);
         }
     });
 }
@@ -53,10 +56,5 @@ inquirer
         },
     ])
     .then((answers) => {
-        develop(projects[answers.project]);
-    })
-    .catch((err) => {
-        logger.fatal(err);
+        develop(answers.project);
     });
-
-module.exports = develop;

scripts/getProjects.js

@@ -1,15 +0,0 @@
-const path = require('path');
-const glob = require('glob');
-
-module.exports = function getProjects() {
-    return glob
-        .sync(path.join(process.cwd(), 'packages/*'))
-        .filter((item) => {
-            return !item.includes('artplayer-document');
-        })
-        .reduce((result, item) => {
-            const name = item.split(path.sep).pop();
-            result[name] = item;
-            return result;
-        }, {});
-};

scripts/logger.js

@@ -1,27 +1,27 @@
-const chalk = require('chalk');
-const { format } = require('util');
+import chalk from 'chalk';
+import { format } from 'util';
 
 const prefix = 'artplayer-cli';
 const sep = chalk.gray('·');
 
-exports.log = function log(...args) {
+export function log(...args) {
     const msg = format.apply(format, args);
     console.log(chalk.white(prefix), sep, msg);
-};
+}
 
-exports.fatal = function fatal(...args) {
+export function fatal(...args) {
     if (args[0] instanceof Error) args[0] = args[0].message.trim();
     const msg = format.apply(format, args);
     console.error(chalk.red(prefix), sep, msg);
     process.exit(1);
-};
+}
 
-exports.success = function success(...args) {
+export function success(...args) {
     const msg = format.apply(format, args);
     console.log(chalk.green(prefix), sep, msg);
-};
+}
 
-exports.warn = function warn(...args) {
+export function warn(...args) {
     const msg = format.apply(format, args);
     console.log(chalk.yellow(prefix), sep, msg);
-};
+}

scripts/projects.js

@@ -0,0 +1,8 @@
+import path from 'path';
+import glob from 'glob';
+
+export default glob.sync(path.join(process.cwd(), 'packages/*')).reduce((result, item) => {
+    const name = item.split(path.sep).pop();
+    result[name] = item;
+    return result;
+}, {});