Skip to content

Open photo editor from video editor #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Open photo editor from video editor #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c6c9c1c
Open photo editor from video editor
HermanKhodyrevBanubaTechSupport Aug 22, 2024
c463547
Add logs
HermanKhodyrevBanubaTechSupport Aug 22, 2024
d860572
Migrate to 1.37.0
HermanKhodyrevBanubaTechSupport Oct 8, 2024
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
265 changes: 151 additions & 114 deletions App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,41 @@ import {
View,
Platform,
NativeModules,
TouchableOpacity
} from 'react-native';
const {SdkEditorModule} = NativeModules;

// Set Banuba license token for Video and Photo Editor SDK
const LICENSE_TOKEN = SET LICENSE TOKEN

function initSDK() {
SdkEditorModule.initSDK(LICENSE_TOKEN);
function initVideoEditorSDK() {
SdkEditorModule.initVideoEditorSDK(LICENSE_TOKEN);
}

function initPhotoEditorSDK() {
SdkEditorModule.initPhotoEditorSDK(LICENSE_TOKEN);
}

async function openVideoEditor() {
initSDK();
initVideoEditorSDK();
return await SdkEditorModule.openVideoEditor();
}

async function openVideoEditorPIP() {
initSDK();
initVideoEditorSDK();
return await SdkEditorModule.openVideoEditorPIP();
}

async function openVideoEditorTrimmer() {
initSDK();
initVideoEditorSDK();
return await SdkEditorModule.openVideoEditorTrimmer();
}

async function openIosPhotoEditor() {
await SdkEditorModule.initPhotoEditor(LICENSE_TOKEN);
return await SdkEditorModule.openPhotoEditor();
}

async function openAndroidPhotoEditor() {
initSDK();
async function openPhotoEditor() {
if (Platform.OS === 'android') {
SdkEditorModule.releaseVideoEditor();
}
SdkEditorModule.initPhotoEditorSDK(LICENSE_TOKEN);
return await SdkEditorModule.openPhotoEditor();
}

Expand All @@ -52,126 +55,160 @@ export default class App extends Component {

handleVideoExport(response) {
console.log('Export completed successfully: video = ' + response?.videoUri + '; videoPreview = '
+ response?.previewUri);
+ response?.previewUri + '; photoUri = ' + response?.photoUri);
}

handleSdkError(e) {
console.log('handle sdk error = ' + e.code);

var message = '';
switch (e.code) {
case 'ERR_SDK_NOT_INITIALIZED':
message = 'Banuba Video Editor SDK is not initialized: license token is unknown or incorrect.\nPlease check your license token or contact Banuba';
break;
case 'ERR_SDK_EDITOR_LICENSE_REVOKED':
message = 'License is revoked or expired. Please contact Banuba https://www.banuba.com/support';
break;
case 'ERR_MISSING_EXPORT_RESULT':
message = 'Missing video export result!';
case 'ERR_CODE_NO_HOST_CONTROLLER':
message = "Host Activity or ViewController does not exist!";
case 'ERR_VIDEO_EXPORT_CANCEL':
message = "Video export is canceled";
default:
message = '';
console.log(
'Banuba ' +
Platform.OS.toUpperCase() +
' Video Editor export video failed = ' +
e,
);
break;
}
this.setState({ errorText: message });
}

render() {
return (
<View style={styles.container}>
<Text style={{padding: 16, textAlign: 'center', fontSize: 18 }}>
Sample integration of Banuba Video and Photo Editor into React Native
</Text>

<Text
style={{
padding: 16,
textAlign: 'center',
color: '#ff0000',
fontSize: 16,
fontWeight: '800',
}}>
{this.state.errorText}
</Text>

<View style={{marginVertical: 8}}>
<Button
title="Open Photo Editor"
color="#00ab41"
onPress={async () => {
if (Platform.OS === 'android') {
openAndroidPhotoEditor()
.then(response => {
console.log('Exported photo = ' + response?.photoUri);
})
.catch(e => {
this.handleSdkError(e);
});
} else {
openIosPhotoEditor()
.then(response => {
console.log('Exported photo = ' + response?.photoUri);
})
.catch(e => {
this.handleSdkError(e);
});
}
}}
/>
</View>

<View style={{marginVertical: 8}}>
<Button
title="Open Video Editor - Default"
onPress={async () => {
openVideoEditor()
.then(response => { this.handleVideoExport(response); })
.catch(e => { this.handleSdkError(e); });
}}
/>
<View style={styles.headerContainer}>
<Text style={styles.title}>
Sample integration of Banuba Video and Photo Editor into React Native
</Text>
</View>

<View style={{marginVertical: 8}}>
<Button
title="Open Video Editor - PIP"
onPress={async () => {
<View style={styles.buttonsWrapper}>
<View style={styles.buttonsContainer}>
{this.state.errorText ? (
<Text style={styles.errorText}>{this.state.errorText}</Text>
) : null}

<TouchableOpacity
style={[styles.button, styles.photoButton]}
onPress={async () => {
openPhotoEditor()
.then(response => console.log('Exported photo = ' + response?.photoUri))
.catch(e => this.handleSdkError(e));
}}
>
<Text style={styles.buttonText}>Open Photo Editor</Text>
</TouchableOpacity>

<TouchableOpacity
style={styles.button}
onPress={async () => {
openVideoEditor()
.then(response => this.handleVideoExport(response))
.catch(e => this.handleSdkError(e));
}}
>
<Text style={styles.buttonText}>Open Video Editor - Default</Text>
</TouchableOpacity>

<TouchableOpacity
style={styles.button}
onPress={async () => {
openVideoEditorPIP()
.then(response => { this.handleVideoExport(response); })
.catch(e => { this.handleSdkError(e); });
}}
/>
</View>

<View style={{marginVertical: 8}}>
<Button
title="Open Video Editor - Trimmer"
onPress={async () => {
.then(response => this.handleVideoExport(response))
.catch(e => this.handleSdkError(e));
}}
>
<Text style={styles.buttonText}>Open Video Editor - PIP</Text>
</TouchableOpacity>

<TouchableOpacity
style={styles.button}
onPress={async () => {
openVideoEditorTrimmer()
.then(response => { this.handleVideoExport(response); })
.catch(e => { this.handleSdkError(e); });
}}
/>
.then(response => this.handleVideoExport(response))
.catch(e => this.handleSdkError(e));
}}
>
<Text style={styles.buttonText}>Open Video Editor - Trimmer</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}

handleSdkError(e) {
console.log('handle sdk error = ' + e.code);

var message = '';
switch (e.code) {
case 'ERR_SDK_NOT_INITIALIZED':
message = 'Banuba Video Editor SDK is not initialized: license token is unknown or incorrect.\nPlease check your license token or contact Banuba';
break;
case 'ERR_SDK_EDITOR_LICENSE_REVOKED':
message = 'License is revoked or expired. Please contact Banuba https://www.banuba.com/support';
break;
case 'ERR_MISSING_EXPORT_RESULT':
message = 'Missing video export result!';
case 'ERR_CODE_NO_HOST_CONTROLLER':
message = "Host Activity or ViewController does not exist!";
case 'ERR_VIDEO_EXPORT_CANCEL':
message = "Video export is canceled";
default:
message = '';
console.log(
'Banuba ' +
Platform.OS.toUpperCase() +
' Video Editor export video failed = ' +
e,
);
break;
}
this.setState({errorText: message});
}
}

const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
backgroundColor: '#fff',
marginVertical: 16,
},
headerContainer: {
height: '33%',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 16,
},
title: {
fontSize: 18,
textAlign: 'center',
},
buttonsWrapper: {
position: 'absolute',
top: 50,
bottom: 0,
left: 0,
right: 0,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 16,
},
buttonsContainer: {
alignItems: 'center',
width: '100%',
maxWidth: 300,
},
errorText: {
color: '#ff0000',
fontSize: 16,
fontWeight: '800',
textAlign: 'center',
marginBottom: 16,
},
button: {
backgroundColor: '#007bff',
paddingVertical: 12,
borderRadius: 30,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.3,
shadowRadius: 5,
elevation: 5,
width: '100%',
marginVertical: 8,
},
photoButton: {
backgroundColor: '#00ab41',
},
buttonText: {
color: 'white',
fontSize: 16,
fontWeight: '600',
},
});
});
5 changes: 2 additions & 3 deletions android/app/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,14 +142,13 @@ dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"

