From 82a40e4d9a46a3a347021d1abdba9ab6b14ccbcb Mon Sep 17 00:00:00 2001
From: Maxim Khlobystov <maxim.khlobystov@gmail.com>
Date: Tue, 6 Feb 2018 11:23:51 -0500
Subject: [PATCH 01/21] Handle voice users message to update the voice states
 properly on reconnect.

---
 .../api/voice-users/server/eventHandlers.js   |  2 +
 .../server/handlers/getVoiceUsers.js          | 63 +++++++++++++++++++
 .../server/modifiers/updateVoiceUser.js       |  1 +
 3 files changed, 66 insertions(+)
 create mode 100644 bigbluebutton-html5/imports/api/voice-users/server/handlers/getVoiceUsers.js

diff --git a/bigbluebutton-html5/imports/api/voice-users/server/eventHandlers.js b/bigbluebutton-html5/imports/api/voice-users/server/eventHandlers.js
index 8dc678dbcd..527325509d 100644
--- a/bigbluebutton-html5/imports/api/voice-users/server/eventHandlers.js
+++ b/bigbluebutton-html5/imports/api/voice-users/server/eventHandlers.js
@@ -3,8 +3,10 @@ import handleJoinVoiceUser from './handlers/joinVoiceUser';
 import handleLeftVoiceUser from './handlers/leftVoiceUser';
 import handleTalkingVoiceUser from './handlers/talkingVoiceUser';
 import handleMutedVoiceUser from './handlers/mutedVoiceUser';
+import handleGetVoiceUsers from './handlers/getVoiceUsers';
 
 RedisPubSub.on('UserLeftVoiceConfToClientEvtMsg', handleLeftVoiceUser);
 RedisPubSub.on('UserJoinedVoiceConfToClientEvtMsg', handleJoinVoiceUser);
 RedisPubSub.on('UserTalkingVoiceEvtMsg', handleTalkingVoiceUser);
 RedisPubSub.on('UserMutedVoiceEvtMsg', handleMutedVoiceUser);
+RedisPubSub.on('GetVoiceUsersMeetingRespMsg', handleGetVoiceUsers);
diff --git a/bigbluebutton-html5/imports/api/voice-users/server/handlers/getVoiceUsers.js b/bigbluebutton-html5/imports/api/voice-users/server/handlers/getVoiceUsers.js
new file mode 100644
index 0000000000..d66ec2f1de
--- /dev/null
+++ b/bigbluebutton-html5/imports/api/voice-users/server/handlers/getVoiceUsers.js
@@ -0,0 +1,63 @@
+import { check } from 'meteor/check';
+import VoiceUsers from '/imports/api/voice-users/';
+import Meetings from '/imports/api/meetings';
+import addVoiceUser from '../modifiers/addVoiceUser';
+import removeVoiceUser from '../modifiers/removeVoiceUser';
+import updateVoiceUser from '../modifiers/updateVoiceUser';
+
+export default function handleGetVoiceUsers({ body }, meetingId) {
+  const { users } = body;
+
+  check(meetingId, String);
+  check(users, Array);
+
+  const meeting = Meetings.findOne({ meetingId: meetingId });
+  const usersIds = users.map(m => m.intId);
+
+  const voiceUsersIdsToUpdate = VoiceUsers.find({
+    meetingId,
+    intId: { $in: usersIds },
+  }).fetch().map(m => m.intId);;
+
+  let voiceUsersUpdated = [];
+  users.forEach(user => {
+    if(voiceUsersIdsToUpdate.indexOf(user.intId) >= 0) {
+      // user already exist, then update
+      voiceUsersUpdated.push(updateVoiceUser(meetingId, {
+        intId: user.intId,
+        voiceUserId: user.voiceUserId,
+        talking: user.talking,
+        muted: user.muted,
+        voiceConf: meeting.voiceProp.voiceConf,
+        joined: true
+      }));
+    } else {
+      // user doesn't exist yet, then add it
+      addVoiceUser(meetingId, {
+        voiceUserId: user.voiceUserId,
+        intId: user.intId,
+        callerName: user.callerName,
+        callerNum: user.callerNum,
+        muted: user.muted,
+        talking: user.talking,
+        callingWith: user.callingWith,
+        listenOnly: user.listenOnly,
+        voiceConf: meeting.voiceProp.voiceConf,
+        joined: true
+      });
+    }
+  });
+
+  // removing extra users already existing in Mongo
+  const voiceUsersToRemove = VoiceUsers.find({
+    meetingId,
+    intId: { $nin: usersIds },
+  }).fetch();
+  voiceUsersToRemove.forEach(user => removeVoiceUser(meetingId, {
+    voiceConf: meeting.voiceProp.voiceConf,
+    voiceUserId: user.voiceUserId,
+    intId: user.intId
+  }));
+
+  return voiceUsersUpdated;
+}
diff --git a/bigbluebutton-html5/imports/api/voice-users/server/modifiers/updateVoiceUser.js b/bigbluebutton-html5/imports/api/voice-users/server/modifiers/updateVoiceUser.js
index 42ceb95d31..4ee402705c 100644
--- a/bigbluebutton-html5/imports/api/voice-users/server/modifiers/updateVoiceUser.js
+++ b/bigbluebutton-html5/imports/api/voice-users/server/modifiers/updateVoiceUser.js
@@ -11,6 +11,7 @@ export default function updateVoiceUser(meetingId, voiceUser) {
     talking: Match.Maybe(Boolean),
     muted: Match.Maybe(Boolean),
     voiceConf: String,
+    joined: Match.Maybe(Boolean)
   });
 
   const { intId } = voiceUser;

From 1d5bfce16765693a2a505d353b320210d6ae6b5d Mon Sep 17 00:00:00 2001
From: Augusto Bennemann <gutobenn@gmail.com>
Date: Thu, 18 Jan 2018 14:36:34 -0200
Subject: [PATCH 02/21] Fix share/unshare video button style and remove old
 files

---
 .../actions-bar/video-button/component.jsx    | 23 -------------------
 .../actions-bar/video-button/container.jsx    |  0
 .../video-dock/video-menu/component.jsx       | 21 +++++++++++++++++
 .../video-dock/video-menu/styles.scss         | 15 ++++++++++++
 4 files changed, 36 insertions(+), 23 deletions(-)
 delete mode 100644 bigbluebutton-html5/imports/ui/components/actions-bar/video-button/component.jsx
 delete mode 100644 bigbluebutton-html5/imports/ui/components/actions-bar/video-button/container.jsx
 create mode 100644 bigbluebutton-html5/imports/ui/components/video-dock/video-menu/styles.scss

diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/video-button/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/video-button/component.jsx
deleted file mode 100644
index 71bd4c06e8..0000000000
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/video-button/component.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import Button from '/imports/ui/components/button/component';
-// import { styles } from '../styles.scss';
-
-export default class JoinVideo extends React.Component {
-
-  handleClick() {
-  }
-
-  render() {
-    return (
-      <Button
-        onClick={this.handleClick}
-        label={'Cam Off'}
-        color={'primary'}
-        icon={'video_off'}
-        size={'lg'}
-        circle
-        style={{ visibility: 'hidden' }}
-      />
-    );
-  }
-}
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/video-button/container.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/video-button/container.jsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx b/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx
index 94129c16fe..f49e5d33cc 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '/imports/ui/components/button/component';
 import { defineMessages, injectIntl, intlShape } from 'react-intl';
+import { styles } from './styles';
 
 const intlMessages = defineMessages({
   joinVideo: {
@@ -43,7 +44,27 @@ class JoinVideoOptions extends React.Component {
     }
 
     return (
+      <span className={styles.container}>
+        <Button
+          className={styles.button}
+          onClick={handleCloseVideo}
+          label={intl.formatMessage(intlMessages.leaveVideo)}
+          hideLabel
+          aria-label={intl.formatMessage(intlMessages.leaveVideo)}
+          color="danger"
+          icon="video"
+          size="lg"
+          circle
+          disabled={isWaitingResponse}
+        />
+      </span>
+    );
+  }
+
+  return (
+    <span className={styles.container}>
       <Button
+        className={styles.button}
         onClick={handleJoinVideo}
         label={intl.formatMessage(intlMessages.joinVideo)}
         hideLabel
diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/styles.scss b/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/styles.scss
new file mode 100644
index 0000000000..d96d5b04cb
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/styles.scss
@@ -0,0 +1,15 @@
+.container {
+
+  span:first-child{
+    box-shadow: 0 2px 5px 0 rgb(0, 0, 0);
+  }
+
+}
+
+.button {
+
+  &:focus {
+    outline: none !important;
+  }
+
+}

From 3af600d015a65d09b437d59fe7d6814e64f0ef98 Mon Sep 17 00:00:00 2001
From: Lucas Fialho Zawacki <lfzawacki@gmail.com>
Date: Mon, 22 Jan 2018 16:09:06 +0000
Subject: [PATCH 03/21] User video tags with new design [part 1]

---
 .../client/compatibility/adjust-videos.js     |  8 +--
 .../ui/components/video-dock/component.jsx    | 50 +++++++++++++++----
 .../ui/components/video-dock/styles.scss      | 40 +++++++++++++++
 3 files changed, 86 insertions(+), 12 deletions(-)

diff --git a/bigbluebutton-html5/client/compatibility/adjust-videos.js b/bigbluebutton-html5/client/compatibility/adjust-videos.js
index bdacb7f984..f168bd344f 100644
--- a/bigbluebutton-html5/client/compatibility/adjust-videos.js
+++ b/bigbluebutton-html5/client/compatibility/adjust-videos.js
@@ -59,7 +59,7 @@
     const x = e.outerWidth() - 1;
     const y = e.outerHeight() - 1;
 
-    const videos = $("#" + tagId + " video:visible");
+    const videos = $("#" + tagId + " videoContainer:visible");
 
     const best = findBestConfiguration(x, y, videos.length);
 
@@ -79,10 +79,12 @@
       const videoLeft = `left: ${left}px;`;
 
       $(this).attr('style', videoTop + videoLeft);
+
+      $(this).parent().attr('style', `width: ${best.width-2}px; height${best.height-2}px;`);
     });
 
-    videos.attr('width', best.width);
-    videos.attr('height', best.height);
+    videos.attr('width', best.width-2);
+    videos.attr('height', best.height-2);
   }
 
   window.adjustVideos = adjustVideos;
diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
index 95dfcaa603..e334889515 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
@@ -40,19 +40,39 @@ class VideoElement extends Component {
   }
 
   render() {
+    let cssClass;
+    if (this.props.shared || !this.props.localCamera) {
+      cssClass = styles.sharedWebcamVideoLocal;
+    }
+    else {
+      cssClass = styles.sharedWebcamVideo;
+    }
     return (
-      <video
-        id={`video-elem-${this.props.videoId}`}
-        width={320}
-        height={240}
-        autoPlay="autoPlay"
-        playsInline="playsInline"
-      />
+      <div className={styles.videoContainer + " " + cssClass} >
+        { this.props.localCamera ?
+            <video id="shareWebcam" muted={true} autoPlay={true} playsInline={true} />
+          :
+            <video id={`video-elem-${this.props.videoId}`} width={320} height={240} autoPlay={true} playsInline={true} />
+        }
+        <div className={styles.videoText}>
+          <span className={styles.userName}>{this.props.name}</span>
+          <Button
+            label=""
+            className={styles.pauseButton}
+            icon={'unmute'}
+            size={'sm'}
+            circle
+            onClick={() => {}}
+          />
+        </div>
+      </div>
     );
   }
 
   componentDidMount() {
-    this.props.onMount(this.props.videoId, false);
+    if (typeof this.props.onMount === 'function' && !this.props.localCamera) {
+      this.props.onMount(this.props.videoId, false);
+    }
   }
 }
 
