Make Youtube previews stop when the channel is changed

3 files changed, 21 insertions, 2 deletions

diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx
index d139cd388..b1657f0eb 100644
--- a/web/react/components/post_body.jsx
+++ b/web/react/components/post_body.jsx
@@ -120,7 +120,12 @@ export default class PostBody extends React.Component {
         }
 
         if (YoutubeVideo.isYoutubeLink(link)) {
-            return <YoutubeVideo link={link} />;
+            return (
+                <YoutubeVideo
+                    channelId={post.channel_id}
+                    link={link}
+                />
+            );
         }
 
         for (let i = 0; i < Constants.IMAGE_TYPES.length; i++) {
diff --git a/web/react/components/youtube_video.jsx b/web/react/components/youtube_video.jsx
index e9b698e55..bf3c43840 100644
--- a/web/react/components/youtube_video.jsx
+++ b/web/react/components/youtube_video.jsx
@@ -1,6 +1,8 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import ChannelStore from '../stores/channel_store.jsx';
+
 const ytRegex = /(?:http|https):\/\/(?:www\.)?(?:(?:youtube\.com\/(?:(?:v\/)|(\/u\/\w\/)|(?:(?:watch|embed\/watch)(?:\/|.*v=))|(?:embed\/)|(?:user\/[^\/]+\/u\/[0-9]\/)))|(?:youtu\.be\/))([^#\&\?]*)/;
 
 export default class YoutubeVideo extends React.Component {
@@ -12,6 +14,7 @@ export default class YoutubeVideo extends React.Component {
 
         this.play = this.play.bind(this);
         this.stop = this.stop.bind(this);
+        this.stopOnChannelChange = this.stopOnChannelChange.bind(this);
 
         this.state = {
             playing: false,
@@ -95,12 +98,22 @@ export default class YoutubeVideo extends React.Component {
 
     play() {
         this.setState({playing: true});
+
+        if (ChannelStore.getCurrentId() === this.props.channelId) {
+            ChannelStore.addChangeListener(this.stopOnChannelChange);
+        }
     }
 
     stop() {
         this.setState({playing: false});
     }
 
+    stopOnChannelChange() {
+        if (ChannelStore.getCurrentId() !== this.props.channelId) {
+            this.stop();
+        }
+    }
+
     render() {
         let header = 'Youtube';
         if (this.state.title) {
@@ -157,5 +170,6 @@ export default class YoutubeVideo extends React.Component {
 }
 
 YoutubeVideo.propTypes = {
+    channelId: React.PropTypes.string.isRequired,
     link: React.PropTypes.string.isRequired
 };
diff --git a/web/react/stores/channel_store.jsx b/web/react/stores/channel_store.jsx
index afc960fcf..93d996e0b 100644
--- a/web/react/stores/channel_store.jsx
+++ b/web/react/stores/channel_store.jsx
@@ -18,7 +18,7 @@ class ChannelStoreClass extends EventEmitter {
     constructor(props) {
         super(props);
 
-        this.setMaxListeners(11);
+        this.setMaxListeners(15);
 
         this.emitChange = this.emitChange.bind(this);
         this.addChangeListener = this.addChangeListener.bind(this);