Skip to content

Dev3 popup + presenter tool keepupdating - #240

Open
hiroshisuga wants to merge 254 commits into
v3.0.x-releasefrom
dev3_popup_keepupdating
Open

Dev3 popup + presenter tool keepupdating#240
hiroshisuga wants to merge 254 commits into
v3.0.x-releasefrom
dev3_popup_keepupdating

Conversation

@hiroshisuga

@hiroshisuga hiroshisuga commented Feb 22, 2026

Copy link
Copy Markdown
Owner

Will resolve bigbluebutton#18182, bigbluebutton#11403

Problems remained

  • dark mode does not work (show normal mode) -> darkReader is implemented as a browser function, so it would not work on the popup window (needs confirmation) -> now it works by copying CSS rules (Aug 2026)
  • tooltip not shown -> now they are shown!
  • depending on browser and OS, fullscreen in the same monitor does not expand the presentation (if you move to another monitor, it works). If it happens, you click the screen then tldraw realizes and the screen size has changed (but not always...).
  • the above problem is solved. Now zooming (by wheel or by clicking the zoom button) is the only problem remained. -> accidentally fixed(?) by 5726c9e, after the evaporation of cache??? -> solved by replacing requestAnimationFrame and cancelAnimationFrame with those of popup (cc3d507).
  • resize by dragging the resize handles does not work (focus is lost); dom.ts in tldraw causes the problem
  • the global variable HTMLElement is injected with that of popupWindow, fixing the problem above, yet other problems to be expected. -> indeed. We now back up the window.HTMLElement at utils/HTMLElementBackup and use the original value at for instance the chat message scroll (Fix: chat scrolls even with popped up presentation #232).
  • style panel including the color picker does not work well. When mouse-down, the mouse-up event is not caught, behaving as if mouse is kept down when hovered over the button, picking up every color that mouse hover. The reason is in this file: tldraw-alpha30/packages/tldraw/src/lib/ui/components/primitives/ButtonPicker.tsx
  • Fonts are not properly loaded on the popup, e. g., the var(--tl-font-draw) font which is the default on latin languages.
  • Frequent 3006 error from graphql since 3.0.13 or 14 (not happening on 3.0.11)
  • Firefox suffers an error of too much recursion of font measurement when the text font is changed more than twice (or once?). The tldraw files packages/editor/src/lib/editor/managers/TextManager.ts, packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx, and packages/editor/src/lib/utils/WeakMapCache.ts may account for it. -> fixed by 3113f60
  • slide zoom is not inherited to the popup (perhaps currentPresentationPageRef is initialised in whiteboard/component.jsx: see #23828 -> fixed by Improve cross-realm portability of editor animation frames bigbluebutton/tldraw#55 .

Additional features

  • disabled by default, to enable you have to toggle the parameter allowPopupPresentation.
  • on the popup, the hand icon turns red, being more visible in the screen of the real lecture. -> replaced by the laser pointer PR
  • add Kosugi-Maru font to look a text funnier for the Japanese locale -> Dev3.0.15 use better font #235 (only for popup)
  • Show the presenter note like PPT, extracting notes from an uploaded pptx file (need to copy bigbluebutton-web/script/extract_pptx_notes.py to e.g. /usr/local/bin/, and modify the nginx configuration file). So this modification close the issue #20487
  • The current slide panel reflects the zoom and pan, together with the pointer on the slide, however, whiteboard drawings are not reflected.
  • the panes of presenter's tool are resizable now, adopting to portrait mode presentation.
  • Now the whiteboard drawing correctly (and at real-time) show in the "current slide" pane, but not in the "next slide" pane.

ToDo

  • if the frequent 3006 error disappears. -> still appears on 3.0.15 -> not observed anymore on 3.0.22, so reverted this PR (26.3.11).
  • video stop button appears. -> yes it does on 3.0.15
  • On mobile devices (especially iPad) it is unstable. Disabling this feature is an option Disabled for mobile devices (only for desktop devices)
  • whiteboard annotations do not show up on the current slide window.
  • text drawn on whiteboard bears tldraw font (we could replace the font included in the SVG file)
  • poll results are not explicitly shown in the "current slide", showing only a white rectangle (which is OK, I think)

Caution
Tldraw2.0 internally (and implicitly) uses global variables/functions, making some conflicts with popup, including:

You need to modify /usr/share/bigbluebutton/nginx/web manually, and copy script/extract_pptx_notes.py to /usr/local/bin/ manually (latter only once; is there a better location?).

Now this PR assumes using a custom tldraw package, with bigbluebutton/tldraw#54 and bigbluebutton/tldraw#53 incorporated.

Now fullscreen is much more simplified, without using the popupWindow variable. However, a problem remains (and it also happens partially in the original BBB code):
On Windows, maximizing the popup window with the OS window controls is clearly distinguishable from entering fullscreen mode. Also, once the popup enters fullscreen mode, the OS maximize/restore button is no longer visible.
On macOS, however, the OS window control remains visible even after entering fullscreen mode. This can be confusing, because users may try to use the OS restore button to exit fullscreen. In reality, OS window maximization and the browser Fullscreen API are separate states, so ideally the OS control should still represent only the window maximized state and should not appear to act as a fullscreen exit control.
At the moment, there does not seem to be a clean and portable way for a web application to control or hide this OS-level window control. For now, this should be treated as a platform-specific limitation of the popup fullscreen behavior.
ウィンドウズだと、OSの最大化ボタンでの最大化は、BBBのフルスクリーン化と明確に区別できる上に、フルスクリーン化後は、OSの最大化解除ボタンが見えなくなっています。特に最後の点が重要で、MacOSではそれが見えてしまうために、ユーザーがOSの最大化解除でフルスクリーンから脱出しようとしてしまい、混乱がおきます。実は本来、(OSの最大化とフルスクリーンを区別するならば)フルスクリーン化後のOSのボタンは、最大化ボタンのままであるべきです。

Screenshot:
Animation

(sample slide from https://powerpoint.cloud.microsoft/create/en/presentation-templates/)

slide_sample.pptx

….jsx

ideally this should be done for other places.
…ayout-manager/customLayout.jsx

Fix the condition
…ayout-manager/ayoutEngine.jsx

fix the condition
…ayout-manager/participantsAndChatOnlyLayout.jsx
Shows notes only to the moderator or to the assigned presenters.
usually these do not happen, but not impossible if a user generates a fake URL.
@github-actions

Copy link
Copy Markdown

🚨 Automated tests failed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant