Merge pull request #520 from ihmpavel/version-2.0.2

Version 2.0.2

CHANGELOG.md

@@ -1,5 +1,10 @@
 # ChangeLog
 
+## 2.0.2 (December 4, 2021)
+- Enhancements: Updated packages and bumped Expo SDK version
+- Enhancements: Added `autoHidePlayer` by (@hungvu193)[https://github.com/hungvu193] (#506)[https://github.com/ihmpavel/expo-video-player/pull/506]
+- Enhancements: Added `header` by (@Qeepsake)[https://github.com/Qeepsake] (#516)[https://github.com/ihmpavel/expo-video-player/pull/516]
+
 ## 2.0.1 (June 27, 2021)
 - Fix: Expo Web [#433](https://github.com/ihmpavel/expo-video-player/issues/433)
 

README.md

@@ -50,6 +50,7 @@ For default prop values, please visit [/lib/props.tsx](https://github.com/ihmpav
 | **icon** | `{ size?: number, color?: ColorValue, style?: TextStyle, pause?: JSX.Element, play?: JSX.Element, replay?: JSX.Element, fullscreen?: JSX.Element, exitFullscreen?: JSX.Element }` | Icon styling. Check more in the [example-app](https://github.com/ihmpavel/expo-video-player/blob/master/example-app/App.tsx) |
 | **fullscreen** | `{ enterFullscreen?: () => void, exitFullscreen?: () => void, inFullscreen?: boolean, visible?: boolean }` | Usage of `Fullscreen` mode is in the [example-app](https://github.com/ihmpavel/expo-video-player/blob/master/example-app/App.tsx#L154) |
 | **autoHidePlayer** | `boolean` | Prevent player from hiding after certain time, by setting it to `false` you need to tap the screen again to hide the player. Default is `true` |
+| **header** | `ReactNode` | Render header component same as in YouTube app. Default `undefined` |
 
 ## Compatibility
 Library version | Expo SDK version

dist/index.d.ts

@@ -17,7 +17,7 @@ declare const VideoPlayer: {
             fadeInDuration?: number | undefined;
             fadeOutDuration?: number | undefined;
         };
-        renderHeaderComponent: React.ReactNode;
+        header: React.ReactNode;
         style: {
             width?: number | undefined;
             height?: number | undefined;

dist/index.js

@@ -13,7 +13,7 @@ const VideoPlayer = (tempProps) => {
     let playbackInstance = null;
     let controlsTimer = null;
     let initialShow = props.defaultControlsVisible;
-    let renderHeaderComponent = props.renderHeaderComponent;
+    const header = props.header;
     const [errorMessage, setErrorMessage] = useState('');
     const controlsOpacity = useRef(new Animated.Value(props.defaultControlsVisible ? 1 : 0)).current;
     const [controlsState, setControlsState] = useState(props.defaultControlsVisible ? ControlStates.Visible : ControlStates.Hidden);
@@ -184,7 +184,7 @@ const VideoPlayer = (tempProps) => {
                 opacity: controlsOpacity,
             },
         ]}>
-        {renderHeaderComponent}
+        {header}
       </Animated.View>
 
       <TouchableWithoutFeedback onPress={animationToggle}>

dist/props.d.ts

@@ -2,7 +2,7 @@ import { AVPlaybackStatus, Video, VideoProps } from 'expo-av';
 import { ActivityIndicatorProps, TextStyle } from 'react-native';
 import { ColorValue } from 'react-native';
 import { ErrorType } from './constants';
-import { MutableRefObject } from 'react';
+import { MutableRefObject, ReactNode } from 'react';
 import { SliderProps } from '@react-native-community/slider';
 export declare type Props = RequiredProps & DefaultProps;
 export declare const defaultProps: DefaultProps;
@@ -25,7 +25,7 @@ declare type DefaultProps = {
         fadeInDuration?: number;
         fadeOutDuration?: number;
     };
-    renderHeaderComponent: React.ReactNode;
+    header: ReactNode;
     style: {
         width?: number;
         height?: number;

dist/props.js

@@ -45,5 +45,5 @@ export const defaultProps = {
         visible: true,
     },
     autoHidePlayer: true,
-    renderHeaderComponent: undefined,
+    header: undefined,
 };

example-app/App.tsx

@@ -192,6 +192,21 @@ const App = () => {
           width: inFullscreen2 ? Dimensions.get('window').height : 320,
         }}
       />
+
+      <Text style={styles.text}>Custom title</Text>
+      <VideoPlayer
+        videoProps={{
+          shouldPlay: false,
+          resizeMode: Video.RESIZE_MODE_CONTAIN,
+          source: {
+            uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+          },
+        }}
+        style={{
+          videoBackgroundColor: 'black',
+        }}
+        header={<Text style={{ color: '#FFF' }}>Custom title</Text>}
+      />
     </ScrollView>
   )
 }

lib/index.tsx

@@ -27,7 +27,7 @@ const VideoPlayer = (tempProps: Props) => {
   let playbackInstance: Video | null = null
   let controlsTimer: NodeJS.Timeout | null = null
   let initialShow = props.defaultControlsVisible
-  let renderHeaderComponent = props.renderHeaderComponent;
+  const header = props.header
 
   const [errorMessage, setErrorMessage] = useState('')
   const controlsOpacity = useRef(new Animated.Value(props.defaultControlsVisible ? 1 : 0)).current
@@ -241,13 +241,15 @@ const VideoPlayer = (tempProps: Props) => {
         onPlaybackStatusUpdate={updatePlaybackCallback}
       />
 
-      <Animated.View style={[
-           styles.topInfoWrapper,
-           {
-             opacity: controlsOpacity,
-           },
-        ]}>
-        {renderHeaderComponent}
+      <Animated.View
+        style={[
+          styles.topInfoWrapper,
+          {
+            opacity: controlsOpacity,
+          },
+        ]}
+      >
+        {header}
       </Animated.View>
 
       <TouchableWithoutFeedback onPress={animationToggle}>

lib/props.tsx

@@ -2,7 +2,7 @@ import { AVPlaybackStatus, Video, VideoProps } from 'expo-av'
 import { ActivityIndicatorProps, Dimensions, Platform, TextStyle } from 'react-native'
 import { ColorValue } from 'react-native'
 import { ErrorType } from './constants'
-import { MutableRefObject } from 'react'
+import { MutableRefObject, ReactNode } from 'react'
 import { SliderProps } from '@react-native-community/slider'
 
 // https://github.com/typescript-cheatsheets/react/issues/415
@@ -55,7 +55,7 @@ export const defaultProps = {
     visible: true,
   },
   autoHidePlayer: true,
-  renderHeaderComponent: undefined,
+  header: undefined,
 } as DefaultProps
 
 type RequiredProps = {
@@ -78,7 +78,7 @@ type DefaultProps = {
     fadeInDuration?: number
     fadeOutDuration?: number
   }
-  renderHeaderComponent: React.ReactNode
+  header: ReactNode
   style: {
     width?: number
     height?: number
@@ -101,6 +101,6 @@ type DefaultProps = {
     exitFullscreen?: () => void
     inFullscreen?: boolean
     visible?: boolean
-  },
+  }
   autoHidePlayer: boolean
 }

lib/utils.tsx

@@ -85,7 +85,7 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     flex: 1,
-    bottom: 0,
+    top: 0,
     left: 0,
     right: 0,
     zIndex: 999,

package.json

@@ -29,26 +29,26 @@
   },
   "devDependencies": {
     "@react-native-community/slider": "^4.1.12",
-    "@types/react": "^17.0.34",
-    "@types/react-native": "^0.66.4",
-    "@typescript-eslint/eslint-plugin": "^5.3.1",
-    "@typescript-eslint/parser": "^5.3.1",
-    "eslint": "^8.2.0",
+    "@types/react": "^17.0.37",
+    "@types/react-native": "^0.66.8",
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "^5.5.0",
+    "eslint": "^8.4.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-react-native": "^3.11.0",
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
     "expo": "^43.0.3",
     "expo-av": "^10.1.3",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-native": "^0.66.3",
-    "typescript": "^4.4.4"
+    "typescript": "^4.5.2"
   },
   "peerDependencies": {
     "@react-native-community/slider": ">=4.0.0",