I am trying to print the Total Duration and the video size with each video using cameraRoll library for React native, but it is displaying null for all videos. Can this be fixed, so i can display each videos total duration and video size.
Link for CameraRoll library https://github.com/react-native-community/react-native-cameraroll
export default class camera extends Component {
constructor(props) {
super(props);
this.state = {
data:''
};
}
async componentDidMount()
{
if (Platform.OS === 'android') {
const result = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
{
title: 'Permission Explanation',
message: 'ReactNativeForYou would like to access your photos!',
},
);
if (result !== 'granted') {
console.log('Access to pictures was denied');
return;
}
}
CameraRoll.getPhotos({
first: 3,
assetType: 'Videos',
})
.then(res => {
this.setState({
data: res.edges,
});
})
.catch((error) => {
console.log(error);
});
}
render() {
return (
<View style={{flex: 1, flexDirection: 'row'}}>
<FlatList
data={this.state.data}
numColumns={1}
renderItem={({ item }) =>
<View
style={{ flexDirection: 'row',}}
>
<Video
ref={(ref) => {
this.player = ref
}}
source={{ uri: item.node.image.uri }}
onBuffer={this.onBuffer}
onError={this.videoError}
resizeMode='cover'
repeat={true}
muted={true}
playWhenInactive={true}
style={{
width: '30%',
height: 80,
marginLeft:10,
marginTop:10,
borderRadius:10,
}}
/>
<Text
style={{textAlign: 'center', alignSelf: 'stretch', textAlignVertical: 'center',
paddingLeft: 30, overflow: "hidden", }}
>{JSON.stringify(item.node.image.fileSize)} // this line should have displayed the video file size
</Text>
<Text
style={{textAlign: 'center', alignSelf: 'stretch', textAlignVertical: 'center',
paddingLeft: 30, overflow: "hidden", }}
>{item.node.image.playableDuration} //This line should have displayed the video duration
</Text>
</View>
}
/>
</View>
);
}
}
This is my Complete Code.
CameraRoll.getPhotos({
first: 3,
assetType: 'Videos',
includes: ['fileSize', 'playableDuration']
});