From 0b874bea67f190fde7903cb9bf4b4ebf9579906a Mon Sep 17 00:00:00 2001 From: lgf <18827634408@163.com> Date: Sun, 22 Aug 2021 21:35:45 +0800 Subject: [PATCH] Complete the initial version v2.0.0, write usage documents and typescript type declarations --- README.md | 168 +++++++++++++++++++++++ example/src/app.tsx | 17 +-- example/src/index.html | 2 +- package.json | 23 ++-- src/core/config/index.ts | 2 +- src/core/controls/index.scss | 6 +- src/core/controls/index.tsx | 18 ++- src/core/controls/monitor.tsx | 17 +-- src/core/controls/set.tsx | 2 +- src/core/controls/volume.tsx | 2 +- src/core/index.scss | 1 + src/icons/svg/closeFullScreen.svg | 14 ++ src/icons/svg/closeWebFullscreen.svg | 15 +++ src/icons/svg/fullScreen.svg | 15 ++- src/icons/svg/inPicture.svg | 15 +++ src/icons/svg/mute.svg | 15 +++ src/icons/svg/pause.svg | 15 ++- src/icons/svg/player.svg | 15 ++- src/icons/svg/screenshots.svg | 13 ++ src/icons/svg/set.svg | 16 ++- src/icons/svg/volume.svg | 15 ++- src/icons/svg/webFullscreen.svg | 15 +++ src/index.d.ts | 193 +++++++++++++++++++++++++++ src/index.ts | 8 +- zh.md | 166 +++++++++++++++++++++++ 25 files changed, 731 insertions(+), 57 deletions(-) create mode 100644 README.md create mode 100644 src/icons/svg/closeFullScreen.svg create mode 100644 src/icons/svg/closeWebFullscreen.svg create mode 100644 src/icons/svg/inPicture.svg create mode 100644 src/icons/svg/mute.svg create mode 100644 src/icons/svg/screenshots.svg create mode 100644 src/icons/svg/webFullscreen.svg create mode 100644 src/index.d.ts create mode 100644 zh.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..018282b --- /dev/null +++ b/README.md @@ -0,0 +1,168 @@ +

+ +

+ + + +

JoL-player

+ +

Simple, beautiful and powerful react player

+ +

+ + license + + + react + +

