React-native-floating-video NPM

rn-floating-video-widget

Fork of ttps://github.com/tiorubs/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.

Run the Example

To run the example app clone the project

git clone https://github.com/tiorubs/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:

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

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

<application>
    ...
    <service android:name="com.rnfloatingvideowidget.FloatingVideoWidgetShowService"
    android:enabled="true"></service>
    ...
</application>

Usage

For complete usage, see the example project.

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}`