Complete the initial version v2.0.0, write usage documents and typescript type declarations

master
lgf 3 years ago
parent e4c0b66515
commit 0b874bea67
  1. 168
      README.md
  2. 17
      example/src/app.tsx
  3. 2
      example/src/index.html
  4. 23
      package.json
  5. 2
      src/core/config/index.ts
  6. 6
      src/core/controls/index.scss
  7. 18
      src/core/controls/index.tsx
  8. 17
      src/core/controls/monitor.tsx
  9. 2
      src/core/controls/set.tsx
  10. 2
      src/core/controls/volume.tsx
  11. 1
      src/core/index.scss
  12. 14
      src/icons/svg/closeFullScreen.svg
  13. 15
      src/icons/svg/closeWebFullscreen.svg
  14. 15
      src/icons/svg/fullScreen.svg
  15. 15
      src/icons/svg/inPicture.svg
  16. 15
      src/icons/svg/mute.svg
  17. 15
      src/icons/svg/pause.svg
  18. 15
      src/icons/svg/player.svg
  19. 13
      src/icons/svg/screenshots.svg
  20. 16
      src/icons/svg/set.svg
  21. 15
      src/icons/svg/volume.svg
  22. 15
      src/icons/svg/webFullscreen.svg
  23. 193
      src/index.d.ts
  24. 6
      src/index.ts
  25. 166
      zh.md

