New red logout button in action-bar

[Antonio Guirado Puerta]

Hello,

some our users tell us than logout option is very hide. Besides, sometimes a moderator has use EndMeeting option insteadof Logout option. So we have do a little change. We have create a red logout button in the action bar (next to screenshare button) and delete this option from SettingDropDown (top-righ option). You can enable/disable this logout button thanks to configuration file with option allowLogoutButton.

Here is the code:

iff -u bigbluebutton-html5-2.2.19/private/config/settings.yml bigbluebutton-html5-2.2.19-dev-002-src/private/config/settings.yml

 

@@ -25,6 +26,7 @@

     viewersInWebcam: 8

     ipv4FallbackDomain: ""

     allowLogout: true

+    allowLogoutButton: true

     allowFullscreen: true

     remainingTimeThreshold: 30

     remainingTimeAlertThreshold: 1

 

 

diff -u bigbluebutton-html5-2.2.19/imports/ui/components/nav-bar/settings-dropdown/component.jsx bigbluebutton-html5-2.2.19-dev-002-src/imports/ui/components/nav-bar/settings-dropdown/component.jsx

--- bigbluebutton-html5-2.2.19/imports/ui/components/nav-bar/settings-dropdown/component.jsx    2020-06-24 15:37:15.000000000 +0200

+++ bigbluebutton-html5-2.2.19-dev-002-src/imports/ui/components/nav-bar/settings-dropdown/component.jsx        2020-07-13 13:10:29.000000000 +0200

@@ -110,6 +110,8 @@

 };

 const ALLOW_FULLSCREEN = Meteor.settings.public.app.allowFullscreen;

+const ALLOW_LOGOUTBUTTON = Meteor.settings.public.app.allowLogoutButton;

+

 class SettingsDropdown extends PureComponent {

   constructor(props) {

@@ -221,7 +223,7 @@

       />

     );

-    const shouldRenderLogoutOption = (isMeteorConnected && allowLogoutSetting)

+    const shouldRenderLogoutOption = (isMeteorConnected && allowLogoutSetting && !ALLOW_LOGOUTBUTTON)

       ? logoutOption

       : null;

@@ -259,7 +261,7 @@

         description={intl.formatMessage(intlMessages.hotkeysDesc)}

         onClick={() => mountModal(<ShortcutHelpComponent />)}

       />),

-      (isMeteorConnected ? <DropdownListSeparator key={_.uniqueId('list-separator-')} /> : null),