+ + +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 = () => ( + <> + + +); +``` + +: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 { + /** + * @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 \ No newline at end of file diff --git a/example/src/app.tsx b/example/src/app.tsx index 4fbdf3b..462c1d6 100644 --- a/example/src/app.tsx +++ b/example/src/app.tsx @@ -1,18 +1,15 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import App from "../../src/index"; +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from '../../src/index'; ReactDOM.render( , - document.getElementById("root") + document.getElementById('root'), ); diff --git a/example/src/index.html b/example/src/index.html index 830e11c..313dcdc 100644 --- a/example/src/index.html +++ b/example/src/index.html @@ -4,7 +4,7 @@ - qier player page + Jol-player
diff --git a/package.json b/package.json index fe5aa08..582da5e 100644 --- a/package.json +++ b/package.json @@ -1,32 +1,31 @@ { - "name": " JoL-player", - "version": "1.0.0", - "description": "A multifunctional and beautiful React-based web video player.", - "main": "dist/index.js", + "name": "jol-player", + "version": "2.0.0", + "description": "简洁,美观,功能强大的react播放器,simple and beautiful, powerful react player", + "main": "index.js", "scripts": { "build": "webpack --config ./build/webpack.prod.config.js", "start": "webpack-dev-server --inline --config ./build/webpack.dev.config.js" }, "repository": { "type": "git", - "url": "git+https://github.com/vortesnail/Qier.git" + "url": "git+https://github.com/lgf196/JoL-player.git" }, "keywords": [ - "vortesnail", - "qier", - "video-player", + "lgf", + "react-video", "video", "player", "react", "react-components", - "html5-video-player" + "JoL-player" ], - "author": "vortesnail", + "author": "lgf", "license": "MIT", "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": { "@babel/core": "^7.6.4", "@babel/preset-env": "^7.6.3", diff --git a/src/core/config/index.ts b/src/core/config/index.ts index 5748361..0e1f1c8 100644 --- a/src/core/config/index.ts +++ b/src/core/config/index.ts @@ -7,7 +7,7 @@ export const multipleList = [ { id: 2, name: '2.0x' }, ]; -export const defaultTheme: string = 'blue'; +export const defaultTheme: string = '#ffb821'; export const defaultVolume: number = 60; diff --git a/src/core/controls/index.scss b/src/core/controls/index.scss index 0e4b1cd..0fa023a 100644 --- a/src/core/controls/index.scss +++ b/src/core/controls/index.scss @@ -1,8 +1,8 @@ -@import "src/assets/css/mixin.scss"; +@import 'src/assets/css/mixin.scss'; .clientFullScreen { @include wh(auto !important, auto !important); @include position(fixed !important, 0, 0, 0, 0); - z-index: 100000; + z-index: 100000 !important; } .JoL-controls-container { padding: 0 5px; @@ -18,7 +18,7 @@ cursor: default; } &:after { - content: ""; + content: ''; @include wh(calc(100% + 26px), 100%); @include position(absolute, auto, auto, 0, 50%); z-index: -1; diff --git a/src/core/controls/index.tsx b/src/core/controls/index.tsx index 494c3ff..7203260 100644 --- a/src/core/controls/index.tsx +++ b/src/core/controls/index.tsx @@ -270,7 +270,8 @@ const Index: FC<{ setIsscreenshot: Function; setScreenshotLoading: Function }> = title={il8n(propsAttributes!.language || defaultLanguage, 'screenshots')} icon={ = )} icon={ = {filterDefaults(propsAttributes!.isShowWebFullScreen) && ( = )} icon={ diff --git a/src/core/controls/monitor.tsx b/src/core/controls/monitor.tsx index 44f0de1..7dcea36 100644 --- a/src/core/controls/monitor.tsx +++ b/src/core/controls/monitor.tsx @@ -17,17 +17,12 @@ const Monitor: FC = memo(function Monitor({ }) { return (
- {!isPlay ? ( - - ) : ( - - )} - + {currentTime}  /  diff --git a/src/core/controls/set.tsx b/src/core/controls/set.tsx index ab43b66..10b5edd 100644 --- a/src/core/controls/set.tsx +++ b/src/core/controls/set.tsx @@ -24,7 +24,7 @@ const Set: FC = memo(function Set({ switchChange, style }) { onMouseLeave={(e) => [setIsShow(false)]} style={style} > - +
[toggleVolume()]} style={style} > - +
+ + icon_tcqp + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/closeWebFullscreen.svg b/src/icons/svg/closeWebFullscreen.svg new file mode 100644 index 0000000..0e0d266 --- /dev/null +++ b/src/icons/svg/closeWebFullscreen.svg @@ -0,0 +1,15 @@ + + + icon_tcqp + + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/fullScreen.svg b/src/icons/svg/fullScreen.svg index af49984..7ca004b 100644 --- a/src/icons/svg/fullScreen.svg +++ b/src/icons/svg/fullScreen.svg @@ -1 +1,14 @@ - \ No newline at end of file + + + icon_qp + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/inPicture.svg b/src/icons/svg/inPicture.svg new file mode 100644 index 0000000..ed2f37f --- /dev/null +++ b/src/icons/svg/inPicture.svg @@ -0,0 +1,15 @@ + + + icon_hzh + + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/mute.svg b/src/icons/svg/mute.svg new file mode 100644 index 0000000..309dd80 --- /dev/null +++ b/src/icons/svg/mute.svg @@ -0,0 +1,15 @@ + + + icon_gbyl + + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/pause.svg b/src/icons/svg/pause.svg index 6b22437..0ed4d38 100644 --- a/src/icons/svg/pause.svg +++ b/src/icons/svg/pause.svg @@ -1 +1,14 @@ - \ No newline at end of file + + + icon_bf + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/player.svg b/src/icons/svg/player.svg index f2a5a20..80b7a84 100644 --- a/src/icons/svg/player.svg +++ b/src/icons/svg/player.svg @@ -1 +1,14 @@ - \ No newline at end of file + + + icon_zt + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/screenshots.svg b/src/icons/svg/screenshots.svg new file mode 100644 index 0000000..99ac911 --- /dev/null +++ b/src/icons/svg/screenshots.svg @@ -0,0 +1,13 @@ + + + icon_xj + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/set.svg b/src/icons/svg/set.svg index 3d5aa4b..7afa358 100644 --- a/src/icons/svg/set.svg +++ b/src/icons/svg/set.svg @@ -1,2 +1,14 @@ - \ No newline at end of file + + + icon_sz + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/volume.svg b/src/icons/svg/volume.svg index 597b77c..358e3c6 100644 --- a/src/icons/svg/volume.svg +++ b/src/icons/svg/volume.svg @@ -1 +1,14 @@ - \ No newline at end of file + + + icon_yl + + + + + + + + + + + \ No newline at end of file diff --git a/src/icons/svg/webFullscreen.svg b/src/icons/svg/webFullscreen.svg new file mode 100644 index 0000000..916a8dd --- /dev/null +++ b/src/icons/svg/webFullscreen.svg @@ -0,0 +1,15 @@ + + + icon_wyqp + + + + + + + + + + + + \ No newline at end of file diff --git a/src/index.d.ts b/src/index.d.ts new file mode 100644 index 0000000..4b1b506 --- /dev/null +++ b/src/index.d.ts @@ -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 { + /** + * @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 { + /** + * @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 = (par: T) => void; + +export interface videoMethod { + /** + * @description 重新加载 + */ + load: T; + /** + * @description 开始播放 + */ + play: T; + /** + * @description 暂停 + */ + pause: T; + /** + * @description 设置音量 + */ + setVolume: parVoid; + /** + * @description 设置指定视频的播放位置/s + */ + seek: parVoid; + /** + * @description 设置播放视频的地址src + */ + setVideoSrc: parVoid; +} +export type callBackType = (e: videoAttributes) => void; +export interface videoCallback { + /** + * @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 { + style?: React.CSSProperties; + /** + * @description 组件的配置项 + */ + option: videoOption; + className?: string; +} +export type JoLPlayerRef = videoMethod & + videoAttributes & { + video: HTMLVideoElement; + }; + +interface CompoundedComponent + extends React.ForwardRefExoticComponent> {} +declare const JolPlayer: CompoundedComponent; +export default JolPlayer; diff --git a/src/index.ts b/src/index.ts index a9e2643..7791e8b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,3 @@ -import * as JoLPlayerType from "@/interface"; -import JoLPlayer from "@/core/index"; -import "@/icons/"; -export { JoLPlayerType }; -export default JoLPlayer; +import JoLPlayer from '@/core/index'; +import '@/icons/'; +export default JoLPlayer; diff --git a/zh.md b/zh.md new file mode 100644 index 0000000..4cfe0ce --- /dev/null +++ b/zh.md @@ -0,0 +1,166 @@ +

+ +

+ + +

JoL-player

+ +

简洁,美观,功能强大的react播放器

+ +

+ + license + + + react + +

+ +简体中文 | [English](./README.md) + +## ✨ 特性 + +- 📦 开箱即用的高质量 React 组件。 +- 🛡 使用 TypeScript 开发,提供完整的类型定义文件。 +- 🌍 国际化语言支持。 +- 🎨 主题,组件,定制能力。 +- :facepunch: 强大的 API 和回调函数 +- :zap: 体积小,80kb​ + +## 📦 安装 + +```bash +npm install jol-player --save +``` + +## 🔨 示例 + +```tsx +import JoLPlayer from "jol-player"; + +const App = () => ( + <> + + +); +``` + +: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 { + /** + * @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 \ No newline at end of file