diff --git a/README.md b/README.md index 213ab9e..571c2a7 100644 --- a/README.md +++ b/README.md @@ -1,114 +1,7 @@ # clwy-react-native-video-player -## Features +## Description -* Fullscreen support for Android and iOS! +* Fix deprecated removeEventListener function from react native 0.65+ -## Install -```shell -yarn add clwy-react-native-video-player react-native-orientation-locker @sayem314/react-native-keep-awake -``` - -If you use iOS - -```shell -npx pod-install -``` - -## Props - -Prop | Type | Required | Default | Description ---------------------- | -------- | -------- | ------------------------- | ----------- -url | string, number | Yes | | A URL string (or number for local) is required. -autoPlay | bool | No | false | Autoplays the video as soon as it's loaded -loop | bool | No | false | Allows the video to continuously loop -title | string | No | '' | Adds a title of your video at the top of the player -placeholder | string | No | undefined | Adds an image placeholder while it's loading and stopped at the beginning -logo | string | No | undefined | Adds an image logo at the top left corner of the video -theme | string | No | 'white' | Adds an optional theme colour to the players controls -hideFullScreenControl | bool | No | false | This hides the full screen control -style | number, object | No | {} | Apply styles directly to the Video player (ignored in fullscreen mode) -resizeMode | string | No | 'contain' | Fills the whole screen at aspect ratio. contain, cover etc -rotateToFullScreen | bool | No | false | Tapping the fullscreen button will rotate the screen. Also rotating the screen will automatically switch to fullscreen mode -fullScreenOnly | bool | No | false | This will play only in fullscreen mode -inlineOnly | bool | No | false | This hides the fullscreen button and only plays the video in inline mode -playInBackground | bool | No | false | Audio continues to play when app enters background. -playWhenInactive | bool | No | false | [iOS] Video continues to play when control or notification center are shown. -rate | number | No | 1 | Adjusts the speed of the video. 0 = stopped, 1.0 = normal -volume | number | No | 1 | Adjusts the volume of the video. 0 = mute, 1.0 = full volume -onMorePress | function | No | undefined | Adds an action button at the top right of the player. Use this callback function for your own use. e.g share link -onFullScreen | function | No | (value) => {} | Returns the fullscreen status whenever it toggles. Useful for situations like react navigation. -onTimedMetadata | function | No | undefined | Callback when the stream receives metadata -scrollBounce | bool | No | false | Enables the bounce effect for the ScrollView -lockPortraitOnFsExit | bool | No | false | Keep Portrait mode locked after Exiting from Fullscreen mode -lockRatio | number | No | undefined | Force a specific ratio to the Video player. e.g. lockRatio={16 / 9} -onLoad | function | No | (data) => {} | Returns data once video is loaded -onProgress | function | No | (progress) => {} | Returns progress data -onEnd | function | No | () => {} | Invoked when video finishes playing -onError | function | No | (error) => {} | Returns an error message argument -onPlay | function | No | (playing) => {} | Returns a boolean during playback -error | boolean, object | No | true | Pass in an object to Alert. See https://facebook.github.io/react-native/docs/alert.html -theme | object | No | all white | Pass in an object to theme. (See example below to see the full list of available settings) -controlDuration | number | No | 3 | Set the visibility time of the pause button and the progress bar after the video was started - -## Example - -```jsx -import React, { useState } from 'react' -import { StyleSheet, View } from 'react-native' -import Video from 'clwy-react-native-video-player' - -function VideoScreen({ route, navigation }) { - const [fullscreen, setFullscreen] = React.useState(false) - React.useEffect(() => { - navigation.setOptions({ headerShown: !fullscreen }) - }, [fullscreen, navigation]) - - const logo = 'logo.png' - const image = 'image.png' - const source = '1.mp4' - - const onFullScreen = (status) => { - setFullscreen(status); - }; - - return ( - - - ) -} - -const styles = StyleSheet.create({ - container: { - backgroundColor: '#fff', - flex: 1, - justifyContent: 'center', - }, -}) - -export default VideoScreen -``` - -# To Do - -- [ ] Option to use custom icons -- [ ] Support Immersive mode for Android -- [ ] improve multiple videos fullscreen support within a ScrollView -- [ ] investigate subtitle support -- [x] Support for iOS -- [x] Provide fullscreen support within a ScrollView -- [x] Customise specific components for better theming - ---- - -**MIT Licensed** diff --git a/components/Video.js b/components/Video.js index e3e28df..ead9bda 100644 --- a/components/Video.js +++ b/components/Video.js @@ -65,7 +65,9 @@ class Video extends Component { progress: 0, currentTime: 0, seeking: false, - renderError: false + renderError: false, + subscribeChange:'', + subscribeBackPress:'' } this.animInline = new Animated.Value(Win.width * 0.5625) this.animFullscreen = new Animated.Value(Win.width * 0.5625) @@ -74,13 +76,13 @@ class Video extends Component { } componentDidMount() { - Dimensions.addEventListener('change', this.onRotated) - BackHandler.addEventListener('hardwareBackPress', this.BackHandler) + this.state.subscribeChange = Dimensions.addEventListener('change', this.onRotated) + this.state.subscribeBackPress = BackHandler.addEventListener('hardwareBackPress', this.BackHandler) } componentWillUnmount() { - Dimensions.removeEventListener('change', this.onRotated) - BackHandler.removeEventListener('hardwareBackPress', this.BackHandler) + this.state.subscribeChange.remove() + this.state.subscribeBackPress.remove() } onLoadStart() { diff --git a/package.json b/package.json index 274f3c9..1b215e8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "clwy-react-native-video-player", - "version": "1.2.4", + "version": "1.2.5", "dependencies": { "react-native-linear-gradient": "^2.6.2" },