From 5dfe50c719bf5d4fe0f5e234d2dd118d38413626 Mon Sep 17 00:00:00 2001
From: Harvey Zack <laozhaochaguan@gmail.com>
Date: Sat, 19 Oct 2024 13:53:36 +0800
Subject: [PATCH] Add artplayer-plugin-ambilight package and demo

---
 README.md                                     |   1 +
 docs/assets/example/ambilight.js              |  16 +
 docs/index.html                               |   4 +
 .../artplayer-plugin-ambilight/index.js       | 303 ++++++++++++++++++
 .../artplayer-plugin-ambilight/index.js.map   |   1 +
 packages/artplayer-plugin-ambilight/README.md |  11 +
 .../artplayer-plugin-ambilight/package.json   |  24 ++
 .../artplayer-plugin-ambilight/src/index.js   | 119 +++++++
 .../types/artplayer-plugin-ambilight.d.ts     |  20 ++
 .../docs/.vitepress/config.js                 |   2 +
 10 files changed, 501 insertions(+)
 create mode 100644 docs/assets/example/ambilight.js
 create mode 100644 docs/uncompiled/artplayer-plugin-ambilight/index.js
 create mode 100644 docs/uncompiled/artplayer-plugin-ambilight/index.js.map
 create mode 100644 packages/artplayer-plugin-ambilight/README.md
 create mode 100644 packages/artplayer-plugin-ambilight/package.json
 create mode 100644 packages/artplayer-plugin-ambilight/src/index.js
 create mode 100644 packages/artplayer-plugin-ambilight/types/artplayer-plugin-ambilight.d.ts

diff --git a/README.md b/README.md
index bc31f2729..dd408d9b2 100644
--- a/README.md
+++ b/README.md
@@ -108,6 +108,7 @@ var art = new Artplayer({
 -   [artplayer-plugin-vast](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vast/index.js&example=vast)
 -   [artplayer-plugin-chapter](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chapter/index.js&example=chapter)
 -   [artplayer-plugin-auto-thumbnail](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-auto-thumbnail/index.js&example=auto.thumbnail)
+-   [artplayer-plugin-ambilight](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&example=ambilight)
 
 ## Libraries
 
diff --git a/docs/assets/example/ambilight.js b/docs/assets/example/ambilight.js
new file mode 100644
index 000000000..4d97c14f1
--- /dev/null
+++ b/docs/assets/example/ambilight.js
@@ -0,0 +1,16 @@
+// npm i artplayer-plugin-ambilight
+// import artplayerPluginAmbilight from 'artplayer-plugin-ambilight';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+    plugins: [
+        artplayerPluginAmbilight({
+            blur: '50px', 
+            opacity: 1, 
+            frequency: 10, 
+            duration: 0.3,
+        }),
+    ],
+});
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 9e18ae04a..6b97d42e0 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -103,6 +103,10 @@
                             <a
                                 href="/?libs=./uncompiled/artplayer-plugin-auto-thumbnail/index.js&example=auto.thumbnail">artplayer-plugin-auto-thumbnail</a>
                         </li>
+                        <li>
+                            <a
+                                href="/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&example=ambilight">artplayer-plugin-ambilight</a>
+                        </li>
                     </ul>
                     <ul>
                         <li class="title">Proxys</li>