@@ -318,7 +338,7 @@ class VideoDock extends Component {
 
     let peerObj;
     if (shareWebcam) {
-      options.localVideo = this.refs.videoInput;
+      options.localVideo = document.getElementById("shareWebcam");
       peerObj = kurentoUtils.WebRtcPeer.WebRtcPeerSendonly;
     } else {
       peerObj = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly;
@@ -579,16 +599,20 @@ class VideoDock extends Component {
   }
 
   render() {
+<<<<<<< HEAD
     let cssClass;
     if (this.state.sharedWebcam) {
       cssClass = styles.sharedWebcamVideoLocal;
     } else {
       cssClass = styles.sharedWebcamVideo;
     }
+=======
+>>>>>>> 4a34657... User video tags with new design [part 1]
 
     return (
       <div className={styles.videoDock}>
         <div id="webcamArea">
+<<<<<<< HEAD
           {Object.keys(this.state.videos).map(id => (
             <VideoElement videoId={id} key={id} onMount={this.initWebRTC.bind(this)} />
           ))}
@@ -600,6 +624,14 @@ class VideoDock extends Component {
             className={cssClass}
             ref="videoInput"
           />
+=======
+          {Object.keys(this.state.videos).map((id) => {
+            return (
+              <VideoElement videoId={id} key={id} name={id} localCamera={false} onMount={this.initWebRTC.bind(this)} />
+            );
+          })}
+          <VideoElement shared={this.state.sharedWebcam} name={this.myId} localCamera={true} />
+>>>>>>> 4a34657... User video tags with new design [part 1]
         </div>
       </div>
     );
diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/styles.scss b/bigbluebutton-html5/imports/ui/components/video-dock/styles.scss
index 2dce62f218..7d5ce0ab64 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/styles.scss
@@ -20,3 +20,43 @@
 .sharedWebcamVideoLocal {
   display: normal;
 }
+
+.videoContainer {
+  background-color: #999;
+}
+
+.videoText {
+  // position: absolute;
+  margin-top: -30px;
+  // padding: 0 5px;
+  // width: 100%;
+  z-index: -1;
+}
+
+.userName {
+  color: #FFFFFF;
+  background: #555;
+  padding: 3px 8px;
+  border-radius: 0.75rem;
+  font-size: 10px;
+  line-height: 13px;
+  text-align: center;
+}
+
+.pauseButton {
+  float: right;
+
+  span:last-child {
+    display: none;
+  } // TODO fix it better
+
+  span:first-child {
+    background: #D8D8D8;
+    border: 1px solid #555;
+    
+    i {
+      font-size: 11px; // TODO size should be set on button?
+      color: #555;
+    }
+  }
+}

From db7bd9e9b696abd460ae74941e12b4ae959ea732 Mon Sep 17 00:00:00 2001
From: Augusto Bennemann <gutobenn@gmail.com>
Date: Mon, 22 Jan 2018 16:02:09 -0200
Subject: [PATCH 04/21] Display usernames on videos

---
 .../ui/components/video-dock/component.jsx    | 48 +++++++------------
 1 file changed, 18 insertions(+), 30 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
index e334889515..498003367c 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
@@ -90,7 +90,8 @@ class VideoDock extends Component {
 
     this.state = {
       videos: {},
-      sharedWebcam: false,
+      sharedWebcam : false,
+      userNames: {},
     };
 
     this.unshareWebcam = this.unshareWebcam.bind(this);
@@ -142,6 +143,9 @@ class VideoDock extends Component {
           this.start(user.userId, false);
         }, INITIAL_SHARE_WAIT_TIME);
       }
+      if (user.userId === userId){
+        this.myName = user.name;
+      }
     });
 
     document.addEventListener('joinVideo', this.shareWebcam.bind(this)); // TODO find a better way to do this
@@ -260,6 +264,13 @@ class VideoDock extends Component {
     const { intl } = this.props;
 
     console.log(`Starting video call for video: ${id} with ${shareWebcam}`);
+    let userNames = this.sate.userNames;
+    users.forEach((user) => {
+      if (user.userId === id) {
+        userNames[id] = user.name;
+      }
+    });
+    this.setState({userNames: userNames});
 
     this.cameraTimeouts[id] = setTimeout(() => {
       log('error', `Camera share has not suceeded in ${CAMERA_SHARE_FAILED_WAIT_TIME}`);
@@ -274,7 +285,7 @@ class VideoDock extends Component {
 
     if (shareWebcam) {
       VideoService.joiningVideo();
-      this.setState({ sharedWebcam: true });
+      this.setState({sharedWebcam: true});
       this.myId = id;
       this.initWebRTC(id, true);
     } else {
@@ -439,9 +450,11 @@ class VideoDock extends Component {
 
   destroyVideoTag(id) {
     const videos = this.state.videos;
+    const userNames = this.state.userNames;
 
     delete videos[id];
-    this.setState({ videos });
+    delete userNames[id]
+    this.setState({videos: videos, userNames: userNames})
 
     if (id == this.myId) {
       this.setState({ sharedWebcam: false });
@@ -599,39 +612,15 @@ class VideoDock extends Component {
   }
 
   render() {
-<<<<<<< HEAD
-    let cssClass;
-    if (this.state.sharedWebcam) {
-      cssClass = styles.sharedWebcamVideoLocal;
-    } else {
-      cssClass = styles.sharedWebcamVideo;
-    }
-=======
->>>>>>> 4a34657... User video tags with new design [part 1]
-
     return (
       <div className={styles.videoDock}>
         <div id="webcamArea">
-<<<<<<< HEAD
-          {Object.keys(this.state.videos).map(id => (
-            <VideoElement videoId={id} key={id} onMount={this.initWebRTC.bind(this)} />
-          ))}
-          <video
-            autoPlay="autoPlay"
-            playsInline="playsInline"
-            muted="muted"
-            id="shareWebcamVideo"
-            className={cssClass}
-            ref="videoInput"
-          />
-=======
           {Object.keys(this.state.videos).map((id) => {
             return (
-              <VideoElement videoId={id} key={id} name={id} localCamera={false} onMount={this.initWebRTC.bind(this)} />
+              <VideoElement videoId={id} key={id} name={this.state.userNames[id]} localCamera={false} onMount={this.initWebRTC.bind(this)} />
             );
           })}
-          <VideoElement shared={this.state.sharedWebcam} name={this.myId} localCamera={true} />
->>>>>>> 4a34657... User video tags with new design [part 1]
+          <VideoElement shared={this.state.sharedWebcam} name={this.state.userNames[this.myId]} localCamera={true} />
         </div>
       </div>
     );
@@ -648,7 +637,6 @@ class VideoDock extends Component {
     if (!currentUsers)
       return false;
 
-
     // Map user objectos to an object in the form {userId: has_stream}
     currentUsers.forEach((user) => {
       users[user.userId] = user.has_stream;

From 541b06393cdd092ef75d63983b88627bcfa4ddaf Mon Sep 17 00:00:00 2001
From: Augusto Bennemann <gutobenn@gmail.com>
Date: Mon, 5 Feb 2018 17:52:07 -0200
Subject: [PATCH 05/21] Video positioning. Code still bad.

---
 .../client/compatibility/adjust-videos.js     | 44 +++++++++-------
 .../imports/ui/components/media/styles.scss   | 31 +++++++++--
 .../ui/components/video-dock/component.jsx    | 17 +++---
 .../ui/components/video-dock/styles.scss      | 52 ++++++++++++++-----
 4 files changed, 98 insertions(+), 46 deletions(-)

diff --git a/bigbluebutton-html5/client/compatibility/adjust-videos.js b/bigbluebutton-html5/client/compatibility/adjust-videos.js
index f168bd344f..98d41d4c86 100644
--- a/bigbluebutton-html5/client/compatibility/adjust-videos.js
+++ b/bigbluebutton-html5/client/compatibility/adjust-videos.js
@@ -1,7 +1,7 @@
 
 (function() {
   function adjustVideos(tagId, centerVideos) {
-    const _minContentAspectRatio = 4 / 3.0;
+    const _minContentAspectRatio = 16 / 9.0;
 
     function calculateOccupiedArea(canvasWidth, canvasHeight, numColumns, numRows, numChildren) {
       const obj = calculateCellDimensions(canvasWidth, canvasHeight, numColumns, numRows);
@@ -55,11 +55,29 @@
     }
 
     // http://stackoverflow.com/a/3437825/414642
-    const e = $("#" + tagId).parent();
+    const e = $("#" + tagId).parent().parent().parent().parent(); // TODO arrumar
     const x = e.outerWidth() - 1;
     const y = e.outerHeight() - 1;
 
-    const videos = $("#" + tagId + " videoContainer:visible");
+    const isPortrait = ( $(document).width() < $(document).height() );
+
+    const videos = $("#" + tagId + " > div:visible");
+
+    if (isPortrait) {
+      e.css('margin-top', $('#app > main > section > div > section._imports_ui_components_app__styles__media > div > div._imports_ui_components_presentation__styles__presentationContainer > div > div:nth-child(2)').offset().top - 221);
+      e.css('width', 'calc(100% - ' + $("#app > main > section > div > section._imports_ui_components_app__styles__media > div > div._imports_ui_components_presentation__styles__presentationContainer > div > div:nth-child(2)").offset().left + ')');
+    } else {
+      e.css('width', '100%');
+      e.css('margin-top', 0);
+    }
+
+    if (videos.length > 4 && !isPortrait) {
+      e.addClass('_imports_ui_components_media__styles__moreThan4Videos'); // TODO harcoded
+      $('._imports_ui_components_media__styles__container').css('max-width', 'calc(100% - 170px)'); // TODO hardcoded
+    } else {
+      e.removeClass('_imports_ui_components_media__styles__moreThan4Videos'); // TODO harcoded
+      $('._imports_ui_components_media__styles__container').css('max-width', '100%'); // TODO hardcoded
+    }
 
     const best = findBestConfiguration(x, y, videos.length);
 
@@ -67,24 +85,14 @@
       const row = Math.floor(i / best.numColumns);
       const col = Math.floor(i % best.numColumns);
 
-      // Free width space remaining to the right and below of the videos
-      const remX = (x - best.width * best.numColumns);
-      const remY = (y - best.height * best.numRows);
+      const top = (row > 0 && videos.length <= 4 && !isPortrait) ? 1 : 0;
+      const left = (col > 0 && videos.length <= 4 && !isPortrait) ? 1 : 0;
 
-      // Center videos
-      const top = Math.floor(((best.height) * row) + remY / 2);
-      const left = Math.floor(((best.width) * col) + remX / 2);
-
-      const videoTop = `top: ${top}px;`;
-      const videoLeft = `left: ${left}px;`;
-
-      $(this).attr('style', videoTop + videoLeft);
-
-      $(this).parent().attr('style', `width: ${best.width-2}px; height${best.height-2}px;`);
+      $(this).attr('style', `margin-top: ${top}px; margin-left: ${left}px; width: ${best.width}px; height: ${best.height}px;`);
     });
 
-    videos.attr('width', best.width-2);
-    videos.attr('height', best.height-2);
+    videos.attr('width', best.width);
+    videos.attr('height', best.height);
   }
 
   window.adjustVideos = adjustVideos;
diff --git a/bigbluebutton-html5/imports/ui/components/media/styles.scss b/bigbluebutton-html5/imports/ui/components/media/styles.scss
index 6267f9aafd..873f0a6fbe 100644
--- a/bigbluebutton-html5/imports/ui/components/media/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/media/styles.scss
@@ -15,7 +15,7 @@
   display: block;
   height: 0;
   padding: 0;
-  padding-bottom: calc(100% * 9 / 16);
+  //padding-bottom: calc(100% * 9 / 16);
 }
 
 %ratio-item {
@@ -29,16 +29,37 @@
 }
 
 .overlayWrapper {
-  position: absolute;
-  width: 30%;
-  right: 2%;
-  bottom: 2%;
+  position: fixed;
+  width: 100%;
+  max-width: 170px;
+  height: 96px;
+  right: 8px;
+  bottom: 8px;
+
+  @include mq($portrait) {
+    position: absolute;
+    width: 100%;
+    max-width: none;
+    height: 96px;
+    top: 60px;
+    left: 0;
+    margin: 0 auto;
+  }
 
   @include mq($large-up) {
     flex-basis: 15%;
+
   }
 }
 
+.moreThan4Videos{ // TODO POR DENTRO DO MEDIA QUERY P TELA GRANDE e dentro do overlaywrapper
+  top: 63px;
+  right: 0;
+  position: fixed;
+  height: calc(100% - 143px);
+  text-align: right;
+}
+
 .overlayRatio {
   @extend %ratio;
 }
diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
index 498003367c..d9e640dcbe 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
@@ -52,18 +52,18 @@ class VideoElement extends Component {
         { this.props.localCamera ?
             <video id="shareWebcam" muted={true} autoPlay={true} playsInline={true} />
           :
-            <video id={`video-elem-${this.props.videoId}`} width={320} height={240} autoPlay={true} playsInline={true} />
+            <video id={`video-elem-${this.props.videoId}`} autoPlay={true} playsInline={true} />
         }
         <div className={styles.videoText}>
-          <span className={styles.userName}>{this.props.name}</span>
-          <Button
+          <div className={styles.userName}>{this.props.name}</div>
+          {/*<Button
             label=""
             className={styles.pauseButton}
             icon={'unmute'}
             size={'sm'}
             circle
             onClick={() => {}}
-          />
+          />*/}
         </div>
       </div>
     );
@@ -143,9 +143,6 @@ class VideoDock extends Component {
           this.start(user.userId, false);
         }, INITIAL_SHARE_WAIT_TIME);
       }
-      if (user.userId === userId){
-        this.myName = user.name;
-      }
     });
 
     document.addEventListener('joinVideo', this.shareWebcam.bind(this)); // TODO find a better way to do this
@@ -260,11 +257,12 @@ class VideoDock extends Component {
   }
 
   start(id, shareWebcam) {
+    const { users } = this.props;
     const that = this;
     const { intl } = this.props;
 
     console.log(`Starting video call for video: ${id} with ${shareWebcam}`);
-    let userNames = this.sate.userNames;
+    let userNames = this.state.userNames;
     users.forEach((user) => {
       if (user.userId === id) {
         userNames[id] = user.name;
@@ -614,7 +612,7 @@ class VideoDock extends Component {
   render() {
     return (
       <div className={styles.videoDock}>
-        <div id="webcamArea">
+        <div id="webcamArea" className={styles.webcamArea}>
           {Object.keys(this.state.videos).map((id) => {
             return (
               <VideoElement videoId={id} key={id} name={this.state.userNames[id]} localCamera={false} onMount={this.initWebRTC.bind(this)} />
@@ -642,7 +640,6 @@ class VideoDock extends Component {
       users[user.userId] = user.has_stream;
     });
 
-
     // Keep instances where the flag has changed or next user adds it
     nextUsers.forEach((user) => {
       let id = user.userId;
diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/styles.scss b/bigbluebutton-html5/imports/ui/components/video-dock/styles.scss
index 7d5ce0ab64..93e91e4980 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/styles.scss
@@ -2,35 +2,56 @@
 
 .videoDock {
   position: absolute;
+  width: 100%;
   top: 0;
   right: 0;
-  bottom: 0;
-  left: 0;
-
   background-size: cover;
   background-position: center;
-  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
-  border-radius: .2rem;
+  text-align: center;
+  
+  @include mq($portrait) {
+    height: 96px;
+  }
+}
+
+.videoDock video {
+  height: auto;
+  width: auto;
+  max-height: 100%;
+  max-width: 100%;
+  display: block;
+  margin: 0 auto;
+}
+
+.webcamArea {
+  @include mq($portrait) {
+    position: absolute;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #04111F;
+  }
 }
 
 .sharedWebcamVideo {
   display: none;
+  vertical-align: middle;
 }
 
 .sharedWebcamVideoLocal {
-  display: normal;
+  display: inline-block;
 }
 
 .videoContainer {
-  background-color: #999;
+  background-color: #000;
 }
 
 .videoText {
-  // position: absolute;
-  margin-top: -30px;
-  // padding: 0 5px;
-  // width: 100%;
-  z-index: -1;
+  margin-top: -22px;
+  padding: 0 5px;
+  z-index: 1;
+  text-align: left;
 }
 
 .userName {
@@ -40,7 +61,12 @@
   border-radius: 0.75rem;
   font-size: 10px;
   line-height: 13px;
-  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: relative;
+  display: inline-block;
+  max-width: 100%; // TODO when moderator, there's also the mic button, so this should be smaller.
 }
 
 .pauseButton {

From 326325fddb088b621a7f35c1df5b5f1b9e6f29c2 Mon Sep 17 00:00:00 2001
From: Augusto Bennemann <gutobenn@gmail.com>
Date: Wed, 7 Feb 2018 12:44:11 -0200
Subject: [PATCH 06/21] trigger on orientation change

---
 .../imports/ui/components/video-dock/component.jsx               | 1 +
 1 file changed, 1 insertion(+)

diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
index d9e640dcbe..62da3f09f4 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
@@ -150,6 +150,7 @@ class VideoDock extends Component {
     document.addEventListener('installChromeExtension', this.installChromeExtension.bind(this));
 
     window.addEventListener('resize', this.adjustVideos);
+    window.addEventListener('orientationchange', this.adjustVideos);
 
     ws.addEventListener('message', this.onWsMessage);
   }

From c38a6e34aea5c2906b3b18c28b46cc00e15a6dea Mon Sep 17 00:00:00 2001
From: Augusto Bennemann <gutobenn@gmail.com>
Date: Wed, 7 Feb 2018 13:24:20 -0200
Subject: [PATCH 07/21] Fix error introduced on last merge

---
 .../video-dock/video-menu/component.jsx       | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx b/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx
index f49e5d33cc..f3548504cd 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx
@@ -44,25 +44,6 @@ class JoinVideoOptions extends React.Component {
     }
 
     return (
-      <span className={styles.container}>
-        <Button
-          className={styles.button}
-          onClick={handleCloseVideo}
-          label={intl.formatMessage(intlMessages.leaveVideo)}
-          hideLabel
-          aria-label={intl.formatMessage(intlMessages.leaveVideo)}
-          color="danger"
-          icon="video"
-          size="lg"
-          circle
-          disabled={isWaitingResponse}
-        />
-      </span>
-    );
-  }
-
-  return (
-    <span className={styles.container}>
       <Button
         className={styles.button}
         onClick={handleJoinVideo}

From b0b16498fb5344453d7c5ca5b315ed00b7f0a249 Mon Sep 17 00:00:00 2001
From: Augusto Bennemann <gutobenn@gmail.com>
Date: Wed, 7 Feb 2018 14:57:09 -0200
Subject: [PATCH 08/21] Fixes #5056

---
 .../imports/ui/components/video-dock/video-menu/component.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx b/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx
index f3548504cd..4da41ddea6 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx
@@ -35,7 +35,7 @@ class JoinVideoOptions extends React.Component {
           hideLabel
           aria-label={intl.formatMessage(intlMessages.leaveVideo)}
           color="danger"
-          icon="video"
+          icon="video_off"
           size="lg"
           circle
           disabled={isLocked || isWaitingResponse}
@@ -51,7 +51,7 @@ class JoinVideoOptions extends React.Component {
         hideLabel
         aria-label={intl.formatMessage(intlMessages.joinVideo)}
         color="primary"
-        icon="video_off"
+        icon="video"
         size="lg"
         circle
         disabled={isLocked || isWaitingResponse || (!isSharingVideo && isConnected)}

From 323cdd3232c81235450d05a44eeb5b951b7d7a1f Mon Sep 17 00:00:00 2001
From: Augusto Bennemann <gutobenn@gmail.com>
Date: Wed, 7 Feb 2018 17:20:10 -0200
Subject: [PATCH 09/21] Fix camera button style and improve videodock code

---
 .../client/compatibility/adjust-videos.js     | 21 ++++----
 .../imports/ui/components/media/styles.scss   |  2 +-
 .../ui/components/presentation/component.jsx  |  3 +-
 .../ui/components/video-dock/component.jsx    |  3 +-
 .../ui/components/video-dock/styles.scss      |  2 +-
 .../video-dock/video-menu/component.jsx       | 50 ++++++++++---------
 6 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/bigbluebutton-html5/client/compatibility/adjust-videos.js b/bigbluebutton-html5/client/compatibility/adjust-videos.js
index 98d41d4c86..ea71c5bac7 100644
--- a/bigbluebutton-html5/client/compatibility/adjust-videos.js
+++ b/bigbluebutton-html5/client/compatibility/adjust-videos.js
@@ -1,6 +1,6 @@
 
 (function() {
-  function adjustVideos(tagId, centerVideos) {
+  function adjustVideos(tagId, centerVideos, moreThan4VideosClass, mediaContainerClass, overlayWrapperClass, presentationAreaDataId) {
     const _minContentAspectRatio = 16 / 9.0;
 
     function calculateOccupiedArea(canvasWidth, canvasHeight, numColumns, numRows, numChildren) {
@@ -55,28 +55,27 @@
     }
 
     // http://stackoverflow.com/a/3437825/414642
-    const e = $("#" + tagId).parent().parent().parent().parent(); // TODO arrumar
+    const e = $("." + overlayWrapperClass);
     const x = e.outerWidth() - 1;
     const y = e.outerHeight() - 1;
 
     const isPortrait = ( $(document).width() < $(document).height() );
 
     const videos = $("#" + tagId + " > div:visible");
-
     if (isPortrait) {
-      e.css('margin-top', $('#app > main > section > div > section._imports_ui_components_app__styles__media > div > div._imports_ui_components_presentation__styles__presentationContainer > div > div:nth-child(2)').offset().top - 221);
-      e.css('width', 'calc(100% - ' + $("#app > main > section > div > section._imports_ui_components_app__styles__media > div > div._imports_ui_components_presentation__styles__presentationContainer > div > div:nth-child(2)").offset().left + ')');
+      e.css("margin-top", $('#' + presentationAreaDataId).offset().top - 221);
+      e.css("width", "calc(100% - " + $('#' + presentationAreaDataId).offset().left + ")");
     } else {
-      e.css('width', '100%');
-      e.css('margin-top', 0);
+      e.css("width", "100%");
+      e.css("margin-top", 0);
     }
 
     if (videos.length > 4 && !isPortrait) {
-      e.addClass('_imports_ui_components_media__styles__moreThan4Videos'); // TODO harcoded
-      $('._imports_ui_components_media__styles__container').css('max-width', 'calc(100% - 170px)'); // TODO hardcoded
+      e.addClass(moreThan4VideosClass);
+      $("." + mediaContainerClass).css("max-width", "calc(100% - 170px)");
     } else {
-      e.removeClass('_imports_ui_components_media__styles__moreThan4Videos'); // TODO harcoded
-      $('._imports_ui_components_media__styles__container').css('max-width', '100%'); // TODO hardcoded
+      e.removeClass(moreThan4VideosClass);
+      $("." + mediaContainerClass).css("max-width", "100%");
     }
 
     const best = findBestConfiguration(x, y, videos.length);
diff --git a/bigbluebutton-html5/imports/ui/components/media/styles.scss b/bigbluebutton-html5/imports/ui/components/media/styles.scss
index 873f0a6fbe..8b2501729c 100644
--- a/bigbluebutton-html5/imports/ui/components/media/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/media/styles.scss
@@ -52,7 +52,7 @@
   }
 }
 
-.moreThan4Videos{ // TODO POR DENTRO DO MEDIA QUERY P TELA GRANDE e dentro do overlaywrapper
+.moreThan4Videos{
   top: 63px;
   right: 0;
   position: fixed;
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx
index f4a4869d7c..6fb59a5846 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx
@@ -158,6 +158,7 @@ export default class PresentationArea extends Component {
           WebkitTransition: 'width 0.2s', /* Safari */
           transition: 'width 0.2s',
         }}
+        id="presentationAreaData"
       >
         <TransitionGroup>
           <CSSTransition
@@ -281,7 +282,7 @@ export default class PresentationArea extends Component {
 
   render() {
     return (
-      <div className={styles.presentationContainer}>
+      <div className={styles.presentationContainer} id="presentationContainer">
         <div
           ref={(ref) => { this.refPresentationArea = ref; }}
           className={styles.presentationArea}
diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
index 62da3f09f4..82c8ea7747 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
@@ -5,6 +5,7 @@ import VideoService from './service';
 import { log } from '/imports/ui/services/api';
 import { notify } from '/imports/ui/services/notification';
 import { toast } from 'react-toastify';
+import { styles as mediaStyles } from '/imports/ui/components/media/styles';
 import Toast from '/imports/ui/components/toast/component';
 
 const intlMessages = defineMessages({
@@ -189,7 +190,7 @@ class VideoDock extends Component {
 
   adjustVideos() {
     setTimeout(() => {
-      window.adjustVideos('webcamArea', true);
+      window.adjustVideos('webcamArea', true, mediaStyles.moreThan4Videos, mediaStyles.container, mediaStyles.overlayWrapper, 'presentationAreaData' );
     }, 0);
   }
 
diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/styles.scss b/bigbluebutton-html5/imports/ui/components/video-dock/styles.scss
index 93e91e4980..a062445077 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/styles.scss
@@ -66,7 +66,7 @@
   text-overflow: ellipsis;
   position: relative;
   display: inline-block;
-  max-width: 100%; // TODO when moderator, there's also the mic button, so this should be smaller.
+  max-width: 100%;
 }
 
 .pauseButton {
diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx b/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx
index 4da41ddea6..fa55910970 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/video-menu/component.jsx
@@ -29,33 +29,37 @@ class JoinVideoOptions extends React.Component {
 
     if (isSharingVideo) {
       return (
-        <Button
-          onClick={handleCloseVideo}
-          label={intl.formatMessage(intlMessages.leaveVideo)}
-          hideLabel
-          aria-label={intl.formatMessage(intlMessages.leaveVideo)}
-          color="danger"
-          icon="video_off"
-          size="lg"
-          circle
-          disabled={isLocked || isWaitingResponse}
-        />
+        <span className={styles.container}>
+          <Button
+            onClick={handleCloseVideo}
+            label={intl.formatMessage(intlMessages.leaveVideo)}
+            hideLabel
+            aria-label={intl.formatMessage(intlMessages.leaveVideo)}
+            color="danger"
+            icon="video_off"
+            size="lg"
+            circle
+            disabled={isLocked || isWaitingResponse}
+          />
+        </span>
       );
     }
 
     return (
-      <Button
-        className={styles.button}
-        onClick={handleJoinVideo}
-        label={intl.formatMessage(intlMessages.joinVideo)}
-        hideLabel
-        aria-label={intl.formatMessage(intlMessages.joinVideo)}
-        color="primary"
-        icon="video"
-        size="lg"
-        circle
-        disabled={isLocked || isWaitingResponse || (!isSharingVideo && isConnected)}
-      />
+      <span className={styles.container}>
+        <Button
+          className={styles.button}
+          onClick={handleJoinVideo}
+          label={intl.formatMessage(intlMessages.joinVideo)}
+          hideLabel
+          aria-label={intl.formatMessage(intlMessages.joinVideo)}
+          color="primary"
+          icon="video"
+          size="lg"
+          circle
+          disabled={isLocked || isWaitingResponse || (!isSharingVideo && isConnected)}
+        />
+      </span>
     );
   }
 }

From d5cda552203120525ffb33167196dd5872be458b Mon Sep 17 00:00:00 2001
From: Augusto Bennemann <gutobenn@gmail.com>
Date: Thu, 8 Feb 2018 12:52:29 -0200
Subject: [PATCH 10/21] Improve video adjusting code

---
 .../client/compatibility/adjust-videos.js            | 12 ++++++++----
 labs/bbb-webrtc-sfu/config/default.example.yml       |  1 +
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/bigbluebutton-html5/client/compatibility/adjust-videos.js b/bigbluebutton-html5/client/compatibility/adjust-videos.js
index ea71c5bac7..b513991bd6 100644
--- a/bigbluebutton-html5/client/compatibility/adjust-videos.js
+++ b/bigbluebutton-html5/client/compatibility/adjust-videos.js
@@ -63,11 +63,15 @@
 
     const videos = $("#" + tagId + " > div:visible");
     if (isPortrait) {
-      e.css("margin-top", $('#' + presentationAreaDataId).offset().top - 221);
-      e.css("width", "calc(100% - " + $('#' + presentationAreaDataId).offset().left + ")");
+      e.css({
+        "margin-top": $('#' + presentationAreaDataId).offset().top - 221,
+        "width": "calc(100% - " + $('#' + presentationAreaDataId).offset().left + ")"
+      });
     } else {
-      e.css("width", "100%");
-      e.css("margin-top", 0);
+      e.css({
+        "width": "100%",
+        "margin-top": 0
+      });
     }
 
     if (videos.length > 4 && !isPortrait) {
diff --git a/labs/bbb-webrtc-sfu/config/default.example.yml b/labs/bbb-webrtc-sfu/config/default.example.yml
index 7a2ef97128..7817a8d1cc 100644
--- a/labs/bbb-webrtc-sfu/config/default.example.yml
+++ b/labs/bbb-webrtc-sfu/config/default.example.yml
@@ -7,6 +7,7 @@ redisPort : "6379"
 clientPort : "3008"
 minVideoPort: 30000
 maxVideoPort: 33000
+mediaFlowTimeoutDuration: 5000
 from-screenshare: "from-screenshare-sfu"
 to-screenshare: "to-screenshare-sfu"
 from-video: "from-video-sfu"

From 95c172a8f0806a60ab893e8ae2b2cfed6a8c0e10 Mon Sep 17 00:00:00 2001
From: Augusto Bennemann <gutobenn@gmail.com>
Date: Thu, 8 Feb 2018 16:32:12 +0000
Subject: [PATCH 11/21] Videodock adjusts for screenshare

---
 .../client/compatibility/adjust-videos.js     | 20 +++++++++++++------
 .../ui/components/screenshare/component.jsx   |  2 +-
 .../ui/components/video-dock/component.jsx    |  3 ++-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/bigbluebutton-html5/client/compatibility/adjust-videos.js b/bigbluebutton-html5/client/compatibility/adjust-videos.js
index b513991bd6..c2042eb725 100644
--- a/bigbluebutton-html5/client/compatibility/adjust-videos.js
+++ b/bigbluebutton-html5/client/compatibility/adjust-videos.js
@@ -1,6 +1,6 @@
 
 (function() {
-  function adjustVideos(tagId, centerVideos, moreThan4VideosClass, mediaContainerClass, overlayWrapperClass, presentationAreaDataId) {
+  function adjustVideos(tagId, centerVideos, moreThan4VideosClass, mediaContainerClass, overlayWrapperClass, presentationAreaDataId, screenshareVideoId) {
     const _minContentAspectRatio = 16 / 9.0;
 
     function calculateOccupiedArea(canvasWidth, canvasHeight, numColumns, numRows, numChildren) {
@@ -59,14 +59,22 @@
     const x = e.outerWidth() - 1;
     const y = e.outerHeight() - 1;
 
+    const videos = $("#" + tagId + " > div:visible");
     const isPortrait = ( $(document).width() < $(document).height() );
 
-    const videos = $("#" + tagId + " > div:visible");
     if (isPortrait) {
-      e.css({
-        "margin-top": $('#' + presentationAreaDataId).offset().top - 221,
-        "width": "calc(100% - " + $('#' + presentationAreaDataId).offset().left + ")"
-      });
+      // If currently displaying a presentation
+      if ( $("#" + presentationAreaDataId).length ) {
+        e.css({
+          "margin-top": $('#' + presentationAreaDataId).offset().top - 221,
+          "width": "calc(100% - " + $('#' + presentationAreaDataId).offset().left + ")"
+        });
+      } else if ( $("#" + screenshareVideoId).length ) { // Or if currently displaying a screenshare
+        e.css({
+          "margin-top": $('#' + screenshareVideoId).offset().top - 221,
+          "width": "calc(100% - " + $('#' + screenshareVideoId).offset().left + ")"
+        });
+      }
     } else {
       e.css({
         "width": "100%",
diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx b/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx
index c381280101..1b6c519a6b 100644
--- a/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx
@@ -7,7 +7,7 @@ export default class ScreenshareComponent extends React.Component {
 
   render() {
     return (
-      <video id="screenshareVideo" style={{ height: '100%', width: '100%' }} autoPlay playsInline />
+      <video id="screenshareVideo" style={{ max-height: '100%', width: '100%' }} autoPlay playsInline />
     );
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
index 82c8ea7747..746076fedb 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
@@ -176,6 +176,7 @@ class VideoDock extends Component {
     document.removeEventListener('exitVideo', this.unshareWebcam);
     document.removeEventListener('installChromeExtension', this.installChromeExtension);
     window.removeEventListener('resize', this.adjustVideos);
+    window.removeEventListener('orientationchange', this.adjustVideos);
 
     this.ws.removeEventListener('message', this.onWsMessage);
     this.ws.removeEventListener('open', this.onWsOpen);
@@ -190,7 +191,7 @@ class VideoDock extends Component {
 
   adjustVideos() {
     setTimeout(() => {
-      window.adjustVideos('webcamArea', true, mediaStyles.moreThan4Videos, mediaStyles.container, mediaStyles.overlayWrapper, 'presentationAreaData' );
+      window.adjustVideos('webcamArea', true, mediaStyles.moreThan4Videos, mediaStyles.container, mediaStyles.overlayWrapper, 'presentationAreaData', 'screenshareVideo' );
     }, 0);
   }
 

From 65bf18e6ca39d3ba9fbc815201f5cb5221194ae4 Mon Sep 17 00:00:00 2001
From: Augusto Bennemann <gutobenn@gmail.com>
Date: Thu, 8 Feb 2018 16:49:02 +0000
Subject: [PATCH 12/21] Fix typo

---
 .../imports/ui/components/screenshare/component.jsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx b/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx
index 1b6c519a6b..9845cd3584 100644
--- a/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/screenshare/component.jsx
@@ -7,7 +7,7 @@ export default class ScreenshareComponent extends React.Component {
 
   render() {
     return (
-      <video id="screenshareVideo" style={{ max-height: '100%', width: '100%' }} autoPlay playsInline />
+      <video id="screenshareVideo" style={{ maxHeight: '100%', width: '100%' }} autoPlay playsInline />
     );
   }
 }

From b848beb04a4078bdfc6b7404cce81d278ede4ea4 Mon Sep 17 00:00:00 2001
From: Ghazi Triki <ghazi.triki@riadvice.tn>
Date: Thu, 8 Feb 2018 20:19:07 +0100
Subject: [PATCH 13/21] Force reading config.xml in utf-8 format.

---
 .../main/java/org/bigbluebutton/api/ParamsProcessorUtil.java   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/bbb-common-web/src/main/java/org/bigbluebutton/api/ParamsProcessorUtil.java b/bbb-common-web/src/main/java/org/bigbluebutton/api/ParamsProcessorUtil.java
index ca452ed7ad..878dd0d0fd 100755
--- a/bbb-common-web/src/main/java/org/bigbluebutton/api/ParamsProcessorUtil.java
+++ b/bbb-common-web/src/main/java/org/bigbluebutton/api/ParamsProcessorUtil.java
@@ -23,6 +23,7 @@ import java.io.IOException;
 import java.io.UnsupportedEncodingException;
 import java.net.URLDecoder;
 import java.net.URLEncoder;
+import java.nio.charset.StandardCharsets;
 import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.HashMap;
@@ -546,7 +547,7 @@ public class ParamsProcessorUtil {
 					int status = response.getStatusLine().getStatusCode();
 					if (status >= 200 && status < 300) {
 						HttpEntity entity = response.getEntity();
-						return entity != null ? EntityUtils.toString(entity) : null;
+						return entity != null ? EntityUtils.toString(entity, StandardCharsets.UTF_8) : null;
 					} else {
 						throw new ClientProtocolException("Unexpected response status: " + status);
 					}

From 81afe84079e424d549b63a36a1b4cf81b67bbcaf Mon Sep 17 00:00:00 2001
From: prlanzarin <prlanzarin@inf.ufrgs.br>
Date: Thu, 8 Feb 2018 22:53:18 +0000
Subject: [PATCH 14/21] Limiting screensharing FPS to 5-10 and resolution to
 screen size

Also fixes the extension prompt for chrome users in the HTML5 client
---
 .../resources/prod/lib/kurento-extension.js   | 18 ++++++++++++------
 .../client/compatibility/kurento-extension.js | 19 +++++++++++++++----
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/bigbluebutton-client/resources/prod/lib/kurento-extension.js b/bigbluebutton-client/resources/prod/lib/kurento-extension.js
index 1086d53d8a..6b7ffcd3d1 100644
--- a/bigbluebutton-client/resources/prod/lib/kurento-extension.js
+++ b/bigbluebutton-client/resources/prod/lib/kurento-extension.js
@@ -418,18 +418,28 @@ window.getScreenConstraints = function(sendSource, callback) {
   let chromeMediaSourceId = sendSource;
   let screenConstraints = {video: {}};
 
+  // Limiting FPS to a range of 5-10 (5 ideal)
+  screenConstraints.video.frameRate = {ideal: 5, max: 10};
+
+  // Limiting max resolution to screen size
+  screenConstraints.video.height = {max: window.screen.height};
+  screenConstraints.video.width = {max: window.screen.width};
+
   if(isChrome) {
     getChromeScreenConstraints ((constraints) => {
-      if(!constraints){
+      if (!constraints) {
         document.dispatchEvent(new Event("installChromeExtension"));
         return;
       }
-      extensionInstalled = true;
+
       let sourceId = constraints.streamId;
 
+      kurentoManager.kurentoScreenshare.extensionInstalled = true;
+
       // this statement sets gets 'sourceId" and sets "chromeMediaSourceId"
       screenConstraints.video.chromeMediaSource = { exact: [sendSource]};
       screenConstraints.video.chromeMediaSourceId = sourceId;
+
       console.log("getScreenConstraints for Chrome returns => ");
       console.log(screenConstraints);
       // now invoking native getUserMedia API
@@ -439,8 +449,6 @@ window.getScreenConstraints = function(sendSource, callback) {
   }
   else if (isFirefox) {
     screenConstraints.video.mediaSource= "window";
-    screenConstraints.video.width= {max: "1280"};
-    screenConstraints.video.height = {max:  "720"};
 
     console.log("getScreenConstraints for Firefox returns => ");
     console.log(screenConstraints);
@@ -449,8 +457,6 @@ window.getScreenConstraints = function(sendSource, callback) {
   }
   else if(isSafari) {
     screenConstraints.video.mediaSource= "screen";
-    screenConstraints.video.width= {max: window.screen.width};
-    screenConstraints.video.height = {max:  window.screen.vid_height};
 
     console.log("getScreenConstraints for Safari returns => ");
     console.log(screenConstraints);
diff --git a/bigbluebutton-html5/client/compatibility/kurento-extension.js b/bigbluebutton-html5/client/compatibility/kurento-extension.js
index 3aa4e92439..6b7ffcd3d1 100644
--- a/bigbluebutton-html5/client/compatibility/kurento-extension.js
+++ b/bigbluebutton-html5/client/compatibility/kurento-extension.js
@@ -418,13 +418,28 @@ window.getScreenConstraints = function(sendSource, callback) {
   let chromeMediaSourceId = sendSource;
   let screenConstraints = {video: {}};
 
+  // Limiting FPS to a range of 5-10 (5 ideal)
+  screenConstraints.video.frameRate = {ideal: 5, max: 10};
+
+  // Limiting max resolution to screen size
+  screenConstraints.video.height = {max: window.screen.height};
+  screenConstraints.video.width = {max: window.screen.width};
+
   if(isChrome) {
     getChromeScreenConstraints ((constraints) => {
+      if (!constraints) {
+        document.dispatchEvent(new Event("installChromeExtension"));
+        return;
+      }
+
       let sourceId = constraints.streamId;
 
+      kurentoManager.kurentoScreenshare.extensionInstalled = true;
+
       // this statement sets gets 'sourceId" and sets "chromeMediaSourceId"
       screenConstraints.video.chromeMediaSource = { exact: [sendSource]};
       screenConstraints.video.chromeMediaSourceId = sourceId;
+
       console.log("getScreenConstraints for Chrome returns => ");
       console.log(screenConstraints);
       // now invoking native getUserMedia API
@@ -434,8 +449,6 @@ window.getScreenConstraints = function(sendSource, callback) {
   }
   else if (isFirefox) {
     screenConstraints.video.mediaSource= "window";
-    screenConstraints.video.width= {max: "1280"};
-    screenConstraints.video.height = {max:  "720"};
 
     console.log("getScreenConstraints for Firefox returns => ");
     console.log(screenConstraints);
@@ -444,8 +457,6 @@ window.getScreenConstraints = function(sendSource, callback) {
   }
   else if(isSafari) {
     screenConstraints.video.mediaSource= "screen";
-    screenConstraints.video.width= {max: window.screen.width};
-    screenConstraints.video.height = {max:  window.screen.vid_height};
 
     console.log("getScreenConstraints for Safari returns => ");
     console.log(screenConstraints);

From 6a237f86dd5eb844b5f374c1054799357b01170e Mon Sep 17 00:00:00 2001
From: Fred Dixon <ffdixon@gmail.com>
Date: Sun, 11 Feb 2018 12:15:19 -0600
Subject: [PATCH 15/21] Fixed error restarting bbb-transcode-akka

---
 bigbluebutton-config/bin/bbb-conf | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/bigbluebutton-config/bin/bbb-conf b/bigbluebutton-config/bin/bbb-conf
index 3d95af6546..1286ba3c74 100755
--- a/bigbluebutton-config/bin/bbb-conf
+++ b/bigbluebutton-config/bin/bbb-conf
@@ -295,7 +295,7 @@ stop_bigbluebutton () {
        if [ -f /usr/lib/systemd/system/bbb-webhooks.service ]; then
           WEBHOOKS=bbb-webhooks
        fi
-       if [ -f /usr/lib/systemd/system/bbb-bbb-transcode-akka.service ]; then
+       if [ -f /usr/lib/systemd/system/bbb-transcode-akka.service ]; then
           BBB_TRANSCODE_AKKA=bbb-transcode-akka
        fi
 
@@ -351,7 +351,7 @@ start_bigbluebutton () {
        if [ -f /usr/lib/systemd/system/bbb-webhooks.service ]; then
           WEBHOOKS=bbb-webhooks
        fi
-       if [ -f /usr/lib/systemd/system/bbb-bbb-transcode-akka.service ]; then
+       if [ -f /usr/lib/systemd/system/bbb-transcode-akka.service ]; then
           BBB_TRANSCODE_AKKA=bbb-transcode-akka
        fi
 

From 098c7b8a20c4d479c1a4629f20c3d4cfa06af81d Mon Sep 17 00:00:00 2001
From: Fred Dixon <ffdixon@gmail.com>
Date: Sun, 11 Feb 2018 12:16:28 -0600
Subject: [PATCH 16/21] Make moderator role default for HTML5 demo

---
 bbb-api-demo/src/main/webapp/demoHTML5.jsp | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bbb-api-demo/src/main/webapp/demoHTML5.jsp b/bbb-api-demo/src/main/webapp/demoHTML5.jsp
index a0ed6602e1..7e95adc700 100644
--- a/bbb-api-demo/src/main/webapp/demoHTML5.jsp
+++ b/bbb-api-demo/src/main/webapp/demoHTML5.jsp
@@ -70,7 +70,7 @@ if (request.getParameterMap().isEmpty()) {
 				<td>&nbsp;</td>
 				<td style="text-align: right; ">Moderator Role:</td>
 				<td style="width: 5px; ">&nbsp;</td>
-				<td style="text-align: left "><input type=checkbox name=isModerator value="true"></td>
+				<td style="text-align: left "><input type=checkbox name=isModerator value="true" checked></td>
 			<tr>
 
 		<tr>

From 0701bf87a823bb020b70defb5ca5edadd36ca739 Mon Sep 17 00:00:00 2001
From: Calvin Walton <calvin.walton@kepstin.ca>
Date: Mon, 12 Feb 2018 11:46:05 -0500
Subject: [PATCH 17/21] Workaround video sync issue due to red5 timestamp
 offset

Red5 sometimes writes webcam video files with a large offset in the
video frame offsets, sometimes up to 30 or even 60 seconds. However,
the start event in the events.xml file corresponds to the time at
which red5 received the first keyframe (recorded frame) in the video.

The end result is that the video will sometimes appear to be
delayed (out of sync) in the processed recording.

The correction is simple: We're already reading video metadata,
including the timestamp of the first frame, so we just have to apply
a correction during video processing to undo the frame timestamp
offsets in the video file.
---
 .../core/lib/recordandplayback/edl/video.rb   | 47 +++++++++++++++----
 1 file changed, 38 insertions(+), 9 deletions(-)

diff --git a/record-and-playback/core/lib/recordandplayback/edl/video.rb b/record-and-playback/core/lib/recordandplayback/edl/video.rb
index 898d86a65c..8faa738146 100644
--- a/record-and-playback/core/lib/recordandplayback/edl/video.rb
+++ b/record-and-playback/core/lib/recordandplayback/edl/video.rb
@@ -189,11 +189,11 @@ module BigBlueButton
         videoinfo.keys.each do |videofile|
           BigBlueButton.logger.debug "  #{videofile}"
           info = video_info(videofile)
-          BigBlueButton.logger.debug "    width: #{info[:width]}, height: #{info[:height]}, duration: #{info[:duration]}"
           if !info[:video]
             BigBlueButton.logger.warn "    This video file is corrupt! It will be removed from the output."
             corrupt_videos << videofile
           else
+            BigBlueButton.logger.debug "    width: #{info[:width]}, height: #{info[:height]}, duration: #{info[:duration]}, start_time: #{info[:start_time]}"
             if info[:video][:deskshare_timestamp_bug]
               BigBlueButton.logger.debug("    has early 1.1 deskshare timestamp bug")
             end
@@ -264,6 +264,14 @@ module BigBlueButton
           # Convert the duration to milliseconds
           info[:duration] = (info[:format][:duration].to_r * 1000).to_i
 
+          # Red5 writes video files with the first frame often having a pts
+          # much greater than 0.
+          # We can compensate for this during decoding if we know the
+          # timestamp offset, which ffprobe handily finds. Convert the units
+          # to ms.
+          info[:start_time] = (info[:format][:start_time].to_r * 1000).to_i
+          info[:video][:start_time] = (info[:video][:start_time].to_r * 1000).to_i
+
           return info
         end
         {}
@@ -368,9 +376,10 @@ module BigBlueButton
           ffmpeg_filter << "[#{layout_area[:name]}_in];"
 
           area.each do |video|
+            this_videoinfo = videoinfo[video[:filename]]
             BigBlueButton.logger.debug "    tile location (#{tile_x}, #{tile_y})"
-            video_width = videoinfo[video[:filename]][:width]
-            video_height = videoinfo[video[:filename]][:height]
+            video_width = this_videoinfo[:width]
+            video_height = this_videoinfo[:height]
             BigBlueButton.logger.debug "      original size: #{video_width}x#{video_height}"
 
             scale_width, scale_height = aspect_scale(video_width, video_height, tile_width, tile_height)
@@ -379,11 +388,13 @@ module BigBlueButton
             offset_x, offset_y = pad_offset(scale_width, scale_height, tile_width, tile_height)
             BigBlueButton.logger.debug "      offset: left: #{offset_x}, top: #{offset_y}"
 
-            BigBlueButton.logger.debug "      start timestamp: #{video[:timestamp]}"
-            BigBlueButton.logger.debug("      codec: #{videoinfo[video[:filename]][:video][:codec_name].inspect}")
-            BigBlueButton.logger.debug("      duration: #{videoinfo[video[:filename]][:duration]}, original duration: #{video[:original_duration]}")
+            BigBlueButton.logger.debug("      start timestamp: #{video[:timestamp]}")
+            seek_offset = this_videoinfo[:video][:start_time]
+            BigBlueButton.logger.debug("      seek offset: #{seek_offset}")
+            BigBlueButton.logger.debug("      codec: #{this_videoinfo[:video][:codec_name].inspect}")
+            BigBlueButton.logger.debug("      duration: #{this_videoinfo[:duration]}, original duration: #{video[:original_duration]}")
 
-            if videoinfo[video[:filename]][:video][:codec_name] == "flashsv2"
+            if this_videoinfo[:video][:codec_name] == "flashsv2"
               # Desktop sharing videos in flashsv2 do not have regular
               # keyframes, so seeking in them doesn't really work.
               # To make processing more reliable, always decode them from the
@@ -403,8 +414,8 @@ module BigBlueButton
             # actually be...) and scale the video length.
             scale = nil
             if !video[:original_duration].nil? and
-                  videoinfo[video[:filename]][:video][:deskshare_timestamp_bug]
-              scale = video[:original_duration].to_f / videoinfo[video[:filename]][:duration]
+                  this_videoinfo[:video][:deskshare_timestamp_bug]
+              scale = video[:original_duration].to_f / this_videoinfo[:duration]
               # Rather than attempt to recalculate seek...
               seek = 0
               BigBlueButton.logger.debug("      Early 1.1 deskshare timestamp bug: scaling video length by #{scale}")
@@ -412,12 +423,28 @@ module BigBlueButton
 
             pad_name = "#{layout_area[:name]}_x#{tile_x}_y#{tile_y}"
 
+            # Apply the video start time offset to seek to the correct point.
+            # Only actually apply the offset if we're already seeking so we
+            # don't start seeking in a file where we've overridden the seek
+            # behaviour.
+            if seek > 0
+              seek = seek + seek_offset
+            end
             ffmpeg_filter << "movie=#{video[:filename]}:sp=#{ms_to_s(seek)}"
+            # Scale the video length for the deskshare timestamp workaround
             if !scale.nil?
               ffmpeg_filter << ",setpts=PTS*#{scale}"
             end
+            # Subtract away the offset from the timestamps, so the trimming
+            # in the fps filter is accurate
+            ffmpeg_filter << ",setpts=PTS-#{ms_to_s(seek_offset)}/TB"
+            # fps filter fills in frames up to the desired start point, and
+            # cuts the video there
             ffmpeg_filter << ",fps=#{FFMPEG_WF_FRAMERATE}:start_time=#{ms_to_s(video[:timestamp])}"
+            # Reset the timestamps to start at 0 so that everything is synced
+            # for the video tiling, and scale to the desired size.
             ffmpeg_filter << ",setpts=PTS-STARTPTS,scale=#{scale_width}:#{scale_height}"
+            # And finally, pad the video to the desired aspect ratio
             ffmpeg_filter << ",pad=w=#{tile_width}:h=#{tile_height}:x=#{offset_x}:y=#{offset_y}:color=white"
             ffmpeg_filter << "[#{pad_name}];"
 
@@ -428,6 +455,7 @@ module BigBlueButton
             end
           end
 
+          # Create the video rows
           remaining = video_count
           (0...tiles_v).each do |tile_y|
             this_tiles_h = [tiles_h, remaining].min
@@ -443,6 +471,7 @@ module BigBlueButton
             ffmpeg_filter << "[#{layout_area[:name]}_y#{tile_y}];"
           end
 
+          # Stack the video rows
           (0...tiles_v).each do |tile_y|
             ffmpeg_filter << "[#{layout_area[:name]}_y#{tile_y}]"
           end

From e30d5e3940708951f19ab3c7de89c8726811b003 Mon Sep 17 00:00:00 2001
From: Calvin Walton <calvin.walton@kepstin.ca>
Date: Mon, 12 Feb 2018 16:33:37 -0500
Subject: [PATCH 18/21] Rework audio processing to avoid seeking past end of
 file

In some cases when there is a slight mismatch between audio file
duration and event timestamp difference, and we have a record
status or chapter break event in a certain location, it could
trigger a seek past the end of an audio file. Detect this
condition and just render silence instead.

Also adjust the thresholds for the audio length scaling - they
were being triggered on short recordings that should be correct.
---
 .../core/lib/recordandplayback/edl/audio.rb   | 65 +++++++++++--------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/record-and-playback/core/lib/recordandplayback/edl/audio.rb b/record-and-playback/core/lib/recordandplayback/edl/audio.rb
index 316a7d0795..32e4ed373b 100644
--- a/record-and-playback/core/lib/recordandplayback/edl/audio.rb
+++ b/record-and-playback/core/lib/recordandplayback/edl/audio.rb
@@ -92,40 +92,53 @@ module BigBlueButton
           audio = entry[:audio]
           duration = entry[:next_timestamp] - entry[:timestamp]
 
-          if audio
+          # Check for and handle audio files with mismatched lengths (generated
+          # by buggy versions of freeswitch in old BigBlueButton
+          if audio and entry[:original_duration] and
+               (audioinfo[audio[:filename]][:duration].to_f / entry[:original_duration]) < 0.997 and
+               ((entry[:original_duration] - audioinfo[audio[:filename]][:duration]).to_f /
+                      entry[:original_duration]).abs < 0.05
+            speed = audioinfo[audio[:filename]][:duration].to_f / entry[:original_duration]
             BigBlueButton.logger.info "  Using input #{audio[:filename]}"
 
+            BigBlueButton.logger.warn "  Audio file length mismatch, adjusting speed to #{speed}"
+
+            # Have to calculate the start point after the atempo filter in this case,
+            # since it can affect the audio start time.
+            # Also reset the pts to start at 0, so the duration trim works correctly.
             filter = "[#{input_index}] "
-
-            if entry[:original_duration] and
-                 (audioinfo[audio[:filename]][:duration].to_f / entry[:original_duration]) < 0.999 and
-                 ((entry[:original_duration] - audioinfo[audio[:filename]][:duration]).to_f /
-                        entry[:original_duration]).abs < 0.05
-              speed = audioinfo[audio[:filename]][:duration].to_f / entry[:original_duration]
-              BigBlueButton.logger.warn "  Audio file length mismatch, adjusting speed to #{speed}"
-
-              # Have to calculate the start point after the atempo filter in this case,
-              # since it can affect the audio start time.
-              # Also reset the pts to start at 0, so the duration trim works correctly.
-              filter << "atempo=#{speed},atrim=start=#{ms_to_s(audio[:timestamp])},"
-              filter << "asetpts=PTS-STARTPTS,"
-
-              ffmpeg_inputs << {
-                :filename => audio[:filename],
-                :seek => 0
-              }
-            else
-              ffmpeg_inputs << {
-                :filename => audio[:filename],
-                :seek => audio[:timestamp]
-              }
-            end
-
+            filter << "atempo=#{speed},atrim=start=#{ms_to_s(audio[:timestamp])},"
+            filter << "asetpts=PTS-STARTPTS,"
             filter << "#{FFMPEG_AFORMAT},apad,atrim=end=#{ms_to_s(duration)} [out#{output_index}]"
             ffmpeg_filters << filter
 
+            ffmpeg_inputs << {
+              :filename => audio[:filename],
+              :seek => 0
+            }
+
             input_index += 1
             output_index += 1
+
+            # Normal audio input handling. Skip this input and generate silence
+            # if the seekpoint is past the end of the audio, which can happen
+            # if events are slightly misaligned and you get unlucky with a
+            # start/stop or chapter break.
+          elsif audio and audio[:timestamp] < audioinfo[audio[:filename]][:duration]
+            BigBlueButton.logger.info "  Using input #{audio[:filename]}"
+
+            filter = "[#{input_index}] "
+            filter << "#{FFMPEG_AFORMAT},apad,atrim=end=#{ms_to_s(duration)} [out#{output_index}]"
+            ffmpeg_filters << filter
+
+            ffmpeg_inputs << {
+              :filename => audio[:filename],
+              :seek => audio[:timestamp]
+            }
+
+            input_index += 1
+            output_index += 1
+
           else
             BigBlueButton.logger.info "  Generating silence"
 

From bfb41d74c742e2ed41e67a771f5a74bba0038a15 Mon Sep 17 00:00:00 2001
From: Oleksandr Zhurbenko <xaerok.od.ua@gmail.com>
Date: Mon, 12 Feb 2018 14:59:05 -0800
Subject: [PATCH 19/21] Added an extra check to prevent an issue described in
 #5137

---
 .../ui/components/whiteboard/annotations/pencil/component.jsx  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/pencil/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/pencil/component.jsx
index 6cbd687221..e367e04fb8 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/pencil/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/pencil/component.jsx
@@ -96,7 +96,8 @@ export default class PencilDrawComponent extends Component {
   }
 
   getCoordinates(annotation, slideWidth, slideHeight) {
-    if (annotation.points.length === 0) {
+    if ((!annotation || annotation.points.length === 0)
+        || (annotation.status === 'DRAW_END' && !annotation.commands)) {
       return undefined;
     }
 

From ac46f534d5fef0c01c9528c92fa2552554147735 Mon Sep 17 00:00:00 2001
From: Oswaldo Acauan <oswaldoacauan@gmail.com>
Date: Tue, 13 Feb 2018 14:20:59 -0200
Subject: [PATCH 20/21] Fix mutating state with delete when destroying a video

---
 .../ui/components/video-dock/component.jsx    | 66 ++++++++-----------
 1 file changed, 29 insertions(+), 37 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
index 746076fedb..ec7f9b191b 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
@@ -44,27 +44,26 @@ class VideoElement extends Component {
     let cssClass;
     if (this.props.shared || !this.props.localCamera) {
       cssClass = styles.sharedWebcamVideoLocal;
-    }
-    else {
+    } else {
       cssClass = styles.sharedWebcamVideo;
     }
     return (
-      <div className={styles.videoContainer + " " + cssClass} >
+      <div className={`${styles.videoContainer} ${cssClass}`} >
         { this.props.localCamera ?
-            <video id="shareWebcam" muted={true} autoPlay={true} playsInline={true} />
+          <video id="shareWebcam" muted autoPlay playsInline />
           :
-            <video id={`video-elem-${this.props.videoId}`} autoPlay={true} playsInline={true} />
+          <video id={`video-elem-${this.props.videoId}`} autoPlay playsInline />
         }
         <div className={styles.videoText}>
           <div className={styles.userName}>{this.props.name}</div>
-          {/*<Button
+          {/* <Button
             label=""
             className={styles.pauseButton}
             icon={'unmute'}
             size={'sm'}
             circle
             onClick={() => {}}
-          />*/}
+          /> */}
         </div>
       </div>
     );
@@ -91,7 +90,7 @@ class VideoDock extends Component {
 
     this.state = {
       videos: {},
-      sharedWebcam : false,
+      sharedWebcam: false,
       userNames: {},
     };
 
@@ -191,7 +190,7 @@ class VideoDock extends Component {
 
   adjustVideos() {
     setTimeout(() => {
-      window.adjustVideos('webcamArea', true, mediaStyles.moreThan4Videos, mediaStyles.container, mediaStyles.overlayWrapper, 'presentationAreaData', 'screenshareVideo' );
+      window.adjustVideos('webcamArea', true, mediaStyles.moreThan4Videos, mediaStyles.container, mediaStyles.overlayWrapper, 'presentationAreaData', 'screenshareVideo');
     }, 0);
   }
 
@@ -236,7 +235,7 @@ class VideoDock extends Component {
       case 'iceCandidate':
         const webRtcPeer = this.webRtcPeers[parsedMessage.cameraId];
 
-        if (!!webRtcPeer) {
+        if (webRtcPeer) {
           if (webRtcPeer.didSDPAnswered) {
             webRtcPeer.addIceCandidate(parsedMessage.candidate, (err) => {
               if (err) {
@@ -265,13 +264,13 @@ class VideoDock extends Component {
     const { intl } = this.props;
 
     console.log(`Starting video call for video: ${id} with ${shareWebcam}`);
-    let userNames = this.state.userNames;
+    const userNames = this.state.userNames;
     users.forEach((user) => {
       if (user.userId === id) {
         userNames[id] = user.name;
       }
     });
-    this.setState({userNames: userNames});
+    this.setState({ userNames });
 
     this.cameraTimeouts[id] = setTimeout(() => {
       log('error', `Camera share has not suceeded in ${CAMERA_SHARE_FAILED_WAIT_TIME}`);
@@ -286,7 +285,7 @@ class VideoDock extends Component {
 
     if (shareWebcam) {
       VideoService.joiningVideo();
-      this.setState({sharedWebcam: true});
+      this.setState({ sharedWebcam: true });
       this.myId = id;
       this.initWebRTC(id, true);
     } else {
@@ -350,7 +349,7 @@ class VideoDock extends Component {
 
     let peerObj;
     if (shareWebcam) {
-      options.localVideo = document.getElementById("shareWebcam");
+      options.localVideo = document.getElementById('shareWebcam');
       peerObj = kurentoUtils.WebRtcPeer.WebRtcPeerSendonly;
     } else {
       peerObj = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly;
@@ -450,16 +449,13 @@ class VideoDock extends Component {
   }
 
   destroyVideoTag(id) {
-    const videos = this.state.videos;
-    const userNames = this.state.userNames;
+    const { videos, userNames } = this.state;
 
-    delete videos[id];
-    delete userNames[id]
-    this.setState({videos: videos, userNames: userNames})
-
-    if (id == this.myId) {
-      this.setState({ sharedWebcam: false });
-    }
+    this.setState({
+      videos: videos.filter((_, i) => i !== id),
+      userNames: userNames.filter((_, i) => i !== id),
+      sharedWebcam: id !== this.myId,
+    });
   }
 
   destroyWebRTCPeer(id) {
@@ -616,12 +612,10 @@ class VideoDock extends Component {
     return (
       <div className={styles.videoDock}>
         <div id="webcamArea" className={styles.webcamArea}>
-          {Object.keys(this.state.videos).map((id) => {
-            return (
-              <VideoElement videoId={id} key={id} name={this.state.userNames[id]} localCamera={false} onMount={this.initWebRTC.bind(this)} />
-            );
-          })}
-          <VideoElement shared={this.state.sharedWebcam} name={this.state.userNames[this.myId]} localCamera={true} />
+          {Object.keys(this.state.videos).map(id => (
+            <VideoElement videoId={id} key={id} name={this.state.userNames[id]} localCamera={false} onMount={this.initWebRTC.bind(this)} />
+            ))}
+          <VideoElement shared={this.state.sharedWebcam} name={this.state.userNames[this.myId]} localCamera />
         </div>
       </div>
     );
@@ -632,11 +626,10 @@ class VideoDock extends Component {
     const currentUsers = this.props.users || {};
     const nextUsers = nextProps.users;
 
-    let users = {};
-    let present = {};
+    const users = {};
+    const present = {};
 
-    if (!currentUsers)
-      return false;
+    if (!currentUsers) { return false; }
 
     // Map user objectos to an object in the form {userId: has_stream}
     currentUsers.forEach((user) => {
@@ -645,7 +638,7 @@ class VideoDock extends Component {
 
     // Keep instances where the flag has changed or next user adds it
     nextUsers.forEach((user) => {
-      let id = user.userId;
+      const id = user.userId;
       // The case when a user exists and stream status has not changed
       if (users[id] === user.has_stream) {
         delete users[id];
@@ -661,7 +654,7 @@ class VideoDock extends Component {
     const userIds = Object.keys(users);
 
     for (let i = 0; i < userIds.length; i++) {
-      let id = userIds[i];
+      const id = userIds[i];
 
       // If a userId is not present in nextUsers let's stop it
       if (!present[id]) {
@@ -677,8 +670,7 @@ class VideoDock extends Component {
         if (userId !== id) {
           this.start(id, false);
         }
-      }
-      else {
+      } else {
         this.stop(id);
       }
     }

From afc5d597a73d62cccf99fc012a9281d7ed697361 Mon Sep 17 00:00:00 2001
From: Oswaldo Acauan <oswaldoacauan@gmail.com>
Date: Tue, 13 Feb 2018 17:45:03 -0200
Subject: [PATCH 21/21] Fix console error

---
 .../imports/ui/components/video-dock/component.jsx           | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
index ec7f9b191b..958c432b8e 100644
--- a/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-dock/component.jsx
@@ -7,6 +7,7 @@ import { notify } from '/imports/ui/services/notification';
 import { toast } from 'react-toastify';
 import { styles as mediaStyles } from '/imports/ui/components/media/styles';
 import Toast from '/imports/ui/components/toast/component';
+import _ from 'lodash';
 
 const intlMessages = defineMessages({
   iceCandidateError: {
@@ -452,8 +453,8 @@ class VideoDock extends Component {
     const { videos, userNames } = this.state;
 
     this.setState({
-      videos: videos.filter((_, i) => i !== id),
-      userNames: userNames.filter((_, i) => i !== id),
+      videos: _.omit(videos, id),
+      userNames: _.omit(userNames, id),
       sharedWebcam: id !== this.myId,
     });
   }