// Banuba Video Editor SDK dependencies
def banubaSdkVersion = '1.36.3'
def banubaSdkVersion = '1.37.0'
implementation "com.banuba.sdk:ffmpeg:5.1.3"
implementation "com.banuba.sdk:camera-sdk:${banubaSdkVersion}"
implementation "com.banuba.sdk:camera-ui-sdk:${banubaSdkVersion}"
implementation "com.banuba.sdk:core-sdk:${banubaSdkVersion}"
implementation "com.banuba.sdk:core-ui-sdk:${banubaSdkVersion}"
implementation "com.banuba.sdk:ve-flow-sdk:${banubaSdkVersion}"
implementation "com.banuba.sdk:ve-timeline-sdk:${banubaSdkVersion}"
implementation "com.banuba.sdk:ve-sdk:${banubaSdkVersion}"
implementation "com.banuba.sdk:ve-ui-sdk:${banubaSdkVersion}"
implementation "com.banuba.sdk:ve-gallery-sdk:${banubaSdkVersion}"
Expand All @@ -163,7 +162,7 @@ dependencies {
// Photo Editor SDK dependency
// WARNING!
// Remove this dependency if you only use Video Editor SDK
def banubaPESdkVersion = '1.2.5'
def banubaPESdkVersion = '1.2.7'
implementation "com.banuba.sdk:pe-sdk:${banubaPESdkVersion}"
}

Expand Down
Loading