Commit 3bf4e2d5 authored by Martin Santangelo's avatar Martin Santangelo

Merge branch 'feat/implement-video-transcoding-message' into 'release/3.11.0'

Implement video transcoding message

See merge request !415
parents d4670902 41493c53
......@@ -770,6 +770,7 @@
"errorDownloading":"Error downloading file",
"errorMedia":"The media could not be loaded.",
"errorMediaDisplay":"There was an error displaying this media",
"transcodingMediaDisplay":"The video is being transcoded",
"stacktraceCopied":"Stack trace copied to the clipboard.",
"errorPinnedPost":"Sorry! error setting pinned post",
"errorShowActivity":"Can't show this activity",
......
......@@ -756,6 +756,7 @@
"errorDownloading": "Error bajando el archivo",
"errorMedia": "Medio no pudo cargarse",
"errorMediaDisplay": "Hubo un error mostrando este medio",
"transcodingMediaDisplay": "El video esta siendo procesado",
"stacktraceCopied": "Traza copiada al portapapeles",
"errorPinnedPost": "Ups, error fijando la publicación",
"errorShowActivity": "No puedo mostrar esta actividad",
......
......@@ -83,6 +83,10 @@ class AttachmentService {
return api.delete('api/v1/media/' + guid);
}
isTranscoding(guid) {
return api.get(`api/v1/media/transcoding/${guid}`);
}
/**
* Capture video
*/
......
import React, {
Component
} from 'react';
import React, {Component} from 'react';
import {
Text,
View,
TouchableOpacity,
StyleSheet
} from 'react-native';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
import FastImage from 'react-native-fast-image';
import {
observer
} from 'mobx-react/native'
import {observer} from 'mobx-react/native';
import ExplicitOverlay from '../common/components/explicit/ExplicitOverlay';
import { CommonStyle as CS } from '../styles/Common';
import {CommonStyle as CS} from '../styles/Common';
import i18n from '../common/services/i18n.service';
export default
@observer
class DiscoveryTile extends Component {
state = {
error: false,
style: null
}
style: null,
};
/**
* Derive state from props
......@@ -36,8 +26,8 @@ class DiscoveryTile extends Component {
static getDerivedStateFromProps(nextProps, prevState) {
if (prevState.size !== nextProps.size) {
return {
style: { width: nextProps.size, height: nextProps.size }
}
style: {width: nextProps.size, height: nextProps.size},
};
}
return null;
......@@ -50,35 +40,51 @@ class DiscoveryTile extends Component {
if (this.props.onPress) {
this.props.onPress(this.props.entity);
}
}
};
errorRender = (err) => {
errorRender = () => {
return (
<View style={CS.centered}>
<Text styles={[CS.colorWhite, CS.fontS, CS.textCenter]}>{i18n.t('discovery.imageError')}</Text>
<Text styles={[CS.colorWhite, CS.fontS, CS.textCenter]}>
{i18n.t('discovery.imageError')}
</Text>
</View>
)
}
);
};
setError = (err) => {
errorRenderVideo = () => {
return (
<TouchableOpacity
onPress={this._onPress}
style={[this.state.style, styles.tile]}>
<View style={[CS.flexContainer, CS.backgroundBlack]} />
</TouchableOpacity>
);
};
setError = () => {
this.setState({error: true});
}
};
setActive = () => {
this.setState({ready: true});
// bubble event up
this.props.onLoadEnd && this.props.onLoadEnd();
}
};
/**
* Render
*/
render() {
if (this.state.error) return this.errorRender();
const entity = this.props.entity;
if (!entity.is_visible){
if (this.state.error) {
return entity.custom_type && entity.custom_type === 'video'
? this.errorRenderVideo()
: this.errorRender();
}
if (!entity.is_visible) {
return null;
}
......@@ -89,22 +95,23 @@ class DiscoveryTile extends Component {
url.priority = FastImage.priority.low;
}
const show_overlay = (entity.shouldBeBlured() && !entity.is_parent_mature) && !(entity.shouldBeBlured() && entity.is_parent_mature);
const show_overlay =
entity.shouldBeBlured() &&
!entity.is_parent_mature &&
!(entity.shouldBeBlured() && entity.is_parent_mature);
const overlay = (show_overlay) ?
<ExplicitOverlay
entity={entity}
iconSize={45}
hideText={true}
/> :
null;
const overlay = show_overlay ? (
<ExplicitOverlay entity={entity} iconSize={45} hideText={true} />
) : null;
return (
<TouchableOpacity onPress={this._onPress} style={[ this.state.style, styles.tile ]}>
<View style={ [CS.flexContainer, CS.backgroundGreyed] }>
<TouchableOpacity
onPress={this._onPress}
style={[this.state.style, styles.tile]}>
<View style={[CS.flexContainer, CS.backgroundGreyed]}>
<FastImage
source={ url }
style={ CS.positionAbsolute }
source={url}
style={CS.positionAbsolute}
onLoadEnd={this.setActive}
onError={this.setError}
/>
......@@ -121,5 +128,5 @@ const styles = StyleSheet.create({
paddingBottom: 1,
paddingRight: 1,
paddingLeft: 1,
}
},
});
......@@ -28,6 +28,7 @@ import colors from '../styles/Colors';
import ExplicitImage from '../common/components/explicit/ExplicitImage';
import logService from '../common/services/log.service';
import i18n from '../common/services/i18n.service';
import attachmentService from '../common/services/attachment.service';
const isIOS = Platform.OS === 'ios';
......@@ -46,6 +47,7 @@ class MindsVideo extends Component {
error: false,
inProgress: false,
video: {},
transcoding: false,
};
}
......@@ -113,9 +115,20 @@ class MindsVideo extends Component {
this.setState({ error: false, inProgress: true, });
};
onError = (err) => {
logService.exception('[MindsVideo]', new Error(err));
this.setState({ error: true, inProgress: false, });
onError = async err => {
const entity = this.props.entity;
try {
const response = await attachmentService.isTranscoding(entity.entity_guid);
if (response.transcoding) {
this.setState({transcoding: true});
} else {
logService.exception('[MindsVideo]', new Error(err));
this.setState({ error: true, inProgress: false, });
}
} catch (error) {
logService.exception('[MindsVideo]', new Error(error));
this.setState({ error: true, inProgress: false, });
}
};
onLoadEnd = () => {
......@@ -241,7 +254,6 @@ class MindsVideo extends Component {
let { video, entity } = this.props;
let { paused, volume } = this.state;
const thumb_uri = entity ? (entity.get('custom_data.thumbnail_src') || entity.thumbnail_src) : null;
if (this.state.active || !thumb_uri) {
return (
<Video
......@@ -342,24 +354,33 @@ class MindsVideo extends Component {
</View>);
}
renderTranscodingOverlay() {
return (
<View
style={[styles.controlOverlayContainer, styles.controlOverlayContainerTransparent]}>
<Text style={styles.errorText}>{i18n.t('transcodingMediaDisplay')}</Text>
</View>
);
}
/**
* Render
*/
render() {
const { error, inProgress } = this.state;
const { error, inProgress, transcoding } = this.state;
const overlay = this.renderOverlay();
return (
<View style={[CS.flexContainer, CS.backgroundBlack]} >
<TouchableWithoutFeedback
style={CS.flexContainer}
onPress={this.openControlOverlay}
>
onPress={this.openControlOverlay}>
{ this.video }
</TouchableWithoutFeedback>
{ inProgress && this.renderInProgressOverlay() }
{ !inProgress && error && this.renderErrorOverlay() }
{ !inProgress && !error && overlay }
{ transcoding && this.renderTranscodingOverlay() }
{ !inProgress && !error && !transcoding && overlay }
</View>
)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment