rename to no-theme

Signed-off-by: Timo K <toger5@hotmail.de>
update js-sdk
2026-08-29 21:15:19 +00:00 · 2024-03-13 14:47:35 +01:00 · 2024-03-05 18:55:10 +01:00 · 2024-03-01 13:10:03 +01:00 · 2024-03-01 13:09:59 +01:00 · 2024-03-01 12:38:46 +01:00
8 changed files with 19 additions and 9 deletions
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
    "i18next-http-backend": "^2.0.0",
    "livekit-client": "^2.0.2",
    "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#8123e9a3f1142a7619758c0a238172b007e3a06a",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#d55c6a36df539f6adacc335efe5b9be27c9cee4a",
    "matrix-widget-api": "^1.3.1",
    "normalize.css": "^8.0.1",
    "pako": "^2.0.4",
--- a/public/index.html
+++ b/public/index.html
@@ -13,7 +13,8 @@
    </script>
  </head>

-  <body class="cpd-theme-dark">
+  <!-- The default class is: .no-theme {display: none}. It will be overwritten once the app is loaded. -->
+  <body class="no-theme">
    <div id="root"></div>
  </body>
 </html>
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -72,7 +72,9 @@ export const App: FC<AppProps> = ({ history }) => {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    Initializer.init()?.then(() => {
+      if (loaded) return;
      setLoaded(true);
+      widget?.api.sendContentLoaded();
    });
  });

--- a/src/FullScreenView.tsx
+++ b/src/FullScreenView.tsx
@@ -27,6 +27,7 @@ import styles from "./FullScreenView.module.css";
 import { TranslatedError } from "./TranslatedError";
 import { Config } from "./config/Config";
 import { RageshakeButton } from "./settings/RageshakeButton";
+import { useUrlParams } from "./UrlParams";

 interface FullScreenViewProps {
  className?: string;
@@ -37,12 +38,11 @@ export const FullScreenView: FC<FullScreenViewProps> = ({
  className,
  children,
 }) => {
+  const { hideHeader } = useUrlParams();
  return (
    <div className={classNames(styles.page, className)}>
      <Header>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
+        <LeftNav>{!hideHeader && <HeaderLogo />}</LeftNav>
        <RightNav />
      </Header>
      <div className={styles.container}>
--- a/src/auth/useInteractiveRegistration.ts
+++ b/src/auth/useInteractiveRegistration.ts
@@ -50,6 +50,7 @@ export const useInteractiveRegistration = (): {

  useEffect(() => {
    if (widget) return;
+    // An empty registerRequest is used to get the privacy policy and recaptcha key.
    authClient.current!.registerRequest({}).catch((error) => {
      setPrivacyPolicyUrl(
        error.data?.params["m.login.terms"]?.policies?.privacy_policy?.en?.url,
--- a/src/index.css
+++ b/src/index.css
@@ -157,6 +157,10 @@ body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
+/* We use this to not render the page at all until we know the theme.*/
+.no-theme {
+  opacity: 0;
+}

 html,
 body,
--- a/src/useTheme.ts
+++ b/src/useTheme.ts
@@ -22,10 +22,9 @@ export const useTheme = (): void => {
  const { theme: themeName } = useUrlParams();
  const previousTheme = useRef<string | null>(document.body.classList.item(0));
  useLayoutEffect(() => {
-    // Don't update the current theme if the url does not contain a theme prop.
-    if (!themeName) return;
-    const theme = themeName.includes("light") ? "light" : "dark";
-    const themeHighContrast = themeName.includes("high-contrast") ? "-hc" : "";
+    // If the url does not contain a theme props we default to "dark".
+    const theme = themeName?.includes("light") ? "light" : "dark";
+    const themeHighContrast = themeName?.includes("high-contrast") ? "-hc" : "";
    const themeString = "cpd-theme-" + theme + themeHighContrast;
    if (themeString !== previousTheme.current) {
      document.body.classList.remove(
@@ -37,5 +36,6 @@ export const useTheme = (): void => {
      document.body.classList.add(themeString);
      previousTheme.current = themeString;
    }
+    document.body.classList.remove("no-theme");
  }, [previousTheme, themeName]);
 };
--- a/src/widget.ts
+++ b/src/widget.ts
@@ -158,6 +158,8 @@ export const widget = ((): WidgetHelpers | null => {
          useE2eForGroupCall: e2eEnabled,
          fallbackICEServerAllowed: allowIceFallback,
        },
+        // ContentLoaded event will be sent as soon as the theme is set (see useTheme.ts)
+        false,
      );

      const clientPromise = new Promise<MatrixClient>((resolve) => {
Author	SHA1	Message	Date
Timo K	5ed2f0baf4	rename to no-theme Signed-off-by: Timo K <toger5@hotmail.de>	2024-03-13 14:47:35 +01:00
Timo K	60a18be16e	update js-sdk Signed-off-by: Timo K <toger5@hotmail.de>	2024-03-05 18:55:10 +01:00
Timo K	c10f379f30	add comment Signed-off-by: Timo K <toger5@hotmail.de>	2024-03-01 13:10:03 +01:00
Timo K	505c471034	make hide header also effect full screen views Signed-off-by: Timo K <toger5@hotmail.de>	2024-03-01 13:09:59 +01:00
Timo K	8a373901ed	Merge branch 'livekit' into toger5/theme-init-no-flicker	2024-03-01 12:38:46 +01:00
Timo K	204d24c300	move sendContentLoaded (useTheme -> App) Signed-off-by: Timo K <toger5@hotmail.de>	2024-02-28 21:07:50 +01:00
Timo K	cce89eb880	Emit widget content loaded action after theme is set. Signed-off-by: Timo K <toger5@hotmail.de>	2024-02-28 20:57:04 +01:00
Timo K	e3ce95fe2f	Don't render app until the widget is set. Signed-off-by: Timo K <toger5@hotmail.de>	2024-02-28 20:56:40 +01:00