From 911338bdccd357b3d9985e4d9424494d6bd3a73d Mon Sep 17 00:00:00 2001 From: Isabelle Knott Date: Sat, 15 Apr 2017 19:12:47 -0400 Subject: Show error message if video cannot be loaded (#1879) --- .../components/components/video_player.jsx | 27 ++++++++++++++++++---- app/assets/javascripts/components/locales/en.jsx | 1 + 2 files changed, 23 insertions(+), 5 deletions(-) (limited to 'app/assets/javascripts') diff --git a/app/assets/javascripts/components/components/video_player.jsx b/app/assets/javascripts/components/components/video_player.jsx index e9e860e39..0da544746 100644 --- a/app/assets/javascripts/components/components/video_player.jsx +++ b/app/assets/javascripts/components/components/video_player.jsx @@ -7,7 +7,8 @@ import { isIOS } from '../is_mobile'; const messages = defineMessages({ toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' }, toggle_visible: { id: 'video_player.toggle_visible', defaultMessage: 'Toggle visibility' }, - expand_video: { id: 'video_player.expand', defaultMessage: 'Expand video' } + expand_video: { id: 'video_player.expand', defaultMessage: 'Expand video' }, + expand_video: { id: 'video_player.video_error', defaultMessage: 'Video could not be played' } }); const videoStyle = { @@ -30,7 +31,7 @@ const muteStyle = { zIndex: '5' }; -const spoilerStyle = { +const coverStyle = { marginTop: '8px', textAlign: 'center', height: '100%', @@ -94,7 +95,8 @@ const VideoPlayer = React.createClass({ visible: !this.props.sensitive, preview: true, muted: true, - hasAudio: true + hasAudio: true, + videoError: false }; }, @@ -142,12 +144,17 @@ const VideoPlayer = React.createClass({ } }, + handleVideoError () { + this.setState({ videoError: true }); + }, + componentDidMount () { if (!this.video) { return; } this.video.addEventListener('loadeddata', this.handleLoadedData); + this.video.addEventListener('error', this.handleVideoError); }, componentDidUpdate () { @@ -156,6 +163,7 @@ const VideoPlayer = React.createClass({ } this.video.addEventListener('loadeddata', this.handleLoadedData); + this.video.addEventListener('error', this.handleVideoError); }, componentWillUnmount () { @@ -164,6 +172,7 @@ const VideoPlayer = React.createClass({ } this.video.removeEventListener('loadeddata', this.handleLoadedData); + this.video.removeEventListener('error', this.handleVideoError); }, render () { @@ -194,7 +203,7 @@ const VideoPlayer = React.createClass({ if (!this.state.visible) { if (sensitive) { return ( -
+
{spoilerButton} @@ -202,7 +211,7 @@ const VideoPlayer = React.createClass({ ); } else { return ( -
+
{spoilerButton} @@ -220,6 +229,14 @@ const VideoPlayer = React.createClass({ ); } + if (this.state.videoError) { + return ( +
+ +
+ ); + } + return (
{spoilerButton} diff --git a/app/assets/javascripts/components/locales/en.jsx b/app/assets/javascripts/components/locales/en.jsx index fe7be0f24..5c1238524 100644 --- a/app/assets/javascripts/components/locales/en.jsx +++ b/app/assets/javascripts/components/locales/en.jsx @@ -129,6 +129,7 @@ const en = { "video_player.toggle_sound": "Toggle sound", "video_player.toggle_visible": "Toggle visibility", "video_player.expand": "Expand video", + "video_player.video_error": "Video could not be played", }; export default en; -- cgit