Merge branch 'feat/implement-video-transcoding-message' into 'release/3.11.0' (3bf4e2d5) · Commits · Minds / Minds Mobile

locales/en.json

+1 −0

Original line number	Original line	Diff line number	Diff line
	@@ -770,6 +770,7 @@
	"errorDownloading":"Error downloading file",		"errorDownloading":"Error downloading file",
	"errorMedia":"The media could not be loaded.",		"errorMedia":"The media could not be loaded.",
	"errorMediaDisplay":"There was an error displaying this media",		"errorMediaDisplay":"There was an error displaying this media",
			"transcodingMediaDisplay":"The video is being transcoded",
	"stacktraceCopied":"Stack trace copied to the clipboard.",		"stacktraceCopied":"Stack trace copied to the clipboard.",
	"errorPinnedPost":"Sorry! error setting pinned post",		"errorPinnedPost":"Sorry! error setting pinned post",
	"errorShowActivity":"Can't show this activity",		"errorShowActivity":"Can't show this activity",

locales/es.json

+1 −0

Original line number	Original line	Diff line number	Diff line
	@@ -756,6 +756,7 @@
	"errorDownloading": "Error bajando el archivo",		"errorDownloading": "Error bajando el archivo",
	"errorMedia": "Medio no pudo cargarse",		"errorMedia": "Medio no pudo cargarse",
	"errorMediaDisplay": "Hubo un error mostrando este medio",		"errorMediaDisplay": "Hubo un error mostrando este medio",
			"transcodingMediaDisplay": "El video esta siendo procesado",
	"stacktraceCopied": "Traza copiada al portapapeles",		"stacktraceCopied": "Traza copiada al portapapeles",
	"errorPinnedPost": "Ups, error fijando la publicación",		"errorPinnedPost": "Ups, error fijando la publicación",
	"errorShowActivity": "No puedo mostrar esta actividad",		"errorShowActivity": "No puedo mostrar esta actividad",

src/common/services/attachment.service.js

+4 −0

Original line number	Original line	Diff line number	Diff line
	@@ -83,6 +83,10 @@ class AttachmentService {
	return api.delete('api/v1/media/' + guid);		return api.delete('api/v1/media/' + guid);
	}		}

			isTranscoding(guid) {
			return api.get(`api/v1/media/transcoding/${guid}`);
			}

	/**		/**
	* Capture video		* Capture video
	*/		*/

src/discovery/DiscoveryTile.js

+49 −42

