x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-08 10:56:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

add prettier

Browse Source
This commit is contained in:
Harvey Zack committed 2022-11-04 20:55:17 +08:00
1 parent 4092b51c4e
commit 1593a4a528
95 files changed
+25431 -25282
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.eslintrc
+2 -4
View File
@@ -14,9 +14,7 @@
"ecmaVersion": "latest",
"requireConfigFile": false,
"babelOptions": {
"presets": [
"@babel/preset-react"
]
"presets": ["@babel/preset-react"]
}
}
}
}
.prettierignore
+14
View File
@@ -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
.prettierrc
+1 -1
View File
@@ -4,4 +4,4 @@
"singleQuote": true,
"trailingComma": "all",
"printWidth": 120
}
}
CHANGELOG_CN.md
+86 -69
View File
@@ -1,34 +1,38 @@
# 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` 里的播放器
- 添加 `artplayer-plugin-hls-quality` 插件，用于添加 `Hls` 画质列表到播放器
- 新增 `Artplayer.PLAYBACK_RATE` 用于设置默认播放速度，默认 `[0.5, 0.75, 1, 1.25, 1.5, 2]`
- 新增 `Artplayer.ASPECT_RATIO` 用于设置默认长宽比，默认 `['default', '4:3', '16:9']`
- 新增 `Artplayer.FLIP` 用于设置默认翻转功能，默认 `['normal', 'horizontal', 'vertical']`
- 新增 `Artplayer.PROGRESS_HEIGHT` 用于设置进度条高度，默认为 `4`
- 添加 `legacy.js` 版本，用于兼容更老的浏览器，但相对体积较大
- 移除 `examples` 目录，不再提供 `vue.js` 和 `react.js` 的例子文件
- 添加 `art.type` 属性，用于获取和设置视频类型
- 添加 `art.video` 属性，用于获取 `video` 元素
- 添加 `artplayer-plugin-iframe` 插件，用于控制 `iframe` 里的播放器
- 添加 `artplayer-plugin-hls-quality` 插件，用于添加 `Hls` 画质列表到播放器
- 新增 `Artplayer.PLAYBACK_RATE` 用于设置默认播放速度，默认 `[0.5, 0.75, 1, 1.25, 1.5, 2]`
- 新增 `Artplayer.ASPECT_RATIO` 用于设置默认长宽比，默认 `['default', '4:3', '16:9']`
- 新增 `Artplayer.FLIP` 用于设置默认翻转功能，默认 `['normal', 'horizontal', 'vertical']`
- 新增 `Artplayer.PROGRESS_HEIGHT` 用于设置进度条高度，默认为 `4`
- 添加 `legacy.js` 版本，用于兼容更老的浏览器，但相对体积较大
- 移除 `examples` 目录，不再提供 `vue.js` 和 `react.js` 的例子文件
## [4.5.8] - 2022-10-9
- 添加 `farsi` 语言
- 新增 `Artplayer.DEGUG` 用于打印 `debug` 信息，默认为 `false`
- 新增 `art.setting.update()` 用于动态更新设置面板
- 优化 `artplayer.d.ts`
- 添加 `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` 图标在移动端不显示的问题
- 修复在桌面端进度条不能同时点击和拖动的问题
- 修复在移动端进度条不能点击和拖动的问题
- 新增 `art.isRotate` 属性，用于识别是否自动全屏旋转
- 设置面板 `range` 添加 `onChange` 选项，可以实时获取当前值
- 新增 `Artplayer.VOLUME_STEP` 用于控制调整 `音量` 的步长，默认为 `0.1`
- 新增 `Artplayer.SEEK_STEP` 用于控制调整 `快进/快退` 的步长，默认为 `5` 秒
- 修复部分 `svg` 图标在移动端不显示的问题
- 修复在桌面端进度条不能同时点击和拖动的问题
- 修复在移动端进度条不能点击和拖动的问题
- 新增 `art.isRotate` 属性，用于识别是否自动全屏旋转
- 设置面板 `range` 添加 `onChange` 选项，可以实时获取当前值
```js
var art = new Artplayer({
@@ -49,27 +53,31 @@ var art = new Artplayer({
```
## [4.5.6] - 2022-9-19
- 修复 `hls.js` 在 `Safari` 播放失效的问题
- 修复 `hls.js` 在 `Safari` 播放失效的问题
## [4.5.5] - 2022-9-19
- 广告插件添加 `option.muted` 选项，用于静音自动播放广告
- 弹幕库插件暴露 `art.plugins.artplayerPluginDanmuku.reset()` 方法，用于清空当前弹幕显示
- 弹幕库插件暴露 `art.plugins.artplayerPluginDanmuku.option` 属性，用于获取当前弹幕配置
- 修复在 `IOS` 全屏模式下，字幕失效的问题
- 添加西班牙语支持
- 广告插件添加 `option.muted` 选项，用于静音自动播放广告
- 弹幕库插件暴露 `art.plugins.artplayerPluginDanmuku.reset()` 方法，用于清空当前弹幕显示
- 弹幕库插件暴露 `art.plugins.artplayerPluginDanmuku.option` 属性，用于获取当前弹幕配置
- 修复在 `IOS` 全屏模式下，字幕失效的问题
- 添加西班牙语支持
## [4.5.4] - 2022-8-1
### Added
- 新增 `Artplayer.AUTO_PLAYBACK_MIN` 用于控制最小可以记忆播放的进度值，默认为 `5` 秒
- 新增 `Artplayer.TOUCH_MOVE_RATIO` 用于控制移动端进度条拖放比例，默认为 `0.5`
- `option.thumbnails` 添加可选的 `width` 和 `height`
- 新增播放器编号选项 `option.id`，可用于记忆播放时的唯一标识
- 新增 `Artplayer.AUTO_PLAYBACK_MIN` 用于控制最小可以记忆播放的进度值，默认为 `5` 秒
- 新增 `Artplayer.TOUCH_MOVE_RATIO` 用于控制移动端进度条拖放比例，默认为 `0.5`
- `option.thumbnails` 添加可选的 `width` 和 `height`
- 新增播放器编号选项 `option.id`，可用于记忆播放时的唯一标识
## [4.5.3] - 2022-7-13
### Added
- `url` 选项允许传空字符串，可用于异步设置 `art.url`
- `url` 选项允许传空字符串，可用于异步设置 `art.url`
```js
const art = new Artplayer({
@@ -82,7 +90,7 @@ setTimeout(() => {
}, 1000);
```
- `art.play()` 方法统一返回 `Promise`, `play` 事件也改为异步触发
- `art.play()` 方法统一返回 `Promise`, `play` 事件也改为异步触发
```js
const art = new Artplayer({
@@ -97,10 +105,10 @@ art.on('ready', async () => {
} catch (error) {
console.log('播放失败', error.message);
}
})
});
```
- 新增 `airplay` (隔空播放) 功能，当前只在 Safari 下可用
- 新增 `airplay` (隔空播放) 功能，当前只在 Safari 下可用
```js
const art = new Artplayer({
@@ -113,69 +121,78 @@ 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
- 更新依赖库
- 兼容弹幕库 d.ts
- 更新依赖库
## [4.4.6] - 2022-6-11
### Added
- 添加弹幕库 d.ts
- 调整字幕字体大小参数
- 优化正则解析xml弹幕
- 添加弹幕库 d.ts
- 调整字幕字体大小参数
- 优化正则解析 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 图标，出现于视频加载错误达到上限后
- 修复 setting 多次初始化时产生的 bug
- 移除播放器 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 选项，控制输入框自定义挂载的主题色
- 添加 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 选项
- 弹幕库插件添加设置面板和弹幕发送
- 弹幕库的选项添加默认模式和默认字号
- 弹幕库字号支持按播放器的百分百
- 修复翻转设置的图标缺失
- 默认播放器获取了焦点后，不会自动隐藏控制栏
- 删除字幕开关按钮，需要自行配置字幕开关
- 设置面板支持 switch 和 onSwitch 选项
- 弹幕库插件添加设置面板和弹幕发送
- 弹幕库的选项添加默认模式和默认字号
- 弹幕库字号支持按播放器的百分百
- 修复翻转设置的图标缺失
- 默认播放器获取了焦点后，不会自动隐藏控制栏
- 删除字幕开关按钮，需要自行配置字幕开关
CONTRIBUTING.md
+1 -1
View File
@@ -32,4 +32,4 @@ npm run build
```bash
yarn build
```
```
README.md
+2
View File
@@ -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
+4 -6
View File
@@ -1,7 +1,5 @@
{
"lerna": "4.0.0",
"version": "4.0.0",
"packages": [
"packages/*"
]
}
"lerna": "4.0.0",
"version": "4.0.0",
"packages": ["packages/*"]
}
package.json
+64 -59
View File
@@ -1,61 +1,66 @@
{
"name": "artplayer-packages",
"version": "4.4.0",
"type": "module",
"description": "ArtPlayer.js is a modern and full featured HTML5 video player",
"scripts": {
"build:all": "npm run build all && npm run build:sw && npm run build:ts",
"bootstrap": "npx lerna bootstrap --hoist",
"lint": "npx eslint packages/*/src",
"build:sw": "node ./scripts/build-sw.js",
"build:ts": "node ./scripts/build-ts.js",
"test:create": "node ./scripts/createTests.js",
"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\"}'",
"postinstall": "npm run bootstrap"
},
"repository": {
"type": "git",
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
},
"keywords": [
"video",
"player"
],
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
},
"homepage": "https://artplayer.org",
"browserslist": "> 0.5%, last 2 versions, not dead",
"dependencies": {
"@babel/eslint-parser": "^7.19.1",
"@babel/preset-react": "^7.18.6",
"@parcel/config-default": "^2.7.0",
"@parcel/core": "^2.7.0",
"@parcel/optimizer-data-url": "^2.7.0",
"@parcel/reporter-cli": "^2.7.0",
"@parcel/transformer-inline-string": "^2.7.0",
"@parcel/transformer-less": "^2.7.0",
"@parcel/transformer-vue": "^2.7.0",
"artplayer": "latest",
"chai": "^4.3.6",
"cpy": "^9.0.1",
"cross-env": "^7.0.3",
"eslint": "^8.25.0",
"glob": "^8.0.3",
"lerna": "^6.0.0",
"mocha": "^10.0.0",
"mocha-chrome": "^2.2.0",
"node-html-parser": "^6.1.1",
"prettier": "^2.7.1",
"prompts": "^2.4.2",
"servor": "^4.0.2",
"workbox-build": "^6.5.4"
},
"engines": {
"node": ">= 16.0.0"
}
"name": "artplayer-packages",
"version": "4.4.0",
"type": "module",
"description": "ArtPlayer.js is a modern and full featured HTML5 video player",
"scripts": {
"build:all": "npm run build all && npm run build:sw && npm run build:ts",
"bootstrap": "npx lerna bootstrap --hoist",
"lint": "npx eslint packages/*/src",
"build:sw": "node ./scripts/build-sw.js",
"build:ts": "node ./scripts/build-ts.js",
"test:create": "node ./scripts/createTests.js",
"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": {
"type": "git",
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
},
"keywords": [
"video",
"player"
],
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
},
"homepage": "https://artplayer.org",
"browserslist": "> 0.5%, last 2 versions, not dead",
"dependencies": {
"@babel/eslint-parser": "^7.19.1",
"@babel/preset-react": "^7.18.6",
"@parcel/config-default": "^2.7.0",
"@parcel/core": "^2.7.0",
"@parcel/optimizer-data-url": "^2.7.0",
"@parcel/reporter-cli": "^2.7.0",
"@parcel/transformer-inline-string": "^2.7.0",
"@parcel/transformer-less": "^2.7.0",
"@parcel/transformer-vue": "^2.7.0",
"artplayer": "latest",
"chai": "^4.3.6",
"cpy": "^9.0.1",
"cross-env": "^7.0.3",
"eslint": "^8.25.0",
"glob": "^8.0.3",
"lerna": "^6.0.0",
"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",
"workbox-build": "^6.5.4"
},
"engines": {
"node": ">= 16.0.0"
},
"pre-commit": [
"prettier"
]
}
packages/artplayer-document/babel.config.js
+1 -1
View File
@@ -1,3 +1,3 @@
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};
packages/artplayer-document/package-lock.json
Generated
+22921 -22921
View File
File diff suppressed because it is too large. Load diff
packages/artplayer-document/package.json
+37 -37
View File
@@ -1,39 +1,39 @@
{
"name": "artplayer-document",
"version": "2.0.0",
"private": true,
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"build": "docusaurus build && npm run copy",
"copy": "rm -rf ../../docs/document && mv build ../../docs/document",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids"
},
"dependencies": {
"@docusaurus/core": "2.0.0-beta.20",
"@docusaurus/preset-classic": "2.0.0-beta.20",
"@mdx-js/react": "^1.6.22",
"clsx": "^1.1.1",
"docusaurus-lunr-search": "^2.1.15",
"prism-react-renderer": "^1.3.1",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
"name": "artplayer-document",
"version": "2.0.0",
"private": true,
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"build": "docusaurus build && npm run copy",
"copy": "rm -rf ../../docs/document && mv build ../../docs/document",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids"
},
"dependencies": {
"@docusaurus/core": "2.0.0-beta.20",
"@docusaurus/preset-classic": "2.0.0-beta.20",
"@mdx-js/react": "^1.6.22",
"clsx": "^1.1.1",
"docusaurus-lunr-search": "^2.1.15",
"prism-react-renderer": "^1.3.1",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
packages/artplayer-document/sidebars.js
+2 -2
View File
@@ -1,4 +1,4 @@
module.exports = {
en: [{ type: "autogenerated", dirName: "en" }],
"zh-cn": [{ type: "autogenerated", dirName: "zh-cn" }],
en: [{ type: 'autogenerated', dirName: 'en' }],
'zh-cn': [{ type: 'autogenerated', dirName: 'zh-cn' }],
};
packages/artplayer-document/src/css/custom.css
+33 -33
View File
@@ -7,65 +7,65 @@
/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: rgb(33, 175, 144);
--ifm-color-primary-darker: rgb(31, 165, 136);
--ifm-color-primary-darkest: rgb(26, 136, 112);
--ifm-color-primary-light: rgb(70, 203, 174);
--ifm-color-primary-lighter: rgb(102, 212, 189);
--ifm-color-primary-lightest: rgb(146, 224, 208);
--ifm-code-font-size: 95%;
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: rgb(33, 175, 144);
--ifm-color-primary-darker: rgb(31, 165, 136);
--ifm-color-primary-darkest: rgb(26, 136, 112);
--ifm-color-primary-light: rgb(70, 203, 174);
--ifm-color-primary-lighter: rgb(102, 212, 189);
--ifm-color-primary-lightest: rgb(146, 224, 208);
--ifm-code-font-size: 95%;
}
.docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.1);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
background-color: rgba(0, 0, 0, 0.1);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
html[data-theme="dark"] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
}
table {
display: table;
font-size: 15px;
display: table;
font-size: 15px;
}
table th {
text-align: left;
text-align: left;
}
table thead tr {
border-bottom-width: 1px !important;
border-bottom-width: 1px !important;
}
table p {
margin-bottom: 0px;
margin-bottom: 0px;
}
.markdown li > p {
margin-top: 10px;
margin-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.markdown > p {
margin-bottom: 10px;
margin-bottom: 10px;
}
.navbar__search {
padding-left: 1rem;
padding-left: var(--ifm-navbar-padding-horizontal);
padding-left: 1rem;
padding-left: var(--ifm-navbar-padding-horizontal);
}
.run-code {
display: inline-block;
padding: 3px 7px;
color: #fff;
border-radius: 3px;
background-color: #25c2a0;
margin-bottom: 10px;
font-size: 14px;
cursor: pointer;
}
display: inline-block;
padding: 3px 7px;
color: #fff;
border-radius: 3px;
background-color: #25c2a0;
margin-bottom: 10px;
font-size: 14px;
cursor: pointer;
}
packages/artplayer-document/src/theme/SearchBar/algolia.css
+323 -335
View File
@@ -7,527 +7,515 @@
/* Bottom border of each suggestion */
.algolia-docsearch-suggestion {
border-bottom-color: #3a3dd1;
border-bottom-color: #3a3dd1;
}
/* Main category headers */
.algolia-docsearch-suggestion--category-header {
background-color: #4b54de;
background-color: #4b54de;
}
/* Highlighted search terms */
.algolia-docsearch-suggestion--highlight {
color: #3a33d1;
color: #3a33d1;
}
/* Highligted search terms in the main category headers */
.algolia-docsearch-suggestion--category-header
.algolia-docsearch-suggestion--highlight {
background-color: #4d47d5;
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
background-color: #4d47d5;
}
/* Currently selected suggestion */
.aa-cursor .algolia-docsearch-suggestion--content {
color: #272296;
color: #272296;
}
.aa-cursor .algolia-docsearch-suggestion {
background: #ebebfb;
background: #ebebfb;
}
/* For bigger screens, when displaying results in two columns */
@media (min-width: 768px) {
/* Bottom border of each suggestion */
.algolia-docsearch-suggestion {
border-bottom-color: #7671df;
}
/* Left column, with secondary category header */
.algolia-docsearch-suggestion--subcategory-column {
border-right-color: #7671df;
color: #4e4726;
}
/* Bottom border of each suggestion */
.algolia-docsearch-suggestion {
border-bottom-color: #7671df;
}
/* Left column, with secondary category header */
.algolia-docsearch-suggestion--subcategory-column {
border-right-color: #7671df;
color: #4e4726;
}
}
.searchbox {
display: inline-block;
position: relative;
width: 200px;
height: 32px !important;
white-space: nowrap;
box-sizing: border-box;
visibility: visible !important;
display: inline-block;
position: relative;
width: 200px;
height: 32px !important;
white-space: nowrap;
box-sizing: border-box;
visibility: visible !important;
}
.searchbox .algolia-autocomplete {
display: block;
width: 100%;
height: 100%;
display: block;
width: 100%;
height: 100%;
}
.searchbox__wrapper {
width: 100%;
height: 100%;
z-index: 999;
position: relative;
width: 100%;
height: 100%;
z-index: 999;
position: relative;
}
.searchbox__input {
display: inline-block;
box-sizing: border-box;
-webkit-transition: box-shadow 0.4s ease, background 0.4s ease;
transition: box-shadow 0.4s ease, background 0.4s ease;
border: 0;
border-radius: 16px;
box-shadow: inset 0 0 0 1px #cccccc;
background: #ffffff !important;
padding: 0;
padding-right: 26px;
padding-left: 32px;
width: 100%;
height: 100%;
vertical-align: middle;
white-space: normal;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
box-sizing: border-box;
-webkit-transition: box-shadow 0.4s ease, background 0.4s ease;
transition: box-shadow 0.4s ease, background 0.4s ease;
border: 0;
border-radius: 16px;
box-shadow: inset 0 0 0 1px #cccccc;
background: #ffffff !important;
padding: 0;
padding-right: 26px;
padding-left: 32px;
width: 100%;
height: 100%;
vertical-align: middle;
white-space: normal;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.searchbox__input::-webkit-search-decoration,
.searchbox__input::-webkit-search-cancel-button,
.searchbox__input::-webkit-search-results-button,
.searchbox__input::-webkit-search-results-decoration {
display: none;
display: none;
}
.searchbox__input:hover {
box-shadow: inset 0 0 0 1px #b3b3b3;
box-shadow: inset 0 0 0 1px #b3b3b3;
}
.searchbox__input:focus,
.searchbox__input:active {
outline: 0;
box-shadow: inset 0 0 0 1px #aaaaaa;
background: #ffffff;
outline: 0;
box-shadow: inset 0 0 0 1px #aaaaaa;
background: #ffffff;
}
.searchbox__input::-webkit-input-placeholder {
color: #aaaaaa;
color: #aaaaaa;
}
.searchbox__input::-moz-placeholder {
color: #aaaaaa;
color: #aaaaaa;
}
.searchbox__input:-ms-input-placeholder {
color: #aaaaaa;
color: #aaaaaa;
}
.searchbox__input::placeholder {
color: #aaaaaa;
color: #aaaaaa;
}
.searchbox__submit {
position: absolute;
top: 0;
margin: 0;
border: 0;
border-radius: 16px 0 0 16px;
background-color: rgba(69, 142, 225, 0);
padding: 0;
width: 32px;
height: 100%;
vertical-align: middle;
text-align: center;
font-size: inherit;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
right: inherit;
left: 0;
position: absolute;
top: 0;
margin: 0;
border: 0;
border-radius: 16px 0 0 16px;
background-color: rgba(69, 142, 225, 0);
padding: 0;
width: 32px;
height: 100%;
vertical-align: middle;
text-align: center;
font-size: inherit;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
right: inherit;
left: 0;
}
.searchbox__submit::before {
display: inline-block;
margin-right: -4px;
height: 100%;
vertical-align: middle;
content: '';
display: inline-block;
margin-right: -4px;
height: 100%;
vertical-align: middle;
content: '';
}
.searchbox__submit:hover,
.searchbox__submit:active {
cursor: pointer;
cursor: pointer;
}
.searchbox__submit:focus {
outline: 0;
outline: 0;
}
.searchbox__submit svg {
width: 14px;
height: 14px;
vertical-align: middle;
fill: #6d7e96;
width: 14px;
height: 14px;
vertical-align: middle;
fill: #6d7e96;
}
.searchbox__reset {
display: block;
position: absolute;
top: 8px;
right: 8px;
margin: 0;
border: 0;
background: none;
cursor: pointer;
padding: 0;
font-size: inherit;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
fill: rgba(0, 0, 0, 0.5);
display: block;
position: absolute;
top: 8px;
right: 8px;
margin: 0;
border: 0;
background: none;
cursor: pointer;
padding: 0;
font-size: inherit;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
fill: rgba(0, 0, 0, 0.5);
}
.searchbox__reset.hide {
display: none;
display: none;
}
.searchbox__reset:focus {
outline: 0;
outline: 0;
}
.searchbox__reset svg {
display: block;
margin: 4px;
width: 8px;
height: 8px;
display: block;
margin: 4px;
width: 8px;
height: 8px;
}
.searchbox__input:valid ~ .searchbox__reset {
display: block;
-webkit-animation-name: sbx-reset-in;
animation-name: sbx-reset-in;
-webkit-animation-duration: 0.15s;
animation-duration: 0.15s;
display: block;
-webkit-animation-name: sbx-reset-in;
animation-name: sbx-reset-in;
-webkit-animation-duration: 0.15s;
animation-duration: 0.15s;
}
@-webkit-keyframes sbx-reset-in {
0% {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
opacity: 0;
}
100% {
-webkit-transform: none;
transform: none;
opacity: 1;
}
0% {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
opacity: 0;
}
100% {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes sbx-reset-in {
0% {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
opacity: 0;
}
100% {
-webkit-transform: none;
transform: none;
opacity: 1;
}
0% {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
opacity: 0;
}
100% {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.algolia-autocomplete .ds-dropdown-menu:before {
display: block;
position: absolute;
content: '';
width: 14px;
height: 14px;
background: #373940;
z-index: 1000;
top: -7px;
border-top: 1px solid #373940;
border-right: 1px solid #373940;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border-radius: 2px;
display: block;
position: absolute;
content: '';
width: 14px;
height: 14px;
background: #373940;
z-index: 1000;
top: -7px;
border-top: 1px solid #373940;
border-right: 1px solid #373940;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border-radius: 2px;
}
.algolia-autocomplete .ds-dropdown-menu {
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
@media (min-width: 601px) {
.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
right: 0 !important;
left: inherit !important;
}
.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
right: 0 !important;
left: inherit !important;
}
.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before {
right: 48px;
}
.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before {
right: 48px;
}
.algolia-autocomplete .ds-dropdown-menu {
position: relative;
top: -6px;
border-radius: 4px;
margin: 6px 0 0;
padding: 0;
text-align: left;
height: auto;
position: relative;
background: transparent;
border: none;
z-index: 999;
max-width: 600px;
min-width: 500px;
}
.algolia-autocomplete .ds-dropdown-menu {
position: relative;
top: -6px;
border-radius: 4px;
margin: 6px 0 0;
padding: 0;
text-align: left;
height: auto;
position: relative;
background: transparent;
border: none;
z-index: 999;
max-width: 600px;
min-width: 500px;
}
}
@media (max-width: 600px) {
.algolia-autocomplete .ds-dropdown-menu {
z-index: 100;
position: fixed !important;
top: 50px !important;
left: auto !important;
right: 1rem !important;
width: 600px;
max-width: calc(100% - 2rem);
max-height: calc(100% - 5rem);
display: block;
}
.algolia-autocomplete .ds-dropdown-menu {
z-index: 100;
position: fixed !important;
top: 50px !important;
left: auto !important;
right: 1rem !important;
width: 600px;
max-width: calc(100% - 2rem);
max-height: calc(100% - 5rem);
display: block;
}
.algolia-autocomplete .ds-dropdown-menu:before {
right: 6rem;
}
.algolia-autocomplete .ds-dropdown-menu:before {
right: 6rem;
}
}
.algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
position: relative;
z-index: 1000;
position: relative;
z-index: 1000;
}
.algolia-autocomplete .ds-dropdown-menu .ds-suggestion {
cursor: pointer;
cursor: pointer;
}
.algolia-autocomplete .ds-dropdown-menu [class^='ds-dataset-'] {
position: relative;
border-radius: 4px;
overflow: auto;
padding: 0;
background: #ffffff;
position: relative;
border-radius: 4px;
overflow: auto;
padding: 0;
background: #ffffff;
}
.algolia-autocomplete .ds-dropdown-menu * {
box-sizing: border-box;
box-sizing: border-box;
}
.algolia-autocomplete .algolia-docsearch-suggestion {
display: block;
position: relative;
padding: 0;
overflow: hidden;
text-decoration: none;
display: block;
position: relative;
padding: 0;
overflow: hidden;
text-decoration: none;
}
.algolia-autocomplete .ds-cursor .algolia-docsearch-suggestion--wrapper {
background: #f1f1f1;
box-shadow: inset -2px 0 0 #61dafb;
background: #f1f1f1;
box-shadow: inset -2px 0 0 #61dafb;
}
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
background: #ffe564;
padding: 0.1em 0.05em;
background: #ffe564;
padding: 0.1em 0.05em;
}
.algolia-autocomplete
.algolia-docsearch-suggestion--category-header
.algolia-docsearch-suggestion--category-header-lvl0
.algolia-docsearch-suggestion--highlight,
.algolia-docsearch-suggestion--category-header
.algolia-docsearch-suggestion--category-header-lvl0
.algolia-docsearch-suggestion--highlight,
.algolia-autocomplete
.algolia-docsearch-suggestion--category-header
.algolia-docsearch-suggestion--category-header-lvl1
.algolia-docsearch-suggestion--highlight {
color: inherit;
background: inherit;
.algolia-docsearch-suggestion--category-header
.algolia-docsearch-suggestion--category-header-lvl1
.algolia-docsearch-suggestion--highlight {
color: inherit;
background: inherit;
}
.algolia-autocomplete
.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);
color: inherit;
.algolia-autocomplete .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);
color: inherit;
}
.algolia-autocomplete .algolia-docsearch-suggestion--content {
display: block;
float: right;
width: 70%;
position: relative;
padding: 5.33333px 0 5.33333px 10.66667px;
cursor: pointer;
display: block;
float: right;
width: 70%;
position: relative;
padding: 5.33333px 0 5.33333px 10.66667px;
cursor: pointer;
}
.algolia-autocomplete .algolia-docsearch-suggestion--content:before {
content: '';
position: absolute;
display: block;
top: 0;
height: 100%;
width: 1px;
background: #ececec;
left: -1px;
content: '';
position: absolute;
display: block;
top: 0;
height: 100%;
width: 1px;
background: #ececec;
left: -1px;
}
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
position: relative;
display: none;
font-size: 14px;
letter-spacing: 0.08em;
font-weight: 700;
background-color: #373940;
text-transform: uppercase;
color: #fff;
margin: 0;
padding: 5px 8px;
position: relative;
display: none;
font-size: 14px;
letter-spacing: 0.08em;
font-weight: 700;
background-color: #373940;
text-transform: uppercase;
color: #fff;
margin: 0;
padding: 5px 8px;
}
.algolia-autocomplete .algolia-docsearch-suggestion--wrapper {
background-color: #fff;
width: 100%;
float: left;
padding: 8px 0 0 0;
background-color: #fff;
width: 100%;
float: left;
padding: 8px 0 0 0;
}
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
float: left;
width: 30%;
display: none;
padding-left: 0;
text-align: right;
position: relative;
padding: 5.33333px 10.66667px;
color: #777;
font-size: 0.9em;
word-wrap: break-word;
float: left;
width: 30%;
display: none;
padding-left: 0;
text-align: right;
position: relative;
padding: 5.33333px 10.66667px;
color: #777;
font-size: 0.9em;
word-wrap: break-word;
}
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before {
content: '';
position: absolute;
display: block;
top: 0;
height: 100%;
width: 1px;
background: #ececec;
right: 0;
content: '';
position: absolute;
display: block;
top: 0;
height: 100%;
width: 1px;
background: #ececec;
right: 0;
}
.algolia-autocomplete
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
.algolia-docsearch-suggestion--category-header,
.algolia-autocomplete
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary {
display: block;
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
.algolia-docsearch-suggestion--category-header,
.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary {
display: block;
}
.algolia-autocomplete
.algolia-docsearch-suggestion--subcategory-column
.algolia-docsearch-suggestion--highlight {
background-color: inherit;
color: inherit;
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight {
background-color: inherit;
color: inherit;
}
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-inline {
display: none;
display: none;
}
.algolia-autocomplete .algolia-docsearch-suggestion--title {
margin-bottom: 4px;
color: #02060c;
font-size: 0.9em;
font-weight: bold;
margin-bottom: 4px;
color: #02060c;
font-size: 0.9em;
font-weight: bold;
}
.algolia-autocomplete .algolia-docsearch-suggestion--text {
display: block;
line-height: 1.2em;
font-size: 0.85em;
color: #63676d;
padding-right: 2px;
display: block;
line-height: 1.2em;
font-size: 0.85em;
color: #63676d;
padding-right: 2px;
}
.algolia-autocomplete .algolia-docsearch-suggestion--no-results {
width: 100%;
padding: 8px 0;
text-align: center;
font-size: 1.2em;
background-color: #373940;
margin-top: -8px;
width: 100%;
padding: 8px 0;
text-align: center;
font-size: 1.2em;
background-color: #373940;
margin-top: -8px;
}
.algolia-autocomplete
.algolia-docsearch-suggestion--no-results
.algolia-docsearch-suggestion--text {
color: #ffffff;
margin-top: 4px;
.algolia-autocomplete .algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--text {
color: #ffffff;
margin-top: 4px;
}
.algolia-autocomplete .algolia-docsearch-suggestion--no-results::before {
display: none;
display: none;
}
.algolia-autocomplete .algolia-docsearch-suggestion code {
padding: 1px 5px;
font-size: 90%;
border: none;
color: #222222;
background-color: #ebebeb;
border-radius: 3px;
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
padding: 1px 5px;
font-size: 90%;
border: none;
color: #222222;
background-color: #ebebeb;
border-radius: 3px;
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
.algolia-autocomplete .algolia-docsearch-suggestion code .algolia-docsearch-suggestion--highlight {
background: none;
}
.algolia-autocomplete
.algolia-docsearch-suggestion
code
.algolia-docsearch-suggestion--highlight {
background: none;
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
.algolia-docsearch-suggestion--category-header {
color: white;
display: block;
}
.algolia-autocomplete
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
.algolia-docsearch-suggestion--category-header {
color: white;
display: block;
}
.algolia-autocomplete
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary
.algolia-docsearch-suggestion--subcategory-column {
display: block;
.algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary
.algolia-docsearch-suggestion--subcategory-column {
display: block;
}
.algolia-autocomplete .algolia-docsearch-footer {
background-color: #fff;
width: 100%;
height: 30px;
z-index: 2000;
float: right;
font-size: 0;
line-height: 0;
background-color: #fff;
width: 100%;
height: 30px;
z-index: 2000;
float: right;
font-size: 0;
line-height: 0;
}
.algolia-autocomplete .algolia-docsearch-footer--logo {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 18'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='-36.87%25' x2='129.43%25' y1='134.94%25' y2='-27.7%25'%3E%3Cstop stop-color='%252300AEFF' offset='0%25'/%3E%3Cstop stop-color='%25233369E7' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='url(%2523a)' d='M59.4.02h13.3a2.37 2.37 0 0 1 2.38 2.37V15.6a2.37 2.37 0 0 1-2.38 2.36H59.4a2.37 2.37 0 0 1-2.38-2.36V2.38A2.37 2.37 0 0 1 59.4.02z'/%3E%3Cpath fill='%2523FFF' d='M66.26 4.56c-2.82 0-5.1 2.27-5.1 5.08 0 2.8 2.28 5.07 5.1 5.07 2.8 0 5.1-2.26 5.1-5.07 0-2.8-2.28-5.07-5.1-5.07zm0 8.65c-2 0-3.6-1.6-3.6-3.56 0-1.97 1.6-3.58 3.6-3.58 1.98 0 3.6 1.6 3.6 3.58a3.58 3.58 0 0 1-3.6 3.57zm0-6.4v2.66c0 .07.08.13.15.1l2.4-1.24c.04-.02.06-.1.03-.14a2.96 2.96 0 0 0-2.46-1.5c-.06 0-.1.05-.1.1zm-3.33-1.96l-.3-.3a.78.78 0 0 0-1.12 0l-.36.36a.77.77 0 0 0 0 1.1l.3.3c.05.05.13.04.17 0 .2-.25.4-.5.6-.7.23-.23.46-.43.7-.6.07-.04.07-.1.03-.16zm5-.8V3.4a.78.78 0 0 0-.78-.78h-1.83a.78.78 0 0 0-.78.78v.63c0 .07.06.12.14.1a5.74 5.74 0 0 1 1.58-.22c.52 0 1.04.07 1.54.2a.1.1 0 0 0 .13-.1z'/%3E%3Cpath fill='%2523182359' d='M102.16 13.76c0 1.46-.37 2.52-1.12 3.2-.75.67-1.9 1-3.44 1-.56 0-1.74-.1-2.67-.3l.34-1.7c.78.17 1.82.2 2.36.2.86 0 1.48-.16 1.84-.5.37-.36.55-.88.55-1.57v-.35a6.37 6.37 0 0 1-.84.3 4.15 4.15 0 0 1-1.2.17 4.5 4.5 0 0 1-1.6-.28 3.38 3.38 0 0 1-1.26-.82 3.74 3.74 0 0 1-.8-1.35c-.2-.54-.3-1.5-.3-2.2 0-.67.1-1.5.3-2.06a3.92 3.92 0 0 1 .9-1.43 4.12 4.12 0 0 1 1.45-.92 5.3 5.3 0 0 1 1.94-.37c.7 0 1.35.1 1.97.2a15.86 15.86 0 0 1 1.6.33v8.46zm-5.95-4.2c0 .9.2 1.88.6 2.3.4.4.9.62 1.53.62.34 0 .66-.05.96-.15a2.75 2.75 0 0 0 .73-.33V6.7a8.53 8.53 0 0 0-1.42-.17c-.76-.02-1.36.3-1.77.8-.4.5-.62 1.4-.62 2.23zm16.13 0c0 .72-.1 1.26-.32 1.85a4.4 4.4 0 0 1-.9 1.53c-.38.42-.85.75-1.4.98-.54.24-1.4.37-1.8.37-.43 0-1.27-.13-1.8-.36a4.1 4.1 0 0 1-1.4-.97 4.5 4.5 0 0 1-.92-1.52 5.04 5.04 0 0 1-.33-1.84c0-.72.1-1.4.32-2 .22-.6.53-1.1.92-1.5.4-.43.86-.75 1.4-.98a4.55 4.55 0 0 1 1.78-.34 4.7 4.7 0 0 1 1.8.34c.54.23 1 .55 1.4.97.38.42.68.92.9 1.5.23.6.35 1.3.35 2zm-2.2 0c0-.92-.2-1.7-.6-2.22-.38-.54-.94-.8-1.64-.8-.72 0-1.27.26-1.67.8-.4.54-.58 1.3-.58 2.22 0 .93.2 1.56.6 2.1.38.54.94.8 1.64.8s1.25-.26 1.65-.8c.4-.55.6-1.17.6-2.1zm6.97 4.7c-3.5.02-3.5-2.8-3.5-3.27L113.57.92l2.15-.34v10c0 .25 0 1.87 1.37 1.88v1.8zm3.77 0h-2.15v-9.2l2.15-.33v9.54zM119.8 3.74c.7 0 1.3-.58 1.3-1.3 0-.7-.58-1.3-1.3-1.3-.73 0-1.3.6-1.3 1.3 0 .72.58 1.3 1.3 1.3zm6.43 1c.7 0 1.3.1 1.78.27.5.18.88.42 1.17.73.28.3.5.74.6 1.18.13.46.2.95.2 1.5v5.47a25.24 25.24 0 0 1-1.5.25c-.67.1-1.42.15-2.25.15a6.83 6.83 0 0 1-1.52-.16 3.2 3.2 0 0 1-1.18-.5 2.46 2.46 0 0 1-.76-.9c-.18-.37-.27-.9-.27-1.44 0-.52.1-.85.3-1.2.2-.37.48-.67.83-.9a3.6 3.6 0 0 1 1.23-.5 7.07 7.07 0 0 1 2.2-.1l.83.16v-.35c0-.25-.03-.48-.1-.7a1.5 1.5 0 0 0-.3-.58c-.15-.18-.34-.3-.58-.4a2.54 2.54 0 0 0-.92-.17c-.5 0-.94.06-1.35.13-.4.08-.75.16-1 .25l-.27-1.74c.27-.1.67-.18 1.2-.28a9.34 9.34 0 0 1 1.65-.14zm.18 7.74c.66 0 1.15-.04 1.5-.1V10.2a5.1 5.1 0 0 0-2-.1c-.23.03-.45.1-.64.2a1.17 1.17 0 0 0-.47.38c-.13.17-.18.26-.18.52 0 .5.17.8.5.98.32.2.74.3 1.3.3zM84.1 4.8c.72 0 1.3.08 1.8.26.48.17.87.42 1.15.73.3.3.5.72.6 1.17.14.45.2.94.2 1.47v5.48a25.24 25.24 0 0 1-1.5.26c-.67.1-1.42.14-2.25.14a6.83 6.83 0 0 1-1.52-.16 3.2 3.2 0 0 1-1.18-.5 2.46 2.46 0 0 1-.76-.9c-.18-.38-.27-.9-.27-1.44 0-.53.1-.86.3-1.22.2-.36.5-.65.84-.88a3.6 3.6 0 0 1 1.24-.5 7.07 7.07 0 0 1 2.2-.1c.26.03.54.08.84.15v-.35c0-.24-.03-.48-.1-.7a1.5 1.5 0 0 0-.3-.58c-.15-.17-.34-.3-.58-.4a2.54 2.54 0 0 0-.9-.15c-.5 0-.96.05-1.37.12-.4.07-.75.15-1 .24l-.26-1.75c.27-.08.67-.17 1.18-.26a8.9 8.9 0 0 1 1.66-.15zm.2 7.73c.65 0 1.14-.04 1.48-.1v-2.17a5.1 5.1 0 0 0-1.98-.1c-.24.03-.46.1-.65.18a1.17 1.17 0 0 0-.47.4c-.12.17-.17.26-.17.52 0 .5.18.8.5.98.32.2.75.3 1.3.3zm8.68 1.74c-3.5 0-3.5-2.82-3.5-3.28L89.45.92 91.6.6v10c0 .25 0 1.87 1.38 1.88v1.8z'/%3E%3Cpath fill='%25231D3657' d='M5.03 11.03c0 .7-.26 1.24-.76 1.64-.5.4-1.2.6-2.1.6-.88 0-1.6-.14-2.17-.42v-1.2c.36.16.74.3 1.14.38.4.1.78.15 1.13.15.5 0 .88-.1 1.12-.3a.94.94 0 0 0 .35-.77.98.98 0 0 0-.33-.74c-.22-.2-.68-.44-1.37-.72-.72-.3-1.22-.62-1.52-1C.23 8.27.1 7.82.1 7.3c0-.65.22-1.17.7-1.55.46-.37 1.08-.56 1.86-.56.76 0 1.5.16 2.25.48l-.4 1.05c-.7-.3-1.32-.44-1.87-.44-.4 0-.73.08-.94.26a.9.9 0 0 0-.33.72c0 .2.04.38.12.52.08.15.22.3.42.4.2.14.55.3 1.06.52.58.24 1 .47 1.27.67.27.2.47.44.6.7.12.26.18.57.18.92zM9 13.27c-.92 0-1.64-.27-2.16-.8-.52-.55-.78-1.3-.78-2.24 0-.97.24-1.73.72-2.3.5-.54 1.15-.82 2-.82.78 0 1.4.25 1.85.72.46.48.7 1.14.7 1.97v.67H7.35c0 .58.17 1.02.46 1.33.3.3.7.47 1.24.47.36 0 .68-.04.98-.1a5.1 5.1 0 0 0 .98-.33v1.02a3.87 3.87 0 0 1-.94.32 5.72 5.72 0 0 1-1.08.1zm-.22-5.2c-.4 0-.73.12-.97.38s-.37.62-.42 1.1h2.7c0-.48-.13-.85-.36-1.1-.23-.26-.54-.38-.94-.38zm7.7 5.1l-.26-.84h-.05c-.28.36-.57.6-.86.74-.28.13-.65.2-1.1.2-.6 0-1.05-.16-1.38-.48-.32-.32-.5-.77-.5-1.34 0-.62.24-1.08.7-1.4.45-.3 Line truncated
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
overflow: hidden;
text-indent: -9000px;
width: 110px;
height: 100%;
display: block;
margin-left: auto;
margin-right: 5px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 18'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='-36.87%25' x2='129.43%25' y1='134.94%25' y2='-27.7%25'%3E%3Cstop stop-color='%252300AEFF' offset='0%25'/%3E%3Cstop stop-color='%25233369E7' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='url(%2523a)' d='M59.4.02h13.3a2.37 2.37 0 0 1 2.38 2.37V15.6a2.37 2.37 0 0 1-2.38 2.36H59.4a2.37 2.37 0 0 1-2.38-2.36V2.38A2.37 2.37 0 0 1 59.4.02z'/%3E%3Cpath fill='%2523FFF' d='M66.26 4.56c-2.82 0-5.1 2.27-5.1 5.08 0 2.8 2.28 5.07 5.1 5.07 2.8 0 5.1-2.26 5.1-5.07 0-2.8-2.28-5.07-5.1-5.07zm0 8.65c-2 0-3.6-1.6-3.6-3.56 0-1.97 1.6-3.58 3.6-3.58 1.98 0 3.6 1.6 3.6 3.58a3.58 3.58 0 0 1-3.6 3.57zm0-6.4v2.66c0 .07.08.13.15.1l2.4-1.24c.04-.02.06-.1.03-.14a2.96 2.96 0 0 0-2.46-1.5c-.06 0-.1.05-.1.1zm-3.33-1.96l-.3-.3a.78.78 0 0 0-1.12 0l-.36.36a.77.77 0 0 0 0 1.1l.3.3c.05.05.13.04.17 0 .2-.25.4-.5.6-.7.23-.23.46-.43.7-.6.07-.04.07-.1.03-.16zm5-.8V3.4a.78.78 0 0 0-.78-.78h-1.83a.78.78 0 0 0-.78.78v.63c0 .07.06.12.14.1a5.74 5.74 0 0 1 1.58-.22c.52 0 1.04.07 1.54.2a.1.1 0 0 0 .13-.1z'/%3E%3Cpath fill='%2523182359' d='M102.16 13.76c0 1.46-.37 2.52-1.12 3.2-.75.67-1.9 1-3.44 1-.56 0-1.74-.1-2.67-.3l.34-1.7c.78.17 1.82.2 2.36.2.86 0 1.48-.16 1.84-.5.37-.36.55-.88.55-1.57v-.35a6.37 6.37 0 0 1-.84.3 4.15 4.15 0 0 1-1.2.17 4.5 4.5 0 0 1-1.6-.28 3.38 3.38 0 0 1-1.26-.82 3.74 3.74 0 0 1-.8-1.35c-.2-.54-.3-1.5-.3-2.2 0-.67.1-1.5.3-2.06a3.92 3.92 0 0 1 .9-1.43 4.12 4.12 0 0 1 1.45-.92 5.3 5.3 0 0 1 1.94-.37c.7 0 1.35.1 1.97.2a15.86 15.86 0 0 1 1.6.33v8.46zm-5.95-4.2c0 .9.2 1.88.6 2.3.4.4.9.62 1.53.62.34 0 .66-.05.96-.15a2.75 2.75 0 0 0 .73-.33V6.7a8.53 8.53 0 0 0-1.42-.17c-.76-.02-1.36.3-1.77.8-.4.5-.62 1.4-.62 2.23zm16.13 0c0 .72-.1 1.26-.32 1.85a4.4 4.4 0 0 1-.9 1.53c-.38.42-.85.75-1.4.98-.54.24-1.4.37-1.8.37-.43 0-1.27-.13-1.8-.36a4.1 4.1 0 0 1-1.4-.97 4.5 4.5 0 0 1-.92-1.52 5.04 5.04 0 0 1-.33-1.84c0-.72.1-1.4.32-2 .22-.6.53-1.1.92-1.5.4-.43.86-.75 1.4-.98a4.55 4.55 0 0 1 1.78-.34 4.7 4.7 0 0 1 1.8.34c.54.23 1 .55 1.4.97.38.42.68.92.9 1.5.23.6.35 1.3.35 2zm-2.2 0c0-.92-.2-1.7-.6-2.22-.38-.54-.94-.8-1.64-.8-.72 0-1.27.26-1.67.8-.4.54-.58 1.3-.58 2.22 0 .93.2 1.56.6 2.1.38.54.94.8 1.64.8s1.25-.26 1.65-.8c.4-.55.6-1.17.6-2.1zm6.97 4.7c-3.5.02-3.5-2.8-3.5-3.27L113.57.92l2.15-.34v10c0 .25 0 1.87 1.37 1.88v1.8zm3.77 0h-2.15v-9.2l2.15-.33v9.54zM119.8 3.74c.7 0 1.3-.58 1.3-1.3 0-.7-.58-1.3-1.3-1.3-.73 0-1.3.6-1.3 1.3 0 .72.58 1.3 1.3 1.3zm6.43 1c.7 0 1.3.1 1.78.27.5.18.88.42 1.17.73.28.3.5.74.6 1.18.13.46.2.95.2 1.5v5.47a25.24 25.24 0 0 1-1.5.25c-.67.1-1.42.15-2.25.15a6.83 6.83 0 0 1-1.52-.16 3.2 3.2 0 0 1-1.18-.5 2.46 2.46 0 0 1-.76-.9c-.18-.37-.27-.9-.27-1.44 0-.52.1-.85.3-1.2.2-.37.48-.67.83-.9a3.6 3.6 0 0 1 1.23-.5 7.07 7.07 0 0 1 2.2-.1l.83.16v-.35c0-.25-.03-.48-.1-.7a1.5 1.5 0 0 0-.3-.58c-.15-.18-.34-.3-.58-.4a2.54 2.54 0 0 0-.92-.17c-.5 0-.94.06-1.35.13-.4.08-.75.16-1 .25l-.27-1.74c.27-.1.67-.18 1.2-.28a9.34 9.34 0 0 1 1.65-.14zm.18 7.74c.66 0 1.15-.04 1.5-.1V10.2a5.1 5.1 0 0 0-2-.1c-.23.03-.45.1-.64.2a1.17 1.17 0 0 0-.47.38c-.13.17-.18.26-.18.52 0 .5.17.8.5.98.32.2.74.3 1.3.3zM84.1 4.8c.72 0 1.3.08 1.8.26.48.17.87.42 1.15.73.3.3.5.72.6 1.17.14.45.2.94.2 1.47v5.48a25.24 25.24 0 0 1-1.5.26c-.67.1-1.42.14-2.25.14a6.83 6.83 0 0 1-1.52-.16 3.2 3.2 0 0 1-1.18-.5 2.46 2.46 0 0 1-.76-.9c-.18-.38-.27-.9-.27-1.44 0-.53.1-.86.3-1.22.2-.36.5-.65.84-.88a3.6 3.6 0 0 1 1.24-.5 7.07 7.07 0 0 1 2.2-.1c.26.03.54.08.84.15v-.35c0-.24-.03-.48-.1-.7a1.5 1.5 0 0 0-.3-.58c-.15-.17-.34-.3-.58-.4a2.54 2.54 0 0 0-.9-.15c-.5 0-.96.05-1.37.12-.4.07-.75.15-1 .24l-.26-1.75c.27-.08.67-.17 1.18-.26a8.9 8.9 0 0 1 1.66-.15zm.2 7.73c.65 0 1.14-.04 1.48-.1v-2.17a5.1 5.1 0 0 0-1.98-.1c-.24.03-.46.1-.65.18a1.17 1.17 0 0 0-.47.4c-.12.17-.17.26-.17.52 0 .5.18.8.5.98.32.2.75.3 1.3.3zm8.68 1.74c-3.5 0-3.5-2.82-3.5-3.28L89.45.92 91.6.6v10c0 .25 0 1.87 1.38 1.88v1.8z'/%3E%3Cpath fill='%25231D3657' d='M5.03 11.03c0 .7-.26 1.24-.76 1.64-.5.4-1.2.6-2.1.6-.88 0-1.6-.14-2.17-.42v-1.2c.36.16.74.3 1.14.38.4.1.78.15 1.13.15.5 0 .88-.1 1.12-.3a.94.94 0 0 0 .35-.77.98.98 0 0 0-.33-.74c-.22-.2-.68-.44-1.37-.72-.72-.3-1.22-.62-1.52-1C.23 8.27.1 7.82.1 7.3c0-.65.22-1.17.7-1.55.46-.37 1.08-.56 1.86-.56.76 0 1.5.16 2.25.48l-.4 1.05c-.7-.3-1.32-.44-1.87-.44-.4 0-.73.08-.94.26a.9.9 0 0 0-.33.72c0 .2.04.38.12.52.08.15.22.3.42.4.2.14.55.3 1.06.52.58.24 1 .47 1.27.67.27.2.47.44.6.7.12.26.18.57.18.92zM9 13.27c-.92 0-1.64-.27-2.16-.8-.52-.55-.78-1.3-.78-2.24 0-.97.24-1.73.72-2.3.5-.54 1.15-.82 2-.82.78 0 1.4.25 1.85.72.46.48.7 1.14.7 1.97v.67H7.35c0 .58.17 1.02.46 1.33.3.3.7.47 1.24.47.36 0 .68-.04.98-.1a5.1 5.1 0 0 0 .98-.33v1.02a3.87 3.87 0 0 1-.94.32 5.72 5.72 0 0 1-1.08.1zm-.22-5.2c-.4 0-.73.12-.97.38s-.37.62-.42 1.1h2.7c0-.48-.13-.85-.36-1.1-.23-.26-.54-.38-.94-.38zm7.7 5.1l-.26-.84h-.05c-.28.36-.57.6-.86.74-.28.13-.65.2-1.1.2-.6 0-1.05-.16-1.38-.48-.32-.32-.5-.77-.5-1.34 0-.62.24-1.08.7-1.4.45-.Line truncated
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
overflow: hidden;
text-indent: -9000px;
width: 110px;
height: 100%;
display: block;
margin-left: auto;
margin-right: 5px;
}
packages/artplayer-document/src/theme/SearchBar/index.js
+92 -95
View File
@@ -7,106 +7,103 @@
* LICENSE file in the root directory of this source tree.
*/
import React, { useRef, useCallback } from "react";
import classnames from "classnames";
import { useHistory } from "@docusaurus/router";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import React, { useRef, useCallback } from 'react';
import classnames from 'classnames';
import { useHistory } from '@docusaurus/router';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import { usePluginData } from '@docusaurus/useGlobalData';
const Search = props => {
const initialized = useRef(false);
const searchBarRef = useRef(null);
const history = useHistory();
const { siteConfig = {} } = useDocusaurusContext();
const { baseUrl } = siteConfig;
const initAlgolia = (searchDocs, searchIndex, DocSearch) => {
new DocSearch({
searchDocs,
searchIndex,
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");
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.
const Search = (props) => {
const initialized = useRef(false);
const searchBarRef = useRef(null);
const history = useHistory();
const { siteConfig = {} } = useDocusaurusContext();
const { baseUrl } = siteConfig;
const initAlgolia = (searchDocs, searchIndex, DocSearch) => {
new DocSearch({
searchDocs,
searchIndex,
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');
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);
history.push(url);
},
});
};
const pluginData = usePluginData('docusaurus-lunr-search');
const getSearchDoc = () =>
process.env.NODE_ENV === 'production'
? fetch(`${baseUrl}${pluginData.fileNames.searchDoc}`).then((content) => content.json())
: Promise.resolve([]);
const getLunrIndex = () =>
process.env.NODE_ENV === 'production'
? fetch(`${baseUrl}${pluginData.fileNames.lunrIndex}`).then((content) => content.json())
: Promise.resolve([]);
const loadAlgolia = () => {
if (!initialized.current) {
Promise.all([getSearchDoc(), getLunrIndex(), import('./lib/DocSearch'), import('./algolia.css')]).then(
([searchDocs, searchIndex, { default: DocSearch }]) => {
if (searchDocs.length === 0) {
return;
}
initAlgolia(searchDocs, searchIndex, DocSearch);
},
);
initialized.current = true;
}
});
};
};
const pluginData = usePluginData('docusaurus-lunr-search');
const getSearchDoc = () =>
process.env.NODE_ENV === "production"
? fetch(`${baseUrl}${pluginData.fileNames.searchDoc}`).then((content) => content.json())
: Promise.resolve([]);
const toggleSearchIconClick = useCallback(
(e) => {
if (!searchBarRef.current.contains(e.target)) {
searchBarRef.current.focus();
}
props.handleSearchBarToggle && props.handleSearchBarToggle(!props.isSearchBarExpanded);
},
[props.isSearchBarExpanded],
);
const getLunrIndex = () =>
process.env.NODE_ENV === "production"
? fetch(`${baseUrl}${pluginData.fileNames.lunrIndex}`).then((content) => content.json())
: Promise.resolve([]);
const loadAlgolia = () => {
if (!initialized.current) {
Promise.all([
getSearchDoc(),
getLunrIndex(),
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 => {
if (!searchBarRef.current.contains(e.target)) {
searchBarRef.current.focus();
}
props.handleSearchBarToggle && props.handleSearchBarToggle(!props.isSearchBarExpanded);
},
[props.isSearchBarExpanded]
);
return (
<div className="navbar__search" key="search-box">
<span
aria-label="expand searchbar"
role="button"
className={classnames("search-icon", {
"search-icon-hidden": props.isSearchBarExpanded
})}
onClick={toggleSearchIconClick}
onKeyDown={toggleSearchIconClick}
tabIndex={0}
/>
<input
id="search_input_react"
type="search"
placeholder="Search"
aria-label="Search"
className={classnames(
"navbar__search-input",
{ "search-bar-expanded": props.isSearchBarExpanded },
{ "search-bar": !props.isSearchBarExpanded }
)}
onClick={loadAlgolia}
onMouseOver={loadAlgolia}
onFocus={toggleSearchIconClick}
onBlur={toggleSearchIconClick}
ref={searchBarRef}
/>
</div>
);
return (
<div className="navbar__search" key="search-box">
<span
aria-label="expand searchbar"
role="button"
className={classnames('search-icon', {
'search-icon-hidden': props.isSearchBarExpanded,
})}
onClick={toggleSearchIconClick}
onKeyDown={toggleSearchIconClick}
tabIndex={0}
/>
<input
id="search_input_react"
type="search"
placeholder="Search"
aria-label="Search"
className={classnames(
'navbar__search-input',
{ 'search-bar-expanded': props.isSearchBarExpanded },
{ 'search-bar': !props.isSearchBarExpanded },
)}
onClick={loadAlgolia}
onMouseOver={loadAlgolia}
onFocus={toggleSearchIconClick}
onBlur={toggleSearchIconClick}
ref={searchBarRef}
/>
</div>
);
};
export default Search;
packages/artplayer-document/src/theme/SearchBar/lib/DocSearch.js
+65 -104
View File
@@ -1,10 +1,10 @@
/* eslint-disable */
import Hogan from "hogan.js";
import LunrSearchAdapter from "./lunar-search";
import autocomplete from "autocomplete.js";
import templates from "./templates";
import utils from "./utils";
import $ from "autocomplete.js/zepto";
import Hogan from 'hogan.js';
import LunrSearchAdapter from './lunar-search';
import autocomplete from 'autocomplete.js';
import templates from './templates';
import utils from './utils';
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.debug
: false;
autocompleteOptions && autocompleteOptions.debug ? 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.prefix =
this.autocompleteOptions.cssClasses.prefix || "ds";
const inputAriaLabel =
this.input &&
typeof this.input.attr === "function" &&
this.input.attr("aria-label");
this.autocompleteOptions.ariaLabel =
this.autocompleteOptions.ariaLabel || inputAriaLabel || "search input";
this.autocompleteOptions.cssClasses = this.autocompleteOptions.cssClasses || {};
this.autocompleteOptions.cssClasses.prefix = this.autocompleteOptions.cssClasses.prefix || 'ds';
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(
"autocomplete:selected",
this.handleSelected.bind(null, this.autocomplete.autocomplete)
);
this.autocomplete.on('autocomplete:selected', this.handleSelected.bind(null, this.autocomplete.autocomplete));
this.autocomplete.on(
"autocomplete:shown",
this.handleShown.bind(null, this.input)
);
this.autocomplete.on('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
.prev()
.prev()
.find("input");
const newInput = input.prev().prev().find('input');
input.remove();
return newInput;
}
static bindSearchBoxEvent() {
$('.searchbox [type="reset"]').on("click", function () {
$("input#docsearch").focus();
$(this).addClass("hide");
autocomplete.autocomplete.setVal("");
$('.searchbox [type="reset"]').on('click', function () {
$('input#docsearch').focus();
$(this).addClass('hide');
autocomplete.autocomplete.setVal('');
});
$("input#docsearch").on("keyup", () => {
const searchbox = document.querySelector("input#docsearch");
$('input#docsearch').on('keyup', () => {
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 => {
if (
this.queryDataCallback &&
typeof this.queryDataCallback == "function"
) {
this.client.search(query).then((hits) => {
if (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,
"hierarchy"
);
hit._highlightResult = utils.mergeKeyWithParent(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 flattenedHits = utils.flattenAndFlagFirst(
groupedHitsByLvl1,
"isSubCategoryHeader"
);
const groupedHitsByLvl1 = utils.groupBy(collection, 'lvl1');
const flattenedHits = utils.flattenAndFlagFirst(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 subcategory = utils.getHighlightedValue(hit, "lvl1") || category;
const category = utils.getHighlightedValue(hit, 'lvl0');
const subcategory = utils.getHighlightedValue(hit, 'lvl1') || category;
const displayTitle = utils
.compact([
utils.getHighlightedValue(hit, "lvl2") || subcategory,
utils.getHighlightedValue(hit, "lvl3"),
utils.getHighlightedValue(hit, "lvl4"),
utils.getHighlightedValue(hit, "lvl5"),
utils.getHighlightedValue(hit, "lvl6")
utils.getHighlightedValue(hit, 'lvl2') || subcategory,
utils.getHighlightedValue(hit, 'lvl3'),
utils.getHighlightedValue(hit, 'lvl4'),
utils.getHighlightedValue(hit, 'lvl5'),
utils.getHighlightedValue(hit, 'lvl6'),
])
.join(
'<span class="aa-suggestion-title-separator" aria-hidden="true"> › </span>'
);
const text = utils.getSnippetedValue(hit, "content");
.join('<span class="aa-suggestion-title-separator" aria-hidden="true"> › </span>');
const text = utils.getSnippetedValue(hit, 'content');
const isTextOrSubcategoryNonEmpty =
(subcategory && subcategory !== "") ||
(displayTitle && displayTitle !== "");
const isLvl1EmptyOrDuplicate =
!subcategory || subcategory === "" || subcategory === category;
const isLvl2 =
displayTitle && displayTitle !== "" && displayTitle !== subcategory;
const isLvl1 =
!isLvl2 &&
(subcategory && subcategory !== "" && subcategory !== category);
(subcategory && subcategory !== '') || (displayTitle && displayTitle !== '');
const isLvl1EmptyOrDuplicate = !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
? templates.suggestionSimple
: templates.suggestion;
const stringTemplate = isSimpleLayout ? 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
? "algolia-autocomplete-right"
: "algolia-autocomplete-left";
middleOfInput - middleOfWindow >= 0 ? 'algolia-autocomplete-right' : 'algolia-autocomplete-left';
const otherAlignClass =
middleOfInput - middleOfWindow < 0
? "algolia-autocomplete-right"
: "algolia-autocomplete-left";
const autocompleteWrapper = $(".algolia-autocomplete");
middleOfInput - middleOfWindow < 0 ? 'algolia-autocomplete-right' : 'algolia-autocomplete-left';
const autocompleteWrapper = $('.algolia-autocomplete');
if (!autocompleteWrapper.hasClass(alignClass)) {
autocompleteWrapper.addClass(alignClass);
}
@@ -304,4 +265,4 @@ class DocSearch {
}
}
export default DocSearch;
export default DocSearch;
packages/artplayer-document/src/theme/SearchBar/lib/lunar-search.js
+44 -29
View File
@@ -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 ? {
content: {
value: formattedContent,
matchLevel: "full"
}
} : null,
_snippetResult: formattedContent
? {
content: {
value: formattedContent,
matchLevel: 'full',
},
}
: 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);
return this.getHit(doc, formattedTitle)
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);
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>'
return this.getHit(doc, formattedTitle)
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>';
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.contentHitsRes = []
results.forEach(result => {
this.titleHitsRes = [];
this.contentHitsRes = [];
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]
hits.push(this.getContentHit(doc, position))
const position = metadata[i].content.position[0];
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/templates.js
+5 -5
View File
@@ -6,7 +6,7 @@ const footerPrefix = `${prefix}-footer`;
/* eslint-disable max-len */
const templates = {
suggestion: `
suggestion: `
<a class="${suggestionPrefix}
{{#isCategoryHeader}}${suggestionPrefix}__main{{/isCategoryHeader}}
{{#isSubCategoryHeader}}${suggestionPrefix}__secondary{{/isSubCategoryHeader}}
@@ -31,7 +31,7 @@ const templates = {
</div>
</a>
`,
suggestionSimple: `
suggestionSimple: `
<div class="${suggestionPrefix}
{{#isCategoryHeader}}${suggestionPrefix}__main{{/isCategoryHeader}}
{{#isSubCategoryHeader}}${suggestionPrefix}__secondary{{/isSubCategoryHeader}}
@@ -69,11 +69,11 @@ const templates = {
</div>
</div>
`,
footer: `
footer: `
<div class="${footerPrefix}">
</div>
`,
empty: `
empty: `
<div class="${suggestionPrefix}">
<div class="${suggestionPrefix}--wrapper">
<div class="${suggestionPrefix}--content ${suggestionPrefix}--no-results">
@@ -86,7 +86,7 @@ const templates = {
</div>
</div>
`,
searchBox: `
searchBox: `
<form novalidate="novalidate" onsubmit="return false;" class="searchbox">
<div role="search" class="searchbox__wrapper">
<input id="docsearch" type="search" name="search" placeholder="Search the docs" autocomplete="off" required="required" class="searchbox__input"/>
packages/artplayer-document/src/theme/SearchBar/lib/utils.js
+260 -264
View File
@@ -1,271 +1,267 @@
/* eslint-disable */
import $ from "autocomplete.js/zepto";
import $ from 'autocomplete.js/zepto';
const utils = {
/*
* Move the content of an object key one level higher.
* eg.
* {
* name: 'My name',
* hierarchy: {
* lvl0: 'Foo',
* lvl1: 'Bar'
* }
* }
* Will be converted to
* {
* name: 'My name',
* lvl0: 'Foo',
* lvl1: 'Bar'
* }
* @param {Object} object Main object
* @param {String} property Main object key to move up
* @return {Object}
* @throws Error when key is not an attribute of Object or is not an object itself
*/
mergeKeyWithParent(object, property) {
if (object[property] === undefined) {
return object;
}
if (typeof object[property] !== 'object') {
return object;
}
const newObject = $.extend({}, object, object[property]);
delete newObject[property];
return newObject;
},
/*
* Group all objects of a collection by the value of the specified attribute
* If the attribute is a string, use the lowercase form.
*
* eg.
* groupBy([
* {name: 'Tim', category: 'dev'},
* {name: 'Vincent', category: 'dev'},
* {name: 'Ben', category: 'sales'},
* {name: 'Jeremy', category: 'sales'},
* {name: 'AlexS', category: 'dev'},
* {name: 'AlexK', category: 'sales'}
* ], 'category');
* =>
* {
* 'devs': [
* {name: 'Tim', category: 'dev'},
* {name: 'Vincent', category: 'dev'},
* {name: 'AlexS', category: 'dev'}
* ],
* 'sales': [
* {name: 'Ben', category: 'sales'},
* {name: 'Jeremy', category: 'sales'},
* {name: 'AlexK', category: 'sales'}
* ]
* }
* @param {array} collection Array of objects to group
* @param {String} property The attribute on which apply the grouping
* @return {array}
* @throws Error when one of the element does not have the specified property
*/
groupBy(collection, property) {
const newCollection = {};
$.each(collection, (index, item) => {
if (item[property] === undefined) {
throw new Error(`[groupBy]: Object has no key ${property}`);
}
let key = item[property];
if (typeof key === 'string') {
key = key.toLowerCase();
}
// fix #171 the given data type of docsearch hits might be conflict with the properties of the native Object,
// such as the constructor, so we need to do this check.
if (!Object.prototype.hasOwnProperty.call(newCollection, key)) {
newCollection[key] = [];
}
newCollection[key].push(item);
});
return newCollection;
},
/*
* Return an array of all the values of the specified object
* eg.
* values({
* foo: 42,
* bar: true,
* baz: 'yep'
* })
* =>
* [42, true, yep]
* @param {object} object Object to extract values from
* @return {array}
*/
values(object) {
return Object.keys(object).map(key => object[key]);
},
/*
* Flattens an array
* eg.
* flatten([1, 2, [3, 4], [5, 6]])
* =>
* [1, 2, 3, 4, 5, 6]
* @param {array} array Array to flatten
* @return {array}
*/
flatten(array) {
const results = [];
array.forEach(value => {
if (!Array.isArray(value)) {
results.push(value);
return;
}
value.forEach(subvalue => {
results.push(subvalue);
});
});
return results;
},
/*
* Flatten all values of an object into an array, marking each first element of
* each group with a specific flag
* eg.
* flattenAndFlagFirst({
* 'devs': [
* {name: 'Tim', category: 'dev'},
* {name: 'Vincent', category: 'dev'},
* {name: 'AlexS', category: 'dev'}
* ],
* 'sales': [
* {name: 'Ben', category: 'sales'},
* {name: 'Jeremy', category: 'sales'},
* {name: 'AlexK', category: 'sales'}
* ]
* , 'isTop');
* =>
* [
* {name: 'Tim', category: 'dev', isTop: true},
* {name: 'Vincent', category: 'dev', isTop: false},
* {name: 'AlexS', category: 'dev', isTop: false},
* {name: 'Ben', category: 'sales', isTop: true},
* {name: 'Jeremy', category: 'sales', isTop: false},
* {name: 'AlexK', category: 'sales', isTop: false}
* ]
* @param {object} object Object to flatten
* @param {string} flag Flag to set to true on first element of each group
* @return {array}
*/
flattenAndFlagFirst(object, flag) {
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);
},
/*
* Removes all empty strings, null, false and undefined elements array
* eg.
* compact([42, false, null, undefined, '', [], 'foo']);
* =>
* [42, [], 'foo']
* @param {array} array Array to compact
* @return {array}
*/
compact(array) {
const results = [];
array.forEach(value => {
if (!value) {
return;
}
results.push(value);
});
return results;
},
/*
* Returns the highlighted value of the specified key in the specified object.
* If no highlighted value is available, will return the key value directly
* eg.
* getHighlightedValue({
* _highlightResult: {
* text: {
* value: '<mark>foo</mark>'
* }
* },
* text: 'foo'
* }, 'text');
* =>
* '<mark>foo</mark>'
* @param {object} object Hit object returned by the Algolia API
* @param {string} property Object key to look for
* @return {string}
**/
getHighlightedValue(object, property) {
if (
object._highlightResult &&
object._highlightResult.hierarchy_camel &&
object._highlightResult.hierarchy_camel[property] &&
object._highlightResult.hierarchy_camel[property].matchLevel &&
object._highlightResult.hierarchy_camel[property].matchLevel !== 'none' &&
object._highlightResult.hierarchy_camel[property].value
) {
return object._highlightResult.hierarchy_camel[property].value;
}
if (
object._highlightResult &&
object._highlightResult &&
object._highlightResult[property] &&
object._highlightResult[property].value
) {
return object._highlightResult[property].value;
}
return object[property];
},
/*
* Returns the snippeted value of the specified key in the specified object.
* If no highlighted value is available, will return the key value directly.
* Will add starting and ending ellipsis (…) if we detect that a sentence is
* incomplete
* eg.
* getSnippetedValue({
* _snippetResult: {
* text: {
* value: '<mark>This is an unfinished sentence</mark>'
* }
* },
* text: 'This is an unfinished sentence'
* }, 'text');
* =>
* '<mark>This is an unfinished sentence</mark>…'
* @param {object} object Hit object returned by the Algolia API
* @param {string} property Object key to look for
* @return {string}
**/
getSnippetedValue(object, property) {
if (
!object._snippetResult ||
!object._snippetResult[property] ||
!object._snippetResult[property].value
) {
return object[property];
}
let snippet = object._snippetResult[property].value;
/*
* Move the content of an object key one level higher.
* eg.
* {
* name: 'My name',
* hierarchy: {
* lvl0: 'Foo',
* lvl1: 'Bar'
* }
* }
* Will be converted to
* {
* name: 'My name',
* lvl0: 'Foo',
* lvl1: 'Bar'
* }
* @param {Object} object Main object
* @param {String} property Main object key to move up
* @return {Object}
* @throws Error when key is not an attribute of Object or is not an object itself
*/
mergeKeyWithParent(object, property) {
if (object[property] === undefined) {
return object;
}
if (typeof object[property] !== 'object') {
return object;
}
const newObject = $.extend({}, object, object[property]);
delete newObject[property];
return newObject;
},
/*
* Group all objects of a collection by the value of the specified attribute
* If the attribute is a string, use the lowercase form.
*
* eg.
* groupBy([
* {name: 'Tim', category: 'dev'},
* {name: 'Vincent', category: 'dev'},
* {name: 'Ben', category: 'sales'},
* {name: 'Jeremy', category: 'sales'},
* {name: 'AlexS', category: 'dev'},
* {name: 'AlexK', category: 'sales'}
* ], 'category');
* =>
* {
* 'devs': [
* {name: 'Tim', category: 'dev'},
* {name: 'Vincent', category: 'dev'},
* {name: 'AlexS', category: 'dev'}
* ],
* 'sales': [
* {name: 'Ben', category: 'sales'},
* {name: 'Jeremy', category: 'sales'},
* {name: 'AlexK', category: 'sales'}
* ]
* }
* @param {array} collection Array of objects to group
* @param {String} property The attribute on which apply the grouping
* @return {array}
* @throws Error when one of the element does not have the specified property
*/
groupBy(collection, property) {
const newCollection = {};
$.each(collection, (index, item) => {
if (item[property] === undefined) {
throw new Error(`[groupBy]: Object has no key ${property}`);
}
let key = item[property];
if (typeof key === 'string') {
key = key.toLowerCase();
}
// fix #171 the given data type of docsearch hits might be conflict with the properties of the native Object,
// such as the constructor, so we need to do this check.
if (!Object.prototype.hasOwnProperty.call(newCollection, key)) {
newCollection[key] = [];
}
newCollection[key].push(item);
});
return newCollection;
},
/*
* Return an array of all the values of the specified object
* eg.
* values({
* foo: 42,
* bar: true,
* baz: 'yep'
* })
* =>
* [42, true, yep]
* @param {object} object Object to extract values from
* @return {array}
*/
values(object) {
return Object.keys(object).map((key) => object[key]);
},
/*
* Flattens an array
* eg.
* flatten([1, 2, [3, 4], [5, 6]])
* =>
* [1, 2, 3, 4, 5, 6]
* @param {array} array Array to flatten
* @return {array}
*/
flatten(array) {
const results = [];
array.forEach((value) => {
if (!Array.isArray(value)) {
results.push(value);
return;
}
value.forEach((subvalue) => {
results.push(subvalue);
});
});
return results;
},
/*
* Flatten all values of an object into an array, marking each first element of
* each group with a specific flag
* eg.
* flattenAndFlagFirst({
* 'devs': [
* {name: 'Tim', category: 'dev'},
* {name: 'Vincent', category: 'dev'},
* {name: 'AlexS', category: 'dev'}
* ],
* 'sales': [
* {name: 'Ben', category: 'sales'},
* {name: 'Jeremy', category: 'sales'},
* {name: 'AlexK', category: 'sales'}
* ]
* , 'isTop');
* =>
* [
* {name: 'Tim', category: 'dev', isTop: true},
* {name: 'Vincent', category: 'dev', isTop: false},
* {name: 'AlexS', category: 'dev', isTop: false},
* {name: 'Ben', category: 'sales', isTop: true},
* {name: 'Jeremy', category: 'sales', isTop: false},
* {name: 'AlexK', category: 'sales', isTop: false}
* ]
* @param {object} object Object to flatten
* @param {string} flag Flag to set to true on first element of each group
* @return {array}
*/
flattenAndFlagFirst(object, flag) {
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);
},
/*
* Removes all empty strings, null, false and undefined elements array
* eg.
* compact([42, false, null, undefined, '', [], 'foo']);
* =>
* [42, [], 'foo']
* @param {array} array Array to compact
* @return {array}
*/
compact(array) {
const results = [];
array.forEach((value) => {
if (!value) {
return;
}
results.push(value);
});
return results;
},
/*
* Returns the highlighted value of the specified key in the specified object.
* If no highlighted value is available, will return the key value directly
* eg.
* getHighlightedValue({
* _highlightResult: {
* text: {
* value: '<mark>foo</mark>'
* }
* },
* text: 'foo'
* }, 'text');
* =>
* '<mark>foo</mark>'
* @param {object} object Hit object returned by the Algolia API
* @param {string} property Object key to look for
* @return {string}
**/
getHighlightedValue(object, property) {
if (
object._highlightResult &&
object._highlightResult.hierarchy_camel &&
object._highlightResult.hierarchy_camel[property] &&
object._highlightResult.hierarchy_camel[property].matchLevel &&
object._highlightResult.hierarchy_camel[property].matchLevel !== 'none' &&
object._highlightResult.hierarchy_camel[property].value
) {
return object._highlightResult.hierarchy_camel[property].value;
}
if (
object._highlightResult &&
object._highlightResult &&
object._highlightResult[property] &&
object._highlightResult[property].value
) {
return object._highlightResult[property].value;
}
return object[property];
},
/*
* Returns the snippeted value of the specified key in the specified object.
* If no highlighted value is available, will return the key value directly.
* Will add starting and ending ellipsis (…) if we detect that a sentence is
* incomplete
* eg.
* getSnippetedValue({
* _snippetResult: {
* text: {
* value: '<mark>This is an unfinished sentence</mark>'
* }
* },
* text: 'This is an unfinished sentence'
* }, 'text');
* =>
* '<mark>This is an unfinished sentence</mark>…'
* @param {object} object Hit object returned by the Algolia API
* @param {string} property Object key to look for
* @return {string}
**/
getSnippetedValue(object, property) {
if (!object._snippetResult || !object._snippetResult[property] || !object._snippetResult[property].value) {
return object[property];
}
let snippet = object._snippetResult[property].value;
if (snippet[0] !== snippet[0].toUpperCase()) {
snippet = `…${snippet}`;
}
if (['.', '!', '?'].indexOf(snippet[snippet.length - 1]) === -1) {
snippet = `${snippet}…`;
}
return snippet;
},
/*
* Deep clone an object.
* Note: This will not clone functions and dates
* @param {object} object Object to clone
* @return {object}
*/
deepClone(object) {
return JSON.parse(JSON.stringify(object));
},
if (snippet[0] !== snippet[0].toUpperCase()) {
snippet = `…${snippet}`;
}
if (['.', '!', '?'].indexOf(snippet[snippet.length - 1]) === -1) {
snippet = `${snippet}…`;
}
return snippet;
},
/*
* Deep clone an object.
* Note: This will not clone functions and dates
* @param {object} object Object to clone
* @return {object}
*/
deepClone(object) {
return JSON.parse(JSON.stringify(object));
},
};
export default utils;
packages/artplayer-document/src/theme/SearchBar/styles.css
+23 -23
View File
@@ -6,35 +6,35 @@
*/
.search-icon {
background-image: var(--ifm-navbar-search-input-icon);
height: auto;
width: 24px;
cursor: pointer;
padding: 8px;
line-height: 32px;
background-repeat: no-repeat;
background-position: center;
display: none;
background-image: var(--ifm-navbar-search-input-icon);
height: auto;
width: 24px;
cursor: pointer;
padding: 8px;
line-height: 32px;
background-repeat: no-repeat;
background-position: center;
display: none;
}
.search-icon-hidden {
visibility: hidden;
visibility: hidden;
}
@media (max-width: 360px) {
.search-bar {
width: 0 !important;
background: none !important;
padding: 0 !important;
transition: none !important;
}
.search-bar {
width: 0 !important;
background: none !important;
padding: 0 !important;
transition: none !important;
}
.search-bar-expanded {
width: 9rem !important;
}
.search-bar-expanded {
width: 9rem !important;
}
.search-icon {
display: inline;
vertical-align: sub;
}
.search-icon {
display: inline;
vertical-align: sub;
}
}
packages/artplayer-plugin-ads/package.json
+23 -23
View File
@@ -1,24 +1,24 @@
{
"license": "MIT",
"version": "1.0.6",
"name": "artplayer-plugin-ads",
"types": "types/artplayer-plugin-ads.d.ts",
"description": "Ads plugin for ArtPlayer",
"main": "dist/artplayer-plugin-ads.js",
"legacy": "dist/artplayer-plugin-ads.legacy.js",
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
"browserslist": "> 0.5%, last 2 versions, not dead",
"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"
]
}
"license": "MIT",
"version": "1.0.6",
"name": "artplayer-plugin-ads",
"types": "types/artplayer-plugin-ads.d.ts",
"description": "Ads plugin for ArtPlayer",
"main": "dist/artplayer-plugin-ads.js",
"legacy": "dist/artplayer-plugin-ads.legacy.js",
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
"browserslist": "> 0.5%, last 2 versions, not dead",
"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"
]
}
packages/artplayer-plugin-ads/src/style.less
+1 -1
View File
@@ -77,4 +77,4 @@
width: 100%;
height: 100%;
}
}
}
packages/artplayer-plugin-ads/types/artplayer-plugin-ads.d.ts
Vendored
+1 -1
View File
@@ -32,7 +32,7 @@ type Option = {
/**
* 视频广告是否默认静音
*/
muted?: boolean;
muted?: boolean;
};
type Ads = {
packages/artplayer-plugin-danmuku/package.json
+23 -23
View File
@@ -1,24 +1,24 @@
{
"license": "MIT",
"version": "4.4.11",
"name": "artplayer-plugin-danmuku",
"types": "types/artplayer-plugin-danmuku.d.ts",
"description": "Danmuku plugin for ArtPlayer",
"main": "dist/artplayer-plugin-danmuku.js",
"legacy": "dist/artplayer-plugin-danmuku.legacy.js",
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
"browserslist": "> 0.5%, last 2 versions, not dead",
"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"
]
}
"license": "MIT",
"version": "4.4.11",
"name": "artplayer-plugin-danmuku",
"types": "types/artplayer-plugin-danmuku.d.ts",
"description": "Danmuku plugin for ArtPlayer",
"main": "dist/artplayer-plugin-danmuku.js",
"legacy": "dist/artplayer-plugin-danmuku.legacy.js",
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
"browserslist": "> 0.5%, last 2 versions, not dead",
"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"
]
}
packages/artplayer-plugin-danmuku/src/style.less
+27 -24
View File
@@ -14,7 +14,9 @@
touch-action: manipulation;
-ms-high-contrast-adjust: none;
*, *::before, *::after {
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
@@ -50,7 +52,7 @@
width: 32px;
align-items: center;
justify-content: center;
.art-danmuku-style-panel {
display: none;
position: absolute;
@@ -59,24 +61,24 @@
bottom: 30px;
width: 200px;
padding-bottom: 10px;
.art-danmuku-style-panel-inner {
display: flex;
flex-direction: column;
padding: 10px 10px 0;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.9);
.art-danmuku-style-panel-title {
font-size: 13px;
margin-bottom: 10px;
}
.art-danmuku-style-panel-modes {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
.art-danmuku-style-panel-mode {
display: flex;
justify-content: center;
@@ -85,28 +87,28 @@
cursor: pointer;
color: #fff;
border: 1px solid #fff;
&.art-current {
background-color: #00a1d6;
border: 1px solid #00a1d6;
}
}
}
.art-danmuku-style-panel-colors {
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-bottom: 10px;
justify-content: space-between;
.art-danmuku-style-panel-color {
cursor: pointer;
width: 20px;
height: 20px;
border: 1px solid #fff;
&.art-current{
&.art-current {
position: relative;
box-shadow: 0 0 2px #fff;
&::before {
@@ -122,25 +124,24 @@
}
}
}
}
}
}
&:hover .art-danmuku-style-panel{
&:hover .art-danmuku-style-panel {
display: flex;
}
.art-icon {
opacity: 0.75;
cursor: pointer;
&:hover {
opacity: 1;
}
}
}
.art-danmuku-input {
flex: 1;
display: flex;
@@ -150,8 +151,9 @@
width: 100%;
color: #ffffff;
background-color: transparent;
&::placeholder, &::-webkit-input-placeholder {
&::placeholder,
&::-webkit-input-placeholder {
color: rgb(255 255 255 / 50%);
}
}
@@ -196,15 +198,16 @@
.art-danmuku-left {
border: 1px solid #dadada;
background: #f4f4f4;
.art-danmuku-style .art-icon svg {
fill: #666;
}
.art-danmuku-input {
color: #000000;
&::placeholder, &::-webkit-input-placeholder {
&::placeholder,
&::-webkit-input-placeholder {
color: rgb(0 0 0 / 50%);
}
}
@@ -220,4 +223,4 @@
right: 0;
bottom: -40px;
width: 100%;
}
}
packages/artplayer-plugin-hls-quality/package.json
+23 -23
View File
@@ -1,24 +1,24 @@
{
"license": "MIT",
"version": "1.0.0",
"name": "artplayer-plugin-hls-quality",
"types": "types/artplayer-plugin-hls-quality.d.ts",
"description": "Iframe plugin for ArtPlayer",
"main": "dist/artplayer-plugin-hls-quality.js",
"legacy": "dist/artplayer-plugin-hls-quality.legacy.js",
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
"browserslist": "> 0.5%, last 2 versions, not dead",
"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"
]
}
"license": "MIT",
"version": "1.0.0",
"name": "artplayer-plugin-hls-quality",
"types": "types/artplayer-plugin-hls-quality.d.ts",
"description": "Iframe plugin for ArtPlayer",
"main": "dist/artplayer-plugin-hls-quality.js",
"legacy": "dist/artplayer-plugin-hls-quality.legacy.js",
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
"browserslist": "> 0.5%, last 2 versions, not dead",
"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"
]
}
packages/artplayer-plugin-iframe/package.json
+23 -23
View File
@@ -1,24 +1,24 @@
{
"license": "MIT",
"version": "1.0.0",
"name": "artplayer-plugin-iframe",
"types": "types/artplayer-plugin-iframe.d.ts",
"description": "Iframe plugin for ArtPlayer",
"main": "dist/artplayer-plugin-iframe.js",
"legacy": "dist/artplayer-plugin-iframe.legacy.js",
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
"browserslist": "> 0.5%, last 2 versions, not dead",
"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"
]
}
"license": "MIT",
"version": "1.0.0",
"name": "artplayer-plugin-iframe",
"types": "types/artplayer-plugin-iframe.d.ts",
"description": "Iframe plugin for ArtPlayer",
"main": "dist/artplayer-plugin-iframe.js",
"legacy": "dist/artplayer-plugin-iframe.legacy.js",
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
"browserslist": "> 0.5%, last 2 versions, not dead",
"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"
]
}
packages/artplayer-template/next.js/.eslintrc.json
+1 -1
View File
@@ -1,3 +1,3 @@
{
"extends": "next/core-web-vitals"
"extends": "next/core-web-vitals"
}
packages/artplayer-template/next.js/README.md
+2 -2
View File
@@ -22,8 +22,8 @@ The `pages/api` directory is mapped to `/api/*`. Files in this directory are tre
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
packages/artplayer-template/next.js/next.config.js
+3 -3
View File
@@ -1,6 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
}
reactStrictMode: true,
};
module.exports = nextConfig
module.exports = nextConfig;
packages/artplayer-template/next.js/package.json
+19 -19
View File
@@ -1,21 +1,21 @@
{
"name": "next.js",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"artplayer": "latest",
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0"
},
"devDependencies": {
"eslint": "8.14.0",
"eslint-config-next": "12.1.6"
}
"name": "next.js",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"artplayer": "latest",
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0"
},
"devDependencies": {
"eslint": "8.14.0",
"eslint-config-next": "12.1.6"
}
}
packages/artplayer-template/next.js/pages/_app.js
+3 -3
View File
@@ -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 -1
View File
@@ -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 -61
View File
@@ -1,116 +1,116 @@
.container {
padding: 0 2rem;
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea;
justify-content: center;
align-items: center;
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea;
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a {
color: #0070f3;
text-decoration: none;
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
text-align: center;
}
.description {
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New,
monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
}
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
color: #0070f3;
border-color: #0070f3;
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
margin-left: 0.5rem;
height: 1em;
margin-left: 0.5rem;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
.grid {
width: 100%;
flex-direction: column;
}
}
packages/artplayer-template/next.js/styles/globals.css
+7 -7
View File
@@ -1,16 +1,16 @@
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
box-sizing: border-box;
}
packages/artplayer-template/nuxt.js/Artplayer.vue
+1 -1
View File
@@ -33,4 +33,4 @@ export default {
}
},
};
</script>
</script>
packages/artplayer-template/nuxt.js/app.vue
+1 -1
View File
@@ -28,4 +28,4 @@ export default {
},
},
};
</script>
</script>
packages/artplayer-template/nuxt.js/nuxt.config.ts
+2 -4
View File
@@ -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/nuxt.js/package.json
+13 -13
View File
@@ -1,15 +1,15 @@
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview"
},
"devDependencies": {
"nuxt": "3.0.0-rc.1"
},
"dependencies": {
"artplayer": "latest"
}
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview"
},
"devDependencies": {
"nuxt": "3.0.0-rc.1"
},
"dependencies": {
"artplayer": "latest"
}
}
packages/artplayer-template/nuxt.js/tsconfig.json
+2 -2
View File
@@ -1,4 +1,4 @@
{
// https://v3.nuxtjs.org/concepts/typescript
"extends": "./.nuxt/tsconfig.json"
// https://v3.nuxtjs.org/concepts/typescript
"extends": "./.nuxt/tsconfig.json"
}
packages/artplayer-template/react.js/package.json
+37 -37
View File
@@ -1,39 +1,39 @@
{
"name": "react.js",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"artplayer": "latest",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
"name": "react.js",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"artplayer": "latest",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
packages/artplayer-template/react.js/public/index.html
+17 -21
View File
@@ -1,21 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<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
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
<head>
<meta charset="utf-8" />
<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 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
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +21,12 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
@@ -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/public/manifest.json
+23 -23
View File
@@ -1,25 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
packages/artplayer-template/react.js/src/App.css
+21 -21
View File
@@ -1,38 +1,38 @@
.App {
text-align: center;
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
packages/artplayer-template/react.js/src/App.js
+18 -18
View File
@@ -1,23 +1,23 @@
import React from "react";
import Artplayer from "./ArtPlayer";
import React from 'react';
import Artplayer from './ArtPlayer';
function App() {
return (
<div>
<Artplayer
option={{
url: "https://artplayer.org/assets/sample/video.mp4",
autoSize: true,
}}
style={{
width: "600px",
height: "400px",
margin: "60px auto 0",
}}
getInstance={(art) => console.log(art)}
/>
</div>
);
return (
<div>
<Artplayer
option={{
url: 'https://artplayer.org/assets/sample/video.mp4',
autoSize: true,
}}
style={{
width: '600px',
height: '400px',
margin: '60px auto 0',
}}
getInstance={(art) => console.log(art)}
/>
</div>
);
}
export default App;
packages/artplayer-template/react.js/src/App.test.js
+3 -3
View File
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
packages/artplayer-template/react.js/src/index.css
+6 -8
View File
@@ -1,13 +1,11 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
packages/artplayer-template/react.js/src/index.js
+3 -3
View File
@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
<React.StrictMode>
<App />
</React.StrictMode>,
);
// If you want to start measuring performance in your app, pass a function
packages/artplayer-template/react.js/src/reportWebVitals.js
+10 -10
View File
@@ -1,13 +1,13 @@
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
const reportWebVitals = (onPerfEntry) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
packages/artplayer-template/vue2.js/README.md
+5
View File
@@ -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
+2 -4
View File
@@ -1,5 +1,3 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
presets: ['@vue/cli-plugin-babel/preset'],
};
packages/artplayer-template/vue2.js/jsconfig.json
+10 -17
View File
@@ -1,19 +1,12 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": ["src/*"]
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
}
}
packages/artplayer-template/vue2.js/package.json
+40 -40
View File
@@ -1,44 +1,44 @@
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"artplayer": "^4.4.7",
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
"name": "hello-world",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
"dependencies": {
"artplayer": "^4.4.7",
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
packages/artplayer-template/vue2.js/public/index.html
+17 -14
View File
@@ -1,17 +1,20 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<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>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<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
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
packages/artplayer-template/vue2.js/src/App.vue
+1 -1
View File
@@ -28,4 +28,4 @@ export default {
},
},
};
</script>
</script>
packages/artplayer-template/vue2.js/src/Artplayer.vue
+1 -1
View File
@@ -33,4 +33,4 @@ export default {
}
},
};
</script>
</script>
packages/artplayer-template/vue2.js/src/components/HelloWorld.vue
+58 -40
View File
@@ -1,58 +1,76 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
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><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>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<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://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>
</div>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
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>
<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>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<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://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>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
name: 'HelloWorld',
props: {
msg: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
color: #42b983;
}
</style>
packages/artplayer-template/vue2.js/src/main.js
+5 -5
View File
@@ -1,8 +1,8 @@
import Vue from 'vue'
import App from './App.vue'
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app')
render: (h) => h(App),
}).$mount('#app');
packages/artplayer-template/vue3.js/index.html
+10 -10
View File
@@ -1,13 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
packages/artplayer-template/vue3.js/package.json
+15 -15
View File
@@ -1,17 +1,17 @@
{
"name": "vue.js",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 5050"
},
"dependencies": {
"artplayer": "latest",
"vue": "^3.2.33"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.1",
"vite": "^2.9.5"
}
"name": "vue.js",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 5050"
},
"dependencies": {
"artplayer": "latest",
"vue": "^3.2.33"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.1",
"vite": "^2.9.5"
}
}
packages/artplayer-template/vue3.js/src/App.vue
+1 -1
View File
@@ -28,4 +28,4 @@ export default {
},
},
};
</script>
</script>
packages/artplayer-template/vue3.js/src/Artplayer.vue
+1 -1
View File
@@ -33,4 +33,4 @@ export default {
}
},
};
</script>
</script>
packages/artplayer-template/vue3.js/src/assets/base.css
+47 -47
View File
@@ -1,74 +1,74 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
position: relative;
font-weight: normal;
box-sizing: border-box;
margin: 0;
position: relative;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
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,
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
color: var(--color-text);
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, Cantarell, 'Fira Sans',
'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
packages/artplayer-template/vue3.js/src/components/HelloWorld.vue
+22 -22
View File
@@ -1,43 +1,43 @@
<script setup>
defineProps({
msg: {
type: String,
required: true
}
})
msg: {
type: String,
required: true,
},
});
</script>
<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<a target="_blank" href="https://vitejs.dev/">Vite</a> +
<a target="_blank" href="https://vuejs.org/">Vue 3</a>.
</h3>
</div>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<a target="_blank" href="https://vitejs.dev/">Vite</a> +
<a target="_blank" href="https://vuejs.org/">Vue 3</a>.
</h3>
</div>
</template>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
top: -10px;
font-weight: 500;
font-size: 2.6rem;
top: -10px;
}
h3 {
font-size: 1.2rem;
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>
packages/artplayer-template/vue3.js/src/components/TheWelcome.vue
+65 -68
View File
@@ -1,84 +1,81 @@
<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
import WelcomeItem from './WelcomeItem.vue';
import DocumentationIcon from './icons/IconDocumentation.vue';
import ToolingIcon from './icons/IconTooling.vue';
import EcosystemIcon from './icons/IconEcosystem.vue';
import CommunityIcon from './icons/IconCommunity.vue';
import SupportIcon from './icons/IconSupport.vue';
</script>
<template>
<WelcomeItem>
<template #icon>
<DocumentationIcon />
</template>
<template #heading>Documentation</template>
<WelcomeItem>
<template #icon>
<DocumentationIcon />
</template>
<template #heading>Documentation</template>
Vue’s
<a target="_blank" href="https://vuejs.org/">official documentation</a>
provides you with all information you need to get started.
</WelcomeItem>
Vue’s
<a target="_blank" href="https://vuejs.org/">official documentation</a>
provides you with all information you need to get started.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<ToolingIcon />
</template>
<template #heading>Tooling</template>
<WelcomeItem>
<template #icon>
<ToolingIcon />
</template>
<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
setup is <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
your components and web pages, check out
<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
>.
This project is served and bundled with
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE setup is
<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 your components
and web pages, check out <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
>.
<br />
<br />
More instructions are available in <code>README.md</code>.
</WelcomeItem>
More instructions are available in <code>README.md</code>.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<EcosystemIcon />
</template>
<template #heading>Ecosystem</template>
<WelcomeItem>
<template #icon>
<EcosystemIcon />
</template>
<template #heading>Ecosystem</template>
Get official tools and libraries for your project:
<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
resources, we suggest paying
<a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
a visit.
</WelcomeItem>
Get official tools and libraries for your project:
<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 resources, we
suggest paying
<a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
a visit.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<CommunityIcon />
</template>
<template #heading>Community</template>
<WelcomeItem>
<template #icon>
<CommunityIcon />
</template>
<template #heading>Community</template>
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>.
You should also subscribe to
<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>
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>. You should also
subscribe to <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>
<WelcomeItem>
<template #icon>
<SupportIcon />
</template>
<template #heading>Support Vue</template>
<WelcomeItem>
<template #icon>
<SupportIcon />
</template>
<template #heading>Support Vue</template>
As an independent project, Vue relies on community backing for its sustainability. You can help
us by
<a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>.
</WelcomeItem>
As an independent project, Vue relies on community backing for its sustainability. You can help us by
<a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>.
</WelcomeItem>
</template>
packages/artplayer-template/vue3.js/src/components/WelcomeItem.vue
+60 -60
View File
@@ -1,86 +1,86 @@
<template>
<div class="item">
<i>
<slot name="icon"></slot>
</i>
<div class="details">
<h3>
<slot name="heading"></slot>
</h3>
<slot></slot>
<div class="item">
<i>
<slot name="icon"></slot>
</i>
<div class="details">
<h3>
<slot name="heading"></slot>
</h3>
<slot></slot>
</div>
</div>
</div>
</template>
<style scoped>
.item {
margin-top: 2rem;
display: flex;
margin-top: 2rem;
display: flex;
}
.details {
flex: 1;
margin-left: 1rem;
flex: 1;
margin-left: 1rem;
}
i {
display: flex;
place-items: center;
place-content: center;
width: 32px;
height: 32px;
display: flex;
place-items: center;
place-content: center;
width: 32px;
height: 32px;
color: var(--color-text);
color: var(--color-text);
}
h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.4rem;
color: var(--color-heading);
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.4rem;
color: var(--color-heading);
}
@media (min-width: 1024px) {
.item {
margin-top: 0;
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
}
.item {
margin-top: 0;
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
}
i {
top: calc(50% - 25px);
left: -26px;
position: absolute;
border: 1px solid var(--color-border);
background: var(--color-background);
border-radius: 8px;
width: 50px;
height: 50px;
}
i {
top: calc(50% - 25px);
left: -26px;
position: absolute;
border: 1px solid var(--color-border);
background: var(--color-background);
border-radius: 8px;
width: 50px;
height: 50px;
}
.item:before {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
bottom: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:before {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
bottom: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:after {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
top: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:after {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
top: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:first-of-type:before {
display: none;
}
.item:first-of-type:before {
display: none;
}
.item:last-of-type:after {
display: none;
}
.item:last-of-type:after {
display: none;
}
}
</style>
packages/artplayer-template/vue3.js/src/components/icons/IconCommunity.vue
+5 -5
View File
@@ -1,7 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
/>
</svg>
</template>
packages/artplayer-template/vue3.js/src/components/icons/IconDocumentation.vue
+5 -5
View File
@@ -1,7 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
<path
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
<path
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
/>
</svg>
</template>
packages/artplayer-template/vue3.js/src/components/icons/IconEcosystem.vue
+5 -5
View File
@@ -1,7 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
<path
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
<path
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
/>
</svg>
</template>
packages/artplayer-template/vue3.js/src/components/icons/IconSupport.vue
+5 -5
View File
@@ -1,7 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
/>
</svg>
</template>
packages/artplayer-template/vue3.js/src/components/icons/IconTooling.vue
+16 -16
View File
@@ -1,19 +1,19 @@
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--mdi"
width="24"
height="24"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
fill="currentColor"
></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--mdi"
width="24"
height="24"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
fill="currentColor"
></path>
</svg>
</template>
packages/artplayer-template/vue3.js/src/main.js
+3 -3
View File
@@ -1,4 +1,4 @@
import { createApp } from 'vue'
import App from './App.vue'
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app')
createApp(App).mount('#app');
packages/artplayer-template/vue3.js/vite.config.js
+10 -10
View File
@@ -1,14 +1,14 @@
import { fileURLToPath, URL } from 'url'
import { fileURLToPath, URL } from 'url';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
});
packages/artplayer-tool-thumbnail/package.json
+22 -22
View File
@@ -1,23 +1,23 @@
{
"license": "MIT",
"version": "4.3.12",
"name": "artplayer-tool-thumbnail",
"description": "Thumbnail tool for ArtPlayer",
"main": "dist/artplayer-tool-thumbnail.js",
"legacy": "dist/artplayer-tool-thumbnail.legacy.js",
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
"browserslist": "> 0.5%, last 2 versions, not dead",
"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"
]
}
"license": "MIT",
"version": "4.3.12",
"name": "artplayer-tool-thumbnail",
"description": "Thumbnail tool for ArtPlayer",
"main": "dist/artplayer-tool-thumbnail.js",
"legacy": "dist/artplayer-tool-thumbnail.legacy.js",
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
"browserslist": "> 0.5%, last 2 versions, not dead",
"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"
]
}
packages/artplayer-tool-thumbnail/src/utils.js
+2 -2
View File
@@ -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) {
@@ -14,4 +14,4 @@ export function getFileName(name) {
export function clamp(num, a, b) {
return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
}
}
packages/artplayer/README.md
+1
View File
@@ -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
+22 -28
View File
@@ -30,13 +30,7 @@ export default {
'videoTracks',
'volume',
],
methods: [
'addTextTrack',
'canPlayType',
'load',
'play',
'pause'
],
methods: ['addTextTrack', 'canPlayType', 'load', 'play', 'pause'],
events: [
'abort',
'canplay',
@@ -62,26 +56,26 @@ export default {
'waiting',
],
prototypes: [
"width",
"height",
"videoWidth",
"videoHeight",
"poster",
"webkitDecodedFrameCount",
"webkitDroppedFrameCount",
"playsInline",
"webkitSupportsFullscreen",
"webkitDisplayingFullscreen",
"onenterpictureinpicture",
"onleavepictureinpicture",
"disablePictureInPicture",
"cancelVideoFrameCallback",
"requestVideoFrameCallback",
"getVideoPlaybackQuality",
"requestPictureInPicture",
"webkitEnterFullScreen",
"webkitEnterFullscreen",
"webkitExitFullScreen",
"webkitExitFullscreen",
'width',
'height',
'videoWidth',
'videoHeight',
'poster',
'webkitDecodedFrameCount',
'webkitDroppedFrameCount',
'playsInline',
'webkitSupportsFullscreen',
'webkitDisplayingFullscreen',
'onenterpictureinpicture',
'onleavepictureinpicture',
'disablePictureInPicture',
'cancelVideoFrameCallback',
'requestVideoFrameCallback',
'getVideoPlaybackQuality',
'requestPictureInPicture',
'webkitEnterFullScreen',
'webkitEnterFullscreen',
'webkitExitFullScreen',
'webkitExitFullscreen',
],
};
packages/artplayer/src/contextmenu/close.js
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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/i18n/cs.json
+1 -1
View File
@@ -35,4 +35,4 @@
"Jump Play": "Hra na skok",
"AirPlay": "AirPlay",
"AirPlay Not Available": "AirPlay není k dispozici"
}
}
packages/artplayer/src/i18n/es.json
+1 -1
View File
@@ -35,4 +35,4 @@
"Jump Play": "Saltar",
"AirPlay": "AirPlay",
"AirPlay Not Available": "AirPlay no disponible"
}
}
packages/artplayer/src/i18n/fa.json
+1 -1
View File
@@ -35,4 +35,4 @@
"Jump Play": "جامپ پلی",
"AirPlay": "ایر پلی",
"AirPlay Not Available": "عدم پشتیبانی از ایرپلی"
}
}
packages/artplayer/src/i18n/pl.json
+1 -1
View File
@@ -35,4 +35,4 @@
"Jump Play": "Skocz do gry",
"AirPlay": "AirPlay",
"AirPlay Not Available": "AirPlay nie jest dostępny"
}
}
packages/artplayer/src/i18n/zh-cn.json
+1 -1
View File
@@ -35,4 +35,4 @@
"Jump Play": "跳转播放",
"AirPlay": "隔空播放",
"AirPlay Not Available": "隔空播放不可用"
}
}
packages/artplayer/src/i18n/zh-tw.json
+1 -1
View File
@@ -35,4 +35,4 @@
"Jump Play": "跳轉播放",
"AirPlay": "隔空播放",
"AirPlay Not Available": "隔空播放不可用"
}
}
packages/artplayer/src/style/artplayer.less
+4 -2
View File
@@ -19,7 +19,9 @@
touch-action: manipulation;
-ms-high-contrast-adjust: none;
*, *::before, *::after {
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
@@ -43,7 +45,7 @@
justify-content: center;
align-items: center;
line-height: 1.5;
svg {
fill: #fff;
}
packages/artplayer/src/style/autoSize.less
+1 -1
View File
@@ -6,4 +6,4 @@
.art-video-player {
transition: all 0.2s ease;
}
}
}
packages/artplayer/src/style/flip.less
+2 -2
View File
@@ -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/style/hint.less
+584 -437
View File
File diff suppressed because it is too large. Load diff
packages/artplayer/src/style/index.less
+1 -1
View File
@@ -19,4 +19,4 @@
@import './flip.less';
@import './plugins.less';
@import './selector.less';
@import './hint.less';
@import './hint.less';
packages/artplayer/src/style/layers.less
+2 -2
View File
@@ -10,8 +10,8 @@
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
pointer-events: none;
.art-layer {
pointer-events: auto;
}
packages/artplayer/src/utils/component.js
+11 -1
View File
@@ -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 -1
View File
@@ -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
+3 -8
View File
@@ -1,12 +1,7 @@
{
"include": [
"types/*"
],
"include": ["types/*"],
"compilerOptions": {
"lib": [
"es2018",
"dom"
],
"lib": ["es2018", "dom"],
"strict": true
}
}
}
packages/artplayer/types/config.d.ts
Vendored
+1 -1
View File
@@ -78,4 +78,4 @@ export type Config = {
'webkitExitFullScreen',
'webkitExitFullscreen',
];
};
};