Make EC widget theme reactive - Update widget url when the theme changes (#12295)

* update widget url when the theme changes

Signed-off-by: Timo K <toger5@hotmail.de>

* quick "make it EC specific" workaround proposal.

Signed-off-by: Timo K <toger5@hotmail.de>

* use `matches`

Signed-off-by: Timo K <toger5@hotmail.de>

* test coverage

Signed-off-by: Timo K <toger5@hotmail.de>

* more test coverage

Signed-off-by: Timo K <toger5@hotmail.de>

* fix jest

Signed-off-by: Timo K <toger5@hotmail.de>

* add tests for theme changes

Signed-off-by: Timo K <toger5@hotmail.de>

* update snapshots

Signed-off-by: Timo K <toger5@hotmail.de>

* test for theme update with non ec widget

Signed-off-by: Timo K <toger5@hotmail.de>

* add dark custom theme widget url

Signed-off-by: Timo K <toger5@hotmail.de>

* trigger conditions for theme cleanup

Signed-off-by: Timo K <toger5@hotmail.de>

* update tests using testId

Signed-off-by: Timo K <toger5@hotmail.de>

* use typed event emitter for theme watcher

Signed-off-by: Timo K <toger5@hotmail.de>

* simplify condition

Signed-off-by: Timo K <toger5@hotmail.de>

---------

Signed-off-by: Timo K <toger5@hotmail.de>
This commit is contained in:
Timo 2024-03-13 15:52:41 +01:00 committed by GitHub
parent 80c4c3c28c
commit c42562ef39
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 172 additions and 23 deletions

View file

@ -16,6 +16,7 @@ limitations under the License.
*/
import { logger } from "matrix-js-sdk/src/logger";
import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
import SettingsStore from "../SettingsStore";
import dis from "../../dispatcher/dispatcher";
@ -25,7 +26,15 @@ import { findHighContrastTheme, setTheme } from "../../theme";
import { ActionPayload } from "../../dispatcher/payloads";
import { SettingLevel } from "../SettingLevel";
export default class ThemeWatcher {
export enum ThemeWatcherEvents {
ThemeChange = "theme_change",
}
type EventHandlerMap = {
[ThemeWatcherEvents.ThemeChange]: (theme: string) => void;
};
export default class ThemeWatcher extends TypedEventEmitter<ThemeWatcherEvents, EventHandlerMap> {
private themeWatchRef: string | null;
private systemThemeWatchRef: string | null;
private dispatcherRef: string | null;
@ -37,6 +46,7 @@ export default class ThemeWatcher {
private currentTheme: string;
public constructor() {
super();
this.themeWatchRef = null;
this.systemThemeWatchRef = null;
this.dispatcherRef = null;
@ -86,6 +96,7 @@ export default class ThemeWatcher {
this.currentTheme = forceTheme === undefined ? this.getEffectiveTheme() : forceTheme;
if (oldTheme !== this.currentTheme) {
setTheme(this.currentTheme);
this.emit(ThemeWatcherEvents.ThemeChange, this.currentTheme);
}
}