rn-floating-video-widget - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #typescript #android #machine-learning #deep-learning #docker #macos #nodejs #awesome #vue #security #ios #openai

rn-floating-video-widget

(★ 58)

React Native Module for Floating/Popup video player on Android.

파일 탐색기

최종 버전 다운로드 (.zip)

- - Project.xml
- - Project_Default.xml
- .gitignore
- misc.xml
- modules.xml
- rn-floating-video-widget.iml
- vcs.xml
- - assetWizardSettings.xml
  - gradle.xml
  - misc.xml
  - modules.xml
  - runConfigurations.xml
  - workspace.xml
- - org.eclipse.buildship.core.prefs
- .classpath
- .project
- android.iml
- build.gradle
- gradlew
- gradlew.bat
- local.properties
- README.md
- - App-test.js
- - .project
  - build.gradle
  - gradle.properties
  - gradlew
  - gradlew.bat
  - settings.gradle
- .buckconfig
- .eslintrc.js
- .flowconfig
- .gitattributes
- .gitignore
- .prettierrc.js
- .watchmanconfig
- App.js
- app.json
- babel.config.js
- index.js
- metro.config.js
- package.json
- yarn.lock
- 1.png
- 2.png
.DS_Store
.gitignore
func.js
index.js
LICENSE
package.json
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/ammarahm-ed/rn-floating-video-widget

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd rn-floating-video-widget

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Gradle (Java/Kotlin)

보통 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
JDK (Java) Java/Kotlin 프로젝트를 빌드/실행하려면 필요합니다.
Gradle 레포에 포함된 gradlew(Gradle Wrapper)를 쓰면 Gradle을 따로 설치할 필요가 없습니다.

cd android

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

./gradlew build

Gradle로 빌드를 진행합니다.

✅ BUILD SUCCESSFUL 메시지가 뜨면 성공입니다. build/ 폴더에 결과물이 생성됩니다.