@ -0,0 +1,168 @@
<p align="center">
<img src="https://qiniu.qyhever.com/16296253101982eb82305cfc3%E6%90%9C%E7%8B%97%E6%88%AA%E5%9B%BE20210822173735.png">
</p>
<h1 align="center">JoL-player</h1>
<p align="center">Simple, beautiful and powerful react player</p>
<p align="center">
<a href="https://github.com/microsoft/TypeScript">
<img src="https://img.shields.io/badge/typescript-4.4.2-brightgreen.svg" alt="license">
</a>
<a href="https://github.com/facebook/react">
<img src="https://img.shields.io/badge/react-17.0.1-brightgreen.svg" alt="react">
</a>
</p>
English | [简体中文](./zh.md)
## ✨ Characteristics
- 📦 High-quality React components out of the box.
- 🛡 Use TypeScript to develop, provide a complete type definition file.
- 🌍 Internationalized language support.
- 🎨 Themes, components, customization capabilities.
- :facepunch: Powerful API and callback function
- :zap: Small size, 80kb
## 📦 Install
```bash
npm install jol-player --save
```
## 🔨 Example
```tsx
import JoLPlayer from "jol-player";
const App = () => (
<>
<JoLPlayer
option={{
videoSrc:"https://x.com/a.mp4",
width: 750,
height: 420,
}}
/>
</>
);
```
:point_right:[demo case](https://codesandbox.io/s/inspiring-hawking-g5ukb?file=/src/App.tsx)
## :blue_book: Documentation
#### Properties/Configuration Items
| Parameter | Description | type | Default value |
| ------------------- | ------------------------------------------------------------ | ----------------- | ------------- |
| width | The width of the video container (required) | `number` | required |
| height | The height of the video container (required) | `number` | required |
| videoSrc | Video address (required) | `string` | required |
| theme | theme | `string` | \#ffb821 |
| poster | Video cover image | `string` | - |
| setEndPlayContent | Customize what is displayed at the end of the video | `React.ReactNode` | - |
| setBufferContent | Custom video buffer loading component | `React.ReactNode` | - |
| pausePlacement | The position of the pause button | `bottomRight` | `center` |
| hideMouseTime | How many milliseconds, without any operation, hide the mouse and controller/ms | `number` | 2000 |
| isShowMultiple | Whether to display the multiplier function | `boolean` | true |
| isShowSet | Whether to display the setting function | `boolean` | true |
| isShowScreenshot | Whether to display the screenshot function | `boolean` | true |
| isShowPicture | Whether to show picture-in-picture | `boolean` | true |
| isShowWebFullScreen | Whether to display the full screen of the webpage | `boolean` | true |
| language | Language | `zh` | `en` |
#### Method
| Name | Description | type |
| ----------- | -------------------------------------------------- | ----------------------- |
| load | Reload | () => void |
| pause | Pause | () => void |
| play | Start playing | () => void |
| setVolume | Set the volume, [0-100] | (par:`number` ) => void |
| seek | Set the playback position of the specified video/s | (par:`number` ) => void |
| setVideoSrc | Set the address to play the video src | (par:`string` ) => void |
`Hint:`The above method requires the help of`ref`Can call,as:xxx.current.load()
:point_right:[For details, please refer to the demo case](https://codesandbox.io/s/inspiring-hawking-g5ukb?file=/src/App.tsx)
#### Callback function
```tsx
export interface videoAttributes<T = number, K = boolean> {
/**
* @description Whether to play
*/
isPlay: K;
/**
* @description Current time/s
*/
currentTime: T;
/**
* @description Total time
*/
duration: T;
/**
* @description Cache duration/s
*/
bufferedTime: T;
/**
* @description Whether to open picture-in-picture
*/
isPictureinpicture: K;
/**
* @description Volume
*/
volume: T;
/**
* @description Video playback multiple
*/
multiple: T;
/**
* @description Whether to end
*/
isEndEd: K;
/**
* @description Wrong
*/
error: null | T;
}
```
| Name | Description | type |
| ------------------- | ----------------------------------------------- | ---------------------------- |
| onProgressMouseDown | Press and hold the slide bar, drag the callback | (e: videoAttributes) => void |
| onProgressMouseUp | Slide bar press and release callback | (e: videoAttributes) => void |
| onPlay | Video start playing callback | (e: videoAttributes) => void |
| onPause | Callback when the video is paused | (e: videoAttributes) => void |
| onTimeChange | Video is playing, time change callback | (e: videoAttributes) => void |
| onEndEd | Callback when the video ends | (e: videoAttributes) => void |
| onvolumechange | Callback when the volume changes | (e: videoAttributes) => void |
| onError | Video playback failed callback | () => void |
## :muscle:Later version
- [ ] Add shortcut key function
- [ ] Add video definition selection list
- [ ] Increase the animation effects of pause, play, and play area
- [ ] Add auto play function
## :rose:Praise
If you think this project is helpful to you, you can give the author a like, the author is very grateful: blush::blush::rose:
## :european_castle:Ecosphere
1. [ant-simple-pro](https://github.com/lgf196/ant-simple-pro)One support[vue3.0](https://github.com/vuejs/vue),[react](https://github.com/facebook/react),[angular](https://github.com/angular/angular),[typescript](https://github.com/microsoft/TypeScript)Front-end solutions for middle-end platforms supported by multiple frameworks.
2. [ant-simple-draw](https://github.com/lgf196/ant-simple-draw)An online graphic editor, commonly used to express business processes, etc.
3. [h5-Dooring](https://github.com/MrXujiang/h5-Dooring) Make H5 production as simple as building blocks, easily build H5 pages, H5 websites, PC-side websites, and visual design
[MIT](https://github.com/lgf196/ant-simple-pro/blob/master/LICENSE)
Copyright (c) 2021-present LiGuoFeng

@ -1,18 +1,15 @@
import React from "react"; import React from 'react';
import ReactDOM from "react-dom"; import ReactDOM from 'react-dom';
import App from "../../src/index"; import App from '../../src/index';
ReactDOM.render( ReactDOM.render(
<App <App
option={{ option={{
videoSrc: videoSrc: 'https://qiniu.qyhever.com/162962488432086ba29652658echrome.mp4',
"https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4",
width: 750, width: 750,
height: 420, height: 420,
theme: "#00D3FF", poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG',
poster: language: 'zh',
"https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG",
language: "en",
}} }}
/>, />,
document.getElementById("root") document.getElementById('root'),
); );

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>qier player page</title> <title>Jol-player</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

@ -1,32 +1,31 @@
{ {
"name": " JoL-player", "name": "jol-player",
"version": "1.0.0", "version": "2.0.0",
"description": "A multifunctional and beautiful React-based web video player.", "description": "简洁,美观,功能强大的react播放器,simple and beautiful, powerful react player",
"main": "dist/index.js", "main": "index.js",
"scripts": { "scripts": {
"build": "webpack --config ./build/webpack.prod.config.js", "build": "webpack --config ./build/webpack.prod.config.js",
"start": "webpack-dev-server --inline --config ./build/webpack.dev.config.js" "start": "webpack-dev-server --inline --config ./build/webpack.dev.config.js"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/vortesnail/Qier.git" "url": "git+https://github.com/lgf196/JoL-player.git"
}, },
"keywords": [ "keywords": [
"vortesnail", "lgf",
"qier", "react-video",
"video-player",
"video", "video",
"player", "player",
"react", "react",
"react-components", "react-components",
"html5-video-player" "JoL-player"
], ],
"author": "vortesnail", "author": "lgf",
"license": "MIT", "license": "MIT",
"bugs": { "bugs": {
"url": "https://github.com/vortesnail/Qier/issues" "url": "https://github.com/lgf196/JoL-player/issues"
}, },
"homepage": "https://github.com/vortesnail/Qier#readme", "homepage": "https://github.com/lgf196/JoL-player",
"devDependencies": { "devDependencies": {
"@babel/core": "^7.6.4", "@babel/core": "^7.6.4",
"@babel/preset-env": "^7.6.3", "@babel/preset-env": "^7.6.3",

@ -7,7 +7,7 @@ export const multipleList = [
{ id: 2, name: '2.0x' }, { id: 2, name: '2.0x' },
]; ];
export const defaultTheme: string = 'blue'; export const defaultTheme: string = '#ffb821';
export const defaultVolume: number = 60; export const defaultVolume: number = 60;

@ -1,8 +1,8 @@
@import "src/assets/css/mixin.scss"; @import 'src/assets/css/mixin.scss';
.clientFullScreen { .clientFullScreen {
@include wh(auto !important, auto !important); @include wh(auto !important, auto !important);
@include position(fixed !important, 0, 0, 0, 0); @include position(fixed !important, 0, 0, 0, 0);
z-index: 100000; z-index: 100000 !important;
} }
.JoL-controls-container { .JoL-controls-container {
padding: 0 5px; padding: 0 5px;
@ -18,7 +18,7 @@
cursor: default; cursor: default;
} }
&:after { &:after {
content: ""; content: '';
@include wh(calc(100% + 26px), 100%); @include wh(calc(100% + 26px), 100%);
@include position(absolute, auto, auto, 0, 50%); @include position(absolute, auto, auto, 0, 50%);
z-index: -1; z-index: -1;

@ -270,7 +270,8 @@ const Index: FC<{ setIsscreenshot: Function; setScreenshotLoading: Function }> =
title={il8n(propsAttributes!.language || defaultLanguage, 'screenshots')} title={il8n(propsAttributes!.language || defaultLanguage, 'screenshots')}
icon={ icon={
<Broadcast <Broadcast
iconClass="screenshot" fontSize="20px"
iconClass="screenshots"
className="hover-icon-animate" className="hover-icon-animate"
fill="#fff" fill="#fff"
onClick={screenshot} onClick={screenshot}
@ -287,7 +288,7 @@ const Index: FC<{ setIsscreenshot: Function; setScreenshotLoading: Function }> =
)} )}
icon={ icon={
<Broadcast <Broadcast
iconClass="fullScreen" iconClass="inPicture"
fill="#fff" fill="#fff"
className="hover-icon-animate" className="hover-icon-animate"
fontSize={'20px'} fontSize={'20px'}
@ -299,10 +300,15 @@ const Index: FC<{ setIsscreenshot: Function; setScreenshotLoading: Function }> =
{filterDefaults(propsAttributes!.isShowWebFullScreen) && ( {filterDefaults(propsAttributes!.isShowWebFullScreen) && (
<Tooltip <Tooltip
styleCss={{ padding: `0 ${space}` }} styleCss={{ padding: `0 ${space}` }}
title={il8n(propsAttributes!.language || defaultLanguage, 'Fullscreen')} title={il8n(
propsAttributes!.language || defaultLanguage,
controlsState.isWebPageFullScreen ? 'closeFullscreen' : 'Fullscreen',
)}
icon={ icon={
<Broadcast <Broadcast
iconClass="fullScreen" iconClass={
!controlsState.isWebPageFullScreen ? 'webFullscreen' : 'closeWebFullscreen'
}
fill="#fff" fill="#fff"
className="hover-icon-animate" className="hover-icon-animate"
fontSize={'20px'} fontSize={'20px'}
@ -319,9 +325,9 @@ const Index: FC<{ setIsscreenshot: Function; setScreenshotLoading: Function }> =
)} )}
icon={ icon={
<Broadcast <Broadcast
iconClass="fullScreen" iconClass={!controlsState.isScreentFull ? 'fullScreen' : 'closeFullScreen'}
fill="#fff" fill="#fff"
fontSize={'20px'} fontSize={'19px'}
onClick={requestFullScreen} onClick={requestFullScreen}
className="hover-icon-animate" className="hover-icon-animate"
/> />

@ -17,17 +17,12 @@ const Monitor: FC<MonitorType> = memo(function Monitor({
}) { }) {
return ( return (
<div className="play-pause-timeline"> <div className="play-pause-timeline">
{!isPlay ? ( <Broadcast
<Broadcast iconClass="player" fill="#fff" onClick={handleChangePlayState} /> iconClass={!isPlay ? 'player' : 'pause'}
) : ( fill="#fff"
<Broadcast fontSize="20px"
iconClass="pause" onClick={handleChangePlayState}
fill="#fff" />
fontSize={'20px'}
onClick={handleChangePlayState}
/>
)}
<span className="time-wrap"> <span className="time-wrap">
<span className="current-time">{currentTime}</span> <span className="current-time">{currentTime}</span>
<span className="time-divider">&nbsp;/&nbsp;</span> <span className="time-divider">&nbsp;/&nbsp;</span>

@ -24,7 +24,7 @@ const Set: FC<SetType> = memo(function Set({ switchChange, style }) {
onMouseLeave={(e) => [setIsShow(false)]} onMouseLeave={(e) => [setIsShow(false)]}
style={style} style={style}
> >
<Broadcast iconClass="set" fill="#fff" className="hover-icon-rotateAnimate" /> <Broadcast iconClass="set" fill="#fff" className="hover-icon-rotateAnimate" fontSize="20px" />
<div <div
className="JoL-multifunction-set-container" className="JoL-multifunction-set-container"
style={{ display: isShow ? 'block' : 'none' }} style={{ display: isShow ? 'block' : 'none' }}

@ -46,7 +46,7 @@ const Volume = function Volume(
onClick={(e) => [toggleVolume()]} onClick={(e) => [toggleVolume()]}
style={style} style={style}
> >
<Broadcast iconClass={isMuted ? 'set' : 'volume'} fill="#fff" fontSize={'20px'} /> <Broadcast iconClass={isMuted ? 'mute' : 'volume'} fill="#fff" fontSize="20px" />
<div <div
className="JoL-multifunction-volume-container" className="JoL-multifunction-volume-container"
style={{ display: isShow ? 'block' : 'none' }} style={{ display: isShow ? 'block' : 'none' }}

@ -7,6 +7,7 @@
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
z-index: 100;
.JoL-player { .JoL-player {
@include wh(100%, 100%); @include wh(100%, 100%);
background-color: #000; background-color: #000;

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon_tcqp</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iPhone-8" transform="translate(-253.000000, -61.000000)">
<g id="icon_tcqp" transform="translate(253.000000, 61.000000)">
<rect id="矩形备份" x="0" y="0" width="18" height="18"></rect>
<g transform="translate(1.000000, 1.000000)" fill="#FFFFFF" fill-rule="nonzero" id="形状">
<path d="M6.1481867,5.15916634 L6.13112633,0.749707211 C6.12356793,0.409921405 5.84286357,0.205952741 5.50205199,0.198358355 L5.04484113,0.198358355 C4.70507332,0.190799961 4.43523865,0.486621108 4.44274306,0.826082983 L4.461837,3.22409148 L1.43637382,0.247145989 C1.10751169,-0.0823819964 0.575364753,-0.0823819964 0.24648463,0.247145989 C-0.0813697115,0.576727963 -0.0813697115,1.10928881 0.24648463,1.43914073 L3.24419771,4.40644027 L0.946139975,4.41565431 C0.606372165,4.40707014 0.291187132,4.64251411 0.23961009,5.04370287 L0.23961009,5.4770508 C0.248194266,5.81748447 0.528934618,6.09896266 0.868702428,6.10641308 L5.25663813,6.08053458 C5.26315274,6.08116444 5.2675798,6.08361192 5.27333858,6.08361192 L5.5810732,6.09041448 C5.7509751,6.09448161 5.90320475,6.02802173 6.01159572,5.91777716 C6.12180431,5.80830642 6.16243967,5.65539291 6.15792263,5.48446522 L6.1251516,5.17604675 C6.12516959,5.17001803 6.14800674,5.1659329 6.14800674,5.15904037 L6.1481867,5.15916634 Z M12.7278767,11.5673528 L15.0228211,11.5581388 C15.3625889,11.5657151 15.6771081,11.3568875 15.729351,10.9557347 L15.729351,10.5224408 C15.7207488,10.1819172 15.4390007,9.90052895 15.1002587,9.89190878 L10.768543,9.9181472 C10.7617405,9.9181472 10.7576553,9.91542978 10.7511407,9.91542978 L10.44409,9.90787139 C10.2741881,9.90380425 10.1210586,9.97030012 10.0125416,10.0808326 C9.9017032,10.1893496 9.86207562,10.342839 9.8654589,10.5137667 L9.89930971,10.8215013 C9.89990358,10.8290597 9.87710242,10.8333967 9.87710242,10.8392455 L9.89484665,15.1807871 C9.90343083,15.5202489 10.1841892,15.7235877 10.523939,15.7310381 L10.9561532,15.731704 C11.2949672,15.7394963 11.5657556,15.4427754 11.5572794,15.1028996 L11.5381675,12.7564142 L14.5636307,15.7528135 C14.8925288,16.0823955 15.4240099,16.0823955 15.752908,15.7528135 C16.0814282,15.4233035 16.0814282,14.8906887 15.752908,14.5611427 L12.7278407,11.5671908 L12.7278767,11.5673528 Z M6.01136177,10.0809406 C5.90288082,9.97044409 5.74967937,9.90396622 5.58083925,9.90799736 L5.27303265,9.91555575 C5.26680597,9.91555575 5.26284681,9.91827318 5.25597227,9.91827318 L0.868324508,9.89203475 C0.528538702,9.90063692 0.247402435,10.1819891 0.239250167,10.5225128 L0.239250167,10.9558247 C0.290413296,11.3569955 0.605598329,11.5657511 0.944808258,11.5582287 L3.26915841,11.5657871 L0.24610671,14.559811 C-0.08203557,14.8883312 -0.08203557,15.4219358 0.24610671,15.7514818 C0.574644906,16.0810638 1.10713377,16.0810638 1.43568996,15.7514818 L4.46151307,12.7745903 L4.44209519,15.1354187 C4.4345368,15.4759423 4.70446145,15.7727173 5.04359939,15.7641691 L5.50081025,15.7641691 C5.84160384,15.7555849 6.12239818,15.5533799 6.12988459,15.2128203 L6.14764682,10.8388496 C6.14764682,10.8326229 6.12484566,10.8285738 6.12484566,10.8217712 L6.1576167,10.5139646 C6.16132391,10.3430909 6.12175032,10.1895835 6.01155973,10.0811026 L6.01136177,10.0809406 Z M10.0144672,5.918497 C10.1229842,6.02868759 10.2761496,6.09520146 10.4457456,6.09041448 L10.7527604,6.08361192 C10.7595629,6.08361192 10.763702,6.08123643 10.7705046,6.08019265 L15.1649909,6.10641308 C15.5047587,6.09860274 15.7855351,5.81707055 15.7940653,5.47665488 L15.795109,5.04334295 C15.7429561,4.64147033 15.4272852,4.40708813 15.0885791,4.41457454 L12.7567606,4.40537849 L15.752818,1.43793498 C16.082328,1.10977471 16.082328,0.577177868 15.7537898,0.24761389 C15.4248917,-0.0819140958 14.8934106,-0.0819140958 14.5645305,0.24761389 L11.5390673,3.24302346 L11.5584852,0.82656888 C11.5666554,0.487107005 11.295777,0.190314064 10.956981,0.197800474 L10.5247668,0.197800474 C10.184981,0.20638465 9.90418667,0.409669458 9.89567448,0.749149329 L9.87827218,5.15956225 C9.87827218,5.16636481 9.90078539,5.17050393 9.90078539,5.17662263 L9.8673305,5.4850411 C9.86387523,5.65598678 9.90344883,5.80881031 10.0144133,5.91835303 L10.0144672,5.918497 Z"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon_tcqp</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iPhone-8" transform="translate(-78.000000, -21.000000)">
<g id="icon_tcqp" transform="translate(78.000000, 21.000000)">
<rect id="矩形备份-10" x="0" y="0" width="18" height="18"></rect>
<g id="icon_wyqp" transform="translate(1.000000, 1.000000)" fill="#FFFFFF">
<path d="M0,14.3998594 L0,1.59990625 C0,0.71621875 0.71640625,0 1.60007812,0 L14.4000312,0 C15.2837187,0 15.9999375,0.71621875 15.9999375,1.59990625 L15.9999375,14.3998906 C15.9999375,15.2835781 15.2837187,16 14.4000312,16 L1.60007812,16 C0.716421875,16 0,15.2835469 0,14.3998594 Z M13.967076,1.66 L2.03308428,1.66 C1.76927393,1.66 1.66,1.76925936 1.66,2.0328949 L1.66,13.9669157 C1.66,14.2307406 1.76927393,14.34 2.03308428,14.34 L14.34,14.34 L14.34,2.0328949 C14.34,1.76924479 14.2307552,1.66 13.967076,1.66 Z" id="形状" fill-rule="nonzero"></path>
<path d="M6.2,9 C6.28000001,9 6.44,9 6.52000001,9.08000001 C6.60000001,9.08000001 6.68000002,9.15999999 6.76000001,9.24 C6.84,9.32000001 6.92,9.39999999 6.92,9.48 C7.00000001,9.56000001 7.00000001,9.72 7.00000001,9.80000001 L7.00000001,9.80000001 L7.00000001,12.4 C7.00000001,12.88 6.68,13.2 6.2,13.2 C5.72,13.2 5.4,12.88 5.4,12.4 L5.4,12.4 L5.4,10.6 L3.60000001,10.6 C3.12000001,10.6 2.8,10.28 2.8,9.80000001 C2.8,9.32000001 3.12000001,9 3.60000001,9 L3.60000001,9 Z M12.4,9 C12.88,9 13.2,9.32000001 13.2,9.80000001 C13.2,10.28 12.88,10.6 12.4,10.6 L10.6,10.6 L10.6,12.4 C10.6,12.88 10.28,13.2 9.80000001,13.2 C9.32000001,13.2 9,12.88 9,12.4 L9,9.80000001 C9,9.72 9,9.56000001 9.08000001,9.48 C9.08000001,9.39999999 9.16000001,9.32000001 9.24,9.24 C9.31999999,9.15999999 9.39999999,9.08000001 9.48,9.08000001 C9.56000001,9 9.72,9 9.80000001,9 L12.4,9 Z M6.2,2.8 C6.68,2.8 7.00000001,3.12000001 7.00000001,3.60000001 L7.00000001,6.2 C7.00000001,6.28000001 7.00000001,6.44 6.92,6.52000001 C6.92,6.60000002 6.84,6.68 6.76000001,6.76000001 C6.68000002,6.84000001 6.60000001,6.92 6.52000001,6.92 C6.44,7.00000001 6.28000001,7.00000001 6.2,7.00000001 L3.60000001,7.00000001 C3.12000001,7.00000001 2.8,6.68 2.8,6.2 C2.8,5.72 3.12000001,5.4 3.60000001,5.4 L5.4,5.4 L5.4,3.60000001 C5.4,3.12000001 5.72,2.8 6.2,2.8 Z M9.80000001,2.8 C10.28,2.8 10.6,3.12000001 10.6,3.60000001 L10.6,3.60000001 L10.6,5.4 L12.4,5.4 C12.88,5.4 13.2,5.72 13.2,6.2 C13.2,6.68 12.88,7.00000001 12.4,7.00000001 L12.4,7.00000001 L9.80000001,7.00000001 C9.72,7.00000001 9.56000001,7.00000001 9.48,6.92 C9.39999999,6.92 9.31999999,6.84000001 9.24,6.76000001 C9.16000001,6.68 9.08000001,6.60000002 9.08000001,6.52000001 C9,6.44 9,6.28000001 9,6.2 L9,6.2 L9,3.60000001 C9,3.12000001 9.32000001,2.8 9.80000001,2.8 Z" id="形状结合"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

@ -1 +1,14 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1626429400942" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1323" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M380 97.2H218.2c-66.2 0-120 53.8-120 120V379c0 22.1 17.9 40 40 40s40-17.9 40-40V234.6L348 404.4c7.8 7.8 18 11.7 28.3 11.7 10.2 0 20.5-3.9 28.3-11.7 15.6-15.6 15.6-40.9 0-56.6L233.9 177.2H380c22.1 0 40-17.9 40-40s-17.9-40-40-40zM885.8 605c-22.1 0-40 17.9-40 40v144.4L676 619.6c-15.6-15.6-40.9-15.6-56.6 0s-15.6 40.9 0 56.6l170.7 170.7H644c-22.1 0-40 17.9-40 40s17.9 40 40 40h161.9c66.2 0 120-53.8 120-120V645c-0.1-22.1-18-40-40.1-40zM379 845.8H234.6L404.4 676c15.6-15.6 15.6-40.9 0-56.6-15.6-15.6-40.9-15.6-56.6 0L177.2 790.1V644c0-22.1-17.9-40-40-40s-40 17.9-40 40v161.9c0 66.2 53.8 120 120 120H379c22.1 0 40-17.9 40-40s-17.9-40.1-40-40.1zM806.8 98.2H645c-22.1 0-40 17.9-40 40s17.9 40 40 40h144.4L619.6 348c-15.6 15.6-15.6 40.9 0 56.6 7.8 7.8 18 11.7 28.3 11.7 10.2 0 20.5-3.9 28.3-11.7l170.7-170.7V380c0 22.1 17.9 40 40 40s40-17.9 40-40V218.2c-0.1-66.2-53.9-120-120.1-120z" p-id="1324"></path></svg> <?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon_qp</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iPhone-8" transform="translate(-218.000000, -61.000000)">
<g id="icon_qp" transform="translate(218.000000, 61.000000)">
<rect id="矩形" x="0" y="0" width="18" height="18"></rect>
<g transform="translate(1.000000, 1.000000)" fill="#FFFFFF" fill-rule="nonzero" id="形状">
<path d="M15.2,16 L11.6,16 C11.12,16 10.8,15.68 10.8,15.2 C10.8,14.72 11.12,14.4 11.6,14.4 L13.28,14.4 L10.16,11.28 C9.83999999,10.96 9.83999999,10.48 10.16,10.16 C10.48,9.84000001 10.96,9.83999999 11.28,10.16 L14.4,13.28 L14.4,11.6 C14.4,11.12 14.72,10.8 15.2,10.8 C15.68,10.8 16,11.12 16,11.6 L16,15.2 C16,15.28 16,15.44 15.92,15.52 C15.92,15.6 15.84,15.68 15.76,15.76 C15.68,15.84 15.6,15.92 15.52,15.92 C15.44,16 15.28,16 15.2,16 Z M4.4,16 L0.800000006,16 C0.719999999,16 0.560000006,16 0.48,15.92 C0.399999993,15.92 0.320000006,15.84 0.24,15.76 C0.159999994,15.68 0.0800000062,15.6 0.0800000062,15.52 C0,15.44 0,15.28 0,15.2 L0,11.6 C0,11.12 0.320000006,10.8 0.800000006,10.8 C1.28000001,10.8 1.60000001,11.12 1.60000001,11.6 L1.60000001,13.28 L4.72000001,10.16 C5.04000001,9.83999999 5.52000001,9.83999999 5.84,10.16 C6.15999999,10.48 6.16000001,10.96 5.84,11.28 L2.72,14.4 L4.4,14.4 C4.88,14.4 5.20000001,14.72 5.20000001,15.2 C5.20000001,15.68 4.88,16 4.4,16 Z M10.72,6.08 C10.48,6.08 10.32,6 10.16,5.84 C9.83999999,5.52 9.83999999,5.04 10.16,4.72000001 L13.28,1.60000001 L11.6,1.60000001 C11.12,1.60000001 10.8,1.28000001 10.8,0.800000006 C10.8,0.320000006 11.12,-4.4408921e-16 11.6,-4.4408921e-16 L15.2,-4.4408921e-16 C15.28,-4.4408921e-16 15.44,-4.4408921e-16 15.52,0.0800000062 C15.6,0.0800000062 15.68,0.160000012 15.76,0.24 C15.84,0.319999987 15.92,0.399999993 15.92,0.48 C16,0.560000006 16,0.719999999 16,0.800000006 L16,4.4 C16,4.88 15.68,5.20000001 15.2,5.20000001 C14.72,5.20000001 14.4,4.88 14.4,4.4 L14.4,2.72 L11.28,5.84 C11.12,6 10.88,6.08 10.72,6.08 L10.72,6.08 Z M5.28,6.08 C5.04,6.08 4.88,6 4.72000001,5.84 L1.60000001,2.72 L1.60000001,4.4 C1.60000001,4.88 1.28000001,5.20000001 0.800000006,5.20000001 C0.320000006,5.20000001 0,4.88 0,4.4 L0,0.800000006 C0,0.719999999 0,0.560000006 0.0800000062,0.48 C0.0800000062,0.399999993 0.160000012,0.320000006 0.24,0.24 C0.319999987,0.159999994 0.399999993,0.0800000062 0.48,0.0800000062 C0.560000006,-4.4408921e-16 0.719999999,-4.4408921e-16 0.800000006,-4.4408921e-16 L4.4,-4.4408921e-16 C4.88,-4.4408921e-16 5.20000001,0.320000006 5.20000001,0.800000006 C5.20000001,1.28000001 4.88,1.60000001 4.4,1.60000001 L2.72,1.60000001 L5.84,4.72000001 C6.16000001,5.04000001 6.16000001,5.52000001 5.84,5.84 C5.68000001,6 5.52,6.08 5.28,6.08 L5.28,6.08 Z"></path>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon_hzh</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iPhone-8" transform="translate(-288.000000, -61.000000)">
<g id="icon_yhzh" transform="translate(288.000000, 61.000000)">
<rect id="矩形备份-6" x="0" y="0" width="18" height="18"></rect>
<g transform="translate(0.000000, 1.500000)" fill="#FFFFFF">
<path d="M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,7.659 L14.34,7.659 L14.34,2.66 C14.34,2.14716416 13.9539598,1.72449284 13.4566211,1.66672773 L13.34,1.66 L2.66,1.66 C2.10771525,1.66 1.66,2.10771525 1.66,2.66 L1.66,2.66 L1.66,10.34 C1.66,10.8922847 2.10771525,11.34 2.66,11.34 L2.66,11.34 L7.659,11.34 L7.659,13 L2,13 C0.8954305,13 1.3527075e-16,12.1045695 0,11 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L14,0 Z" id="形状结合"></path>
<rect id="矩形" x="8.87" y="8.87" width="9.13" height="6.13" rx="1.5"></rect>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon_gbyl</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iPhone-8" transform="translate(-148.000000, -61.000000)">
<g id="icon_gbyl" transform="translate(148.000000, 61.000000)">
<rect id="矩形备份-4" x="0" y="0" width="18" height="18"></rect>
<g transform="translate(1.000000, 1.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path d="M1.882,4.284 L3.482,5.884 L1.6001084,5.88493423 L1.6001084,10.117221 L3.99307054,10.117221 L9.07981515,14.1814963 L9.079,11.481 L10.68,13.082 L10.6807236,14.575923 C10.6807236,15.1087591 10.391104,15.5927919 9.92467239,15.8392086 C9.46072422,16.0846014 8.89795239,16.0468149 8.4709739,15.741602 L8.47017385,15.7424021 L3.43223254,11.7181294 L1.40329508,11.7181294 C0.629642666,11.7181294 0,11.0780861 0,10.2940329 L0,5.70812225 C0,4.92246902 0.629642651,4.28402578 1.40329508,4.28402576 L1.882,4.284 Z M13.6873273,3.4535695 C16.3950119,6.33895693 16.7255697,9.3563042 14.6790005,12.2744527 L13.5283797,11.1240388 C14.9637376,8.91769099 14.6278938,6.79375844 12.5208483,4.54884371 C12.3162543,4.34126159 12.2400166,4.03972533 12.321746,3.76055187 C12.4034753,3.48137841 12.630292,3.26856277 12.9141001,3.20476276 C13.1979083,3.14096275 13.4939825,3.23623264 13.6873273,3.4535695 Z M9.92467239,0.161346456 C10.391104,0.406963098 10.6807236,0.891795943 10.6807236,1.42463204 L10.68,8.277 L9.079,6.676 L9.07981515,1.82465915 L6.397,3.994 L5.258,2.855 L8.4709739,0.258953072 C8.89768882,-0.0469951052 9.46088713,-0.0848102934 9.92467239,0.161346456 Z" id="形状结合"></path>
<path d="M2.1728,1.0356 L14.9648,13.8276 C15.27499,14.1422606 15.2731354,14.6482675 14.9606472,14.9606458 C14.6481589,15.2730241 14.1421514,15.2747007 13.8276,14.9644 L1.0356,2.1724 C0.73932756,1.8557529 0.747545194,1.36120328 1.05417424,1.05457424 C1.36080328,0.747945194 1.8553529,0.73972756 2.172,1.036 L2.1728,1.0356 Z" id="路径备份"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

@ -1 +1,14 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1626405468723" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7249" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M757.52 73.107h-62.493c-34.526 0-62.498 27.984-62.498 62.511v749.948c0 34.526 27.974 62.493 62.498 62.493h62.493c34.516 0 62.502-27.968 62.502-62.493v-749.953c-0.001-34.524-27.984-62.509-62.502-62.509z" p-id="7250"></path><path d="M320.054 73.107h-62.502c-34.526 0-62.498 27.984-62.498 62.511v749.948c0 34.526 27.974 62.493 62.498 62.493h62.502c34.505 0 62.493-27.968 62.493-62.493v-749.953c-0.001-34.524-27.984-62.509-62.493-62.509z" p-id="7251"></path></svg> <?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon_bf</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iPhone-8" transform="translate(-113.000000, -109.000000)">
<g id="icon_bf" transform="translate(113.000000, 109.000000)">
<rect id="矩形备份-10" x="0" y="0" width="18" height="18"></rect>
<g transform="translate(3.000000, 1.000000)" fill="#FFFFFF" fill-rule="nonzero" id="形状">
<path d="M9.73026169,0 C8.81413554,0 8.01252516,0.799821069 8.01252516,1.71415791 L8.01252516,14.2858421 C8.01252516,15.2001789 8.81413554,16 9.73026169,16 C10.6463878,16 11.4479982,15.2001789 11.4479982,14.2858421 L11.4479982,1.71415791 C11.4479982,0.799821069 10.6463878,0 9.73026169,0 Z M1.71773652,0 C0.801610378,0 -6.50946778e-16,0.799821069 -6.50946778e-16,1.71415791 L-6.50946778e-16,14.2858421 C-6.50946778e-16,15.2001789 0.801610378,16 1.71773652,16 C2.63386267,16 3.43547305,15.2001789 3.43547305,14.2858421 L3.43547305,1.71415791 C3.43368374,0.799821069 2.63207336,0 1.71773652,0 Z"></path>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 837 B

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -1 +1,14 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1626168582786" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10394" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M882.734114 459.147258l0.024559-0.024559L244.016061 21.12718l-0.199545 0.188288C230.582097 8.748245 212.62819 1.014096 192.840518 1.014096c-40.704051 0-73.699536 32.66905-73.699536 72.996524 0 22.148439-0.954745 65.513086 0 64.572668l0 373.422851 0 393.071354c0 0.325411 0 25.249057 0 44.935422 0 40.302915 32.995485 72.972988 73.699536 72.972988 19.862373 0 37.892005-7.78429 51.125401-20.466124l0.050142 0.025583 638.742613-437.982216-0.024559-0.038886c13.886265-13.270235 22.549575-31.889291 22.549575-52.531424 0-0.050142 0-0.088004 0-0.150426 0-0.050142 0-0.11154 0-0.149403C905.28369 491.048829 896.620379 472.41647 882.734114 459.147258z" p-id="10395"></path></svg> <?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon_zt</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iPhone-8" transform="translate(-78.000000, -109.000000)">
<g id="icon_zt" transform="translate(78.000000, 109.000000)">
<rect id="矩形备份-10" x="0" y="0" width="18" height="18"></rect>
<g transform="translate(3.000000, 1.000000)" fill="#FFFFFF" fill-rule="nonzero" id="路径">
<path d="M0.992369212,15.8990308 C0.481836467,15.7736376 0.0929717158,15.3594445 6.48386882e-16,14.8420245 L6.48386882e-16,1.15417331 C0.0879382032,0.631910584 0.478007891,0.211950496 0.992369212,0.0857604795 C1.54075549,-0.0899263394 2.14010986,0.00761010376 2.6044939,0.348110961 L11.729728,7.19203656 C12.0075567,7.3666885 12.176164,7.67183527 12.176164,8 C12.176164,8.32816473 12.0075567,8.6333115 11.729728,8.80796344 L2.6044939,15.651889 C2.14010986,15.9923899 1.54075549,16.0899263 0.992369212,15.9142395 L0.992369212,15.8990308 Z"></path>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon_xj</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iPhone-8" transform="translate(-148.000000, -109.000000)">
<g id="icon_xj" transform="translate(148.000000, 110.000000)">
<path d="M11.0584816,0.83 C11.3102833,0.83 11.5479599,0.910563303 11.7425926,1.05084664 C11.9372253,1.19112998 12.0888143,1.39113336 12.168441,1.63001351 L12.168441,1.63001351 L12.7630014,3.41369464 L15.9529961,3.8309214 C16.2946546,3.81754316 16.6053644,3.95073452 16.8273149,4.17268507 C17.0390433,4.38441342 17.17,4.67691342 17.17,5 L17.17,5 L17.17,13 C17.17,13.3230866 17.0390433,13.6155866 16.8273149,13.8273149 C16.6155866,14.0390433 16.3230866,14.17 16,14.17 L16,14.17 L2,14.17 C1.67691342,14.17 1.38441342,14.0390433 1.17268507,13.8273149 C0.960956711,13.6155866 0.83,13.3230866 0.83,13 L0.83,13 L0.83,5 C0.83,4.67691342 0.960956711,4.38441342 1.17268507,4.17268507 C1.38441342,3.96095671 1.67691342,3.83 2,3.83 L2,3.83 L4.62862034,3.83 L5.81227593,1.69379445 C5.88490856,1.42670035 6.04569254,1.20344209 6.25740741,1.05084664 C6.45204015,0.910563303 6.68971665,0.83 6.94151844,0.83 L6.94151844,0.83 Z" id="路径-2" stroke="#FFFFFF" stroke-width="1.66"></path>
<circle id="椭圆形" stroke="#FFFFFF" stroke-width="1.66" cx="9" cy="8" r="2.17"></circle>
<circle id="椭圆形备份" fill="#FFFFFF" cx="14" cy="6" r="1"></circle>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

@ -1,2 +1,14 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627367550729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2010" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); } <?xml version="1.0" encoding="UTF-8"?>
</style></defs><path d="M512.25928 704c-108.8 0-192-83.2-192-192s83.2-192 192-192 192 83.2 192 192-83.2 192-192 192z m0-320c-70.4 0-128 57.6-128 128s57.6 128 128 128 128-57.6 128-128-57.6-128-128-128z" p-id="2011"></path><path d="M640.25928 1024H384.25928c-19.2 0-32-12.8-32-32v-121.6c-25.6-12.8-51.2-25.6-70.4-38.4l-102.4 64c-12.8 6.4-32 6.4-44.8-12.8l-128-224C-6.14072 640 0.25928 620.8 19.45928 614.4l102.4-64v-76.8l-102.4-64C0.25928 403.2-6.14072 384 6.65928 364.8l128-224c6.4-12.8 25.6-19.2 44.8-6.4l102.4 64c19.2-12.8 44.8-32 70.4-38.4V32c0-19.2 12.8-32 32-32h256c19.2 0 32 12.8 32 32v121.6c25.6 12.8 51.2 25.6 70.4 38.4l102.4-64c12.8-6.4 32-6.4 44.8 12.8l128 224c12.8 19.2 6.4 38.4-12.8 44.8l-102.4 64v76.8l102.4 64c12.8 6.4 19.2 25.6 12.8 44.8l-128 224c-6.4 12.8-25.6 19.2-44.8 12.8l-102.4-64c-19.2 12.8-44.8 32-70.4 38.4V992c0 19.2-12.8 32-32 32z m-224-64h192v-108.8c0-12.8 6.4-25.6 19.2-32 32-12.8 64-32 89.6-51.2 12.8-6.4 25.6-6.4 38.4 0l96 57.6 96-166.4-96-57.6c-12.8-12.8-19.2-25.6-12.8-38.4 0-19.2 6.4-32 6.4-51.2s0-32-6.4-51.2c0-12.8 6.4-25.6 12.8-32l96-57.6-96-166.4-96 57.6c-12.8 6.4-25.6 6.4-38.4 0-25.6-19.2-57.6-38.4-89.6-51.2-12.8-12.8-19.2-25.6-19.2-38.4V64H416.25928v108.8c0 12.8-6.4 25.6-19.2 32-32 12.8-64 32-89.6 51.2-12.8 6.4-25.6 6.4-38.4 0l-96-51.2-96 166.4 96 57.6c12.8 6.4 19.2 19.2 12.8 32 0 19.2-6.4 32-6.4 51.2 0 19.2 0 32 6.4 51.2 6.4 12.8 0 25.6-12.8 32l-96 57.6 96 166.4 96-57.6c12.8-6.4 25.6-6.4 38.4 0 25.6 19.2 57.6 38.4 89.6 51.2 12.8 6.4 19.2 19.2 19.2 32V960z" p-id="2012"></path></svg> <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon_sz</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iPhone-8" transform="translate(-183.000000, -61.000000)">
<g id="icon_sz" transform="translate(183.000000, 61.000000)">
<rect id="矩形备份-3" x="0" y="0" width="18" height="18"></rect>
<g transform="translate(1.000000, 1.000000)" fill="#FFFFFF" fill-rule="nonzero" id="形状">
<path d="M16,8.67446429 L16,7.32553571 C16,7.05316061 15.8077928,6.81863218 15.5407143,6.76517857 L13.7980357,6.41660714 C13.6014036,6.37680161 13.4398445,6.23718097 13.3719643,6.04839286 C13.3144643,5.88958333 13.25,5.73410714 13.1785714,5.58196429 C13.0929015,5.40035722 13.1083407,5.18718828 13.2192857,5.01982143 L14.2051786,3.54107143 C14.3562861,3.31441428 14.3263893,3.01260596 14.13375,2.82 L13.18,1.86625 C12.987394,1.67361075 12.6855857,1.64371394 12.4589286,1.79482143 L10.9801786,2.78071429 C10.8128117,2.8916593 10.5996428,2.90709848 10.4180357,2.82142857 C10.2660119,2.75 10.1104762,2.68559524 9.95142857,2.62821429 C9.76264046,2.56033408 9.62301981,2.39877498 9.58321429,2.20214286 L9.23464286,0.459285714 C9.18120242,0.192273064 8.94677226,0 8.67446429,0 L7.32553571,0 C7.05316061,0 6.81863218,0.192207246 6.76517857,0.459285714 L6.41660714,2.20196429 C6.37680161,2.39859641 6.23718097,2.56015551 6.04839286,2.62803571 C5.88958333,2.68553571 5.73410714,2.75 5.58196429,2.82142857 C5.40035722,2.90709848 5.18718828,2.8916593 5.01982143,2.78071429 L3.54107143,1.79482143 C3.31441428,1.64371394 3.01260596,1.67361075 2.82,1.86625 L1.86625,2.82 C1.67361075,3.01260596 1.64371394,3.31441428 1.79482143,3.54107143 L2.78071429,5.01982143 C2.8916593,5.18718828 2.90709848,5.40035722 2.82142857,5.58196429 C2.75,5.7339881 2.68559524,5.88952381 2.62821429,6.04857143 C2.56033408,6.23735954 2.39877498,6.37698019 2.20214286,6.41678571 L0.459285714,6.76535714 C0.192273064,6.81879758 0,7.05322774 0,7.32553571 L0,8.67428571 C0,8.94666082 0.192207246,9.18118924 0.459285714,9.23464286 L2.20196429,9.58321429 C2.39859641,9.62301981 2.56015551,9.76264046 2.62803571,9.95142857 C2.68553571,10.1103571 2.75,10.2658929 2.82142857,10.4180357 C2.90709848,10.5996428 2.8916593,10.8128117 2.78071429,10.9801786 L1.79482143,12.4589286 C1.64371394,12.6855857 1.67361075,12.987394 1.86625,13.18 L2.82,14.13375 C3.01260596,14.3263893 3.31441428,14.3562861 3.54107143,14.2051786 L5.01982143,13.2192857 C5.18718828,13.1083407 5.40035722,13.0929015 5.58196429,13.1785714 C5.7339881,13.25 5.88952381,13.3144048 6.04857143,13.3717857 C6.23735954,13.4396659 6.37698019,13.601225 6.41678571,13.7978571 L6.76535714,15.5405357 C6.81872326,15.8076194 7.05317271,16 7.32553571,16 L8.67428571,16 C8.94666082,16 9.18118924,15.8077928 9.23464286,15.5407143 L9.58321429,13.7980357 C9.62301981,13.6014036 9.76264046,13.4398445 9.95142857,13.3719643 C10.1103571,13.3144643 10.2658929,13.25 10.4180357,13.1785714 C10.5996428,13.0929015 10.8128117,13.1083407 10.9801786,13.2192857 L12.4589286,14.2051786 C12.6855857,14.3562861 12.987394,14.3263893 13.18,14.13375 L14.13375,13.18 C14.3263893,12.987394 14.3562861,12.6855857 14.2051786,12.4589286 L13.2192857,10.9801786 C13.1083407,10.8128117 13.0929015,10.5996428 13.1785714,10.4180357 C13.25,10.2660119 13.3144048,10.1104762 13.3717857,9.95142857 C13.4396659,9.76264046 13.601225,9.62301981 13.7978571,9.58321429 L15.5405357,9.23464286 C15.8076194,9.18127674 16,8.94682729 16,8.67446429 Z M10.4242857,10.4244643 C9.26765335,11.5810199 7.45510983,11.759488 6.09512057,10.8507258 C4.73513131,9.9419637 4.20646608,8.19907015 4.83243138,6.68791601 C5.45839669,5.17676186 7.06465532,4.31821771 8.6688959,4.63732834 C10.2731365,4.95643897 11.4285838,6.36432906 11.4285838,8 C11.4310195,8.90979114 11.0693876,9.78274895 10.4242857,10.4242857 L10.4242857,10.4244643 Z"></path>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

@ -1 +1,14 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1626407222511" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8128" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M153.6 665.6V358.4h204.8V256H153.6c-56.32 0-102.4 46.08-102.4 102.4v307.2c0 56.32 46.08 102.4 102.4 102.4h204.8v-102.4H153.6zM358.4 256v102.4l204.8-128v563.2L358.4 665.6v102.4l307.2 204.8V51.2zM768 261.12v107.52c61.44 20.48 102.4 76.8 102.4 143.36s-40.96 122.88-102.4 143.36v107.52c117.76-25.6 204.8-128 204.8-250.88s-87.04-225.28-204.8-250.88z" p-id="8129"></path></svg> <?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon_yl</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iPhone-8" transform="translate(-113.000000, -61.000000)">
<g id="icon_yl" transform="translate(113.000000, 61.000000)">
<rect id="矩形备份-5" x="0" y="0" width="18" height="18"></rect>
<g transform="translate(1.000000, 1.000000)" fill="#FFFFFF" fill-rule="nonzero" id="形状">
<path d="M9.07981515,1.82465915 L4.78032386,5.30169472 L4.65871562,5.38970067 L3.91466522,5.88493423 L1.6001084,5.88493423 L1.6001084,10.117221 L3.99307054,10.117221 L9.07981515,14.1814963 L9.07981515,1.82465915 Z M8.47017385,15.7424021 L3.43223254,11.7181294 L1.40329508,11.7181294 C0.629642666,11.7181294 0,11.0780861 0,10.2940329 L0,5.70812225 C0,4.92246902 0.629642651,4.28402578 1.40329508,4.28402576 L3.43223254,4.28402576 L3.77465573,4.05601031 L8.4709739,0.258953072 C8.89768882,-0.0469951052 9.46088713,-0.0848102934 9.92467239,0.161346456 C10.391104,0.406963098 10.6807236,0.891795943 10.6807236,1.42463204 L10.6807236,14.575923 C10.6807236,15.1087591 10.391104,15.5927919 9.92467239,15.8392086 C9.46072422,16.0846014 8.89795239,16.0468149 8.4709739,15.741602 L8.47017385,15.7424021 Z M12.5208483,4.54804364 C12.3162543,4.34126159 12.2400166,4.03972533 12.321746,3.76055187 C12.4034753,3.48137841 12.630292,3.26856277 12.9141001,3.20476276 C13.1979083,3.14096275 13.4939825,3.23623264 13.6873273,3.4535695 C16.7715362,6.74019217 16.7715362,10.1980264 13.6873273,13.4854492 C13.3846547,13.8075634 12.8781649,13.8233241 12.5560507,13.5206515 C12.2339364,13.217979 12.2181757,12.7114892 12.5208483,12.3893749 C15.0274181,9.71879396 15.0274181,7.21942463 12.5208483,4.54884371 L12.5208483,4.54804364 Z"></path>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 748 B

After

Width:  |  Height:  |  Size: 2.0 KiB

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>icon_wyqp</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iPhone-8" transform="translate(-78.000000, -61.000000)">
<g id="icon_wyqp" transform="translate(78.000000, 61.000000)">
<rect id="矩形备份-10" x="0" y="0" width="18" height="18"></rect>
<g transform="translate(1.000000, 1.000000)" fill="#FFFFFF">
<path d="M0,14.3998594 L0,1.59990625 C0,0.71621875 0.71640625,0 1.60007812,0 L14.4000312,0 C15.2837187,0 15.9999375,0.71621875 15.9999375,1.59990625 L15.9999375,14.3998906 C15.9999375,15.2835781 15.2837187,16 14.4000312,16 L1.60007812,16 C0.716421875,16 0,15.2835469 0,14.3998594 Z M13.967076,1.66 L2.03308428,1.66 C1.76927393,1.66 1.66,1.76925936 1.66,2.0328949 L1.66,13.9669157 C1.66,14.2307406 1.76927393,14.34 2.03308428,14.34 L14.34,14.34 L14.34,2.0328949 C14.34,1.76924479 14.2307552,1.66 13.967076,1.66 Z" id="形状" fill-rule="nonzero"></path>
<path d="M3.60000001,9 C4.08000001,9 4.40000001,9.32000001 4.40000001,9.80000001 L4.40000001,9.80000001 L4.40000001,11.6 L6.2,11.6 C6.68,11.6 7.00000001,11.92 7.00000001,12.4 C7.00000001,12.88 6.68,13.2 6.2,13.2 L6.2,13.2 L3.60000001,13.2 C3.52,13.2 3.36000001,13.2 3.28,13.12 C3.19999999,13.12 3.11999999,13.04 3.04,12.96 C2.96000001,12.88 2.88000001,12.8 2.88000001,12.72 C2.8,12.64 2.8,12.48 2.8,12.4 L2.8,9.80000001 C2.8,9.32000001 3.12000001,9 3.60000001,9 Z M12.4,9 C12.88,9 13.2,9.32000001 13.2,9.80000001 L13.2,12.4 C13.2,12.48 13.2,12.64 13.12,12.72 C13.12,12.8 13.04,12.88 12.96,12.96 C12.88,13.04 12.8,13.12 12.72,13.12 C12.64,13.2 12.48,13.2 12.4,13.2 L9.80000001,13.2 C9.32000001,13.2 9,12.88 9,12.4 C9,11.92 9.32000001,11.6 9.80000001,11.6 L11.6,11.6 L11.6,9.80000001 C11.6,9.32000001 11.92,9 12.4,9 Z M6.2,2.8 C6.68,2.8 7.00000001,3.12000001 7.00000001,3.60000001 C7.00000001,4.08000001 6.68,4.40000001 6.2,4.40000001 L4.40000001,4.40000001 L4.40000001,6.2 C4.40000001,6.68 4.08000001,7.00000001 3.60000001,7.00000001 C3.12000001,7.00000001 2.8,6.68 2.8,6.2 L2.8,3.60000001 C2.8,3.52 2.8,3.36000001 2.88000001,3.28 C2.88000001,3.19999999 2.96000001,3.12000001 3.04,3.04 C3.11999999,2.95999999 3.19999999,2.88000001 3.28,2.88000001 C3.344,2.816 3.4592,2.8032 3.54368,2.80064 L6.2,2.8 Z M12.45632,2.80064 C12.5408,2.8032 12.656,2.816 12.72,2.88000001 C12.8,2.88000001 12.88,2.95999999 12.96,3.04 C13.04,3.12000001 13.12,3.19999999 13.12,3.28 C13.2,3.36000001 13.2,3.52 13.2,3.60000001 L13.2,3.60000001 L13.2,6.2 C13.2,6.68 12.88,7.00000001 12.4,7.00000001 C11.92,7.00000001 11.6,6.68 11.6,6.2 L11.6,6.2 L11.6,4.40000001 L9.80000001,4.40000001 C9.32000001,4.40000001 9,4.08000001 9,3.60000001 C9,3.12000001 9.32000001,2.8 9.80000001,2.8 L9.80000001,2.8 Z" id="形状结合"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

193
src/index.d.ts vendored

@ -0,0 +1,193 @@
/**
* @description JoL-palyer播放器组件声明文件
* @author lgf
* @time 2021-08-20
*/
import React from 'react';
export type pausePlacement = 'bottomRight' | 'center';
export type languageType = 'zh' | 'en';
export interface videoOption<T = string, K = boolean, U = number> {
/**
* @description width
*/
width: U;
/**
* @description height
*/
height: U;
/**
* @description
*/
videoSrc: T;
/**
* @description
*/
theme?: T;
/**
* @description
*/
poster?: T;
/**
* @description
*/
setEndPlayContent?: React.ReactNode;
/**
* @description
*/
setBufferContent?: React.ReactNode;
/**
* @description
*/
pausePlacement?: pausePlacement;
/**
* @description /ms
*/
hideMouseTime?: U;
/**
* @description
*/
isShowMultiple?: K;
/**
* @description
*/
isShowSet?: K;
/**
* @description
*/
isShowScreenshot?: K;
/**
* @description
*/
isShowPicture?: K;
/**
* @description
*/
isShowWebFullScreen?: K;
/**
* @description ,
*/
language?: languageType;
}
export interface videoAttributes<T = number, K = boolean> {
/**
* @description
*/
isPlay: K;
/**
* @description /s
*/
currentTime: T;
/**
* @description
*/
duration: T;
/**
* @description /s
*/
bufferedTime: T;
/**
* @description
*/
isPictureinpicture: K;
/**
* @description
*/
volume: T;
/**
* @description
*/
multiple: T;
/**
* @description
*/
isEndEd: K;
/**
* @description
*/
error: null | T;
}
export type noParVoid = () => void;
export type parVoid<T> = (par: T) => void;
export interface videoMethod<T = noParVoid> {
/**
* @description
*/
load: T;
/**
* @description
*/
play: T;
/**
* @description
*/
pause: T;
/**
* @description
*/
setVolume: parVoid<number>;
/**
* @description /s
*/
seek: parVoid<number>;
/**
* @description src
*/
setVideoSrc: parVoid<string>;
}
export type callBackType = (e: videoAttributes) => void;
export interface videoCallback<T = callBackType> {
/**
* @description
*/
onProgressMouseDown: T;
/**
* @description
*/
onPlay: T;
/**
* @description
*/
onPause: T;
/**
* @description
*/
onTimeChange: T;
/**
* @description
*/
onEndEd: T;
/**
* @description
*/
onProgressMouseUp: T;
/**
* @description
*/
onError: noParVoid;
/**
* @description
*/
onvolumechange: T;
}
export interface videoparameter extends Partial<videoCallback> {
style?: React.CSSProperties;
/**
* @description
*/
option: videoOption;
className?: string;
}
export type JoLPlayerRef = videoMethod &
videoAttributes & {
video: HTMLVideoElement;
};
interface CompoundedComponent
extends React.ForwardRefExoticComponent<videoparameter & React.RefAttributes<JoLPlayerRef>> {}
declare const JolPlayer: CompoundedComponent;
export default JolPlayer;

@ -1,5 +1,3 @@
import * as JoLPlayerType from "@/interface"; import JoLPlayer from '@/core/index';
import JoLPlayer from "@/core/index"; import '@/icons/';
import "@/icons/";
export { JoLPlayerType };
export default JoLPlayer; export default JoLPlayer;

166
zh.md

@ -0,0 +1,166 @@
<p align="center">
<img src="https://qiniu.qyhever.com/16296253101982eb82305cfc3%E6%90%9C%E7%8B%97%E6%88%AA%E5%9B%BE20210822173735.png">
</p>
<h1 align="center">JoL-player</h1>
<p align="center">简洁,美观,功能强大的react播放器</p>
<p align="center">
<a href="https://github.com/microsoft/TypeScript">
<img src="https://img.shields.io/badge/typescript-4.4.2-brightgreen.svg" alt="license">
</a>
<a href="https://github.com/facebook/react">
<img src="https://img.shields.io/badge/react-17.0.1-brightgreen.svg" alt="react">
</a>
</p>
简体中文 | [English](./README.md)
## ✨ 特性
- 📦 开箱即用的高质量 React 组件。
- 🛡 使用 TypeScript 开发,提供完整的类型定义文件。
- 🌍 国际化语言支持。
- 🎨 主题,组件,定制能力。
- :facepunch: 强大的 API 和回调函数
- :zap: 体积小,80kb
## 📦 安装
```bash
npm install jol-player --save
```
## 🔨 示例
```tsx
import JoLPlayer from "jol-player";
const App = () => (
<>
<JoLPlayer
option={{
videoSrc:"https://x.com/a.mp4",
width: 750,
height: 420,
}}
/>
</>
);
```
:point_right:[demo案例](https://codesandbox.io/s/inspiring-hawking-g5ukb?file=/src/App.tsx)
## :blue_book: 文档
#### 属性/配置项
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | ----------------------------------------- | ----------------- | -------- | ----------- |
| width | 视频容器的 width(必传) | `number` | 必传 |
| height | 视频容器的 height(必传) | `number` | 必传 |
| videoSrc | 视频地址(必传) | `string` | 必传 |
| theme | 主题 | `string` | \#ffb821 |
| poster | 视频封面图 | `string` | - |
| setEndPlayContent | 自定义视频结束时显示的内容 | `React.ReactNode` | - |
| setBufferContent | 自定义视频缓冲加载组件 | `React.ReactNode` | - |
| pausePlacement | 暂停键的位置 | `bottomRight` | `center` | bottomRight |
| hideMouseTime | 多少毫秒,无任何操作,隐藏鼠标和控制器/ms | `number` | 2000 |
| isShowMultiple | 是否显示播放倍数功能 | `boolean` | true |
| isShowSet | 是否显示设置功能 | `boolean` | true |
| isShowScreenshot | 是否显示截图功能 | `boolean` | true |
| isShowPicture | 是否显示画中画 | `boolean` | true |
| isShowWebFullScreen | 是否显示网页全屏 | `boolean` | true |
| language | 语言 | `zh` | `en` | zh |
#### 方法
| 名称 | 说明 | 类型 |
| ----------- | ------------------------ | ----------------------- |
| load | 重新加载 | () => void |
| pause | 暂停 | () => void |
| play | 开始播放 | () => void |
| setVolume | 设置音量,[0-100] | (par:`number` ) => void |
| seek | 设置指定视频的播放位置/s | (par:`number` ) => void |
| setVideoSrc | 设置播放视频的地址 src | (par:`string` ) => void |
`提示:`如上方法要借助`ref`才能调用,如:xxx.current.load()
:point_right:[具体请参看,demo案例](https://codesandbox.io/s/inspiring-hawking-g5ukb?file=/src/App.tsx)
#### 回调函数
```tsx
export interface videoAttributes<T = number, K = boolean> {
/**
* @description 是否播放
*/
isPlay: K;
/**
* @description 当前时间/s
*/
currentTime: T;
/**
* @description 总时长
*/
duration: T;
/**
* @description 缓存时长/s
*/
bufferedTime: T;
/**
* @description 是否开启画中画
*/
isPictureinpicture: K;
/**
* @description 音量
*/
volume: T;
/**
* @description 视频播放倍数
*/
multiple: T;
/**
* @description 是否结束
*/
isEndEd: K;
/**
* @description 错误
*/
error: null | T;
}
```
| 名称 | 说明 | 类型 |
| ------------------- | ------------------------ | ---------------------------- |
| onProgressMouseDown | 滑动条按下不放,拖动回调 | (e: videoAttributes) => void |
| onProgressMouseUp | 滑动条按下松开回调 | (e: videoAttributes) => void |
| onPlay | 视频开始播放回调 | (e: videoAttributes) => void |
| onPause | 视频暂停播放的回调 | (e: videoAttributes) => void |
| onTimeChange | 视频在播放,时间变化回调 | (e: videoAttributes) => void |
| onEndEd | 视频结束时回调 | (e: videoAttributes) => void |
| onvolumechange | 音量改变时的回调 | (e: videoAttributes) => void |
| onError | 视频播放失败的回调 | () => void |
## :muscle:后期版本
- [ ] 增加快捷键功能
- [ ] 增加视频清晰度选择列表
- [ ] 增加暂停,播放,播放区动画效果
- [ ] 增加自动播放功能
## :rose:赞赏
如果您认为该项目对您有所帮助,则可以给作者一个赞,作者非常感激:blush::blush::rose:
## :european_castle:生态圈
1. [ant-simple-pro](https://github.com/lgf196/ant-simple-pro)一款支持[vue3.0](https://github.com/vuejs/vue),[react](https://github.com/facebook/react),[angular](https://github.com/angular/angular),[typescript](https://github.com/microsoft/TypeScript)等多框架支持的中台前端解决方案
2. [ant-simple-draw](https://github.com/lgf196/ant-simple-draw)一款在线图解编辑器,常用用于表示业务流程等
3. [h5-Dooring](https://github.com/MrXujiang/h5-Dooring) 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站, 可视化设计
[MIT](https://github.com/lgf196/ant-simple-pro/blob/master/LICENSE)
Copyright (c) 2021-present LiGuoFeng
Loading…
Cancel
Save