+      (isMeteorConnected && (shouldRenderLogoutOption || allowedToEndMeeting) ? <DropdownListSeparator key={_.uniqueId('list-separator-')} /> : null),

       allowedToEndMeeting && isMeteorConnected

         ? (<DropdownListItem

           key="list-item-end-meeting"

diff -u bigbluebutton-html5-2.2.19/imports/ui/components/actions-bar/component.jsx bigbluebutton-html5-2.2.19-dev-002-src/imports/ui/components/actions-bar/component.jsx

--- bigbluebutton-html5-2.2.19/imports/ui/components/actions-bar/component.jsx  2020-06-24 15:37:15.000000000 +0200

+++ bigbluebutton-html5-2.2.19-dev-002-src/imports/ui/components/actions-bar/component.jsx      2020-07-13 13:01:10.000000000 +0200

@@ -8,6 +8,7 @@

 import JoinVideoOptionsContainer from '../video-provider/video-button/container';

 import CaptionsButtonContainer from '/imports/ui/components/actions-bar/captions/container';

 import PresentationOptionsContainer from './presentation-options/component';

+import LogoutButton from './logout-button/component';

 class ActionsBar extends PureComponent {

   render() {

@@ -99,6 +100,11 @@

             screenshareDataSavingSetting,

           }}

           />

+          <LogoutButton {...{

+            intl,

+            isMeteorConnected,

+          }}

+          />

         </div>

         <div className={styles.right}>

           {isLayoutSwapped

New File: bigbluebutton-html5-2.2.19-dev-002-src/imports/ui/components/actions-bar/logout-button/component.jsx

import React, { PureComponent } from 'react';

import { defineMessages, injectIntl, intlShape } from 'react-intl';

import PropTypes from 'prop-types';

import { withModalMounter } from '/imports/ui/components/modal/service';

import { makeCall } from '/imports/ui/services/api';

import Button from '/imports/ui/components/button/component';

import { styles } from '../styles';

const intlMessages = defineMessages({

  leaveSessionLabel: {

    id: 'app.navBar.settingsDropdown.leaveSessionLabel',

    description: 'Leave session button label',

  },

  leaveSessionDesc: {

    id: 'app.navBar.settingsDropdown.leaveSessionDesc',

    description: 'Describes leave session option',

  },

});

const propTypes = {

  intl: intlShape.isRequired,

  isMeteorConnected: PropTypes.bool.isRequired,

  mountModal: PropTypes.func.isRequired,

};

const ALLOW_LOGOUT = Meteor.settings.public.app.allowLogout;

class LogoutButton extends PureComponent {

  constructor(props) {

    super(props);

    //this.state = {

    //  isSettingOpen: false,

    //  isFullscreen: false,

    //};

    // Set the logout code to 680 because it's not a real code and can be matched on the other side

    this.LOGOUT_CODE = '680';

    this.leaveSession = this.leaveSession.bind(this);

  }

  leaveSession() {

    document.dispatchEvent(new Event('exitVideo'));

    makeCall('userLeftMeeting');

    // we don't check askForFeedbackOnLogout here,

    // it is checked in meeting-ended component

    Session.set('codeError', this.LOGOUT_CODE);

    // mountModal(<MeetingEndedComponent code={LOGOUT_CODE} />);

  }

  render() {

    const {

      intl,

      isMeteorConnected,

    } = this.props;

    const allowLogoutSetting = isMeteorConnected && ALLOW_LOGOUT;

    return (

            !allowLogoutSetting ? null

            : (<Button

               className={styles.button}

               icon="logout"

               label={intl.formatMessage(intlMessages.leaveSessionLabel)}

               description={intl.formatMessage(intlMessages.leaveSessionDesc)}

               color="danger"

               //   ghost={!isVideoBroadcasting}

               hideLabel

               circle

               size="lg"

               onClick={() => this.leaveSession()}

               />

              )

      );

  }

}

LogoutButton.propTypes = propTypes;

export default withModalMounter(injectIntl(LogoutButton));

[Martin Thomas Schrott]

hi Antonio,


could you please make a pullrequest so this could be merged into bbb?

there are a few people waiting for this feature and hopefully it will be
merged by the dev team, if it is optional.


thanks,

martin

[Matias Silva]

Yes, please do!

This looks really great, please make a pull request and attach an image.
Thanks for sharing this with us.

---
Thanks, Matias

[dwun...@gmail.com]

This is a great feature, people struggle with the hidden Logoff and End Meeting buttons

[jossef]

End Meeting instead of Logout option - It did happen to me too,

Is there room for the new button on a mobile device when presentation is minimized ?

בתאריך יום ראשון, 19 ביולי 2020 בשעה 09:35:37 UTC+3, מאת Antonio Guirado Puerta:

[Mauro Napoli]

Yes please! It is a common problem. Moderators often ends the meeting instead fo logout... Would be very appreciated!

[Matias Silva]

Hi,

Looks interesting! Would you consider adding this code as a pull request
so discussion on this feature can happen on GitHub?

---
Thanks, Matias

> --
> You received this message because you are subscribed to the Google
> Groups "BigBlueButton-dev" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to bigbluebutton-...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/bigbluebutton-dev/b5e08c00-1fe8-4bff-b224-08318f848affn%40googlegroups.com
> [1].
>
>
> Links:
> ------
> [1]
> https://groups.google.com/d/msgid/bigbluebutton-dev/b5e08c00-1fe8-4bff-b224-08318f848affn%40googlegroups.com?utm_medium=email&utm_source=footer

[amguirado73]

Hi,

I will try to share the code as a pull request on GitHub.

Thanks.