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/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:

<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

Data Object

The video data object is a single object that can have the following properties

Event Listeners

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

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
• react-native-draw-overlays

Dependencies

• ExoMedia Library Apache 2.0 Licence
• ExoPlayer Library Apache 2.0 Licence

MIT Licensed