From 955e9088d7dcc488aa27707e43eb581b45e19582 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 28 Feb 2017 23:48:41 +0100 Subject: [PATCH] Fix #561 - Detect presence of audio in video, hide mute toggle when none --- .../components/components/video_player.jsx | 61 ++++++++++++++++--- .../status/components/detailed_status.jsx | 2 +- 2 files changed, 55 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/components/components/video_player.jsx b/app/assets/javascripts/components/components/video_player.jsx index ccd67ddf09..5c2cef21a3 100644 --- a/app/assets/javascripts/components/components/video_player.jsx +++ b/app/assets/javascripts/components/components/video_player.jsx @@ -61,12 +61,14 @@ const VideoPlayer = React.createClass({ media: ImmutablePropTypes.map.isRequired, width: React.PropTypes.number, height: React.PropTypes.number, - sensitive: React.PropTypes.bool + sensitive: React.PropTypes.bool, + intl: React.PropTypes.object.isRequired, + autoplay: React.PropTypes.bool }, getDefaultProps () { return { - width: 196, + width: 239, height: 110 }; }, @@ -75,7 +77,8 @@ const VideoPlayer = React.createClass({ return { visible: !this.props.sensitive, preview: true, - muted: true + muted: true, + hasAudio: true }; }, @@ -108,8 +111,42 @@ const VideoPlayer = React.createClass({ }); }, + setRef (c) { + this.video = c; + }, + + handleLoadedData () { + if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) { + this.setState({ hasAudio: false }); + } + }, + + componentDidMount () { + if (!this.video) { + return; + } + + this.video.addEventListener('loadeddata', this.handleLoadedData); + }, + + componentDidUpdate () { + if (!this.video) { + return; + } + + this.video.addEventListener('loadeddata', this.handleLoadedData); + }, + + componentWillUnmount () { + if (!this.video) { + return; + } + + this.video.removeEventListener('loadeddata', this.handleLoadedData); + }, + render () { - const { media, intl, width, height, sensitive } = this.props; + const { media, intl, width, height, sensitive, autoplay } = this.props; let spoilerButton = (
@@ -117,6 +154,16 @@ const VideoPlayer = React.createClass({
); + let muteButton = ''; + + if (this.state.hasAudio) { + muteButton = ( +
+ +
+ ); + } + if (!this.state.visible) { if (sensitive) { return ( @@ -137,7 +184,7 @@ const VideoPlayer = React.createClass({ } } - if (this.state.preview) { + if (this.state.preview && !autoplay) { return (
{spoilerButton} @@ -149,8 +196,8 @@ const VideoPlayer = React.createClass({ return (
{spoilerButton} -
-
); } diff --git a/app/assets/javascripts/components/features/status/components/detailed_status.jsx b/app/assets/javascripts/components/features/status/components/detailed_status.jsx index 8a7c0c5d5e..caa46ff3c5 100644 --- a/app/assets/javascripts/components/features/status/components/detailed_status.jsx +++ b/app/assets/javascripts/components/features/status/components/detailed_status.jsx @@ -39,7 +39,7 @@ const DetailedStatus = React.createClass({ if (status.get('media_attachments').size > 0) { if (status.getIn(['media_attachments', 0, 'type']) === 'video') { - media = ; + media = ; } else { media = ; }