add prettier

.eslintrc

@@ -14,9 +14,7 @@
         "ecmaVersion": "latest",
         "requireConfigFile": false,
         "babelOptions": {
-            "presets": [
+            "presets": ["@babel/preset-react"]
-                "@babel/preset-react"
-            ]
         }
     }
 }

.prettierignore

@@ -0,0 +1,14 @@
+node_modules
+.docusaurus
+.parcel-cache
+.github
+*.log
+*.lock
+test
+docs
+scripts
+packages/*/dist
+packages/*/node_modules
+packages/*/.parcel-cache
+packages/artplayer-template/*/.next
+packages/artplayer-template/*/.nuxt

CHANGELOG_CN.md

@@ -1,9 +1,11 @@
 # 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]
+
 -   添加 `art.type` 属性，用于获取和设置视频类型
 -   添加 `art.video` 属性，用于获取 `video` 元素
 -   添加 `artplayer-plugin-iframe` 插件，用于控制 `iframe` 里的播放器
@@ -16,12 +18,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 -   移除 `examples` 目录，不再提供 `vue.js` 和 `react.js` 的例子文件
 
 ## [4.5.8] - 2022-10-9
+
 -   添加 `farsi` 语言
 -   新增 `Artplayer.DEGUG` 用于打印 `debug` 信息，默认为 `false`
 -   新增 `art.setting.update()` 用于动态更新设置面板
 -   优化 `artplayer.d.ts`
 
 ## [4.5.7] - 2022-9-28
+
 -   新增 `Artplayer.VOLUME_STEP` 用于控制调整 `音量` 的步长，默认为 `0.1`
 -   新增 `Artplayer.SEEK_STEP` 用于控制调整 `快进/快退` 的步长，默认为 `5` 秒
 -   修复部分 `svg` 图标在移动端不显示的问题
@@ -49,9 +53,11 @@ var art = new Artplayer({
 ```
 
 ## [4.5.6] - 2022-9-19
+
 -   修复 `hls.js` 在 `Safari` 播放失效的问题
 
 ## [4.5.5] - 2022-9-19
+
 -   广告插件添加 `option.muted` 选项，用于静音自动播放广告
 -   弹幕库插件暴露 `art.plugins.artplayerPluginDanmuku.reset()` 方法，用于清空当前弹幕显示
 -   弹幕库插件暴露 `art.plugins.artplayerPluginDanmuku.option` 属性，用于获取当前弹幕配置
@@ -61,6 +67,7 @@ var art = new Artplayer({
 ## [4.5.4] - 2022-8-1
 
 ### Added
+
 -   新增 `Artplayer.AUTO_PLAYBACK_MIN` 用于控制最小可以记忆播放的进度值，默认为 `5` 秒
 -   新增 `Artplayer.TOUCH_MOVE_RATIO` 用于控制移动端进度条拖放比例，默认为 `0.5`
 -   `option.thumbnails` 添加可选的 `width` 和 `height`
@@ -69,6 +76,7 @@ var art = new Artplayer({
 ## [4.5.3] - 2022-7-13
 
 ### Added
+
 -   `url` 选项允许传空字符串，可用于异步设置 `art.url`
 
 ```js
@@ -97,7 +105,7 @@ art.on('ready', async () => {
     } catch (error) {
         console.log('播放失败', error.message);
     }
-})
+});
 ```
 
 -   新增 `airplay` (隔空播放) 功能，当前只在 Safari 下可用
@@ -113,41 +121,48 @@ const art = new Artplayer({
 ## [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弹幕
+-   优化正则解析 xml 弹幕
 
 ## [4.4.5] - 2022-6-2
 
 ### Added
-- 修复迷你模式时，主题色缺失的bug
+
+-   修复迷你模式时，主题色缺失的 bug
 
 ## [4.4.3] - 2022-05-26
 
 ### Added
+
 -   修复弹幕库销毁时，自定义挂载输入框的残留
 -   修复迷你模式的尺寸计算错误
 
 ## [4.4.2] - 2022-05-20
 
 ### Added
+
 -   移除播放器 UI 初始化的 video:loadedmetadata 事件
 -   弹幕库暴露 load 方法，用于切换弹幕源
 -   添加 error 图标，出现于视频加载错误达到上限后
@@ -156,6 +171,7 @@ const art = new Artplayer({
 ## [4.4.1] - 2022-05-17
 
 ### Added
+
 -   添加 art.isInput 属性，当为 true 的时候不自动隐藏控制栏，如弹幕正在输入时
 -   添加 art.isLock 属性，在移动端当为 true 的时候不能操作快进、开始和暂停
 -   修复弹幕输入框的固定宽度 bug
@@ -172,6 +188,7 @@ const art = new Artplayer({
 ## [4.4.0] - 2022-05-15
 
 ### Added
+
 -   设置面板支持 switch 和 onSwitch 选项
 -   弹幕库插件添加设置面板和弹幕发送
 -   弹幕库的选项添加默认模式和默认字号

README.md

@@ -31,9 +31,11 @@
 </p>
 
 ## Home Page
+
 [https://artplayer.org](https://artplayer.org)
 
 ## Mobile Demo
+
 <img src="./images/qrcode.png" width="250">
 
 ## Features

lerna.json

@@ -1,7 +1,5 @@
 {
     "lerna": "4.0.0",
     "version": "4.0.0",
-  "packages": [
+    "packages": ["packages/*"]
-    "packages/*"
-  ]
 }

package.json

@@ -13,6 +13,7 @@
         "dev": "npx cross-env NODE_ENV=development node ./scripts/dev.js",
         "build": "npx cross-env NODE_ENV=production node ./scripts/build.js",
         "test": "npx cross-env NODE_ENV=test mocha-chrome ./test/index.html --mocha '{\"ui\":\"bdd\"}'",
+        "prettier": "npx prettier --write .",
         "postinstall": "npm run bootstrap"
     },
     "repository": {
@@ -50,6 +51,7 @@
         "mocha": "^10.0.0",
         "mocha-chrome": "^2.2.0",
         "node-html-parser": "^6.1.1",
+        "pre-commit": "^1.2.2",
         "prettier": "^2.7.1",
         "prompts": "^2.4.2",
         "servor": "^4.0.2",
@@ -57,5 +59,8 @@
     },
     "engines": {
         "node": ">= 16.0.0"
-  }
+    },
+    "pre-commit": [
+        "prettier"
+    ]
 }

packages/artplayer-document/sidebars.js

@@ -1,4 +1,4 @@
 module.exports = {
-  en: [{ type: "autogenerated", dirName: "en" }],
+    en: [{ type: 'autogenerated', dirName: 'en' }],
-  "zh-cn": [{ type: "autogenerated", dirName: "zh-cn" }],
+    'zh-cn': [{ type: 'autogenerated', dirName: 'zh-cn' }],
 };

packages/artplayer-document/src/css/custom.css

@@ -24,7 +24,7 @@
     padding: 0 var(--ifm-pre-padding);
 }
 
-html[data-theme="dark"] .docusaurus-highlight-code-line {
+html[data-theme='dark'] .docusaurus-highlight-code-line {
     background-color: rgba(0, 0, 0, 0.3);
 }
 

packages/artplayer-document/src/theme/SearchBar/algolia.css

@@ -18,8 +18,7 @@
     color: #3a33d1;
 }
 /* Highligted search terms in the main category headers */
