docs(refactor): [DOC-HANDOFF-01] defer remaining work for user self-testing

* feat: support batch video upscaling with folder upload and directory save

- Add multi-file selection and entire folder upload (webkitdirectory)
- Support drag & drop of both files and folders via FileSystemEntry API
- Add save directory picker using File System Access API (showDirectoryPicker)
- Process videos sequentially with per-file progress and status tracking
- Add right-side result list with click-to-compare functionality
- Add per-video duration and total batch duration display
- Add retry button for failed items with error detail display
- Remove auto-play on comparison viewer load
- Fix worker error handling: handle "error" command to reject stale promises
- Fix event listener accumulation in video comparison (AbortController)
- Fix XSS risk by escaping HTML in all innerHTML injections
- Fix URL revocation timing in download to prevent large file truncation
- Extract writeToSaveDirectory and truncateName helpers to reduce duplication
- Add Usage Guide panel explaining single/multiple/folder upload options

Files changed:
  docs/upscaler/index.html  (+1110/-181)
  docs/upscaler/upscaler.js (+110)

* fix: prevent auto-play and resource consumption during upscaling

- Set preload="metadata" on preview and comparison video elements
- Explicitly pause preview video after setting src in showVideoPreview
- Remove preview video seek sync from batch processing progress callbacks
  (was causing continuous decode during upscaling, wasting GPU resources)
- Remove preview video seek sync from retry progress callback
- All videos now require manual play; no background resource usage

* fix: improve upscaled video quality with higher bitrate and codec support

- Raise base bitrate from 2.5 Mbps (25e5) to 8 Mbps (8e6) for standard and
  firefox processors, preventing quality loss when source videos have high
  bitrates (e.g. 720p @ 16.7 Mbps was producing 1440p @ 10 Mbps, smaller
  than the original file)
- Double the bitrate for mediabunny processor (X.n1 * 2) to account for the
  4x pixel increase from 2x upscaling
- Add H.264 Level 5.1 (avc1.640033) and Level 5.2 (avc1.640034) codecs to
  the fallback lists, since Level 4.0 (avc1.640028, ~24.6 Mbps) cannot
  support the higher bitrates for 1440p+ outputs
- Add latencyMode: "quality" to VideoEncoder configs for both standard and
  firefox processors, prioritizing encoding quality over latency (suitable
  for offline processing)

* feat: add video data comparison panel for original vs upscaled metrics

- Add a comparison data table below the file info bar showing 6 metrics:
  Resolution, File Size, Duration, Est. Bitrate, Pixels, Process Time
- Display per-metric change percentage with color-coded indicators:
  green (↑) for improvements, red (↓) for regressions, gray for neutral
- Estimated bitrate calculated from file size × 8 / video duration
- Table renders after both original and upscaled video metadata loads
- Auto-hide panel on reset

* fix: make video data comparison panel full-width and responsive

- Move comparison data table from inside the left column to the full-width
  area below the left/right layout, so it is no longer constrained by the
  comparison viewer column width
- Remove table-fixed colgroup and overflow-x-auto that caused horizontal
  scrolling on smaller screens
- Table now uses w-full auto-layout, displaying all 4 columns (Metric,
  Original, Upscaled, Change) without requiring horizontal scrolling

---------

Co-authored-by: rionzhao <rionzhao@tencent.com>

.eslintignore

@@ -1,7 +0,0 @@
-/docs
-/dist
-/test
-/scripts
-/node_modules
-/packages/**/node_modules
-/packages/**/dist

.eslintrc

@@ -1,22 +0,0 @@
-{
-    "parser": "@babel/eslint-parser",
-    "extends": "eslint:recommended",
-    "env": {
-        "browser": true,
-        "es6": true
-    },
-    "globals": {
-        "require": "readonly",
-        "process": "readonly"
-    },
-    "parserOptions": {
-        "sourceType": "module",
-        "ecmaVersion": "latest",
-        "requireConfigFile": false,
-        "babelOptions": {
-            "presets": [
-                "@babel/preset-react"
-            ]
-        }
-    }
-}

.gitattributes

@@ -1,2 +1,55 @@
 * text=auto
 *.js text eol=lf
+test/browser/media/hls/*.m3u8 text eol=lf
+test/browser/fixtures/hls-grouped.m3u8 text eol=lf
+test/browser/media/hls/*.mpegts binary
+# Preserve generated XML whitespace and its frozen playback-input hashes.
+test/browser/media/dash/*.mpd text eol=lf whitespace=-blank-at-eol
+test/browser/media/dash/*.m4s binary
+test/browser/media/*.m4a binary
+refactor/baselines/core-vendor/*.txt text eol=lf
+refactor/baselines/thumbnail-vendor/* text eol=lf whitespace=-blank-at-eof
+# Preserve the exact upstream WebVTT reference bytes, including license trailing lines.
+refactor/baselines/multiple-subtitles-vendor/* text eol=lf whitespace=-blank-at-eof
+# Preserve upstream documentation-site license bytes, including final blank lines.
+refactor/baselines/site-vendor/*.txt text eol=lf whitespace=-blank-at-eof
+docs/licenses/** text eol=lf whitespace=-blank-at-eof
+docs/THIRD_PARTY_NOTICES.md text eol=lf
+
+# Preserve historical Codicons archive notice bytes, including CRLF.
+refactor/baselines/site-vendor/codicons-0.0.26/LICENSE* -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/codicons-0.0.26/README.txt -text whitespace=-trailing-space,cr-at-eol
+docs/licenses/monaco-editor/codicons/LICENSE* -text whitespace=-trailing-space,cr-at-eol
+docs/licenses/monaco-editor/codicons/README.md -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/codicons-0.0.26/ATTRIBUTION.txt text eol=lf
+refactor/baselines/site-vendor/vconsole-3.15.0/** text eol=lf whitespace=-blank-at-eof
+refactor/baselines/site-vendor/console-original.js text eol=lf
+refactor/baselines/site-vendor/console-commonjs/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/console-esm/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/console-embedded/** -text whitespace=-trailing-space,cr-at-eol
+docs/licenses/console/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/console-attribution/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/console-stackoverflow/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/monaco-typescript/** -text whitespace=-trailing-space,cr-at-eol
+docs/licenses/monaco-editor/typescript/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/monaco-languages/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/monaco-language-notices/** -text whitespace=-trailing-space,cr-at-eol
+docs/licenses/monaco-editor/language-services/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/monaco-modes/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/monaco-basic/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/monaco-basic-fixtures.json text eol=lf
+refactor/baselines/site-vendor/monaco-core-origins/** -text whitespace=-trailing-space,cr-at-eol
+docs/licenses/monaco-editor/core-origins/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/monaco-core-build/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/monaco-core-locales.json text eol=lf
+refactor/baselines/site-vendor/monaco-contributions/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/monaco-css-build/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/monaco-node-path/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/monaco-dom/** -text whitespace=-trailing-space,cr-at-eol
+docs/licenses/monaco-editor/core-dom/** -text whitespace=-trailing-space,cr-at-eol
+docs/licenses/monaco-editor/core-path/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/monaco-node-path-fixtures.json text eol=lf
+refactor/baselines/site-vendor/monaco-unicode/** -text whitespace=-trailing-space,cr-at-eol
+docs/licenses/monaco-editor/core-unicode/** -text whitespace=-trailing-space,cr-at-eol
+refactor/baselines/site-vendor/jassub-fonts/** -text whitespace=-trailing-space,cr-at-eol
+docs/licenses/jassub-fonts/** -text whitespace=-trailing-space,cr-at-eol

.github/FUNDING.yml

@@ -1,4 +1,3 @@
 # These are supported funding model platforms
 
-patreon: artplayer
 custom: https://paypal.me/harveyzack

.github/dependabot.yml

@@ -1,20 +0,0 @@
-version: 2
-updates:
-- package-ecosystem: npm
-  directory: "/"
-  schedule:
-    interval: daily
-    time: "19:00"
-  open-pull-requests-limit: 10
-  ignore:
-  - dependency-name: cssnano
-    versions:
-    - 5.0.0
-    - 5.0.1
-  - dependency-name: autoprefixer
-    versions:
-    - 10.2.4
-    - 10.2.5
-  - dependency-name: eslint-config-prettier
-    versions:
-    - 8.0.0

.github/workflows/nodejs.yml

@@ -1,39 +1,370 @@
 name: Node CI
 
 on:
+  pull_request:
   push:
-    branches:
+    branches: [ master, 'codex/**' ]
-      - master
+  workflow_dispatch:
-    paths-ignore:
+  workflow_call:
-      - '**.md'
+    inputs:
-      - 'docs/**'
+      pages-artifact:
-      - 'dist/**'
+        description: Prepare the checked docs directory for the separate Pages workflow
-      - 'images/**'
+        type: boolean
+        default: false
+
+permissions:
+  contents: read
+
+concurrency:
+  group: checks-${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' || github.event_name == 'push' }}
 
 jobs:
-  build:
+  coverage:
-
+    name: TS coverage (${{ matrix.os }})
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
-
+    timeout-minutes: 15
     strategy:
+      fail-fast: false
       matrix:
-        node-version: [16.x]
+        os: [ ubuntu-latest, windows-latest ]
-
+    defaults:
+      run:
+        shell: bash
+    env:
+      CI: true
     steps:
-    - uses: actions/checkout@v1
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-    - name: Use Node.js ${{ matrix.node-version }}
+        with:
-      uses: actions/setup-node@v1
+          persist-credentials: false
-      with:
+          fetch-depth: 0
-        node-version: ${{ matrix.node-version }}
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
-    - name: npm install, lint, build, and test
+        with:
-      run: |
+          node-version-file: .node-version
-        npm install
+          package-manager-cache: false
-        npm run lint
+      - name: Record source and cache inputs
-        npm run build:all
+        id: context
-        cd packages/artplayer-document && ls
+        run: node scripts/ci-context.mjs
-        npm run build
+      - name: Cache locked Yarn downloads
-        cd ../../ && ls
+        uses: actions/cache@caa296126883cff596d87d8935842f9db880ef25 # v5 ref verified 2026-09-13; node24
-        npm run test:create
+        with:
-        npm run test
+          path: ${{ steps.context.outputs.yarn_cache }}
-      env:
+          key: yarn-${{ runner.os }}-${{ runner.arch }}-node-${{ steps.context.outputs.node }}-yarn-${{ steps.context.outputs.yarn }}-${{ github.ref }}-${{ hashFiles('yarn.lock') }}
-        CI: true
+      - name: Install the pinned toolchain and dependencies
+        run: |
+          npm install --global --force yarn@1.22.22 2>&1 | tee refactor/.cache/ci/toolchain-install.log
+          yarn install --frozen-lockfile --non-interactive 2>&1 | tee refactor/.cache/ci/install.log
+          yarn check:toolchain --strict
+      - name: Verify source maps and critical lifecycle coverage
+        run: yarn test:coverage 2>&1 | tee refactor/.cache/ci/coverage.log
+      - name: Upload coverage and source-map evidence
+        if: always()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: coverage-${{ matrix.os }}-${{ github.run_id }}-${{ github.run_attempt }}
+          path: |
+            refactor/.cache/ci/
+            refactor/.cache/coverage/latest.json
+            refactor/.cache/coverage/run-*/
+          include-hidden-files: true
+          retention-days: 14
+          if-no-files-found: warn
+  browser-consumers:
+    name: Browser consumers (${{ matrix.os }})
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 60
+    env:
+      CI: true
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+          fetch-depth: 0
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version-file: .node-version
+          package-manager-cache: false
+      - name: Record source and cache inputs
+        id: context
+        run: node scripts/ci-context.mjs
+      - name: Cache locked Yarn downloads
+        uses: actions/cache@caa296126883cff596d87d8935842f9db880ef25 # v5 ref verified 2026-09-13; node24
+        with:
+          path: ${{ steps.context.outputs.yarn_cache }}
+          key: yarn-${{ runner.os }}-${{ runner.arch }}-node-${{ steps.context.outputs.node }}-yarn-${{ steps.context.outputs.yarn }}-${{ github.ref }}-${{ hashFiles('yarn.lock') }}
+      - name: Install the pinned package manager and dependencies
+        run: |
+          npm install --global --force yarn@1.22.22 2>&1 | tee refactor/.cache/ci/toolchain-install.log
+          yarn install --frozen-lockfile --non-interactive 2>&1 | tee refactor/.cache/ci/install.log
+      - name: Cache versioned browser downloads
+        uses: actions/cache@caa296126883cff596d87d8935842f9db880ef25 # v5 ref verified 2026-09-13; node24
+        with:
+          path: ${{ steps.context.outputs.browser_cache }}
+          key: playwright-${{ runner.os }}-${{ runner.arch }}-node-${{ steps.context.outputs.node }}-yarn-${{ steps.context.outputs.yarn }}-${{ github.ref }}-${{ hashFiles('yarn.lock') }}-${{ steps.context.outputs.playwright }}
+      - name: Install test browsers
+        run: yarn test:browser:install --with-deps 2>&1 | tee refactor/.cache/ci/browser-install.log
+      - name: Build and check installed tarballs
+        run: |
+          yarn test:package 2>&1 | tee refactor/.cache/ci/package.log
+          node --input-type=module -e 'import fs from "node:fs"; const { output } = JSON.parse(fs.readFileSync("refactor/.cache/packages/latest.json")); fs.appendFileSync(process.env.GITHUB_ENV, `ARTPLAYER_BROWSER_ARTIFACTS=${output}/browser-artifacts.json\n`);'
+      - name: Select Node 20 consumer runtime
+        id: consumer-node-20
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version: 20.19.0
+          package-manager-cache: false
+      - name: Verify Node 20 installed consumers
+        run: node scripts/package-runtime.mjs --expected-node 20.19.0 2>&1 | tee refactor/.cache/ci/consumer-node-20.log
+      - name: Select Node 22 consumer runtime
+        id: consumer-node-22
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version: 22.12.0
+          package-manager-cache: false
+      - name: Verify Node 22 installed consumers
+        run: node scripts/package-runtime.mjs --expected-node 22.12.0 2>&1 | tee refactor/.cache/ci/consumer-node-22.log
+      - name: Restore canonical runtime for browser tools
+        id: restore-canonical-node
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version-file: .node-version
+          package-manager-cache: false
+      - name: Verify canonical installed consumers
+        run: node scripts/package-runtime.mjs --canonical 2>&1 | tee refactor/.cache/ci/consumer-node-canonical.log
+      - name: Verify React installed consumers
+        run: yarn test:react-consumer 2>&1 | tee refactor/.cache/ci/react-consumer.log
+      - name: Verify Vue installed consumers
+        run: yarn test:vue-consumer 2>&1 | tee refactor/.cache/ci/vue-consumer.log
+      - name: Verify iframe cached history and interrupted navigation
+        run: yarn test:iframe-history 2>&1 | tee refactor/.cache/ci/iframe-history.log
+      - name: Compare installed performance and verify resource cleanup
+        run: yarn test:performance 2>&1 | tee refactor/.cache/ci/performance.log
+      - name: Verify all installed library type contracts
+        run: yarn test:ecosystem-types 2>&1 | tee refactor/.cache/ci/ecosystem-types.log
+      - name: Upload browser evidence
+        if: always()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: browser-consumers-${{ matrix.os }}-${{ github.run_id }}-${{ github.run_attempt }}
+          path: |
+            refactor/.cache/ci/
+            refactor/.cache/iframe-history/
+            refactor/.cache/react-consumer-*/
+            refactor/.cache/vue-consumer-*/
+            refactor/.cache/performance/
+            refactor/.cache/ecosystem-types/
+            refactor/.cache/*-package-types-*/*.json
+            refactor/.cache/*-package-types-*/*.log
+            refactor/.cache/packages/latest.json
+            refactor/.cache/packages/run-*/*.json
+            refactor/.cache/packages/run-*/*.log
+            refactor/.cache/packages/run-*/*.tgz
+            refactor/.cache/packages/run-*/artifacts/
+          include-hidden-files: true
+          retention-days: 14
+          if-no-files-found: warn
+    defaults:
+      run:
+        shell: bash
+    strategy:
+      fail-fast: false
+      max-parallel: 3
+      matrix:
+        os:
+          - ubuntu-latest
+          - windows-latest
+          - macos-latest
+  browser-smoke:
+    name: Browser playback (${{ matrix.os }}, ${{ matrix.browser }})
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 60
+    env:
+      CI: true
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+          fetch-depth: 0
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version-file: .node-version
+          package-manager-cache: false
+      - name: Record source and cache inputs
+        id: context
+        run: node scripts/ci-context.mjs
+      - name: Cache locked Yarn downloads
+        uses: actions/cache@caa296126883cff596d87d8935842f9db880ef25 # v5 ref verified 2026-09-13; node24
+        with:
+          path: ${{ steps.context.outputs.yarn_cache }}
+          key: yarn-${{ runner.os }}-${{ runner.arch }}-node-${{ steps.context.outputs.node }}-yarn-${{ steps.context.outputs.yarn }}-${{ github.ref }}-${{ hashFiles('yarn.lock') }}
+      - name: Install the pinned package manager and dependencies
+        run: |
+          npm install --global --force yarn@1.22.22 2>&1 | tee refactor/.cache/ci/toolchain-install.log
+          yarn install --frozen-lockfile --non-interactive 2>&1 | tee refactor/.cache/ci/install.log
+      - name: Cache versioned browser downloads
+        uses: actions/cache@caa296126883cff596d87d8935842f9db880ef25 # v5 ref verified 2026-09-13; node24
+        with:
+          path: ${{ steps.context.outputs.browser_cache }}
+          key: playwright-${{ runner.os }}-${{ runner.arch }}-node-${{ steps.context.outputs.node }}-yarn-${{ steps.context.outputs.yarn }}-${{ github.ref }}-${{ hashFiles('yarn.lock') }}-${{ steps.context.outputs.playwright }}
+      - name: Install test browsers
+        run: yarn test:browser:install --with-deps 2>&1 | tee refactor/.cache/ci/browser-install.log
+      - name: Prepare installed browser plugin packages
+        # Each engine builds and freezes its own complete installed browser roster.
+        # Other ecosystem installation/SDK gates remain tracked by CI-01.
+        run: |
+          yarn test:package --browser 2>&1 | tee refactor/.cache/ci/browser-packages.log
+          node --input-type=module -e 'import fs from "node:fs"; const { output } = JSON.parse(fs.readFileSync("refactor/.cache/packages/latest.json")); fs.appendFileSync(process.env.GITHUB_ENV, `ARTPLAYER_BROWSER_ARTIFACTS=${output}/browser-artifacts.json\n`);'
+      - name: Run all source browser checks
+        if: ${{ !cancelled() }}
+        run: yarn test:browser:source --project=${{ matrix.browser }} 2>&1 | tee refactor/.cache/ci/browser-source.log
+      - name: Run installed browser checks
+        if: ${{ !cancelled() }}
+        run: yarn test:browser:installed --project=${{ matrix.browser }} 2>&1 | tee refactor/.cache/ci/browser-installed.log
+      - name: Upload browser evidence
+        if: always()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: browser-smoke-${{ matrix.os }}-${{ matrix.browser }}-${{ github.run_id }}-${{ github.run_attempt }}
+          path: |
+            refactor/.cache/ci/
+            refactor/.cache/browser-source/
+            refactor/.cache/browser-installed/
+            refactor/.cache/packages/latest.json
+            refactor/.cache/packages/run-*/*.json
+            refactor/.cache/packages/run-*/*.log
+            refactor/.cache/packages/run-*/*.tgz
+            refactor/.cache/packages/run-*/artifacts/
+          include-hidden-files: true
+          retention-days: 14
+          if-no-files-found: warn
+    defaults:
+      run:
+        shell: bash
+    strategy:
+      fail-fast: false
+      max-parallel: 6
+      matrix:
+        browser: [chromium, firefox, webkit]
+        os:
+          - ubuntu-latest
+          - windows-latest
+          - macos-latest
+  checks:
+    name: Checks and build (${{ matrix.os }})
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 45
+    env:
+      CI: true
+    defaults:
+      run:
+        shell: bash
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+          fetch-depth: 0
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version-file: .node-version
+          package-manager-cache: false
+      - name: Record source and cache inputs
+        id: context
+        run: node scripts/ci-context.mjs
+      - name: Cache locked Yarn downloads
+        uses: actions/cache@caa296126883cff596d87d8935842f9db880ef25 # v5 ref verified 2026-09-13; node24
+        with:
+          path: ${{ steps.context.outputs.yarn_cache }}
+          key: yarn-${{ runner.os }}-${{ runner.arch }}-node-${{ steps.context.outputs.node }}-yarn-${{ steps.context.outputs.yarn }}-${{ github.ref }}-${{ hashFiles('yarn.lock') }}
+      - name: Install the pinned package manager
+        run: npm install --global --force yarn@1.22.22 2>&1 | tee refactor/.cache/ci/toolchain-install.log
+      - name: Validate workflow syntax
+        run: |
+          curl --fail --silent --show-error --location https://github.com/rhysd/actionlint/releases/download/v1.7.12/actionlint_1.7.12_linux_amd64.tar.gz --output "$RUNNER_TEMP/actionlint.tar.gz"
+          printf '%s  %s\n' '8aca8db96f1b94770f1b0d72b6dddcb1ebb8123cb3712530b08cc387b349a3d8' "$RUNNER_TEMP/actionlint.tar.gz" | sha256sum --check
+          tar -xzf "$RUNNER_TEMP/actionlint.tar.gz" -C "$RUNNER_TEMP" actionlint
+          "$RUNNER_TEMP/actionlint" -color
+        if: matrix.os == 'ubuntu-latest'
+      - name: Frozen install
+        run: |
+          mkdir -p refactor/.cache/ci
+          yarn install --frozen-lockfile --non-interactive 2>&1 | tee refactor/.cache/ci/install.log
+      - name: Read-only checks and tests
+        run: yarn ci:check 2>&1 | tee refactor/.cache/ci/check.log
+      - name: Build libraries and documentation
+        run: yarn ci:build 2>&1 | tee refactor/.cache/ci/build.log
+      - name: Validate and stage Pages paths
+        id: pages
+        if: inputs.pages-artifact && github.ref == 'refs/heads/master' && matrix.os == 'ubuntu-latest'
+        run: yarn prepare:pages 2>&1 | tee refactor/.cache/ci/pages.log
+      - name: Install staged Pages browser dependencies
+        if: inputs.pages-artifact && github.ref == 'refs/heads/master' && matrix.os == 'ubuntu-latest'
+        run: yarn test:browser:install --with-deps 2>&1 | tee refactor/.cache/ci/pages-browser-install.log
+      - name: Verify staged Pages entrypoints
+        if: inputs.pages-artifact && github.ref == 'refs/heads/master' && matrix.os == 'ubuntu-latest'
+        run: yarn test:pages:browser 2>&1 | tee refactor/.cache/ci/pages-browser.log
+      - name: Record source and tool versions
+        if: always()
+        run: |
+          mkdir -p refactor/.cache/ci
+          git rev-parse HEAD > refactor/.cache/ci/source.txt
+          node --version > refactor/.cache/ci/node.txt
+          yarn --version > refactor/.cache/ci/yarn.txt
+          sha256sum yarn.lock > refactor/.cache/ci/lock.sha256
+          git diff --stat > refactor/.cache/ci/generated-diff.txt
+      - name: Upload available logs
+        if: always()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: checks-${{ matrix.os }}-${{ github.run_id }}-${{ github.run_attempt }}
+          path: |
+            refactor/.cache/ci/
+            refactor/.cache/pages/run-*/report.json
+            refactor/.cache/pages/run-*/browser.json
+          include-hidden-files: true
+          retention-days: 14
+          if-no-files-found: warn
+      - name: Prepare Pages artifact
+        if: inputs.pages-artifact && github.ref == 'refs/heads/master' && matrix.os == 'ubuntu-latest'
+        uses: actions/upload-pages-artifact@fc324d3547104276b827a68afc52ff2a11cc49c9 # v5.0.0
+        with:
+          path: ${{ steps.pages.outputs.site }}
+          include-hidden-files: true
+    strategy:
+      fail-fast: false
+      max-parallel: 2
+      matrix:
+        os:
+          - ubuntu-latest
+          - windows-latest
+  ci-result:
+    name: CI result
+    if: always()
+    needs:
+      - checks
+      - coverage
+      - browser-smoke
+      - browser-consumers
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+          fetch-depth: 0
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version-file: .node-version
+          package-manager-cache: false
+      - name: Require every matrix job to succeed
+        env:
+          ARTPLAYER_CI_NEEDS: ${{ toJSON(needs) }}
+        run: node scripts/ci-summary.mjs
+      - name: Upload final status
+        if: always()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: ci-result-${{ github.run_id }}-${{ github.run_attempt }}
+          path: refactor/.cache/ci/
+          include-hidden-files: true
+          retention-days: 14
+          if-no-files-found: warn

.github/workflows/pages.yml

@@ -0,0 +1,34 @@
+name: Deploy Pages
+
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  validate:
+    if: github.ref == 'refs/heads/master' && vars.PAGES_DEPLOY_ENABLED == 'true'
+    uses: ./.github/workflows/nodejs.yml
+    with:
+      pages-artifact: true
+
+  deploy:
+    if: github.ref == 'refs/heads/master' && vars.PAGES_DEPLOY_ENABLED == 'true'
+    needs: validate
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy the validated artifact
+        id: deployment
+        uses: actions/deploy-pages@368f82528645a54fb793d4d04e342629a3f51346 # v5.0.1

.gitignore

@@ -1,6 +1,7 @@
+.env
 .vscode
 .DS_Store
-.parcel-cache
 node_modules
-package-lock.json
+**/package-lock.json
-yarn.lock
+lerna-debug.log
+refactor/.cache/

.node-version

@@ -0,0 +1 @@
+24.21.0

.prettierrc

@@ -1,7 +0,0 @@
-{
-    "useTabs": false,
-    "tabWidth": 4,
-    "singleQuote": true,
-    "trailingComma": "all",
-    "printWidth": 120
-}

AGENTS.md

@@ -0,0 +1,362 @@
+# AGENTS.md
+
+## Compatibility Refactor
+
+2026-09-16 user scope update: stop autonomous refactor implementation and hand off for
+the user's extended self-testing. Read [refactor/self-test-handoff.md](refactor/self-test-handoff.md)
+first. Remaining tasks are deferred, not passed; do not resume long tests, new fixes,
+full matrices, release preparation, or formal reviews without a new user instruction.
+Existing compatibility requirements and future publication gates remain in force.
+
+The compatibility modernization plan is maintained in [refactor/README.md](refactor/README.md).
+For refactor work, read its compatibility contract, task plan, and progress log before editing.
+Use `refactor/tasks.json` as the task status source and regenerate the readable plan with
+`node refactor/scripts/plan.mjs --write`; validate it with `node refactor/scripts/plan.mjs --check`.
+Preserve existing public APIs, event behavior, types, DOM/CSS hooks, and distribution entrypoints.
+The planned TypeScript migration permits incremental JS/TS coexistence; it does not authorize
+changing consumer APIs or treating planned validation as completed validation.
+Apply [refactor/quality-contract.md](refactor/quality-contract.md) to every implementation task:
+the user authorizes improving unreasonable internals while preserving old public contracts.
+Refactor responsibilities and dependencies alongside TypeScript migration, add meaningful
+risk-based tests, and update package architecture/maintenance documentation in the same change.
+The user requires one separate local Git commit for each completed refactor task.
+Include the task ID in the commit subject and include its implementation, tests, documentation,
+and status updates together. Verify the commit before starting the next task. Do not bundle
+multiple newly completed tasks or include unrelated work. This does not authorize pushing or publishing.
+Use Yarn Classic 1.22.22 as packageManager and maintain only the root yarn.lock.
+Core public declarations are authored in packages/artplayer/public/ and generated
+with yarn build:types into the existing types/ entrypoints. Do not hand-edit the
+generated core declarations; yarn check:types is read-only and rejects drift.
+Use Node from .node-version; frozen Yarn installs and strict toolchain checks are required.
+Bun remains an isolated evaluation and must not replace Yarn without a new user decision.
+The user also authorizes installing needed dependencies and adding or improving reasonable
+project scripts for the refactor without asking again for routine tooling choices.
+Record their purpose and versions, use the appropriate workspace/dependency category, update
+the lockfile when applicable, and verify compatibility and reproducible execution.
+After implementation and its necessary tests, hand off the results and wait for the
+user to guide and start the review phase. Do not automatically begin REVIEW-01/02/03,
+including an early first review. Follow [refactor/release-reviews.md](refactor/release-reviews.md):
+the three review rounds and closure of blocking findings remain required before candidate publication.
+Connected Chrome interaction checks complement committed automated browser tests; neither
+connection availability nor mocks replace actual playback or required device evidence.
+If Chrome is unavailable, use the Codex in-app browser for supported real-page tests.
+The user explicitly authorizes this fallback; record the actual browser/version and limitations.
+Do not block ordinary browser checks solely on the Chrome extension connection.
+Each review fix remains a separate task and commit. Revalidate changed candidate contents.
+The user explicitly includes GitHub CI/CD modernization in this refactor.
+Follow [refactor/github-ci-cd.md](refactor/github-ci-cd.md) for PR checks, regression matrices,
+artifacts, Pages and npm workflows. Distinguish local configuration from verified remote runs.
+The user requires every workspace package to move to its own next major version for this
+refactor (M.m.p -> (M+1).0.0). Follow refactor/version-policy.md; independent versions and
+old API compatibility remain mandatory. This version policy is not publication authorization.
+
+## Project Summary
+
+ArtPlayer is a monorepo for a modern HTML5 video player and its ecosystem packages.
+
+- Homepage: `https://artplayer.org`
+- Local dev site: `http://localhost:8082`
+- API docs: `https://artplayer.org/document`
+- Packaging model: workspace monorepo with per-package versioning and per-package build output
+
+The repository contains:
+
+- `packages/artplayer`: the core player
+- `packages/artplayer-plugin-*`: UI and playback plugins
+- `packages/artplayer-proxy-*`: proxy renderers and playback adapters
+- `packages/artplayer-tool-*`: helper tools
+- `packages/artplayer-vitepress`: docs site package
+- `docs/`: local demo site, examples, compiled assets, generated docs
+- `scripts/`: custom build/dev/doc tooling
+
+## Working Style For This Repo
+
+- Verify the real implementation before editing docs or examples.
+- Prefer changing the source package first, then regenerate build artifacts only when needed.
+- Keep package APIs small and consistent with existing ArtPlayer plugin conventions.
+- Preserve the existing visual and API style of sibling packages instead of inventing a new pattern.
+- When touching demo examples, make sure the example still works in `http://localhost:8082`.
+- Do not hand-edit `dist/`, `docs/compiled/`, or `docs/uncompiled/` unless a build step generated them.
+- Desktop editor sources live in `packages/artplayer-vitepress/browser/`; `docs/assets/js/common.js`,
+  `bootstrap.js`, `loader.js`, `mobile.js` and `packages/artplayer-vitepress/docs/public/main.js`
+  are generated with `yarn build:site-assets`. `editor-libraries.ts` is generated by `yarn build:ts`.
+
+## Primary Commands
+
+Use the repo scripts rather than ad hoc bundler commands.
+
+### Development
+
+```bash
+yarn dev
+```
+
+Starts the local dev site on port `8082` and interactively selects a package to watch. The selected package is built into:
+
+- `docs/uncompiled/<package>/`
+
+### Production Build
+
+```bash
+yarn build
+```
+
+Interactive build for one package. Outputs:
+
+- `packages/<name>/dist/*.js|*.legacy.js|*.mjs`
+- copied artifacts into `docs/compiled/`
+
+Build all packages:
+
+```bash
+yarn build all
+```
+
+### Other Project Scripts
+
+```bash
+yarn build:i18n
+yarn build:ts
+yarn build:docs
+yarn build:llm
+yarn build:test
+yarn lint
+yarn build:all
+```
+
+Notes:
+
+- `yarn lint` is read-only; `yarn lint:fix` explicitly fixes the same source/type/script range.
+- `yarn ci:check` runs strict toolchain/plan/lint/tests; `yarn ci:build` generates outputs and checks imports.
+- See `refactor/ci-setup.md` for CI and separate Pages deployment; remote activation is tracked separately.
+- `yarn build:all` is expensive; use it when a change truly spans builds/docs/types/lint together.
+
+## Useful Local URLs
+
+- Root demo index: `http://localhost:8082`
+- Demo by package/example:
+  - `http://localhost:8082/?libs=./uncompiled/<package>/index.js&example=<example>`
+- Docs: `http://localhost:8082/document/`
+
+For proxy/plugin work, prefer validating on the local demo page rather than reasoning only from source.
+
+## Repository Layout
+
+### Core package
+
+- `packages/artplayer/src/index.ts`: player entry
+- `packages/artplayer/src/player/`: playback mixins and player-facing behavior
+- `packages/artplayer/src/control/`: bottom controls
+- `packages/artplayer/src/setting/`: settings panel
+- `packages/artplayer/src/contextmenu/`: context menu items
+- `packages/artplayer/src/plugins/`: built-in plugins
+- `packages/artplayer/src/utils/`: shared helpers, component base classes, DOM utilities
+- `packages/artplayer/public/`: public TypeScript declaration sources
+- `packages/artplayer/types/`: generated public declarations and compatibility documentation
+
+### Ecosystem packages
+
+Migrated ecosystem packages follow this pattern:
+
+```text
+packages/<package>/
+  src/index.ts
+  src/*.ts         # internal modules; see the package maintenance map
+  src/*.less        # optional
+  types/*.d.ts      # public compatibility declarations
+  ARCHITECTURE.md   # maintenance map, or a maintenance section in README.md
+  README.md
+  package.json
+  dist/*
+```
+
+Read the package maintenance map before changing module ownership. Some packages
+also expose accurate types through `/runtime`, with `.d.mts`/`.d.cts` declarations.
+Do not replace historical root declarations with internal implementation types;
+follow [the approved type policy](refactor/type-compatibility-policy.md) and each
+package's recorded compatibility decisions. Check package.json for exact exports.
+
+### Demo and docs assets
+
+- `docs/assets/example/*.js`: runnable browser examples
+- `docs/assets/ts/*.js`: TypeScript demo assets targeted by lint/docs flows
+- `docs/uncompiled/`: dev output
+- `docs/compiled/`: production-copied output
+- `docs/document/`: generated docs content
+
+## Architecture Notes
+
+### Core player
+
+ArtPlayer composes many subsystems during construction. Common integration points:
+
+- `art.template`
+- `art.events`
+- `art.controls`
+- `art.setting`
+- `art.contextmenu`
+- `art.layers`
+- `art.plugins`
+- `art.player`
+
+When extending behavior, prefer integrating with these existing systems rather than bypassing them.
+
+### Control and setting components
+
+Controls and setting entries are managed through component registries.
+
+Relevant implementation:
+
+- `packages/artplayer/src/control/index.ts`
+- `packages/artplayer/src/setting/index.ts`
+- `packages/artplayer/src/utils/component.ts`
+
+Important behavior:
+
+- `art.controls.update(...)` and `art.setting.update(...)` replace existing entries by `name`
+- `art.controls.remove(name)` and `art.setting.remove(name)` are the correct cleanup APIs
+- selector-style controls rely on `default` flags to determine highlighted items
+
+If a plugin conditionally shows UI, it must also clean that UI up when the condition no longer holds.
+
+### Plugin shape
+
+Standard plugin/export shape:
+
+```js
+export default function somePlugin(option = {}) {
+  return (art) => {
+    return {
+      name: 'somePlugin',
+    }
+  }
+}
+```
+
+Naming conventions:
+
+- package: `artplayer-plugin-<name>`
+- global: `artplayerPlugin<Name>`
+- exported function name should match the global naming convention
+
+### Proxy packages
+
+Proxy packages usually return a non-video element or video-like shim and emulate media element behavior for ArtPlayer.
+
+Examples:
+
+- `packages/artplayer-proxy-canvas`
+- `packages/artplayer-proxy-mediabunny`
+
+When editing proxy packages:
+
+- keep the HTMLMediaElement-like surface coherent
+- keep event ordering stable
+- treat `loadedmetadata`, `loadeddata`, `canplay`, `seeked`, `waiting`, and `pause/play` semantics carefully
+- ensure UI state is updated and cleaned up when source topology changes
+
+### HLS / adaptive playback controls
+
+The reference implementation for adaptive selector UI is:
+
+- `packages/artplayer-plugin-hls-control/src/index.ts`
+- `packages/artplayer-plugin-dash-control/src/index.ts` (SDK 4.x/5.x capability adapter)
+
+If adding HLS-like quality/audio selection elsewhere:
+
+- follow the selector format used there
+- derive highlighted items from actual current tracks, not only from mode flags
+- avoid stale selectors when changing to streams without the same topology
+
+## Build and Artifact Rules
+
+- Always edit source first: core runtime in `src/`, core declarations in `public/`;
+  other packages retain `types/` until their own declaration source migration.
+- Rebuild package artifacts after source changes that should ship.
+- Do not treat `dist/` as source of truth.
+- If a change affects demo behavior, also verify the matching file in `docs/assets/example/`.
+
+For package-specific builds, the normal flow is:
+
+1. `yarn dev` and pick the package for fast local iteration
+2. validate in `http://localhost:8082`
+3. `yarn build` and pick the package when ready to update shippable artifacts
+
+## Documentation Expectations
+
+If a public package API changes, check whether these also need updates:
+
+- the package `README.md`
+- `docs/assets/example/<name>.js`
+- `types/<name>.d.ts`
+- any generated compiled outputs if you built the package
+
+Keep examples realistic and runnable. Prefer local demo URLs or stable public sample streams.
+
+## Code Quality Expectations
+
+- Follow the existing TypeScript style for migrated production modules and the
+  existing JavaScript style for tests, launchers and documented legacy exceptions.
+- Use ASCII unless a file already requires otherwise.
+- Match the minimal-comment style of neighboring files.
+- Avoid unnecessary abstraction; this codebase generally prefers direct implementation.
+- Respect current browser targets:
+  - modern build: `es2020`
+  - legacy build: `es2015`
+
+## Validation Checklist
+
+For most package changes, validate as many of these as apply:
+
+- source file lint passes
+- local demo page loads
+- expected events fire once and in the correct order
+- controls/settings render correctly
+- cleanup works after restart, source switch, or destroy
+- package build succeeds
+
+For playback/proxy changes specifically:
+
+- test initial load
+- test play/pause
+- test seek
+- test switching source or track topology
+- test whether UI reflects the actual selected track/quality
+
+## Notes Specific To `artplayer-proxy-mediabunny`
+
+This package now depends on modern `mediabunny` and supports HLS through `mediabunny` input handling.
+
+Files to understand first:
+
+- `packages/artplayer-proxy-mediabunny/ARCHITECTURE.md`
+- `packages/artplayer-proxy-mediabunny/src/index.ts`
+- `packages/artplayer-proxy-mediabunny/src/VideoShim.ts`
+- `packages/artplayer-proxy-mediabunny/src/MediaBunnyEngine.ts`
+- `packages/artplayer-proxy-mediabunny/src/input.ts`
+- `packages/artplayer-proxy-mediabunny/src/m3u8.ts`
+
+Key expectations:
+
+- HLS source detection should happen in `input.ts`
+- track selection should use actual pairable audio/video relationships
+- selector UI should mirror the behavior of `artplayer-plugin-hls-control`
+- selector cleanup is required when a later source no longer supports the same controls
+- avoid duplicate readiness events during load and track switches
+
+For sustained playback, use `yarn test:mediabunny-soak` with explicit artifacts and
+media; see [the long-test procedure](refactor/changes/2026-09-16-PKG-MB-09-hour-soak.md).
+It shares port 8084 with ordinary browser tests. Do not start another browser
+server or change the measured source, artifacts or media during a live run.
+Use its live process handle and per-case progress samples to check progress;
+an old report or a start snapshot does not prove current execution or completion.
+
+## When Unsure
+
+Start with the nearest sibling implementation instead of inventing a new pattern:
+
+- control/setting UI: `artplayer-plugin-hls-control`, `artplayer-plugin-dash-control`
+- proxy behavior: `artplayer-proxy-canvas`, `artplayer-proxy-mediabunny`
+- component lifecycle: `packages/artplayer/src/utils/component.ts`
+
+If a change spans source, examples, and packaging, make all three consistent in the same pass.

CHANGELOG.md

@@ -0,0 +1,435 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+- Fix safe area issue when enter web fullscreen [#1033](https://github.com/zhw2590582/ArtPlayer/issues/1033)
+
+## [5.4.0] - 2026-03-12
+
+- Refactor `Parcel` to `Vite`
+- Change `Artplayer.FULLSCREEN_WEB_IN_BODY` defaults to `true`
+- The `reset` method is used to reset video request
+- Fix [#1014](https://github.com/zhw2590582/ArtPlayer/issues/1014)
+- Fix [#1023](https://github.com/zhw2590582/ArtPlayer/issues/1023)
+- Fix [#1028](https://github.com/zhw2590582/ArtPlayer/issues/1028)
+- Add `artplayer-plugin-jassub` plugin
+- Add `artplayer-proxy-mediabunny` plugin
+- Add `artplayer-plugin-audio-track` plugin
+- Add `artplayer-plugin-asr` plugin
+- Add `artplayer-plugin-danmuku-mask` plugin
+- Deprecate `artplayer-plugin-libass` plugin
+- Prevent `Hint.css` from polluting global styles
+
+## [5.3.0] - 2025-09-06
+
+- Rename `.esm.js` to `.mjs`
+- Remove the default `fill` color value of `svg`
+- Optimize the `autoOrientation` logic
+- Add `Artplayer.REMOVE_SRC_WHEN_DESTROY`
+- Add `artplayer-plugin-document-pip` plugin
+- Add `art.events.bindGlobalEvents` method for rebinding global methods
+- Optimize `artplayer.d.ts`, now you can directly import `Option`
+
+```ts
+import type { Option } from 'artplayer'
+
+const option: Option = {
+  container: '.artplayer-app',
+  url: './assets/sample/video.mp4',
+}
+```
+
+- Simplify `i18n` import
+
+```ts
+import fr from 'artplayer/i18n/fr'
+import id from 'artplayer/i18n/id'
+
+const option = {
+  container: '.artplayer-app',
+  url: './assets/sample/video.mp4',
+  i18n: { id, fr },
+  lang: 'fr',
+}
+```
+
+## [5.2.5] - 2025-08-01
+
+- Add `ESM` version for all packages, such as `artplayer/dist/artplayer.esm.js`
+- Recognize `globalThis.CUSTOM_USER_AGENT` global variable for customizing `navigator.userAgent`
+- Fix missing `mount` parameter when initializing `artplayer-plugin-danmuku`
+
+## [5.2.3] - 2025-04-20
+
+- Add Vietnamese `vi`
+- Clear the `video.src` property on destroy
+- Add `onClick` option for `Setting`
+- Fix style loading failure of danmuku and chapter plugins when the page has no head tag
+- Add `gesture` option to enable or disable gesture events on mobile `video` element
+
+## [5.2.2] - 2025-01-19
+
+- Fix thumbnail crossover issue
+- Fix style loading failure when the page has no head tag
+- Add slider support in subtitle plugin settings panel for mobile dragging
+- Fix positioning error of settings panel when rotating screen
+- Fix classname switching error when fullscreen state changes
+
+## [5.2.1] - 2024-10-26
+
+- Refactor `Setting` component, fix state loss issue
+- For `Setting` of type `range`, callback now returns an array of numbers instead of a single number
+- Remove `isStringOrNumber` utility function
+- Fix inconsistent state issue in `artplayer-plugin-hls-control`
+- Deprecate `artplayer-plugin-dash-quality` plugin
+- Add new `artplayer-plugin-dash-control` plugin
+- Use `code` instead of deprecated `keyCode` for keyboard events
+- Add `keydown` event to listen for `keydown` from `document`
+
+## [5.2.0] - 2024-10-19
+
+- Add `option.proxy` for proxying third-party `video` and `canvas`
+- Add `artplayer-proxy-canvas` proxy, enabling video playback via `canvas`
+- Add `option.thumbnails.scale` for preview image scaling
+- Fix bug where changing `art.url` didn’t trigger `autoPlayback`: [#797](https://github.com/zhw2590582/ArtPlayer/issues/797)
+- Add `art.subtitle.cues` property for retrieving all subtitle list
+- Add `art.subtitle.activeCues` property for retrieving active subtitles
+- Add `subtitleBeforeUpdate` event triggered before subtitle element rendering
+- Change `subtitleUpdate` event to `subtitleAfterUpdate`, triggered after subtitle element rendering
+- Optimize trigger timing and callback parameters of `subtitleLoad` event
+- Remove `subtitleSwitch` event; use `subtitleLoad` instead
+- Upgrade `artplayer-plugin-hls-quality` to `artplayer-plugin-hls-control`
+- Add `artplayer-plugin-ambilight` plugin
+- Fix `thumbnails` display bug
+
+## [5.1.7] - 2024-08-15
+
+- Add `Artplayer.STYLE` property to return player style text
+- `art.screenshot('your-name')` now supports custom file names
+- When `Artplayer.CONTEXTMENU` is `false`, default context menu is no longer hidden
+- Add `art.thumbnails` property for dynamically setting `thumbnails`
+
+## [5.1.6] - 2024-06-15
+
+- Optimize `setBar` event
+- Add `artplayerPluginChapter` plugin
+- Add `art.plugins.artplayerPluginDanmuku.load(target)` parameter for appending danmuku library
+- Add `width` option to danmuku plugin; when player width is smaller than this, danmuku sender is placed at the bottom
+- Fix `artplayerPluginVttThumbnail` not displaying on mobile
+- Fix danmuku plugin style and percentage font-size bug
+- `thumbnails` are now visible on mobile too
+- Restore `screen.orientation.lock` functionality
+
+## [5.1.5] - 2024-06-01
+
+- Refactor `artplayerPluginDanmuku` plugin
+- Add `artplayerPluginChromecast` plugin
+- Add `fullscreenError` event
+- Optimize double-click event: [#728](https://github.com/zhw2590582/ArtPlayer/pull/728)
+- Fix delayed display of `thumbnails`
+- Add `art.plugins.lock.state = true/false` for manually controlling `lock` state
+- Control bar no longer auto-hides when mouse is on it or when settings panel is open
+- Remove `screen.orientation.lock` due to compatibility issues
+- Fix `fullscreen` bug on mobile
+
+## [5.1.1] - 2024-01-11
+
+- Plugin functions now support both synchronous and asynchronous returns
+
+## [5.1.0] - 2023-12-23
+
+- Plugin functions now support async return
+- Player will no longer be destroyed after reaching error limit for playback address
+- Split language files, core no longer bundles multiple languages [Language Settings](https://artplayer.org/document/start/i18n.html)
+- Updating components now supports updating only specified fields [pull/549](https://github.com/zhw2590582/ArtPlayer/pull/549)
+- Add `muted` event triggered when mute state changes
+- Add `Artplayer.LOG_VERSION` global config to control whether to print player version (default `true`)
+- Add `Artplayer.USE_RAF` global config to control whether to use `requestAnimationFrame` (default `false`), currently for smooth progress bar effect
+- Remove default styles `margin:0;padding:0;` to avoid conflicts with third-party libraries
+- Subtitle line changed from `p` to `div` tag, with classname `art-subtitle-line`
+- On mobile, tapping video toggles control bar display
+- Remove `art.loop` interval playback feature (not commonly used)
+- Subtitle track now has `label` attribute to display subtitle names on mobile
+- Add utility functions `unescape`, `isBrowser`, `setStyleText`
+- Add `artplayerPluginMultipleSubtitles` plugin for merged subtitle files: [demo](https://www.artplayer.org/?libs=./uncompiled/artplayer-plugin-multiple-subtitles/index.js&example=multiple.subtitles)
+- Modify mini progress bar display
+
+## [5.0.9] - 2023-05-14
+
+- Fix `art.autoOrientation` style bug
+- Remove animation effect of player container
+
+## [5.0.8] - 2023-05-13
+
+- Fix conflict of `art.mini`
+- Fix animation bug of `art.aspectRatio`
+
+## [5.0.7] - 2023-05-13
+
+- Switching via `switchUrl` or `switchQuality` preserves existing adjustments such as `aspectRatio`, `playbackRate`, `flip`, `autoSize`
+- Remove the second `name` parameter from `switchUrl` and `switchQuality`
+- Add `isIOS13` utility to fix inaccurate `isMobile` detection on iOS 13+
+- `art.autoSize` and `art.autoHeight` are now methods: `art.autoSize()` and `art.autoHeight()`
+- Add new property `art.quality` for dynamically updating quality list
+- Fix incorrect `art.aspectRatio` property
+- Add `art.switch` setter property, same as `art.switchUrl` method
+
+## [5.0.6] - 2023-05-03
+
+- Fix style bug of settings panel
+
+## [5.0.5] - 2023-05-03
+
+- Add `heatmap` option to danmuku plugin for enabling heatmap (default: off)
+- Fix English subtitle line break style bug
+- Fix settings panel style bug
+- Remove unnecessary global properties
+- Remove `title` option (not useful now)
+- Remove `whitelist` option (not useful now)
+
+## [5.0.4] - 2023-04-27
+
+- Fix controller dropdown list style bug
+
+## [5.0.3] - 2023-04-26
+
+- Fix `event.pageY` value error in volume controller
+- Update build config, `artplayer.legacy.js` now compatible with IE 11
+
+## [5.0.2] - 2023-04-24
+
+- Fix style compatibility issue of control bar position
+
+## [5.0.1] - 2023-04-24
+
+- Fix web fullscreen style bug
+- Fix built-in settings text error
+
+## [5.0.0] - 2023-04-23
+
+- Rewrite volume controller
+- Fix incorrect progress drag angle on mobile
+- Rewrite `mini` mode, now video detaches from original container
+- All components (layers, controller, contextmenu, settings panel) support dynamic deletion and updating
+- Subtitle option adds `onVttLoad` for modifying vtt text before output
+- Rewrite all styles, add many `css` variables
+- Add `cssVar` option for initializing `css` variables
+- Add `cssVar` method for getting/setting `css` variables
+- `artplayer-plugin-hls-quality` adds `getResolution` function option for getting resolution text from level
+- Add `artplayer-plugin-dash-quality` plugin for adding Dash quality list to player
+- Fix `lock` and `loop` event issues
+- Add Russian `ru` and Indonesian `id` languages
+- Update `artplayer-plugin-control` for `artplayer@5.0.0`
+- Update `artplayer-plugin-dash-quality` for `artplayer@5.0.0`
+- Update `artplayer-plugin-hls-quality` for `artplayer@5.0.0`
+- Update `artplayer-plugin-danmuku` for `artplayer@5.0.0`
+
+## [4.6.2] - 2023-01-26
+
+- Default `Artplayer.PROGRESS_HEIGHT` changed to `6`
+- Add `artplayer-plugin-vtt-thumbnail` to generate video preview images from vtt subtitle files
+- Add `Artplayer.FULLSCREEN_WEB_IN_BODY` for whether to mount player to `document.body` in web fullscreen (default `false`)
+- Change subtitle offset adjustment to slider
+- Subtitle option adds `escape` (default `true`) for HTML escaping
+
+## [4.6.1] - 2023-01-11
+
+- Write brand new docs
+- Optimize `d.ts`
+- Remove redundant events
+- Optimize some styles
+- Add `i18n` option
+
+## [4.6.0] - 2022-12-31
+
+- Optimize style effects of control bar icons
+- Optimize style effects of settings panel
+- Fix incorrect `art.fullscreen` state detection
+- Add `artplayer-plugin-control` plugin to change control bar style
+
+## [4.5.12] - 2022-11-20
+
+- Fix `art.loop = []` display bug
+
+## [4.5.11] - 2022-11-06
+
+- Add `Artplayer.CONTEXTMENU` for controlling whether to show contextmenu (default `true`)
+- Whitelist function default `true` on mobile, all devices use player UI
+
+## [4.5.10] - 2022-11-05
+
+- Fix subtitle not showing in Firefox: [#pull/415](https://github.com/zhw2590582/ArtPlayer/pull/415)
+- Info popup supports clicking to select video property text
+
+## [4.5.9] - 2022-11-05
+
+- Add `art.type` property to get/set video type
+- Add `art.video` property to get video element
+- Add `artplayer-tool-iframe` plugin to control player inside iframe
+- Add `artplayer-plugin-hls-quality` plugin for adding Hls quality list
+- Add `Artplayer.PLAYBACK_RATE` for default playback rates `[0.5, 0.75, 1, 1.25, 1.5, 2]`
+- Add `Artplayer.ASPECT_RATIO` for default ratios `['default','4:3','16:9']`
+- Add `Artplayer.FLIP` for default flip options `['normal','horizontal','vertical']`
+- Add `Artplayer.PROGRESS_HEIGHT` (default: `4`)
+- Add `legacy.js` version for older browsers (larger size)
+- Remove `examples` dir, no longer provide Vue/React examples
+
+## [4.5.8] - 2022-10-09
+
+- Add Farsi language
+- Add `Artplayer.DEBUG` (default `false`) for debug logs
+- Add `art.setting.update()` for dynamic settings update
+- Optimize `artplayer.d.ts`
+
+## [4.5.7] - 2022-09-28
+
+- Add `Artplayer.VOLUME_STEP` for controlling volume step (default `0.1`)
+- Add `Artplayer.SEEK_STEP` for controlling seek step (default `5s`)
+- Fix some svg icons not showing on mobile
+- Fix desktop progress bar cannot click+drag simultaneously
+- Fix mobile progress bar cannot click+drag
+- Add `art.isRotate` property for detecting auto fullscreen rotation
+- Settings panel `range` adds `onChange` option for real-time values
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Slider',
+            tooltip: '5x',
+            range: [5, 1, 10, 0.1],
+            onChange: function (item) {
+                return item.range + 'x';
+            },
+        },
+    ],
+});
+```
+
+## [4.5.6] - 2022-09-19
+
+- Fix hls.js not working in Safari
+
+## [4.5.5] - 2022-09-19
+
+- Ad plugin adds `option.muted` for autoplay muted ads
+- Danmuku plugin exposes `art.plugins.artplayerPluginDanmuku.reset()` to clear display
+- Danmuku plugin exposes `art.plugins.artplayerPluginDanmuku.option` for current config
+- Fix subtitle bug in iOS fullscreen
+- Add Spanish `es`
+
+## [4.5.4] - 2022-08-01
+
+### Added
+
+- Add `Artplayer.AUTO_PLAYBACK_MIN` for min playback memory value (default `5s`)
+- Add `Artplayer.TOUCH_MOVE_RATIO` for mobile progress drag ratio (default `0.5`)
+- `option.thumbnails` adds optional `width`/`height`
+- Add `option.id` for unique playback memory identifier
+
+## [4.5.3] - 2022-07-13
+
+### Added
+
+- `url` option allows empty string for async `art.url`
+
+```js
+const art = new Artplayer({
+    url: '',
+    container: '.artplayer-app',
+});
+
+setTimeout(() => {
+    art.url = '/assets/sample/video.mp4';
+}, 1000);
+```
+
+- `art.play()` always returns Promise; `play` event is async
+
+```js
+const art = new Artplayer({
+    url: '/assets/sample/video.mp4',
+    container: '.artplayer-app',
+});
+
+art.on('ready', async () => {
+    try {
+        await art.play();
+        console.log('Play success');
+    } catch (error) {
+        console.log('Play failed', error.message);
+    }
+});
+```
+
+- Add `airplay` (only Safari)
+
+```js
+const art = new Artplayer({
+    url: '/assets/sample/video.mp4',
+    container: '.artplayer-app',
+    airplay: true,
+});
+```
+
+## [4.5.2] - 2022-06-22
+
+- Optimize auto-playback to allow user choice
+
+## [4.5.0] - 2022-06-21
+
+- Remove built-in ads
+- Add ad plugin
+
+## [4.4.7] - 2022-06-13
+
+- Support danmuku lib d.ts
+- Update deps
+
+## [4.4.6] - 2022-06-11
+
+- Add danmuku lib d.ts
+- Adjust subtitle font-size param
+- Optimize regex parsing of xml danmuku
+
+## [4.4.5] - 2022-06-02
+
+- Fix theme color missing in mini mode
+
+## [4.4.3] - 2022-05-26
+
+- Fix custom mounted input residual on danmuku destroy
+- Fix mini mode size calculation error
+
+## [4.4.2] - 2022-05-20
+
+- Remove UI init `video:loadedmetadata` event
+- Danmuku exposes `load` for switching sources
+- Add error icon after video load error limit
+- Fix multiple init of setting panel bug
+
+## [4.4.1] - 2022-05-17
+
+- Add `art.isInput`, when true control bar won’t auto-hide (e.g. typing danmuku)
+- Add `art.isLock`, when true on mobile prevents seek/play/pause
+- Fix fixed width bug of danmuku input box
+- Settings panel supports `range` and `onRange`
+- Add `isAndroid` and `isIOS` utils
+- Danmuku adds `lockTime`, `maxLength`, `minWidth`, `maxWidth`, `mount`, `beforeEmit`, `theme`
+
+## [4.4.0] - 2022-05-15
+
+- Settings panel supports `switch` and `onSwitch`
+- Danmuku plugin adds settings panel and send
+- Danmuku adds default mode and font-size
+- Danmuku font-size supports percentage of player
+- Fix flip icon missing
+- Player with focus won’t auto-hide control bar
+- Remove subtitle toggle button (manual config required)

CHANGELOG_CN.md

@@ -1,120 +0,0 @@
-# Changelog
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [Unreleased]
-
-## [4.5.3] - 2022-7-13
-
-### Added
-- `url` 选项允许传空字符串，可用于异步设置 `art.url`
-
-```js
-const art = new Artplayer({
-    url: '',
-    container: '.artplayer-app',
-});
-
-setTimeout(() => {
-    art.url = '/assets/sample/video.mp4';
-}, 1000);
-```
-
-- `art.play()` 方法统一返回 `Promise`, `play` 事件也改为异步触发
-
-```js
-const art = new Artplayer({
-    url: '/assets/sample/video.mp4',
-    container: '.artplayer-app',
-});
-
-art.on('ready', async () => {
-    try {
-        await art.play();
-        console.log('播放成功');
-    } catch (error) {
-        console.log('播放失败', error.message);
-    }
-})
-```
-
-- 新增 `airplay` (隔空播放) 功能，当前只在 Safari 下可用
-
-```js
-const art = new Artplayer({
-    url: '/assets/sample/video.mp4',
-    container: '.artplayer-app',
-    airplay: true,
-});
-```
-
-## [4.5.2] - 2022-6-22
-
-### Added
-- 优化自动回放功能，让用户自行选择
-
-## [4.5.0] - 2022-6-21
-
-### Added
-- 移除内置广告功能
-- 新增广告插件
-
-## [4.4.7] - 2022-6-13
-
-### Added
-- 兼容弹幕库 d.ts
-- 更新依赖库
-
-## [4.4.6] - 2022-6-11
-
-### Added
-- 添加弹幕库 d.ts
-- 调整字幕字体大小参数
-- 优化正则解析xml弹幕
-
-## [4.4.5] - 2022-6-2
-
-### Added
-- 修复迷你模式时，主题色缺失的bug
-
-## [4.4.3] - 2022-05-26
-
-### Added
-- 修复弹幕库销毁时，自定义挂载输入框的残留
-- 修复迷你模式的尺寸计算错误
-
-## [4.4.2] - 2022-05-20
-
-### Added
-- 移除播放器 UI 初始化的 video:loadedmetadata 事件
-- 弹幕库暴露 load 方法，用于切换弹幕源
-- 添加 error 图标，出现于视频加载错误达到上限后
-- 修复 setting 多次初始化时产生的 bug
-
-## [4.4.1] - 2022-05-17
-
-### Added
-- 添加 art.isInput 属性，当为 true 的时候不自动隐藏控制栏，如弹幕正在输入时
-- 添加 art.isLock 属性，在移动端当为 true 的时候不能操作快进、开始和暂停
-- 修复弹幕输入框的固定宽度 bug
-- 设置面板支持 range 和 onRange 选项
-- 添加 isAndroid 和 isIOS 工具函数
-- 弹幕库添加 lockTime 选项，可自定义输入框的锁定时间
-- 弹幕库添加 maxLength 选项，控制输入最大可输入字数
-- 弹幕库添加 minWidth 选项，控制输入框最小宽度
-- 弹幕库添加 maxWidth 选项，控制输入框最大宽度
-- 弹幕库添加 mount 选项，控制输入框自定义挂载位置
-- 弹幕库添加 beforeEmit 选项，控制弹幕发送前的校验
-- 弹幕库添加 theme 选项，控制输入框自定义挂载的主题色
-
-## [4.4.0] - 2022-05-15
-
-### Added
-- 设置面板支持 switch 和 onSwitch 选项
-- 弹幕库插件添加设置面板和弹幕发送
-- 弹幕库的选项添加默认模式和默认字号
-- 弹幕库字号支持按播放器的百分百
-- 修复翻转设置的图标缺失
-- 默认播放器获取了焦点后，不会自动隐藏控制栏
-- 删除字幕开关按钮，需要自行配置字幕开关

CLAUDE.md

@@ -0,0 +1,202 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+ArtPlayer.js is a modern, full-featured HTML5 video player. It's organized as a monorepo using Lerna with independent versioning.
+
+- **Homepage**: https://artplayer.org
+- **Online Editor**: https://artplayer.org (for testing examples)
+- **API Docs**: https://artplayer.org/document
+
+## Repository Structure
+
+```
+packages/
+  artplayer/              # Core player package
+  artplayer-plugin-*/     # 17+ plugins (danmuku, ads, chromecast, etc.)
+  artplayer-proxy-*/       # Canvas, Mediabunny proxies
+  artplayer-tool-*/       # iframe, thumbnail tools
+  artplayer-vitepress/    # Documentation site
+
+docs/                     # Documentation and demo site
+  assets/                  # Example assets and TypeScript demos
+  compiled/               # Built packages output
+  document/               # Generated API documentation
+  uncompiled/             # Development build output
+  test/                   # Browser test files
+
+scripts/                  # Build tooling
+  build.js                # Production build
+  dev.js                  # Development server
+  build-i18n.js           # I18n bundle builder
+  build-docs.js           # Documentation generator
+  build-llm.js            # LLMs.txt generator
+  plugin/create.js         # New plugin scaffolding
+```
+
+## Common Commands
+
+### Development
+```bash
+# Start dev server on port 8082 with hot reload
+npm run dev
+
+# Build for production (interactive prompt to select package)
+npm run build
+
+# Build all packages
+npm run build all
+
+# Build everything (packages, i18n, types, docs) + lint
+npm run build:all
+```
+
+### Code Quality
+```bash
+# Lint with auto-fix (covers packages, scripts, tests, docs assets)
+npm run lint
+```
+
+### Plugin Development
+```bash
+# Create new plugin from template
+npm run create:plugin <kebab-case-name>
+
+# Example:
+npm run create:plugin my-feature
+```
+
+### I18n
+```bash
+# Build i18n bundles for all languages
+npm run build:i18n
+```
+
+### TypeScript
+```bash
+# Generate TypeScript declaration files
+npm run build:ts
+```
+
+## Architecture
+
+### Core Player (`packages/artplayer`)
+
+The main `Artplayer` class extends `Emitter` and initializes sub-components:
+
+```javascript
+// Key components instantiated in constructor:
+this.template = new Template(this)    // DOM structure
+this.events = new Events(this)        // Event handling
+this.player = new Player(this)        // Video playback
+this.controls = new Control(this)     // Control bar
+this.layers = new Layer(this)         // Custom layers
+this.contextmenu = new Contextmenu(this)
+this.subtitle = new Subtitle(this)
+this.setting = new Setting(this)
+this.plugins = new Plugins(this)      // Plugin manager
+// ... and more
+```
+
+Source organization in `src/`:
+- `config/` - Default configuration values
+- `control/` - UI controls (play, progress, volume, etc.)
+- `events/` - Event handling (click, hover, resize, etc.)
+- `i18n/` - Localization files
+- `icons/` - SVG icons
+- `player/` - Video playback logic (hls, flv, dash, etc.)
+- `plugins/` - Built-in plugins
+- `setting/` - Settings panel components
+- `style/` - LESS stylesheets
+- `template.js` - HTML template generation
+- `utils/` - Utility functions
+
+### Plugin Architecture
+
+Plugins are functions that receive the player instance and options:
+
+```javascript
+// Template from scripts/plugin/template/src/index.js
+export default function artplayerPluginTemplate(option = {}) {
+  return (art) => {
+    // Plugin initialization
+    // Access: art.player, art.controls, art.template, etc.
+
+    return {
+      name: 'artplayerPluginTemplate',
+      // Expose methods to art.plugins['artplayerPluginTemplate']
+    }
+  }
+}
+```
+
+Plugin naming convention:
+- Package: `artplayer-plugin-<name>`
+- Global variable: `artplayerPlugin<Name>` (camelCase)
+- Exported function uses same name as global
+
+### Styling
+
+Uses LESS with inline imports:
+```javascript
+import style from './style/index.less?inline'
+```
+
+Styles are injected at runtime via `utils.setStyleText()`.
+
+### Build System
+
+Uses Vite via custom Node.js scripts:
+
+**Development** (`scripts/dev.js`):
+- Builds IIFE bundle to `docs/uncompiled/<package>/`
+- Serves `docs/` directory on port 8082
+- Watches source files for changes
+
+**Production** (`scripts/build.js`):
+- Builds 3 formats: UMD (`.js`), UMD legacy (`.legacy.js`), ESM (`.mjs`)
+- Outputs to `packages/<name>/dist/`
+- Copies to `docs/compiled/`
+
+### I18n System
+
+Language files in `packages/artplayer/src/i18n/`:
+- Base language: `zh-cn.js`
+- Additional languages: `en.js`, `fr.js`, etc.
+- Built as separate UMD/ESM bundles via `build-i18n.js`
+- Global naming: `artplayerI18n<Language>` (e.g., `artplayerI18nEn`)
+
+### Creating New Plugins
+
+The `npm run create:plugin <name>` command:
+1. Copies `scripts/plugin/template/` to `packages/artplayer-plugin-<name>/`
+2. Replaces placeholders in filenames and content
+3. Creates example file at `docs/assets/example/<name>.js`
+
+Plugin template structure:
+```
+src/
+  index.js       # Main plugin code
+  style.less     # Plugin styles
+package.json
+README.md
+types/
+  <name>.d.ts    # TypeScript declarations (optional)
+```
+
+### Utility Functions
+
+Core utilities in `packages/artplayer/src/utils/`:
+- `utils.js` - Common helpers (isMobile, isSafari, query, etc.)
+- `emitter.js` - Event emitter base class
+- `scheme.js` - Option validation schema
+
+## Development Notes
+
+- **Package manager**: Uses Yarn with Lerna
+- **Node version**: >= 20.0.0
+- **ESLint**: Uses @antfu/eslint-config
+- **Browser support**: Last 1 Chrome version (ES2020), legacy builds target ES2015
+- **UMD builds**: Always expose global even in AMD/RequireJS environments

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-This project uses `parcel` as a development and packaging tool, so there are few overall configuration options
+This project uses `vite` as a development and packaging tool, so there are few overall configuration options
 
 ## 1. Install dependencies
 

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Harvey Zack
+Copyright (c) 2018 Harvey Zhao
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -8,10 +8,13 @@
 </p>
 
 <p align="center">
-  <img src="https://img.shields.io/bundlephobia/minzip/artplayer" alt="Size">
+  <a href="https://www.npmjs.com/package/artplayer">
-  <img src="https://img.shields.io/npm/dm/artplayer.svg?sanitize=true" alt="Downloads">
+    <img src="https://img.shields.io/bundlephobia/minzip/artplayer" alt="Size">
-  <img src="https://img.shields.io/npm/v/artplayer.svg?sanitize=true" alt="Version">
+    <img src="https://img.shields.io/npm/dm/artplayer.svg?sanitize=true" alt="Downloads">
-  <img src="https://img.shields.io/npm/l/artplayer.svg?sanitize=true" alt="License">
+    <img src="https://img.shields.io/npm/v/artplayer.svg?sanitize=true" alt="Version">
+    <img src="https://img.shields.io/npm/l/artplayer.svg?sanitize=true" alt="License">
+    <img src="https://data.jsdelivr.com/v1/package/npm/artplayer/badge?style=rounded" alt="jsdelivr">
+  </a>
 </p>
 
 <p align="center">
@@ -20,20 +23,26 @@
   <span>・</span>
   <a href="https://artplayer.org/document">API Document</a>
   <span>・</span>
-  <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku">弹幕演示</a>
+  <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku">Danmuku</a>
+  <span>・</span>
+  <a href="./CHANGELOG.md">Changelog</a>
+  <span>・</span>
+  <a href="https://artplayer.org/llms.txt">🤖LLMs</a>
   <span>・</span>
 </p>
 
 <p align="center">
     <a href="https://artplayer.org">
-        <img src="./images/screenshot.png" alt="screenshot">
+        <img src="./images/screenshot.png" alt="screenshot" width="720">
     </a>
 </p>
 
 ## Home Page
+
 [https://artplayer.org](https://artplayer.org)
 
 ## Mobile Demo
+
 <img src="./images/qrcode.png" width="250">
 
 ## Features
@@ -54,8 +63,20 @@ Or install with `yarn`:
 $ yarn add artplayer
 ```
 
+Or install with `pnpm`:
+
+```bash
+$ pnpm add artplayer
+```
+
+Or install with `bun`:
+
+```bash
+$ bun add artplayer
+```
+
 ```js
-import Artplayer from 'artplayer';
+import Artplayer from 'artplayer'
 ```
 
 Or umd build also available:
@@ -83,15 +104,53 @@ Will expose the global variable to `window.Artplayer`.
 ```
 
 ```js
-var art = new Artplayer({
+let art = new Artplayer({
-    container: '.artplayer-app',
+  container: '.artplayer-app',
-    url: 'path/to/video.mp4',
+  url: 'path/to/video.mp4',
-});
+})
 ```
 
+## Plugins
+
+| Name | Describe | State |
+| :--- | :--- | :--- |
+| [artplayer-plugin-danmuku](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku) | Danmuku (bullet comment) system | <img src="https://img.shields.io/npm/v/artplayer-plugin-danmuku.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-danmuku.svg?sanitize=true"> |
+| [artplayer-plugin-hls-control](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js%0A./uncompiled/artplayer-plugin-hls-control/index.js&example=hls.control) | HLS quality control | <img src="https://img.shields.io/npm/v/artplayer-plugin-hls-control.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-hls-control.svg?sanitize=true"> |
+| [artplayer-plugin-dash-control](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control) | DASH quality control | <img src="https://img.shields.io/npm/v/artplayer-plugin-dash-control.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-dash-control.svg?sanitize=true"> |
+| [artplayer-plugin-vtt-thumbnail](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vtt-thumbnail/index.js&example=vtt.thumbnail) | VTT thumbnail preview | <img src="https://img.shields.io/npm/v/artplayer-plugin-vtt-thumbnail.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-vtt-thumbnail.svg?sanitize=true"> |
+| [artplayer-plugin-multiple-subtitles](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-multiple-subtitles/index.js&example=multiple.subtitles) | Multiple subtitles support | <img src="https://img.shields.io/npm/v/artplayer-plugin-multiple-subtitles.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-multiple-subtitles.svg?sanitize=true"> |
+| [artplayer-plugin-chromecast](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chromecast/index.js&example=chromecast) | Google Chromecast support | <img src="https://img.shields.io/npm/v/artplayer-plugin-chromecast.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-chromecast.svg?sanitize=true"> |
+| [artplayer-plugin-vast](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vast/index.js&example=vast) | VAST/VPAID advertising | <img src="https://img.shields.io/npm/v/artplayer-plugin-vast.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-vast.svg?sanitize=true"> |
+| [artplayer-plugin-chapter](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chapter/index.js&example=chapter) | Video chapters support | <img src="https://img.shields.io/npm/v/artplayer-plugin-chapter.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-chapter.svg?sanitize=true"> |
+| [artplayer-plugin-auto-thumbnail](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-auto-thumbnail/index.js&example=auto.thumbnail) | Auto-generated thumbnails | <img src="https://img.shields.io/npm/v/artplayer-plugin-auto-thumbnail.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-auto-thumbnail.svg?sanitize=true"> |
+| [artplayer-plugin-ambilight](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&example=ambilight) | Ambilight effect | <img src="https://img.shields.io/npm/v/artplayer-plugin-ambilight.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-ambilight.svg?sanitize=true"> |
+| [artplayer-plugin-document-pip](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-document-pip/index.js&example=document.pip) | Document Picture-in-Picture | <img src="https://img.shields.io/npm/v/artplayer-plugin-document-pip.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-document-pip.svg?sanitize=true"> |
+| [artplayer-plugin-audio-track](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-audio-track/index.js&example=audio.track) | Independent audio track playback | <img src="https://img.shields.io/npm/v/artplayer-plugin-audio-track.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-audio-track.svg?sanitize=true"> |
+| [artplayer-plugin-jassub](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-jassub/index.js&example=jassub) | ASS/SSA subtitle support | <img src="https://img.shields.io/npm/v/artplayer-plugin-jassub.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-jassub.svg?sanitize=true"> |
+| [artplayer-plugin-danmuku-mask](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js%0A./uncompiled/artplayer-plugin-danmuku-mask/index.js&example=danmuku.mask) | Danmuku masking (smart blocking) | <img src="https://img.shields.io/npm/v/artplayer-plugin-danmuku-mask.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-danmuku-mask.svg?sanitize=true"> |
+| [artplayer-plugin-asr](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-asr/index.js&example=asr) | Automatic Speech Recognition | <img src="https://img.shields.io/npm/v/artplayer-plugin-asr.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-asr.svg?sanitize=true"> |
+| [artplayer-plugin-ads](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads) | Video advertising plugin | WIP |
+
+## Libraries
+
+| Name | Describe | State |
+| :--- | :--- | :--- |
+| [hls.js](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js&example=hls) | HLS client | <img src="https://img.shields.io/npm/v/hls.js.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/hls.js.svg?sanitize=true"> |
+| [dash.js](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js&example=dash) | MPEG DASH player | <img src="https://img.shields.io/npm/v/dashjs.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/dashjs.svg?sanitize=true"> |
+| [flv.js](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js&example=flv) | HTML5 FLV Player | <img src="https://img.shields.io/npm/v/flv.js.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/flv.js.svg?sanitize=true"> |
+| [mpegts.js](https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.min.js&example=mpegts) | MPEG-TS/FLV Player | <img src="https://img.shields.io/npm/v/mpegts.js.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/mpegts.js.svg?sanitize=true"> |
+| [webtorrent.js](https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/webtorrent@1/webtorrent.min.js&example=webtorrent) | Streaming torrent client | <img src="https://img.shields.io/npm/v/webtorrent.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/webtorrent.svg?sanitize=true"> |
+
+## Proxys
+
+| Name | Describe | State |
+| :--- | :--- | :--- |
+| [Canvas](https://artplayer.org/?libs=./uncompiled/artplayer-proxy-canvas/index.js&example=canvas) | Proxy video to canvas | <img src="https://img.shields.io/npm/v/artplayer-proxy-canvas.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-proxy-canvas.svg?sanitize=true"> |
+| [Mediabunny](https://artplayer.org/?libs=./uncompiled/artplayer-proxy-mediabunny/index.js&example=mediabunny) | Mediabunny proxy | <img src="https://img.shields.io/npm/v/artplayer-proxy-mediabunny.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-proxy-mediabunny.svg?sanitize=true"> |
+
 ## Changelog
 
-[CHANGELOG_CN.md](./CHANGELOG_CN.md)
+[CHANGELOG.md](./CHANGELOG.md)
 
 ## Contributing
 
@@ -103,8 +162,8 @@ We accept donations through these channels:
 
 ![pay](./images/pay.png)
 
--   [Patreon](https://www.patreon.com/artplayer)
+- [Patreon](https://www.patreon.com/artplayer)
--   [Paypal](https://www.paypal.me/harveyzack)
+- [Paypal](https://www.paypal.me/harveyzack)
 
 ## QQ Group
 
@@ -112,4 +171,4 @@ We accept donations through these channels:
 
 ## License
 
-MIT © Harvey Zack
+MIT © Harvey Zhao

docs/CNAME

@@ -1 +1 @@
-artplayer.org
+github.artplayer.org

docs/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,420 @@
+# Verified site component notices
+
+Frozen source identities and complete upstream notice texts for selected site components and font references. Unresolved font/media and embedded provenance gates remain open; this inventory is not publication clearance.
+
+Generated by yarn build:site-notices. Runtime asset URLs are retained; reviewed local patches are identified below.
+
+## vconsole 3.15.0
+
+Source: https://registry.npmjs.org/vconsole/-/vconsole-3.15.0.tgz
+
+The original 3.15.0 LICENSE is preserved unchanged; its missing MIT body is supplemented separately using the MIT text explicitly referenced by upstream. Exact reconstruction from the pinned source and lockfile establishes eight bundled package dependencies and webpack bootstrap; their complete notices and attribution are distributed below. ArtPlayer retains its reproducible lifecycle patch and the original script URL/UMD/CSS contracts.
+
+Included component: @babel/runtime 7.17.9
+
+Source: https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz
+
+Included component: core-js 3.21.1
+
+Source: https://registry.npmjs.org/core-js/-/core-js-3.21.1.tgz
+
+Included component: copy-text-to-clipboard 3.0.1
+
+Source: https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.0.1.tgz
+
+Included component: mutation-observer 1.0.3
+
+Source: https://registry.npmjs.org/mutation-observer/-/mutation-observer-1.0.3.tgz
+
+Included component: svelte 3.47.0
+
+Source: https://registry.npmjs.org/svelte/-/svelte-3.47.0.tgz
+
+Included component: regenerator-runtime 0.13.9
+
+Source: https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz
+
+Included component: style-loader 3.3.1
+
+Source: https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz
+
+Included component: css-loader 6.7.1
+
+Source: https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz
+
+Included component: webpack 5.72.0
+
+Source: https://registry.npmjs.org/webpack/-/webpack-5.72.0.tgz
+
+- licenses/vconsole/LICENSE
+- licenses/vconsole/babel-runtime/LICENSE
+- licenses/vconsole/core-js/LICENSE
+- licenses/vconsole/copy-text-to-clipboard/LICENSE
+- licenses/vconsole/mutation-observer/LICENSE
+- licenses/vconsole/svelte/LICENSE
+- licenses/vconsole/regenerator-runtime/LICENSE
+- licenses/vconsole/style-loader/LICENSE
+- licenses/vconsole/css-loader/LICENSE
+- licenses/vconsole/webpack/LICENSE
+- licenses/vconsole/MIT-LICENSE
+- licenses/vconsole/ATTRIBUTION.md
+
+## monaco-editor 0.30.1
+
+Source: https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.30.1.tgz
+
+The complete upstream Monaco LICENSE/ThirdPartyNotices are retained. The unmodified bundled Codicons font exactly matches @vscode/codicons 0.0.26; its historical README, CC BY 4.0 content license, MIT code license and added attribution are distributed below. Other site assets remain subject to their separate provenance reviews.
+
+Included component: @vscode/codicons 0.0.26
+
+Source: https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.26.tgz
+
+Included component: typescript (Monaco worker) 4.4.4
+
+Source: https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz
+
+Included component: jsonc-parser 3.0.0
+
+Source: https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz
+
+Included component: vscode-css-languageservice 5.1.8
+
+Source: https://registry.npmjs.org/vscode-css-languageservice/-/vscode-css-languageservice-5.1.8.tgz
+
+Included component: vscode-html-languageservice 4.1.1
+
+Source: https://registry.npmjs.org/vscode-html-languageservice/-/vscode-html-languageservice-4.1.1.tgz
+
+Included component: vscode-json-languageservice 4.1.9
+
+Source: https://registry.npmjs.org/vscode-json-languageservice/-/vscode-json-languageservice-4.1.9.tgz
+
+Included component: vscode-languageserver-textdocument 1.0.2
+
+Source: https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.2.tgz
+
+Included component: vscode-languageserver-types 3.16.0
+
+Source: https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz
+
+Included component: vscode-uri 3.0.2
+
+Source: https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.2.tgz
+
+Included component: js-beautify (Monaco HTML embedded) embedded sources in vscode-html-languageservice 4.1.1
+
+Source: https://registry.npmjs.org/vscode-html-languageservice/-/vscode-html-languageservice-4.1.1.tgz
+
+Included component: glob-to-regexp (Monaco JSON fork) embedded source in vscode-json-languageservice 4.1.9
+
+Source: https://registry.npmjs.org/vscode-json-languageservice/-/vscode-json-languageservice-4.1.9.tgz
+
+Included component: dompurify (Monaco core) 2.3.1
+
+Source: https://registry.npmjs.org/dompurify/-/dompurify-2.3.1.tgz
+
+Included component: marked (Monaco core) 3.0.2
+
+Source: https://registry.npmjs.org/marked/-/marked-3.0.2.tgz
+
+Included component: nodejs path (Monaco core) 14.16.0
+
+Source: https://github.com/nodejs/node/blob/bd60e93357a118204ea238d94e7a9e4209d93062/lib/path.js
+
+Included component: WinJS-derived DOM helpers (Monaco core) unversioned adaptation; reference WinJS 4.4.5
+
+Source: https://github.com/winjs/winjs/tree/4329b1133b243d9ded3b5a1f98d096ee8e80e889
+
+Included component: Unicode data (Monaco core) mixed historical inputs: 10.0.0d5, 13.0 drafts, Emoji 13.1
+
+Source: https://github.com/alexdima/unicode-utils
+
+- licenses/monaco-editor/LICENSE
+- licenses/monaco-editor/ThirdPartyNotices.txt
+- licenses/monaco-editor/codicons/LICENSE
+- licenses/monaco-editor/codicons/LICENSE-CODE
+- licenses/monaco-editor/codicons/README.md
+- licenses/monaco-editor/codicons/ATTRIBUTION.md
+- licenses/monaco-editor/typescript/LICENSE.txt
+- licenses/monaco-editor/typescript/CopyrightNotice.txt
+- licenses/monaco-editor/typescript/ThirdPartyNoticeText.txt
+- licenses/monaco-editor/typescript/ATTRIBUTION.md
+- licenses/monaco-editor/language-services/jsonc-parser/LICENSE.md
+- licenses/monaco-editor/language-services/vscode-css-languageservice/LICENSE.md
+- licenses/monaco-editor/language-services/vscode-html-languageservice/LICENSE.md
+- licenses/monaco-editor/language-services/vscode-html-languageservice/thirdpartynotices.txt
+- licenses/monaco-editor/language-services/vscode-json-languageservice/LICENSE.md
+- licenses/monaco-editor/language-services/vscode-languageserver-textdocument/License.txt
+- licenses/monaco-editor/language-services/vscode-languageserver-textdocument/thirdpartynotices.txt
+- licenses/monaco-editor/language-services/vscode-languageserver-types/License.txt
+- licenses/monaco-editor/language-services/vscode-uri/LICENSE.md
+- licenses/monaco-editor/language-services/beautify-css-NOTICE.txt
+- licenses/monaco-editor/language-services/beautify-html-NOTICE.txt
+- licenses/monaco-editor/language-services/ATTRIBUTION.md
+- licenses/monaco-editor/core-origins/DOMPurify-LICENSE
+- licenses/monaco-editor/core-origins/marked-LICENSE
+- licenses/monaco-editor/core-origins/marked-vscode-license.txt
+- licenses/monaco-editor/core-origins/ATTRIBUTION.md
+- licenses/monaco-editor/core-path/ATTRIBUTION.md
+- licenses/monaco-editor/core-dom/LICENSE.txt
+- licenses/monaco-editor/core-dom/ATTRIBUTION.md
+- licenses/monaco-editor/core-unicode/LICENSE.txt
+- licenses/monaco-editor/core-unicode/ATTRIBUTION.md
+
+## console legacy-vendor-with-TS-adapter
+
+Source: https://github.com/zhw2590582/ArtPlayer/blob/5d6b2f22bc75213ac97cff0bcffa4a1ce2bc786c/docs/assets/js/console.js
+
+The 100 third-party Parcel modules and loader have exact source reproduction. The two owned adapter modules are built from TypeScript. Preserved notices also cover two embedded license headers, all 17 react-inspector external source-map members, and all seven HTML tokenizer sources from its fixed Git dependency. The identified embedded-source and attribution review is complete for this frozen vendor boundary. Source records bind each component to its original notices; this inventory is not publication clearance. The original full lockfile and historical online Closure service are not recovered. Modified replicator and Emotion/Stylis copies retain upstream author licenses; the original Emotion online Closure stage is not claimed to be reproducible. MurmurHash credits include Gary Court and Austin Appleby. The customStringify snippet matches Stack Overflow answer revision 5 under CC BY-SA 4.0; its separate attribution, source and full license are supplied. This is a mixed-license bundle, not MIT-only.
+
+Included component: console-feed 3.2.2
+
+Source: https://registry.npmjs.org/console-feed/-/console-feed-3.2.2.tgz
+
+Included component: react 17.0.2
+
+Source: https://registry.npmjs.org/react/-/react-17.0.2.tgz
+
+Included component: react-dom 17.0.2
+
+Source: https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz
+
+Included component: scheduler 0.20.2
+
+Source: https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz
+
+Included component: object-assign 4.1.1
+
+Source: https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz
+
+Included component: react-is 16.13.1
+
+Source: https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz
+
+Included component: prop-types 15.7.2
+
+Source: https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz
+
+Included component: shallowequal 1.1.0
+
+Source: https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz
+
+Included component: process 0.11.10
+
+Source: https://registry.npmjs.org/process/-/process-0.11.10.tgz
+
+Included component: hoist-non-react-statics 3.3.2
+
+Source: https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz
+
+Included component: is-dom 1.1.0
+
+Source: https://registry.npmjs.org/is-dom/-/is-dom-1.1.0.tgz
+
+Included component: is-object 1.0.2
+
+Source: https://registry.npmjs.org/is-object/-/is-object-1.0.2.tgz
+
+Included component: is-window 1.0.2
+
+Source: https://registry.npmjs.org/is-window/-/is-window-1.0.2.tgz
+
+Included component: linkifyjs 2.1.9
+
+Source: https://registry.npmjs.org/linkifyjs/-/linkifyjs-2.1.9.tgz
+
+Included component: @emotion/core 10.3.0
+
+Source: https://registry.npmjs.org/@emotion/core/-/core-10.3.0.tgz
+
+Included component: @emotion/css 10.0.27
+
+Source: https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz
+
+Included component: @emotion/cache 10.0.29
+
+Source: https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz
+
+Included component: @emotion/styled 10.0.27
+
+Source: https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz
+
+Included component: @emotion/styled-base 10.3.0
+
+Source: https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.3.0.tgz
+
+Included component: emotion-theming 10.3.0
+
+Source: https://registry.npmjs.org/emotion-theming/-/emotion-theming-10.3.0.tgz
+
+Included component: styled-components 5.3.3
+
+Source: https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz
+
+Included component: @babel/runtime 7.16.3
+
+Source: https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz
+
+Included component: @emotion/sheet 0.9.4
+
+Source: https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz
+
+Included component: @emotion/stylis 0.8.5
+
+Source: https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz
+
+Included component: @emotion/weak-memoize 0.2.5
+
+Source: https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz
+
+Included component: @emotion/utils 0.11.3
+
+Source: https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz
+
+Included component: @emotion/hash 0.8.0
+
+Source: https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz
+
+Included component: @emotion/unitless 0.7.5
+
+Source: https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz
+
+Included component: @emotion/memoize 0.7.4
+
+Source: https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz
+
+Included component: @emotion/serialize 0.11.16
+
+Source: https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz
+
+Included component: @emotion/is-prop-valid 0.8.8
+
+Source: https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz
+
+Included component: react-inspector 5.1.1
+
+Source: https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz
+
+Included component: parcel-bundler 1.12.5
+
+Source: https://registry.npmjs.org/parcel-bundler/-/parcel-bundler-1.12.5.tgz
+
+Included component: chromium-string-utils embedded in console-feed-3.2.2
+
+Source: https://registry.npmjs.org/console-feed/-/console-feed-3.2.2.tgz
+
+Included component: stylis-rule-sheet embedded in styled-components-5.3.3
+
+Source: https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz
+
+Included component: @babel/runtime (react-inspector embedded) 7.13.10
+
+Source: https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz
+
+Included component: regenerator-runtime 0.13.7
+
+Source: https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz
+
+Included component: simple-html-tokenizer git-04799f4638ec5ed903a4e5aa6e832269fa59be6b
+
+Source: https://api.github.com/repos/nfrasser/simple-html-tokenizer/tarball/04799f4638ec5ed903a4e5aa6e832269fa59be6b
+
+Included component: replicator (console-feed fork) modified; upstream 1.0.x license
+
+Source: https://registry.npmjs.org/replicator/-/replicator-1.0.1.tgz
+
+Included component: stylis (Emotion fork) 3.5.4-derived
+
+Source: https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz
+
+Included component: murmurhash-js (Gary Court) license commit 23dc2e7
+
+Source: https://github.com/garycourt/murmurhash-js/blob/23dc2e7008582ca3ef69d8623f02bba4c8dd05e5/README.md
+
+Included component: murmurhash2 (Austin Appleby) 61a0530
+
+Source: https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp
+
+Included component: stackoverflow-custom-stringify answer 48254637 revision 5 (CC BY-SA 4.0)
+
+Source: https://api.stackexchange.com/2.3/revisions/8FD5F52A-B16F-4C66-AB48-830EABB36CC0?site=stackoverflow&filter=withbody
+
+Included component: react-pure-render (shallowequal origin) source commit 729cdbd
+
+Source: https://github.com/gaearon/react-pure-render/blob/729cdbd51df00068816376544738cc1fc4720cf2/LICENSE
+
+- licenses/console/console-feed/console-feed-3.2.2-LICENSE
+- licenses/console/react/react-17.0.2-LICENSE
+- licenses/console/react-dom/react-dom-17.0.2-LICENSE
+- licenses/console/scheduler/scheduler-0.20.2-LICENSE
+- licenses/console/object-assign/object-assign-4.1.1-license
+- licenses/console/react-is/react-is-16.13.1-LICENSE
+- licenses/console/prop-types/prop-types-15.7.2-LICENSE
+- licenses/console/shallowequal/shallowequal-1.1.0-LICENSE
+- licenses/console/process/process-0.11.10-LICENSE
+- licenses/console/hoist-non-react-statics/hoist-non-react-statics-3.3.2-LICENSE.md
+- licenses/console/is-dom/is-dom-1.1.0-LICENSE
+- licenses/console/is-object/is-object-1.0.2-LICENSE
+- licenses/console/is-window/is-window-1.0.2-LICENSE
+- licenses/console/linkifyjs/linkifyjs-2.1.9-LICENSE
+- licenses/console/emotion-core/emotion-core-10.3.0-LICENSE
+- licenses/console/emotion-css/emotion-css-10.0.27-LICENSE
+- licenses/console/emotion-cache/emotion-cache-10.0.29-LICENSE
+- licenses/console/emotion-styled/emotion-styled-10.0.27-LICENSE
+- licenses/console/emotion-styled-base/emotion-styled-base-10.3.0-LICENSE
+- licenses/console/emotion-theming/emotion-theming-10.3.0-LICENSE
+- licenses/console/styled-components/styled-components-5.3.3-UPSTREAM-LICENSE
+- licenses/console/babel-runtime/babel-runtime-7.16.3-LICENSE
+- licenses/console/emotion-sheet/emotion-sheet-0.9.4-LICENSE
+- licenses/console/emotion-stylis/emotion-stylis-0.8.5-LICENSE
+- licenses/console/emotion-weak-memoize/emotion-weak-memoize-0.2.5-LICENSE
+- licenses/console/emotion-utils/emotion-utils-0.11.3-LICENSE
+- licenses/console/emotion-hash/emotion-hash-0.8.0-LICENSE
+- licenses/console/emotion-unitless/emotion-unitless-0.7.5-LICENSE
+- licenses/console/emotion-memoize/emotion-memoize-0.7.4-LICENSE
+- licenses/console/emotion-serialize/emotion-serialize-0.11.16-LICENSE
+- licenses/console/emotion-is-prop-valid/emotion-is-prop-valid-0.8.8-LICENSE
+- licenses/console/react-inspector/react-inspector-5.1.1-LICENSE
+- licenses/console/parcel-bundler/parcel-bundler-1.12.5-LICENSE
+- licenses/console/chromium-string-utils/LICENSE
+- licenses/console/stylis-rule-sheet/LICENSE
+- licenses/console/react-inspector-babel/LICENSE
+- licenses/console/regenerator-runtime/LICENSE
+- licenses/console/simple-html-tokenizer/LICENSE
+- licenses/console/replicator/LICENSE
+- licenses/console/stylis/LICENSE
+- licenses/console/murmurhash-js/README.md
+- licenses/console/murmurhash2/PUBLIC-DOMAIN.txt
+- licenses/console/stackoverflow/LICENSE
+- licenses/console/stackoverflow/SOURCE.js
+- licenses/console/stackoverflow/ATTRIBUTION.md
+- licenses/console/react-pure-render/LICENSE
+- licenses/console/react-pure-render/ATTRIBUTION.md
+
+## jassub-fonts selected historical references
+
+Source: https://github.com/ThaUnknown/jassub/tree/25d1ea7ca1f827dbed2c8ea539c9bc917ccbfab1
+
+Four selected font families only. CHAWP matches author bytes; other full notice references have explicit font-table differences. Other fonts and complete redistribution provenance remain open under SITE-07/VENDOR-05.
+
+Included component: Liberation Sans 2.00.5 reference
+
+Source: https://github.com/liberationfonts/liberation-fonts/files/2926169/liberation-fonts-ttf-2.00.5.tar.gz
+
+Included component: Averia Sans Libre Light 1.002 reference
+
+Source: https://github.com/google/fonts/blob/0f81bc90462b862dbfe3d16403ff284a68473833/ofl/averiasanslibre/AveriaSansLibre-Light.ttf
+
+Included component: Lato Regular 2.015 reference
+
+Source: https://github.com/google/fonts/blob/f3b885d5590e307e02542f1a724cec55d567fdaa/ofl/lato/Lato-Regular.ttf
+
+Included component: CHAWP 1.000 exact bytes
+
+Source: https://github.com/awp/chawp/blob/3c4f6317bebd6783c8d0db3bc9206aa62d602f90/chawp.otf
+
+- licenses/jassub-fonts/liberation/OFL.txt
+- licenses/jassub-fonts/averia-sans/OFL.txt
+- licenses/jassub-fonts/lato/OFL.txt
+- licenses/jassub-fonts/chawp/OFL.txt
+- licenses/jassub-fonts/ATTRIBUTION.md

docs/ads.txt

@@ -0,0 +1 @@
+google.com, pub-8579453810848662, DIRECT, f08c47fec0942fa0

docs/assets/@mediapipe/selfie_segmentation/README.md

@@ -0,0 +1,10 @@
+# MediaPipe JavaScript Solutions
+
+MediaPipe offers out of the box solutions to use our ML technology with live and streaming media.
+
+Visit us as [mediapipe.dev]()
+
+See live demos of our JavaScript solutions at [code.mediapipe.dev/codepen]()
+
+For more information on each of the solutions and how to use them, visit https://google.github.io/mediapipe/getting_started/javascript.
+

docs/assets/@mediapipe/selfie_segmentation/index.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @fileoverview Declarations for the face tracking API.
+ */
+
+/**
+ * Version number of this package.
+ */
+export const VERSION: string;
+
+/**
+ * We support several ways to get image inputs.
+ */
+export type InputImage = HTMLVideoElement | HTMLImageElement | HTMLCanvasElement;
+
+/**
+ * Legal inputs.
+ */
+export interface InputMap {
+  image: InputImage;
+}
+
+/**
+ * GpuBuffers should all be compatible with Canvas' `drawImage`
+ */
+type GpuBuffer = HTMLCanvasElement | HTMLImageElement | ImageBitmap;
+
+/**
+ * Possible results from SelfieSegmentation.
+ */
+export interface Results {
+  image: GpuBuffer;
+  segmentationMask: GpuBuffer;
+}
+
+/**
+ * Configurable options for SelfieSegmentation.
+ */
+export interface Options {
+  selfieMode?: boolean;
+  modelSelection?: number;
+}
+
+/**
+ * Listener for any results from SelfieSegmentation.
+ */
+export type ResultsListener = (results: Results) => (Promise<void>|void);
+
+/**
+ * Contains all of the setup options to drive the face solution.
+ */
+export interface SelfieSegmentationConfig {
+  locateFile?: (path: string, prefix?: string) => string;
+}
+
+/**
+ * Declares the interface of SelfieSegmentation.
+ */
+declare interface SelfieSegmentationInterface {
+  close(): Promise<void>;
+  onResults(listener: ResultsListener): void;
+  initialize(): Promise<void>;
+  reset(): void;
+  send(inputs: InputMap): Promise<void>;
+  setOptions(options: Options): void;
+}
+
+/**
+ * Encapsulates the entire SelfieSegmentation solution. All that is needed from the
+ * developer is the source of the image data. The user will call `send`
+ * repeatedly and if a face is detected, then the user can receive callbacks
+ * with this metadata.
+ */
+export declare class SelfieSegmentation implements SelfieSegmentationInterface {
+  constructor(config?: SelfieSegmentationConfig);
+
+  /**
+   * Shuts down the object. Call before creating a new instance.
+   */
+  close(): Promise<void>;
+
+  /**
+   * Registers a single callback that will carry any results that occur
+   * after calling Send().
+   */
+  onResults(listener: ResultsListener): void;
+
+  /**
+   * Initializes the solution. This includes loading ML models and mediapipe
+   * configurations, as well as setting up potential listeners for metadata. If
+   * `initialize` is not called manually, then it will be called the first time
+   * the developer calls `send`.
+   */
+  initialize(): Promise<void>;
+
+  /**
+   * Tells the graph to restart before the next frame is sent.
+   */
+  reset(): void;
+
+  /**
+   * Processes a single frame of data, which depends on the options sent to the
+   * constructor.
+   */
+  send(inputs: InputMap): Promise<void>;
+
+  /**
+   * Adjusts options in the solution. This may trigger a graph reload the next
+   * time the graph tries to run.
+   */
+  setOptions(options: Options): void;
+}

docs/assets/@mediapipe/selfie_segmentation/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@mediapipe/selfie_segmentation",
+  "version": "0.1.1675465747",
+  "description": "Mediapipe Selfie Segmentation Solution",
+  "main": "selfie_segmentation.js",
+  "module": "selfie_segmentation.js",
+  "jsdelivr": "selfie_segmentation.js",
+  "unpkg": "selfie_segmentation.js",
+  "types": "index.d.ts",
+  "author": "mhays@google.com",
+  "license": "Apache-2.0",
+  "homepage": "https://google.github.io/mediapipe/solutions/selfie_segmentation",
+  "keywords": [ "AR", "ML", "Augmented" ],
+  "devDependencies": {
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+  },
+  "browser": {
+    "node-fetch": false,
+    "util": false,
+    "crypto": false
+  },
+  "sideEffects" : []
+}

docs/assets/@mediapipe/selfie_segmentation/selfie_segmentation.js

@@ -0,0 +1,93 @@
+(function(){/*
+
+ Copyright The Closure Library Authors.
+ SPDX-License-Identifier: Apache-2.0
+*/
+'use strict';var x;function aa(a){var b=0;return function(){return b<a.length?{done:!1,value:a[b++]}:{done:!0}}}var ba="function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){if(a==Array.prototype||a==Object.prototype)return a;a[b]=c.value;return a};
+function ca(a){a=["object"==typeof globalThis&&globalThis,a,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global];for(var b=0;b<a.length;++b){var c=a[b];if(c&&c.Math==Math)return c}throw Error("Cannot find global object");}var y=ca(this);function z(a,b){if(b)a:{var c=y;a=a.split(".");for(var d=0;d<a.length-1;d++){var e=a[d];if(!(e in c))break a;c=c[e]}a=a[a.length-1];d=c[a];b=b(d);b!=d&&null!=b&&ba(c,a,{configurable:!0,writable:!0,value:b})}}
+z("Symbol",function(a){function b(g){if(this instanceof b)throw new TypeError("Symbol is not a constructor");return new c(d+(g||"")+"_"+e++,g)}function c(g,f){this.h=g;ba(this,"description",{configurable:!0,writable:!0,value:f})}if(a)return a;c.prototype.toString=function(){return this.h};var d="jscomp_symbol_"+(1E9*Math.random()>>>0)+"_",e=0;return b});
+z("Symbol.iterator",function(a){if(a)return a;a=Symbol("Symbol.iterator");for(var b="Array Int8Array Uint8Array Uint8ClampedArray Int16Array Uint16Array Int32Array Uint32Array Float32Array Float64Array".split(" "),c=0;c<b.length;c++){var d=y[b[c]];"function"===typeof d&&"function"!=typeof d.prototype[a]&&ba(d.prototype,a,{configurable:!0,writable:!0,value:function(){return da(aa(this))}})}return a});function da(a){a={next:a};a[Symbol.iterator]=function(){return this};return a}
+function A(a){var b="undefined"!=typeof Symbol&&Symbol.iterator&&a[Symbol.iterator];return b?b.call(a):{next:aa(a)}}function ea(a){if(!(a instanceof Array)){a=A(a);for(var b,c=[];!(b=a.next()).done;)c.push(b.value);a=c}return a}var fa="function"==typeof Object.assign?Object.assign:function(a,b){for(var c=1;c<arguments.length;c++){var d=arguments[c];if(d)for(var e in d)Object.prototype.hasOwnProperty.call(d,e)&&(a[e]=d[e])}return a};z("Object.assign",function(a){return a||fa});
+var ha="function"==typeof Object.create?Object.create:function(a){function b(){}b.prototype=a;return new b},ia;if("function"==typeof Object.setPrototypeOf)ia=Object.setPrototypeOf;else{var ja;a:{var ka={a:!0},la={};try{la.__proto__=ka;ja=la.a;break a}catch(a){}ja=!1}ia=ja?function(a,b){a.__proto__=b;if(a.__proto__!==b)throw new TypeError(a+" is not extensible");return a}:null}var ma=ia;
+function na(a,b){a.prototype=ha(b.prototype);a.prototype.constructor=a;if(ma)ma(a,b);else for(var c in b)if("prototype"!=c)if(Object.defineProperties){var d=Object.getOwnPropertyDescriptor(b,c);d&&Object.defineProperty(a,c,d)}else a[c]=b[c];a.za=b.prototype}function oa(){this.m=!1;this.j=null;this.i=void 0;this.h=1;this.v=this.s=0;this.l=null}function pa(a){if(a.m)throw new TypeError("Generator is already running");a.m=!0}oa.prototype.u=function(a){this.i=a};
+function qa(a,b){a.l={ma:b,na:!0};a.h=a.s||a.v}oa.prototype.return=function(a){this.l={return:a};this.h=this.v};function D(a,b,c){a.h=c;return{value:b}}function ra(a){this.h=new oa;this.i=a}function sa(a,b){pa(a.h);var c=a.h.j;if(c)return ta(a,"return"in c?c["return"]:function(d){return{value:d,done:!0}},b,a.h.return);a.h.return(b);return ua(a)}
+function ta(a,b,c,d){try{var e=b.call(a.h.j,c);if(!(e instanceof Object))throw new TypeError("Iterator result "+e+" is not an object");if(!e.done)return a.h.m=!1,e;var g=e.value}catch(f){return a.h.j=null,qa(a.h,f),ua(a)}a.h.j=null;d.call(a.h,g);return ua(a)}function ua(a){for(;a.h.h;)try{var b=a.i(a.h);if(b)return a.h.m=!1,{value:b.value,done:!1}}catch(c){a.h.i=void 0,qa(a.h,c)}a.h.m=!1;if(a.h.l){b=a.h.l;a.h.l=null;if(b.na)throw b.ma;return{value:b.return,done:!0}}return{value:void 0,done:!0}}
+function va(a){this.next=function(b){pa(a.h);a.h.j?b=ta(a,a.h.j.next,b,a.h.u):(a.h.u(b),b=ua(a));return b};this.throw=function(b){pa(a.h);a.h.j?b=ta(a,a.h.j["throw"],b,a.h.u):(qa(a.h,b),b=ua(a));return b};this.return=function(b){return sa(a,b)};this[Symbol.iterator]=function(){return this}}function wa(a){function b(d){return a.next(d)}function c(d){return a.throw(d)}return new Promise(function(d,e){function g(f){f.done?d(f.value):Promise.resolve(f.value).then(b,c).then(g,e)}g(a.next())})}
+function E(a){return wa(new va(new ra(a)))}
+z("Promise",function(a){function b(f){this.i=0;this.j=void 0;this.h=[];this.u=!1;var h=this.l();try{f(h.resolve,h.reject)}catch(k){h.reject(k)}}function c(){this.h=null}function d(f){return f instanceof b?f:new b(function(h){h(f)})}if(a)return a;c.prototype.i=function(f){if(null==this.h){this.h=[];var h=this;this.j(function(){h.m()})}this.h.push(f)};var e=y.setTimeout;c.prototype.j=function(f){e(f,0)};c.prototype.m=function(){for(;this.h&&this.h.length;){var f=this.h;this.h=[];for(var h=0;h<f.length;++h){var k=
+f[h];f[h]=null;try{k()}catch(l){this.l(l)}}}this.h=null};c.prototype.l=function(f){this.j(function(){throw f;})};b.prototype.l=function(){function f(l){return function(m){k||(k=!0,l.call(h,m))}}var h=this,k=!1;return{resolve:f(this.I),reject:f(this.m)}};b.prototype.I=function(f){if(f===this)this.m(new TypeError("A Promise cannot resolve to itself"));else if(f instanceof b)this.L(f);else{a:switch(typeof f){case "object":var h=null!=f;break a;case "function":h=!0;break a;default:h=!1}h?this.F(f):this.s(f)}};
+b.prototype.F=function(f){var h=void 0;try{h=f.then}catch(k){this.m(k);return}"function"==typeof h?this.M(h,f):this.s(f)};b.prototype.m=function(f){this.v(2,f)};b.prototype.s=function(f){this.v(1,f)};b.prototype.v=function(f,h){if(0!=this.i)throw Error("Cannot settle("+f+", "+h+"): Promise already settled in state"+this.i);this.i=f;this.j=h;2===this.i&&this.K();this.H()};b.prototype.K=function(){var f=this;e(function(){if(f.D()){var h=y.console;"undefined"!==typeof h&&h.error(f.j)}},1)};b.prototype.D=
+function(){if(this.u)return!1;var f=y.CustomEvent,h=y.Event,k=y.dispatchEvent;if("undefined"===typeof k)return!0;"function"===typeof f?f=new f("unhandledrejection",{cancelable:!0}):"function"===typeof h?f=new h("unhandledrejection",{cancelable:!0}):(f=y.document.createEvent("CustomEvent"),f.initCustomEvent("unhandledrejection",!1,!0,f));f.promise=this;f.reason=this.j;return k(f)};b.prototype.H=function(){if(null!=this.h){for(var f=0;f<this.h.length;++f)g.i(this.h[f]);this.h=null}};var g=new c;b.prototype.L=
+function(f){var h=this.l();f.T(h.resolve,h.reject)};b.prototype.M=function(f,h){var k=this.l();try{f.call(h,k.resolve,k.reject)}catch(l){k.reject(l)}};b.prototype.then=function(f,h){function k(p,n){return"function"==typeof p?function(q){try{l(p(q))}catch(t){m(t)}}:n}var l,m,r=new b(function(p,n){l=p;m=n});this.T(k(f,l),k(h,m));return r};b.prototype.catch=function(f){return this.then(void 0,f)};b.prototype.T=function(f,h){function k(){switch(l.i){case 1:f(l.j);break;case 2:h(l.j);break;default:throw Error("Unexpected state: "+
+l.i);}}var l=this;null==this.h?g.i(k):this.h.push(k);this.u=!0};b.resolve=d;b.reject=function(f){return new b(function(h,k){k(f)})};b.race=function(f){return new b(function(h,k){for(var l=A(f),m=l.next();!m.done;m=l.next())d(m.value).T(h,k)})};b.all=function(f){var h=A(f),k=h.next();return k.done?d([]):new b(function(l,m){function r(q){return function(t){p[q]=t;n--;0==n&&l(p)}}var p=[],n=0;do p.push(void 0),n++,d(k.value).T(r(p.length-1),m),k=h.next();while(!k.done)})};return b});
+function xa(a,b){a instanceof String&&(a+="");var c=0,d=!1,e={next:function(){if(!d&&c<a.length){var g=c++;return{value:b(g,a[g]),done:!1}}d=!0;return{done:!0,value:void 0}}};e[Symbol.iterator]=function(){return e};return e}z("Array.prototype.keys",function(a){return a?a:function(){return xa(this,function(b){return b})}});
+z("Array.prototype.fill",function(a){return a?a:function(b,c,d){var e=this.length||0;0>c&&(c=Math.max(0,e+c));if(null==d||d>e)d=e;d=Number(d);0>d&&(d=Math.max(0,e+d));for(c=Number(c||0);c<d;c++)this[c]=b;return this}});function F(a){return a?a:Array.prototype.fill}z("Int8Array.prototype.fill",F);z("Uint8Array.prototype.fill",F);z("Uint8ClampedArray.prototype.fill",F);z("Int16Array.prototype.fill",F);z("Uint16Array.prototype.fill",F);z("Int32Array.prototype.fill",F);
+z("Uint32Array.prototype.fill",F);z("Float32Array.prototype.fill",F);z("Float64Array.prototype.fill",F);z("Object.is",function(a){return a?a:function(b,c){return b===c?0!==b||1/b===1/c:b!==b&&c!==c}});z("Array.prototype.includes",function(a){return a?a:function(b,c){var d=this;d instanceof String&&(d=String(d));var e=d.length;c=c||0;for(0>c&&(c=Math.max(c+e,0));c<e;c++){var g=d[c];if(g===b||Object.is(g,b))return!0}return!1}});
+z("String.prototype.includes",function(a){return a?a:function(b,c){if(null==this)throw new TypeError("The 'this' value for String.prototype.includes must not be null or undefined");if(b instanceof RegExp)throw new TypeError("First argument to String.prototype.includes must not be a regular expression");return-1!==this.indexOf(b,c||0)}});var ya=this||self;
+function Aa(a,b){a=a.split(".");var c=ya;a[0]in c||"undefined"==typeof c.execScript||c.execScript("var "+a[0]);for(var d;a.length&&(d=a.shift());)a.length||void 0===b?c[d]&&c[d]!==Object.prototype[d]?c=c[d]:c=c[d]={}:c[d]=b};function Ba(a){var b;a:{if(b=ya.navigator)if(b=b.userAgent)break a;b=""}return-1!=b.indexOf(a)};var Ca=Array.prototype.map?function(a,b){return Array.prototype.map.call(a,b,void 0)}:function(a,b){for(var c=a.length,d=Array(c),e="string"===typeof a?a.split(""):a,g=0;g<c;g++)g in e&&(d[g]=b.call(void 0,e[g],g,a));return d};var Da={},Ea=null;function Fa(a){var b=a.length,c=3*b/4;c%3?c=Math.floor(c):-1!="=.".indexOf(a[b-1])&&(c=-1!="=.".indexOf(a[b-2])?c-2:c-1);var d=new Uint8Array(c),e=0;Ga(a,function(g){d[e++]=g});return e!==c?d.subarray(0,e):d}
+function Ga(a,b){function c(k){for(;d<a.length;){var l=a.charAt(d++),m=Ea[l];if(null!=m)return m;if(!/^[\s\xa0]*$/.test(l))throw Error("Unknown base64 encoding at char: "+l);}return k}Ha();for(var d=0;;){var e=c(-1),g=c(0),f=c(64),h=c(64);if(64===h&&-1===e)break;b(e<<2|g>>4);64!=f&&(b(g<<4&240|f>>2),64!=h&&b(f<<6&192|h))}}
+function Ha(){if(!Ea){Ea={};for(var a="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789".split(""),b=["+/=","+/","-_=","-_.","-_"],c=0;5>c;c++){var d=a.concat(b[c].split(""));Da[c]=d;for(var e=0;e<d.length;e++){var g=d[e];void 0===Ea[g]&&(Ea[g]=e)}}}};var Ia="undefined"!==typeof Uint8Array,Ja=!(Ba("Trident")||Ba("MSIE"))&&"function"===typeof ya.btoa;
+function Ka(a){if(!Ja){var b;void 0===b&&(b=0);Ha();b=Da[b];for(var c=Array(Math.floor(a.length/3)),d=b[64]||"",e=0,g=0;e<a.length-2;e+=3){var f=a[e],h=a[e+1],k=a[e+2],l=b[f>>2];f=b[(f&3)<<4|h>>4];h=b[(h&15)<<2|k>>6];k=b[k&63];c[g++]=l+f+h+k}l=0;k=d;switch(a.length-e){case 2:l=a[e+1],k=b[(l&15)<<2]||d;case 1:a=a[e],c[g]=b[a>>2]+b[(a&3)<<4|l>>4]+k+d}return c.join("")}for(b="";10240<a.length;)b+=String.fromCharCode.apply(null,a.subarray(0,10240)),a=a.subarray(10240);b+=String.fromCharCode.apply(null,
+a);return btoa(b)}var La=RegExp("[-_.]","g");function Ma(a){switch(a){case "-":return"+";case "_":return"/";case ".":return"=";default:return""}}function Na(a){if(!Ja)return Fa(a);La.test(a)&&(a=a.replace(La,Ma));a=atob(a);for(var b=new Uint8Array(a.length),c=0;c<a.length;c++)b[c]=a.charCodeAt(c);return b}var Oa;function Pa(){return Oa||(Oa=new Uint8Array(0))}var Qa={};var Ra="function"===typeof Uint8Array.prototype.slice,G=0,H=0;function Sa(a){var b=0>a;a=Math.abs(a);var c=a>>>0;a=Math.floor((a-c)/4294967296);b&&(c=A(Ta(c,a)),b=c.next().value,a=c.next().value,c=b);G=c>>>0;H=a>>>0}var Ua="function"===typeof BigInt;function Ta(a,b){b=~b;a?a=~a+1:b+=1;return[a,b]};function Va(a,b){this.i=a>>>0;this.h=b>>>0}
+function Wa(a){if(!a)return Xa||(Xa=new Va(0,0));if(!/^-?\d+$/.test(a))return null;if(16>a.length)Sa(Number(a));else if(Ua)a=BigInt(a),G=Number(a&BigInt(4294967295))>>>0,H=Number(a>>BigInt(32)&BigInt(4294967295));else{var b=+("-"===a[0]);H=G=0;for(var c=a.length,d=b,e=(c-b)%6+b;e<=c;d=e,e+=6)d=Number(a.slice(d,e)),H*=1E6,G=1E6*G+d,4294967296<=G&&(H+=G/4294967296|0,G%=4294967296);b&&(b=A(Ta(G,H)),a=b.next().value,b=b.next().value,G=a,H=b)}return new Va(G,H)}var Xa;function Ya(a,b){return Error("Invalid wire type: "+a+" (at position "+b+")")}function Za(){return Error("Failed to read varint, encoding is invalid.")}function $a(a,b){return Error("Tried to read past the end of the data "+b+" > "+a)};function K(){throw Error("Invalid UTF8");}function ab(a,b){b=String.fromCharCode.apply(null,b);return null==a?b:a+b}var bb=void 0,cb,db="undefined"!==typeof TextDecoder,eb,fb="undefined"!==typeof TextEncoder;var gb;function hb(a){if(a!==Qa)throw Error("illegal external caller");}function ib(a,b){hb(b);this.V=a;if(null!=a&&0===a.length)throw Error("ByteString should be constructed with non-empty values");}function jb(){return gb||(gb=new ib(null,Qa))}function kb(a){hb(Qa);var b=a.V;b=null==b||Ia&&null!=b&&b instanceof Uint8Array?b:"string"===typeof b?Na(b):null;return null==b?b:a.V=b};function lb(a){if("string"===typeof a)return{buffer:Na(a),C:!1};if(Array.isArray(a))return{buffer:new Uint8Array(a),C:!1};if(a.constructor===Uint8Array)return{buffer:a,C:!1};if(a.constructor===ArrayBuffer)return{buffer:new Uint8Array(a),C:!1};if(a.constructor===ib)return{buffer:kb(a)||Pa(),C:!0};if(a instanceof Uint8Array)return{buffer:new Uint8Array(a.buffer,a.byteOffset,a.byteLength),C:!1};throw Error("Type not convertible to a Uint8Array, expected a Uint8Array, an ArrayBuffer, a base64 encoded string, a ByteString or an Array of numbers");
+};function mb(a,b){this.i=null;this.m=!1;this.h=this.j=this.l=0;nb(this,a,b)}function nb(a,b,c){c=void 0===c?{}:c;a.S=void 0===c.S?!1:c.S;b&&(b=lb(b),a.i=b.buffer,a.m=b.C,a.l=0,a.j=a.i.length,a.h=a.l)}mb.prototype.reset=function(){this.h=this.l};function L(a,b){a.h=b;if(b>a.j)throw $a(a.j,b);}
+function ob(a){var b=a.i,c=a.h,d=b[c++],e=d&127;if(d&128&&(d=b[c++],e|=(d&127)<<7,d&128&&(d=b[c++],e|=(d&127)<<14,d&128&&(d=b[c++],e|=(d&127)<<21,d&128&&(d=b[c++],e|=d<<28,d&128&&b[c++]&128&&b[c++]&128&&b[c++]&128&&b[c++]&128&&b[c++]&128)))))throw Za();L(a,c);return e}function pb(a,b){if(0>b)throw Error("Tried to read a negative byte length: "+b);var c=a.h,d=c+b;if(d>a.j)throw $a(b,a.j-c);a.h=d;return c}var qb=[];function rb(){this.h=[]}rb.prototype.length=function(){return this.h.length};rb.prototype.end=function(){var a=this.h;this.h=[];return a};function sb(a,b,c){for(;0<c||127<b;)a.h.push(b&127|128),b=(b>>>7|c<<25)>>>0,c>>>=7;a.h.push(b)}function M(a,b){for(;127<b;)a.h.push(b&127|128),b>>>=7;a.h.push(b)};function tb(a,b){if(qb.length){var c=qb.pop();nb(c,a,b);a=c}else a=new mb(a,b);this.h=a;this.j=this.h.h;this.i=this.l=-1;this.setOptions(b)}tb.prototype.setOptions=function(a){a=void 0===a?{}:a;this.ca=void 0===a.ca?!1:a.ca};tb.prototype.reset=function(){this.h.reset();this.j=this.h.h;this.i=this.l=-1};
+function ub(a){var b=a.h;if(b.h==b.j)return!1;a.j=a.h.h;var c=ob(a.h)>>>0;b=c>>>3;c&=7;if(!(0<=c&&5>=c))throw Ya(c,a.j);if(1>b)throw Error("Invalid field number: "+b+" (at position "+a.j+")");a.l=b;a.i=c;return!0}
+function vb(a){switch(a.i){case 0:if(0!=a.i)vb(a);else a:{a=a.h;for(var b=a.h,c=b+10,d=a.i;b<c;)if(0===(d[b++]&128)){L(a,b);break a}throw Za();}break;case 1:a=a.h;L(a,a.h+8);break;case 2:2!=a.i?vb(a):(b=ob(a.h)>>>0,a=a.h,L(a,a.h+b));break;case 5:a=a.h;L(a,a.h+4);break;case 3:b=a.l;do{if(!ub(a))throw Error("Unmatched start-group tag: stream EOF");if(4==a.i){if(a.l!=b)throw Error("Unmatched end-group tag");break}vb(a)}while(1);break;default:throw Ya(a.i,a.j);}}var wb=[];function xb(){this.j=[];this.i=0;this.h=new rb}function N(a,b){0!==b.length&&(a.j.push(b),a.i+=b.length)}function yb(a,b){if(b=b.R){N(a,a.h.end());for(var c=0;c<b.length;c++)N(a,kb(b[c])||Pa())}};var O="function"===typeof Symbol&&"symbol"===typeof Symbol()?Symbol():void 0;function P(a,b){if(O)return a[O]|=b;if(void 0!==a.A)return a.A|=b;Object.defineProperties(a,{A:{value:b,configurable:!0,writable:!0,enumerable:!1}});return b}function zb(a,b){O?a[O]&&(a[O]&=~b):void 0!==a.A&&(a.A&=~b)}function Q(a){var b;O?b=a[O]:b=a.A;return null==b?0:b}function R(a,b){O?a[O]=b:void 0!==a.A?a.A=b:Object.defineProperties(a,{A:{value:b,configurable:!0,writable:!0,enumerable:!1}})}
+function Ab(a){P(a,1);return a}function Bb(a,b){R(b,(a|0)&-51)}function Cb(a,b){R(b,(a|18)&-41)};var Db={};function Eb(a){return null!==a&&"object"===typeof a&&!Array.isArray(a)&&a.constructor===Object}var Fb,Gb=[];R(Gb,23);Fb=Object.freeze(Gb);function Hb(a){if(Q(a.o)&2)throw Error("Cannot mutate an immutable Message");}function Ib(a){var b=a.length;(b=b?a[b-1]:void 0)&&Eb(b)?b.g=1:(b={},a.push((b.g=1,b)))};function Jb(a){var b=a.i+a.G;return a.B||(a.B=a.o[b]={})}function S(a,b){return-1===b?null:b>=a.i?a.B?a.B[b]:void 0:a.o[b+a.G]}function U(a,b,c,d){Hb(a);Kb(a,b,c,d)}function Kb(a,b,c,d){a.j&&(a.j=void 0);b>=a.i||d?Jb(a)[b]=c:(a.o[b+a.G]=c,(a=a.B)&&b in a&&delete a[b])}function Lb(a,b,c,d){var e=S(a,b);Array.isArray(e)||(e=Fb);var g=Q(e);g&1||Ab(e);if(d)g&2||P(e,2),c&1||Object.freeze(e);else{d=!(c&2);var f=g&2;c&1||!f?d&&g&16&&!f&&zb(e,16):(e=Ab(Array.prototype.slice.call(e)),Kb(a,b,e))}return e}
+function Mb(a,b){var c=S(a,b);var d=null==c?c:"number"===typeof c||"NaN"===c||"Infinity"===c||"-Infinity"===c?Number(c):void 0;null!=d&&d!==c&&Kb(a,b,d);return d}
+function Nb(a,b,c,d,e){a.h||(a.h={});var g=a.h[c],f=Lb(a,c,3,e);if(!g){var h=f;g=[];var k=!!(Q(a.o)&16);f=!!(Q(h)&2);var l=h;!e&&f&&(h=Array.prototype.slice.call(h));for(var m=f,r=0;r<h.length;r++){var p=h[r];var n=b,q=!1;q=void 0===q?!1:q;p=Array.isArray(p)?new n(p):q?new n:void 0;if(void 0!==p){n=p.o;var t=q=Q(n);f&&(t|=2);k&&(t|=16);t!=q&&R(n,t);n=t;m=m||!!(2&n);g.push(p)}}a.h[c]=g;k=Q(h);b=k|33;b=m?b&-9:b|8;k!=b&&(m=h,Object.isFrozen(m)&&(m=Array.prototype.slice.call(m)),R(m,b),h=m);l!==h&&Kb(a,
+c,h);(e||d&&f)&&P(g,2);d&&Object.freeze(g);return g}e||(e=Object.isFrozen(g),d&&!e?Object.freeze(g):!d&&e&&(g=Array.prototype.slice.call(g),a.h[c]=g));return g}function Ob(a,b,c){var d=!!(Q(a.o)&2);b=Nb(a,b,c,d,d);a=Lb(a,c,3,d);if(!(d||Q(a)&8)){for(d=0;d<b.length;d++){c=b[d];if(Q(c.o)&2){var e=Pb(c,!1);e.j=c}else e=c;c!==e&&(b[d]=e,a[d]=e.o)}P(a,8)}return b}
+function V(a,b,c){if(null!=c&&"number"!==typeof c)throw Error("Value of float/double field must be a number|null|undefined, found "+typeof c+": "+c);U(a,b,c)}function Qb(a,b,c,d,e){Hb(a);var g=Nb(a,c,b,!1,!1);c=null!=d?d:new c;a=Lb(a,b,2,!1);void 0!=e?(g.splice(e,0,c),a.splice(e,0,c.o)):(g.push(c),a.push(c.o));c.C()&&zb(a,8);return c}function Rb(a,b){return null==a?b:a}function W(a,b,c){c=void 0===c?0:c;return Rb(Mb(a,b),c)};var Sb;function Tb(a){switch(typeof a){case "number":return isFinite(a)?a:String(a);case "object":if(a)if(Array.isArray(a)){if(0!==(Q(a)&128))return a=Array.prototype.slice.call(a),Ib(a),a}else{if(Ia&&null!=a&&a instanceof Uint8Array)return Ka(a);if(a instanceof ib){var b=a.V;return null==b?"":"string"===typeof b?b:a.V=Ka(b)}}}return a};function Ub(a,b,c,d){if(null!=a){if(Array.isArray(a))a=Vb(a,b,c,void 0!==d);else if(Eb(a)){var e={},g;for(g in a)e[g]=Ub(a[g],b,c,d);a=e}else a=b(a,d);return a}}function Vb(a,b,c,d){var e=Q(a);d=d?!!(e&16):void 0;a=Array.prototype.slice.call(a);for(var g=0;g<a.length;g++)a[g]=Ub(a[g],b,c,d);c(e,a);return a}function Wb(a){return a.ja===Db?a.toJSON():Tb(a)}function Xb(a,b){a&128&&Ib(b)};function Yb(a,b,c){c=void 0===c?Cb:c;if(null!=a){if(Ia&&a instanceof Uint8Array)return a.length?new ib(new Uint8Array(a),Qa):jb();if(Array.isArray(a)){var d=Q(a);if(d&2)return a;if(b&&!(d&32)&&(d&16||0===d))return R(a,d|2),a;a=Vb(a,Yb,d&4?Cb:c,!0);b=Q(a);b&4&&b&2&&Object.freeze(a);return a}return a.ja===Db?Zb(a):a}}
+function $b(a,b,c,d,e,g,f){if(a=a.h&&a.h[c]){d=Q(a);d&2?d=a:(g=Ca(a,Zb),Cb(d,g),Object.freeze(g),d=g);Hb(b);f=null==d?Fb:Ab([]);if(null!=d){g=!!d.length;for(a=0;a<d.length;a++){var h=d[a];g=g&&!(Q(h.o)&2);f[a]=h.o}g=(g?8:0)|1;a=Q(f);(a&g)!==g&&(Object.isFrozen(f)&&(f=Array.prototype.slice.call(f)),R(f,a|g));b.h||(b.h={});b.h[c]=d}else b.h&&(b.h[c]=void 0);Kb(b,c,f,e)}else U(b,c,Yb(d,g,f),e)}function Zb(a){if(Q(a.o)&2)return a;a=Pb(a,!0);P(a.o,2);return a}
+function Pb(a,b){var c=a.o,d=[];P(d,16);var e=a.constructor.h;e&&d.push(e);e=a.B;if(e){d.length=c.length;d.fill(void 0,d.length,c.length);var g={};d[d.length-1]=g}0!==(Q(c)&128)&&Ib(d);b=b||a.C()?Cb:Bb;g=a.constructor;Sb=d;d=new g(d);Sb=void 0;a.R&&(d.R=a.R.slice());g=!!(Q(c)&16);for(var f=e?c.length-1:c.length,h=0;h<f;h++)$b(a,d,h-a.G,c[h],!1,g,b);if(e)for(var k in e)$b(a,d,+k,e[k],!0,g,b);return d};function X(a,b,c){null==a&&(a=Sb);Sb=void 0;var d=this.constructor.i||0,e=0<d,g=this.constructor.h,f=!1;if(null==a){a=g?[g]:[];var h=48;var k=!0;e&&(d=0,h|=128);R(a,h)}else{if(!Array.isArray(a))throw Error();if(g&&g!==a[0])throw Error();var l=h=P(a,0);if(k=0!==(16&l))(f=0!==(32&l))||(l|=32);if(e)if(128&l)d=0;else{if(0<a.length){var m=a[a.length-1];if(Eb(m)&&"g"in m){d=0;l|=128;delete m.g;var r=!0,p;for(p in m){r=!1;break}r&&a.pop()}}}else if(128&l)throw Error();h!==l&&R(a,l)}this.G=(g?0:-1)-d;this.h=
+void 0;this.o=a;a:{g=this.o.length;d=g-1;if(g&&(g=this.o[d],Eb(g))){this.B=g;this.i=d-this.G;break a}void 0!==b&&-1<b?(this.i=Math.max(b,d+1-this.G),this.B=void 0):this.i=Number.MAX_VALUE}if(!e&&this.B&&"g"in this.B)throw Error('Unexpected "g" flag in sparse object of message that is not a group type.');if(c){b=k&&!f&&!0;e=this.i;var n;for(k=0;k<c.length;k++)f=c[k],f<e?(f+=this.G,(d=a[f])?ac(d,b):a[f]=Fb):(n||(n=Jb(this)),(d=n[f])?ac(d,b):n[f]=Fb)}}
+X.prototype.toJSON=function(){return Vb(this.o,Wb,Xb)};X.prototype.C=function(){return!!(Q(this.o)&2)};function ac(a,b){if(Array.isArray(a)){var c=Q(a),d=1;!b||c&2||(d|=16);(c&d)!==d&&R(a,c|d)}}X.prototype.ja=Db;X.prototype.toString=function(){return this.o.toString()};function bc(a,b,c){if(c){var d={},e;for(e in c){var g=c[e],f=g.ra;f||(d.J=g.xa||g.oa.W,g.ia?(d.aa=cc(g.ia),f=function(h){return function(k,l,m){return h.J(k,l,m,h.aa)}}(d)):g.ka?(d.Z=dc(g.da.P,g.ka),f=function(h){return function(k,l,m){return h.J(k,l,m,h.Z)}}(d)):f=d.J,g.ra=f);f(b,a,g.da);d={J:d.J,aa:d.aa,Z:d.Z}}}yb(b,a)}var ec=Symbol();function fc(a,b,c){return a[ec]||(a[ec]=function(d,e){return b(d,e,c)})}
+function gc(a){var b=a[ec];if(!b){var c=hc(a);b=function(d,e){return ic(d,e,c)};a[ec]=b}return b}function jc(a){var b=a.ia;if(b)return gc(b);if(b=a.wa)return fc(a.da.P,b,a.ka)}function kc(a){var b=jc(a),c=a.da,d=a.oa.U;return b?function(e,g){return d(e,g,c,b)}:function(e,g){return d(e,g,c)}}function lc(a,b){var c=a[b];"function"==typeof c&&0===c.length&&(c=c(),a[b]=c);return Array.isArray(c)&&(mc in c||nc in c||0<c.length&&"function"==typeof c[0])?c:void 0}
+function oc(a,b,c,d,e,g){b.P=a[0];var f=1;if(a.length>f&&"number"!==typeof a[f]){var h=a[f++];c(b,h)}for(;f<a.length;){c=a[f++];for(var k=f+1;k<a.length&&"number"!==typeof a[k];)k++;h=a[f++];k-=f;switch(k){case 0:d(b,c,h);break;case 1:(k=lc(a,f))?(f++,e(b,c,h,k)):d(b,c,h,a[f++]);break;case 2:k=f++;k=lc(a,k);e(b,c,h,k,a[f++]);break;case 3:g(b,c,h,a[f++],a[f++],a[f++]);break;case 4:g(b,c,h,a[f++],a[f++],a[f++],a[f++]);break;default:throw Error("unexpected number of binary field arguments: "+k);}}return b}
+var pc=Symbol();function cc(a){var b=a[pc];if(!b){var c=qc(a);b=function(d,e){return rc(d,e,c)};a[pc]=b}return b}function dc(a,b){var c=a[pc];c||(c=function(d,e){return bc(d,e,b)},a[pc]=c);return c}var nc=Symbol();function sc(a,b){a.push(b)}function tc(a,b,c){a.push(b,c.W)}function uc(a,b,c,d){var e=cc(d),g=qc(d).P,f=c.W;a.push(b,function(h,k,l){return f(h,k,l,g,e)})}function vc(a,b,c,d,e,g){var f=dc(d,g),h=c.W;a.push(b,function(k,l,m){return h(k,l,m,d,f)})}
+function qc(a){var b=a[nc];if(b)return b;b=oc(a,a[nc]=[],sc,tc,uc,vc);mc in a&&nc in a&&(a.length=0);return b}var mc=Symbol();function wc(a,b){a[0]=b}function xc(a,b,c,d){var e=c.U;a[b]=d?function(g,f,h){return e(g,f,h,d)}:e}function yc(a,b,c,d,e){var g=c.U,f=gc(d),h=hc(d).P;a[b]=function(k,l,m){return g(k,l,m,h,f,e)}}function zc(a,b,c,d,e,g,f){var h=c.U,k=fc(d,e,g);a[b]=function(l,m,r){return h(l,m,r,d,k,f)}}
+function hc(a){var b=a[mc];if(b)return b;b=oc(a,a[mc]={},wc,xc,yc,zc);mc in a&&nc in a&&(a.length=0);return b}
+function ic(a,b,c){for(;ub(b)&&4!=b.i;){var d=b.l,e=c[d];if(!e){var g=c[0];g&&(g=g[d])&&(e=c[d]=kc(g))}if(!e||!e(b,a,d)){e=b;d=a;g=e.j;vb(e);var f=e;if(!f.ca){e=f.h.h-g;f.h.h=g;f=f.h;if(0==e)e=jb();else{g=pb(f,e);if(f.S&&f.m)e=f.i.subarray(g,g+e);else{f=f.i;var h=g;e=g+e;e=h===e?Pa():Ra?f.slice(h,e):new Uint8Array(f.subarray(h,e))}e=0==e.length?jb():new ib(e,Qa)}(g=d.R)?g.push(e):d.R=[e]}}}return a}
+function rc(a,b,c){for(var d=c.length,e=1==d%2,g=e?1:0;g<d;g+=2)(0,c[g+1])(b,a,c[g]);bc(a,b,e?c[0]:void 0)}function Ac(a,b){return{U:a,W:b}}
+var Y=Ac(function(a,b,c){if(5!==a.i)return!1;a=a.h;var d=a.i,e=a.h,g=d[e];var f=d[e+1];var h=d[e+2];d=d[e+3];L(a,a.h+4);f=(g<<0|f<<8|h<<16|d<<24)>>>0;a=2*(f>>31)+1;g=f>>>23&255;f&=8388607;U(b,c,255==g?f?NaN:Infinity*a:0==g?a*Math.pow(2,-149)*f:a*Math.pow(2,g-150)*(f+Math.pow(2,23)));return!0},function(a,b,c){b=Mb(b,c);if(null!=b){M(a.h,8*c+5);a=a.h;var d=+b;0===d?0<1/d?G=H=0:(H=0,G=2147483648):isNaN(d)?(H=0,G=2147483647):(d=(c=0>d?-2147483648:0)?-d:d,3.4028234663852886E38<d?(H=0,G=(c|2139095040)>>>
+0):1.1754943508222875E-38>d?(d=Math.round(d/Math.pow(2,-149)),H=0,G=(c|d)>>>0):(b=Math.floor(Math.log(d)/Math.LN2),d*=Math.pow(2,-b),d=Math.round(8388608*d),16777216<=d&&++b,H=0,G=(c|b+127<<23|d&8388607)>>>0));c=G;a.h.push(c>>>0&255);a.h.push(c>>>8&255);a.h.push(c>>>16&255);a.h.push(c>>>24&255)}}),Bc=Ac(function(a,b,c){if(0!==a.i)return!1;var d=a.h,e=0,g=a=0,f=d.i,h=d.h;do{var k=f[h++];e|=(k&127)<<g;g+=7}while(32>g&&k&128);32<g&&(a|=(k&127)>>4);for(g=3;32>g&&k&128;g+=7)k=f[h++],a|=(k&127)<<g;L(d,
+h);if(128>k){d=e>>>0;k=a>>>0;if(a=k&2147483648)d=~d+1>>>0,k=~k>>>0,0==d&&(k=k+1>>>0);d=4294967296*k+(d>>>0)}else throw Za();U(b,c,a?-d:d);return!0},function(a,b,c){b=S(b,c);null!=b&&("string"===typeof b&&Wa(b),null!=b&&(M(a.h,8*c),"number"===typeof b?(a=a.h,Sa(b),sb(a,G,H)):(c=Wa(b),sb(a.h,c.i,c.h))))}),Cc=Ac(function(a,b,c){if(0!==a.i)return!1;U(b,c,ob(a.h));return!0},function(a,b,c){b=S(b,c);if(null!=b&&null!=b)if(M(a.h,8*c),a=a.h,c=b,0<=c)M(a,c);else{for(b=0;9>b;b++)a.h.push(c&127|128),c>>=7;a.h.push(1)}}),
+Dc=Ac(function(a,b,c){if(2!==a.i)return!1;var d=ob(a.h)>>>0;a=a.h;var e=pb(a,d);a=a.i;if(db){var g=a,f;(f=cb)||(f=cb=new TextDecoder("utf-8",{fatal:!0}));a=e+d;g=0===e&&a===g.length?g:g.subarray(e,a);try{var h=f.decode(g)}catch(r){if(void 0===bb){try{f.decode(new Uint8Array([128]))}catch(p){}try{f.decode(new Uint8Array([97])),bb=!0}catch(p){bb=!1}}!bb&&(cb=void 0);throw r;}}else{h=e;d=h+d;e=[];for(var k=null,l,m;h<d;)l=a[h++],128>l?e.push(l):224>l?h>=d?K():(m=a[h++],194>l||128!==(m&192)?(h--,K()):
+e.push((l&31)<<6|m&63)):240>l?h>=d-1?K():(m=a[h++],128!==(m&192)||224===l&&160>m||237===l&&160<=m||128!==((g=a[h++])&192)?(h--,K()):e.push((l&15)<<12|(m&63)<<6|g&63)):244>=l?h>=d-2?K():(m=a[h++],128!==(m&192)||0!==(l<<28)+(m-144)>>30||128!==((g=a[h++])&192)||128!==((f=a[h++])&192)?(h--,K()):(l=(l&7)<<18|(m&63)<<12|(g&63)<<6|f&63,l-=65536,e.push((l>>10&1023)+55296,(l&1023)+56320))):K(),8192<=e.length&&(k=ab(k,e),e.length=0);h=ab(k,e)}U(b,c,h);return!0},function(a,b,c){b=S(b,c);if(null!=b){var d=!1;
+d=void 0===d?!1:d;if(fb){if(d&&/(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])/.test(b))throw Error("Found an unpaired surrogate");b=(eb||(eb=new TextEncoder)).encode(b)}else{for(var e=0,g=new Uint8Array(3*b.length),f=0;f<b.length;f++){var h=b.charCodeAt(f);if(128>h)g[e++]=h;else{if(2048>h)g[e++]=h>>6|192;else{if(55296<=h&&57343>=h){if(56319>=h&&f<b.length){var k=b.charCodeAt(++f);if(56320<=k&&57343>=k){h=1024*(h-55296)+k-56320+65536;g[e++]=h>>18|240;g[e++]=h>>12&63|128;
+g[e++]=h>>6&63|128;g[e++]=h&63|128;continue}else f--}if(d)throw Error("Found an unpaired surrogate");h=65533}g[e++]=h>>12|224;g[e++]=h>>6&63|128}g[e++]=h&63|128}}b=e===g.length?g:g.subarray(0,e)}M(a.h,8*c+2);M(a.h,b.length);N(a,a.h.end());N(a,b)}}),Ec=Ac(function(a,b,c,d,e){if(2!==a.i)return!1;b=Qb(b,c,d);c=a.h.j;d=ob(a.h)>>>0;var g=a.h.h+d,f=g-c;0>=f&&(a.h.j=g,e(b,a,void 0,void 0,void 0),f=g-a.h.h);if(f)throw Error("Message parsing ended unexpectedly. Expected to read "+(d+" bytes, instead read "+
+(d-f)+" bytes, either the data ended unexpectedly or the message misreported its own length"));a.h.h=g;a.h.j=c;return!0},function(a,b,c,d,e){b=Ob(b,d,c);if(null!=b)for(d=0;d<b.length;d++){var g=a;M(g.h,8*c+2);var f=g.h.end();N(g,f);f.push(g.i);g=f;e(b[d],a);f=a;var h=g.pop();for(h=f.i+f.h.length()-h;127<h;)g.push(h&127|128),h>>>=7,f.i++;g.push(h);f.i++}});function Fc(a){return function(b,c){a:{if(wb.length){var d=wb.pop();d.setOptions(c);nb(d.h,b,c);b=d}else b=new tb(b,c);try{var e=hc(a);var g=ic(new e.P,b,e);break a}finally{e=b.h,e.i=null,e.m=!1,e.l=0,e.j=0,e.h=0,e.S=!1,b.l=-1,b.i=-1,100>wb.length&&wb.push(b)}g=void 0}return g}}function Gc(a){return function(){var b=new xb;rc(this,b,qc(a));N(b,b.h.end());for(var c=new Uint8Array(b.i),d=b.j,e=d.length,g=0,f=0;f<e;f++){var h=d[f];c.set(h,g);g+=h.length}b.j=[c];return c}};function Z(a){X.call(this,a)}na(Z,X);var Hc=[Z,1,Cc,2,Y,3,Dc,4,Dc];Z.prototype.l=Gc(Hc);function Ic(a){X.call(this,a,-1,Jc)}na(Ic,X);Ic.prototype.addClassification=function(a,b){Qb(this,1,Z,a,b);return this};var Jc=[1],Kc=Fc([Ic,1,Ec,Hc]);function Lc(a){X.call(this,a)}na(Lc,X);var Mc=[Lc,1,Y,2,Y,3,Y,4,Y,5,Y];Lc.prototype.l=Gc(Mc);function Nc(a){X.call(this,a,-1,Oc)}na(Nc,X);var Oc=[1],Pc=Fc([Nc,1,Ec,Mc]);function Qc(a){X.call(this,a)}na(Qc,X);var Rc=[Qc,1,Y,2,Y,3,Y,4,Y,5,Y,6,Bc],Sc=Fc(Rc);Qc.prototype.l=Gc(Rc);function Tc(a,b,c){c=a.createShader(0===c?a.VERTEX_SHADER:a.FRAGMENT_SHADER);a.shaderSource(c,b);a.compileShader(c);if(!a.getShaderParameter(c,a.COMPILE_STATUS))throw Error("Could not compile WebGL shader.\n\n"+a.getShaderInfoLog(c));return c};function Uc(a){return Ob(a,Z,1).map(function(b){var c=S(b,1);return{index:null==c?0:c,qa:W(b,2),label:null!=S(b,3)?Rb(S(b,3),""):void 0,displayName:null!=S(b,4)?Rb(S(b,4),""):void 0}})};function Vc(a){return{x:W(a,1),y:W(a,2),z:W(a,3),visibility:null!=Mb(a,4)?W(a,4):void 0}};function Wc(a,b){this.i=a;this.h=b;this.m=0}
+function Xc(a,b,c){Yc(a,b);if("function"===typeof a.h.canvas.transferToImageBitmap)return Promise.resolve(a.h.canvas.transferToImageBitmap());if(c)return Promise.resolve(a.h.canvas);if("function"===typeof createImageBitmap)return createImageBitmap(a.h.canvas);void 0===a.j&&(a.j=document.createElement("canvas"));return new Promise(function(d){a.j.height=a.h.canvas.height;a.j.width=a.h.canvas.width;a.j.getContext("2d",{}).drawImage(a.h.canvas,0,0,a.h.canvas.width,a.h.canvas.height);d(a.j)})}
+function Yc(a,b){var c=a.h;if(void 0===a.s){var d=Tc(c,"\n  attribute vec2 aVertex;\n  attribute vec2 aTex;\n  varying vec2 vTex;\n  void main(void) {\n    gl_Position = vec4(aVertex, 0.0, 1.0);\n    vTex = aTex;\n  }",0),e=Tc(c,"\n  precision mediump float;\n  varying vec2 vTex;\n  uniform sampler2D sampler0;\n  void main(){\n    gl_FragColor = texture2D(sampler0, vTex);\n  }",1),g=c.createProgram();c.attachShader(g,d);c.attachShader(g,e);c.linkProgram(g);if(!c.getProgramParameter(g,c.LINK_STATUS))throw Error("Could not compile WebGL program.\n\n"+
+c.getProgramInfoLog(g));d=a.s=g;c.useProgram(d);e=c.getUniformLocation(d,"sampler0");a.l={O:c.getAttribLocation(d,"aVertex"),N:c.getAttribLocation(d,"aTex"),ya:e};a.v=c.createBuffer();c.bindBuffer(c.ARRAY_BUFFER,a.v);c.enableVertexAttribArray(a.l.O);c.vertexAttribPointer(a.l.O,2,c.FLOAT,!1,0,0);c.bufferData(c.ARRAY_BUFFER,new Float32Array([-1,-1,-1,1,1,1,1,-1]),c.STATIC_DRAW);c.bindBuffer(c.ARRAY_BUFFER,null);a.u=c.createBuffer();c.bindBuffer(c.ARRAY_BUFFER,a.u);c.enableVertexAttribArray(a.l.N);c.vertexAttribPointer(a.l.N,
+2,c.FLOAT,!1,0,0);c.bufferData(c.ARRAY_BUFFER,new Float32Array([0,1,0,0,1,0,1,1]),c.STATIC_DRAW);c.bindBuffer(c.ARRAY_BUFFER,null);c.uniform1i(e,0)}d=a.l;c.useProgram(a.s);c.canvas.width=b.width;c.canvas.height=b.height;c.viewport(0,0,b.width,b.height);c.activeTexture(c.TEXTURE0);a.i.bindTexture2d(b.glName);c.enableVertexAttribArray(d.O);c.bindBuffer(c.ARRAY_BUFFER,a.v);c.vertexAttribPointer(d.O,2,c.FLOAT,!1,0,0);c.enableVertexAttribArray(d.N);c.bindBuffer(c.ARRAY_BUFFER,a.u);c.vertexAttribPointer(d.N,
+2,c.FLOAT,!1,0,0);c.bindFramebuffer(c.DRAW_FRAMEBUFFER?c.DRAW_FRAMEBUFFER:c.FRAMEBUFFER,null);c.clearColor(0,0,0,0);c.clear(c.COLOR_BUFFER_BIT);c.colorMask(!0,!0,!0,!0);c.drawArrays(c.TRIANGLE_FAN,0,4);c.disableVertexAttribArray(d.O);c.disableVertexAttribArray(d.N);c.bindBuffer(c.ARRAY_BUFFER,null);a.i.bindTexture2d(0)}function Zc(a){this.h=a};var $c=new Uint8Array([0,97,115,109,1,0,0,0,1,4,1,96,0,0,3,2,1,0,10,9,1,7,0,65,0,253,15,26,11]);function ad(a,b){return b+a}function bd(a,b){window[a]=b}function cd(a){var b=document.createElement("script");b.setAttribute("src",a);b.setAttribute("crossorigin","anonymous");return new Promise(function(c){b.addEventListener("load",function(){c()},!1);b.addEventListener("error",function(){c()},!1);document.body.appendChild(b)})}
+function dd(){return E(function(a){switch(a.h){case 1:return a.s=2,D(a,WebAssembly.instantiate($c),4);case 4:a.h=3;a.s=0;break;case 2:return a.s=0,a.l=null,a.return(!1);case 3:return a.return(!0)}})}
+function ed(a){this.h=a;this.listeners={};this.l={};this.L={};this.s={};this.v={};this.M=this.u=this.ga=!0;this.I=Promise.resolve();this.fa="";this.D={};this.locateFile=a&&a.locateFile||ad;if("object"===typeof window)var b=window.location.pathname.toString().substring(0,window.location.pathname.toString().lastIndexOf("/"))+"/";else if("undefined"!==typeof location)b=location.pathname.toString().substring(0,location.pathname.toString().lastIndexOf("/"))+"/";else throw Error("solutions can only be loaded on a web page or in a web worker");
+this.ha=b;if(a.options){b=A(Object.keys(a.options));for(var c=b.next();!c.done;c=b.next()){c=c.value;var d=a.options[c].default;void 0!==d&&(this.l[c]="function"===typeof d?d():d)}}}x=ed.prototype;x.close=function(){this.j&&this.j.delete();return Promise.resolve()};
+function fd(a){var b,c,d,e,g,f,h,k,l,m,r;return E(function(p){switch(p.h){case 1:if(!a.ga)return p.return();b=void 0===a.h.files?[]:"function"===typeof a.h.files?a.h.files(a.l):a.h.files;return D(p,dd(),2);case 2:c=p.i;if("object"===typeof window)return bd("createMediapipeSolutionsWasm",{locateFile:a.locateFile}),bd("createMediapipeSolutionsPackedAssets",{locateFile:a.locateFile}),f=b.filter(function(n){return void 0!==n.data}),h=b.filter(function(n){return void 0===n.data}),k=Promise.all(f.map(function(n){var q=
+gd(a,n.url);if(void 0!==n.path){var t=n.path;q=q.then(function(w){a.overrideFile(t,w);return Promise.resolve(w)})}return q})),l=Promise.all(h.map(function(n){return void 0===n.simd||n.simd&&c||!n.simd&&!c?cd(a.locateFile(n.url,a.ha)):Promise.resolve()})).then(function(){var n,q,t;return E(function(w){if(1==w.h)return n=window.createMediapipeSolutionsWasm,q=window.createMediapipeSolutionsPackedAssets,t=a,D(w,n(q),2);t.i=w.i;w.h=0})}),m=function(){return E(function(n){a.h.graph&&a.h.graph.url?n=D(n,
+gd(a,a.h.graph.url),0):(n.h=0,n=void 0);return n})}(),D(p,Promise.all([l,k,m]),7);if("function"!==typeof importScripts)throw Error("solutions can only be loaded on a web page or in a web worker");d=b.filter(function(n){return void 0===n.simd||n.simd&&c||!n.simd&&!c}).map(function(n){return a.locateFile(n.url,a.ha)});importScripts.apply(null,ea(d));e=a;return D(p,createMediapipeSolutionsWasm(Module),6);case 6:e.i=p.i;a.m=new OffscreenCanvas(1,1);a.i.canvas=a.m;g=a.i.GL.createContext(a.m,{antialias:!1,
+alpha:!1,va:"undefined"!==typeof WebGL2RenderingContext?2:1});a.i.GL.makeContextCurrent(g);p.h=4;break;case 7:a.m=document.createElement("canvas");r=a.m.getContext("webgl2",{});if(!r&&(r=a.m.getContext("webgl",{}),!r))return alert("Failed to create WebGL canvas context when passing video frame."),p.return();a.K=r;a.i.canvas=a.m;a.i.createContext(a.m,!0,!0,{});case 4:a.j=new a.i.SolutionWasm,a.ga=!1,p.h=0}})}
+function hd(a){var b,c,d,e,g,f,h,k;return E(function(l){if(1==l.h){if(a.h.graph&&a.h.graph.url&&a.fa===a.h.graph.url)return l.return();a.u=!0;if(!a.h.graph||!a.h.graph.url){l.h=2;return}a.fa=a.h.graph.url;return D(l,gd(a,a.h.graph.url),3)}2!=l.h&&(b=l.i,a.j.loadGraph(b));c=A(Object.keys(a.D));for(d=c.next();!d.done;d=c.next())e=d.value,a.j.overrideFile(e,a.D[e]);a.D={};if(a.h.listeners)for(g=A(a.h.listeners),f=g.next();!f.done;f=g.next())h=f.value,id(a,h);k=a.l;a.l={};a.setOptions(k);l.h=0})}
+x.reset=function(){var a=this;return E(function(b){a.j&&(a.j.reset(),a.s={},a.v={});b.h=0})};
+x.setOptions=function(a,b){var c=this;if(b=b||this.h.options){for(var d=[],e=[],g={},f=A(Object.keys(a)),h=f.next();!h.done;g={X:g.X,Y:g.Y},h=f.next())if(h=h.value,!(h in this.l&&this.l[h]===a[h])){this.l[h]=a[h];var k=b[h];void 0!==k&&(k.onChange&&(g.X=k.onChange,g.Y=a[h],d.push(function(l){return function(){var m;return E(function(r){if(1==r.h)return D(r,l.X(l.Y),2);m=r.i;!0===m&&(c.u=!0);r.h=0})}}(g))),k.graphOptionXref&&(h=Object.assign({},{calculatorName:"",calculatorIndex:0},k.graphOptionXref,
+{valueNumber:1===k.type?a[h]:0,valueBoolean:0===k.type?a[h]:!1,valueString:2===k.type?a[h]:""}),e.push(h)))}if(0!==d.length||0!==e.length)this.u=!0,this.H=(void 0===this.H?[]:this.H).concat(e),this.F=(void 0===this.F?[]:this.F).concat(d)}};
+function jd(a){var b,c,d,e,g,f,h;return E(function(k){switch(k.h){case 1:if(!a.u)return k.return();if(!a.F){k.h=2;break}b=A(a.F);c=b.next();case 3:if(c.done){k.h=5;break}d=c.value;return D(k,d(),4);case 4:c=b.next();k.h=3;break;case 5:a.F=void 0;case 2:if(a.H){e=new a.i.GraphOptionChangeRequestList;g=A(a.H);for(f=g.next();!f.done;f=g.next())h=f.value,e.push_back(h);a.j.changeOptions(e);e.delete();a.H=void 0}a.u=!1;k.h=0}})}
+x.initialize=function(){var a=this;return E(function(b){return 1==b.h?D(b,fd(a),2):3!=b.h?D(b,hd(a),3):D(b,jd(a),0)})};function gd(a,b){var c,d;return E(function(e){if(b in a.L)return e.return(a.L[b]);c=a.locateFile(b,"");d=fetch(c).then(function(g){return g.arrayBuffer()});a.L[b]=d;return e.return(d)})}x.overrideFile=function(a,b){this.j?this.j.overrideFile(a,b):this.D[a]=b};x.clearOverriddenFiles=function(){this.D={};this.j&&this.j.clearOverriddenFiles()};
+x.send=function(a,b){var c=this,d,e,g,f,h,k,l,m,r;return E(function(p){switch(p.h){case 1:if(!c.h.inputs)return p.return();d=1E3*(void 0===b||null===b?performance.now():b);return D(p,c.I,2);case 2:return D(p,c.initialize(),3);case 3:e=new c.i.PacketDataList;g=A(Object.keys(a));for(f=g.next();!f.done;f=g.next())if(h=f.value,k=c.h.inputs[h]){a:{var n=a[h];switch(k.type){case "video":var q=c.s[k.stream];q||(q=new Wc(c.i,c.K),c.s[k.stream]=q);0===q.m&&(q.m=q.i.createTexture());if("undefined"!==typeof HTMLVideoElement&&
+n instanceof HTMLVideoElement){var t=n.videoWidth;var w=n.videoHeight}else"undefined"!==typeof HTMLImageElement&&n instanceof HTMLImageElement?(t=n.naturalWidth,w=n.naturalHeight):(t=n.width,w=n.height);w={glName:q.m,width:t,height:w};t=q.h;t.canvas.width=w.width;t.canvas.height=w.height;t.activeTexture(t.TEXTURE0);q.i.bindTexture2d(q.m);t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,n);q.i.bindTexture2d(0);q=w;break a;case "detections":q=c.s[k.stream];q||(q=new Zc(c.i),c.s[k.stream]=q);
+q.data||(q.data=new q.h.DetectionListData);q.data.reset(n.length);for(w=0;w<n.length;++w){t=n[w];var v=q.data,B=v.setBoundingBox,J=w;var I=t.la;var u=new Qc;V(u,1,I.sa);V(u,2,I.ta);V(u,3,I.height);V(u,4,I.width);V(u,5,I.rotation);U(u,6,I.pa);I=u.l();B.call(v,J,I);if(t.ea)for(v=0;v<t.ea.length;++v){u=t.ea[v];B=q.data;J=B.addNormalizedLandmark;I=w;u=Object.assign({},u,{visibility:u.visibility?u.visibility:0});var C=new Lc;V(C,1,u.x);V(C,2,u.y);V(C,3,u.z);u.visibility&&V(C,4,u.visibility);u=C.l();J.call(B,
+I,u)}if(t.ba)for(v=0;v<t.ba.length;++v)B=q.data,J=B.addClassification,I=w,u=t.ba[v],C=new Z,V(C,2,u.qa),u.index&&U(C,1,u.index),u.label&&U(C,3,u.label),u.displayName&&U(C,4,u.displayName),u=C.l(),J.call(B,I,u)}q=q.data;break a;default:q={}}}l=q;m=k.stream;switch(k.type){case "video":e.pushTexture2d(Object.assign({},l,{stream:m,timestamp:d}));break;case "detections":r=l;r.stream=m;r.timestamp=d;e.pushDetectionList(r);break;default:throw Error("Unknown input config type: '"+k.type+"'");}}c.j.send(e);
+return D(p,c.I,4);case 4:e.delete(),p.h=0}})};
+function kd(a,b,c){var d,e,g,f,h,k,l,m,r,p,n,q,t,w;return E(function(v){switch(v.h){case 1:if(!c)return v.return(b);d={};e=0;g=A(Object.keys(c));for(f=g.next();!f.done;f=g.next())h=f.value,k=c[h],"string"!==typeof k&&"texture"===k.type&&void 0!==b[k.stream]&&++e;1<e&&(a.M=!1);l=A(Object.keys(c));f=l.next();case 2:if(f.done){v.h=4;break}m=f.value;r=c[m];if("string"===typeof r)return t=d,w=m,D(v,ld(a,m,b[r]),14);p=b[r.stream];if("detection_list"===r.type){if(p){var B=p.getRectList();for(var J=p.getLandmarksList(),
+I=p.getClassificationsList(),u=[],C=0;C<B.size();++C){var T=Sc(B.get(C)),od=W(T,1),pd=W(T,2),qd=W(T,3),rd=W(T,4),sd=W(T,5,0),za=void 0;za=void 0===za?0:za;T={la:{sa:od,ta:pd,height:qd,width:rd,rotation:sd,pa:Rb(S(T,6),za)},ea:Ob(Pc(J.get(C)),Lc,1).map(Vc),ba:Uc(Kc(I.get(C)))};u.push(T)}B=u}else B=[];d[m]=B;v.h=7;break}if("proto_list"===r.type){if(p){B=Array(p.size());for(J=0;J<p.size();J++)B[J]=p.get(J);p.delete()}else B=[];d[m]=B;v.h=7;break}if(void 0===p){v.h=3;break}if("float_list"===r.type){d[m]=
+p;v.h=7;break}if("proto"===r.type){d[m]=p;v.h=7;break}if("texture"!==r.type)throw Error("Unknown output config type: '"+r.type+"'");n=a.v[m];n||(n=new Wc(a.i,a.K),a.v[m]=n);return D(v,Xc(n,p,a.M),13);case 13:q=v.i,d[m]=q;case 7:r.transform&&d[m]&&(d[m]=r.transform(d[m]));v.h=3;break;case 14:t[w]=v.i;case 3:f=l.next();v.h=2;break;case 4:return v.return(d)}})}
+function ld(a,b,c){var d;return E(function(e){return"number"===typeof c||c instanceof Uint8Array||c instanceof a.i.Uint8BlobList?e.return(c):c instanceof a.i.Texture2dDataOut?(d=a.v[b],d||(d=new Wc(a.i,a.K),a.v[b]=d),e.return(Xc(d,c,a.M))):e.return(void 0)})}
+function id(a,b){for(var c=b.name||"$",d=[].concat(ea(b.wants)),e=new a.i.StringList,g=A(b.wants),f=g.next();!f.done;f=g.next())e.push_back(f.value);g=a.i.PacketListener.implement({onResults:function(h){for(var k={},l=0;l<b.wants.length;++l)k[d[l]]=h.get(l);var m=a.listeners[c];m&&(a.I=kd(a,k,b.outs).then(function(r){r=m(r);for(var p=0;p<b.wants.length;++p){var n=k[d[p]];"object"===typeof n&&n.hasOwnProperty&&n.hasOwnProperty("delete")&&n.delete()}r&&(a.I=r)}))}});a.j.attachMultiListener(e,g);e.delete()}
+x.onResults=function(a,b){this.listeners[b||"$"]=a};Aa("Solution",ed);Aa("OptionType",{BOOL:0,NUMBER:1,ua:2,0:"BOOL",1:"NUMBER",2:"STRING"});function md(a){void 0===a&&(a=0);switch(a){case 1:return"selfie_segmentation_landscape.tflite";default:return"selfie_segmentation.tflite"}}
+function nd(a){var b=this;a=a||{};this.h=new ed({locateFile:a.locateFile,files:function(c){return[{simd:!0,url:"selfie_segmentation_solution_simd_wasm_bin.js"},{simd:!1,url:"selfie_segmentation_solution_wasm_bin.js"},{data:!0,url:md(c.modelSelection)}]},graph:{url:"selfie_segmentation.binarypb"},listeners:[{wants:["segmentation_mask","image_transformed"],outs:{image:{type:"texture",stream:"image_transformed"},segmentationMask:{type:"texture",stream:"segmentation_mask"}}}],inputs:{image:{type:"video",
+stream:"input_frames_gpu"}},options:{useCpuInference:{type:0,graphOptionXref:{calculatorType:"InferenceCalculator",fieldName:"use_cpu_inference"},default:"object"!==typeof window||void 0===window.navigator?!1:"iPad Simulator;iPhone Simulator;iPod Simulator;iPad;iPhone;iPod".split(";").includes(navigator.platform)||navigator.userAgent.includes("Mac")&&"ontouchend"in document},selfieMode:{type:0,graphOptionXref:{calculatorType:"GlScalerCalculator",calculatorIndex:1,fieldName:"flip_horizontal"}},modelSelection:{type:1,
+graphOptionXref:{calculatorType:"ConstantSidePacketCalculator",calculatorName:"ConstantSidePacketCalculatorModelSelection",fieldName:"int_value"},onChange:function(c){var d,e,g;return E(function(f){if(1==f.h)return d=md(c),e="third_party/mediapipe/modules/selfie_segmentation/"+d,D(f,gd(b.h,d),2);g=f.i;b.h.overrideFile(e,g);return f.return(!0)})}}}})}x=nd.prototype;x.close=function(){this.h.close();return Promise.resolve()};x.onResults=function(a){this.h.onResults(a)};
+x.initialize=function(){var a=this;return E(function(b){return D(b,a.h.initialize(),0)})};x.reset=function(){this.h.reset()};x.send=function(a){var b=this;return E(function(c){return D(c,b.h.send(a),0)})};x.setOptions=function(a){this.h.setOptions(a)};Aa("SelfieSegmentation",nd);Aa("VERSION","0.1.1675465747");}).call(this);

docs/assets/@mediapipe/selfie_segmentation/selfie_segmentation_solution_simd_wasm_bin.js

@@ -0,0 +1,21 @@
+
+var createMediapipeSolutionsWasm = (() => {
+  var _scriptDir = typeof document !== 'undefined' && document.currentScript ? document.currentScript.src : undefined;
+  if (typeof __filename !== 'undefined') _scriptDir = _scriptDir || __filename;
+  return (
+function(createMediapipeSolutionsWasm) {
+  createMediapipeSolutionsWasm = createMediapipeSolutionsWasm || {};
+
+var Module=typeof createMediapipeSolutionsWasm!="undefined"?createMediapipeSolutionsWasm:{};var readyPromiseResolve,readyPromiseReject;Module["ready"]=new Promise(function(resolve,reject){readyPromiseResolve=resolve;readyPromiseReject=reject});["_main","_fflush","___getTypeName","__embind_initialize_bindings","onRuntimeInitialized"].forEach(prop=>{if(!Object.getOwnPropertyDescriptor(Module["ready"],prop)){Object.defineProperty(Module["ready"],prop,{get:()=>abort("You are getting "+prop+" on the Promise object, instead of the instance. Use .then() to get called back with the instance, see the MODULARIZE docs in src/settings.js"),set:()=>abort("You are setting "+prop+" on the Promise object, instead of the instance. Use .then() to get called back with the instance, see the MODULARIZE docs in src/settings.js")})}});var moduleOverrides=Object.assign({},Module);var arguments_=[];var thisProgram="./this.program";var quit_=(status,toThrow)=>{throw toThrow};var ENVIRONMENT_IS_WEB=typeof window=="object";var ENVIRONMENT_IS_WORKER=typeof importScripts=="function";var ENVIRONMENT_IS_NODE=typeof process=="object"&&typeof process.versions=="object"&&typeof process.versions.node=="string";var ENVIRONMENT_IS_SHELL=!ENVIRONMENT_IS_WEB&&!ENVIRONMENT_IS_NODE&&!ENVIRONMENT_IS_WORKER;if(Module["ENVIRONMENT"]){throw new Error("Module.ENVIRONMENT has been deprecated. To force the environment, use the ENVIRONMENT compile-time option (for example, -sENVIRONMENT=web or -sENVIRONMENT=node)")}var scriptDirectory="";function locateFile(path){if(Module["locateFile"]){return Module["locateFile"](path,scriptDirectory)}return scriptDirectory+path}var read_,readAsync,readBinary,setWindowTitle;function logExceptionOnExit(e){if(e instanceof ExitStatus)return;let toLog=e;if(e&&typeof e=="object"&&e.stack){toLog=[e,e.stack]}err("exiting due to exception: "+toLog)}if(ENVIRONMENT_IS_NODE){if(typeof process=="undefined"||!process.release||process.release.name!=="node")throw new Error("not compiled for this environment (did you build to HTML and try to run it not on the web, or set ENVIRONMENT to something - like node - and run it someplace else - like on the web?)");var fs=require("fs");var nodePath=require("path");if(ENVIRONMENT_IS_WORKER){scriptDirectory=nodePath.dirname(scriptDirectory)+"/"}else{scriptDirectory=__dirname+"/"}read_=(filename,binary)=>{filename=isFileURI(filename)?new URL(filename):nodePath.normalize(filename);return fs.readFileSync(filename,binary?undefined:"utf8")};readBinary=filename=>{var ret=read_(filename,true);if(!ret.buffer){ret=new Uint8Array(ret)}assert(ret.buffer);return ret};readAsync=(filename,onload,onerror)=>{filename=isFileURI(filename)?new URL(filename):nodePath.normalize(filename);fs.readFile(filename,function(err,data){if(err)onerror(err);else onload(data.buffer)})};if(process["argv"].length>1){thisProgram=process["argv"][1].replace(/\\/g,"/")}arguments_=process["argv"].slice(2);process["on"]("uncaughtException",function(ex){if(!(ex instanceof ExitStatus)){throw ex}});process["on"]("unhandledRejection",function(reason){throw reason});quit_=(status,toThrow)=>{if(keepRuntimeAlive()){process["exitCode"]=status;throw toThrow}logExceptionOnExit(toThrow);process["exit"](status)};Module["inspect"]=function(){return"[Emscripten Module object]"}}else if(ENVIRONMENT_IS_SHELL){if(typeof process=="object"&&typeof require==="function"||typeof window=="object"||typeof importScripts=="function")throw new Error("not compiled for this environment (did you build to HTML and try to run it not on the web, or set ENVIRONMENT to something - like node - and run it someplace else - like on the web?)");if(typeof read!="undefined"){read_=function shell_read(f){return read(f)}}readBinary=function readBinary(f){let data;if(typeof readbuffer=="function"){return new Uint8Array(readbuffer(f))}data=read(f,"binary");assert(typeof data=="object");return data};readAsync=function readAsync(f,onload,onerror){setTimeout(()=>onload(readBinary(f)),0)};if(typeof scriptArgs!="undefined"){arguments_=scriptArgs}else if(typeof arguments!="undefined"){arguments_=arguments}if(typeof quit=="function"){quit_=(status,toThrow)=>{logExceptionOnExit(toThrow);quit(status)}}if(typeof print!="undefined"){if(typeof console=="undefined")console={};console.log=print;console.warn=console.error=typeof printErr!="undefined"?printErr:print}}else if(ENVIRONMENT_IS_WEB||ENVIRONMENT_IS_WORKER){if(ENVIRONMENT_IS_WORKER){scriptDirectory=self.location.href}else if(typeof document!="undefined"&&document.currentScript){scriptDirectory=document.currentScript.src}if(_scriptDir){scriptDirectory=_scriptDir}if(scriptDirectory.indexOf("blob:")!==0){scriptDirectory=scriptDirectory.substr(0,scriptDirectory.replace(/[?#].*/,"").lastIndexOf("/")+1)}else{scriptDirectory=""}if(!(typeof window=="object"||typeof importScripts=="function"))throw new Error("not compiled for this environment (did you build to HTML and try to run it not on the web, or set ENVIRONMENT to something - like node - anLine truncated
+
+
+  return createMediapipeSolutionsWasm.ready
+}
+);
+})();
+if (typeof exports === 'object' && typeof module === 'object')
+  module.exports = createMediapipeSolutionsWasm;
+else if (typeof define === 'function' && define['amd'])
+  define([], function() { return createMediapipeSolutionsWasm; });
+else if (typeof exports === 'object')
+  exports["createMediapipeSolutionsWasm"] = createMediapipeSolutionsWasm;

docs/assets/@mediapipe/selfie_segmentation/selfie_segmentation_solution_wasm_bin.js

@@ -0,0 +1,21 @@
+
+var createMediapipeSolutionsWasm = (() => {
+  var _scriptDir = typeof document !== 'undefined' && document.currentScript ? document.currentScript.src : undefined;
+  if (typeof __filename !== 'undefined') _scriptDir = _scriptDir || __filename;
+  return (
+function(createMediapipeSolutionsWasm) {
+  createMediapipeSolutionsWasm = createMediapipeSolutionsWasm || {};
+
+var Module=typeof createMediapipeSolutionsWasm!="undefined"?createMediapipeSolutionsWasm:{};var readyPromiseResolve,readyPromiseReject;Module["ready"]=new Promise(function(resolve,reject){readyPromiseResolve=resolve;readyPromiseReject=reject});["_main","_fflush","___getTypeName","__embind_initialize_bindings","onRuntimeInitialized"].forEach(prop=>{if(!Object.getOwnPropertyDescriptor(Module["ready"],prop)){Object.defineProperty(Module["ready"],prop,{get:()=>abort("You are getting "+prop+" on the Promise object, instead of the instance. Use .then() to get called back with the instance, see the MODULARIZE docs in src/settings.js"),set:()=>abort("You are setting "+prop+" on the Promise object, instead of the instance. Use .then() to get called back with the instance, see the MODULARIZE docs in src/settings.js")})}});var moduleOverrides=Object.assign({},Module);var arguments_=[];var thisProgram="./this.program";var quit_=(status,toThrow)=>{throw toThrow};var ENVIRONMENT_IS_WEB=typeof window=="object";var ENVIRONMENT_IS_WORKER=typeof importScripts=="function";var ENVIRONMENT_IS_NODE=typeof process=="object"&&typeof process.versions=="object"&&typeof process.versions.node=="string";var ENVIRONMENT_IS_SHELL=!ENVIRONMENT_IS_WEB&&!ENVIRONMENT_IS_NODE&&!ENVIRONMENT_IS_WORKER;if(Module["ENVIRONMENT"]){throw new Error("Module.ENVIRONMENT has been deprecated. To force the environment, use the ENVIRONMENT compile-time option (for example, -sENVIRONMENT=web or -sENVIRONMENT=node)")}var scriptDirectory="";function locateFile(path){if(Module["locateFile"]){return Module["locateFile"](path,scriptDirectory)}return scriptDirectory+path}var read_,readAsync,readBinary,setWindowTitle;function logExceptionOnExit(e){if(e instanceof ExitStatus)return;let toLog=e;if(e&&typeof e=="object"&&e.stack){toLog=[e,e.stack]}err("exiting due to exception: "+toLog)}if(ENVIRONMENT_IS_NODE){if(typeof process=="undefined"||!process.release||process.release.name!=="node")throw new Error("not compiled for this environment (did you build to HTML and try to run it not on the web, or set ENVIRONMENT to something - like node - and run it someplace else - like on the web?)");var fs=require("fs");var nodePath=require("path");if(ENVIRONMENT_IS_WORKER){scriptDirectory=nodePath.dirname(scriptDirectory)+"/"}else{scriptDirectory=__dirname+"/"}read_=(filename,binary)=>{filename=isFileURI(filename)?new URL(filename):nodePath.normalize(filename);return fs.readFileSync(filename,binary?undefined:"utf8")};readBinary=filename=>{var ret=read_(filename,true);if(!ret.buffer){ret=new Uint8Array(ret)}assert(ret.buffer);return ret};readAsync=(filename,onload,onerror)=>{filename=isFileURI(filename)?new URL(filename):nodePath.normalize(filename);fs.readFile(filename,function(err,data){if(err)onerror(err);else onload(data.buffer)})};if(process["argv"].length>1){thisProgram=process["argv"][1].replace(/\\/g,"/")}arguments_=process["argv"].slice(2);process["on"]("uncaughtException",function(ex){if(!(ex instanceof ExitStatus)){throw ex}});process["on"]("unhandledRejection",function(reason){throw reason});quit_=(status,toThrow)=>{if(keepRuntimeAlive()){process["exitCode"]=status;throw toThrow}logExceptionOnExit(toThrow);process["exit"](status)};Module["inspect"]=function(){return"[Emscripten Module object]"}}else if(ENVIRONMENT_IS_SHELL){if(typeof process=="object"&&typeof require==="function"||typeof window=="object"||typeof importScripts=="function")throw new Error("not compiled for this environment (did you build to HTML and try to run it not on the web, or set ENVIRONMENT to something - like node - and run it someplace else - like on the web?)");if(typeof read!="undefined"){read_=function shell_read(f){return read(f)}}readBinary=function readBinary(f){let data;if(typeof readbuffer=="function"){return new Uint8Array(readbuffer(f))}data=read(f,"binary");assert(typeof data=="object");return data};readAsync=function readAsync(f,onload,onerror){setTimeout(()=>onload(readBinary(f)),0)};if(typeof scriptArgs!="undefined"){arguments_=scriptArgs}else if(typeof arguments!="undefined"){arguments_=arguments}if(typeof quit=="function"){quit_=(status,toThrow)=>{logExceptionOnExit(toThrow);quit(status)}}if(typeof print!="undefined"){if(typeof console=="undefined")console={};console.log=print;console.warn=console.error=typeof printErr!="undefined"?printErr:print}}else if(ENVIRONMENT_IS_WEB||ENVIRONMENT_IS_WORKER){if(ENVIRONMENT_IS_WORKER){scriptDirectory=self.location.href}else if(typeof document!="undefined"&&document.currentScript){scriptDirectory=document.currentScript.src}if(_scriptDir){scriptDirectory=_scriptDir}if(scriptDirectory.indexOf("blob:")!==0){scriptDirectory=scriptDirectory.substr(0,scriptDirectory.replace(/[?#].*/,"").lastIndexOf("/")+1)}else{scriptDirectory=""}if(!(typeof window=="object"||typeof importScripts=="function"))throw new Error("not compiled for this environment (did you build to HTML and try to run it not on the web, or set ENVIRONMENT to something - like node - anLine truncated
+
+
+  return createMediapipeSolutionsWasm.ready
+}
+);
+})();
+if (typeof exports === 'object' && typeof module === 'object')
+  module.exports = createMediapipeSolutionsWasm;
+else if (typeof define === 'function' && define['amd'])
+  define([], function() { return createMediapipeSolutionsWasm; });
+else if (typeof exports === 'object')
+  exports["createMediapipeSolutionsWasm"] = createMediapipeSolutionsWasm;

docs/assets/css/style.css

@@ -14,6 +14,9 @@ body {
     padding: 0;
     color: #ccc;
     background: rgb(16, 17, 19);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 *,
@@ -36,6 +39,10 @@ img {
     vertical-align: top;
 }
 
+input[type="file"] {
+  cursor: pointer;
+}
+
 ::-webkit-scrollbar {
     width: 5px;
     height: 5px;
@@ -53,9 +60,10 @@ img {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 13px;
+    font-size: 14px;
     height: 48px;
     width: 100%;
+    flex-shrink: 0;
     padding: 0 0 0 20px;
     border-bottom: 1px solid rgb(17, 21, 24);
     background-color: rgb(28, 32, 34);
@@ -65,30 +73,48 @@ img {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin-right: 30px;
 }
 
 .header .logo img {
     margin-right: 10px;
 }
 
+.header .tool {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    line-height: 1;
+    gap: 20px;
+}
+
+.header .checkbox {
+    display: flex;
+    align-items: center;
+}
+
+.header .checkbox input {
+    margin-right: 5px;
+}
+
 .header .menus {
     display: flex;
     align-items: center;
     flex: 1;
     height: 100%;
+    gap: 30px;
 }
 
 .header .menus .item {
     display: flex;
     align-items: center;
-    margin-left: 20px;
     height: 100%;
     line-height: 1;
 }
 
 .header .menus .has-sub-menu {
     position: relative;
-    cursor: pointer;
 }
 
 .header .menus .has-sub-menu:hover .sub-menu {
@@ -98,36 +124,44 @@ img {
 .header .menus .has-sub-menu .sub-menu {
     display: none;
     position: absolute;
-    z-index: 9;
+    z-index: 9999;
-    top: 45px;
+    top: 40px;
     left: 0;
-    width: 200px;
+    width: 280px;
     padding: 0 10px;
-    background: #2b2b2b;
+    background: #1b1b1b;
+    border-radius: 3px;
+    border: 1px solid rgb(255, 255, 255, 0.05);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
 .header .menus .has-sub-menu .sub-menu ul {
     padding: 0;
-    margin-bottom: 15px;
+    margin-bottom: 20px;
 }
 
 .header .menus .has-sub-menu .sub-menu li {
     display: block;
     list-style: none;
-    margin-bottom: 15px;
+    margin-bottom: 10px;
 }
 
 .header .menus .has-sub-menu .sub-menu li.title {
     color: #fff;
     font-size: 16px;
     margin-bottom: 15px;
+    font-weight: bold;
+}
+
+.header .menus .has-sub-menu .sub-menu li a:hover {
+    text-decoration: underline;
 }
 
 .header .run {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100px;
+    padding: 0 15px;
     height: 100%;
     line-height: 1;
     cursor: pointer;
@@ -144,6 +178,7 @@ img {
     display: flex;
     flex: 1;
     height: 100%;
+    overflow: hidden;
 }
 
 .main .part-left {
@@ -154,39 +189,61 @@ img {
 }
 
 .main .part-left .libs {
-    height: 55px;
+    display: flex;
+    height: 50px;
+    border-bottom: 1px solid rgb(17, 21, 24);
+}
+
+.main .part-left .upload {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 15px;
+    height: 100%;
+    font-size: 13px;
+    color: #f1fa8c;
+    border-right: 1px solid rgb(17, 21, 24);
+    background-color: rgb(39, 41, 54);
+}
+
+.main .part-left #file {
+    opacity: 0;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
 }
 
 .main .part-left .libsInput {
     height: 100%;
-    width: 100%;
+    flex: 1;
     padding: 10px;
     outline: none;
     resize: none;
     border: none;
     font-size: 13px;
     color: #ccc;
-    border-bottom: 1px solid rgb(17, 21, 24);
     background-color: rgb(28, 32, 34);
 }
 
 .main .part-left .code {
     flex: 1;
-    overflow: auto;
 }
 
 .main .part-left .code .codeMirrorWrap {
     height: 100%;
-    overflow: hidden;
 }
 
 .main .part-right {
     flex: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 .part-right .video-wrap {
     display: flex;
-    height: 70%;
+    flex: 1;
     align-items: center;
     justify-content: center;
     flex-direction: column;
@@ -195,6 +252,7 @@ img {
 
 .part-right .video-wrap .artplayer-app {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     font-size: 20px;
@@ -243,3 +301,14 @@ img {
     background-position: center center;
     background-size: contain;
 }
+
+.fullscreenWeb {
+    position: fixed;
+    z-index: 9999;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}

docs/assets/example/ads.js

@@ -1,45 +1,48 @@
-var art = new Artplayer({
+// npm i artplayer-plugin-ads
-    container: '.artplayer-app',
+// import artplayerPluginAds from 'artplayer-plugin-ads';
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-    fullscreen: true,
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginAds({
-            // html广告，假如是视频广告则忽略该值
-            html: '<img src="/assets/sample/poster.jpg">',
 
-            // 视频广告的地址
+const art = new Artplayer({
-            video: '/assets/sample/test1.mp4',
+  container: '.artplayer-app',
+  url: '/assets/sample/video.mp4',
+  autoSize: true,
+  fullscreen: true,
+  fullscreenWeb: true,
+  plugins: [
+    artplayerPluginAds({
+      // html广告，假如是视频广告则忽略该值
+      html: '<img src="/assets/sample/poster.jpg">',
 
-            // 广告跳转网址，为空则不跳转
+      // 视频广告的地址
-            url: 'http://artplayer.org',
+      video: '/assets/sample/test1.mp4',
 
-            // 必须观看的时长，期间不能被跳过，单位为秒
+      // 广告跳转网址，为空则不跳转
-            // 当该值大于或等于totalDuration时，不能提前关闭广告
+      url: 'http://artplayer.org',
-            // 当该值等于或小于0时，则随时都可以关闭广告
-            playDuration: 5,
 
-            // 广告总时长，单位为秒
+      // 必须观看的时长，期间不能被跳过，单位为秒
-            totalDuration: 10,
+      // 当该值大于或等于totalDuration时，不能提前关闭广告
+      // 当该值等于或小于0时，则随时都可以关闭广告
+      playDuration: 5,
 
-            // 多语言支持
+      // 广告总时长，单位为秒
-            i18n: {
+      totalDuration: 10,
-                close: '关闭广告',
+
-                countdown: '%s秒',
+      // 多语言支持
-                detail: '查看详情',
+      i18n: {
-                canBeClosed: '%s秒后可关闭广告',
+        close: '关闭广告',
-            },
+        countdown: '%s秒',
-        }),
+        detail: '查看详情',
-    ],
+        canBeClosed: '%s秒后可关闭广告',
-});
+      },
+    }),
+  ],
+})
 
 // 广告被点击
 art.on('artplayerPluginAds:click', (ads) => {
-    console.info('广告被点击', ads);
+  console.info('广告被点击', ads)
-});
+})
 
 // 广告被跳过
 art.on('artplayerPluginAds:skip', (ads) => {
-    console.info('广告被跳过', ads);
+  console.info('广告被跳过', ads)
-});
+})

docs/assets/example/ambilight.js

@@ -0,0 +1,16 @@
+// npm i artplayer-plugin-ambilight
+// import artplayerPluginAmbilight from 'artplayer-plugin-ambilight';
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/video.mp4',
+  autoSize: true,
+  plugins: [
+    artplayerPluginAmbilight({
+      blur: '50px',
+      opacity: 1,
+      frequency: 10,
+      duration: 0.3,
+    }),
+  ],
+})

docs/assets/example/asr.js

@@ -0,0 +1,61 @@
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/steve-jobs.mp4',
+  autoSize: true,
+  fullscreen: true,
+  fullscreenWeb: true,
+  moreVideoAttr: {
+    // crossOrigin: 'anonymous',
+  },
+  plugins: [
+    artplayerPluginAsr({
+      length: 2,
+      interval: 40,
+      sampleRate: 16000,
+      autoHideTimeout: 10000,
+      // Use your AI tool to convert pcm into subtitles
+      onAudioChunk: ({ pcm }) => startAsr(pcm),
+    }),
+  ],
+})
+
+let ws = null
+let loading = false
+
+function stopAsr() {
+  try {
+    ws.send(JSON.stringify({ type: 'end' }))
+    ws.close()
+  }
+  catch {}
+  ws = null
+  loading = false
+}
+
+async function startAsr(buffer) {
+  if (loading)
+    return
+  if (!ws) {
+    loading = true
+    const api = 'https://api.aimu.app/asr/tencent?engine_model_type=16k_en'
+    const { url } = await (await fetch(api)).json()
+    ws = new WebSocket(url)
+    ws.binaryType = 'arraybuffer'
+    ws.onmessage = (event) => {
+      const { code, result, message } = JSON.parse(event.data)
+      if (code === 0) {
+        art.plugins.artplayerPluginAsr.append(result?.voice_text_str)
+      }
+      else {
+        console.error(code, message)
+        stopAsr()
+      }
+    }
+    loading = false
+  }
+  if (ws?.readyState === WebSocket.OPEN) {
+    ws.send(buffer)
+  }
+}
+
+art.on('destroy', stopAsr)

docs/assets/example/asr.local.js

@@ -0,0 +1,68 @@
+/* global Artplayer, artplayerPluginAsr */
+// Local audio capture demo. The subtitles below are simulated, not recognized speech.
+// No audio is uploaded; only the sample media is loaded from this local site.
+const statistics = document.createElement('div')
+statistics.textContent = 'Local ASR demo: press play. No recognition service is used.'
+let chunks = 0
+let pcmBytes = 0
+let wavBytes = 0
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/steve-jobs.mp4',
+  autoSize: true,
+  fullscreen: true,
+  fullscreenWeb: true,
+  layers: [{
+    name: 'asr-local-statistics',
+    html: statistics,
+    style: {
+      position: 'absolute',
+      top: '12px',
+      left: '12px',
+      right: '12px',
+      padding: '8px 12px',
+      background: 'rgba(0, 0, 0, 0.65)',
+      color: '#fff',
+      fontSize: '12px',
+      whiteSpace: 'pre-line',
+      pointerEvents: 'none',
+    },
+  }],
+  controls: [{
+    name: 'asr-local-stop',
+    position: 'right',
+    html: 'Stop ASR',
+    tooltip: 'Stop capture; pause and play to restart',
+    async click() {
+      await art.plugins.artplayerPluginAsr.stop()
+      if (!art.isDestroy)
+        statistics.textContent = 'Local capture stopped. Pause and play to restart. Nothing was uploaded.'
+    },
+  }],
+  plugins: [artplayerPluginAsr({
+    length: 2,
+    interval: 250,
+    sampleRate: 16000,
+    autoHideTimeout: 5000,
+    onAudioChunk({ pcm, wav }) {
+      if (art.isDestroy)
+        return
+      chunks++
+      pcmBytes += pcm.byteLength
+      wavBytes += wav.byteLength
+      const sampleRate = new DataView(wav).getUint32(24, true)
+      const samples = new DataView(pcm)
+      let peak = 0
+      for (let offset = 0; offset < pcm.byteLength; offset += 2)
+        peak = Math.max(peak, Math.abs(samples.getInt16(offset, true)))
+      const duration = (pcmBytes / 2 / sampleRate).toFixed(2)
+      statistics.textContent = [
+        'Local capture only - simulated subtitles, no speech recognition',
+        `Chunks: ${chunks} | ${sampleRate} Hz mono PCM16 | ${duration} seconds captured`,
+        `PCM: ${pcmBytes} bytes | WAV: ${wavBytes} bytes | Current peak: ${peak}`,
+      ].join('\n')
+      return `Simulated local subtitle: audio chunk ${chunks} received.`
+    },
+  })],
+})

docs/assets/example/audio.track.js

@@ -0,0 +1,14 @@
+// npm i artplayer-plugin-audio-track
+// import artplayerPluginAudioTrack from 'artplayer-plugin-audio-track';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/sprite-fight.mp4',
+    plugins: [
+        artplayerPluginAudioTrack({
+            url: '/assets/sample/sprite-fight.aac',
+            offset: 0, 
+            sync: 0.3, 
+        }),
+    ],
+});

docs/assets/example/auto.thumbnail.js

@@ -0,0 +1,12 @@
+// npm i artplayer-plugin-auto-thumbnail
+// import artplayerPluginAutoThumbnail from 'artplayer-plugin-auto-thumbnail';
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/video.mp4',
+  plugins: [
+    artplayerPluginAutoThumbnail({
+      //
+    }),
+  ],
+})

docs/assets/example/canvas.js

@@ -0,0 +1,33 @@
+// npm i artplayer-proxy-canvas
+// import artplayerProxyCanvas from 'artplayer-proxy-canvas';
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/video.mp4',
+  poster: '/assets/sample/poster.jpg',
+  volume: 0.5,
+  autoplay: false,
+  autoSize: false,
+  screenshot: true,
+  setting: true,
+  loop: true,
+  flip: true,
+  pip: true,
+  playbackRate: true,
+  aspectRatio: true,
+  fullscreen: true,
+  fullscreenWeb: true,
+  miniProgressBar: true,
+  autoPlayback: true,
+  autoOrientation: true,
+  subtitle: {
+    url: '/assets/sample/subtitle.srt',
+  },
+  thumbnails: {
+    url: '/assets/sample/thumbnails.png',
+    number: 60,
+    column: 10,
+    scale: 0.85,
+  },
+  proxy: artplayerProxyCanvas(),
+})

docs/assets/example/chapter.js

@@ -0,0 +1,28 @@
+// npm i artplayer-plugin-chapter
+// import artplayerPluginChapter from 'artplayer-plugin-chapter';
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/video.mp4',
+  autoSize: true,
+  fullscreen: true,
+  fullscreenWeb: true,
+  miniProgressBar: true,
+  autoOrientation: true,
+  thumbnails: {
+    url: '/assets/sample/thumbnails.png',
+    number: 60,
+    column: 10,
+  },
+  plugins: [
+    artplayerPluginChapter({
+      chapters: [
+        { start: 0, end: 18, title: 'One more chance' },
+        { start: 18, end: 36, title: '谁でもいいはずなのに' },
+        { start: 36, end: 54, title: '夏の想い出がまわる' },
+        { start: 54, end: 72, title: 'こんなとこにあるはずもないのに' },
+        { start: 72, end: Infinity, title: '终わり' },
+      ],
+    }),
+  ],
+})

docs/assets/example/chromecast.js

@@ -0,0 +1,15 @@
+// npm i artplayer-plugin-chromecast
+// import artplayerPluginChromecast from 'artplayer-plugin-chromecast';
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/video.mp4',
+  fullscreen: true,
+  fullscreenWeb: true,
+  plugins: [
+    artplayerPluginChromecast({
+      // sdk: '', // The URL of the Cast SDK
+      // mimeType: '', // The MIME type of the media
+    }),
+  ],
+})

docs/assets/example/danmuku.js

@@ -1,80 +1,54 @@
-var art = new Artplayer({
+// npm i artplayer-plugin-danmuku
-    container: '.artplayer-app',
+// import artplayerPluginDanmuku from 'artplayer-plugin-danmuku';
-    url: '/assets/sample/video.mp4',
+// 使用文档 https://artplayer.org/document/plugin/danmuku.html
-    autoSize: true,
-    fullscreen: true,
-    fullscreenWeb: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku-v2.xml',
-            speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
-            opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
-            fontSize: 25, // 字体大小，支持数字和百分比
-            color: '#FFFFFF', // 默认字体颜色
-            mode: 0, // 默认模式，0-滚动，1-静止
-            margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
-            antiOverlap: true, // 是否防重叠
-            useWorker: true, // 是否使用 web worker
-            synchronousPlayback: false, // 是否同步到播放速度
-            filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
-            lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
-            maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
-            minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
-            maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
-            theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
-            beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
 
-            // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
+const art = new Artplayer({
-            // mount: document.querySelector('.artplayer-danmuku'),
+  container: '.artplayer-app',
-        }),
+  url: '/assets/sample/video.mp4',
-    ],
+  autoSize: true,
-});
+  fullscreen: true,
+  fullscreenWeb: true,
+  autoOrientation: true,
+  plugins: [
+    artplayerPluginDanmuku({
+      danmuku: '/assets/sample/danmuku.xml',
 
-// 监听手动输入的弹幕，保存到数据库
+      // 以下为非必填
-art.on('artplayerPluginDanmuku:emit', (danmu) => {
+      speed: 5, // 弹幕持续时间，范围在[1 ~ 10]
-    console.info('新增弹幕', danmu);
+      margin: [10, '25%'], // 弹幕上下边距，支持像素数字和百分比
-});
+      opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+      color: '#FFFFFF', // 默认弹幕颜色，可以被单独弹幕项覆盖
+      mode: 0, // 默认弹幕模式: 0: 滚动，1: 顶部，2: 底部
+      modes: [0, 1, 2], // 弹幕可见的模式
+      fontSize: 25, // 弹幕字体大小，支持像素数字和百分比
+      antiOverlap: true, // 弹幕是否防重叠
+      synchronousPlayback: false, // 是否同步播放速度
+      mount: undefined, // 弹幕发射器挂载点, 默认为播放器控制栏中部
+      heatmap: true, // 是否开启热力图
+      width: 512, // 当播放器宽度小于此值时，弹幕发射器置于播放器底部
+      points: [], // 热力图数据
+      filter: danmu => danmu.text.length <= 100, // 弹幕载入前的过滤器
+      beforeVisible: () => true, // 弹幕显示前的过滤器，返回 true 则可以发送
+      visible: true, // 弹幕层是否可见
+      emitter: true, // 是否开启弹幕发射器
+      maxLength: 200, // 弹幕输入框最大长度, 范围在[1 ~ 1000]
+      lockTime: 5, // 输入框锁定时间，范围在[1 ~ 60]
+      theme: 'dark', // 弹幕主题，支持 dark 和 light，只在自定义挂载时生效
+      OPACITY: {}, // 不透明度配置项
+      FONT_SIZE: {}, // 弹幕字号配置项
+      MARGIN: {}, // 显示区域配置项
+      SPEED: {}, // 弹幕速度配置项
+      COLOR: [], // 颜色列表配置项
 
-// 监听加载到的弹幕数组
+      // 手动发送弹幕前的过滤器，返回 true 则可以发送，可以做存库处理
-art.on('artplayerPluginDanmuku:loaded', (danmus) => {
+      beforeEmit(danmu) {
-    console.info('加载弹幕', danmus.length);
+        return new Promise((resolve) => {
-});
+          console.log(danmu)
-
+          setTimeout(() => {
-// 监听加载到弹幕的错误
+            resolve(true)
-art.on('artplayerPluginDanmuku:error', (error) => {
+          }, 1000)
-    console.info('加载错误', error);
+        })
-});
+      },
-
+    }),
-// 监听弹幕配置变化
+  ],
-art.on('artplayerPluginDanmuku:config', (option) => {
+})
-    console.info('配置变化', option);
-});
-
-// 监听弹幕停止
-art.on('artplayerPluginDanmuku:stop', () => {
-    console.info('弹幕停止');
-});
-
-// 监听弹幕开始
-art.on('artplayerPluginDanmuku:start', () => {
-    console.info('弹幕开始');
-});
-
-// 监听弹幕隐藏
-art.on('artplayerPluginDanmuku:hide', () => {
-    console.info('弹幕隐藏');
-});
-
-// 监听弹幕显示
-art.on('artplayerPluginDanmuku:show', () => {
-    console.info('弹幕显示');
-});
-
-// 监听弹幕销毁
-art.on('artplayerPluginDanmuku:destroy', () => {
-    console.info('弹幕销毁');
-});

docs/assets/example/danmuku.mask.js

@@ -0,0 +1,22 @@
+// npm i artplayer-plugin-danmuku-mask
+// import artplayerPluginDanmukuMask from 'artplayer-plugin-danmuku-mask';
+
+// npm i @mediapipe/selfie_segmentation
+// 把 node_modules/@mediapipe/selfie_segmentation 目录复制到你的项目下
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/steve-jobs.mp4',
+  autoSize: true,
+  fullscreen: true,
+  fullscreenWeb: true,
+  autoOrientation: true,
+  plugins: [
+    artplayerPluginDanmuku({
+      danmuku: '/assets/sample/danmuku.xml',
+    }),
+    artplayerPluginDanmukuMask({
+      solutionPath: '/assets/@mediapipe/selfie_segmentation',
+    }),
+  ],
+})

docs/assets/example/dash.control.js

@@ -0,0 +1,64 @@
+// npm i dashjs
+// npm i artplayer-plugin-dash-control
+
+// import dashjs from 'dashjs';
+// import artplayerPluginDashControl from 'artplayer-plugin-dash-control';
+
+const useDash = dashjs.supportsMediaSource()
+let dash
+
+function destroyDash() {
+  const previous = dash
+  dash = undefined
+  if (previous)
+    previous.destroy()
+}
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: 'https://media.axprod.net/TestVectors/v7-Clear/Manifest_1080p.mpd',
+  setting: true,
+  plugins: useDash
+    ? [
+        artplayerPluginDashControl({
+          quality: {
+            // Show quality choices in the controls
+            control: true,
+            // Show quality choices in settings
+            setting: true,
+            // Get the quality name from level
+            getName: level => `${level.height}P`,
+            // I18n
+            title: 'Quality',
+            auto: 'Auto',
+          },
+          audio: {
+            // Show audios in control
+            control: true,
+            // Show audios in setting
+            setting: true,
+            // Get the audio name from track
+            getName: track => track.lang?.toUpperCase() || String(track.id ?? 'Audio'),
+            // I18n
+            title: 'Audio',
+            auto: 'Auto',
+          },
+        }),
+      ]
+    : [],
+  customType: {
+    mpd: function playMpd(video, url, art) {
+      destroyDash()
+      if (useDash) {
+        dash = dashjs.MediaPlayer().create()
+        art.dash = dash
+        dash.initialize(video, url, art.option.autoplay)
+      }
+      else {
+        art.notice.show = 'Unsupported playback format: mpd'
+      }
+    },
+  },
+})
+
+art.on('destroy', destroyDash)

docs/assets/example/dash.js

@@ -0,0 +1,29 @@
+// npm i dashjs
+// import dashjs from 'dashjs';
+
+function playMpd(video, url, art) {
+  if (dashjs.supportsMediaSource()) {
+    if (art.dash)
+      art.dash.destroy()
+    const dash = dashjs.MediaPlayer().create()
+    dash.initialize(video, url, art.option.autoplay)
+    art.dash = dash
+    art.on('destroy', () => dash.destroy())
+  }
+  else {
+    art.notice.show = 'Unsupported playback format: mpd'
+  }
+}
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+  type: 'mpd',
+  customType: {
+    mpd: playMpd,
+  },
+})
+
+art.on('ready', () => {
+  console.info(art.dash)
+})

docs/assets/example/document.pip.js

@@ -0,0 +1,19 @@
+// npm i artplayer-plugin-document-pip
+// import artplayerPluginDocumentPip from 'artplayer-plugin-document-pip';
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/video.mp4',
+  plugins: [
+    artplayerPluginDocumentPip({
+      width: 480,
+      height: 270,
+      fallbackToVideoPiP: true,
+      placeholder: `Playing in Document Picture-in-Picture`,
+    }),
+  ],
+})
+
+art.on('document-pip', (state) => {
+  console.log('Document Picture-in-Picture', state)
+})

docs/assets/example/flv.js

@@ -0,0 +1,30 @@
+// npm i flv.js
+// import flvjs from 'flv.js';
+
+function playFlv(video, url, art) {
+  if (flvjs.isSupported()) {
+    if (art.flv)
+      art.flv.destroy()
+    const flv = flvjs.createPlayer({ type: 'flv', url })
+    flv.attachMediaElement(video)
+    flv.load()
+    art.flv = flv
+    art.on('destroy', () => flv.destroy())
+  }
+  else {
+    art.notice.show = 'Unsupported playback format: flv'
+  }
+}
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/video.flv',
+  type: 'flv',
+  customType: {
+    flv: playFlv,
+  },
+})
+
+art.on('ready', () => {
+  console.info(art.flv)
+})

docs/assets/example/hls.control.js

@@ -0,0 +1,68 @@
+// npm i hls.js
+// npm i artplayer-plugin-hls-control
+
+// import Hls from 'hls.js';
+// import artplayerPluginHlsControl from 'artplayer-plugin-hls-control';
+
+const useHls = Hls.isSupported()
+let hls
+
+function destroyHls() {
+  const previous = hls
+  hls = undefined
+  if (previous)
+    previous.destroy()
+}
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: 'https://playertest.longtailvideo.com/adaptive/elephants_dream_v4/index.m3u8',
+  setting: true,
+  plugins: useHls
+    ? [
+        artplayerPluginHlsControl({
+          quality: {
+            // Show quality choices in the controls
+            control: true,
+            // Show quality choices in settings
+            setting: true,
+            // Get the quality name from level
+            getName: level => `${level.height}P`,
+            // I18n
+            title: 'Quality',
+            auto: 'Auto',
+          },
+          audio: {
+            // Show audios in control
+            control: true,
+            // Show audios in setting
+            setting: true,
+            // Get the audio name from track
+            getName: track => track.name || track.lang || 'Audio',
+            // I18n
+            title: 'Audio',
+            auto: 'Auto',
+          },
+        }),
+      ]
+    : [],
+  customType: {
+    m3u8: function playM3u8(video, url, art) {
+      destroyHls()
+      if (useHls) {
+        hls = new Hls()
+        art.hls = hls
+        hls.loadSource(url)
+        hls.attachMedia(video)
+      }
+      else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url
+      }
+      else {
+        art.notice.show = 'Unsupported playback format: m3u8'
+      }
+    },
+  },
+})
+
+art.on('destroy', destroyHls)

docs/assets/example/hls.js

@@ -0,0 +1,33 @@
+// npm i hls.js
+// import Hls from 'hls.js';
+
+function playM3u8(video, url, art) {
+  if (Hls.isSupported()) {
+    if (art.hls)
+      art.hls.destroy()
+    const hls = new Hls()
+    hls.loadSource(url)
+    hls.attachMedia(video)
+    art.hls = hls
+    art.on('destroy', () => hls.destroy())
+  }
+  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    video.src = url
+  }
+  else {
+    art.notice.show = 'Unsupported playback format: m3u8'
+  }
+}
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+  type: 'm3u8',
+  customType: {
+    m3u8: playM3u8,
+  },
+})
+
+art.on('ready', () => {
+  console.info(art.hls)
+})

docs/assets/example/iframe.js

@@ -0,0 +1,55 @@
+// npm i artplayer-tool-iframe
+// import ArtplayerToolIframe from 'artplayer-tool-iframe';
+
+const $iframe = document.createElement('iframe')
+$iframe.allowFullscreen = true
+$iframe.width = '100%'
+$iframe.height = '100%'
+
+const $container = document.querySelector('.artplayer-app')
+$container.innerHTML = ''
+$container.appendChild($iframe)
+
+const iframe = new ArtplayerToolIframe({
+  iframe: $iframe,
+  url: '/iframe.html',
+})
+
+window.addEventListener('artplayer:example:cleanup', () => {
+  iframe.destroy()
+  $iframe.remove()
+}, { once: true })
+
+iframe.message(({ type, data }) => {
+  switch (type) {
+    case 'fullscreenWeb':
+      if (data) {
+        $iframe.classList.add('fullscreenWeb')
+      }
+      else {
+        $iframe.classList.remove('fullscreenWeb')
+      }
+      break
+    default:
+      break
+  }
+})
+
+iframe.commit(() => {
+  const art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+    fullscreenWeb: true,
+  })
+
+  art.on('fullscreenWeb', (state) => {
+    ArtplayerToolIframe.postMessage({
+      type: 'fullscreenWeb',
+      data: state,
+    })
+  })
+}).catch((error) => {
+  if (!iframe.destroyed)
+    console.error(error)
+})

docs/assets/example/index.js

@@ -1,179 +1,190 @@
 var art = new Artplayer({
-    container: '.artplayer-app',
+  container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
+  url: '/assets/sample/video.mp4',
-    title: 'Your Name',
+  poster: '/assets/sample/poster.jpg',
-    poster: '/assets/sample/poster.jpg',
+  volume: 0.5,
-    volume: 0.5,
+  isLive: false,
-    isLive: false,
+  muted: false,
-    muted: false,
+  autoplay: false,
-    autoplay: false,
+  pip: true,
-    pip: true,
+  autoSize: true,
-    autoSize: true,
+  autoMini: true,
-    autoMini: true,
+  screenshot: true,
-    screenshot: true,
+  setting: true,
-    setting: true,
+  loop: true,
-    loop: true,
+  flip: true,
-    flip: true,
+  playbackRate: true,
-    playbackRate: true,
+  aspectRatio: true,
-    aspectRatio: true,
+  fullscreen: true,
-    fullscreen: true,
+  fullscreenWeb: true,
-    fullscreenWeb: true,
+  subtitleOffset: true,
-    subtitleOffset: true,
+  miniProgressBar: true,
-    miniProgressBar: true,
+  mutex: true,
-    mutex: true,
+  backdrop: true,
-    backdrop: true,
+  playsInline: true,
-    playsInline: true,
+  autoPlayback: true,
-    autoPlayback: true,
+  airplay: true,
-    airplay: true,
+  theme: '#23ade5',
-    theme: '#23ade5',
+  lang: navigator.language.toLowerCase(),
-    lang: navigator.language.toLowerCase(),
+  moreVideoAttr: {
-    whitelist: ['*'],
+    crossOrigin: 'anonymous',
-    moreVideoAttr: {
+  },
-        crossOrigin: 'anonymous',
+  settings: [
+    {
+      width: 200,
+      html: 'Subtitle',
+      tooltip: 'Bilingual',
+      icon: '<img width="22" height="22" src="/assets/img/subtitle.svg">',
+      selector: [
+        {
+          html: 'Display',
+          tooltip: 'Show',
+          switch: true,
+          onSwitch(item) {
+            item.tooltip = item.switch ? 'Hide' : 'Show'
+            art.subtitle.show = !item.switch
+            return !item.switch
+          },
+        },
+        {
+          default: true,
+          html: 'Bilingual',
+          url: '/assets/sample/subtitle.srt',
+        },
+        {
+          html: 'Chinese',
+          url: '/assets/sample/subtitle.cn.srt',
+        },
+        {
+          html: 'Japanese',
+          url: '/assets/sample/subtitle.jp.srt',
+        },
+      ],
+      onSelect(item) {
+        art.subtitle.switch(item.url, {
+          name: item.html,
+        })
+        return item.html
+      },
     },
-    settings: [
+    {
-        {
+      html: 'Switcher',
-            width: 200,
+      icon: '<img width="22" height="22" src="/assets/img/state.svg">',
-            html: 'Subtitle',
+      tooltip: 'OFF',
-            tooltip: 'Bilingual',
+      switch: false,
-            icon: '<img width="22" heigth="22" src="/assets/img/subtitle.svg">',
+      onSwitch(item) {
-            selector: [
+        item.tooltip = item.switch ? 'OFF' : 'ON'
-                {
+        console.info('You clicked on the custom switch', item.switch)
-                    html: 'Display',
+        return !item.switch
-                    tooltip: 'Show',
+      },
-                    switch: true,
-                    onSwitch: function (item) {
-                        item.tooltip = item.switch ? 'Hide' : 'Show';
-                        art.subtitle.show = !item.switch;
-                        return !item.switch;
-                    },
-                },
-                {
-                    default: true,
-                    html: 'Bilingual',
-                    url: '/assets/sample/subtitle.srt',
-                },
-                {
-                    html: 'Chinese',
-                    url: '/assets/sample/subtitle.cn.srt',
-                },
-                {
-                    html: 'Japanese',
-                    url: '/assets/sample/subtitle.jp.srt',
-                },
-            ],
-            onSelect: function (item) {
-                art.subtitle.switch(item.url, {
-                    name: item.html,
-                });
-                return item.html;
-            },
-        },
-        {
-            html: 'Switcher',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            tooltip: 'OFF',
-            switch: false,
-            onSwitch: function (item) {
-                item.tooltip = item.switch ? 'OFF' : 'ON';
-                console.info('You clicked on the custom switch', item.switch);
-                return !item.switch;
-            },
-        },
-        {
-            html: 'Slider',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            tooltip: '5x',
-            range: [5, 1, 10, 0.1],
-            onRange: function (item) {
-                return item.range + 'x';
-            },
-        },
-    ],
-    contextmenu: [
-        {
-            html: 'Custom menu',
-            click: function (contextmenu) {
-                console.info('You clicked on the custom menu');
-                contextmenu.show = false;
-            },
-        },
-    ],
-    layers: [
-        {
-            html: '<img width="100" src="/assets/sample/layer.png">',
-            click: function () {
-                window.open('https://aimu.app');
-                console.info('You clicked on the custom layer');
-            },
-            style: {
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-                opacity: '.9',
-            },
-        },
-    ],
-    quality: [
-        {
-            default: true,
-            html: 'SD 480P',
-            url: '/assets/sample/video.mp4',
-        },
-        {
-            html: 'HD 720P',
-            url: '/assets/sample/video.mp4',
-        },
-    ],
-    thumbnails: {
-        url: '/assets/sample/thumbnails.png',
-        number: 60,
-        column: 10,
     },
-    subtitle: {
+    {
-        url: '/assets/sample/subtitle.srt',
+      html: 'Slider',
-        type: 'srt',
+      icon: '<img width="22" height="22" src="/assets/img/state.svg">',
-        style: {
+      tooltip: '5x',
-            color: '#fe9200',
+      range: [5, 1, 10, 0.1],
-            fontSize: '20px',
+      onRange(item) {
-        },
+        return `${item.range[0]}x`
-        encoding: 'utf-8',
+      },
     },
-    highlight: [
+    {
-        {
+      html: 'Button',
-            time: 15,
+      icon: '<img width="22" height="22" src="/assets/img/state.svg">',
-            text: 'One more chance',
+      tooltip: 'tooltip',
-        },
+      onClick() {
-        {
+        return 'Button clicked'
-            time: 30,
+      },
-            text: '谁でもいいはずなのに',
-        },
-        {
-            time: 45,
-            text: '夏の想い出がまわる',
-        },
-        {
-            time: 60,
-            text: 'こんなとこにあるはずもないのに',
-        },
-        {
-            time: 75,
-            text: '终わり',
-        },
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: 'Control',
-            tooltip: 'Control Tooltip',
-            click: function () {
-                console.info('You clicked on the custom control');
-            },
-        },
-    ],
-    icons: {
-        loading: '<img src="/assets/img/ploading.gif">',
-        state: '<img width="150" heigth="150" src="/assets/img/state.svg">',
-        indicator: '<img width="16" heigth="16" src="/assets/img/indicator.svg">',
     },
-});
+  ],
+  contextmenu: [
+    {
+      html: 'Custom menu',
+      click(contextmenu) {
+        console.info('You clicked on the custom menu')
+        contextmenu.show = false
+      },
+    },
+  ],
+  layers: [
+    {
+      html: '<img width="100" src="/assets/sample/layer.png">',
+      click() {
+        window.open('https://aimu.app')
+        console.info('You clicked on the custom layer')
+      },
+      style: {
+        position: 'absolute',
+        top: '20px',
+        right: '20px',
+        opacity: '.9',
+      },
+    },
+  ],
+  quality: [
+    {
+      default: true,
+      html: 'SD 480P',
+      url: '/assets/sample/video.mp4?q=480',
+    },
+    {
+      html: 'HD 720P',
+      url: '/assets/sample/video.mp4?q=720',
+    },
+  ],
+  thumbnails: {
+    url: '/assets/sample/thumbnails.png',
+    number: 60,
+    column: 10,
+    scale: 0.85,
+  },
+  subtitle: {
+    url: '/assets/sample/subtitle.srt',
+    type: 'srt',
+    style: {
+      color: '#fe9200',
+      fontSize: '20px',
+    },
+    encoding: 'utf-8',
+  },
+  highlight: [
+    {
+      time: 15,
+      text: 'One more chance',
+    },
+    {
+      time: 30,
+      text: '谁でもいいはずなのに',
+    },
+    {
+      time: 45,
+      text: '夏の想い出がまわる',
+    },
+    {
+      time: 60,
+      text: 'こんなとこにあるはずもないのに',
+    },
+    {
+      time: 75,
+      text: '终わり',
+    },
+  ],
+  controls: [
+    {
+      position: 'right',
+      html: 'Control',
+      index: 1,
+      tooltip: 'Control Tooltip',
+      style: {
+        marginRight: '20px',
+      },
+      click() {
+        console.info('You clicked on the custom control')
+      },
+    },
+  ],
+  icons: {
+    loading: '<img src="/assets/img/ploading.gif">',
+    state: '<img width="150" height="150" src="/assets/img/state.svg">',
+    indicator: '<img width="16" height="16" src="/assets/img/indicator.svg">',
+  },
+})

docs/assets/example/jassub.js

@@ -0,0 +1,28 @@
+// https://github.com/ThaUnknown/jassub
+// npm i artplayer-plugin-jassub
+// import artplayerPluginJassub from 'artplayer-plugin-jassub';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/jassub/FGOBD.mp4',
+    autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginJassub({
+            subUrl: '/assets/jassub/FGOBD.ass',
+            workerUrl: '/assets/jassub/jassub-worker.js',
+            wasmUrl: '/assets/jassub/jassub-worker.wasm',
+            modernWasmUrl: '/assets/jassub/jassub-worker-modern.wasm',
+            availableFonts: {
+                'liberation sans': '/assets/jassub/default.woff2'
+            },
+            fonts: [
+                '/assets/jassub/fonts/Averia Sans Libre Light.ttf',
+                '/assets/jassub/fonts/Averia Serif Simple Light.ttf',
+                '/assets/jassub/fonts/Gramond.ttf'
+            ],
+            timeOffset: -0.041
+        }),
+    ],
+});

docs/assets/example/mediabunny.js

@@ -0,0 +1,35 @@
+// npm i artplayer-proxy-mediabunny
+// import artplayerProxyMediabunny from 'artplayer-proxy-mediabunny';
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+  autoSize: true,
+  setting: true,
+  loop: true,
+  flip: true,
+  playbackRate: true,
+  fullscreen: true,
+  fullscreenWeb: true,
+  miniProgressBar: true,
+  autoPlayback: true,
+  autoOrientation: true,
+  proxy: artplayerProxyMediabunny({
+    m3u8: {
+      quality: {
+        control: true,
+        setting: true,
+        getName: level => level.height ? `${level.height}P` : level.name,
+        title: 'Quality',
+        auto: 'Auto',
+      },
+      audio: {
+        control: true,
+        setting: true,
+        getName: track => track.name || track.language,
+        title: 'Audio',
+        auto: 'Auto',
+      },
+    },
+  }),
+})

docs/assets/example/mobile.js

@@ -0,0 +1,98 @@
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/video.mp4',
+  poster: '/assets/sample/poster.jpg',
+  autoSize: true,
+  loop: true,
+  mutex: true,
+  setting: true,
+  flip: true,
+  lock: true,
+  fastForward: true,
+  playbackRate: true,
+  aspectRatio: true,
+  theme: '#ff0057',
+  fullscreen: true,
+  fullscreenWeb: true,
+  miniProgressBar: true,
+  autoOrientation: true,
+  airplay: true,
+  moreVideoAttr: {
+    'x5-video-player-type': 'h5',
+    'x5-video-player-fullscreen': false,
+    'x5-video-orientation': 'portraint',
+    'preload': 'metadata',
+  },
+  thumbnails: {
+    url: '/assets/sample/thumbnails.png',
+    number: 60,
+    column: 10,
+    scale: 0.6,
+  },
+  subtitle: {
+    name: '中日双语',
+    url: '/assets/sample/subtitle.srt',
+    style: {
+      color: '#48aff0',
+      fontSize: '16px',
+    },
+  },
+  layers: [
+    {
+      html: `<img width="50" src="/assets/sample/layer.png">`,
+      click() {
+        art.notice.show = '你点击了自定义层'
+      },
+      style: {
+        position: 'absolute',
+        top: '10px',
+        right: '10px',
+        opacity: '.9',
+      },
+    },
+  ],
+  icons: {
+    loading: '<img src="/assets/img/ploading.gif">',
+    state: '<img width="150" height="150" src="/assets/img/state.svg">',
+    indicator: '<img width="16" height="16" src="/assets/img/indicator.svg">',
+  },
+  settings: [
+    {
+      width: 200,
+      html: '切换字幕',
+      tooltip: '双语',
+      icon: '<img width="22" height="22" src="/assets/img/subtitle.svg">',
+      selector: [
+        {
+          html: '开关',
+          switch: true,
+          tooltip: '显示',
+          onSwitch(item) {
+            item.tooltip = item.switch ? '隐藏' : '显示'
+            art.subtitle.show = !item.switch
+            return !item.switch
+          },
+        },
+        {
+          default: true,
+          html: '双语',
+          url: '/assets/sample/subtitle.srt',
+        },
+        {
+          html: '中文',
+          url: '/assets/sample/subtitle.cn.srt',
+        },
+        {
+          html: '日文',
+          url: '/assets/sample/subtitle.jp.srt',
+        },
+      ],
+      onSelect(item) {
+        art.subtitle.switch(item.url, {
+          name: item.html,
+        })
+        return item.html
+      },
+    },
+  ],
+})

docs/assets/example/mpegts.js

@@ -0,0 +1,36 @@
+// npm i mpegts
+// import mpegts from 'mpegts';
+
+function playFlv(video, url, art) {
+  if (mpegts.isSupported()) {
+    if (art.flv)
+      art.flv.destroy()
+
+    const flv = mpegts.createPlayer({
+      type: 'flv',
+      url,
+    })
+    flv.attachMediaElement(video)
+    flv.load()
+    flv.play()
+
+    art.flv = flv
+    art.on('destroy', () => flv.destroy())
+  }
+  else {
+    art.notice.show = 'Unsupported playback format: flv'
+  }
+}
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/video.flv',
+  type: 'flv',
+  customType: {
+    flv: playFlv,
+  },
+})
+
+art.on('ready', () => {
+  console.info(art.flv)
+})

docs/assets/example/multiple.subtitles.js

@@ -0,0 +1,113 @@
+// npm i artplayer-plugin-multiple-subtitles
+// import artplayerPluginMultipleSubtitles from 'artplayer-plugin-multiple-subtitles';
+
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/video.mp4',
+  setting: true,
+  plugins: [
+    artplayerPluginMultipleSubtitles({
+      subtitles: [
+        {
+          name: 'chinese',
+          url: '/assets/sample/subtitle.cn.srt',
+        },
+        {
+          name: 'japanese',
+          url: '/assets/sample/subtitle.jp.srt',
+        },
+      ],
+    }),
+  ],
+  settings: [
+    {
+      width: 200,
+      html: 'Subtitle',
+      tooltip: 'Double',
+      icon: '<img width="22" height="22" src="/assets/img/subtitle.svg">',
+      selector: [
+        {
+          html: 'Display',
+          tooltip: 'Show',
+          switch: true,
+          onSwitch(item) {
+            item.tooltip = item.switch ? 'Hide' : 'Show'
+            // 显示/隐藏字幕
+            // Show/hide subtitles
+            art.subtitle.show = !item.switch
+            return !item.switch
+          },
+        },
+        {
+          html: 'Reverse',
+          tooltip: 'Off',
+          switch: false,
+          onSwitch(item) {
+            item.tooltip = item.switch ? 'Off' : 'On'
+            // 修改字幕顺序
+            // Change the order of subtitles
+            if (item.switch) {
+              art.plugins.multipleSubtitles.tracks(['chinese', 'japanese'])
+            }
+            else {
+              art.plugins.multipleSubtitles.tracks(['japanese', 'chinese'])
+            }
+            return !item.switch
+          },
+        },
+        {
+          default: true,
+          html: 'Double',
+          name: 'double',
+        },
+        {
+          html: 'Chinese',
+          name: 'chinese',
+        },
+        {
+          html: 'Japanese',
+          name: 'japanese',
+        },
+      ],
+      onSelect(item) {
+        if (item.name === 'double') {
+          // 重置字幕
+          // Reset subtitles
+          art.plugins.multipleSubtitles.reset()
+        }
+        else {
+          // 显示单个字幕
+          // Show single subtitle
+          art.plugins.multipleSubtitles.tracks([item.name])
+        }
+        return item.html
+      },
+    },
+  ],
+})
+
+// 自定义你自己的样式，请勿复制以下代码
+// Customize your own style, please do not copy the following code
+
+const style = `
+.art-subtitle-chinese {
+	color: red;
+	font-size: 18px;
+}
+
+.art-subtitle-japanese {
+	color: yellow;
+	font-size: 12px;
+}
+`
+
+const $style = document.getElementById('artplayer-subtitle-style')
+if ($style) {
+  $style.textContent = style
+}
+else {
+  const $style = document.createElement('style')
+  $style.id = 'artplayer-subtitle-style'
+  $style.textContent = style
+  document.head.appendChild($style)
+}

docs/assets/example/setting.test.js

@@ -0,0 +1,140 @@
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/video.mp4',
+  setting: true,
+  flip: true,
+  playbackRate: true,
+  aspectRatio: true,
+  subtitleOffset: true,
+  settings: [
+    {
+      width: 200,
+      html: 'Subtitle',
+      name: 'subtitle',
+      tooltip: 'Bilingual',
+      icon: '<img width="22" height="22" src="/assets/img/subtitle.svg">',
+      selector: [
+        {
+          html: 'Display',
+          tooltip: 'Show',
+          switch: true,
+          onSwitch(item) {
+            item.tooltip = item.switch ? 'Hide' : 'Show'
+            art.subtitle.show = !item.switch
+            return !item.switch
+          },
+        },
+        {
+          default: true,
+          html: 'Bilingual',
+          url: '/assets/sample/subtitle.srt',
+        },
+        {
+          html: 'Chinese',
+          url: '/assets/sample/subtitle.cn.srt',
+        },
+        {
+          html: 'Japanese',
+          url: '/assets/sample/subtitle.jp.srt',
+        },
+      ],
+      onSelect(item) {
+        art.subtitle.switch(item.url, {
+          name: item.html,
+        })
+        return item.html
+      },
+      mounted(...args) {
+        console.info(args)
+      },
+    },
+    {
+      html: 'Switcher',
+      icon: '<img width="22" height="22" src="/assets/img/state.svg">',
+      tooltip: 'OFF',
+      switch: false,
+      onSwitch(item) {
+        item.tooltip = item.switch ? 'OFF' : 'ON'
+        console.info('You clicked on the custom switch', item.switch)
+        return !item.switch
+      },
+      mounted(...args) {
+        console.info(args)
+      },
+    },
+    {
+      html: 'Slider',
+      icon: '<img width="22" height="22" src="/assets/img/state.svg">',
+      tooltip: '5x',
+      range: [5, 1, 10, 0.1],
+      onRange(item) {
+        return `${item.range[0]}x`
+      },
+      mounted(...args) {
+        console.info(args)
+      },
+    },
+  ],
+}, async () => {
+  const { sleep } = Artplayer.utils
+  art.setting.show = true
+  console.log(art.setting.builtin)
+  console.log(art.setting.find('aspect-ratio'))
+  console.log(art.setting.find('aspect-ratio2'))
+  await sleep(1000)
+  art.setting.resize()
+  await sleep(1000)
+  art.setting.inactivate(art.setting.find('subtitle'))
+  art.setting.remove('aspect-ratio')
+  try {
+    art.setting.remove('aspect-ratio2')
+  }
+  catch (error) {
+    console.log(error.message)
+  }
+  await sleep(1000)
+  art.setting.update({
+    name: 'subtitle-offset',
+    html: 'new offset',
+    range: [5, -11, 11, 1],
+  })
+  await sleep(1000)
+  art.setting.find('subtitle-offset').range = [0, -0, 10, 1]
+  await sleep(1000)
+  art.setting.update({
+    name: 'subtitle-offset2',
+    html: 'new offset 2',
+    range: [5, -11, 11, 1],
+    onChange(item) {
+      return `${item.range[0]}s`
+    },
+  })
+  await sleep(1000)
+  art.setting.update({
+    name: 'flip',
+    html: 'new flip',
+    tooltip: 'OFF',
+    switch: false,
+  })
+  await sleep(1000)
+  art.setting.find('flip').switch = true
+  await sleep(1000)
+  art.setting.update({
+    name: 'flip2',
+    html: 'new flip2',
+    tooltip: 'OFF',
+    switch: true,
+  })
+  await sleep(1000)
+  try {
+    art.setting.add({
+      name: 'flip2',
+      html: 'new flip2',
+      tooltip: 'OFF',
+      switch: true,
+    })
+  }
+  catch (error) {
+    console.log(error.message)
+  }
+})

docs/assets/example/thumbnail.js

@@ -1,69 +1,14 @@
-if (window.lastThumbnail) {
+// npm i artplayer-plugin-thumbnail
-    window.lastThumbnail.destroy();
+// import artplayerPluginThumbnail from 'artplayer-plugin-thumbnail';
-}
 
-var $popups = document.querySelector('.popups');
+const art = new Artplayer({
-var $popinner = document.querySelector('.popinner');
+  container: '.artplayer-app',
-var $artplayer = document.querySelector('.artplayer-app');
+  url: '/assets/sample/video.mp4',
-
+  plugins: [
-$artplayer.innerHTML = 'Drop video file here or click to upload.';
+    artplayerPluginThumbnail({
-var thumbnail = new ArtplayerToolThumbnail({
+      width: 160,
-    fileInput: $artplayer,
+      number: 100,
-    number: 60, // 数量
+      scale: 1,
-    width: 160, // 宽度
+    }),
-    column: 10, // 列数
+  ],
-    begin: 0, // 开始
+})
-    end: NaN, // 结束
-});
-
-window.lastThumbnail = thumbnail;
-
-thumbnail.on('file', function (file) {
-    console.log('Read video successfully: ' + file.name);
-});
-
-thumbnail.on('video', function (video) {
-    console.log('Video size: ' + video.videoWidth + ' x ' + video.videoHeight);
-    console.log('Video duration: ' + video.duration + 's');
-    thumbnail.start();
-});
-
-thumbnail.on('canvas', function (canvas) {
-    console.log('Build canvas successfully');
-    console.log('Canvas size: ' + canvas.width + ' x ' + canvas.height);
-    console.log('Preview density: ' + thumbnail.density + ' p/s');
-});
-
-thumbnail.on('update', function (url, percentage) {
-    console.log('Processing: ' + Math.floor(percentage.toFixed(2) * 100) + '%');
-    $popups.style.display = 'flex';
-    $popinner.style.backgroundImage = 'url(' + url + ')';
-});
-
-thumbnail.on('download', function (name) {
-    console.log('Start download preview: ' + name);
-});
-
-thumbnail.on('done', function () {
-    $popups.style.display = 'none';
-    thumbnail.download();
-    console.log('Build preview image complete');
-
-    [...Artplayer.instances].forEach(function (art) {
-        art.destroy(true);
-    });
-
-    new Artplayer({
-        container: $artplayer,
-        url: thumbnail.videoUrl,
-        autoSize: true,
-        poster: thumbnail.thumbnailUrl,
-        thumbnails: {
-            url: thumbnail.thumbnailUrl,
-            number: thumbnail.option.number,
-            column: thumbnail.option.column,
-        },
-    });
-
-    console.log('Build player complete');
-});

docs/assets/example/tool.thumbnail.js

@@ -0,0 +1,69 @@
+if (window.lastThumbnail) {
+    window.lastThumbnail.destroy();
+}
+
+var $popups = document.querySelector('.popups');
+var $popinner = document.querySelector('.popinner');
+var $artplayer = document.querySelector('.artplayer-app');
+
+$artplayer.innerHTML = 'Drop video file here or click to upload.';
+var thumbnail = new ArtplayerToolThumbnail({
+    fileInput: $artplayer,
+    number: 60, // 数量
+    width: 160, // 宽度
+    column: 10, // 列数
+    begin: 0, // 开始
+    end: NaN, // 结束
+});
+
+window.lastThumbnail = thumbnail;
+
+thumbnail.on('file', function (file) {
+    console.log('Read video successfully: ' + file.name);
+});
+
+thumbnail.on('video', function (video) {
+    console.log('Video size: ' + video.videoWidth + ' x ' + video.videoHeight);
+    console.log('Video duration: ' + video.duration + 's');
+    thumbnail.start();
+});
+
+thumbnail.on('canvas', function (canvas) {
+    console.log('Build canvas successfully');
+    console.log('Canvas size: ' + canvas.width + ' x ' + canvas.height);
+    console.log('Preview density: ' + thumbnail.density + ' p/s');
+});
+
+thumbnail.on('update', function (url, percentage) {
+    console.log('Processing: ' + Math.floor(percentage.toFixed(2) * 100) + '%');
+    $popups.style.display = 'flex';
+    $popinner.style.backgroundImage = 'url(' + url + ')';
+});
+
+thumbnail.on('download', function (name) {
+    console.log('Start download preview: ' + name);
+});
+
+thumbnail.on('done', function () {
+    $popups.style.display = 'none';
+    thumbnail.download();
+    console.log('Build preview image complete');
+
+    [...Artplayer.instances].forEach(function (art) {
+        art.destroy(true);
+    });
+
+    new Artplayer({
+        container: $artplayer,
+        url: thumbnail.videoUrl,
+        autoSize: true,
+        poster: thumbnail.thumbnailUrl,
+        thumbnails: {
+            url: thumbnail.thumbnailUrl,
+            number: thumbnail.option.number,
+            column: thumbnail.option.column,
+        },
+    });
+
+    console.log('Build player complete');
+});

docs/assets/example/vast.js

@@ -0,0 +1,24 @@
+// Depends on:
+// https://glomex.github.io/vast-ima-player/
+// https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side
+
+// Google's IMA SDK are blocked by your Ad blocker.
+// Please Turn Off Your Ad Blocker.
+
+// npm i artplayer-plugin-vast
+// import artplayerPluginVast from 'artplayer-plugin-vast';
+
+var art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/video.mp4',
+  fullscreen: true,
+  fullscreenWeb: true,
+  plugins: [
+    artplayerPluginVast(({ playUrl, imaPlayer, ima }) => {
+      // Play the ad when the video is played
+      art.once('play', () => {
+        playUrl('https://artplayer.org/assets/vast/linear-ad.xml')
+      })
+    }),
+  ],
+})

docs/assets/example/vtt.thumbnail.js

@@ -0,0 +1,12 @@
+// npm i artplayer-plugin-vtt-thumbnail
+// import artplayerPluginVttThumbnail from 'artplayer-plugin-vtt-thumbnail';
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: '/assets/sample/bbb-video.mp4',
+  plugins: [
+    artplayerPluginVttThumbnail({
+      vtt: '/assets/sample/bbb-thumbnails.vtt',
+    }),
+  ],
+})

docs/assets/example/webtorrent.js

@@ -0,0 +1,38 @@
+// npm i webtorrent
+// import WebTorrent from 'webtorrent';
+
+async function playTorrent(video, url, art) {
+  if (WebTorrent.WEBRTC_SUPPORT) {
+    if (art.torrent)
+      art.torrent.destroy()
+    art.torrent = new WebTorrent()
+
+    await navigator.serviceWorker.register('/webtorrent.sw.min.js')
+    art.torrent.loadWorker(navigator.serviceWorker.controller)
+
+    art.torrent.add(url, (torrent) => {
+      const file = torrent.files.find((file) => {
+        return file.name.endsWith('.mp4')
+      })
+      file.streamTo(video)
+    })
+
+    art.on('destroy', () => art.torrent.destroy())
+  }
+  else {
+    art.notice.show = 'Unsupported playback format: torrent'
+  }
+}
+
+const art = new Artplayer({
+  container: '.artplayer-app',
+  url: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent',
+  type: 'torrent',
+  customType: {
+    torrent: playTorrent,
+  },
+})
+
+art.on('ready', () => {
+  console.info(art.torrent)
+})

docs/assets/img/danmu-off.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
-<path fill="#fff" d="M311.296 661.504c0 4.096-4.096 8.704-8.704 12.8 0 4.096 0 4.096-4.096 8.704h-12.8c-4.096 0-8.704-4.096-16.896-8.704-8.704-8.704-16.896-8.704-25.6-8.704s-12.8 4.096-16.896 12.8c-4.096 12.8-8.704 21.504-4.096 29.696 4.096 8.704 12.8 16.896 25.6 21.504 16.896 8.704 34.304 16.896 47.104 16.896 12.8 0 21.504-4.096 34.304-8.704 8.704-4.096 16.896-16.896 25.6-29.696 8.704-12.8 12.8-34.304 16.896-55.296 4.096-21.504 4.096-51.2 4.096-85.504 0-12.8 0-21.504-4.096-29.696 0-8.704-4.096-12.8-8.704-16.896-4.096-4.096-8.704-8.704-12.8-8.704s-12.8-4.096-21.504-4.096H272.896s-4.096-4.096 0-8.704l4.096-38.4c0-4.096 0-8.704 4.096-8.704h47.104c16.896 0 25.6-4.096 34.304-12.8 8.704-8.704 12.8-21.504 12.8-42.496V324.096c0-16.896-4.096-34.304-8.704-42.496-12.8-12.8-25.6-16.896-42.496-16.896H243.2c-8.704 0-16.896 0-21.504 4.096-4.096 8.704-4.096 12.8-4.096 25.6 0 8.704 0 16.896 4.096 21.504 4.096 4.096 12.8 8.704 21.504 8.704H307.2c4.096 0 8.704 0 8.704 4.096v34.304c0 8.704 0 12.8-4.096 12.8 0 0-4.096 4.096-8.704 4.096h-34.304c-8.704 0-12.8 0-21.504 4.096-4.096 0-8.704 4.096-8.704 4.096-4.096 4.096-8.704 12.8-8.704 16.896 0 8.704-4.096 16.896-4.096 25.6l-8.704 72.704v29.696c0 8.704 4.096 12.8 8.704 16.896s8.704 4.096 16.896 8.704h68.096c4.096 0 8.704 0 8.704 4.096s4.096 8.704 4.096 16.896c0 21.504 0 42.496-4.096 55.296 0.512 9.216-3.584 22.016-8.192 26.624zM896 486.4c-93.696 0-175.104 51.2-217.6 123.904h-106.496v-34.304H640c21.504 0 34.304-4.096 42.496-12.8 8.704-8.704 12.8-21.504 12.8-42.496V358.4c0-21.504-4.096-34.304-12.8-42.496-8.704-8.704-21.504-12.8-42.496-12.8 0-4.096 4.096-4.096 4.096-8.704-4.096 0-4.096-4.096-4.096-4.096 4.096-12.8 8.704-21.504 4.096-25.6 0-8.704-4.096-12.8-12.8-21.504-8.704-4.096-16.896-4.096-21.504-4.096-8.704 4.096-12.8 8.704-21.504 21.504-4.096 8.704-8.704 12.8-12.8 21.504-4.096 8.704-8.704 12.8-12.8 21.504h-51.2c-4.096-8.704-8.704-16.896-8.704-21.504-4.096-8.704-8.704-12.8-12.8-21.504-4.096-12.8-12.8-16.896-21.504-16.896s-16.896 0-25.6 8.704C434.176 261.12 430.08 265.216 430.08 273.92c0 8.704 0 16.896 8.704 25.6l4.096 4.096 4.096 4.096c-16.896 0-29.696 4.096-38.4 12.8-8.704 4.096-12.8 21.504-12.8 38.4v157.696c0 21.504 4.096 34.304 12.8 42.496 8.704 8.704 21.504 12.8 42.496 12.8H512v34.304H413.696c-12.8 0-21.504 0-25.6 4.096-4.096 4.096-8.704 8.704-8.704 21.504v16.896c0 4.096 4.096 8.704 4.096 8.704 4.096 0 4.096 4.096 8.704 4.096H512V716.8c0 12.8 4.096 21.504 8.704 25.6 4.096 4.096 12.8 8.704 21.504 8.704 12.8 0 21.504-4.096 25.6-8.704 4.096-4.096 4.096-12.8 4.096-25.6v-55.296h80.896c-8.704 25.6-12.8 51.2-12.8 76.8 0 140.8 115.2 256 256 256s256-115.2 256-256S1036.8 486.4 896 486.4z m-328.704-128h55.296c4.096 0 4.096 0 4.096 4.096V409.6h-59.904V358.4z m0 102.4h59.904v51.2h-55.296V460.8h-4.608zM512 516.096H456.704v-51.2H512v51.2z m0-102.4H452.096v-51.2H512v51.2z m384 499.2c-93.696 0-170.496-76.8-170.496-170.496s76.8-170.496 170.496-170.496 170.496 76.8 170.496 170.496-76.8 170.496-170.496 170.496z"  />
-<path fill="#fff" d="M580.096 879.104H213.504c-72.704 0-128-55.296-128-119.296V230.4c0-64 55.296-119.296 128-119.296h512c72.704 0 128 55.296 128 119.296v140.8c0 25.6 16.896 42.496 42.496 42.496s42.496-16.896 42.496-42.496V230.4c0-115.2-93.696-204.8-213.504-204.8h-512C93.696 25.6 0 119.296 0 230.4v528.896c0 115.2 93.696 204.8 213.504 204.8h367.104c25.6 0 42.496-16.896 42.496-42.496 0-25.6-21.504-42.496-43.008-42.496z m171.52 10.752c-15.36-15.36-15.36-40.96 0-56.32l237.568-237.568c15.36-15.36 40.96-15.36 56.32 0s15.36 40.96 0 56.32l-237.568 237.568c-15.36 15.36-40.448 15.36-56.32 0z"  />
-</svg>

docs/assets/img/danmu-on.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
-<path fill="#fff" d="M311.466667 661.333333c0 4.266667-4.266667 8.533333-8.533334 12.8 0 4.266667 0 4.266667-4.266666 8.533334h-12.8c-4.266667 0-8.533333-4.266667-17.066667-8.533334-8.533333-8.533333-17.066667-8.533333-25.6-8.533333-8.533333 0-12.8 4.266667-17.066667 12.8-4.266667 12.8-8.533333 21.333333-4.266666 29.866667 4.266667 8.533333 12.8 17.066667 25.6 21.333333 17.066667 8.533333 34.133333 17.066667 46.933333 17.066667 12.8 0 21.333333-4.266667 34.133333-8.533334 8.533333-4.266667 17.066667-17.066667 25.6-29.866666 8.533333-12.8 12.8-34.133333 17.066667-55.466667 4.266667-21.333333 4.266667-51.2 4.266667-85.333333 0-12.8 0-21.333333-4.266667-29.866667 0-8.533333-4.266667-12.8-8.533333-17.066667-4.266667-4.266667-8.533333-8.533333-12.8-8.533333-4.266667 0-12.8-4.266667-21.333334-4.266667H273.066667s-4.266667-4.266667 0-8.533333l4.266666-38.4c0-4.266667 0-8.533333 4.266667-8.533333h46.933333c17.066667 0 25.6-4.266667 34.133334-12.8 8.533333-8.533333 12.8-21.333333 12.8-42.666667V324.266667c0-17.066667-4.266667-34.133333-8.533334-42.666667-12.8-12.8-25.6-17.066667-42.666666-17.066667H243.2c-8.533333 0-17.066667 0-21.333333 4.266667-4.266667 8.533333-4.266667 12.8-4.266667 25.6 0 8.533333 0 17.066667 4.266667 21.333333 4.266667 4.266667 12.8 8.533333 21.333333 8.533334h64c4.266667 0 8.533333 0 8.533333 4.266666v34.133334c0 8.533333 0 12.8-4.266666 12.8 0 0-4.266667 4.266667-8.533334 4.266666h-34.133333c-8.533333 0-12.8 0-21.333333 4.266667-4.266667 0-8.533333 4.266667-8.533334 4.266667-4.266667 4.266667-8.533333 12.8-8.533333 17.066666 0 8.533333-4.266667 17.066667-4.266667 25.6l-8.533333 72.533334v29.866666c0 8.533333 4.266667 12.8 8.533333 17.066667 4.266667 4.266667 8.533333 4.266667 17.066667 8.533333h68.266667c4.266667 0 8.533333 0 8.533333 4.266667s4.266667 8.533333 4.266667 17.066667c0 21.333333 0 42.666667-4.266667 55.466666 0 8.533333-4.266667 21.333333-8.533333 25.6zM896 486.4c-93.866667 0-174.933333 51.2-217.6 123.733333h-106.666667v-34.133333H640c21.333333 0 34.133333-4.266667 42.666667-12.8 8.533333-8.533333 12.8-21.333333 12.8-42.666667V358.4c0-21.333333-4.266667-34.133333-12.8-42.666667-8.533333-8.533333-21.333333-12.8-42.666667-12.8 0-4.266667 4.266667-4.266667 4.266667-8.533333-4.266667 0-4.266667-4.266667-4.266667-4.266667 4.266667-12.8 8.533333-21.333333 4.266667-25.6 0-8.533333-4.266667-12.8-12.8-21.333333-8.533333-4.266667-17.066667-4.266667-21.333334-4.266667-8.533333 4.266667-12.8 8.533333-21.333333 21.333334-4.266667 8.533333-8.533333 12.8-12.8 21.333333-4.266667 8.533333-8.533333 12.8-12.8 21.333333H512c-4.266667-8.533333-8.533333-17.066667-8.533333-21.333333-4.266667-8.533333-8.533333-12.8-12.8-21.333333-4.266667-12.8-12.8-17.066667-21.333334-17.066667s-17.066667 0-25.6 8.533333c-8.533333 8.533333-12.8 12.8-12.8 21.333334s0 17.066667 8.533334 25.6l4.266666 4.266666 4.266667 4.266667c-17.066667 0-29.866667 4.266667-38.4 12.8-8.533333 4.266667-12.8 21.333333-12.8 38.4v157.866667c0 21.333333 4.266667 34.133333 12.8 42.666666 8.533333 8.533333 21.333333 12.8 42.666667 12.8H512v34.133334H413.866667c-12.8 0-21.333333 0-25.6 4.266666-4.266667 4.266667-8.533333 8.533333-8.533334 21.333334v17.066666c0 4.266667 4.266667 8.533333 4.266667 8.533334 4.266667 0 4.266667 4.266667 8.533333 4.266666H512v55.466667c0 12.8 4.266667 21.333333 8.533333 25.6 4.266667 4.266667 12.8 8.533333 21.333334 8.533333 12.8 0 21.333333-4.266667 25.6-8.533333 4.266667-4.266667 4.266667-12.8 4.266666-25.6v-55.466667h81.066667c-8.533333 25.6-12.8 51.2-12.8 76.8 0 140.8 115.2 256 256 256s256-115.2 256-256-115.2-251.733333-256-251.733333z m-328.533333-128h55.466666c4.266667 0 4.266667 0 4.266667 4.266667v46.933333h-59.733333V358.4z m0 102.4h59.733333V512h-55.466667v-51.2zM512 516.266667h-55.466667V465.066667H512v51.2z m0-102.4h-59.733333V366.933333v-4.266666H512v51.2z m384 499.2c-93.866667 0-170.666667-76.8-170.666667-170.666667s76.8-170.666667 170.666667-170.666667 170.666667 76.8 170.666667 170.666667-76.8 170.666667-170.666667 170.666667z"  />
-<path fill="#fff" d="M951.466667 669.866667l-72.533334 72.533333-29.866666-25.6c-17.066667-17.066667-42.666667-12.8-59.733334 4.266667-17.066667 17.066667-12.8 42.666667 4.266667 59.733333l59.733333 51.2c8.533333 8.533333 17.066667 8.533333 29.866667 8.533333 12.8 0 21.333333-4.266667 29.866667-12.8l102.4-102.4c17.066667-17.066667 17.066667-42.666667 0-59.733333-21.333333-12.8-46.933333-12.8-64 4.266667zM580.266667 878.933333H213.333333c-72.533333 0-128-55.466667-128-119.466666V230.4c0-64 55.466667-119.466667 128-119.466667h512c72.533333 0 128 55.466667 128 119.466667v140.8c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667V230.4c0-115.2-93.866667-204.8-213.333334-204.8H213.333333C93.866667 25.6 0 119.466667 0 230.4v529.066667c0 115.2 93.866667 204.8 213.333333 204.8h366.933334c25.6 0 42.666667-17.066667 42.666666-42.666667s-21.333333-42.666667-42.666666-42.666667z"  />
-</svg>

docs/assets/img/pause.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <polygon id="dcacc03d-ebe2-486b-86c6-02f40070ed49" points="0 0 80 0 80 80 0 80"></polygon>
+        <path d="M52.5463795,8.01403034 C54.5470371,7.84763808 56.3253994,9.18911826 56.7676959,11.0911381 C56.8718466,11.5365362 56.8612939,11.8985083 56.8069245,12.2287648 C56.7500316,12.556723 56.6424397,12.8481393 56.4951605,13.110368 C56.4219797,13.2418271 56.3354933,13.3636336 56.2494657,13.4856699 L56.2494657,13.4856699 L55.9916124,13.8522385 L55.4708587,14.5816985 C54.7716265,15.5508645 54.0556475,16.50762 53.3171867,17.4480581 C53.3121398,17.4544931 53.3068634,17.4606984 53.3020459,17.4671334 C54.2015503,17.5075824 55.1010548,17.5517085 56.0005592,17.6022697 C57.096436,17.6624835 58.1918539,17.7339586 59.2877307,17.8093407 L59.2877307,17.8093407 L60.9309723,17.9320665 L61.7527078,17.9980259 L62.1635756,18.0324994 L62.3688948,18.0495064 L62.471669,18.0580098 L62.5872901,18.0699607 C63.8533868,18.1864812 65.1027368,18.520185 66.2644533,19.0451021 C67.4263993,19.5697893 68.5000236,20.2872985 69.4304979,21.1587894 C70.3609723,22.0295909 71.1487556,23.0543742 71.7511781,24.1807396 C72.3552065,25.3059558 72.7702036,26.5343627 72.9750639,27.7944854 C73.0051162,27.9514549 73.0214041,28.1100331 73.0429684,28.2681518 L73.0429684,28.2681518 L73.0581092,28.3867407 L73.0714148,28.4988946 L73.0927497,28.7045867 L73.178089,29.5271253 L73.3366092,31.1733515 C73.4377777,32.2714485 73.5267875,33.3709245 73.6061623,34.4713197 C73.9220556,38.8708323 74.0704819,43.2995325 73.9677076,47.7257047 C73.8695214,52.1475102 73.5717513,56.5518491 73.123949,60.9389512 C73.1124787,61.0662734 73.0904556,61.2356534 73.070956,61.3930826 C73.0530623,61.5521205 73.0269099,61.7104689 72.9989223,61.8683577 L72.9583172,62.1053058 L72.9083065,62.3406451 C72.8745837,62.4976146 72.8410903,62.6543543 72.7979618,62.8092554 C72.638524,63.4309282 72.4281579,64.0401904 72.1691575,64.6280791 C71.6523038,65.8043162 70.9393071,66.8927606 70.0700844,67.8368758 C69.2020087,68.7819103 68.1783951,69.5837648 67.0510896,70.1990025 C65.9240135,70.8153893 64.6934749,71.2433208 63.4282958,71.4609637 C63.2697757,71.485325 63.1117143,71.5129038 62.9525059,71.5331283 L62.9525059,71.5331283 L62.4762572,71.5859877 L61.6545217,71.6574628 L60.0108212,71.7907605 C58.9151739,71.8769444 57.8190677,71.9509475 56.723191,72.0210437 C54.5309786,72.1573291 52.3383075,72.2648865 50.1451775,72.3455546 C41.3733459,72.6696058 32.5989908,72.5652659 23.8315179,72.0442559 C22.7356412,71.9799053 21.6402232,71.9031442 20.5445759,71.8238551 L20.5445759,71.8238551 L18.9015636,71.6951539 L18.0802869,71.6264367 L17.6696486,71.5910438 L17.4643294,71.5731176 C17.3957368,71.5671422 17.3305852,71.5620861 17.2461635,71.5522036 C15.9706611,71.433155 14.7132819,71.091867 13.5460596,70.5609746 C12.3779196,70.0296225 11.3006248,69.3040695 10.368774,68.4252242 C9.4371526,67.5466086 8.64822227,66.5163096 8.04901145,65.3832794 C7.4486536,64.2513983 7.03686821,63.0188545 6.83407251,61.7557442 C6.80952597,61.5978554 6.78268537,61.4401964 6.7670857,61.2811585 L6.7670857,61.2811585 L6.7407039,61.0428314 L6.72762771,60.9240127 L6.71868084,60.8210517 L6.6475647,59.9978237 L6.51565574,58.3504483 C6.43283985,57.2518916 6.35942964,56.1524157 6.29565452,55.0522503 C6.03986583,50.6529675 5.93755035,46.2348392 6.03825998,41.8194687 C6.13667554,37.4068562 6.41012856,33.0075734 6.82604327,28.6223099 C6.94441723,27.3608083 7.26696333,26.1147049 7.78312886,24.9545555 C8.29814735,23.7937167 9.0047206,22.7195213 9.86476706,21.7871271 C10.7243547,20.8542732 11.7390214,20.0655187 12.8543978,19.4603933 C13.9695447,18.8548081 15.1865483,18.43561 16.4368159,18.2241723 C16.5935008,18.2007303 16.7494975,18.1726918 16.9068707,18.1540761 L16.9068707,18.1540761 L17.3762372,18.1030552 L18.1975139,18.0336485 L19.8398379,17.9037982 C20.9350264,17.8199126 22.0302149,17.7482077 23.1254035,17.6801799 C24.2455974,17.6123819 25.3662501,17.552398 26.4866734,17.4993087 C26.4731384,17.4823018 26.459374,17.465065 26.4458389,17.4480581 C25.7073781,16.50762 24.9911698,15.5508645 24.2919376,14.5816985 L24.2919376,14.5816985 L23.7714133,13.8522385 L23.51356,13.4856699 C23.4275324,13.3636336 23.3408166,13.2418271 23.2678652,13.110368 C23.1203565,12.8481393 23.0129941,12.556723 22.9558718,12.2287648 C22.9017318,11.8985083 22.8909496,11.5365362 22.9953298,11.0911381 C23.4527671,9.13281148 25.2740285,7.85039596 27.2166461,8.01403034 C27.6717894,8.05195123 28.0122293,8.1735279 28.3093112,8.32682022 C28.6031814,8.48195113 28.8468116,8.67408363 29.0507543,8.89540373 C29.1530698,9.00548922 29.2418502,9.12568695 29.3313189,9.24519521 L29.3313189,9.24519521 L29.6001838,9.60371998 L30.1328666,10.3244467 C30.8380634,11.289246 31.5265136,12.266226 32.1922524,13.2595235 C32.8575324,14.2532806 33.5042304,15.2605973 34.1217938,16.2890578 C34.3094487,16.6025372 34.4950388,16.9178551 34.6778761,17.2350116 C37.4016243,17.1878978 40.125143,17.1791645 42.8488911,17.1968609 C43.5962988,17.2026065 44.3441653,17.2120293 45.0918023,17.2232906 C45.2723456,16.9100411 45.4558711,16.59886 45.6410025,16.2890578 C46.2587952,15.2605973 46.9054933,14.2532806 47.5707733,1Line truncated
+        <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%" filterUnits="objectBoundingBox" id="6229a4d6-d7ef-4db2-a990-2e5a9a80e5fb">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.800000012">
+        <g transform="translate(-674.000000, -832.000000)">
+            <g transform="translate(514.000000, 759.000000)">
+                <g transform="translate(160.000000, 73.000000)">
+                    <mask id="6571edcb-5f96-450a-80cd-4185b762ee4d" fill="white">
+                        <use xlink:href="#dcacc03d-ebe2-486b-86c6-02f40070ed49"></use>
+                    </mask>
+                    <g mask="url(#6571edcb-5f96-450a-80cd-4185b762ee4d)">
+                        <use fill="black" fill-opacity="1" filter="url(#6229a4d6-d7ef-4db2-a990-2e5a9a80e5fb)" xlink:href="#271c2bc0-87b1-41ff-8ceb-2ef24f2896fe"></use>
+                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#271c2bc0-87b1-41ff-8ceb-2ef24f2896fe"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

docs/assets/jassub/jassub-worker.js

@@ -0,0 +1,11 @@
+"use strict";async function Module(i={}){var g,v=i,y=(...t)=>console.log(...t),h=(...t)=>console.error(...t);function T(){j?.(v)}G=(t=>()=>{t(),self.wasmMemory=B,self.HEAPU8C=new Uint8ClampedArray(B.buffer),self.HEAPU8=new Uint8Array(B.buffer)})(G);function P(t){throw t}var j,w,C,A,M,E,O,ie,oe,le=!1;function G(){var t=B.buffer;w=new Int8Array(t),A=new Int16Array(t),C=new Uint8Array(t),M=new Uint16Array(t),E=new Int32Array(t),O=new Uint32Array(t),ie=new Float32Array(t),oe=new Float64Array(t)}function $e(){{var t=62914560;B=new WebAssembly.Memory({initial:t/65536,maximum:32768})}G()}$e();var X=t=>Xe(t),Q=()=>Qe(),B,fe=new TextDecoder,Z=(t,r,n,s)=>{var o=r+n;if(s)return o;for(;t[r]&&!(r>=o);)++r;return r},q=(t,r,n)=>{if(!t)return"";var s=Z(C,t,r,n);return fe.decode(C.subarray(t,s))},Ce=(t,r,n,s)=>P(`Assertion failed: ${q(t)}, at: `+[r?q(r):"unknown filename",n,s?q(s):"unknown function"]);function _e(t,r,n){return 0}var we=(t,r,n)=>{};function tr(t,r,n){return 0}function nr(t,r,n,s){}var ar=()=>P(""),sr=(t,r,n,s,o)=>{},U=t=>{for(var r="";;){var n=C[t++];if(!n)return r;r+=String.fromCharCode(n)}},J={},K={},ue={},N=class extends Error{constructor(r){super(r),this.name="BindingError"}},$=t=>{throw new N(t)};function ir(t,r,n={}){var s=r.name;if(t||$(`type "${s}" must have a positive integer typeid pointer`),K.hasOwnProperty(t)){if(n.ignoreDuplicateRegistrations)return;$(`Cannot register type '${s}' twice`)}if(K[t]=r,delete ue[t],J.hasOwnProperty(t)){var o=J[t];delete J[t],o.forEach(l=>l())}}function L(t,r,n={}){return ir(t,r,n)}var or=(t,r,n,s)=>{r=U(r),L(t,{name:r,fromWireType:function(o){return!!o},toWireType:function(o,l){return l?n:s},readValueFromPointer:function(o){return this.fromWireType(C[o])},destructorFunction:null})},lr=t=>({count:t.count,deleteScheduled:t.deleteScheduled,preservePointerOnDelete:t.preservePointerOnDelete,ptr:t.ptr,ptrType:t.ptrType,smartPtr:t.smartPtr,smartPtrType:t.smartPtrType}),Te=t=>{function r(n){return n.$$.ptrType.registeredClass.name}$(r(t)+" instance already deleted")},Pe=!1,Me=t=>{},fr=t=>{t.smartPtr?t.smartPtrType.rawDestructor(t.smartPtr):t.ptrType.registeredClass.rawDestructor(t.ptr)},Re=t=>{t.count.value-=1;var r=t.count.value===0;r&&fr(t)},ee=t=>globalThis.FinalizationRegistry?(Pe=new FinalizationRegistry(r=>{Re(r.$$)}),ee=r=>{var n=r.$$,s=!!n.smartPtr;if(s){var o={$$:n};Pe.register(r,o,r)}return r},Me=r=>Pe.unregister(r),ee(t)):(ee=r=>r,t),ce=[],ur=()=>{for(;ce.length;){var t=ce.pop();t.$$.deleteScheduled=!1,t.delete()}},Ee,cr=()=>{let t=de.prototype;Object.assign(t,{isAliasOf(n){if(!(this instanceof de)||!(n instanceof de))return!1;var s=this.$$.ptrType.registeredClass,o=this.$$.ptr;n.$$=n.$$;for(var l=n.$$.ptrType.registeredClass,u=n.$$.ptr;s.baseClass;)o=s.upcast(o),s=s.baseClass;for(;l.baseClass;)u=l.upcast(u),l=l.baseClass;return s===l&&o===u},clone(){if(this.$$.ptr||Te(this),this.$$.preservePointerOnDelete)return this.$$.count.value+=1,this;var n=ee(Object.create(Object.getPrototypeOf(this),{$$:{value:lr(this.$$)}}));return n.$$.count.value+=1,n.$$.deleteScheduled=!1,n},delete(){this.$$.ptr||Te(this),this.$$.deleteScheduled&&!this.$$.preservePointerOnDelete&&$("Object already scheduled for deletion"),Me(this),Re(this.$$),this.$$.preservePointerOnDelete||(this.$$.smartPtr=void 0,this.$$.ptr=void 0)},isDeleted(){return!this.$$.ptr},deleteLater(){return this.$$.ptr||Te(this),this.$$.deleteScheduled&&!this.$$.preservePointerOnDelete&&$("Object already scheduled for deletion"),ce.push(this),ce.length===1&&Ee&&Ee(ur),this.$$.deleteScheduled=!0,this}});const r=Symbol.dispose;r&&(t[r]=t.delete)};function de(){}var ke=(t,r)=>Object.defineProperty(r,"name",{value:t}),We={},Ue=(t,r,n)=>{if(t[r].overloadTable===void 0){var s=t[r];t[r]=function(...o){return t[r].overloadTable.hasOwnProperty(o.length)||$(`Function '${n}' called with an invalid number of arguments (${o.length}) - expects one of (${t[r].overloadTable})!`),t[r].overloadTable[o.length].apply(this,o)},t[r].overloadTable=[],t[r].overloadTable[s.argCount]=s}},dr=(t,r,n)=>{v.hasOwnProperty(t)?((n===void 0||v[t].overloadTable!==void 0&&v[t].overloadTable[n]!==void 0)&&$(`Cannot register public name '${t}' twice`),Ue(v,t,t),v[t].overloadTable.hasOwnProperty(n)&&$(`Cannot register multiple overloads of a function with the same number of arguments (${n})!`),v[t].overloadTable[n]=r):(v[t]=r,v[t].argCount=n)},vr=48,pr=57,gr=t=>{t=t.replace(/[^a-zA-Z0-9_]/g,"$");var r=t.charCodeAt(0);return r>=vr&&r<=pr?`_${t}`:t};function br(t,r,n,s,o,l,u,f){this.name=t,this.constructor=r,this.instancePrototype=n,this.rawDestructor=s,this.baseClass=o,this.getActualType=l,this.upcast=u,this.downcast=f,this.pureVirtualFunctions=[]}var ve=(t,r,n)=>{for(;r!==n;)r.upcast||$(`Expected null or instance of ${n.name}, got an instance of ${r.name}`),t=r.upcast(t),r=r.baseClass;return t},je=t=>{if(t===null)return"null";var r=typeof t;return r==="object"||r==="array"||r==="function"?t.toString():""+t};function hr(t,r){if(r===null)return this.isReferencLine truncated
+`;o&&(m+=`var destructors = [];
+`);var _=o?"destructors":"null",S=["humanName","throwBindingError","invoker","fn","runDestructors","fromRetWire","toClassParamWire"];r&&(m+=`var thisWired = toClassParamWire(${_}, this);
+`);for(var p=0;p<l;++p){var R=`toArg${p}Wire`;m+=`var arg${p}Wired = ${R}(${_}, arg${p});
+`,S.push(R)}if(m+=(n||s?"var rv = ":"")+`invoker(${f});
+`,o)m+=`runDestructors(destructors);
+`;else for(var p=r?1:2;p<t.length;++p){var F=p===1?"thisWired":"arg"+(p-2)+"Wired";t[p].destructorFunction!==null&&(m+=`${F}_dtor(${F});
+`,S.push(`${F}_dtor`))}return n&&(m+=`var ret = fromRetWire(rv);
+return ret;
+`),m+=`}
+`,new Function(S,m)}function He(t,r,n,s,o,l){var u=r.length;u<2&&$("argTypes array size mismatch! Must at least get return value and 'this' types!");for(var f=r[1]!==null&&n!==null,p=xe(r),m=!r[0].isVoid,_=r[0],S=r[1],R=[t,$,s,o,Le,_.fromWireType.bind(_),S?.toWireType.bind(S)],F=2;F<u;++F){var k=r[F];R.push(k.toWireType.bind(k))}if(!p)for(var F=f?1:2;F<r.length;++F)r[F].destructorFunction!==null&&R.push(r[F].destructorFunction);var x=Er(r,f,m,l)(...R);return ke(t,x)}var kr=(t,r,n,s,o,l)=>{var u=Be(r,n);o=H(s,o),z([],[t],f=>{f=f[0];var p=`constructor ${f.name}`;if(f.registeredClass.constructor_body===void 0&&(f.registeredClass.constructor_body=[]),f.registeredClass.constructor_body[r-1]!==void 0)throw new N(`Cannot register multiple constructors with identical number of parameters (${r-1}) for class '${f.name}'! Overload resolution is currently only performed using the parameter count, not actual type info!`);return f.registeredClass.constructor_body[r-1]=()=>{te(`Cannot construct ${f.name} due to unbound types`,u)},z([],u,m=>(m.splice(1,0,null),f.registeredClass.constructor_body[r-1]=He(p,m,null,o,l),[])),[]})},Wr=t=>{t=t.trim();const r=t.indexOf("(");return r===-1?t:t.slice(0,r)},Ur=(t,r,n,s,o,l,u,f,p,m)=>{var _=Be(n,s);r=U(r),r=Wr(r),l=H(o,l,p),z([],[t],S=>{S=S[0];var R=`${S.name}.${r}`;r.startsWith("@@")&&(r=Symbol[r.substring(2)]),f&&S.registeredClass.pureVirtualFunctions.push(r);function F(){te(`Cannot call ${R} due to unbound types`,_)}var k=S.registeredClass.instancePrototype,D=k[r];return D===void 0||D.overloadTable===void 0&&D.className!==S.name&&D.argCount===n-2?(F.argCount=n-2,F.className=S.name,k[r]=F):(Ue(k,r,R),k[r].overloadTable[n-2]=F),z([],_,x=>{var I=He(R,x,S,l,u,p);return k[r].overloadTable===void 0?(I.argCount=n-2,k[r]=I):k[r].overloadTable[n-2]=I,[]}),[]})},Ve=(t,r,n)=>(t instanceof Object||$(`${n} with invalid "this": ${t}`),t instanceof r.registeredClass.constructor||$(`${n} incompatible with "this" of type ${t.constructor.name}`),t.$$.ptr||$(`cannot call emscripten binding method ${n} on deleted object`),ve(t.$$.ptr,t.$$.ptrType.registeredClass,r.registeredClass)),Dr=(t,r,n,s,o,l,u,f,p,m)=>{r=U(r),o=H(s,o),z([],[t],_=>{_=_[0];var S=`${_.name}.${r}`,R={get(){te(`Cannot access ${S} due to unbound types`,[n,u])},enumerable:!0,configurable:!0};return p?R.set=()=>te(`Cannot access ${S} due to unbound types`,[n,u]):R.set=F=>$(S+" is a read-only property"),Object.defineProperty(_.registeredClass.instancePrototype,r,R),z([],p?[n,u]:[n],F=>{var k=F[0],D={get(){var I=Ve(this,_,S+" getter");return k.fromWireType(o(l,I))},enumerable:!0};if(p){p=H(f,p);var x=F[1];D.set=function(I){var se=Ve(this,_,S+" setter"),W=[];p(m,se,x.toWireType(W,I)),Le(W)}}return Object.defineProperty(_.registeredClass.instancePrototype,r,D),[]}),[]})},ze=[],Y=[0,1,,1,null,1,!0,1,!1,1],Ir=t=>{t>9&&--Y[t+1]===0&&(Y[t]=void 0,ze.push(t))},Fe={toValue:t=>(t||$(`Cannot use deleted val. handle = ${t}`),Y[t]),toHandle:t=>{switch(t){case void 0:return 2;case null:return 4;case!0:return 6;case!1:return 8;default:{const r=ze.pop()||Y.length;return Y[r]=t,Y[r+1]=1,r}}}},Br={name:"emscripten::val",fromWireType:t=>{var r=Fe.toValue(t);return Ir(t),r},toWireType:(t,r)=>Fe.toHandle(r),readValueFromPointer:pe,destructorFunction:null},Lr=t=>L(t,Br),xr=(t,r)=>{switch(r){case 4:return function(n){return this.fromWireType(ie[n>>2])};case 8:return function(n){return this.fromWireType(oe[n>>3])};default:throw new TypeError(`invalid float width (${r}): ${t}`)}},Hr=(t,r,n)=>{r=U(r),L(t,{name:r,fromWireType:s=>s,toWireType:(s,o)=>o,readValueFromPointer:xr(r,n),destructorFunction:null})},Vr=(t,r,n)=>{switch(r){case 1:return n?s=>w[s]:s=>C[s];case 2:return n?s=>A[s>>1]:s=>M[s>>1];case 4:return n?s=>E[s>>2]:s=>O[s>>2];default:throw new TypeError(`invalid integer width (${r}): ${t}`)}},zr=(t,r,n,s,o)=>{r=U(r);const l=s===0;let u=p=>p;if(l){var f=32-8*n;u=p=>p<<f>>>f,o=u(o)}L(t,{name:r,fromWireType:u,toWireType:(p,m)=>m,readValueFromPointer:Vr(r,n,s!==0),destructorFunction:null})},Gr=(t,r,n)=>{var s=[Int8Array,Uint8Array,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array],o=s[r];function l(u){var f=O[u>>2],p=O[u+4>>2];return new o(w.buffer,p,f)}n=U(n),L(t,{name:n,fromWireType:l,readValueFromPointer:l},{ignoreDuplicateRegistrations:!0})},qr=(t,r,n,s)=>{if(!(s>0))return 0;for(var o=n,l=n+s-1,u=0;u<t.length;++u){var f=t.codePointAt(u);if(f<=127){if(n>=l)break;r[n++]=f}else if(f<=2047){if(n+1>=l)break;r[n++]=192|f>>6,r[n++]=128|f&63}else if(f<=65535){if(n+2>=l)break;r[n++]=224|f>>12,r[n++]=128|f>>6&63,r[n++]=128|f&63}else{if(n+3>=l)break;r[n++]=240|f>>18,r[n++]=128|f>>12&63,r[n++]=128|f>>6&63,r[n++]=128|f&63,u++}}return r[n]=0,n-o},Ge=(t,r,n)=>qr(t,C,r,n),qe=t=>{for(var r=0,n=0;n<t.length;++n){var s=t.charCodeAt(n);s<=127?r++:s<=2047?r+=2:s>=55296&&s<=57343?(r+=4,++n):r+=3}return r},Jr=(t,r)=>{r=U(r),L(t,{name:r,fromWireType(n){var s=O[n>>2],o=n+4,l;return l=q(o,s,!0),V(n),l},toWireType(n,s){s instanceof ArrayBuffer&&(s=new Uint8Arr
Line truncated

docs/assets/js/JavascriptSubtitlesOctopus/subtitles-octopus.js

@@ -1,589 +0,0 @@
-var SubtitlesOctopus = function (options) {
-    var supportsWebAssembly = false;
-    try {
-        if (typeof WebAssembly === "object"
-            && typeof WebAssembly.instantiate === "function") {
-            const module = new WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
-            if (module instanceof WebAssembly.Module)
-                supportsWebAssembly = (new WebAssembly.Instance(module) instanceof WebAssembly.Instance);
-        }
-    } catch (e) {
-    }
-    console.log("WebAssembly support detected: " + (supportsWebAssembly ? "yes" : "no"));
-
-    var self = this;
-    self.canvas = options.canvas; // HTML canvas element (optional if video specified)
-    self.lossyRender = options.lossyRender; // Speedup render for heavy subs
-    self.isOurCanvas = false; // (internal) we created canvas and manage it
-    self.video = options.video; // HTML video element (optional if canvas specified)
-    self.canvasParent = null; // (internal) HTML canvas parent element
-    self.fonts = options.fonts || []; // Array with links to fonts used in sub (optional)
-    self.availableFonts = options.availableFonts || []; // Object with all available fonts (optional). Key is font name in lower case, value is link: {"arial": "/font1.ttf"}
-    self.onReadyEvent = options.onReady; // Function called when SubtitlesOctopus is ready (optional)
-    if (supportsWebAssembly) {
-        self.workerUrl = options.workerUrl || 'subtitles-octopus-worker.js'; // Link to WebAssembly worker
-    } else {
-        self.workerUrl = options.legacyWorkerUrl || 'subtitles-octopus-worker-legacy.js'; // Link to legacy worker
-    }
-    self.subUrl = options.subUrl; // Link to sub file (optional if subContent specified)
-    self.subContent = options.subContent || null; // Sub content (optional if subUrl specified)
-    self.onErrorEvent = options.onError; // Function called in case of critical error meaning sub wouldn't be shown and you should use alternative method (for instance it occurs if browser doesn't support web workers).
-    self.debug = options.debug || false; // When debug enabled, some performance info printed in console.
-    self.lastRenderTime = 0; // (internal) Last time we got some frame from worker
-    self.pixelRatio = window.devicePixelRatio || 1; // (internal) Device pixel ratio (for high dpi devices)
-
-    self.timeOffset = options.timeOffset || 0; // Time offset would be applied to currentTime from video (option)
-
-    self.hasAlphaBug = false;
-
-    (function() {
-        if (typeof ImageData.prototype.constructor === 'function') {
-            try {
-                // try actually calling ImageData, as on some browsers it's reported
-                // as existing but calling it errors out as "TypeError: Illegal constructor"
-                new window.ImageData(new Uint8ClampedArray([0, 0, 0, 0]), 1, 1);
-                return;
-            } catch (e) {
-                console.log("detected that ImageData is not constructable despite browser saying so");
-            }
-        }
-
-        var canvas = document.createElement('canvas');
-        var ctx = canvas.getContext('2d');
-
-        window.ImageData = function () {
-            var i = 0;
-            if (arguments[0] instanceof Uint8ClampedArray) {
-                var data = arguments[i++];
-            }
-            var width = arguments[i++];
-            var height = arguments[i];
-
-            var imageData = ctx.createImageData(width, height);
-            if (data) imageData.data.set(data);
-            return imageData;
-        }
-    })();
-
-    self.workerError = function (error) {
-        console.error('Worker error: ', error);
-        if (self.onErrorEvent) {
-            self.onErrorEvent(error);
-        }
-        if (!self.debug) {
-            self.dispose();
-            throw new Error('Worker error: ' + error);
-        }
-    };
-
-    // Not tested for repeated usage yet
-    self.init = function () {
-        if (!window.Worker) {
-            self.workerError('worker not supported');
-            return;
-        }
-        // Worker
-        if (!self.worker) {
-            self.worker = new Worker(self.workerUrl);
-            self.worker.onmessage = self.onWorkerMessage;
-            self.worker.onerror = self.workerError;
-        }
-        self.workerActive = false;
-        self.createCanvas();
-        self.setVideo(options.video);
-        self.setSubUrl(options.subUrl);
-        self.worker.postMessage({
-            target: 'worker-init',
-            width: self.canvas.width,
-            height: self.canvas.height,
-            URL: document.URL,
-            currentScript: self.workerUrl,
-            preMain: true,
-            fastRender: self.lossyRender,
-            subUrl: self.subUrl,
-            subContent: self.subContent,
-            fonts: self.fonts,
-            availableFonts: self.availableFonts,
-            debug: self.debug
-        });
-    };
-
-    self.createCanvas = function () {
-        if (!self.canvas) {
-            if (self.video) {
-                self.isOurCanvas = true;
-                self.canvas = document.createElement('canvas');
-                self.canvas.className = 'libassjs-canvas';
-                self.canvas.style.display = 'none';
-
-                self.canvasParent = document.createElement('div');
-                self.canvasParent.className = 'libassjs-canvas-parent';
-                self.canvasParent.appendChild(self.canvas);
-
-                if (self.video.nextSibling) {
-                    self.video.parentNode.insertBefore(self.canvasParent, self.video.nextSibling);
-                }
-                else {
-                    self.video.parentNode.appendChild(self.canvasParent);
-                }
-            }
-            else {
-                if (!self.canvas) {
-                    self.workerError('Don\'t know where to render: you should give video or canvas in options.');
-                }
-            }
-        }
-        self.ctx = self.canvas.getContext('2d');
-        self.bufferCanvas = document.createElement('canvas');
-        self.bufferCanvasCtx = self.bufferCanvas.getContext('2d');
-
-        // test for alpha bug, where e.g. WebKit can render a transparent pixel
-        // (with alpha == 0) as non-black which then leads to visual artifacts
-        self.bufferCanvas.width = 1;
-        self.bufferCanvas.height = 1;
-        var testBuf = new Uint8ClampedArray([0, 255, 0, 0]);
-        var testImage = new ImageData(testBuf, 1, 1);
-        self.bufferCanvasCtx.clearRect(0, 0, 1, 1);
-        self.ctx.clearRect(0, 0, 1, 1);
-        var prePut = self.ctx.getImageData(0, 0, 1, 1).data;
-        self.bufferCanvasCtx.putImageData(testImage, 0, 0);
-        self.ctx.drawImage(self.bufferCanvas, 0, 0);
-        var postPut = self.ctx.getImageData(0, 0, 1, 1).data;
-        self.hasAlphaBug = prePut[1] != postPut[1];
-        if (self.hasAlphaBug) {
-            console.log("Detected a browser having issue with transparent pixels, applying workaround");
-        }
-    };
-
-    self.setVideo = function (video) {
-        self.video = video;
-        if (self.video) {
-            var timeupdate = function () {
-                self.setCurrentTime(video.currentTime + self.timeOffset);
-            }
-            self.video.addEventListener("timeupdate", timeupdate, false);
-            self.video.addEventListener("playing", function () {
-                self.setIsPaused(false, video.currentTime + self.timeOffset);
-            }, false);
-            self.video.addEventListener("pause", function () {
-                self.setIsPaused(true, video.currentTime + self.timeOffset);
-            }, false);
-            self.video.addEventListener("seeking", function () {
-                self.video.removeEventListener("timeupdate", timeupdate);
-            }, false);
-            self.video.addEventListener("seeked", function () {
-                self.video.addEventListener("timeupdate", timeupdate, false);
-                self.setCurrentTime(video.currentTime + self.timeOffset);
-            }, false);
-            self.video.addEventListener("ratechange", function () {
-                self.setRate(video.playbackRate);
-            }, false);
-            self.video.addEventListener("timeupdate", function () {
-                self.setCurrentTime(video.currentTime + self.timeOffset);
-            }, false);
-            self.video.addEventListener("waiting", function () {
-                self.setIsPaused(true, video.currentTime + self.timeOffset);
-            }, false);
-
-            document.addEventListener("fullscreenchange", self.resizeWithTimeout, false);
-            document.addEventListener("mozfullscreenchange", self.resizeWithTimeout, false);
-            document.addEventListener("webkitfullscreenchange", self.resizeWithTimeout, false);
-            document.addEventListener("msfullscreenchange", self.resizeWithTimeout, false);
-            window.addEventListener("resize", self.resizeWithTimeout, false);
-
-            // Support Element Resize Observer
-            if (typeof ResizeObserver !== "undefined") {
-                self.ro = new ResizeObserver(self.resizeWithTimeout);
-                self.ro.observe(self.video);
-            }
-
-            if (self.video.videoWidth > 0) {
-                self.resize();
-            }
-            else {
-                self.video.addEventListener("loadedmetadata", function (e) {
-                    e.target.removeEventListener(e.type, arguments.callee);
-                    self.resize();
-                }, false);
-            }
-        }
-    };
-
-    self.getVideoPosition = function () {
-        var videoRatio = self.video.videoWidth / self.video.videoHeight;
-        var width = self.video.offsetWidth, height = self.video.offsetHeight;
-        var elementRatio = width / height;
-        var realWidth = width, realHeight = height;
-        if (elementRatio > videoRatio) realWidth = Math.floor(height * videoRatio);
-        else realHeight = Math.floor(width / videoRatio);
-
-        var x = (width - realWidth) / 2;
-        var y = (height - realHeight) / 2;
-
-        return {
-            width: realWidth,
-            height: realHeight,
-            x: x,
-            y: y
-        };
-    };
-
-    self.setSubUrl = function (subUrl) {
-        self.subUrl = subUrl;
-    };
-
-    self.renderFrameData = null;
-    function renderFrames() {
-        var data = self.renderFramesData;
-        var beforeDrawTime = performance.now();
-        self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
-        for (var i = 0; i < data.canvases.length; i++) {
-            var image = data.canvases[i];
-            self.bufferCanvas.width = image.w;
-            self.bufferCanvas.height = image.h;
-            var imageBuffer = new Uint8ClampedArray(image.buffer);
-            if (self.hasAlphaBug) {
-                for (var j = 3; j < imageBuffer.length; j = j + 4) {
-                    imageBuffer[j] = (imageBuffer[j] >= 1) ? imageBuffer[j] : 1;
-                }
-            }
-            var imageData = new ImageData(imageBuffer, image.w, image.h);
-            self.bufferCanvasCtx.putImageData(imageData, 0, 0);
-            self.ctx.drawImage(self.bufferCanvas, image.x, image.y);
-        }
-        if (self.debug) {
-            var drawTime = Math.round(performance.now() - beforeDrawTime);
-            console.log(Math.round(data.spentTime) + ' ms (+ ' + drawTime + ' ms draw)');
-            self.renderStart = performance.now();
-        }
-    }
-
-    /**
-     * Lossy Render Mode
-     *
-     */
-    function renderFastFrames() {
-        var data = self.renderFramesData;
-        var beforeDrawTime = performance.now();
-        self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);
-        for (var i = 0; i < data.bitmaps.length; i++) {
-            var image = data.bitmaps[i];
-            self.ctx.drawImage(image.bitmap, image.x, image.y);
-        }
-        if (self.debug) {
-            var drawTime = Math.round(performance.now() - beforeDrawTime);
-            console.log(data.bitmaps.length + ' bitmaps, libass: ' + Math.round(data.libassTime) + 'ms, decode: ' + Math.round(data.decodeTime) + 'ms, draw: ' + drawTime + 'ms');
-            self.renderStart = performance.now();
-        }
-    }
-
-    self.workerActive = false;
-    self.frameId = 0;
-    self.onWorkerMessage = function (event) {
-        //dump('\nclient got ' + JSON.stringify(event.data).substr(0, 150) + '\n');
-        if (!self.workerActive) {
-            self.workerActive = true;
-            if (self.onReadyEvent) {
-                self.onReadyEvent();
-            }
-        }
-        var data = event.data;
-        switch (data.target) {
-            case 'stdout': {
-                console.log(data.content);
-                break;
-            }
-            case 'console-log': {
-                console.log.apply(console, JSON.parse(data.content));
-                break;
-            }
-            case 'console-debug': {
-                console.debug.apply(console, JSON.parse(data.content));
-                break;
-            }
-            case 'console-info': {
-                console.info.apply(console, JSON.parse(data.content));
-                break;
-            }
-            case 'console-warn': {
-                console.warn.apply(console, JSON.parse(data.content));
-                break;
-            }
-            case 'console-error': {
-                console.error.apply(console, JSON.parse(data.content));
-                break;
-            }
-            case 'stderr': {
-                console.error(data.content);
-                break;
-            }
-            case 'window': {
-                window[data.method]();
-                break;
-            }
-            case 'canvas': {
-                switch (data.op) {
-                    case 'getContext': {
-                        self.ctx = self.canvas.getContext(data.type, data.attributes);
-                        break;
-                    }
-                    case 'resize': {
-                        self.resize(data.width, data.height);
-                        break;
-                    }
-                    case 'renderCanvas': {
-                        if (self.lastRenderTime < data.time) {
-                            self.lastRenderTime = data.time;
-                            self.renderFramesData = data;
-                            window.requestAnimationFrame(renderFrames);
-                        }
-                        break;
-                    }
-                    case 'renderFastCanvas': {
-                        if (self.lastRenderTime < data.time) {
-                            self.lastRenderTime = data.time;
-                            self.renderFramesData = data;
-                            window.requestAnimationFrame(renderFastFrames);
-                        }
-                        break;
-                    }
-                    case 'setObjectProperty': {
-                        self.canvas[data.object][data.property] = data.value;
-                        break;
-                    }
-                    default:
-                        throw 'eh?';
-                }
-                break;
-            }
-            case 'tick': {
-                self.frameId = data.id;
-                self.worker.postMessage({
-                    target: 'tock',
-                    id: self.frameId
-                });
-                break;
-            }
-            case 'custom': {
-                if (self['onCustomMessage']) {
-                    self['onCustomMessage'](event);
-                } else {
-                    throw 'Custom message received but client onCustomMessage not implemented.';
-                }
-                break;
-            }
-            case 'setimmediate': {
-                self.worker.postMessage({
-                    target: 'setimmediate'
-                });
-                break;
-            }
-            case 'get-events': {
-                console.log(data.target);
-                console.log(data.events);
-                break;
-            }
-            case 'get-styles': {
-                console.log(data.target);
-                console.log(data.styles);
-                break;
-            }
-            default:
-                throw 'what? ' + data.target;
-        }
-    };
-
-    self.resize = function (width, height, top, left) {
-        var videoSize = null;
-        top = top || 0;
-        left = left || 0;
-        if ((!width || !height) && self.video) {
-            videoSize = self.getVideoPosition();
-            width = videoSize.width * self.pixelRatio;
-            height = videoSize.height * self.pixelRatio;
-            var offset = self.canvasParent.getBoundingClientRect().top - self.video.getBoundingClientRect().top;
-            top = videoSize.y - offset;
-            left = videoSize.x;
-        }
-        if (!width || !height) {
-            if (!self.video) {
-                console.error('width or height is 0. You should specify width & height for resize.');
-            }
-            return;
-        }
-
-
-        if (
-          self.canvas.width != width ||
-          self.canvas.height != height ||
-          self.canvas.style.top != top ||
-          self.canvas.style.left != left
-        ) {
-            self.canvas.width = width;
-            self.canvas.height = height;
-
-            if (videoSize != null) {
-                self.canvasParent.style.position = 'relative';
-                self.canvas.style.display = 'block';
-                self.canvas.style.position = 'absolute';
-                self.canvas.style.width = videoSize.width + 'px';
-                self.canvas.style.height = videoSize.height + 'px';
-                self.canvas.style.top = top + 'px';
-                self.canvas.style.left = left + 'px';
-                self.canvas.style.pointerEvents = 'none';
-            }
-
-            self.worker.postMessage({
-                target: 'canvas',
-                width: self.canvas.width,
-                height: self.canvas.height
-            });
-        }
-    };
-
-    self.resizeWithTimeout = function () {
-        self.resize();
-        setTimeout(self.resize, 100);
-    };
-
-    self.runBenchmark = function () {
-        self.worker.postMessage({
-            target: 'runBenchmark'
-        });
-    };
-
-    self.customMessage = function (data, options) {
-        options = options || {};
-        self.worker.postMessage({
-            target: 'custom',
-            userData: data,
-            preMain: options.preMain
-        });
-    };
-
-    self.setCurrentTime = function (currentTime) {
-        self.worker.postMessage({
-            target: 'video',
-            currentTime: currentTime
-        });
-    };
-
-    self.setTrackByUrl = function (url) {
-        self.worker.postMessage({
-            target: 'set-track-by-url',
-            url: url
-        });
-    };
-
-    self.setTrack = function (content) {
-        self.worker.postMessage({
-            target: 'set-track',
-            content: content
-        });
-    };
-
-    self.freeTrack = function (content) {
-        self.worker.postMessage({
-            target: 'free-track'
-        });
-    };
-
-
-    self.render = self.setCurrentTime;
-
-    self.setIsPaused = function (isPaused, currentTime) {
-        self.worker.postMessage({
-            target: 'video',
-            isPaused: isPaused,
-            currentTime: currentTime
-        });
-    };
-
-    self.setRate = function (rate) {
-        self.worker.postMessage({
-            target: 'video',
-            rate: rate
-        });
-    };
-
-    self.dispose = function () {
-        self.worker.postMessage({
-            target: 'destroy'
-        });
-
-        self.worker.terminate();
-        self.workerActive = false;
-        // Remove the canvas element to remove residual subtitles rendered on player
-        if (self.video) {
-            self.video.parentNode.removeChild(self.canvasParent);
-        }
-    };
-
-    self.createEvent = function (event) {
-        self.worker.postMessage({
-            target: 'create-event',
-            event: event
-        });
-    };
-
-    self.getEvents = function () {
-        self.worker.postMessage({
-            target: 'get-events'
-        });
-    };
-
-    self.setEvent = function (event, index) {
-        self.worker.postMessage({
-            target: 'set-event',
-            event: event,
-            index: index
-        });
-    };
-
-    self.removeEvent = function (index) {
-        self.worker.postMessage({
-            target: 'remove-event',
-            index: index
-        });
-    };
-
-    self.createStyle = function (style) {
-        self.worker.postMessage({
-            target: 'create-style',
-            style: style
-        });
-    };
-
-    self.getStyles = function () {
-        self.worker.postMessage({
-            target: 'get-styles'
-        });
-    };
-
-    self.setStyle = function (style, index) {
-        self.worker.postMessage({
-            target: 'set-style',
-            style: style,
-            index: index
-        });
-    };
-
-    self.removeStyle = function (index) {
-        self.worker.postMessage({
-            target: 'remove-style',
-            index: index
-        });
-    };
-
-    self.init();
-};
-
-if (typeof SubtitlesOctopusOnLoad == 'function') {
-    SubtitlesOctopusOnLoad();
-}
-
-if (typeof exports !== 'undefined') {
-    if (typeof module !== 'undefined' && module.exports) {
-        exports = module.exports = SubtitlesOctopus
-    }
-}

docs/assets/js/JavascriptSubtitlesOctopus/test2.ass

@@ -1,49 +0,0 @@
-[Script Info]
-; // 此字幕由爱幕生成
-Synch Point:1
-ScriptType:v4.00+
-Collisions:Normal
-
-[V4+ Styles]
-Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
-Style: Default, Microsoft YaHei, 20, &H00FFFFFF, &H000092FE, &H00000000, &H82000000, 0, 0, 0, 0, 100, 100, 0, 0, 1, 1, 2, 2, 10, 10, 30, 134
-Style: Style1, Microsoft YaHei, 20, &H0000DCFC, &H0000DCFC, &H00000000, &H82000000, 0, 0, 0, 0, 100, 100, 1, 0, 1, 1, 2, 2, 10, 10, 30, 134
-Style: Style2, ZCOOL KuaiLe, 20, &H0000DDA4, &H0000DDA4, &H00334D19, &H82000000, 0, 0, 0, 0, 100, 100, 1, 0, 4, 1, 3, 2, 10, 10, 50, 134
-Style: Style3, Source Han Sans CN Medium, 28, &H009E14AB, &H009E14AB, &H00009EFB, &H82000000, 0, 0, 0, 0, 100, 100, 1, 0, 1, 1, 2, 2, 10, 10, 100, 134
-
-[Events]
-Format: Layer, Start, End, Style, Actor, MarginL, MarginR, MarginV, Effect, Text
-Dialogue: 0,0:00:00.31,0:00:00.84,Style1,NTP,0000,0000,0000,,那一天\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}あの日
-Dialogue: 0,0:00:01.28,0:00:02.22,Style2,NTP,0000,0000,0000,,星星降落的日子\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}星が降った日
-Dialogue: 0,0:00:03.15,0:00:04.41,Style3,NTP,0000,0000,0000,,那简直是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}それはまるで
-Dialogue: 0,0:00:04.45,0:00:04.97,Default,NTP,0000,0000,0000,,简直\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}まるで
-Dialogue: 0,0:00:05.12,0:00:06.30,Default,NTP,0000,0000,0000,,像梦中的景色一样\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}夢の景色のように
-Dialogue: 0,0:00:07.44,0:00:08.98,Default,NTP,0000,0000,0000,,美丽的景色\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}美しい眺めだった
-Dialogue: 0,0:00:24.60,0:00:25.09,Default,NTP,0000,0000,0000,,放学后\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}放課後
-Dialogue: 0,0:00:25.70,0:00:26.26,Default,NTP,0000,0000,0000,,不好\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}悪い
-Dialogue: 0,0:00:26.48,0:00:27.68,Default,NTP,0000,0000,0000,,我今天开始打工\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}おれ今日これからバイト
-Dialogue: 0,0:00:29.34,0:00:31.69,Default,NTP,0000,0000,0000,,已经讨厌这样的乡下了\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}もうこんな田舎嫌だよー
-Dialogue: 0,0:00:31.97,0:00:33.53,Default,NTP,0000,0000,0000,,讨厌这样的人生\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}こんな人生嫌だ
-Dialogue: 0,0:00:33.93,0:00:37.97,Default,NTP,0000,0000,0000,,来世请让我成为东京的帅哥吧\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}来世は東京のイケメン男子にしてくださーい
-Dialogue: 0,0:00:42.08,0:00:42.87,Default,NTP,0000,0000,0000,,哪里\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}どこ
-Dialogue: 0,0:00:43.05,0:00:44.17,Default,NTP,0000,0000,0000,,那么说来\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}そういえば
-Dialogue: 0,0:00:44.55,0:00:47.08,Default,NTP,0000,0000,0000,,我觉得好像一直做着奇怪的梦\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}ずっと変な夢を見てたような気がするんだけど
-Dialogue: 0,0:00:48.32,0:00:50.63,Default,NTP,0000,0000,0000,,别人的人生中…梦\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}別の人の人生の…夢
-Dialogue: 0,0:00:51.45,0:00:52.74,Default,NTP,0000,0000,0000,,这是什么\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}何だ これ
-Dialogue: 0,0:00:54.78,0:00:55.44,Default,NTP,0000,0000,0000,,这个，这个\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}これって
-Dialogue: 0,0:00:56.72,0:00:57.72,Default,NTP,0000,0000,0000,,这难道是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}これってもしかして
-Dialogue: 0,0:00:58.08,0:00:59.33,Default,NTP,0000,0000,0000,,我们在梦中\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}俺達は夢の中で
-Dialogue: 0,0:01:00.14,0:01:01.20,Default,NTP,0000,0000,0000,,替换着\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}入れ替わってる
-Dialogue: 0,0:01:07.37,0:01:08.30,Default,NTP,0000,0000,0000,,确实的事情\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}確かなことが
-Dialogue: 0,0:01:08.76,0:01:09.54,Default,NTP,0000,0000,0000,,只有一个\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}一つだけある
-Dialogue: 0,0:01:10.33,0:01:11.04,Default,NTP,0000,0000,0000,,我们是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}私達は
-Dialogue: 0,0:01:11.42,0:01:12.32,Default,NTP,0000,0000,0000,,见面的话绝对\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}会えば絶対
-Dialogue: 0,0:01:12.68,0:01:13.53,Default,NTP,0000,0000,0000,,马上就明白\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}すぐにわかる
-Dialogue: 0,0:01:14.25,0:01:15.28,Default,NTP,0000,0000,0000,,我想说\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}言おうと思ったんだ
-Dialogue: 0,0:01:16.08,0:01:17.58,Default,NTP,0000,0000,0000,,你是世界的无论在哪里\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}お前が世界のどこにいても
-Dialogue: 0,0:01:17.95,0:01:19.05,Default,NTP,0000,0000,0000,,一定要去见你\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}必ず会いに行くって
-Dialogue: 0,0:01:20.14,0:01:20.94,Default,NTP,0000,0000,0000,,你是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}あなたは
-Dialogue: 0,0:01:21.36,0:01:21.80,Default,NTP,0000,0000,0000,,谁\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}誰
-Dialogue: 0,0:01:22.20,0:01:22.76,Default,NTP,0000,0000,0000,,你是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}お前は
-Dialogue: 0,0:01:23.48,0:01:24.04,Default,NTP,0000,0000,0000,,谁\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}誰だ
-Dialogue: 0,0:01:25.69,0:01:26.47,Default,NTP,0000,0000,0000,,你的名字是\N{\fs12}{\3c&&H00000000&}{\c&&H000092FE&}君の名は

docs/assets/js/bootstrap.js

@@ -0,0 +1,42 @@
+// Generated by yarn build:site-assets. Do not edit.
+"use strict";
+(() => {
+  // packages/artplayer-vitepress/browser/editor-preferences.ts
+  function readPreference(key, storage = () => localStorage) {
+    try {
+      return storage().getItem(key) === "true";
+    } catch {
+      return false;
+    }
+  }
+
+  // packages/artplayer-vitepress/browser/bootstrap.ts
+  function loadScript(url) {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      const clear = () => {
+        script.onload = null;
+        script.onerror = null;
+      };
+      script.onload = () => {
+        clear();
+        resolve();
+      };
+      script.onerror = () => {
+        clear();
+        script.remove();
+        reject(new Error(`Editor bootstrap failed: ${url}`));
+      };
+      script.src = url;
+      document.body.appendChild(script);
+    });
+  }
+  async function bootstrap() {
+    await loadScript(
+      readPreference("prod") ? "./compiled/artplayer.js" : "./uncompiled/artplayer/index.js"
+    );
+    await loadScript("./assets/js/vs/loader.js");
+    await loadScript("./assets/js/common.js");
+  }
+  void bootstrap().catch((error) => console.error(error));
+})();

docs/assets/js/common.js

@@ -1,237 +1,419 @@
-(function () {
+// Generated by yarn build:site-assets. Do not edit.
-    var userAgent = window.navigator.userAgent;
+"use strict";
-    var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+(() => {
-    var isIE = /MSIE|Trident/.test(userAgent);
+  // packages/artplayer-vitepress/browser/editor-files.ts
+  function readEditorFile(file, signal, createReader = () => new FileReader()) {
+    return new Promise((resolve, reject) => {
+      const reader = createReader();
+      function clear() {
+        reader.onload = null;
+        reader.onerror = null;
+        reader.onabort = null;
+        signal.removeEventListener("abort", cancel);
+      }
+      function fail(error) {
+        clear();
+        reject(error);
+      }
+      function cancel() {
+        reader.abort();
+        fail(new Error(`File import cancelled: ${file.name}`));
+      }
+      reader.onload = () => {
+        if (typeof reader.result !== "string") {
+          fail(new Error(`File is not text: ${file.name}`));
+          return;
+        }
+        const value = reader.result;
+        clear();
+        resolve(value);
+      };
+      reader.onerror = () => fail(reader.error || new Error(`Reading file failed: ${file.name}`));
+      reader.onabort = () => fail(new Error(`File import cancelled: ${file.name}`));
+      signal.addEventListener("abort", cancel, { once: true });
+      try {
+        if (signal.aborted)
+          cancel();
+        else reader.readAsText(file);
+      } catch (error) {
+        fail(error);
+      }
+    });
+  }
+  function createFileImports(document, label) {
+    const controller = new AbortController();
+    const elements = [];
+    let queue = Promise.resolve();
+    return {
+      add(files) {
+        const work = queue.then(async () => {
+          for (const file of files) {
+            const name = file.name.toLowerCase().trim();
+            if (!name.endsWith(".js") && !name.endsWith(".css"))
+              continue;
+            const text = await readEditorFile(file, controller.signal);
+            if (controller.signal.aborted)
+              return;
+            const element = document.createElement(
+              name.endsWith(".css") ? "style" : "script"
+            );
+            element.textContent = text;
+            document.body.appendChild(element);
+            elements.push(element);
+            label(name);
+          }
+        });
+        queue = work.catch(() => {
+        });
+        return work;
+      },
+      dispose() {
+        controller.abort();
+        for (const element of elements) element.remove();
+        elements.length = 0;
+      }
+    };
+  }
 
-    if (isMobile || isIE) {
+  // packages/artplayer-vitepress/browser/editor-libraries.ts
-        window.location.href = './mobile.html';
+  var libUris = [
+    "./assets/ts/artplayer-plugin-ads.d.ts",
+    "./assets/ts/artplayer-plugin-ambilight.d.ts",
+    "./assets/ts/artplayer-plugin-asr.d.ts",
+    "./assets/ts/artplayer-plugin-audio-track.d.ts",
+    "./assets/ts/artplayer-plugin-auto-thumbnail.d.ts",
+    "./assets/ts/artplayer-plugin-chapter.d.ts",
+    "./assets/ts/artplayer-plugin-chromecast.d.ts",
+    "./assets/ts/artplayer-plugin-danmuku-mask.d.ts",
+    "./assets/ts/artplayer-plugin-danmuku.d.ts",
+    "./assets/ts/artplayer-plugin-dash-control.d.ts",
+    "./assets/ts/artplayer-plugin-document-pip.d.ts",
+    "./assets/ts/artplayer-plugin-hls-control.d.ts",
+    "./assets/ts/artplayer-plugin-jassub.d.ts",
+    "./assets/ts/artplayer-plugin-multiple-subtitles.d.ts",
+    "./assets/ts/artplayer-plugin-vast.d.ts",
+    "./assets/ts/artplayer-plugin-vtt-thumbnail.d.ts",
+    "./assets/ts/artplayer-proxy-canvas.d.ts",
+    "./assets/ts/artplayer-proxy-mediabunny.d.ts",
+    "./assets/ts/artplayer-tool-iframe.d.ts",
+    "./assets/ts/artplayer-tool-thumbnail.d.ts",
+    "./assets/ts/artplayer.d.ts",
+    "./assets/ts/artplayer-i18n.d.ts"
+  ];
+
+  // packages/artplayer-vitepress/browser/editor-monaco.ts
+  async function createMonaco(host, container, typescript, signal) {
+    host.require.config({ paths: { vs: "./assets/js/vs" } });
+    await new Promise(
+      (resolve, reject) => host.require(["vs/editor/editor.main"], resolve, reject)
+    );
+    await new Promise(
+      (resolve, reject) => host.require(
+        [
+          "vs/basic-languages/typescript/typescript",
+          "vs/basic-languages/javascript/javascript",
+          "vs/language/typescript/tsMode"
+        ],
+        resolve,
+        reject
+      )
+    );
+    if (signal.aborted)
+      throw new Error("Editor initialization cancelled");
+    const api = host.monaco;
+    const types = api.languages.typescript;
+    const resources = [];
+    const temporary = /* @__PURE__ */ new Set();
+    let editor;
+    let disposed = false;
+    const dispose = () => {
+      if (disposed)
         return;
+      disposed = true;
+      signal.removeEventListener("abort", dispose);
+      editor?.dispose();
+      editor = void 0;
+      for (const model of temporary) model.dispose();
+      temporary.clear();
+      for (const resource of resources.splice(0).reverse()) resource.dispose();
+    };
+    signal.addEventListener("abort", dispose, { once: true });
+    try {
+      for (const defaults of [
+        types.javascriptDefaults,
+        types.typescriptDefaults
+      ]) {
+        defaults.setDiagnosticsOptions({
+          noSemanticValidation: defaults === types.javascriptDefaults,
+          noSyntaxValidation: false
+        });
+        defaults.setCompilerOptions({
+          target: types.ScriptTarget.ES2015,
+          module: types.ModuleKind.None,
+          allowNonTsExtensions: true,
+          noEmit: false
+        });
+      }
+      for (const uri of libUris) {
+        const response = await host.fetch(uri, { signal });
+        if (!response.ok) {
+          throw new Error(
+            `Loading editor declaration failed: ${uri} (${response.status})`
+          );
+        }
+        const source = await response.text();
+        if (signal.aborted)
+          throw new Error("Editor initialization cancelled");
+        resources.push(
+          types.javascriptDefaults.addExtraLib(source, uri),
+          types.typescriptDefaults.addExtraLib(source, uri)
+        );
+        resources.push(
+          api.editor.createModel(source, "typescript", api.Uri.parse(uri))
+        );
+      }
+      const model = api.editor.createModel(
+        "var art = new Artplayer({\n	container: '.artplayer-app',\n	url: '/assets/sample/video.mp4',\n});",
+        typescript ? "typescript" : "javascript"
+      );
+      resources.push(model);
+      editor = api.editor.create(container, {
+        theme: "vs-dark",
+        folding: true,
+        automaticLayout: true,
+        quickSuggestions: { other: true, comments: true, strings: true },
+        model
+      });
+      return {
+        editor,
+        async compile(source) {
+          if (disposed)
+            throw new Error("Editor was disposed");
+          if (!typescript)
+            return source;
+          const model2 = api.editor.createModel(source, "typescript");
+          temporary.add(model2);
+          try {
+            const worker = await (await types.getTypeScriptWorker())(model2.uri);
+            const file = model2.uri.toString();
+            const syntax = await worker.getSyntacticDiagnostics(file);
+            if (syntax.length) {
+              throw new Error(
+                `TypeScript syntax error: ${syntax.map((item) => typeof item.messageText === "string" ? item.messageText : item.messageText.messageText).join("; ")}`
+              );
+            }
+            const output = await worker.getEmitOutput(file);
+            const script = output.outputFiles.find(
+              (file2) => file2.name.endsWith(".js")
+            );
+            if (output.emitSkipped || !script)
+              throw new Error("TypeScript worker did not emit JavaScript");
+            return script.text;
+          } finally {
+            temporary.delete(model2);
+            if (!model2.isDisposed())
+              model2.dispose();
+          }
+        },
+        dispose
+      };
+    } catch (error) {
+      dispose();
+      throw error;
     }
+  }
 
-    var $codeMirror = document.querySelector('.codeMirrorWrap');
+  // packages/artplayer-vitepress/browser/editor-preferences.ts
-    var $lib = document.querySelector('.libsInput');
+  function readPreference(key, storage = () => localStorage) {
-    var $run = document.querySelector('.run');
+    try {
-    var $popups = document.querySelector('.popups');
+      return storage().getItem(key) === "true";
-    var $console = document.querySelector('.console');
+    } catch {
-    var loaddLib = [];
+      return false;
+    }
+  }
+  function writePreference(key, value, storage = () => localStorage) {
+    try {
+      storage().setItem(key, value ? "true" : "false");
+      return true;
+    } catch {
+      return false;
+    }
+  }
 
-    window.consoleLog($console);
+  // packages/artplayer-vitepress/browser/editor-session.ts
+  function createEditorSession(options) {
+    let generation = 0;
+    let disposed = false;
+    return {
+      async run({
+        libs = "",
+        code,
+        example
+      }) {
+        const current = ++generation;
+        const active = () => !disposed && current === generation;
+        if (!active())
+          return;
+        await options.loadLibraries(libs);
+        if (!active())
+          return;
+        const source = example ? await options.exampleSource(example) : code ? decodeURIComponent(code).trim() : await options.exampleSource("index");
+        if (!active())
+          return;
+        options.writeCode(source);
+        const executable = await options.compile(source);
+        if (active())
+          options.execute(executable);
+      },
+      dispose() {
+        disposed = true;
+        generation++;
+      }
+    };
+  }
+  function executeClassic(code) {
+    new Function(code)();
+  }
 
-    var editor = null;
+  // packages/artplayer-vitepress/browser/editor.ts
-    require.config({ paths: { vs: './assets/js/vs' } });
+  async function installEditor(host) {
-    require(['vs/editor/editor.main'], function () {
+    const document = host.document;
-        var libUri = './assets/ts/artplayer.d.ts';
+    const element = (selector) => {
-        fetch(libUri)
+      const node = document.querySelector(selector);
-            .then((res) => res.text())
+      if (!node)
-            .then((libSource) => {
+        throw new Error(`Missing editor element: ${selector}`);
-                monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+      return node;
-                    noSemanticValidation: true,
+    };
-                    noSyntaxValidation: false,
+    host.Artplayer.DEBUG = true;
-                });
+    if (host.Artplayer.utils.isMobile) {
-
+      host.location.href = `./mobile.html${host.location.search}`;
-                monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+      return;
-                    target: monaco.languages.typescript.ScriptTarget.ES6,
+    }
-                    allowNonTsExtensions: true,
+    const run = element(".run");
-                });
+    const libs = element(".libsInput");
-
+    const file = element("#file");
-                monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
+    const popup = element(".popups");
-                monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri));
+    const output = element(".console");
-
+    host.consoleLog(output);
-                var disposable = monaco.editor.onDidCreateEditor(function () {
+    const controller = new AbortController();
-                    disposable.dispose();
+    const cleanups = [];
-                    setTimeout(initApp, 1000);
+    cleanups.push(() => {
-                });
+      host.consoleLog.unmount?.(output);
-
-                editor = monaco.editor.create($codeMirror, {
-                    theme: 'vs-dark',
-                    automaticLayout: true,
-                    model: monaco.editor.createModel(
-                        [
-                            'var art = new Artplayer({',
-                            "\tcontainer: '.artplayer-app',",
-                            "\turl: 'https://artplayer.org/assets/sample/video.mp4',",
-                            '});',
-                        ].join('\n'),
-                        'javascript',
-                    ),
-                });
-            });
     });
-
+    const listen = (target, type, callback) => {
-    function initArt(art) {
+      target.addEventListener(type, callback);
-        Artplayer.config.events.forEach(function (item) {
+      cleanups.push(() => target.removeEventListener(type, callback));
-            art &&
+    };
-                art.on('video:' + item, function (event) {
+    const report = (error) => {
-                    console.log('video: ' + event.type);
+      if (!controller.signal.aborted)
-                });
+        host.console.error(error);
-        });
+    };
-    }
+    listen(host, "error", (event) => host.console.error(event));
-
+    listen(host, "unhandledrejection", (event) => host.console.error(event));
-    function getURLParameters(url) {
+    for (const key of ["prod", "ts", "code", "log"]) {
-        return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(function (a, v) {
+      const checkbox = element(`#${key}`);
-            return (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a;
+      checkbox.checked = readPreference(key, () => host.localStorage);
-        }, {});
+      listen(checkbox, "change", () => {
-    }
+        if (writePreference(key, checkbox.checked, () => host.localStorage)) {
-
+          host.location.reload();
-    function getExt(url) {
-        if (url.includes('?')) {
-            return getExt(url.split('?')[0]);
-        }
-
-        if (url.includes('#')) {
-            return getExt(url.split('#')[0]);
-        }
-
-        return url.trim().toLowerCase().split('.').pop();
-    }
-
-    function loadScript(url) {
-        return new Promise(function (resolve, reject) {
-            var define2 = window.define;
-            window.define = undefined;
-            var script = document.createElement('script');
-            script.type = 'text/javascript';
-            script.src = url;
-            script.onload = function () {
-                window.define = define2;
-                resolve(url);
-            };
-            script.onerror = function () {
-                reject(new Error('Loading script failed:' + url));
-            };
-            document.querySelector('head').appendChild(script);
-        });
-    }
-
-    function loadStyle(url) {
-        return new Promise(function (resolve, reject) {
-            var link = document.createElement('link');
-            link.rel = 'stylesheet';
-            link.href = url;
-            link.onload = function () {
-                resolve(url);
-            };
-            link.onerror = function () {
-                reject(new Error('Loading style failed:' + url));
-            };
-            document.querySelector('head').appendChild(link);
-        });
-    }
-
-    function loadLib(libs) {
-        var libPromise = [];
-        var libsDecode = decodeURIComponent(libs || '');
-        libsDecode
-            .split(/\r?\n/)
-            .filter(function (url) {
-                return !loaddLib.includes(url);
-            })
-            .forEach(function (url) {
-                var ext = getExt(url);
-                if (ext === 'js') {
-                    libPromise.push(loadScript(url));
-                } else if (ext === 'css') {
-                    libPromise.push(loadStyle(url));
-                }
-            });
-        $lib.value = libsDecode;
-        return Promise.all(libPromise);
-    }
-
-    function runExample(name) {
-        fetch('./assets/example/' + name + '.js')
-            .then(function (response) {
-                return response.text();
-            })
-            .then(function (text) {
-                editor.setValue(text);
-                runCode();
-            })
-            .catch(function (err) {
-                console.error(err);
-            });
-    }
-
-    function loadCode(code, example) {
-        if (example) {
-            runExample(example);
-        } else if (code) {
-            editor.setValue(decodeURIComponent(code).trim());
-            runCode();
         } else {
-            runExample('index');
+          checkbox.checked = readPreference(key, () => host.localStorage);
+          report(
+            new Error("Browser storage is unavailable; preference was not saved")
+          );
         }
+      });
     }
-
+    if (element("#code").checked)
-    function formatDate(date) {
+      element("#editor").style.display = "none";
-        var date = new Date(Number(date));
+    if (element("#log").checked)
-        var YY = date.getFullYear() + '-';
+      output.style.display = "none";
-        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
+    const imports = createFileImports(document, (name) => {
-        var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+      libs.value = `[${name}]`;
-        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
-        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
-        var ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
-        return YY + MM + DD + ' ' + hh + mm + ss;
-    }
-
-    function runCode() {
-        Artplayer.instances.forEach(function (art) {
-            art.destroy(true);
-        });
-        var code = editor.getValue();
-        eval(code);
-        initArt(Artplayer.instances[0]);
-        console.debug('Artplayer@' + Artplayer.version);
-        console.debug('Env@' + Artplayer.env);
-        console.debug('Build@' + formatDate(Artplayer.build));
-    }
-
-    function initApp() {
-        var _getURLParameters = getURLParameters(window.location.href),
-            code = _getURLParameters.code,
-            libs = _getURLParameters.libs;
-        example = _getURLParameters.example;
-
-        loadLib(libs)
-            .then(function (result) {
-                loaddLib = loaddLib.concat(result);
-                loadCode(code, example);
-            })
-            .catch(function (err) {
-                console.error(err);
-            });
-    }
-
-    function restart() {
-        var libs = encodeURIComponent($lib.value);
-        var code = encodeURIComponent(editor.getValue());
-        var url = window.location.origin + window.location.pathname + '?libs=' + libs + '&code=' + code;
-        history.pushState(null, null, url);
-        initApp();
-    }
-
-    $run.addEventListener('click', function () {
-        restart();
     });
-
+    cleanups.push(() => imports.dispose());
-    $popups.addEventListener('click', function (event) {
+    cleanups.push(() => {
-        if (event.target === this) {
+      host.dispatchEvent(new Event("artplayer:example:cleanup"));
-            this.style.display = 'none';
+      for (const art of host.Artplayer.instances.slice()) {
+        try {
+          art.destroy(true);
+        } catch (error) {
+          host.console.error(error);
         }
+      }
+      host.art = void 0;
     });
-
+    listen(file, "change", () => {
-    window.addEventListener('error', function (err) {
+      void imports.add(Array.from(file.files || [])).catch(report);
-        console.error(err);
     });
-
+    listen(popup, "click", (event) => {
-    window.addEventListener('unhandledrejection', function (err) {
+      if (event.target === popup)
-        console.error(err);
+        popup.style.display = "none";
     });
-
+    const onPageHide = (event) => {
-    document.addEventListener('keydown', function (event) {
+      if (event.persisted)
-        if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+        return;
-            event.preventDefault();
+      controller.abort();
-            restart();
+      for (const cleanup of cleanups.reverse()) {
+        try {
+          cleanup();
+        } catch (error) {
+          host.console.error(error);
         }
-    });
+      }
+    };
+    host.addEventListener("pagehide", onPageHide);
+    cleanups.push(() => host.removeEventListener("pagehide", onPageHide));
+    run.setAttribute("aria-disabled", "true");
+    try {
+      let restart2 = function() {
+        const code = encodeURIComponent(monaco.editor.getValue());
+        const dependencies = encodeURIComponent(libs.value);
+        host.history.pushState(
+          null,
+          "",
+          `${host.location.origin}${host.location.pathname}?libs=${dependencies}&code=${code}`
+        );
+        void session.run({ libs: dependencies, code }).catch(report);
+      };
+      var restart = restart2;
+      const monaco = await createMonaco(
+        host,
+        element(".codeMirrorWrap"),
+        element("#ts").checked,
+        controller.signal
+      );
+      const session = createEditorSession({
+        loadLibraries: (encoded) => {
+          libs.value = decodeURIComponent(encoded);
+          return host.ArtplayerDocsLoader.loadLibraries(encoded);
+        },
+        exampleSource: (name) => host.ArtplayerDocsLoader.exampleSource(name),
+        writeCode: (code) => monaco.editor.setValue(code),
+        compile: monaco.compile,
+        execute: (code) => {
+          host.dispatchEvent(new Event("artplayer:example:cleanup"));
+          for (const art of host.Artplayer.instances.slice()) art.destroy(true);
+          executeClassic(code);
+          host.art = host.Artplayer.instances[0];
+        }
+      });
+      cleanups.push(() => session.dispose(), monaco.dispose);
+      listen(run, "click", restart2);
+      listen(document, "keydown", (event) => {
+        const key = event;
+        if ((key.ctrlKey || key.metaKey) && key.key === "s") {
+          key.preventDefault();
+          restart2();
+        }
+      });
+      run.removeAttribute("aria-disabled");
+      await session.run(host.ArtplayerDocsLoader.parameters(host.location.href));
+    } catch (error) {
+      report(error);
+    }
+  }
+  void installEditor(window).catch(
+    (error) => console.error(error)
+  );
 })();

docs/assets/js/console.js

@@ -202,8 +202,47 @@ var t,e,n=module.exports={};function r(){throw new Error("setTimeout has not bee
 var process = require("process");
 var e=require("process");Object.defineProperty(exports,"__esModule",{value:!0}),exports.StyleSheetContext=exports.StyleSheetConsumer=exports.ServerStyleSheet=void 0,exports.StyleSheetManager=fe,exports.ThemeContext=exports.ThemeConsumer=void 0,exports.ThemeProvider=Fe,exports.__PRIVATE__=void 0,exports.createGlobalStyle=We,exports.css=we,exports.default=void 0,exports.isStyledComponent=S,exports.keyframes=$e,exports.withTheme=exports.version=exports.useTheme=void 0;var t=require("react-is"),r=c(require("react")),n=u(require("shallowequal")),o=u(require("@emotion/stylis")),i=u(require("@emotion/unitless")),s=u(require("@emotion/is-prop-valid")),a=u(require("hoist-non-react-statics"));function u(e){return e&&e.__esModule?e:{default:e}}function l(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,r=new WeakMap;return(l=function(e){return e?r:t})(e)}function c(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var r=l(t);if(r&&r.has(e))return r.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if("default"!==i&&Object.prototype.hasOwnProperty.call(e,i)){var s=o?Object.getOwnPropertyDescriptor(e,i):null;s&&(s.get||s.set)?Object.defineProperty(n,i,s):n[i]=e[i]}return n.default=e,r&&r.set(e,n),n}function f(e){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function h(){return(h=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var d=function(e,t){for(var r=[e[0]],n=0,o=t.length;n<o;n+=1)r.push(t[n],e[n+1]);return r},p=function(e){return null!==e&&"object"==f(e)&&"[object Object]"===(e.toString?e.toString():Object.prototype.toString.call(e))&&!(0,t.typeOf)(e)},v=Object.freeze([]),g=Object.freeze({});function m(e){return"function"==typeof e}function y(e){return e.displayName||e.name||"Component"}function S(e){return e&&"string"==typeof e.styledComponentId}var b="data-styled",w="5.3.3",x="undefined"!=typeof window&&"HTMLElement"in window,C=Boolean("boolean"==typeof SC_DISABLE_SPEEDY&&SC_DISABLE_SPEEDY),I={},A={};function P(){for(var e=arguments.length<=0?void 0:arguments[0],t=[],r=1,n=arguments.length;r<n;r+=1)t.push(r<0||arguments.length<=r?void 0:arguments[r]);return t.forEach(function(t){e=e.replace(/%[a-z]/,t)}),e}function j(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];throw new Error("An error occurred. See https://git.io/JUIaE#"+e+" for more information."+(r.length>0?" Args: "+r.join(", "):""))}exports.version=w;var R=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e}var t=e.prototype;return t.indexOfGroup=function(e){for(var t=0,r=0;r<e;r++)t+=this.groupSizes[r];return t},t.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var r=this.groupSizes,n=r.length,o=n;e>=o;)(o<<=1)<0&&j(16,""+e);this.groupSizes=new Uint32Array(o),this.groupSizes.set(r),this.length=o;for(var i=n;i<o;i++)this.groupSizes[i]=0}for(var s=this.indexOfGroup(e+1),a=0,u=t.length;a<u;a++)this.tag.insertRule(s,t[a])&&(this.groupSizes[e]++,s++)},t.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],r=this.indexOfGroup(e),n=r+t;this.groupSizes[e]=0;for(var o=r;o<n;o++)this.tag.deleteRule(r)}},t.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var r=this.groupSizes[e],n=this.indexOfGroup(e),o=n+r,i=n;i<o;i++)t+=this.tag.getRule(i)+"/*!sc*/\n";return t},e}(),_=new Map,O=new Map,N=1,E=function(e){if(_.has(e))return _.get(e);for(;O.has(N);)N++;var t=N++;return _.set(e,t),O.set(t,e),t},T=function(e){return O.get(e)},k=function(e,t){t>=N&&(N=t+1),_.set(e,t),O.set(t,e)},M="style["+b+'][data-styled-version="5.3.3"]',z=new RegExp("^"+b+'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'),F=function(e,t,r){for(var n,o=r.split(","),i=0,s=o.length;i<s;i++)(n=o[i])&&e.registerName(t,n)},q=function(e,t){for(var r=(t.textContent||"").split("/*!sc*/\n"),n=[],o=0,i=r.length;o<i;o++){var s=r[o].trim();if(s){var a=s.match(z);if(a){var u=0|parseInt(a[1],10),l=a[2];0!==u&&(k(l,u),F(e,l,a[3]),e.getTag().insertRules(u,n)),n.length=0}else n.push(s)}}},G=function(){return"undefined"!=typeof window&&void 0!==window.__webpack_nonce__?window.__webpack_nonce__:null},B=function(e){var t=document.head,r=e||t,n=document.createElement("style"),o=function(e){for(var t=e.childNodes,r=t.length;r>=0;r--){var n=t[r];if(n&&1===n.nodeType&&n.hasAttribute(b))return n}}(r),i=void 0!==o?o.nextSibling:null;n.setAttribute(b,"active"),n.setAttribute("data-styled-version","5.3.3");var s=G();return s&&n.setAttribute("nonce",s),r.insertBefore(n,i),n},D=function(){function e(e){var t=this.element=B(e);t.appendChild(document.createTextNode("")),this.sheet=functionLine truncated
 },{"react-is":"H1RQ","react":"n8MK","shallowequal":"NKxe","@emotion/stylis":"uxSu","@emotion/unitless":"qy56","@emotion/is-prop-valid":"m5O0","hoist-non-react-statics":"LCQI","process":"KIG8"}],"W5CS":[function(require,module,exports) {
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e,t=r(require("react")),n=require("console-feed"),o=r(require("styled-components"));function r(e){return e&&e.__esModule?e:{default:e}}function l(e){return(l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e){return s(e)||u(e)||a(e)||c()}function c(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function a(e,t){if(e){if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,t):void 0}}function u(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function s(e){if(Array.isArray(e))return f(e)}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}function d(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function p(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function y(e,t,n){return t&&p(e.prototype,t),n&&p(e,n),e}function h(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&m(e,t)}function m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function v(e){var t=w();return function(){var n,o=E(e);if(t){var r=E(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return b(this,n)}}function b(e,t){if(t&&("object"===l(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return g(e)}function g(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function w(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(e){return!1}}function E(e){return(E=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function O(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}var j=o.default.div(e||(e=O(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: #242424;\n  .console-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    color: #eee;\n    padding: 7px 10px;\n    font-size: 12px;\n    background-color: #111;\n    border-bottom: 1px solid rgb(255 255 255 / 10%);\n    user-select: none;\n    .console-header-left {\n      display: flex;\n      align-items: center;\n      .console-header-number {\n        margin-left: 5px;\n        color: rgba(255, 255, 255, 0.4);\n      }\n    }\n    .console-header-right {\n      cursor: pointer;\n    }\n  }\n  .console-component {\n    scroll-behavior: smooth;\n    position: relative;\n    overflow: auto;\n    height: 200px;\n    flex: 1;\n  }\n"]))),x=function(e){h(r,t.default.Component);var o=v(r);function r(e){var n;return d(this,r),(n=o.call(this,e)).scrollTimer=null,n.consoleRef=t.default.createRef(),n.onClear=n.onClear.bind(g(n)),n.onMouseEnter=n.onMouseEnter.bind(g(n)),n.onMouseLeave=n.onMouseLeave.bind(g(n)),n.state={logs:[],hover:!1},n}return y(r,[{key:"componentDidMount",value:function(){var e=this;(0,n.Hook)(window.console,function(t){return e.add(t)},!1)}},{key:"add",value:function(e){this.setState({logs:[].concat(i(this.state.logs),[e])});var t=this.consoleRef.current;!this.state.hover&&t&&(clearTimeout(this.scrollTimer),this.scrollTimer=setTimeout(function(){t.scrollTop=t.scrollHeight},200))}},{key:"onClear",value:function(){this.setState({logs:[]})}},{key:"onMouseEnter",value:function(){this.setState({hover:!0})}},{key:"onMouseLeave",value:function(){this.setState({hover:!1})}},{key:"componentWillUnmount",value:function(){(0,n.Unhook)(window.console)}},{key:"render",value:function(){return t.default.createElement(j,null,t.default.createElement("div",{className:"console-header"},t.default.createElement("div",{className:"console-header-left"},"Console"," ",t.default.createElement("span",{className:"console-header-number"},this.state.logs.length)),t.default.createElement("div",{className:"console-header-right",onClick:this.onClear},"Clear")),t.default.createLine truncated
+"use strict";"use strict";var __consoleOwned=(()=>{var v=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var O=(e,o)=>{for(var s in o)v(e,s,{get:o[s],enumerable:!0})},j=(e,o,s,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of E(o))!L.call(e,n)&&n!==s&&v(e,n,{get:()=>o[n],enumerable:!(i=C(o,n))||i.enumerable});return e};var P=e=>j(v({},"__esModule",{value:!0}),e);var D={};O(D,{createView:()=>N});var w=`
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #242424;
+  .console-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #eee;
+    padding: 7px 10px;
+    font-size: 12px;
+    background-color: #111;
+    border-bottom: 1px solid rgb(255 255 255 / 10%);
+    user-select: none;
+    .console-header-left {
+      display: flex;
+      align-items: center;
+      .console-header-number {
+        margin-left: 5px;
+        color: rgba(255, 255, 255, 0.4);
+      }
+    }
+    .console-header-right {
+      cursor: pointer;
+    }
+  }
+  .console-component {
+    scroll-behavior: smooth;
+    position: relative;
+    overflow: auto;
+    height: 200px;
+    flex: 1;
+  }
+`;function k(e){try{if(Object.prototype.toString.call(e)!=="[object Error]")return e;let o=e,s=o.stack,i=o.message;if(typeof s!="string"||!i)return e;let n=o.name?`${o.name}: ${i}`:i;return s.startsWith(n)?e:`${n}
+${s}`}catch(o){return e}}function x(e,o,s,i){let n;function p(l){for(let r of l.pending)i.clearTimeout(r);l.pending.clear();for(let r of l.saved)e[r.name]===r.wrapper&&(r.descriptor?Object.defineProperty(e,r.name,r.descriptor):delete e[r.name]);e.feed===l.feed&&(l.previousFeed?Object.defineProperty(e,"feed",l.previousFeed):delete e.feed)}return l=>{if(!n){let c={listeners:new Set,pending:new Set,saved:[],previousFeed:Object.getOwnPropertyDescriptor(e,"feed"),feed:{pointers:{},src:{npm:"https://npmjs.com/package/console-feed",github:"https://github.com/samdenty99/console-feed"}}};n=c;try{for(let t of o){let a=e[t],d=function(...u){Reflect.apply(a,this,u);let h=[...c.listeners];if(!h.length)return;let m=i.setTimeout(()=>{var T;c.pending.delete(m);let y=s(t,t==="error"?u.map(k):u);if(y){let g=!1,M;for(let b of h)try{(T=b.callback)==null||T.call(b,y)}catch(S){g?i.setTimeout(()=>{throw S},0):(g=!0,M=S)}if(g)throw M}},0);c.pending.add(m)};c.feed.pointers[t]=a,c.saved.push({name:t,descriptor:Object.getOwnPropertyDescriptor(e,t),wrapper:d}),e[t]=d}e.feed=c.feed}catch(t){throw p(c),n=void 0,t}}let r=n,f={callback:l};return r.listeners.add(f),()=>{f.callback=void 0,r.listeners.delete(f),!r.listeners.size&&n===r&&(n=void 0,p(r))}}}function N(e,o,s,i,n){let p=Object.freeze(Object.defineProperty([w],"raw",{value:Object.freeze([w])})),l=s.div(p),r=x(window.console,n,i,window);return class extends e.Component{constructor(t){super(t);this.scrollTimer=null;this.consoleRef=e.createRef();this.mounted=!1;this.onClear=this.onClear.bind(this),this.onMouseEnter=this.onMouseEnter.bind(this),this.onMouseLeave=this.onMouseLeave.bind(this),this.state={logs:[],hover:!1}}componentDidMount(){this.mounted=!0,this.unsubscribe=r(t=>this.add(t))}add(t){if(!this.mounted)return;this.setState(d=>({logs:[...d.logs,t]}));let a=this.consoleRef.current;!this.state.hover&&a&&(this.scrollTimer!==null&&window.clearTimeout(this.scrollTimer),this.scrollTimer=window.setTimeout(()=>{this.scrollTimer=null,this.mounted&&this.consoleRef.current===a&&(a.scrollTop=a.scrollHeight)},200))}onClear(){this.setState({logs:[]})}onMouseEnter(){this.setState({hover:!0})}onMouseLeave(){this.setState({hover:!1})}componentWillUnmount(){var t;this.mounted=!1,(t=this.unsubscribe)==null||t.call(this),this.unsubscribe=void 0,this.scrollTimer!==null&&window.clearTimeout(this.scrollTimer),this.scrollTimer=null}render(){let t=e.createElement("span",{className:"console-header-number"},this.state.logs.length),a=e.createElement("div",{className:"console-header-left"},"Console"," ",t),d=e.createElement("div",{className:"console-header-right",onClick:this.onClear},"Clear"),u=e.createElement("div",{className:"console-header"},a,d),h=e.createElement(o.Console,{logs:this.state.logs,variant:"dark"}),m=e.createElement("div",{ref:this.consoleRef,className:"console-component",onMouseEnter:this.onMouseEnter,onMouseLeave:this.onMouseLeave},h);return e.createElement(l,null,u,m)}}}return P(D);})();
+Object.defineProperty(exports,"__esModule",{value:true});exports.default=__consoleOwned.createView(require("react"),require("console-feed"),require("styled-components").default,require("RxPG").default,require("V2JG").default);
 },{"react":"n8MK","console-feed":"m6b6","styled-components":"tFSs"}],"Focm":[function(require,module,exports) {
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=u(require("react")),t=u(require("react-dom")),r=u(require("./Console"));function u(e){return e&&e.__esModule?e:{default:e}}var o=function(u){return t.default.render(e.default.createElement(r.default,null),u)};window.React=e.default,window.ReactDOM=t.default,window.consoleLog=o;var a=o;exports.default=a;
+"use strict";"use strict";var __consoleOwned=(()=>{var r=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var l=(e,n)=>{for(var o in n)r(e,o,{get:n[o],enumerable:!0})},p=(e,n,o,m)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of c(n))!R.call(e,t)&&t!==o&&r(e,t,{get:()=>n[t],enumerable:!(m=i(n,t))||m.enumerable});return e};var s=e=>p(r({},"__esModule",{value:!0}),e);var d={};l(d,{install:()=>a});function a(e,n,o,m){let t=u=>n.render(e.createElement(o),u);return t.unmount=u=>n.unmountComponentAtNode(u),m.React=e,m.ReactDOM=n,m.consoleLog=t,t}return s(d);})();
+Object.defineProperty(exports,"__esModule",{value:true});exports.default=__consoleOwned.install(require("react"),require("react-dom"),require("./Console").default,window);
 },{"react":"n8MK","react-dom":"NKHc","./Console":"W5CS"}]},{},["Focm"], null)
-//# sourceMappingURL=/index.js.map
+
+/*! customStringify: Alexander Mills, with credit to Rob W. CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/ . Source revision: https://api.stackexchange.com/2.3/revisions/8FD5F52A-B16F-4C66-AB48-830EABB36CC0?site=stackoverflow&filter=withbody . ES3 compilation and minification; notices and source: /licenses/console/stackoverflow/ATTRIBUTION.md . Other component notices: /THIRD_PARTY_NOTICES.md */

docs/assets/js/loader.js

@@ -0,0 +1,135 @@
+// Generated by yarn build:site-assets. Do not edit.
+"use strict";
+(() => {
+  // packages/artplayer-vitepress/browser/loader.ts
+  function parameters(url) {
+    const result = {};
+    for (const part of new URL(url).search.slice(1).split("&")) {
+      const index = part.indexOf("=");
+      if (index >= 0)
+        result[part.slice(0, index)] = part.slice(index + 1);
+    }
+    return result;
+  }
+  function suspendDefine(host) {
+    const descriptor = Object.getOwnPropertyDescriptor(host, "define");
+    if (descriptor?.configurable === false) {
+      if (!("value" in descriptor) || !descriptor.writable)
+        throw new Error("Cannot temporarily suspend the AMD loader");
+      Object.defineProperty(host, "define", { value: void 0 });
+    } else {
+      Object.defineProperty(host, "define", { value: void 0, configurable: true, writable: true, enumerable: descriptor?.enumerable ?? true });
+    }
+    return () => {
+      if (descriptor)
+        Object.defineProperty(host, "define", descriptor);
+      else Reflect.deleteProperty(host, "define");
+    };
+  }
+  function createLibraryLoader(host = window) {
+    const loaded = /* @__PURE__ */ new Set();
+    let queue = Promise.resolve();
+    let cancel;
+    let disposed = false;
+    const ensureActive = () => {
+      if (disposed)
+        throw new Error("Documentation loader was disposed");
+    };
+    function load(url, script) {
+      return new Promise((resolve, reject) => {
+        const element = host.document.createElement(script ? "script" : "link");
+        let restore;
+        let settled = false;
+        function finish(error) {
+          if (settled)
+            return;
+          settled = true;
+          element.removeEventListener("load", success);
+          element.removeEventListener("error", failure);
+          cancel = void 0;
+          try {
+            restore?.();
+          } catch (cause) {
+            error = new Error(`Failed to restore AMD loader: ${String(cause)}`);
+          }
+          if (error) {
+            element.remove();
+            reject(error);
+          } else {
+            resolve();
+          }
+        }
+        function success() {
+          finish();
+        }
+        function failure() {
+          finish(new Error(`Loading ${script ? "script" : "style"} failed: ${url}`));
+        }
+        element.addEventListener("load", success);
+        element.addEventListener("error", failure);
+        cancel = () => finish(new Error(`Cancelled documentation dependency: ${url}`));
+        try {
+          ensureActive();
+          if (script) {
+            restore = suspendDefine(host);
+            const node = element;
+            node.type = "text/javascript";
+            node.src = url;
+            node.async = false;
+          } else {
+            const node = element;
+            node.rel = "stylesheet";
+            node.href = url;
+          }
+          host.document.head.appendChild(element);
+        } catch (cause) {
+          finish(cause instanceof Error ? cause : new Error(String(cause)));
+        }
+      });
+    }
+    return {
+      loadLibraries(encoded = "") {
+        const work = queue.then(async () => {
+          ensureActive();
+          const urls = decodeURIComponent(encoded).split(/\r?\n/).map((url) => url.trim()).filter(Boolean);
+          const result = [];
+          for (const url of urls) {
+            ensureActive();
+            const absolute = new URL(url, host.location.href);
+            const extension = absolute.pathname.toLowerCase().split(".").pop();
+            if (extension !== "js" && extension !== "css")
+              continue;
+            if (!loaded.has(absolute.href)) {
+              await load(absolute.href, extension === "js");
+              loaded.add(absolute.href);
+            }
+            result.push(url);
+          }
+          return result;
+        });
+        queue = work.catch(() => {
+        });
+        return work;
+      },
+      dispose() {
+        disposed = true;
+        cancel?.();
+        loaded.clear();
+      }
+    };
+  }
+  async function exampleSource(name, request = fetch) {
+    const response = await request(`./assets/example/${name}.js`);
+    if (!response.ok)
+      throw new Error(`Loading example failed: ${name} (${response.status})`);
+    return response.text();
+  }
+
+  // packages/artplayer-vitepress/browser/editor-loader.ts
+  var loader = createLibraryLoader();
+  Object.assign(window, { ArtplayerDocsLoader: { ...loader, exampleSource, parameters } });
+  window.addEventListener("pagehide", (event) => {
+    if (!event.persisted)
+      loader.dispose();
+  });
+})();