rn-floating-video-widget v0.0.4

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 that. This library helps you with that issue if you are making a video application.

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>

FloatingVideo API

FloatingVideo API has been kept very simple and practical in use.

Methods

The 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.

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,  
 },});

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