v10.0.0: videoSrc and videoCaptions API updates, bug fixes, build system updates

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true

.eslintrc

@@ -1,68 +1,47 @@
 {
-   "ignorePatterns": [
-      "node_modules"
-   ],
-   "parser": "@typescript-eslint/parser",
-   "parserOptions": {
-      "ecmaVersion": 2020,
-      "sourceType": "module",
-      "ecmaFeatures": {
-         "jsx": true
+  "ignorePatterns": ["node_modules"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/resolver": {
+      "node": {
+        "paths": ["src"],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }
-   },
-   "settings": {
-      "react": {
-         "version": "detect"
-      },
-      "import/resolver": {
-         "node": {
-            "paths": [
-               "src"
-            ],
-            "extensions": [
-               ".js",
-               ".jsx",
-               ".ts",
-               ".tsx"
-            ]
-         }
+    }
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings"
+  ],
+  "plugins": ["@typescript-eslint", "jsx-a11y", "react-hooks"],
+  "rules": {
+    "react/prop-types": 0,
+    "no-underscore-dangle": 0,
+    "import/imports-first": ["error", "absolute-first"],
+    "import/newline-after-import": "error",
+    "import/prefer-default-export": 0,
+    "import/no-extraneous-dependencies": "off",
+    "semi": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "no-console": [
+      "error",
+      {
+        "allow": ["warn", "error"]
       }
-   },
-   "extends": [
-      "plugin:react/recommended",
-      "plugin:@typescript-eslint/eslint-recommended",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:import/errors",
-      "plugin:import/warnings",
-      "plugin:prettier/recommended"
-   ],
-   "plugins": [
-      "prettier",
-      "@typescript-eslint",
-      "jsx-a11y",
-      "react-hooks"
-   ],
-   "rules": {
-      "react/prop-types": 0,
-      "no-underscore-dangle": 0,
-      "import/imports-first": [
-         "error",
-         "absolute-first"
-      ],
-      "import/newline-after-import": "error",
-      "import/prefer-default-export": 0,
-      "import/no-extraneous-dependencies": "off",
-      "semi": "error",
-      "react-hooks/rules-of-hooks": "error",
-      "react-hooks/exhaustive-deps": "warn",
-      "no-console": [
-         "error",
-         {
-            "allow": [
-               "warn",
-               "error"
-            ]
-         }
-      ]
-   }
-}
+    ]
+  }
+}

.github/workflows/publish-docs.yml

@@ -0,0 +1,43 @@
+name: Publish to react-hover-video-player.dev
+on:
+  push:
+    branches: [main]
+jobs:
+  build:
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Install dependencies
+        run: npm ci
+      - name: Build site
+        run: npm run docs:build
+      - uses: actions/upload-pages-artifact
+        with:
+          name: "github-pages"
+          path: ./docs/.vuepress/dist
+          retention-days: 1
+
+  deploy:
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    needs: build
+
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+
+    # Deploy to the github-pages environment
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    # Specify runner + deployment step
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/test.yml

@@ -0,0 +1,27 @@
+name: Tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npm run test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -9,5 +9,7 @@ npm-debug.log*
 /docs/.vuepress/dist
 /docs/.vuepress/.temp
 /docs/.vuepress/.cache
-/tests/cypress/videos
-/tests/cypress/screenshots
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/tests/index.js

.nvmrc

@@ -0,0 +1 @@
+v16.13.2

build.mjs

@@ -0,0 +1,73 @@
+import esbuild from "esbuild";
+import fs from "fs";
+
+const outputDir = "dist";
+
+const shouldClean = process.argv.includes("--clean");
+
+if (shouldClean) {
+  // Clean up any files in the output directory, or make sure the output directory exists
+  if (fs.existsSync(outputDir)) {
+    fs.rmSync(outputDir, {
+      recursive: true,
+      force: true,
+    });
+  }
+
+  fs.mkdirSync(outputDir);
+}
+
+const sharedOptions = {
+  entryPoints: ["src/index.ts"],
+  sourcemap: true,
+  bundle: true,
+  packages: "external",
+  target: "es6",
+  logLevel: "info",
+};
+
+const esmOptions = {
+  ...sharedOptions,
+  outfile: `${outputDir}/index.mjs`,
+  format: "esm",
+};
+
+const cjsOptions = {
+  ...sharedOptions,
+  outfile: `${outputDir}/index.cjs`,
+  format: "cjs",
+};
+
+const shouldWatch = process.argv.includes("--watch");
+
+if (shouldWatch) {
+  const context = await esbuild.context(esmOptions);
+
+  await context.watch();
+  await context.serve();
+} else {
+  let buildTargets = ["all"];
+  const buildsArgIndex = process.argv.indexOf("--builds");
+  if (buildsArgIndex >= 0) {
+    buildTargets = process.argv[buildsArgIndex + 1].split(",");
+  }
+
+  const builds = [];
+
+  buildTargets.forEach((buildTarget) => {
+    if (buildTarget === "esm" || buildTarget === "all") {
+      builds.push(esbuild.build(esmOptions));
+    }
+
+    if (buildTarget === "cjs" || buildTarget === "all") {
+      builds.push(esbuild.build(cjsOptions));
+    }
+  });
+
+  if (builds.length === 0) {
+    console.error("No valid builds specified for the --builds arg.");
+    process.exit(1);
+  }
+
+  await Promise.all(builds);
+}

dev.mjs

@@ -0,0 +1,16 @@
+import esbuild from 'esbuild';
+
+const context = await esbuild.context({
+  entryPoints: ['dev/index.tsx'],
+  outfile: 'dev/build/index.js',
+  sourcemap: true,
+  bundle: true,
+  target: 'es6',
+  logLevel: 'info',
+});
+
+await context.watch();
+await context.serve({
+  servedir: 'dev',
+  port: 8080,
+});