Merge pull request #5916 from antobinary/custom-parameters-2

Add support for custom parameters (userdata) in HTML5 client #5882 - wrapper

bigbluebutton-html5/imports/startup/client/auth.js

@@ -8,6 +8,7 @@ import logger from '/imports/startup/client/logger';
 // disconnected and trying to open a new connection
 const STATUS_CONNECTING = 'connecting';
 const METADATA_KEY = 'metadata';
+const CUSTOM_DATA_KEY = 'customdata';
 
 export function joinRouteHandler(nextState, replace, callback) {
   const { sessionToken } = nextState.location.query;
@@ -28,8 +29,7 @@ export function joinRouteHandler(nextState, replace, callback) {
     .then(({ response }) => {
       const {
         returncode, meetingID, internalUserID, authToken, logoutUrl, customLogoURL, metadata,
-        externUserID, fullname, confname,
-
+        externUserID, fullname, confname, customdata,
       } = response;
 
       if (returncode === 'FAILED') {
@@ -38,6 +38,7 @@ export function joinRouteHandler(nextState, replace, callback) {
       }
 
       setCustomLogoUrl(customLogoURL);
+
       const metakeys = metadata.length
         ? metadata.reduce((acc, meta) => {
           const key = Object.keys(meta).shift();
@@ -58,8 +59,31 @@ export function joinRouteHandler(nextState, replace, callback) {
             log('error', `Caught: ${e.message}`);
           }
           return { ...acc, [key]: value };
-        }) : {};
+        }, {}) : {};
+
+      const customData = customdata.length
+        ? customdata.reduce((acc, data) => {
+          const key = Object.keys(data).shift();
+
+          const handledHTML5Parameters = [
+            'html5recordingbot'
+          ];
+          if (handledHTML5Parameters.indexOf(key) === -1) {
+            return acc;
+          }
+
+          let value = data[key];
+          try {
+            value = JSON.parse(value);
+          } catch (e) {
+            log('error', `Caught: ${e.message}`);
+          }
+
+          return { ...acc, [key]: value};
+        }, {}) : {};
+
       SessionStorage.setItem(METADATA_KEY, metakeys);
+      SessionStorage.setItem(CUSTOM_DATA_KEY, customData);
 
       Auth.set(
         meetingID, internalUserID, authToken, logoutUrl,

bigbluebutton-html5/imports/ui/components/actions-bar/desktop-share/component.jsx

@@ -43,21 +43,21 @@ const DesktopShare = ({
   isUserPresenter,
 }) => (
   (screenSharingCheck && !isMobileBrowser && isUserPresenter ?
-        <Button
-          className={styles.button}
-          icon="desktop"
-          label={intl.formatMessage(isVideoBroadcasting ?
-          intlMessages.stopDesktopShareLabel : intlMessages.desktopShareLabel)}
-          description={intl.formatMessage(isVideoBroadcasting ?
-          intlMessages.stopDesktopShareDesc : intlMessages.desktopShareDesc)}
-          color="primary"
-          icon="desktop"
-          ghost={false}
-          hideLabel
-          circle
-          size="lg"
-          onClick={isVideoBroadcasting ? handleUnshareScreen : handleShareScreen}
-        />
+    <Button
+      className={styles.button}
+      icon="desktop"
+      label={intl.formatMessage(isVideoBroadcasting ?
+      intlMessages.stopDesktopShareLabel : intlMessages.desktopShareLabel)}
+      description={intl.formatMessage(isVideoBroadcasting ?
+      intlMessages.stopDesktopShareDesc : intlMessages.desktopShareDesc)}
+      color="primary"
+      ghost={false}
+      hideLabel
+      circle
+      size="lg"
+      onClick={isVideoBroadcasting ? handleUnshareScreen : handleShareScreen}
+      id={isVideoBroadcasting ? 'unshare-screen-button' : 'share-screen-button'}
+    />
     : null)
 );
 

bigbluebutton-html5/imports/ui/components/screenshare/component.jsx

@@ -29,8 +29,8 @@ export default class ScreenshareComponent extends React.Component {
 
   render() {
     return (
-      [!this.state.loaded ? (<div className={styles.connecting} />) : null,
-        (<video id="screenshareVideo" style={{ maxHeight: '100%', width: '100%' }} autoPlay playsInline onLoadedData={this.onVideoLoad} />)]
+      [!this.state.loaded ? (<div key="screenshareArea" className={styles.connecting} />) : null,
+        (<video key="screenshareVideo" id="screenshareVideo" style={{ maxHeight: '100%', width: '100%' }} autoPlay playsInline onLoadedData={this.onVideoLoad} />)]
     );
   }
 }

bigbluebutton-html5/imports/ui/components/video-provider/video-menu/component.jsx

@@ -48,6 +48,7 @@ const JoinVideoOptions = ({
           description={item.description}
           onClick={item.click}
           tabIndex={-1}
+          id={item.id}
         >
           <img src={item.iconPath} className={styles.imageSize} alt="video menu icon" />
           <span className={styles.label}>{item.label}</span>

bigbluebutton-html5/imports/ui/components/video-provider/video-menu/container.jsx

@@ -42,6 +42,7 @@ const JoinVideoOptionsContainer = (props) => {
       label: intl.formatMessage(intlMessages.swapCam),
       disabled: !swapLayoutAllowed,
       click: toggleSwapLayout,
+      id: 'swap-button',
     },
     {
       iconPath: `${baseName}/resources/images/video-menu/icon-webcam-off.svg`,
@@ -49,6 +50,7 @@ const JoinVideoOptionsContainer = (props) => {
       label: intl.formatMessage(intlMessages[isSharingVideo ? 'leaveVideo' : 'joinVideo']),
       disabled: isDisabled && !isSharingVideo,
       click: isSharingVideo ? handleCloseVideo : handleJoinVideo,
+      id: isSharingVideo ? 'leave-video-button' : 'join-video-button',
     },
   ];
 

bigbluebutton-web/grails-app/controllers/org/bigbluebutton/web/controllers/ApiController.groovy

@@ -1388,8 +1388,7 @@ class ApiController {
               defaultLayout = us.defaultLayout
               avatarURL = us.avatarURL
               customdata = array {
-                userCustomData.each { k, v ->
-                  // Somehow we need to prepend something (custdata) for the JSON to work
+                meeting.getUserCustomData(us.externUserID).each { k, v ->
                   custdata "$k" : v
                 }
               }