diff --git a/docs/uncompiled/artplayer-plugin-ambilight/index.js b/docs/uncompiled/artplayer-plugin-ambilight/index.js
new file mode 100644
index 000000000..b96b42d73
--- /dev/null
+++ b/docs/uncompiled/artplayer-plugin-ambilight/index.js
@@ -0,0 +1,303 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+
+(function (modules, entry, mainEntry, parcelRequireName, globalName) {
+  /* eslint-disable no-undef */
+  var globalObject =
+    typeof globalThis !== 'undefined'
+      ? globalThis
+      : typeof self !== 'undefined'
+      ? self
+      : typeof window !== 'undefined'
+      ? window
+      : typeof global !== 'undefined'
+      ? global
+      : {};
+  /* eslint-enable no-undef */
+
+  // Save the require from previous bundle to this closure if any
+  var previousRequire =
+    typeof globalObject[parcelRequireName] === 'function' &&
+    globalObject[parcelRequireName];
+
+  var cache = previousRequire.cache || {};
+  // Do not use `require` to prevent Webpack from trying to bundle this call
+  var nodeRequire =
+    typeof module !== 'undefined' &&
+    typeof module.require === 'function' &&
+    module.require.bind(module);
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire =
+          typeof globalObject[parcelRequireName] === 'function' &&
+          globalObject[parcelRequireName];
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error("Cannot find module '" + name + "'");
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = (cache[name] = new newRequire.Module(name));
+
+      modules[name][0].call(
+        module.exports,
+        localRequire,
+        module,
+        module.exports,
+        this
+      );
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x) {
+      var res = localRequire.resolve(x);
+      return res === false ? {} : newRequire(res);
+    }
+
+    function resolve(x) {
+      var id = modules[name][1][x];
+      return id != null ? id : x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [
+      function (require, module) {
+        module.exports = exports;
+      },
+      {},
+    ];
+  };
+
+  Object.defineProperty(newRequire, 'root', {
+    get: function () {
+      return globalObject[parcelRequireName];
+    },
+  });
+
+  globalObject[parcelRequireName] = newRequire;
+
+  for (var i = 0; i < entry.length; i++) {
+    newRequire(entry[i]);
+  }
+
+  if (mainEntry) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(mainEntry);
+
+    // CommonJS
+    if (typeof exports === 'object' && typeof module !== 'undefined') {
+      module.exports = mainExports;
+
+      // RequireJS
+    } else if (typeof define === 'function' && define.amd) {
+      define(function () {
+        return mainExports;
+      });
+
+      // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+})({"ica5N":[function(require,module,exports) {
+var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
+parcelHelpers.defineInteropFlag(exports);
+parcelHelpers.export(exports, "default", ()=>artplayerPluginAmbilight);
+function artplayerPluginAmbilight(option = {}) {
+    return (art)=>{
+        const { $video } = art.template;
+        const { createElement, addClass, setStyles } = art.constructor.utils;
+        const { blur = "50px", opacity = 0.5, frequency = 10, duration = 0.3 } = option;
+        const $ambilight = createElement("div");
+        const gridItems = createGridItems($ambilight);
+        setupAmbilight($ambilight, $video);
+        setupGridItems(gridItems, blur, opacity, duration);
+        const updateColors = createColorUpdater($video, gridItems, frequency);
+        let animationFrameId = null;
+        function start() {
+            if (!animationFrameId) updateColors();
+        }
+        function stop() {
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+                animationFrameId = null;
+            }
+        }
+        art.on("ready", start);
+        art.on("destroy", stop);
+        return {
+            name: "artplayerPluginAmbilight",
+            start,
+            stop
+        };
+        function createGridItems($ambilight) {
+            $ambilight.innerHTML = Array(9).fill("<div></div>").join("");
+            return Array.from($ambilight.children);
+        }
+        function setupAmbilight($ambilight, $video) {
+            addClass($ambilight, "artplayer-plugin-ambilight");
+            $video.parentNode.insertBefore($ambilight, $video);
+            setStyles($ambilight, {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                zIndex: 9,
+                inset: 0,
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr 1fr",
+                gridTemplateRows: "1fr 1fr 1fr"
+            });
+        }
+        function setupGridItems(gridItems, blur, opacity, duration) {
+            gridItems.forEach(($item)=>{
+                setStyles($item, {
+                    opacity,
+                    filter: `blur(${blur})`,
+                    transition: `background-color ${duration}s ease`
+                });
+            });
+        }
+        function createColorUpdater($video, gridItems, frequency) {
+            const canvas = createElement("canvas");
+            const ctx = canvas.getContext("2d");
+            canvas.width = 3;
+            canvas.height = 3;
+            function getAverageColor(x, y, w, h) {
+                ctx.drawImage($video, x, y, w, h, 0, 0, 1, 1);
+                const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+                return `rgb(${r}, ${g}, ${b})`;
+            }
+            let lastUpdateTime = 0;
+            return function updateColors() {
+                const now = performance.now();
+                if (now - lastUpdateTime < 1000 / frequency || !art.playing) {
+                    animationFrameId = requestAnimationFrame(updateColors);
+                    return;
+                }
+                lastUpdateTime = now;
+                const w = $video.videoWidth / 3;
+                const h = $video.videoHeight / 3;
+                const colors = [
+                    [
+                        0,
+                        0
+                    ],
+                    [
+                        w,
+                        0
+                    ],
+                    [
+                        2 * w,
+                        0
+                    ],
+                    [
+                        0,
+                        h
+                    ],
+                    [
+                        w,
+                        h
+                    ],
+                    [
+                        2 * w,
+                        h
+                    ],
+                    [
+                        0,
+                        2 * h
+                    ],
+                    [
+                        w,
+                        2 * h
+                    ],
+                    [
+                        2 * w,
+                        2 * h
+                    ]
+                ].map(([x, y])=>getAverageColor(x, y, w, h));
+                gridItems.forEach(($item, index)=>{
+                    $item.style.backgroundColor = colors[index];
+                });
+                animationFrameId = requestAnimationFrame(updateColors);
+            };
+        }
+    };
+}
+if (typeof window !== "undefined") window["artplayerPluginAmbilight"] = artplayerPluginAmbilight;
+
+},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"5dUr6":[function(require,module,exports) {
+exports.interopDefault = function(a) {
+    return a && a.__esModule ? a : {
+        default: a
+    };
+};
+exports.defineInteropFlag = function(a) {
+    Object.defineProperty(a, "__esModule", {
+        value: true
+    });
+};
+exports.exportAll = function(source, dest) {
+    Object.keys(source).forEach(function(key) {
+        if (key === "default" || key === "__esModule" || Object.prototype.hasOwnProperty.call(dest, key)) return;
+        Object.defineProperty(dest, key, {
+            enumerable: true,
+            get: function() {
+                return source[key];
+            }
+        });
+    });
+    return dest;
+};
+exports.export = function(dest, destName, get) {
+    Object.defineProperty(dest, destName, {
+        enumerable: true,
+        get: get
+    });
+};
+
+},{}]},["ica5N"], "ica5N", "parcelRequire4dc0")
+
+//# sourceMappingURL=index.js.map
diff --git a/docs/uncompiled/artplayer-plugin-ambilight/index.js.map b/docs/uncompiled/artplayer-plugin-ambilight/index.js.map
new file mode 100644
index 000000000..9c6c1b8b9
--- /dev/null
+++ b/docs/uncompiled/artplayer-plugin-ambilight/index.js.map
@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/artplayer-plugin-ambilight/src/index.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["export default function artplayerPluginAmbilight(option = {}) {\n    return (art) => {\n        const { $video } = art.template;\n        const { createElement, addClass, setStyles } = art.constructor.utils;\n        const { blur = '50px', opacity = 0.5, frequency = 10, duration = 0.3 } = option;\n\n        const $ambilight = createElement('div');\n        const gridItems = createGridItems($ambilight);\n\n        setupAmbilight($ambilight, $video);\n        setupGridItems(gridItems, blur, opacity, duration);\n\n        const updateColors = createColorUpdater($video, gridItems, frequency);\n\n        let animationFrameId = null;\n\n        function start() {\n            if (!animationFrameId) {\n                updateColors();\n            }\n        }\n\n        function stop() {\n            if (animationFrameId) {\n                cancelAnimationFrame(animationFrameId);\n                animationFrameId = null;\n            }\n        }\n\n        art.on('ready', start);\n        art.on('destroy', stop);\n\n        return {\n            name: 'artplayerPluginAmbilight',\n            start,\n            stop,\n        };\n\n        function createGridItems($ambilight) {\n            $ambilight.innerHTML = Array(9).fill('<div></div>').join('');\n            return Array.from($ambilight.children);\n        }\n\n        function setupAmbilight($ambilight, $video) {\n            addClass($ambilight, 'artplayer-plugin-ambilight');\n            $video.parentNode.insertBefore($ambilight, $video);\n            setStyles($ambilight, {\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                zIndex: 9,\n                inset: 0,\n                display: 'grid',\n                gridTemplateColumns: '1fr 1fr 1fr',\n                gridTemplateRows: '1fr 1fr 1fr',\n            });\n        }\n\n        function setupGridItems(gridItems, blur, opacity, duration) {\n            gridItems.forEach(($item) => {\n                setStyles($item, {\n                    opacity,\n\n                    filter: `blur(${blur})`,\n                    transition: `background-color ${duration}s ease`,\n                });\n            });\n        }\n\n        function createColorUpdater($video, gridItems, frequency) {\n            const canvas = createElement('canvas');\n            const ctx = canvas.getContext('2d');\n            canvas.width = 3;\n            canvas.height = 3;\n\n            function getAverageColor(x, y, w, h) {\n                ctx.drawImage($video, x, y, w, h, 0, 0, 1, 1);\n                const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;\n                return `rgb(${r}, ${g}, ${b})`;\n            }\n\n            let lastUpdateTime = 0;\n\n            return function updateColors() {\n                const now = performance.now();\n                if (now - lastUpdateTime < 1000 / frequency || !art.playing) {\n                    animationFrameId = requestAnimationFrame(updateColors);\n                    return;\n                }\n\n                lastUpdateTime = now;\n\n                const w = $video.videoWidth / 3;\n                const h = $video.videoHeight / 3;\n\n                const colors = [\n                    [0, 0],\n                    [w, 0],\n                    [2 * w, 0],\n                    [0, h],\n                    [w, h],\n                    [2 * w, h],\n                    [0, 2 * h],\n                    [w, 2 * h],\n                    [2 * w, 2 * h],\n                ].map(([x, y]) => getAverageColor(x, y, w, h));\n\n                gridItems.forEach(($item, index) => {\n                    $item.style.backgroundColor = colors[index];\n                });\n\n                animationFrameId = requestAnimationFrame(updateColors);\n            };\n        }\n    };\n}\n\nif (typeof window !== 'undefined') {\n    window['artplayerPluginAmbilight'] = artplayerPluginAmbilight;\n}\n","exports.interopDefault = function (a) {\n  return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n  Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n  Object.keys(source).forEach(function (key) {\n    if (\n      key === 'default' ||\n      key === '__esModule' ||\n      Object.prototype.hasOwnProperty.call(dest, key)\n    ) {\n      return;\n    }\n\n    Object.defineProperty(dest, key, {\n      enumerable: true,\n      get: function () {\n        return source[key];\n      },\n    });\n  });\n\n  return dest;\n};\n\nexports.export = function (dest, destName, get) {\n  Object.defineProperty(dest, destName, {\n    enumerable: true,\n    get: get,\n  });\n};\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../"}
\ No newline at end of file
diff --git a/packages/artplayer-plugin-ambilight/README.md b/packages/artplayer-plugin-ambilight/README.md
new file mode 100644
index 000000000..700596b88
--- /dev/null
+++ b/packages/artplayer-plugin-ambilight/README.md
@@ -0,0 +1,11 @@
+# artplayer-plugin-ambilight
+
+ambilight plugin for ArtPlayer
+
+## Demo
+
+[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&example=ambilight)
+
+## License
+
+MIT © Harvey Zack
diff --git a/packages/artplayer-plugin-ambilight/package.json b/packages/artplayer-plugin-ambilight/package.json
new file mode 100644
index 000000000..6a070aec2
--- /dev/null
+++ b/packages/artplayer-plugin-ambilight/package.json
@@ -0,0 +1,24 @@
+{
+    "license": "MIT",
+    "version": "1.0.0",
+    "name": "artplayer-plugin-ambilight",
+    "types": "types/artplayer-plugin-ambilight.d.ts",
+    "description": "ambilight plugin for ArtPlayer",
+    "main": "dist/artplayer-plugin-ambilight.js",
+    "legacy": "dist/artplayer-plugin-ambilight.legacy.js",
+    "author": "Harvey Zack <laozhaochaguan@gmail.com>",
+    "browserslist": "last 1 Chrome version",
+    "homepage": "https://artplayer.org",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/zhw2590582/ArtPlayer.git"
+    },
+    "bugs": {
+        "url": "https://github.com/zhw2590582/ArtPlayer/issues"
+    },
+    "keywords": [
+        "html5",
+        "video",
+        "player"
+    ]
+}
diff --git a/packages/artplayer-plugin-ambilight/src/index.js b/packages/artplayer-plugin-ambilight/src/index.js
new file mode 100644
index 000000000..9f3fd1e0c
--- /dev/null
+++ b/packages/artplayer-plugin-ambilight/src/index.js
@@ -0,0 +1,119 @@
+export default function artplayerPluginAmbilight(option = {}) {
+    return (art) => {
+        const { $video } = art.template;
+        const { createElement, addClass, setStyles } = art.constructor.utils;
+        const { blur = '50px', opacity = 0.5, frequency = 10, duration = 0.3 } = option;
+
+        const $ambilight = createElement('div');
+        const gridItems = createGridItems($ambilight);
+
+        setupAmbilight($ambilight, $video);
+        setupGridItems(gridItems, blur, opacity, duration);
+
+        const updateColors = createColorUpdater($video, gridItems, frequency);
+
+        let animationFrameId = null;
+
+        function start() {
+            if (!animationFrameId) {
+                updateColors();
+            }
+        }
+
+        function stop() {
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+                animationFrameId = null;
+            }
+        }
+
+        art.on('ready', start);
+        art.on('destroy', stop);
+
+        return {
+            name: 'artplayerPluginAmbilight',
+            start,
+            stop,
+        };
+
+        function createGridItems($ambilight) {
+            $ambilight.innerHTML = Array(9).fill('<div></div>').join('');
+            return Array.from($ambilight.children);
+        }
+
+        function setupAmbilight($ambilight, $video) {
+            addClass($ambilight, 'artplayer-plugin-ambilight');
+            $video.parentNode.insertBefore($ambilight, $video);
+            setStyles($ambilight, {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                zIndex: 9,
+                inset: 0,
+                display: 'grid',
+                gridTemplateColumns: '1fr 1fr 1fr',
+                gridTemplateRows: '1fr 1fr 1fr',
+            });
+        }
+
+        function setupGridItems(gridItems, blur, opacity, duration) {
+            gridItems.forEach(($item) => {
+                setStyles($item, {
+                    opacity,
+                    filter: `blur(${blur})`,
+                    transition: `background-color ${duration}s ease`,
+                });
+            });
+        }
+
+        function createColorUpdater($video, gridItems, frequency) {
+            const canvas = createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            canvas.width = 3;
+            canvas.height = 3;
+
+            function getAverageColor(x, y, w, h) {
+                ctx.drawImage($video, x, y, w, h, 0, 0, 1, 1);
+                const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+                return `rgb(${r}, ${g}, ${b})`;
+            }
+
+            let lastUpdateTime = 0;
+
+            return function updateColors() {
+                const now = performance.now();
+                if (now - lastUpdateTime < 1000 / frequency || !art.playing) {
+                    animationFrameId = requestAnimationFrame(updateColors);
+                    return;
+                }
+
+                lastUpdateTime = now;
+
+                const w = $video.videoWidth / 3;
+                const h = $video.videoHeight / 3;
+
+                const colors = [
+                    [0, 0],
+                    [w, 0],
+                    [2 * w, 0],
+                    [0, h],
+                    [w, h],
+                    [2 * w, h],
+                    [0, 2 * h],
+                    [w, 2 * h],
+                    [2 * w, 2 * h],
+                ].map(([x, y]) => getAverageColor(x, y, w, h));
+
+                gridItems.forEach(($item, index) => {
+                    $item.style.backgroundColor = colors[index];
+                });
+
+                animationFrameId = requestAnimationFrame(updateColors);
+            };
+        }
+    };
+}
+
+if (typeof window !== 'undefined') {
+    window['artplayerPluginAmbilight'] = artplayerPluginAmbilight;
+}
diff --git a/packages/artplayer-plugin-ambilight/types/artplayer-plugin-ambilight.d.ts b/packages/artplayer-plugin-ambilight/types/artplayer-plugin-ambilight.d.ts
new file mode 100644
index 000000000..a2f629f92
--- /dev/null
+++ b/packages/artplayer-plugin-ambilight/types/artplayer-plugin-ambilight.d.ts
@@ -0,0 +1,20 @@
+import type Artplayer from 'artplayer';
+
+export = artplayerPluginAmbilight;
+export as namespace artplayerPluginAmbilight;
+
+type Option = {
+    blur: string;
+    opacity: number;
+    frequency: number;
+    zIndex: number;
+    duration: number;
+};
+
+type Result = {
+    name: 'artplayerPluginAmbilight';
+    start: () => void;
+    stop: () => void;
+};
+
+declare const artplayerPluginAmbilight: (option: Option) => (art: Artplayer) => Result;
diff --git a/packages/artplayer-vitepress/docs/.vitepress/config.js b/packages/artplayer-vitepress/docs/.vitepress/config.js
index 584e51d44..50669d2ae 100644
--- a/packages/artplayer-vitepress/docs/.vitepress/config.js
+++ b/packages/artplayer-vitepress/docs/.vitepress/config.js
@@ -77,6 +77,7 @@ const config = {
             { text: 'Chromecast', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chromecast/index.js&example=chromecast'},
             { text: 'Vast 广告', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vast/index.js&example=vast'},        
             { text: '视频章节', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chapter/index.js&example=chapter'},        
+            { text: '视频背光', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&example=ambilight'},        
           ]
         },
         {
@@ -144,6 +145,7 @@ const config = {
             { text: 'Chromecast', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chromecast/index.js&example=chromecast'},
             { text: 'Vast', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vast/index.js&example=vast'},
             { text: 'Video Chapters', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chapter/index.js&example=chapter'},
+            { text: 'Video Ambilight', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&example=ambilight'},        
           ]
         },
         {