Vast (#762)

* add artplayer-plugin-vast

* chore: Add create:plugin script to package.json

* chore: Remove deprecated artplayer-plugin-{{name}} and artplayer-plugin-vast types

* chore: Update artplayer-plugin-vast package description

* chore: Update Prettier configuration and dependencies

scripts/build.js

@@ -6,25 +6,26 @@ import { Parcel } from '@parcel/core';
 import { formatDate, getProjects } from './utils.js';
 
 const projects = getProjects();
-const compiledPath = path.resolve(`docs/compiled`);
+const compiledPath = path.resolve('docs/compiled');
 
 function compressString(input) {
-    const compressedHtmlString = input.replace(/\s*(<[^>]+>)\s*/g, '$1');
-    const compressedCssString = compressedHtmlString
+    return input
+        .replace(/\s*(<[^>]+>)\s*/g, '$1')
         .replace(/(\r\n|\n|\r)/gm, ' ')
         .replace(/\s+/g, ' ')
         .trim();
-    return compressedCssString;
 }
 
 async function build(name, targetName) {
-    const { version } = JSON.parse(fs.readFileSync(`${projects[name]}/package.json`, 'utf-8'));
+    const projectPackageJson = path.join(projects[name], 'package.json');
+    const { version } = JSON.parse(fs.readFileSync(projectPackageJson, 'utf-8'));
+
     process.chdir(projects[name]);
 
     const targets = {
         main: {
             context: 'browser',
-            distDir: `${projects[name]}/dist`,
+            distDir: path.join(projects[name], 'dist'),
             sourceMap: false,
             outputFormat: 'global',
             engines: {
@@ -33,7 +34,7 @@ async function build(name, targetName) {
         },
         legacy: {
             context: 'browser',
-            distDir: `${projects[name]}/dist`,
+            distDir: path.join(projects[name], 'dist'),
             sourceMap: false,
             outputFormat: 'global',
             engines: {
@@ -48,7 +49,7 @@ async function build(name, targetName) {
     };
 
     const bundler = new Parcel({
-        entries: `${projects[name]}/src/index.js`,
+        entries: path.join(projects[name], 'src/index.js'),
         defaultConfig: '@parcel/config-default',
         mode: 'production',
         targets: {
@@ -61,58 +62,57 @@ async function build(name, targetName) {
         },
     });
 
-    const banner =
-        '/*!\n' +
-        ` * ${name}.js v${version}\n` +
-        ` * Github: https://github.com/zhw2590582/ArtPlayer\n` +
-        ` * (c) 2017-${new Date().getFullYear()} Harvey Zack\n` +
-        ' * Released under the MIT License.\n' +
-        ' */\n';
+    const banner = `
+/*!
+ * ${name}.js v${version}
+ * Github: https://github.com/zhw2590582/ArtPlayer
+ * (c) 2017-${new Date().getFullYear()} Harvey Zack
+ * Released under the MIT License.
+ */
+`;
 
-    const { bundleGraph, buildTime } = await bundler.run();
-    const bundles = bundleGraph.getBundles();
+    try {
+        const { bundleGraph, buildTime } = await bundler.run();
+        const bundles = bundleGraph.getBundles();
 
-    const filePath = `${projects[name]}/dist/index.js`;
-    const newFilePath = `${projects[name]}/dist/${names[targetName]}.js`;
-    const code = String(fs.readFileSync(filePath));
-    fs.writeFileSync(filePath, banner + compressString(code));
-    fs.renameSync(filePath, newFilePath);
-    await cpy(newFilePath, compiledPath);
-    const size = fs.statSync(newFilePath).size / 1024;
-    console.log(
-        `✨ Built@${targetName} ${name}@${version}`,
-        `Bundles@${bundles.length}`,
-        `Time@${buildTime}ms`,
-        `Size@${size}kb`,
-    );
+        const filePath = path.join(projects[name], 'dist/index.js');
+        const newFilePath = path.join(projects[name], `dist/${names[targetName]}.js`);
+        const code = fs.readFileSync(filePath, 'utf-8');
+        fs.writeFileSync(filePath, banner + compressString(code));
+        fs.renameSync(filePath, newFilePath);
+        await cpy(newFilePath, compiledPath);
+        const size = fs.statSync(newFilePath).size / 1024;
+
+        console.log(
+            `✨ Built@${targetName} ${name}@${version}`,
+            `Bundles@${bundles.length}`,
+            `Time@${buildTime}ms`,
+            `Size@${size.toFixed(2)}kb`,
+        );
+    } catch (error) {
+        console.error(`Failed to build ${name}:`, error);
+    }
 }
 
-function runPromisesInSeries(ps) {
-    return ps.reduce((p, next) => p.then(next), Promise.resolve());
-}
+async function runBuild() {
+    if (process.argv.pop() === 'all') {
+        const bundles = Object.keys(projects).map((name) => async () => {
+            await build(name, 'main');
+            await build(name, 'legacy');
+        });
 
-if (process.argv.pop() === 'all') {
-    const bundles = Object.keys(projects).map((name) => async () => {
-        await build(name, 'main');
-        await build(name, 'legacy');
-    });
-
-    runPromisesInSeries(bundles).then(() => {
-        console.log(`✨ Finished building all packages!`);
-    });
-} else {
-    (async () => {
+        await runPromisesInSeries(bundles);
+        console.log('✨ Finished building all packages!');
+    } else {
         const response = await prompts({
             type: 'select',
             name: 'value',
             message: 'Which project do you want to build?',
-            choices: Object.keys(projects).map((name) => {
-                return {
-                    title: name,
-                    value: name,
-                    description: projects[name],
-                };
-            }),
+            choices: Object.keys(projects).map((name) => ({
+                title: name,
+                value: name,
+                description: projects[name],
+            })),
             initial: 0,
         });
 
@@ -120,5 +120,13 @@ if (process.argv.pop() === 'all') {
             await build(response.value, 'main');
             await build(response.value, 'legacy');
         }
-    })();
+    }
 }
+
+function runPromisesInSeries(ps) {
+    return ps.reduce((p, next) => p.then(next), Promise.resolve());
+}
+
+runBuild().catch((error) => {
+    console.error('Build script encountered an error:', error);
+});

scripts/dev.js

@@ -12,74 +12,88 @@ const projects = getProjects();
 async function develop(name) {
     let isOpenBrowser = false;
     const uncompiledPath = path.resolve(`docs/uncompiled/${name}`);
-    const { version } = JSON.parse(fs.readFileSync(`${projects[name]}/package.json`, 'utf-8'));
 
-    const { url } = await servor({
+    const projectPackageJson = path.join(projects[name], 'package.json');
+    const { version } = JSON.parse(fs.readFileSync(projectPackageJson, 'utf-8'));
+
+    const serverConfig = {
         root: 'docs',
         fallback: 'index.html',
         reload: true,
         port: 8082,
-    });
+    };
 
-    process.chdir(projects[name]);
+    try {
+        const { url } = await servor(serverConfig);
+        process.chdir(projects[name]);
 
-    const bundler = new Parcel({
-        entries: `${projects[name]}/src/index.js`,
-        defaultConfig: '@parcel/config-default',
-        mode: 'development',
-        targets: {
-            main: {
-                distDir: uncompiledPath,
-                outputFormat: 'global',
-                engines: {
-                    browsers: ['last 1 Chrome version'],
+        const bundlerConfig = {
+            entries: `${projects[name]}/src/index.js`,
+            defaultConfig: '@parcel/config-default',
+            mode: 'development',
+            targets: {
+                main: {
+                    distDir: uncompiledPath,
+                    outputFormat: 'global',
+                    engines: {
+                        browsers: ['last 1 Chrome version'],
+                    },
                 },
             },
-        },
-        env: {
-            NODE_ENV: 'development',
-            APP_VER: version,
-            BUILD_DATE: formatDate(Date.now()),
-        },
-        additionalReporters: [
-            {
-                packageName: '@parcel/reporter-cli',
-                resolveFrom: fileURLToPath(import.meta.url),
+            env: {
+                NODE_ENV: 'development',
+                APP_VER: version,
+                BUILD_DATE: formatDate(Date.now()),
             },
-        ],
-    });
+            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!`);
-            if (!isOpenBrowser) {
-                isOpenBrowser = true;
-                openBrowser(url);
+        const bundler = new Parcel(bundlerConfig);
+
+        bundler.watch((error, event) => {
+            if (error) {
+                console.error(`Build error: ${error}`);
+                return;
             }
-        } else if (event.type === 'buildFailure') {
-            console.log(`[${name}]`, event.diagnostics);
-        }
-    });
+            if (event.type === 'buildSuccess') {
+                const bundles = event.bundleGraph.getBundles();
+                console.log(`[${name}] ✨ Built ${bundles.length} bundles in ${event.buildTime}ms!`);
+                if (!isOpenBrowser) {
+                    isOpenBrowser = true;
+                    openBrowser(url);
+                }
+            } else if (event.type === 'buildFailure') {
+                console.error(`[${name}] Build failure:`, event.diagnostics);
+            }
+        });
+    } catch (error) {
+        console.error(`Failed to start development server for ${name}: ${error.message}`);
+    }
 }
 
 (async () => {
-    const response = await prompts({
-        type: 'select',
-        name: 'value',
-        message: 'Which project do you want to develop?',
-        choices: Object.keys(projects).map((name) => {
-            return {
+    try {
+        const response = await prompts({
+            type: 'select',
+            name: 'value',
+            message: 'Which project do you want to develop?',
+            choices: Object.keys(projects).map((name) => ({
                 title: name,
                 value: name,
                 description: projects[name],
-            };
-        }),
-        initial: 0,
-    });
+            })),
+            initial: 0,
+        });
 
-    if (response.value) {
-        develop(response.value);
+        if (response.value) {
+            develop(response.value);
+        }
+    } catch (error) {
+        console.error(`Prompt error: ${error.message}`);
     }
 })();

scripts/plugin/create.js

@@ -0,0 +1,65 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Get the current file path
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Get the plugin name from command line arguments
+const args = process.argv.slice(2);
+const pluginName = args[0];
+
+if (!pluginName) {
+    console.error('Please provide a plugin name, e.g., npm run create:plugin somePluginName');
+    process.exit(1);
+}
+
+// Define paths
+const templateDir = path.join(__dirname, 'template');
+const destDir = path.join(__dirname, '../../packages', `artplayer-plugin-${pluginName}`);
+
+// Check if a plugin with the same name already exists
+if (fs.existsSync(destDir)) {
+    console.error(`Plugin ${pluginName} already exists. Please choose another name.`);
+    process.exit(1);
+}
+
+// Create the destination directory
+fs.mkdirSync(destDir, { recursive: true });
+
+// Read files from the template directory and copy them to the destination directory
+function copyTemplateFiles(templateDir, destDir) {
+    const files = fs.readdirSync(templateDir);
+
+    files.forEach((file) => {
+        const templateFilePath = path.join(templateDir, file);
+        let destFilePath = path.join(destDir, file);
+
+        const stats = fs.statSync(templateFilePath);
+
+        if (stats.isDirectory()) {
+            fs.mkdirSync(destFilePath, { recursive: true });
+            copyTemplateFiles(templateFilePath, destFilePath);
+        } else {
+            // Replace placeholders in the file name
+            destFilePath = destFilePath.replace(/{{name}}/g, pluginName);
+
+            let content = fs.readFileSync(templateFilePath, 'utf8');
+
+            // Replace placeholders in the file content
+            content = content.replace(/{{name}}/g, pluginName);
+            content = content.replace(
+                /{{export}}/g,
+                `artplayerPlugin${pluginName.charAt(0).toUpperCase() + pluginName.slice(1)}`,
+            );
+
+            fs.writeFileSync(destFilePath, content);
+        }
+    });
+}
+
+// Start copying template files
+copyTemplateFiles(templateDir, destDir);
+
+console.log(`Plugin ${pluginName} has been successfully created at ${destDir}`);

scripts/plugin/template/README.md

@@ -0,0 +1,11 @@
+# artplayer-plugin-{{name}}
+
+{{name}} plugin for ArtPlayer
+
+## Demo
+
+[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-{{name}}/index.js&example={{name}})
+
+## License
+
+MIT © Harvey Zack

scripts/plugin/template/package.json

@@ -0,0 +1,24 @@
+{
+    "license": "MIT",
+    "version": "1.0.0",
+    "name": "artplayer-plugin-{{name}}",
+    "types": "types/artplayer-plugin-{{name}}.d.ts",
+    "description": "{{name}} plugin for ArtPlayer",
+    "main": "dist/artplayer-plugin-{{name}}.js",
+    "legacy": "dist/artplayer-plugin-{{name}}.legacy.js",
+    "author": "Harvey Zack <laozhaochaguan@gmail.com>",
+    "browserslist": "last 1 Chrome version",
+    "homepage": "https://artplayer.org",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/zhw2590582/ArtPlayer.git"
+    },
+    "bugs": {
+        "url": "https://github.com/zhw2590582/ArtPlayer/issues"
+    },
+    "keywords": [
+        "html5",
+        "video",
+        "player"
+    ]
+}

scripts/plugin/template/src/index.js

@@ -0,0 +1,26 @@
+import style from 'bundle-text:./style.less';
+
+export default function {{export}}(option) {
+    return (art) => {
+        return {
+            name: '{{export}}',
+        };
+    };
+}
+
+if (typeof document !== 'undefined') {
+    const id = 'artplayer-plugin-{{name}}';
+    const $style = document.getElementById(id);
+    if ($style) {
+        $style.textContent = style;
+    } else {
+        const $style = document.createElement('style');
+        $style.id = id;
+        $style.textContent = style;
+        document.head.appendChild($style);
+    }
+}
+
+if (typeof window !== 'undefined') {
+    window['{{export}}'] = {{export}};
+}

scripts/plugin/template/src/style.less

@@ -0,0 +1,3 @@
+.artplayer-plugin-{{name}} {
+    //
+}

scripts/plugin/template/types/artplayer-plugin-{{name}}.d.ts

@@ -0,0 +1,14 @@
+import type Artplayer from 'artplayer';
+
+export = {{export}};
+export as namespace {{export}};
+
+type Option = {
+    //
+};
+
+type Result = {
+    name: '{{export}}';
+};
+
+declare const {{export}}: (option: Option) => (art: Artplayer) => Result;