Layout Manager Changes #10155

vitormateusalmeida · 2020-07-30T01:35:51Z

This PR

Modify the presentation to auto enable the auto arrange layout when change the presentation aspect ratio.
Removes button to enable/disable auto arrange layout from action bar
Adds a button to open a debug modal. Can enable/disable the auto arrange layout on this.
Removes some unused classes

TiagoJacobs · 2020-08-03T18:25:27Z

Hello @vitormateusalmeida it would be nice to have an extra configuration that's the ability to enable the debug window using keyboard ( it can be useful when providing support to a user ).

So my suggestion would be to keep the showDebugWindow and add an extra one showDebugWindowByKeyboard .

Also, please add the browser's user agent on this debug window.

KDSBrowne · 2020-08-10T12:14:31Z

bigbluebutton-html5/imports/ui/components/debug-window/component.jsx

+    window.addEventListener('resize', this.handleResize, false);
+    document.addEventListener('keyup', (event) => {
+      const key = event.key.toUpperCase();
+      if (SHOW_DEBUG_WINDOW_SHORTCUT && event.ctrlKey && event.altKey && key === 'K') {


Might be a good idea to have this shortcut follow some of the other shortcuts, using the accesskey attribute for consistency. It should also be visible in the keyboard shortcut modal.

KDSBrowne · 2020-08-10T12:14:39Z

bigbluebutton-html5/imports/ui/components/debug-window/component.jsx

+        className={styles.debugModal}
+        onRequestClose={() => mountModal(null)}
+        hideBorder
+        contentLabel="Debug"


This needs to be localized

KDSBrowne · 2020-08-10T12:14:43Z

bigbluebutton-html5/imports/ui/components/debug-window/component.jsx

+      >
+        <div className={styles.row}>
+          <div className={styles.col} aria-hidden="true">
+            <h3 className={styles.title}>Debug</h3>


This needs to be localized

KDSBrowne · 2020-08-10T12:14:46Z

bigbluebutton-html5/imports/ui/components/debug-window/component.jsx

+          <div className={cx(styles.col, styles.col_4)} aria-hidden="true">
+            <div className={styles.formElement}>
+              <div className={styles.label}>
+                User Agent:


This needs to be localized

KDSBrowne · 2020-08-10T12:14:50Z

bigbluebutton-html5/imports/ui/components/debug-window/component.jsx

+                type="button"
+                onClick={() => navigator.clipboard.writeText(window.navigator.userAgent)}
+              >
+                Copy


This needs to be localized

KDSBrowne · 2020-08-10T12:15:00Z

bigbluebutton-html5/imports/ui/components/debug-window/component.jsx

+                icons={false}
+                defaultChecked={autoArrangeLayout}
+                onChange={() => this.autoArrangeToggle()}
+                ariaLabel="teste"


This needs to be localized, and should be something meaningful.

KDSBrowne · 2020-08-10T12:15:03Z

bigbluebutton-html5/imports/ui/components/debug-window/component.jsx

+          <div className={styles.col}>
+            <div className={cx(styles.formElement, styles.pullContentRight)}>
+              <p className={styles.desc}>
+                (it will be disabled if you drag or resize the webcams area)


This needs to be localized

KDSBrowne · 2020-08-10T12:15:11Z

bigbluebutton-html5/imports/ui/components/debug-window/component.jsx

+          // icon="application"
+          customIcon={(
+            <i className={styles.debugIcon}>
+              <svg id="Icons" version="1.1" viewBox="0 0 32 32" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">


For consistency, we could probably have @tylercopeland create a debug icon and use the Icon component instead.

KDSBrowne · 2020-08-10T12:15:22Z

bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx

@@ -152,25 +152,32 @@ class PanelManager extends Component {

    if (userListSize.width !== oldUserListSize.width && userListSize.width !== userlistWidth) {
      this.setUserListWidth(userListSize.width);
+      this.forceUpdate();


AFAIK we should be trying to avoid the use of this.forceUpdate. Is there another alternative to this?

In this case I don't think so, I need to do this to force another update after set the width by layout manager.

KDSBrowne · 2020-08-10T12:15:35Z

bigbluebutton-html5/private/config/settings.yml

@@ -34,6 +34,8 @@ public:
      duration: 4000
    remainingTimeThreshold: 30
    remainingTimeAlertThreshold: 1
+    showDebugWindow: false
+    showDebugWindowShortcut: true


This would be better in the shortcut section:

showDebugWindow: accesskey: K descId: showDebugWindow

I changed the name of this parameters to make sense.
enableDebugWindowButton: (to show the button to access the debug window)
enableDebugWindowShortcut: (to enable the shortcut to show debug window)

KDSBrowne · 2020-08-10T12:27:08Z

There are 2 other bugs that were also introduced by #10144 .

Panels no longer retain their size when re-opened.
Long delay when switching between panels (chat to breakoutroom and vise versa).

KDSBrowne · 2020-08-18T14:21:21Z

bigbluebutton-html5/imports/ui/components/debug-window/component.jsx

+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize, false);
+    document.addEventListener('keyup', (event) => {


I don't think we need to add another event listener. The button on line 191 just needs accessKey={SHOW_DEBUG_WINDOW_ACCESSKEY} added to it as an attribute.

I added a setting to disable the button, then the button not be render and the accessKey not be work

Ahh, so the idea was to have the shortcut still functional when the button is hidden.

KDSBrowne · 2020-08-18T17:40:34Z

Client crashes with blue screen when you try to select the keyboard shortcuts option from the settings dropdown

KDSBrowne · 2020-08-18T19:28:36Z

Page reloads cause a problem with the userlist / userlist toggle button.

Panel closes itself on reload.
Toggle button displays the wrong state (needs 2 clicks to open) after reload.

KDSBrowne · 2020-08-18T19:47:45Z

On mobile, If the user opens the user list they are trapped on the view below and can't close the panel to see the presentation.

KDSBrowne · 2020-08-19T15:03:13Z

The presentation toolbar disappears when exiting full-screen view

vitormateusalmeida · 2020-09-08T12:41:22Z

Moved to #10390 and #10341

vitormateusalmeida added 5 commits July 29, 2020 21:59

Add debug button

80daa85

Remove Warnings

7bc68b5

Disable debug button in settings

926be55

Fix auto open chat panel when enable/disable webcam

9800d67

Merge remote-tracking branch 'upstream/develop' into layout-manager-2

602d86a

vitormateusalmeida marked this pull request as ready for review July 30, 2020 22:24

vitormateusalmeida added 2 commits August 5, 2020 19:36

Merge remote-tracking branch 'upstream/develop' into layout-manager-2

2b25d36

Add a shortcut to debug window

0fdfdb1

antobinary added the module: client label Aug 7, 2020

antobinary added this to the Release 2.3 milestone Aug 7, 2020

KDSBrowne suggested changes Aug 10, 2020

View reviewed changes

vitormateusalmeida added 3 commits August 17, 2020 17:07

Merge remote-tracking branch 'upstream/develop' into layout-manager-2

7a4b94a

Add locales and fix delay when change open panel

e12bf93

Add shortcut setting

6e961bd

KDSBrowne suggested changes Aug 18, 2020

View reviewed changes

vitormateusalmeida marked this pull request as draft August 20, 2020 11:50

KDSBrowne mentioned this pull request Aug 27, 2020

Firefox 80 return from fullscreen hides buttons at bottom of screen #10337

Closed

vitormateusalmeida closed this Sep 8, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Layout Manager Changes #10155

Layout Manager Changes #10155

vitormateusalmeida commented Jul 30, 2020

TiagoJacobs commented Aug 3, 2020 •

edited

KDSBrowne Aug 10, 2020

KDSBrowne Aug 10, 2020

KDSBrowne Aug 10, 2020

KDSBrowne Aug 10, 2020

KDSBrowne Aug 10, 2020

KDSBrowne Aug 10, 2020

KDSBrowne Aug 10, 2020

KDSBrowne Aug 10, 2020

KDSBrowne Aug 10, 2020

vitormateusalmeida Aug 17, 2020

KDSBrowne Aug 10, 2020

vitormateusalmeida Aug 17, 2020

KDSBrowne commented Aug 10, 2020 •

edited

KDSBrowne Aug 18, 2020

vitormateusalmeida Aug 18, 2020

KDSBrowne Aug 18, 2020

KDSBrowne commented Aug 18, 2020

KDSBrowne commented Aug 18, 2020 •

edited

KDSBrowne commented Aug 18, 2020 •

edited

KDSBrowne commented Aug 19, 2020

vitormateusalmeida commented Sep 8, 2020

Layout Manager Changes #10155

Layout Manager Changes #10155

Conversation

vitormateusalmeida commented Jul 30, 2020

TiagoJacobs commented Aug 3, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KDSBrowne commented Aug 10, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KDSBrowne commented Aug 18, 2020

KDSBrowne commented Aug 18, 2020 • edited

KDSBrowne commented Aug 18, 2020 • edited

KDSBrowne commented Aug 19, 2020

vitormateusalmeida commented Sep 8, 2020

TiagoJacobs commented Aug 3, 2020 •

edited

KDSBrowne commented Aug 10, 2020 •

edited

KDSBrowne commented Aug 18, 2020 •

edited

KDSBrowne commented Aug 18, 2020 •

edited