Fix video position

Author: adimiz1

example/App.tsx

@@ -4,7 +4,6 @@ import { StatusBar } from 'expo-status-bar';
 import AdvancedImageDemo from './AdvancedImageDemo';
 import AdvancedVideoDemo from './AdvancedVideoDemo';
 import VideoLayerDemo from './VideoLayerDemo';
-import FullScreenPlayerDemo from './FullScreenPlayerDemo';
 
 const { height: screenHeight, width: screenWidth } = Dimensions.get('window');
 

example/VideoLayerDemo.tsx

@@ -34,7 +34,7 @@ export default function VideoLayerDemo({ onBack }: VideoLayerDemoProps) {
         onShare={handleShare}
         // Example: Position back button in top-left (NW) and share button in top-right (NE)
         backButtonPosition={ButtonPosition.NW}
-        shareButtonPosition={ButtonPosition.SE}
+        shareButtonPosition={ButtonPosition.NE}
         showCenterPlayButton={true}
         // Other positioning options:
         // ButtonPosition.N - Top center
@@ -46,11 +46,7 @@ export default function VideoLayerDemo({ onBack }: VideoLayerDemoProps) {
 
 const styles = StyleSheet.create({
   container: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
+    flex: 1,
     backgroundColor: '#000',
   },
 }); 

example/app.json

@@ -14,6 +14,14 @@
     "assetBundlePatterns": [
       "**/*"
     ],
+    "plugins": [
+      [
+        "expo-font",
+        {
+          "fonts": ["./node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf"]
+        }
+      ]
+    ],
     "ios": {
       "supportsTablet": true
     },

example/package-lock.json

@@ -11,10 +11,12 @@
   "dependencies": {
     "@expo/config": "~8.5.0",
     "@expo/metro-config": "~0.17.1",
+    "@expo/vector-icons": "^14.0.2",
     "cloudinary-react-native": "../",
     "expo": "~50.0.21",
     "expo-av": "14.0.7",
     "expo-crypto": "^14.1.5",
+    "expo-font": "~11.10.3",
     "expo-status-bar": "~1.11.1",
     "react": "18.0.0",
     "react-native": "0.73.6"

example/package.json

@@ -8,6 +8,7 @@ interface AdvancedVideoProps {
   videoUrl?: string;
   cldVideo?: CloudinaryVideo;
   videoStyle?: StyleProp<ViewStyle>;
+  resizeMode?: 'cover' | 'contain' | 'stretch';
   onPlaybackStatusUpdate?: (status: AVPlaybackStatus) => void;
   enableAnalytics?: boolean;
   autoTrackAnalytics?: boolean;
@@ -274,6 +275,7 @@ class AdvancedVideo extends Component<AdvancedVideoProps, AdvancedVideoState> {
         ref={this.videoRef}
         source={{ uri: videoUri }}
         style={this.props.videoStyle}
+        resizeMode={this.props.resizeMode || 'contain'}
         useNativeControls={false}
         onPlaybackStatusUpdate={this.onPlaybackStatusUpdate}
       />

example/yarn.lock

@@ -306,6 +306,7 @@ export class CLDVideoLayer extends React.Component<CLDVideoLayerProps, CLDVideoL
           cldVideo={cldVideo}
           videoUrl={videoUrl}
           videoStyle={StyleSheet.absoluteFill}
+          resizeMode="contain"
           onPlaybackStatusUpdate={this.handleStatusUpdate}
         />