Merge pull request #198 from goblin-laboratory/develop

goblin-laboratory · Jun 9, 2020 · e3cf76d · e3cf76d
2 parents cc07979 + 1a5eebf
commit e3cf76d
Show file tree

Hide file tree

Showing 47 changed files with 7,114 additions and 6,048 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,9 +17,11 @@ module.exports = {
     yoda: [2, 'always'],
     'no-undefined': 1,
     'no-debugger': 1,
+    'no-plusplus': 1,
     'jsx-a11y/anchor-is-valid': 1,
     'jsx-a11y/label-has-for': 1,
     'jsx-a11y/label-has-associated-control': 1,
+    'jsx-a11y/control-has-associated-label': 0,
     'react/destructuring-assignment': 1,
     'react/forbid-prop-types': 0,
     'react/jsx-filename-extension': 0,

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0-alpha.1](https://github.com/goblin-laboratory/react-player/compare/v1.0.4...v1.1.0-alpha.1) (2020-04-29)
+
+
+### Bug Fixes
+
+* lint ([438ff75](https://github.com/goblin-laboratory/react-player/commit/438ff752e60669fdfb49b95e41776dd227d8ef28))
+
+
+### Features
+
+* GrindPlayer 状态处理 ([8629c89](https://github.com/goblin-laboratory/react-player/commit/8629c89c14f18417d7c331d13004a866080631c2))
+* 升级依赖 ([dd08aea](https://github.com/goblin-laboratory/react-player/commit/dd08aeaa91c3c979ff3c37939e1745a83d2a6a57))
+
+
+
+# [1.1.0-alpha.0](https://github.com/goblin-laboratory/react-player/compare/v1.0.2...v1.1.0-alpha.0) (2020-01-16)
+
+
+### Features
+
+* 升级依赖 ([eab8611](https://github.com/goblin-laboratory/react-player/commit/eab861132ef762f2e9e326cabe7a8e8f70446a11))
+* 同步 master 修改 ([3460a2f](https://github.com/goblin-laboratory/react-player/commit/3460a2f9df46741e32c3e4fb17169a1d2db20065))
+
+
+
+
+
+# [1.1.0-alpha.0](https://github.com/goblin-laboratory/react-player/compare/v1.0.2...v1.1.0-alpha.0) (2020-01-16)
+
+
+### Features
+
+* 升级依赖 ([eab8611](https://github.com/goblin-laboratory/react-player/commit/eab8611))
+* 同步 master 修改 ([3460a2f](https://github.com/goblin-laboratory/react-player/commit/3460a2f))
 ## [1.0.4](https://github.com/goblin-laboratory/reactjs-player/compare/v1.0.3...v1.0.4) (2020-02-17)
 
 

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-![ReactPlayer](./docs/logo128x128.png)
+![ReactjsPlayer](./docs/logo128x128.png)
 
-# ReactPlayer
+# ReactjsPlayer
 
 [![npm](https://img.shields.io/npm/v/reactjs-player.svg?color=blue&style=flat-square)](https://www.npmjs.com/package/reactjs-player)
 [![reactjs-player](https://img.shields.io/bundlephobia/minzip/reactjs-player.svg?style=flat-square)](https://www.npmjs.com/package/reactjs-player)
@@ -11,49 +11,35 @@
 
 ## 特点
 
-`ReactPlayer` 遵循 `少即是多（Less is more）` 的设计原则，具有以下特点：
+`ReactjsPlayer` 遵循 `少即是多（Less is more）` 的设计原则，具有以下特点：
+
+- 结构简单：使用 `react hooks` 做状态管理，将不同的状态拆分到不同的 `react custom hooks` 中，`ReactjsPlayer` 中进行组合
+
+- 扩展方便：扩展时实现对应的 `react custom hooks` 并在 `ReactjsPlayer` 中根据条件进行加载
 
-- 结构简单：使用 `react hooks` 做状态管理，将不同的状态拆分到不同的 `react custom hooks` 中，`ReactPlayer` 中进行组合
-- 扩展方便：扩展时实现对应的 `react custom hooks` 并在 `ReactPlayer` 中根据条件进行加载
 - 代码简洁：只做播放器内部的状态管理和控制栏显示与控制
-- 理解容易： `ReactPlayer` 事件基于 `vidoe` [媒体事件](https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events) 进行扩展，减小理解成本
-- 使用相对复杂：不同于其他的 h5 播放器，`ReactPlayer` 将控制权交给使用者，无法做到一行代码播放所有兼容的格式
+
+- 理解容易： `ReactjsPlayer` 事件基于 `vidoe` [媒体事件](https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events) 进行扩展，减小理解成本
+
+- 接口统一：`ReactjsPlayer` 与 `GrindPlayer` 封装了统一的状态和方法，并通过 `ReactPlayerContext` 导出
+
+- 使用相对复杂：不同于其他的 h5 播放器，`ReactjsPlayer` 将控制权交给使用者，无法做到一行代码播放所有兼容的格式
 
 ## Getting started
 
 ```
 git clone https://github.com/goblin-laboratory/reactjs-player.git
 cd reactjs-player
 yarn install
-yarn start
 ```
 
-## Usage
-
-Demo page: https://goblin-laboratory.github.io/reactjs-player/
-
 ```
-npm install reactjs-player --save
-# or
-yarn add reactjs-player
-```
-
-```js
-import React, { Component } from 'react';
-import ReactPlayer from 'reactjs-player';
-
-const App = () => {
-  return <ReactPlayer kernel="hlsjs" src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" />;
-};
+cd packages/reactjs-player/
+yarn start
 ```
 
-## Getting started
-
 ```
-git clone https://github.com/goblin-laboratory/reactjs-player.git
-cd reactjs-player
-yarn install
-cd packages/reactjs-player
+cd packages/reactjs-player-demo/
 yarn start
 ```
 
@@ -69,16 +55,10 @@ yarn add reactjs-player
 
 ```js
 import React, { Component } from 'react';
-import ReactPlayer from 'reactjs-player';
+import ReactjsPlayer from 'reactjs-player';
 
 const App = () => {
-  return (
-    <ReactPlayer
-      kernel="hlsjs"
-      src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8"
-      type="application/x-mpegURL"
-    />
-  );
+  return <ReactjsPlayer kernel="hlsjs" src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" />;
 };
 ```
 
@@ -88,211 +68,12 @@ const App = () => {
 
 见 API 说明文档：[API.md](https://github.com/goblin-laboratory/reactjs-player/blob/master/docs/API.md)
 
-<!-- ### 常用场景说明
-
-- hlsjs: 支持 MSE 的浏览器上播放录像
-
-```jsx
-<ReactPlayer
-  kernel="hlsjs"
-  live={false}
-  src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8"
-  type="application/x-mpegURL"
-/>
-```
-
-- flvjs: 支持 MSE 与 networkStreamIO 的浏览器上播放直播
-
-```jsx
-<ReactPlayer kernel="flvjs" live={true} src="http://fms.cntv.lxdns.com/live/flv/channel89.flv" type="video/x-flv" />
-```
-
-- native: 原生支持 hls 的浏览器上播放录像（iOS/Android）
+## 注意事项
 
-```jsx
-<ReactPlayer
-  kernel="native"
-  live={false}
-  src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8"
-  type="application/x-mpegURL"
-/>
-```
+1. reactjs-player `position` 为 `absolute` ， 大小和位置依赖相对于 static 定位以外的第一个父元素，建议将父节点 `position` 设置为 `relative`，通过控制父节点的大小和位置来控制 reactjs-player 的布局结果，可以参考 demo 中的实现
 
-- native: 原生支持 hls 的浏览器上播放直播（iOS/Android）
+2. GrindPlayer 必须要大于 400x300 才能正常播放，请保证播放区域不小于 400x300，否则画面会出现显示不全的情况
 
-```jsx
-<ReactPlayer
-  kernel="native"
-  live={true}
-  src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8"
-  type="application/x-mpegURL"
-/>
-```
-
-- GrindPlayer: PC 端低版本浏览器播放录像
-
-```jsx
-<GrindPlayer live={false} src="http://fms.cntv.lxdns.com/live/flv/channel89.flv" type="video/rtmp" />
-```
-
-- GrindPlayer: PC 端低版本浏览器播放直播
-
-```jsx
-<GrindPlayer live={true} src="http://fms.cntv.lxdns.com/live/flv/channel89.flv" type="video/x-flv" />
-```
-
-## Props
-
-props 参考 video 属性： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video#Attributes
-
-| Prop            | Type     | Default | Description       |
-| --------------- | -------- | ------- | ----------------- |
-| `kernel`        | `Enum`   |         |                   |
-| `live`          | `Bool`   |         |                   |
-| `config`        | `Object` | `null`  | kernel config     |
-| --              | --       | --      | --                |
-| `src`           | `String` | `''`    |                   |
-| `type`          | `String` |         |                   |
-| `poster`        | `String` | `''`    |                   |
-| `controls`      | `Enum`   | `true`  |                   |
-| `muted`         | `Bool`   | `false` |                   |
-| `autoPlay`      | `Bool`   | `true`  | Not supported yet |
-| --              | --       | --      | --                |
-| `className`     | `String` | `''`    |                   |
-| `playerProps`   | `Object` | `null`  |                   |
-| `videoProps`    | `Object` | `null`  |                   |
-
-**kernel**
-
-| Value      | Description                                       |
-| ---------- | ------------------------------------------------- |
-| `'hlsjs'`  | use [hls.js](https://github.com/video-dev/hls.js) |
-| `'flvjs'`  | use [flv.js](https://github.com/bilibili/flv.js)  |
-| `'native'` | use native video                                  |
-
-**controls**
-
-| Value        | Description           |
-| ------------ | --------------------- |
-| `true`       | ReactPlayerSkin       |
-| `false`      | without controls      |
-| `'controls'` | video native controls |
-
-### Callback props
-
-[媒体事件](https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events)说明
-
-| Prop                 | Description                                          |
-| -------------------- | ---------------------------------------------------- |
-| `onKernelError`      | fire when flv.js / hls.js error                      |
-| `onFullscreenChange` | fire when `fullscreen` or `x5videofullscreen` change |
-| --                   | --                                                   |
-| `onCanPlay`          |                                                      |
-| `onDurationChange`   |                                                      |
-| `onTimeUpdate`       |                                                      |
-| `onPause`            |                                                      |
-| `onPlay`             |                                                      |
-| `onPlaying`          |                                                      |
-| `onEnded`            |                                                      |
-| `onSeeked`           |                                                      |
-| `onSeeking`          |                                                      |
-| `onCanPlayThrough`   |                                                      |
-| `onEmptied`          |                                                      |
-| `onEncrypted`        |                                                      |
-| `onError`            |                                                      |
-| `onLoadedData`       |                                                      |
-| `onLoadedMetadata`   |                                                      |
-| `onLoadStart`        |                                                      |
-| `onProgress`         |                                                      |
-| `onRateChange`       |                                                      |
-| `onStalled`          |                                                      |
-| `onSuspend`          |                                                      |
-| `onVolumeChange`     |                                                      |
-| `onWaiting`          |                                                      |
-| `onAbort`            |                                                      |
-
-## Methods
-
-| Method            | Return Type | Description |
-| ----------------- | ----------- | ----------- |
-| `isPlaying`       | `Bool`      |             |
-| `getDuration`     | `Number`    |             |
-| `getCurrentTime`  | `Number`    |             |
-| `setCurrentTime`  | ``          |
-| `getBuffered`     | `Object`    |             |
-| `getVolume`       | `Number`    |             |
-| `setVolume`       | ``          |
-| `isMuted`         | `Number`    |             |
-| `toggleMute`      | ``          |
-| `getPlaybackRate` | `Number`    |             |
-| `setPlaybackRate` | ``          |
-| `isPiP`           | `Bool`      |             |
-| `isFullscreen`    | `Object`    |             |
-
-> Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component
-
-### GrindPlayer
-
-| Prop             | Type     | Default                                                   | Description |
-| ---------------- | -------- | --------------------------------------------------------- | ----------- |
-| `live`           | `Bool`   | `true`                                                    |             |
-| `src`            | `String` | `''`                                                      |             |
-| `type`           | `String` | `'video/rtmp'`                                            |             |
-| `grindPlayerSwf` | `String` | `'https://unpkg.com/reactjs-player/dist/GrindPlayer.swf'` |             |
-| `flashlsOSMFSwf` | `String` | `'https://unpkg.com/reactjs-player/dist/flashlsOSMF.swf'` |             |
-
-> 注意：使用 Flash 时需要在根目录存放 crossdomain.xml 文件
-
-### ReactPlayerContext
-
-订阅 ReactPlayer 的 Context，必须在 ReactPlayer 的子组件中使用
-
-```jsx
-import React from 'react';
-import ReactPlayer from 'reactjs-player';
-
-const ReactPlayerContext = ReactPlayer.ReactPlayerContext;
-
-const ReactPlayerChild = () => {
-  const {
-    src,
-    loading,
-    paused,
-    waiting,
-    seeking,
-    ended,
-    duration,
-    currentTime,
-    buffered,
-    muted,
-    volume,
-    playbackRate,
-    fullscreen,
-
-    changeCurrentTime,
-    onPauseClick,
-    onPlayClick,
-    onMutedClick,
-    changeVolume,
-    onPiPClick,
-    requestFullscreen,
-    exitFullscreen,
-    changePlaybackRate,
-
-    playerMsg,
-  } = React.useContext(ReactPlayerContext);
-
-  return <>{loading && <div>loading</div>}</>;
-};
-
-const App = () => {
-  return (
-    <ReactPlayer kernel="hlsjs" src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8">
-      <ReactPlayerChild />
-    </ReactPlayer>
-  );
-};
-``` -->
 
 ## Supported media
 
@@ -313,4 +94,4 @@ const App = () => {
 
 ## Licensing
 
-ReactPlayer is [MIT licensed](./docs/LICENSE).
+ReactjsPlayer is [MIT licensed](./docs/LICENSE).