fix(presentation): workaround for slide download

This is a workaround to the conflict that is happening when an user tries to
download the slide when dark mode is enabled. There is a conflict between
dark mode's styles and the html-to-image lib. To temporarily prevent this from
happening, the dark mode is disabled before downloading the slide, and then
re-enabled when the download is complete.

In order to be able to enable and disable dark mode from another component than
the App, all the dark mode switch logic was extracted into the service of the
app component.

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

@@ -40,7 +40,6 @@ import SidebarNavigationContainer from '../sidebar-navigation/container';
 import SidebarContentContainer from '../sidebar-content/container';
 import { makeCall } from '/imports/ui/services/api';
 import ConnectionStatusService from '/imports/ui/components/connection-status/service';
-import DarkReader from 'darkreader';
 import Settings from '/imports/ui/services/settings';
 import { registerTitleView } from '/imports/utils/dom-utils';
 import Notifications from '../notifications/container';
@@ -50,6 +49,7 @@ import PushLayoutEngine from '../layout/push-layout/pushLayoutEngine';
 import AudioService from '/imports/ui/components/audio/service';
 import NotesContainer from '/imports/ui/components/notes/container';
 import DEFAULT_VALUES from '../layout/defaultValues';
+import AppService from '/imports/ui/components/app/service';
 
 const MOBILE_MEDIA = 'only screen and (max-width: 40em)';
 const APP_CONFIG = Meteor.settings.public.app;
@@ -446,22 +446,8 @@ class App extends Component {
 
   renderDarkMode() {
     const { darkTheme } = this.props;
-    if (darkTheme && !DarkReader.isEnabled()) {
-        DarkReader.enable(
-          { brightness: 100, contrast: 90 },
-          { invert: [Styled.DtfInvert], ignoreInlineStyle: [Styled.DtfCss], ignoreImageAnalysis: [Styled.DtfImages] },
-        )
-        logger.info({
-          logCode: 'dark_mode',
-        }, 'Dark mode is on.');
-    }
 
-    if (!darkTheme && DarkReader.isEnabled()){
-      DarkReader.disable();
-      logger.info({
-        logCode: 'dark_mode',
-      }, 'Dark mode is off.');
-    }
+    AppService.setDarkTheme(darkTheme);
   }
 
   mountPushLayoutEngine() {

bigbluebutton-html5/imports/ui/components/app/service.js

@@ -3,6 +3,9 @@ import Meetings from '/imports/api/meetings';
 import Settings from '/imports/ui/services/settings';
 import Auth from '/imports/ui/services/auth/index';
 import deviceInfo from '/imports/utils/deviceInfo';
+import Styled from './styles';
+import DarkReader from 'darkreader';
+import logger from '/imports/startup/client/logger';
 
 const getFontSize = () => {
   const applicationSettings = Settings.application;
@@ -26,9 +29,34 @@ const validIOSVersion = () => {
   return true;
 };
 
+const setDarkTheme = (value) => {
+  if (value && !DarkReader.isEnabled()) {
+      DarkReader.enable(
+        { brightness: 100, contrast: 90 },
+        { invert: [Styled.DtfInvert], ignoreInlineStyle: [Styled.DtfCss], ignoreImageAnalysis: [Styled.DtfImages] },
+      )
+      logger.info({
+        logCode: 'dark_mode',
+      }, 'Dark mode is on.');
+  }
+
+  if (!value && DarkReader.isEnabled()){
+    DarkReader.disable();
+    logger.info({
+      logCode: 'dark_mode',
+    }, 'Dark mode is off.');
+  }
+}
+
+const isDarkThemeEnabled = () => {
+  return DarkReader.isEnabled()
+}
+
 export {
   getFontSize,
   meetingIsBreakout,
   getBreakoutRooms,
   validIOSVersion,
+  setDarkTheme,
+  isDarkThemeEnabled,
 };

bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx

@@ -9,6 +9,7 @@ import BBBMenu from '/imports/ui/components/common/menu/component';
 import TooltipContainer from '/imports/ui/components/common/tooltip/container';
 import { ACTIONS } from '/imports/ui/components/layout/enums';
 import browserInfo from '/imports/utils/browserInfo';
+import AppService from '/imports/ui/components/app/service';
 
 const intlMessages = defineMessages({
   downloading: {
@@ -206,6 +207,13 @@ const PresentationMenu = (props) => {
               },
             });
 
+            // This is a workaround to a conflict of the
+            // dark mode's styles and the html-to-image lib.
+            // Issue:
+            //  https://github.com/bubkoo/html-to-image/issues/370
+            const darkThemeState = AppService.isDarkThemeEnabled();
+            AppService.setDarkTheme(false);
+
             try {
               const { copySvg, getShapes, currentPageId } = tldrawAPI;
               const svgString = await copySvg(getShapes(currentPageId).map((shape) => shape.id));
@@ -239,6 +247,9 @@ const PresentationMenu = (props) => {
                 logCode: 'presentation_snapshot_error',
                 extraInfo: e,
               });
+            } finally {
+              // Workaround
+              AppService.setDarkTheme(darkThemeState);
             }
           },
         },