# react-native-video-bilibili

> react-native-video二次开发视频播放器，交互设计参考bilibili

Latest version **1.1.3** (published 2021-02-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-video-bilibili
pnpm add react-native-video-bilibili
yarn add react-native-video-bilibili
bun add react-native-video-bilibili
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2021-02-08 |
| First published | 2021-01-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 63.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | 1498710037@qq.com |
| Maintainers | 1uokun |
| Keywords | react-native-video, bilibili |

## Links

- npm: https://www.npmjs.com/package/react-native-video-bilibili
- Repository: https://github.com/1uokun/react-native-video-bilibili
- Homepage: https://github.com/1uokun/react-native-video-bilibili#readme
- Issues: https://github.com/1uokun/react-native-video-bilibili/issues
- npm.io page: https://npm.io/package/react-native-video-bilibili

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2021-02-08
- 1.1.2 — 2021-01-20

## README

## react-native-video-bilibili
📺react-native-video二次开发视频播放器，交互设计参考bilibili

No link, no dependencies, only javascript

## Install <a href="https://npmjs.org/package/react-native-video-bilibili"><img alt="npm version" src="http://img.shields.io/npm/v/react-native-video-bilibili.svg?style=flat-square"></a> <a href="https://npmjs.org/package/react-native-video-bilibili"><img alt="npm version" src="http://img.shields.io/npm/dm/react-native-video-bilibili.svg?style=flat-square"></a>
```bash
npm install react-native-video-bilibili
```

### Screenshot
<img src="https://github.com/1uokun/react-native-video-bilibili/blob/master/screenshot/overview.gif" style="width:40%">

### UX exploded view
<img src="https://github.com/1uokun/react-native-video-bilibili/blob/master/screenshot/ux.png" style="width:40%">

## Usage

```javascript
import Video from 'react-native-video-bilibili';

<Video
    ref={'player'}
    style={{width:"100%",height:300}}
    source={{uri: "https://media.w3.org/2010/05/sintel/trailer.mp4"}}
/>
```

## Configurable props

 * [...video.props][1]
 * containerStyle
    
   *container style*
 * style
   
   *react-native-video style*
   
 * styles
 
   deep merge styles with [VideoPlayerStyles][7]
 * lock🔒
 
   **🌟Lock all operations🌟**
 * [Custom Menus Component](#custom-menus-component)
    
    |Property|Type|Arguments|Description|
    |----|----|----|----|
    |renderCenterMenus|node|[state,props](#state-props)|Components displayed in the middle of the player, like volume or light control|
    |renderTopMenus|node|[state,props](#state-props)|Components displayed in the top of the player, like title or navigation control|
    |renderBottomMenus|node|[state,props](#state-props)|Components displayed in the bottom of the player, like seek bar or seek time control|
    |renderSeekTime|node|[state,props](#state-props)|Components displayed when you slide left and right, like show each frame of picture|
    |renderLoading|node|[state,props](#state-props)|Components displayed when video is buffering, like show buffering loading|
    |children|function|[state,props](#state-props)|`({state,props})=>(<View></View>)`|

    ##### state props
    Pass all `state` and external `props` of the parent component`<Provider>` to the child component`<Consumer>` based on [context API][4]

    **Provider**
    ```jsx harmony
    <Provider value={{
        state:this.state,
        props:{
            ...this.props,
            onCurrentTimeProgress:this.onCurrentTimeProgress,
            onSlidingComplete:this.onSlidingComplete,
            setPaused:this.setPaused
        },
    }}>
    </Provider>
    ```
    
    **Consumer**
    ```jsx harmony
    <Consumer>
        {({state, props}) =>
            <Animated.View>
                {props.renderCenterMenus(state, props)}
            </Animated.View>
        }
    </Consumer>
    ```
## Event props
 - [...video.props][2]
 - setFullScreen()
 - setNavigator()
 - setSetting()
 
### Ref Direct Manipulation
 - [...video methods][3]
    ```javascript
       this.player._root.doSth()
    ```
 - setPaused()
    
 - showMenusComponent()
 - showSeekTimerComponent()
 - <del>onOrientationChange({width,height})</del>
 
## Todo-list

#### 1.0

 - [x] [Gesture Responder System][5]👆
 - [x] [Animated Component][6]🏄
 - [x] Menus Component
 - [x] Loading Component
 
> if you accept `Link` the other library,please refer to 
> https://github.com/abbasfreestyle/react-native-af-video-player

#### 1.1

 - [x] add `lock` props
 - [x] add `children` props

#### 2.0 Future features

 - [ ] Native volume control
 - [ ] Native light control
 - [ ] 弹幕



  [1]: https://github.com/react-native-community/react-native-video#configurable-props
  [2]: https://github.com/react-native-community/react-native-video#event-props
  [3]: https://github.com/react-native-community/react-native-video#methods-1
  [4]: https://reactjs.org/docs/context.html
  [5]: https://github.com/1uokun/react-native-video-bilibili/blob/master/lib/ResponderView.js
  [6]: https://github.com/1uokun/react-native-video-bilibili/blob/master/lib/AnimatedComponent.js
  [7]: https://github.com/1uokun/react-native-video-bilibili/blob/master/lib/style/index.js

---
_Source: https://npm.io/package/react-native-video-bilibili · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._