-.algolia-docsearch-suggestion--category-header
+.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
-  .algolia-docsearch-suggestion--highlight {
     background-color: #4d47d5;
 }
 /* Currently selected suggestion */
@@ -350,9 +349,7 @@
     background: inherit;
 }
 
-.algolia-autocomplete
+.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
-  .algolia-docsearch-suggestion--text
-  .algolia-docsearch-suggestion--highlight {
     padding: 0 0 1px;
     background: inherit;
     box-shadow: inset 0 -2px 0 0 rgba(69, 142, 225, 0.8);
@@ -426,14 +423,11 @@
 .algolia-autocomplete
     .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
     .algolia-docsearch-suggestion--category-header,
-.algolia-autocomplete
+.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary {
-  .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary {
     display: block;
 }
 
-.algolia-autocomplete
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight {
-  .algolia-docsearch-suggestion--subcategory-column
-  .algolia-docsearch-suggestion--highlight {
     background-color: inherit;
     color: inherit;
 }
@@ -466,9 +460,7 @@
     margin-top: -8px;
 }
 
-.algolia-autocomplete
+.algolia-autocomplete .algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--text {
-  .algolia-docsearch-suggestion--no-results
-  .algolia-docsearch-suggestion--text {
     color: #ffffff;
     margin-top: 4px;
 }
@@ -484,14 +476,10 @@
     color: #222222;
     background-color: #ebebeb;
     border-radius: 3px;
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-    monospace;
 }
 
-.algolia-autocomplete
+.algolia-autocomplete .algolia-docsearch-suggestion code .algolia-docsearch-suggestion--highlight {
-  .algolia-docsearch-suggestion
-  code
-  .algolia-docsearch-suggestion--highlight {
     background: none;
 }
 

packages/artplayer-document/src/theme/SearchBar/index.js

@@ -7,12 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useRef, useCallback } from "react";
+import React, { useRef, useCallback } from 'react';
-import classnames from "classnames";
+import classnames from 'classnames';
-import { useHistory } from "@docusaurus/router";
+import { useHistory } from '@docusaurus/router';
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { usePluginData } from '@docusaurus/useGlobalData';
-const Search = props => {
+const Search = (props) => {
     const initialized = useRef(false);
     const searchBarRef = useRef(null);
     const history = useHistory();
@@ -22,59 +22,56 @@ const Search = props => {
         new DocSearch({
             searchDocs,
             searchIndex,
-        inputSelector: "#search_input_react",
+            inputSelector: '#search_input_react',
             // Override algolia's default selection event, allowing us to do client-side
             // navigation and avoiding a full page refresh.
             handleSelected: (_input, _event, suggestion) => {
                 const url = baseUrl + suggestion.url;
                 // Use an anchor tag to parse the absolute url into a relative url
                 // Alternatively, we can use new URL(suggestion.url) but its not supported in IE
-          const a = document.createElement("a");
+                const a = document.createElement('a');
                 a.href = url;
                 // Algolia use closest parent element id #__docusaurus when a h1 page title does not have an id
                 // So, we can safely remove it. See https://github.com/facebook/docusaurus/issues/1828 for more details.
 
                 history.push(url);
-        }
+            },
         });
     };
 
     const pluginData = usePluginData('docusaurus-lunr-search');
     const getSearchDoc = () =>
-    process.env.NODE_ENV === "production"
+        process.env.NODE_ENV === 'production'
             ? fetch(`${baseUrl}${pluginData.fileNames.searchDoc}`).then((content) => content.json())
             : Promise.resolve([]);
 
     const getLunrIndex = () =>
-    process.env.NODE_ENV === "production"
+        process.env.NODE_ENV === 'production'
             ? fetch(`${baseUrl}${pluginData.fileNames.lunrIndex}`).then((content) => content.json())
             : Promise.resolve([]);
 
     const loadAlgolia = () => {
         if (!initialized.current) {
-      Promise.all([
+            Promise.all([getSearchDoc(), getLunrIndex(), import('./lib/DocSearch'), import('./algolia.css')]).then(
-        getSearchDoc(),
+                ([searchDocs, searchIndex, { default: DocSearch }]) => {
-        getLunrIndex(),
+                    if (searchDocs.length === 0) {
-        import("./lib/DocSearch"),
-        import("./algolia.css")
-      ]).then(([searchDocs, searchIndex, { default: DocSearch }]) => {
-        if( searchDocs.length === 0) {
                         return;
                     }
                     initAlgolia(searchDocs, searchIndex, DocSearch);
-      });
+                },
+            );
             initialized.current = true;
         }
     };
 
     const toggleSearchIconClick = useCallback(
-    e => {
+        (e) => {
             if (!searchBarRef.current.contains(e.target)) {
                 searchBarRef.current.focus();
             }
             props.handleSearchBarToggle && props.handleSearchBarToggle(!props.isSearchBarExpanded);
         },
-    [props.isSearchBarExpanded]
+        [props.isSearchBarExpanded],
     );
 
     return (
@@ -82,8 +79,8 @@ const Search = props => {
             <span
                 aria-label="expand searchbar"
                 role="button"
-        className={classnames("search-icon", {
+                className={classnames('search-icon', {
-          "search-icon-hidden": props.isSearchBarExpanded
+                    'search-icon-hidden': props.isSearchBarExpanded,
                 })}
                 onClick={toggleSearchIconClick}
                 onKeyDown={toggleSearchIconClick}
@@ -95,9 +92,9 @@ const Search = props => {
                 placeholder="Search"
                 aria-label="Search"
                 className={classnames(
-          "navbar__search-input",
+                    'navbar__search-input',
-          { "search-bar-expanded": props.isSearchBarExpanded },
+                    { 'search-bar-expanded': props.isSearchBarExpanded },
-          { "search-bar": !props.isSearchBarExpanded }
+                    { 'search-bar': !props.isSearchBarExpanded },
                 )}
                 onClick={loadAlgolia}
                 onMouseOver={loadAlgolia}

packages/artplayer-document/src/theme/SearchBar/lib/DocSearch.js

@@ -1,10 +1,10 @@
 /* eslint-disable */
-import Hogan from "hogan.js";
+import Hogan from 'hogan.js';
-import LunrSearchAdapter from "./lunar-search";
+import LunrSearchAdapter from './lunar-search';
-import autocomplete from "autocomplete.js";
+import autocomplete from 'autocomplete.js';
-import templates from "./templates";
+import templates from './templates';
-import utils from "./utils";
+import utils from './utils';
-import $ from "autocomplete.js/zepto";
+import $ from 'autocomplete.js/zepto';
 
 /**
  * Adds an autocomplete dropdown to an input field
@@ -26,35 +26,27 @@ class DocSearch {
         autocompleteOptions = {
             debug: false,
             hint: false,
-            autoselect: true
+            autoselect: true,
         },
         transformData = false,
         queryHook = false,
         handleSelected = false,
         enhancedSearchInput = false,
-        layout = "collumns"
+        layout = 'collumns',
     }) {
         this.input = DocSearch.getInputFromSelector(inputSelector);
         this.queryDataCallback = queryDataCallback || null;
         const autocompleteOptionsDebug =
-            autocompleteOptions && autocompleteOptions.debug
+            autocompleteOptions && autocompleteOptions.debug ? autocompleteOptions.debug : false;
-                ? autocompleteOptions.debug
-                : false;
         // eslint-disable-next-line no-param-reassign
         autocompleteOptions.debug = debug || autocompleteOptionsDebug;
         this.autocompleteOptions = autocompleteOptions;
-        this.autocompleteOptions.cssClasses =
+        this.autocompleteOptions.cssClasses = this.autocompleteOptions.cssClasses || {};
-            this.autocompleteOptions.cssClasses || {};
+        this.autocompleteOptions.cssClasses.prefix = this.autocompleteOptions.cssClasses.prefix || 'ds';
-        this.autocompleteOptions.cssClasses.prefix =
+        const inputAriaLabel = this.input && typeof this.input.attr === 'function' && this.input.attr('aria-label');
-            this.autocompleteOptions.cssClasses.prefix || "ds";
+        this.autocompleteOptions.ariaLabel = this.autocompleteOptions.ariaLabel || inputAriaLabel || 'search input';
-        const inputAriaLabel =
-            this.input &&
-            typeof this.input.attr === "function" &&
-            this.input.attr("aria-label");
-        this.autocompleteOptions.ariaLabel =
-            this.autocompleteOptions.ariaLabel || inputAriaLabel || "search input";
 
-        this.isSimpleLayout = layout === "simple";
+        this.isSimpleLayout = layout === 'simple';
 
         this.client = new LunrSearchAdapter(searchDocs, searchIndex);
 
@@ -67,9 +59,9 @@ class DocSearch {
                 templates: {
                     suggestion: DocSearch.getSuggestionTemplate(this.isSimpleLayout),
                     footer: templates.footer,
-                    empty: DocSearch.getEmptyTemplate()
+                    empty: DocSearch.getEmptyTemplate(),
-                }
+                },
-            }
+            },
         ]);
 
         const customHandleSelected = handleSelected;
@@ -77,20 +69,14 @@ class DocSearch {
 
         // We prevent default link clicking if a custom handleSelected is defined
         if (customHandleSelected) {
-            $(".algolia-autocomplete").on("click", ".ds-suggestions a", event => {
+            $('.algolia-autocomplete').on('click', '.ds-suggestions a', (event) => {
                 event.preventDefault();
             });
         }
 
-        this.autocomplete.on(
+        this.autocomplete.on('autocomplete:selected', this.handleSelected.bind(null, this.autocomplete.autocomplete));
-            "autocomplete:selected",
-            this.handleSelected.bind(null, this.autocomplete.autocomplete)
-        );
 
-        this.autocomplete.on(
+        this.autocomplete.on('autocomplete:shown', this.handleShown.bind(null, this.input));
-            "autocomplete:shown",
-            this.handleShown.bind(null, this.input)
-        );
 
         if (enhancedSearchInput) {
             DocSearch.bindSearchBoxEvent();
@@ -99,27 +85,24 @@ class DocSearch {
 
     static injectSearchBox(input) {
         input.before(templates.searchBox);
-        const newInput = input
+        const newInput = input.prev().prev().find('input');
-            .prev()
-            .prev()
-            .find("input");
         input.remove();
         return newInput;
     }
 
     static bindSearchBoxEvent() {
-        $('.searchbox [type="reset"]').on("click", function () {
+        $('.searchbox [type="reset"]').on('click', function () {
-            $("input#docsearch").focus();
+            $('input#docsearch').focus();
-            $(this).addClass("hide");
+            $(this).addClass('hide');
-            autocomplete.autocomplete.setVal("");
+            autocomplete.autocomplete.setVal('');
         });
 
-        $("input#docsearch").on("keyup", () => {
+        $('input#docsearch').on('keyup', () => {
-            const searchbox = document.querySelector("input#docsearch");
+            const searchbox = document.querySelector('input#docsearch');
             const reset = document.querySelector('.searchbox [type="reset"]');
-            reset.className = "searchbox__reset";
+            reset.className = 'searchbox__reset';
             if (searchbox.value.length === 0) {
-                reset.className += " hide";
+                reset.className += ' hide';
             }
         });
     }
@@ -132,7 +115,7 @@ class DocSearch {
      * @returns {void}
      */
     static getInputFromSelector(selector) {
-        const input = $(selector).filter("input");
+        const input = $(selector).filter('input');
         return input.length ? $(input[0]) : null;
     }
 
@@ -151,11 +134,8 @@ class DocSearch {
                 // eslint-disable-next-line no-param-reassign
                 query = queryHook(query) || query;
             }
-            this.client.search(query).then(hits => {
+            this.client.search(query).then((hits) => {
-                if (
+                if (this.queryDataCallback && typeof this.queryDataCallback == 'function') {
-                    this.queryDataCallback &&
-                    typeof this.queryDataCallback == "function"
-                ) {
                     this.queryDataCallback(hits);
                 }
                 if (transformData) {
@@ -170,56 +150,43 @@ class DocSearch {
     // a Hogan template
     static formatHits(receivedHits) {
         const clonedHits = utils.deepClone(receivedHits);
-        const hits = clonedHits.map(hit => {
+        const hits = clonedHits.map((hit) => {
             if (hit._highlightResult) {
                 // eslint-disable-next-line no-param-reassign
-                hit._highlightResult = utils.mergeKeyWithParent(
+                hit._highlightResult = utils.mergeKeyWithParent(hit._highlightResult, 'hierarchy');
-                    hit._highlightResult,
-                    "hierarchy"
-                );
             }
-            return utils.mergeKeyWithParent(hit, "hierarchy");
+            return utils.mergeKeyWithParent(hit, 'hierarchy');
         });
 
         // Group hits by category / subcategory
-        let groupedHits = utils.groupBy(hits, "lvl0");
+        let groupedHits = utils.groupBy(hits, 'lvl0');
         $.each(groupedHits, (level, collection) => {
-            const groupedHitsByLvl1 = utils.groupBy(collection, "lvl1");
+            const groupedHitsByLvl1 = utils.groupBy(collection, 'lvl1');
-            const flattenedHits = utils.flattenAndFlagFirst(
+            const flattenedHits = utils.flattenAndFlagFirst(groupedHitsByLvl1, 'isSubCategoryHeader');
-                groupedHitsByLvl1,
-                "isSubCategoryHeader"
-            );
             groupedHits[level] = flattenedHits;
         });
-        groupedHits = utils.flattenAndFlagFirst(groupedHits, "isCategoryHeader");
+        groupedHits = utils.flattenAndFlagFirst(groupedHits, 'isCategoryHeader');
 
         // Translate hits into smaller objects to be send to the template
-        return groupedHits.map(hit => {
+        return groupedHits.map((hit) => {
             const url = DocSearch.formatURL(hit);
-            const category = utils.getHighlightedValue(hit, "lvl0");
+            const category = utils.getHighlightedValue(hit, 'lvl0');
-            const subcategory = utils.getHighlightedValue(hit, "lvl1") || category;
+            const subcategory = utils.getHighlightedValue(hit, 'lvl1') || category;
             const displayTitle = utils
                 .compact([
-                    utils.getHighlightedValue(hit, "lvl2") || subcategory,
+                    utils.getHighlightedValue(hit, 'lvl2') || subcategory,
-                    utils.getHighlightedValue(hit, "lvl3"),
+                    utils.getHighlightedValue(hit, 'lvl3'),
-                    utils.getHighlightedValue(hit, "lvl4"),
+                    utils.getHighlightedValue(hit, 'lvl4'),
-                    utils.getHighlightedValue(hit, "lvl5"),
+                    utils.getHighlightedValue(hit, 'lvl5'),
-                    utils.getHighlightedValue(hit, "lvl6")
+                    utils.getHighlightedValue(hit, 'lvl6'),
                 ])
-                .join(
+                .join('<span class="aa-suggestion-title-separator" aria-hidden="true"> › </span>');
-                    '<span class="aa-suggestion-title-separator" aria-hidden="true"> › </span>'
+            const text = utils.getSnippetedValue(hit, 'content');
-                );
-            const text = utils.getSnippetedValue(hit, "content");
             const isTextOrSubcategoryNonEmpty =
-                (subcategory && subcategory !== "") ||
+                (subcategory && subcategory !== '') || (displayTitle && displayTitle !== '');
-                (displayTitle && displayTitle !== "");
+            const isLvl1EmptyOrDuplicate = !subcategory || subcategory === '' || subcategory === category;
-            const isLvl1EmptyOrDuplicate =
+            const isLvl2 = displayTitle && displayTitle !== '' && displayTitle !== subcategory;
-                !subcategory || subcategory === "" || subcategory === category;
+            const isLvl1 = !isLvl2 && subcategory && subcategory !== '' && subcategory !== category;
-            const isLvl2 =
-                displayTitle && displayTitle !== "" && displayTitle !== subcategory;
-            const isLvl1 =
-                !isLvl2 &&
-                (subcategory && subcategory !== "" && subcategory !== category);
             const isLvl0 = !isLvl1 && !isLvl2;
 
             return {
@@ -234,7 +201,7 @@ class DocSearch {
                 subcategory,
                 title: displayTitle,
                 text,
-                url
+                url,
             };
         });
     }
@@ -242,38 +209,36 @@ class DocSearch {
     static formatURL(hit) {
         const { url, anchor } = hit;
         if (url) {
-            const containsAnchor = url.indexOf("#") !== -1;
+            const containsAnchor = url.indexOf('#') !== -1;
             if (containsAnchor) return url;
             else if (anchor) return `${hit.url}#${hit.anchor}`;
             return url;
         } else if (anchor) return `#${hit.anchor}`;
         /* eslint-disable */
-        console.warn("no anchor nor url for : ", JSON.stringify(hit));
+        console.warn('no anchor nor url for : ', JSON.stringify(hit));
         /* eslint-enable */
         return null;
     }
 
     static getEmptyTemplate() {
-        return args => Hogan.compile(templates.empty).render(args);
+        return (args) => Hogan.compile(templates.empty).render(args);
     }
 
     static getSuggestionTemplate(isSimpleLayout) {
-        const stringTemplate = isSimpleLayout
+        const stringTemplate = isSimpleLayout ? templates.suggestionSimple : templates.suggestion;
-            ? templates.suggestionSimple
-            : templates.suggestion;
         const template = Hogan.compile(stringTemplate);
-        return suggestion => template.render(suggestion);
+        return (suggestion) => template.render(suggestion);
     }
 
     handleSelected(input, event, suggestion, datasetNumber, context = {}) {
         // Do nothing if click on the suggestion, as it's already a <a href>, the
         // browser will take care of it. This allow Ctrl-Clicking on results and not
         // having the main window being redirected as well
-        if (context.selectionMethod === "click") {
+        if (context.selectionMethod === 'click') {
             return;
         }
 
-        input.setVal("");
+        input.setVal('');
         window.location.assign(suggestion.url);
     }
 
@@ -286,14 +251,10 @@ class DocSearch {
         }
 
         const alignClass =
-            middleOfInput - middleOfWindow >= 0
+            middleOfInput - middleOfWindow >= 0 ? 'algolia-autocomplete-right' : 'algolia-autocomplete-left';
-                ? "algolia-autocomplete-right"
-                : "algolia-autocomplete-left";
         const otherAlignClass =
-            middleOfInput - middleOfWindow < 0
+            middleOfInput - middleOfWindow < 0 ? 'algolia-autocomplete-right' : 'algolia-autocomplete-left';
-                ? "algolia-autocomplete-right"
+        const autocompleteWrapper = $('.algolia-autocomplete');
-                : "algolia-autocomplete-left";
-        const autocompleteWrapper = $(".algolia-autocomplete");
         if (!autocompleteWrapper.hasClass(alignClass)) {
             autocompleteWrapper.addClass(alignClass);
         }

packages/artplayer-document/src/theme/SearchBar/lib/lunar-search.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import lunr from "@generated/lunr.client";
+import lunr from '@generated/lunr.client';
 lunr.tokenizer.separator = /[\s\-/]+/;
 
 class LunrSearchAdapter {
@@ -12,10 +12,10 @@ class LunrSearchAdapter {
         return this.lunrIndex.query(function (query) {
             const tokens = lunr.tokenizer(input);
             query.term(tokens, {
-                boost: 10
+                boost: 10,
             });
             query.term(tokens, {
-                wildcard: lunr.Query.wildcard.TRAILING
+                wildcard: lunr.Query.wildcard.TRAILING,
             });
         });
     }
@@ -24,15 +24,17 @@ class LunrSearchAdapter {
         return {
             hierarchy: {
                 lvl0: doc.pageTitle || doc.title,
-                lvl1: doc.type === 0 ? null : doc.title
+                lvl1: doc.type === 0 ? null : doc.title,
             },
             url: doc.url,
-            _snippetResult: formattedContent ? {
+            _snippetResult: formattedContent
+                ? {
                       content: {
                           value: formattedContent,
-                    matchLevel: "full"
+                          matchLevel: 'full',
+                      },
                   }
-            } : null,
+                : null,
             _highlightResult: {
                 hierarchy: {
                     lvl0: {
@@ -42,24 +44,37 @@ class LunrSearchAdapter {
                         doc.type === 0
                             ? null
                             : {
-                                value: formattedTitle || doc.title
+                                  value: formattedTitle || doc.title,
-                            }
+                              },
-                }
+                },
-            }
+            },
         };
     }
     getTitleHit(doc, position, length) {
         const start = position[0];
         const end = position[0] + length;
-        let formattedTitle = doc.title.substring(0, start) + '<span class="algolia-docsearch-suggestion--highlight">' + doc.title.substring(start, end) + '</span>' + doc.title.substring(end, doc.title.length);
+        let formattedTitle =
-        return this.getHit(doc, formattedTitle)
+            doc.title.substring(0, start) +
+            '<span class="algolia-docsearch-suggestion--highlight">' +
+            doc.title.substring(start, end) +
+            '</span>' +
+            doc.title.substring(end, doc.title.length);
+        return this.getHit(doc, formattedTitle);
     }
 
     getKeywordHit(doc, position, length) {
         const start = position[0];
         const end = position[0] + length;
-        let formattedTitle = doc.title + '<br /><i>Keywords: ' + doc.keywords.substring(0, start) + '<span class="algolia-docsearch-suggestion--highlight">' + doc.keywords.substring(start, end) + '</span>' + doc.keywords.substring(end, doc.keywords.length) + '</i>'
+        let formattedTitle =
-        return this.getHit(doc, formattedTitle)
+            doc.title +
+            '<br /><i>Keywords: ' +
+            doc.keywords.substring(0, start) +
+            '<span class="algolia-docsearch-suggestion--highlight">' +
+            doc.keywords.substring(start, end) +
+            '</span>' +
+            doc.keywords.substring(end, doc.keywords.length) +
+            '</i>';
+        return this.getHit(doc, formattedTitle);
     }
 
     getContentHit(doc, position) {
@@ -72,7 +87,7 @@ class LunrSearchAdapter {
         for (let k = 0; k < 3; k++) {
             const nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
             const nextDot = doc.content.lastIndexOf('.', previewStart - 2);
-            if ((nextDot > 0) && (nextDot > nextSpace)) {
+            if (nextDot > 0 && nextDot > nextSpace) {
                 previewStart = nextDot + 1;
                 ellipsesBefore = false;
                 break;
@@ -87,7 +102,7 @@ class LunrSearchAdapter {
         for (let k = 0; k < 10; k++) {
             const nextSpace = doc.content.indexOf(' ', previewEnd + 1);
             const nextDot = doc.content.indexOf('.', previewEnd + 1);
-            if ((nextDot > 0) && (nextDot < nextSpace)) {
+            if (nextDot > 0 && nextDot < nextSpace) {
                 previewEnd = nextDot;
                 ellipsesAfter = false;
                 break;
@@ -103,36 +118,36 @@ class LunrSearchAdapter {
         if (ellipsesBefore) {
             preview = '... ' + preview;
         }
-        preview += '<span class="algolia-docsearch-suggestion--highlight">' + doc.content.substring(start, end) + '</span>';
+        preview +=
+            '<span class="algolia-docsearch-suggestion--highlight">' + doc.content.substring(start, end) + '</span>';
         preview += doc.content.substring(end, previewEnd);
         if (ellipsesAfter) {
             preview += ' ...';
         }
         return this.getHit(doc, null, preview);
-
     }
     search(input) {
         return new Promise((resolve, rej) => {
             const results = this.getLunrResult(input);
             const hits = [];
             results.length > 5 && (results.length = 5);
-            this.titleHitsRes = []
+            this.titleHitsRes = [];
-            this.contentHitsRes = []
+            this.contentHitsRes = [];
-            results.forEach(result => {
+            results.forEach((result) => {
                 const doc = this.searchDocs[result.ref];
                 const { metadata } = result.matchData;
                 for (let i in metadata) {
                     if (metadata[i].title) {
                         if (!this.titleHitsRes.includes(result.ref)) {
-                            const position = metadata[i].title.position[0]
+                            const position = metadata[i].title.position[0];
                             hits.push(this.getTitleHit(doc, position, input.length));
                             this.titleHitsRes.push(result.ref);
                         }
                     } else if (metadata[i].content) {
-                        const position = metadata[i].content.position[0]
+                        const position = metadata[i].content.position[0];
-                        hits.push(this.getContentHit(doc, position))
+                        hits.push(this.getContentHit(doc, position));
                     } else if (metadata[i].keywords) {
-                        const position = metadata[i].keywords.position[0]
+                        const position = metadata[i].keywords.position[0];
                         hits.push(this.getKeywordHit(doc, position, input.length));
                         this.titleHitsRes.push(result.ref);
                     }

packages/artplayer-document/src/theme/SearchBar/lib/utils.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import $ from "autocomplete.js/zepto";
+import $ from 'autocomplete.js/zepto';
 
 const utils = {
     /*
@@ -98,7 +98,7 @@ const utils = {
      * @return {array}
      */
     values(object) {
-    return Object.keys(object).map(key => object[key]);
+        return Object.keys(object).map((key) => object[key]);
     },
     /*
      * Flattens an array
@@ -111,12 +111,12 @@ const utils = {
      */
     flatten(array) {
         const results = [];
-    array.forEach(value => {
+        array.forEach((value) => {
             if (!Array.isArray(value)) {
                 results.push(value);
                 return;
             }
-      value.forEach(subvalue => {
+            value.forEach((subvalue) => {
                 results.push(subvalue);
             });
         });
@@ -152,12 +152,12 @@ const utils = {
      * @return {array}
      */
     flattenAndFlagFirst(object, flag) {
-    const values = this.values(object).map(collection =>
+        const values = this.values(object).map((collection) =>
             collection.map((item, index) => {
                 // eslint-disable-next-line no-param-reassign
                 item[flag] = index === 0;
                 return item;
-      })
+            }),
         );
         return this.flatten(values);
     },
@@ -172,7 +172,7 @@ const utils = {
      */
     compact(array) {
         const results = [];
-    array.forEach(value => {
+        array.forEach((value) => {
             if (!value) {
                 return;
             }
@@ -240,11 +240,7 @@ const utils = {
      * @return {string}
      **/
     getSnippetedValue(object, property) {
-    if (
+        if (!object._snippetResult || !object._snippetResult[property] || !object._snippetResult[property].value) {
-      !object._snippetResult ||
-      !object._snippetResult[property] ||
-      !object._snippetResult[property].value
-    ) {
             return object[property];
         }
         let snippet = object._snippetResult[property].value;

packages/artplayer-plugin-danmuku/src/style.less

@@ -14,7 +14,9 @@
     touch-action: manipulation;
     -ms-high-contrast-adjust: none;
 
-    *, *::before, *::after {
+    *,
+    *::before,
+    *::after {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
@@ -106,7 +108,7 @@
                             height: 20px;
                             border: 1px solid #fff;
 
-                            &.art-current{
+                            &.art-current {
                                 position: relative;
                                 box-shadow: 0 0 2px #fff;
                                 &::before {
@@ -122,12 +124,11 @@
                                 }
                             }
                         }
-        
                     }
                 }
             }
 
-            &:hover .art-danmuku-style-panel{
+            &:hover .art-danmuku-style-panel {
                 display: flex;
             }
 
@@ -151,7 +152,8 @@
             color: #ffffff;
             background-color: transparent;
 
-            &::placeholder, &::-webkit-input-placeholder {
+            &::placeholder,
+            &::-webkit-input-placeholder {
                 color: rgb(255 255 255 / 50%);
             }
         }
@@ -204,7 +206,8 @@
                 .art-danmuku-input {
                     color: #000000;
 
-                    &::placeholder, &::-webkit-input-placeholder {
+                    &::placeholder,
+                    &::-webkit-input-placeholder {
                         color: rgb(0 0 0 / 50%);
                     }
                 }

packages/artplayer-template/next.js/next.config.js

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

packages/artplayer-template/next.js/pages/_app.js

@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import '../styles/globals.css';
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+    return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;

packages/artplayer-template/next.js/pages/api/hello.js

@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+    res.status(200).json({ name: 'John Doe' });
 }

packages/artplayer-template/next.js/styles/Home.module.css

@@ -61,8 +61,8 @@
     border-radius: 5px;
     padding: 0.75rem;
     font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New,
-    Bitstream Vera Sans Mono, Courier New, monospace;
+        monospace;
 }
 
 .grid {

packages/artplayer-template/next.js/styles/globals.css

@@ -2,8 +2,8 @@ html,
 body {
     padding: 0;
     margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+        Helvetica Neue, sans-serif;
 }
 
 a {

packages/artplayer-template/nuxt.js/nuxt.config.ts

@@ -1,6 +1,4 @@
-import { defineNuxtConfig } from 'nuxt'
+import { defineNuxtConfig } from 'nuxt';
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
-export default defineNuxtConfig({
+export default defineNuxtConfig({});
-
-})

packages/artplayer-template/react.js/public/index.html

@@ -5,10 +5,7 @@
         <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#000000" />
-    <meta
+        <meta name="description" content="Web site created using create-react-app" />
-      name="description"
-      content="Web site created using create-react-app"
-    />
         <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
         <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -38,6 +35,5 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    --></body>
-  </body>
 </html>

packages/artplayer-template/react.js/src/App.js

@@ -1,18 +1,18 @@
-import React from "react";
+import React from 'react';
-import Artplayer from "./ArtPlayer";
+import Artplayer from './ArtPlayer';
 
 function App() {
     return (
         <div>
             <Artplayer
                 option={{
-          url: "https://artplayer.org/assets/sample/video.mp4",
+                    url: 'https://artplayer.org/assets/sample/video.mp4',
                     autoSize: true,
                 }}
                 style={{
-          width: "600px",
+                    width: '600px',
-          height: "400px",
+                    height: '400px',
-          margin: "60px auto 0",
+                    margin: '60px auto 0',
                 }}
                 getInstance={(art) => console.log(art)}
             />

packages/artplayer-template/react.js/src/index.css

@@ -1,13 +1,11 @@
 body {
     margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        'Droid Sans', 'Helvetica Neue', sans-serif;
-    sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-    monospace;
 }

packages/artplayer-template/react.js/src/index.js

@@ -8,7 +8,7 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
     <React.StrictMode>
         <App />
-  </React.StrictMode>
+    </React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function

packages/artplayer-template/react.js/src/reportWebVitals.js

@@ -1,4 +1,4 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
     if (onPerfEntry && onPerfEntry instanceof Function) {
         import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
             getCLS(onPerfEntry);

packages/artplayer-template/vue2.js/README.md

@@ -1,24 +1,29 @@
 # hello-world
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).

packages/artplayer-template/vue2.js/babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
+    presets: ['@vue/cli-plugin-babel/preset'],
-    '@vue/cli-plugin-babel/preset'
+};
-  ]
-}

packages/artplayer-template/vue2.js/jsconfig.json

@@ -5,15 +5,8 @@
         "baseUrl": "./",
         "moduleResolution": "node",
         "paths": {
-      "@/*": [
+            "@/*": ["src/*"]
-        "src/*"
-      ]
         },
-    "lib": [
+        "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
     }
 }

packages/artplayer-template/vue2.js/public/index.html

@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html lang="">
     <head>
-    <meta charset="utf-8">
+        <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
         <title><%= htmlWebpackPlugin.options.title %></title>
     </head>
     <body>
         <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+            <strong
+                >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
+                enabled. Please enable it to continue.</strong
+            >
         </noscript>
         <div id="app"></div>
         <!-- built files will be auto injected -->

packages/artplayer-template/vue2.js/src/components/HelloWorld.vue

@@ -2,14 +2,28 @@
     <div class="hello">
         <h1>{{ msg }}</h1>
         <p>
-      For a guide and recipes on how to configure / customize this project,<br>
+            For a guide and recipes on how to configure / customize this project,<br />
             check out the
             <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
         </p>
         <h3>Installed CLI Plugins</h3>
         <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+            <li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+                <a
+                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+                    target="_blank"
+                    rel="noopener"
+                    >babel</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+                    target="_blank"
+                    rel="noopener"
+                    >eslint</a
+                >
+            </li>
         </ul>
         <h3>Essential Links</h3>
         <ul>
@@ -23,7 +37,11 @@
         <ul>
             <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
             <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+            <li>
+                <a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener"
+                    >vue-devtools</a
+                >
+            </li>
             <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
             <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
         </ul>
@@ -34,9 +52,9 @@
 export default {
     name: 'HelloWorld',
     props: {
-    msg: String
+        msg: String,
-  }
+    },
-}
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

packages/artplayer-template/vue2.js/src/main.js

@@ -1,8 +1,8 @@
-import Vue from 'vue'
+import Vue from 'vue';
-import App from './App.vue'
+import App from './App.vue';
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
-  render: h => h(App),
+    render: (h) => h(App),
-}).$mount('#app')
+}).$mount('#app');

packages/artplayer-template/vue3.js/src/assets/base.css

@@ -65,8 +65,8 @@ body {
     background: var(--color-background);
     transition: color 0.5s, background-color 0.5s;
     line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+        'Droid Sans', 'Helvetica Neue', sans-serif;
     font-size: 15px;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;

packages/artplayer-template/vue3.js/src/components/HelloWorld.vue

@@ -2,9 +2,9 @@
 defineProps({
     msg: {
         type: String,
-    required: true
+        required: true,
-  }
+    },
-})
+});
 </script>
 
 <template>

packages/artplayer-template/vue3.js/src/components/TheWelcome.vue

@@ -1,10 +1,10 @@
 <script setup>
-import WelcomeItem from './WelcomeItem.vue'
+import WelcomeItem from './WelcomeItem.vue';
-import DocumentationIcon from './icons/IconDocumentation.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue';
-import ToolingIcon from './icons/IconTooling.vue'
+import ToolingIcon from './icons/IconTooling.vue';
-import EcosystemIcon from './icons/IconEcosystem.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue';
-import CommunityIcon from './icons/IconCommunity.vue'
+import CommunityIcon from './icons/IconCommunity.vue';
-import SupportIcon from './icons/IconSupport.vue'
+import SupportIcon from './icons/IconSupport.vue';
 </script>
 
 <template>
@@ -26,11 +26,10 @@ import SupportIcon from './icons/IconSupport.vue'
         <template #heading>Tooling</template>
 
         This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
+        <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE setup is
-    setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
+        <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
+        <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test your components
-    your components and web pages, check out
+        and web pages, check out <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
-    <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
         <a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
             >Cypress Component Testing</a
         >.
@@ -50,8 +49,8 @@ import SupportIcon from './icons/IconSupport.vue'
         <a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>,
         <a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
         <a target="_blank" href="https://test-utils.vuejs.org/">Vue Test Utils</a>, and
-    <a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more
+        <a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more resources, we
-    resources, we suggest paying
+        suggest paying
         <a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
         a visit.
     </WelcomeItem>
@@ -64,9 +63,8 @@ import SupportIcon from './icons/IconSupport.vue'
 
         Got stuck? Ask your question on
         <a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
-    <a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
+        <a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>. You should also
-    You should also subscribe to
+        subscribe to <a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
-    <a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
         <a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
         twitter account for latest news in the Vue world.
     </WelcomeItem>
@@ -77,8 +75,7 @@ import SupportIcon from './icons/IconSupport.vue'
         </template>
         <template #heading>Support Vue</template>
 
-    As an independent project, Vue relies on community backing for its sustainability. You can help
+        As an independent project, Vue relies on community backing for its sustainability. You can help us by
-    us by
         <a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>.
     </WelcomeItem>
 </template>

packages/artplayer-template/vue3.js/src/main.js

@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp } from 'vue';
-import App from './App.vue'
+import App from './App.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');

packages/artplayer-template/vue3.js/vite.config.js

@@ -1,14 +1,14 @@
-import { fileURLToPath, URL } from 'url'
+import { fileURLToPath, URL } from 'url';
 
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue'
+import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [vue()],
     resolve: {
         alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
-    }
+        },
-  }
+    },
-})
+});

packages/artplayer-tool-thumbnail/src/utils.js

@@ -1,5 +1,5 @@
 export function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
+    return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
 export function runPromisesInSeries(ps) {

packages/artplayer/README.md

@@ -3,6 +3,7 @@
 🎨 ArtPlayer.js is a modern and full featured HTML5 video player
 
 ## Github
+
 [https://github.com/zhw2590582/ArtPlayer](https://github.com/zhw2590582/ArtPlayer)
 
 ## Home Page

packages/artplayer/src/config/index.js

@@ -30,13 +30,7 @@ export default {
         'videoTracks',
         'volume',
     ],
-    methods: [
+    methods: ['addTextTrack', 'canPlayType', 'load', 'play', 'pause'],
-        'addTextTrack',
-        'canPlayType',
-        'load',
-        'play',
-        'pause'
-    ],
     events: [
         'abort',
         'canplay',
@@ -62,26 +56,26 @@ export default {
         'waiting',
     ],
     prototypes: [
-        "width",
+        'width',
-        "height",
+        'height',
-        "videoWidth",
+        'videoWidth',
-        "videoHeight",
+        'videoHeight',
-        "poster",
+        'poster',
-        "webkitDecodedFrameCount",
+        'webkitDecodedFrameCount',
-        "webkitDroppedFrameCount",
+        'webkitDroppedFrameCount',
-        "playsInline",
+        'playsInline',
-        "webkitSupportsFullscreen",
+        'webkitSupportsFullscreen',
-        "webkitDisplayingFullscreen",
+        'webkitDisplayingFullscreen',
-        "onenterpictureinpicture",
+        'onenterpictureinpicture',
-        "onleavepictureinpicture",
+        'onleavepictureinpicture',
-        "disablePictureInPicture",
+        'disablePictureInPicture',
-        "cancelVideoFrameCallback",
+        'cancelVideoFrameCallback',
-        "requestVideoFrameCallback",
+        'requestVideoFrameCallback',
-        "getVideoPlaybackQuality",
+        'getVideoPlaybackQuality',
-        "requestPictureInPicture",
+        'requestPictureInPicture',
-        "webkitEnterFullScreen",
+        'webkitEnterFullScreen',
-        "webkitEnterFullscreen",
+        'webkitEnterFullscreen',
-        "webkitExitFullScreen",
+        'webkitExitFullScreen',
-        "webkitExitFullscreen",
+        'webkitExitFullscreen',
     ],
 };

packages/artplayer/src/contextmenu/close.js

@@ -1,8 +1,8 @@
 export default function close(option) {
-    return art => ({
+    return (art) => ({
         ...option,
         html: art.i18n.get('Close'),
-        click: contextmenu => {
+        click: (contextmenu) => {
             contextmenu.show = false;
         },
     });

packages/artplayer/src/contextmenu/info.js

@@ -1,8 +1,8 @@
 export default function info(option) {
-    return art => ({
+    return (art) => ({
         ...option,
         html: art.i18n.get('Video Info'),
-        click: contextmenu => {
+        click: (contextmenu) => {
             art.info.show = true;
             contextmenu.show = false;
         },

packages/artplayer/src/style/artplayer.less

@@ -19,7 +19,9 @@
     touch-action: manipulation;
     -ms-high-contrast-adjust: none;
 
-    *, *::before, *::after {
+    *,
+    *::before,
+    *::after {
         margin: 0;
         padding: 0;
         box-sizing: border-box;

packages/artplayer/src/style/flip.less

@@ -1,9 +1,9 @@
 .art-video-player {
-    &[data-flip="horizontal"] .art-video{
+    &[data-flip='horizontal'] .art-video {
         transform: scaleX(-1);
     }
 
-    &[data-flip="vertical"] .art-video{
+    &[data-flip='vertical'] .art-video {
         transform: scaleY(-1);
     }
 }

packages/artplayer/src/utils/component.js

@@ -1,4 +1,14 @@
-import { hasClass, addClass, removeClass, append, setStyles, tooltip, getStyle, inverseClass, createElement } from './dom';
+import {
+    hasClass,
+    addClass,
+    removeClass,
+    append,
+    setStyles,
+    tooltip,
+    getStyle,
+    inverseClass,
+    createElement,
+} from './dom';
 import validator from 'option-validator';
 import { ComponentOption } from '../scheme';
 import { has, def } from './property';

packages/artplayer/src/utils/time.js

@@ -1,5 +1,5 @@
 export function sleep(ms = 0) {
-    return new Promise(resolve => setTimeout(resolve, ms));
+    return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
 export function debounce(func, wait, context) {

packages/artplayer/tsconfig.json

@@ -1,12 +1,7 @@
 {
-    "include": [
+    "include": ["types/*"],
-        "types/*"
-    ],
     "compilerOptions": {
-        "lib": [
+        "lib": ["es2018", "dom"],
-            "es2018",
-            "dom"
-        ],
         "strict": true
     }
 }