Add CLDVideoPlayer class

example/src/App.tsx

@@ -1,41 +1,65 @@
-  import { StyleSheet, View } from 'react-native';
-  import {AdvancedImage, upload} from 'cloudinary-react-native';
-  import {Cloudinary} from '@cloudinary/url-gen';
-  import {scale} from "@cloudinary/url-gen/actions/resize";
-  import {cartoonify} from "@cloudinary/url-gen/actions/effect";
-  import {max} from "@cloudinary/url-gen/actions/roundCorners";
-  import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import {AdvancedImage, upload} from 'cloudinary-react-native';
+import {Cloudinary} from '@cloudinary/url-gen';
+import {scale} from "@cloudinary/url-gen/actions/resize";
+import {cartoonify} from "@cloudinary/url-gen/actions/effect";
+import {max} from "@cloudinary/url-gen/actions/roundCorners";
+import React, {useRef} from "react";
+import { streamingProfile } from '@cloudinary/url-gen/actions/transcode';
+import AdvancedVideo from '../../src/AdvancedVideo';
 
-  const cld = new Cloudinary({
-    cloud: {
-      cloudName: 'adimizrahi2'
-    },
-    url: {
-      secure: true
-    }
-  });
-  export default function App() {
-    function createMyImage() {
+const cld = new Cloudinary({
+  cloud: {
+    cloudName: 'demo'
+  },
+  url: {
+    secure: true
+  }
+});
+export default function App() {
 
-        var myImage = cld.image('sample').resize(scale().width(300)).effect(cartoonify()).roundCorners(max());
-        return myImage
+  const videoPlayer = useRef<typeof AdvancedVideo>(null);
+  function createMyImage() {
+    var myImage = cld.image('sample').resize(scale().width(300)).effect(cartoonify()).roundCorners(max());
+    return myImage
   }
-    return (
-      <View style={styles.container}>
-        <AdvancedImage cldImg={createMyImage()} style={{backgroundColor:"black", width:300, height:200}}/>
+
+  function createMyVideoObject() {
+    const myVideo = cld.video('sea_turtle.m3u8').transcode(streamingProfile("auto"))
+    return myVideo
+  };
+
+  return (
+    <View style={styles.container}>
+      <View>
+      <AdvancedImage cldImg={createMyImage()} style={{backgroundColor:"black", width:300, height:200}}/>
+    </View>
+      <View style={styles.videoContainer}>
+        <AdvancedVideo
+          ref={videoPlayer}
+          videoStyle={styles.video}
+          // cldVideo={createMyVideoObject()}
+          videoUrl={''}
+        />
       </View>
-    );
-  }
+    </View>
+  );
+}
 
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    box: {
-      width: 60,
-      height: 60,
-      marginVertical: 20,
-    },
-  });
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  videoContainer: {
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 20,
+  },
+  video: {
+    width: 400,
+    height: 220,
+  },
+});

package.json

@@ -113,6 +113,7 @@
     "domain-browser": "^1.2.0",
     "events": "^1.1.1",
     "expo-asset": "^8.10.1",
+    "expo-av": "^13.6.0",
     "expo-crypto": "^12.4.1",
     "https-browserify": "^0.0.1",
     "isomorphic-fetch": "^3.0.0",

src/AdvancedVideo.tsx

@@ -0,0 +1,44 @@
+import React, { Component, RefObject } from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+import { Video } from 'expo-av';
+import 'react-native-url-polyfill/auto';
+import type { CloudinaryVideo } from '@cloudinary/url-gen';
+import { SDKAnalyticsConstants } from './internal/SDKAnalyticsConstants';
+
+interface AdvancedVideoProps {
+  videoUrl?: string;
+  cldVideo?: CloudinaryVideo;
+  videoStyle?: StyleProp<ViewStyle>;
+}
+
+type VideoRef = Video | null;
+
+const AdvancedVideo = React.forwardRef<VideoRef, AdvancedVideoProps>(
+  (props, ref) => {
+    const getVideoUri = (): string => {
+      const { videoUrl, cldVideo } = props;
+      if (videoUrl) {
+        return videoUrl;
+      }
+      if (cldVideo) {
+        return cldVideo.toURL({ trackedAnalytics: SDKAnalyticsConstants });
+      }
+      return '';
+    };
+    const { videoStyle } = props;
+    const videoUri = getVideoUri();
+
+    if (!videoUri) {
+      console.warn('Video URI is empty. Cannot play the video.');
+    }
+
+    return (
+      <Video
+        ref={ref}
+        source={{ uri: videoUri }}
+        style={videoStyle}
+        useNativeControls // Enable native controls
+      />
+    );
+  });
+export default AdvancedVideo;

src/index.tsx

@@ -1,5 +1,7 @@
 import AdvancedImage from "./AdvancedImage";
+import AdvancedVideo from './AdvancedVideo';
 export { upload, unsignedUpload, uploadBase64, rename, explicit } from "./api/upload";
 export { UploadApiOptions } from './api/upload/model/params/upload-params';
 
 export { AdvancedImage };
+export { AdvancedVideo };