Webrtc client side (#4026)

* WebRTC Server side * WebRTC client side * Bug fixes and improvements * Pushing UI improvements for webrtc (#3728) * Pushing UI improvements for webrtc * Updating webrtc css * PLT-3943 WebRTC P1: bug fixes and improvements * Video resolution set to std, reduce volume of ringtone and flip video horizontally * Fix calling a user B while WebRTC RHS is still opened * Leave RHS opened when call ends, Fix isBusy on popover and channel_header * Fix pre-release feature, RHS & System Console * PLT-3945 - Updating UI for webrtc (#3908) * PLT-3943 Webrtc p1 * Add ongoing call indicator when RHS is opened * UI updates to to webrtc notifcation (#3959)
2016-09-16 15:35:13 -03:00
--- a/webapp/components/post_view/components/post.jsx
+++ b/webapp/components/post_view/components/post.jsx
@@ -118,6 +118,10 @@ export default class Post extends React.Component {
            return true;
        }

+        if (nextProps.isBusy !== this.props.isBusy) {
+            return true;
+        }
+
        return false;
    }
    render() {
@@ -246,6 +250,8 @@ export default class Post extends React.Component {
                                displayNameType={this.props.displayNameType}
                                useMilitaryTime={this.props.useMilitaryTime}
                                isFlagged={this.props.isFlagged}
+                                status={this.props.status}
+                                isBusy={this.props.isBusy}
                            />
                            <PostBody
                                post={post}
@@ -282,5 +288,6 @@ Post.propTypes = {
    isCommentMention: React.PropTypes.bool,
    useMilitaryTime: React.PropTypes.bool.isRequired,
    isFlagged: React.PropTypes.bool,
-    status: React.PropTypes.string
+    status: React.PropTypes.string,
+    isBusy: React.PropTypes.bool
 };
--- a/webapp/components/post_view/components/post_header.jsx
+++ b/webapp/components/post_view/components/post_header.jsx
@@ -24,6 +24,8 @@ export default class PostHeader extends React.Component {
            <UserProfile
                user={this.props.user}
                displayNameType={this.props.displayNameType}
+                status={this.props.status}
+                isBusy={this.props.isBusy}
            />
        );
        let botIndicator;
@@ -98,5 +100,7 @@ PostHeader.propTypes = {
    compactDisplay: React.PropTypes.bool,
    displayNameType: React.PropTypes.string,
    useMilitaryTime: React.PropTypes.bool.isRequired,
-    isFlagged: React.PropTypes.bool.isRequired
+    isFlagged: React.PropTypes.bool.isRequired,
+    status: React.PropTypes.string,
+    isBusy: React.PropTypes.bool
 };
--- a/webapp/components/post_view/components/post_list.jsx
+++ b/webapp/components/post_view/components/post_list.jsx
@@ -316,6 +316,7 @@ export default class PostList extends React.Component {
                    useMilitaryTime={this.props.useMilitaryTime}
                    isFlagged={isFlagged}
                    status={status}
+                    isBusy={this.props.isBusy}
                />
            );

@@ -585,5 +586,6 @@ PostList.propTypes = {
    useMilitaryTime: React.PropTypes.bool.isRequired,
    isFocusPost: React.PropTypes.bool,
    flaggedPosts: React.PropTypes.object,
-    statuses: React.PropTypes.object
+    statuses: React.PropTypes.object,
+    isBusy: React.PropTypes.bool
 };
--- a/webapp/components/post_view/post_focus_view_controller.jsx
+++ b/webapp/components/post_view/post_focus_view_controller.jsx
@@ -9,6 +9,7 @@ import PostStore from 'stores/post_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
+import WebrtcStore from 'stores/webrtc_store.jsx';

 import Constants from 'utils/constants.jsx';
 const ScrollTypes = Constants.ScrollTypes;
@@ -26,6 +27,7 @@ export default class PostFocusView extends React.Component {
        this.onStatusChange = this.onStatusChange.bind(this);
        this.onPreferenceChange = this.onPreferenceChange.bind(this);
        this.onPostListScroll = this.onPostListScroll.bind(this);
+        this.onBusy = this.onBusy.bind(this);

        const focusedPostId = PostStore.getFocusedPostId();

@@ -38,13 +40,14 @@ export default class PostFocusView extends React.Component {
        const joinLeaveEnabled = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'join_leave', true);

        let statuses;
-        if (channel && channel.type !== Constants.DM_CHANNEL) {
+        if (channel) {
            statuses = Object.assign({}, UserStore.getStatuses());
        }

        this.state = {
            postList: PostStore.filterPosts(focusedPostId, joinLeaveEnabled),
            currentUser: UserStore.getCurrentUser(),
+            isBusy: WebrtcStore.isBusy(),
            profiles,
            statuses,
            scrollType: ScrollTypes.POST,
@@ -64,6 +67,7 @@ export default class PostFocusView extends React.Component {
        UserStore.addStatusesChangeListener(this.onStatusChange);
        EmojiStore.addChangeListener(this.onEmojiChange);
        PreferenceStore.addChangeListener(this.onPreferenceChange);
+        WebrtcStore.addBusyListener(this.onBusy);
    }

    componentWillUnmount() {
@@ -73,6 +77,7 @@ export default class PostFocusView extends React.Component {
        UserStore.removeStatusesChangeListener(this.onStatusChange);
        EmojiStore.removeChangeListener(this.onEmojiChange);
        PreferenceStore.removeChangeListener(this.onPreferenceChange);
+        WebrtcStore.removeBusyListener(this.onBusy);
    }

    onChannelChange() {
@@ -113,7 +118,7 @@ export default class PostFocusView extends React.Component {
    onStatusChange() {
        const channel = ChannelStore.getCurrent();
        let statuses;
-        if (channel && channel.type !== Constants.DM_CHANNEL) {
+        if (channel) {
            statuses = Object.assign({}, UserStore.getStatuses());
        }

@@ -144,6 +149,10 @@ export default class PostFocusView extends React.Component {
        this.setState({scrollType: ScrollTypes.FREE});
    }

+    onBusy(isBusy) {
+        this.setState({isBusy});
+    }
+
    render() {
        const postsToHighlight = {};
        postsToHighlight[this.state.scrollPostId] = true;
@@ -172,6 +181,7 @@ export default class PostFocusView extends React.Component {
                    emojis={this.state.emojis}
                    flaggedPosts={this.state.flaggedPosts}
                    statuses={this.state.statuses}
+                    isBusy={this.state.isBusy}
                />
            );
        }
--- a/webapp/components/post_view/post_view_controller.jsx
+++ b/webapp/components/post_view/post_view_controller.jsx
@@ -8,6 +8,7 @@ import PreferenceStore from 'stores/preference_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import PostStore from 'stores/post_store.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
+import WebrtcStore from 'stores/webrtc_store.jsx';

 import * as Utils from 'utils/utils.jsx';

@@ -30,6 +31,7 @@ export default class PostViewController extends React.Component {
        this.onPostListScroll = this.onPostListScroll.bind(this);
        this.onActivate = this.onActivate.bind(this);
        this.onDeactivate = this.onDeactivate.bind(this);
+        this.onBusy = this.onBusy.bind(this);

        const channel = props.channel;
        let profiles = UserStore.getProfiles();
@@ -54,6 +56,7 @@ export default class PostViewController extends React.Component {
            channel,
            postList: PostStore.filterPosts(channel.id, joinLeaveEnabled),
            currentUser: UserStore.getCurrentUser(),
+            isBusy: WebrtcStore.isBusy(),
            profiles,
            statuses,
            atTop: PostStore.getVisibilityAtTop(channel.id),
@@ -140,6 +143,7 @@ export default class PostViewController extends React.Component {
        PostStore.addChangeListener(this.onPostsChange);
        PostStore.addPostsViewJumpListener(this.onPostsViewJumpRequest);
        ChannelStore.addLastViewedListener(this.onSetNewMessageIndicator);
+        WebrtcStore.addBusyListener(this.onBusy);
    }

    onDeactivate() {
@@ -149,6 +153,7 @@ export default class PostViewController extends React.Component {
        PostStore.removeChangeListener(this.onPostsChange);
        PostStore.removePostsViewJumpListener(this.onPostsViewJumpRequest);
        ChannelStore.removeLastViewedListener(this.onSetNewMessageIndicator);
+        WebrtcStore.removeBusyListener(this.onBusy);
    }

    componentWillReceiveProps(nextProps) {
@@ -217,6 +222,10 @@ export default class PostViewController extends React.Component {
        }
    }

+    onBusy(isBusy) {
+        this.setState({isBusy});
+    }
+
    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.active !== this.props.active) {
            return true;
@@ -294,6 +303,10 @@ export default class PostViewController extends React.Component {
            return true;
        }

+        if (nextState.isBusy !== this.state.isBusy) {
+            return true;
+        }
+
        return false;
    }

@@ -326,6 +339,7 @@ export default class PostViewController extends React.Component {
                    lastViewed={this.state.lastViewed}
                    ownNewMessage={this.state.ownNewMessage}
                    statuses={this.state.statuses}
+                    isBusy={this.state.isBusy}
                />
            );
        }