3. Node.js

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install rn-floating-video-widget --save

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn add rn-floating-video-widget

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# rn-floating-video-widget
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green?style=flat-square)](https://github.com/ammarahm-ed/rn-floating-video-widget/pulls)
[![rn-floating-video-widget](https://img.shields.io/npm/v/rn-floating-video-widget?color=green)](https://www.npmjs.com/package/rn-floating-video-widget)
[![rn-floating-video-widget](https://img.shields.io/npm/dt/rn-floating-video-widget?color=green)](https://www.npmjs.com/package/rn-floating-video-widget)

React Native Module for **Floating/Popup** video player on Android. From android 8.0 Oreo onwards we have `PictureInPicture` mode built into android which is great but even today there are many devices below android 8.0 and hence there is a need for some alternative. This library helps you with that issue if you are making a video application with floating video support starting from android 4.4.2 kitkat.

<p>
<img src="https://github.com/ammarahm-ed/rn-floating-video-widget/blob/master/Screenshots/1.png" width="300" >
<img src="https://github.com/ammarahm-ed/rn-floating-video-widget/blob/master/Screenshots/2.png" width="300" >
</p>

## Run the Example
To run the example app clone the project

git clone https://github.com/ammarahm-ed/rn-floating-video-widget.git

then run ` yarn or npm install` in the example folder and finally to run the example app:
       
   
    react-native run-android

## Installation

npm install rn-floating-video-widget --save
or if you use yarn:

yarn add rn-floating-video-widget

If you are using `react-native <= 0.59.0` you also need to run:

react-native link rn-floating-video-widget

Add permission `SYSTEM_ALERT_WINDOW` to `AndroidManifest.xml`:

```xml
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
```

Add the following `service` in `AndroidManifest.xml` inside `<application>` tag:

```xml
<application>
    ...
    <service android:name="com.rnfloatingvideowidget.FloatingVideoWidgetShowService"  
    android:enabled="true"></service>
    ...
</application>
```
 
## Usage
For complete usage, see the example project.

```jsx
import React from "react";
import {
  StyleSheet,
  View,
  TouchableOpacity,
  ToastAndroid,
  Text
} from "react-native";
import FloatingVideo from "rn-floating-video-widget";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      floating: false,
      granted: false
    };
    // The Data Object
    this.data = {
      video: {
        url:
          "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      },
      videos: [
        {
          url:
            "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        },
        {
          url:
            "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
        },
        {
          url:
            "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
        }
      ],
      seek: 10,
      index: 0
    };
  }

componentDidMount() {
    // Add event listeners

FloatingVideo.onClose(data => console.log(data));
    FloatingVideo.onOpen(data => console.log(data));
    FloatingVideo.onPlay(data => console.log(data));
    FloatingVideo.onPause(data => console.log(data));
    FloatingVideo.onNext(data => console.log(data));
    FloatingVideo.onPrev(data => console.log(data));
    FloatingVideo.onError(data => console.log(data));
  }

enterPipMode() {
    FloatingVideo.requestOverlayPermission()
      .then(() => {
        this.setState({
          floating: true,
          granted: true
        });
        FloatingVideo.open(this.data);
      })
      .catch(e => {
        ToastAndroid.show(
          "Please grant draw over other apps permission" + JSON.stringify(e),
          800
        );
      });
  }

componentWillUnmount() {
    FloatingVideo.removeAllListeners();
  }

render() {
    const floating = this.state.floating;

return (
      <View style={styles.container}>
        <TouchableOpacity
          style={styles.start}
          onPress={() => {
            this.enterPipMode();
          }}
        >
          <Text
            style={{
              color: "white",
              fontSize: 20
            }}
          >
            START
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,

alignItems: "center",
    paddingTop: 20,
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  start: {
    width: "90%",
    alignSelf: "center",
    padding: 15,
    backgroundColor: "red",
    justifyContent: "center",
    alignItems: "center",
    elevation: 5,
    borderRadius: 5
  },
  button: {
    alignSelf: "center",
    padding: 5,
    borderWidth: 1,
    borderColor: "red",
    backgroundColor: "white",
    justifyContent: "center",
    alignItems: "center",
    elevation: 5,
    borderRadius: 5
  }
});
```

## FloatingVideo API
FloatingVideo API has been kept very simple and practical in use.
### Methods
|Name|Arguments|Description|
|--|--|--|
|open|Data `object` (see below)|Initialise the player and play video
|play ||Play/Resume the video
|pause||Pause the video
|next||Play the next video in playlist
|prev||Play the previous video in playlist
|close||Close the Foating Video Player
|requestOverlayPermission||Ask for `draw over other apps` permission

#### `Data Object`
The video data object is a single object that can have the following properties

|Name|Type|Required|Description
|--|--|--|--|
| video |Object  | yes|A video object should have a `url` property.
| videos | Array|no |Array of the above video objects
| seek | number(ms) |no |seek video on load to this value
| index | number | no| index of `video` object in `videos` array.

### Event Listeners
All event listeners should have a callback function as an argument to handle the event.

|Name|Description|Data recieved from event|
|--|--|--|
| onOpen |Floating video is open and video is playing | `{type:"open",seek,index,url}`
| onPlay |Video started playing | `{type:"play",seek,index,url}`
| onPause|Video was paused| `{type:"pause",seek,index,url}` 
|onNext|Next video started playing| `{type:"next",seek,index,url}`
|onPrev|Previous video started playing| `{type:"prev",seek,index,url}`
|onClose|Floating Video Player was closed| `{type:"close",seek,index,url}`
|onError|An error occurred| `{type:"error",seek,index,url}`

Don't forget to call `FloatingVideo.removeAllListeners()` when component unmount.

## Todo List
 - [ ] Improve native code quality
 - [ ] Complete error handling
 - [ ] Use ExoPlayer w/o ExoMedia Library

### Thanks to developers of following libraries

- [react-native-float-widget](https://github.com/thebylito/react-native-float-widget)
 - [react-native-draw-overlays](https://github.com/MaxToyberman/react-native-draw-overlay)

### Dependencies

-  [ExoMedia Library Apache 2.0 Licence](https://github.com/brianwernick/ExoMedia)
 - [ExoPlayer Library Apache 2.0 Licence](https://github.com/google/ExoPlayer)

### MIT Licensed