Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
65 commits
Select commit Hold shift + click to select a range
f1fbc7e
Initial commit
adimiz1 Jul 7, 2025
3a657d5
Merge branch 'master' into feature/video_active_layer
adimiz1 Jul 7, 2025
c3b177a
More work on the CDLVideoLayer
adimiz1 Jul 8, 2025
41eafc5
Improve sample app
adimiz1 Jul 8, 2025
0769344
Merge branch 'master' into feature/video_active_layer
adimiz1 Jul 9, 2025
3f85e3a
Add seekbar functionallity
adimiz1 Jul 9, 2025
cdf0422
Inital state
adimiz1 Jul 15, 2025
dfc1cf3
Add icons
adimiz1 Jul 15, 2025
be3cc87
Add loading spinner
adimiz1 Jul 22, 2025
f1097d9
Fix controls working when hidden
adimiz1 Jul 22, 2025
896573e
Code cleanup
adimiz1 Jul 28, 2025
dd422d3
Code cleanup
adimiz1 Jul 28, 2025
311a78e
Add position support for back and share buttons
adimiz1 Jul 28, 2025
0c3b040
Add show/hide center play button
adimiz1 Jul 28, 2025
d34e6cb
Add TopControlsProps
adimiz1 Jul 30, 2025
52a2016
Add landscape support
adimiz1 Jul 30, 2025
4e35503
Remove comments
adimiz1 Aug 12, 2025
90048df
Fix video position
adimiz1 Aug 13, 2025
9a9be9a
Merge master into feature/video_active_layer
adimiz1 Aug 19, 2025
1824e07
Fix TypeScript errors after merge resolution
adimiz1 Aug 19, 2025
208820d
Fix adapters
adimiz1 Aug 24, 2025
37530ab
Fix Android share issue
adimiz1 Aug 24, 2025
1406795
Fix lanscape buttons alignment issue
adimiz1 Aug 24, 2025
25daabd
Customize seekbar
adimiz1 Aug 25, 2025
7248295
Add width to the seekbar
adimiz1 Aug 25, 2025
f32d509
Change seekBar
adimiz1 Aug 26, 2025
3627486
Add customized buttons
adimiz1 Aug 26, 2025
97bffc0
Fix seekbar functionality
adimiz1 Aug 26, 2025
c878e10
Remove default full size button
adimiz1 Aug 26, 2025
7db9a81
Add subtitles button
adimiz1 Aug 26, 2025
853bd1b
Fix expo-video
adimiz1 Aug 26, 2025
15102d0
Add button groups
adimiz1 Aug 27, 2025
2e9b683
Change app icon and splash
adimiz1 Aug 27, 2025
9f38806
Change name
adimiz1 Aug 27, 2025
56df2fb
Improve layout sample
adimiz1 Aug 27, 2025
5f8ac71
Add YouTube layer
adimiz1 Sep 1, 2025
d716801
Add Netflix layer
adimiz1 Sep 1, 2025
d608056
Small fixes
adimiz1 Sep 1, 2025
0ee5d44
Modify main menu
adimiz1 Sep 1, 2025
7c28f28
Add video feed
adimiz1 Sep 1, 2025
bd72da5
Improve sample app
adimiz1 Sep 2, 2025
c147427
Enable subtitles and HLS
adimiz1 Sep 2, 2025
1fcdaeb
Improve AdvacnedVideoDemo screen
adimiz1 Sep 3, 2025
4a0ad69
Add supprot for landscape orientation
adimiz1 Sep 3, 2025
a3fb1a5
Small fixes
adimiz1 Sep 3, 2025
5411ce2
Add content
adimiz1 Sep 3, 2025
cbe84ac
Add content videos
adimiz1 Sep 4, 2025
9c6ce8a
Add quality selection
adimiz1 Sep 4, 2025
e50a793
Fix TikTok demo
adimiz1 Sep 18, 2025
4116dbf
Merge branch 'master' into feature/video_booth
adimiz1 Sep 20, 2025
b5b29a6
Remove sample apps
adimiz1 Sep 20, 2025
e89b297
Fix expo-video
adimiz1 Sep 20, 2025
38aee33
Add feature flag
adimiz1 Sep 20, 2025
9abbecb
Remove assets
adimiz1 Sep 20, 2025
5eeaec1
Add documentation
adimiz1 Sep 20, 2025
d244049
Fix subtitles
adimiz1 Sep 25, 2025
750060d
Fix sample app
adimiz1 Sep 25, 2025
3d9b13d
Update src/adapters/ExpoVideoAdapter.tsx
adimiz1 Oct 15, 2025
424a36e
Update src/adapters/ExpoVideoAdapter.tsx
adimiz1 Oct 15, 2025
c2a60b0
Update src/adapters/ExpoAVVideoAdapter.tsx
adimiz1 Oct 15, 2025
e3d71ab
Update src/AdvancedVideo.tsx
adimiz1 Oct 15, 2025
5dd08c6
Update src/adapters/ExpoAVVideoAdapter.tsx
adimiz1 Oct 15, 2025
24c1dcb
Improve subtitle parsing
adimiz1 Oct 15, 2025
cfa445f
Break down CLDVideoLayer
adimiz1 Oct 15, 2025
715c42e
Fix constants file
adimiz1 Oct 15, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,17 @@ npm install expo-video

**Note:** `expo-av` is deprecated in SDK 52 and removed in SDK 53. For newer Expo versions, use `expo-video`.

### For Video Layer with Controls (CLDVideoLayer)
If you want to use the `CLDVideoLayer` component with UI controls, you need to install additional dependencies:

```bash
npm install @expo/vector-icons expo-font
```
Or
```bash
yarn add @expo/vector-icons expo-font
```

## Usage
### Setup
The `Cloudinary` class is the main entry point for using the library. Your `cloud_name` is required to create an instance of this class. Your `api_key` and `api_secret` are also needed to perform secure API calls to Cloudinary (e.g., image and video uploads). Setting the configuration parameters can be done either programmatically using an appropriate constructor of the Cloudinary class or globally using an environment variable. You can find your account-specific configuration parameters in the **Dashboard** page of your [account console](https://cloudinary.com/console).
Expand Down Expand Up @@ -151,6 +162,62 @@ export default function App() {
};
```

### Video Layer with Controls
The `CLDVideoLayer` component provides a full-screen video experience with overlay controls, seekbar, and customizable actions. **Note: This requires `@expo/vector-icons` and `expo-font` to be installed.**

```tsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { CLDVideoLayer } from 'cloudinary-react-native';
import { Cloudinary } from '@cloudinary/url-gen';
import { useFonts } from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

const myCld = new Cloudinary({
cloud: {
cloudName: "demo",
},
});

export default function App() {
// Preload fonts to prevent warnings
const [fontsLoaded] = useFonts({
...Ionicons.font,
});

if (!fontsLoaded) {
return null; // or a loading component
}

const video = myCld.video('sea_turtle');

const handleBack = () => {
// Handle back navigation
};

const handleShare = () => {
// Handle custom share action
};

return (
<View style={styles.container}>
<CLDVideoLayer
cldVideo={video}
onBack={handleBack}
onShare={handleShare}
/>
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000',
},
});
```

### Uploading Assets
The following example performs an unsigned upload of a `string` using the default settings, a request upload callback, and an upload preset (required for unsigned uploads):

Expand Down
Loading