Original line number	Original line	Diff line number	Diff line
	import React, {		import React, {Component} from 'react';
	Component
	} from 'react';

	import {		import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
	Text,
	View,
	TouchableOpacity,
	StyleSheet
	} from 'react-native';

	import FastImage from 'react-native-fast-image';		import FastImage from 'react-native-fast-image';

	import {		import {observer} from 'mobx-react/native';
	observer
	} from 'mobx-react/native'

	import ExplicitOverlay from '../common/components/explicit/ExplicitOverlay';		import ExplicitOverlay from '../common/components/explicit/ExplicitOverlay';
	import {CommonStyle as CS} from '../styles/Common';		import {CommonStyle as CS} from '../styles/Common';
	@@ -22,11 +13,10 @@ import i18n from '../common/services/i18n.service';
	export default		export default
	@observer		@observer
	class DiscoveryTile extends Component {		class DiscoveryTile extends Component {

	state = {		state = {
	error: false,		error: false,
	style: null		style: null,
	}		};

	/**		/**
	* Derive state from props		* Derive state from props
	@@ -36,8 +26,8 @@ class DiscoveryTile extends Component {
	static getDerivedStateFromProps(nextProps, prevState) {		static getDerivedStateFromProps(nextProps, prevState) {
	if (prevState.size !== nextProps.size) {		if (prevState.size !== nextProps.size) {
	return {		return {
	style: { width: nextProps.size, height: nextProps.size }		style: {width: nextProps.size, height: nextProps.size},
	}		};
	}		}

	return null;		return null;
	@@ -50,34 +40,50 @@ class DiscoveryTile extends Component {
	if (this.props.onPress) {		if (this.props.onPress) {
	this.props.onPress(this.props.entity);		this.props.onPress(this.props.entity);
	}		}
	}		};

	errorRender = (err) => {		errorRender = () => {
	return (		return (
	<View style={CS.centered}>		<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>		</View>
	)		);
	}		};

			errorRenderVideo = () => {
			return (
			<TouchableOpacity
			onPress={this._onPress}
			style={[this.state.style, styles.tile]}>
			<View style={[CS.flexContainer, CS.backgroundBlack]} />
			</TouchableOpacity>
			);
			};

	setError = (err) => {		setError = () => {
	this.setState({error: true});		this.setState({error: true});
	}		};

	setActive = () => {		setActive = () => {
	this.setState({ready: true});		this.setState({ready: true});
	// bubble event up		// bubble event up
	this.props.onLoadEnd && this.props.onLoadEnd();		this.props.onLoadEnd && this.props.onLoadEnd();
	}		};

	/**		/**
	* Render		* Render
	*/		*/
	render() {		render() {
	if (this.state.error) return this.errorRender();

	const entity = this.props.entity;		const entity = this.props.entity;

			if (this.state.error) {
			return entity.custom_type && entity.custom_type === 'video'
			? this.errorRenderVideo()
			: this.errorRender();
			}

	if (!entity.is_visible) {		if (!entity.is_visible) {
	return null;		return null;
	}		}
	@@ -89,18 +95,19 @@ class DiscoveryTile extends Component {
	url.priority = FastImage.priority.low;		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) ?		const overlay = show_overlay ? (
	<ExplicitOverlay		<ExplicitOverlay entity={entity} iconSize={45} hideText={true} />
	entity={entity}		) : null;
	iconSize={45}
	hideText={true}
	/> :
	null;

	return (		return (
	<TouchableOpacity onPress={this._onPress} style={[ this.state.style, styles.tile ]}>		<TouchableOpacity
			onPress={this._onPress}
			style={[this.state.style, styles.tile]}>
	<View style={[CS.flexContainer, CS.backgroundGreyed]}>		<View style={[CS.flexContainer, CS.backgroundGreyed]}>
	<FastImage		<FastImage
	source={url}		source={url}
	@@ -121,5 +128,5 @@ const styles = StyleSheet.create({
	paddingBottom: 1,		paddingBottom: 1,
	paddingRight: 1,		paddingRight: 1,
	paddingLeft: 1,		paddingLeft: 1,
	}		},
	});		});

src/media/MindsVideo.js

+29 −8

Original line number	Original line	Diff line number	Diff line
	@@ -28,6 +28,7 @@ import colors from '../styles/Colors';
	import ExplicitImage from '../common/components/explicit/ExplicitImage';		import ExplicitImage from '../common/components/explicit/ExplicitImage';
	import logService from '../common/services/log.service';		import logService from '../common/services/log.service';
	import i18n from '../common/services/i18n.service';		import i18n from '../common/services/i18n.service';
			import attachmentService from '../common/services/attachment.service';

	const isIOS = Platform.OS === 'ios';		const isIOS = Platform.OS === 'ios';

	@@ -46,6 +47,7 @@ class MindsVideo extends Component {
	error: false,		error: false,
	inProgress: false,		inProgress: false,
	video: {},		video: {},
			transcoding: false,
	};		};
	}		}

	@@ -113,9 +115,20 @@ class MindsVideo extends Component {
	this.setState({ error: false, inProgress: true, });		this.setState({ error: false, inProgress: true, });
	};		};

	onError = (err) => {		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));		logService.exception('[MindsVideo]', new Error(err));
	this.setState({ error: true, inProgress: false, });		this.setState({ error: true, inProgress: false, });
			}
			} catch (error) {
			logService.exception('[MindsVideo]', new Error(error));
			this.setState({ error: true, inProgress: false, });
			}
	};		};

	onLoadEnd = () => {		onLoadEnd = () => {
	@@ -241,7 +254,6 @@ class MindsVideo extends Component {
	let { video, entity } = this.props;		let { video, entity } = this.props;
	let { paused, volume } = this.state;		let { paused, volume } = this.state;
	const thumb_uri = entity ? (entity.get('custom_data.thumbnail_src') \|\| entity.thumbnail_src) : null;		const thumb_uri = entity ? (entity.get('custom_data.thumbnail_src') \|\| entity.thumbnail_src) : null;

	if (this.state.active \|\| !thumb_uri) {		if (this.state.active \|\| !thumb_uri) {
	return (		return (
	<Video		<Video
	@@ -342,24 +354,33 @@ class MindsVideo extends Component {
	</View>);		</View>);
	}		}

			renderTranscodingOverlay() {
			return (
			<View
			style={[styles.controlOverlayContainer, styles.controlOverlayContainerTransparent]}>
			<Text style={styles.errorText}>{i18n.t('transcodingMediaDisplay')}</Text>
			</View>
			);
			}

	/**		/**
	* Render		* Render
	*/		*/
	render() {		render() {
	const { error, inProgress } = this.state;		const { error, inProgress, transcoding } = this.state;

	const overlay = this.renderOverlay();		const overlay = this.renderOverlay();
	return (		return (
	<View style={[CS.flexContainer, CS.backgroundBlack]} >		<View style={[CS.flexContainer, CS.backgroundBlack]} >
	<TouchableWithoutFeedback		<TouchableWithoutFeedback
	style={CS.flexContainer}		style={CS.flexContainer}
	onPress={this.openControlOverlay}		onPress={this.openControlOverlay}>
	>
	{ this.video }		{ this.video }
	</TouchableWithoutFeedback>		</TouchableWithoutFeedback>
	{ inProgress && this.renderInProgressOverlay() }		{ inProgress && this.renderInProgressOverlay() }
	{ !inProgress && error && this.renderErrorOverlay() }		{ !inProgress && error && this.renderErrorOverlay() }
	{ !inProgress && !error && overlay }		{ transcoding && this.renderTranscodingOverlay() }
			{ !inProgress && !error && !transcoding && overlay }
	</View>		</View>
	)		)
	}		}