Files
element-call/src/settings/settings.ts
Milton Moura 1897210a60 Hand raise feature (#2542)
* Initial support for Hand Raise feature

Signed-off-by: Milton Moura <miltonmoura@gmail.com>

* Refactored to use reaction and redaction events

Signed-off-by: Milton Moura <miltonmoura@gmail.com>

* Replacing button svg with raised hand emoji

Signed-off-by: Milton Moura <miltonmoura@gmail.com>

* SpotlightTile should not duplicate the raised hand

Signed-off-by: Milton Moura <miltonmoura@gmail.com>

* Update src/room/useRaisedHands.tsx

Element Call recently changed to AGPL-3.0

* Use relations to load existing reactions when joining the call

Signed-off-by: Milton Moura <miltonmoura@gmail.com>

* Links to sha commit of matrix-js-sdk that exposes the call membership event id and refactors some async code

Signed-off-by: Milton Moura <miltonmoura@gmail.com>

* Removing RaiseHand.svg

* Check for reaction & redaction capabilities in widget mode

Signed-off-by: Milton Moura <miltonmoura@gmail.com>

* Fix failing GridTile test

Signed-off-by: Milton Moura <miltonmoura@gmail.com>

* Center align hand raise.

* Add support for displaying the duration of a raised hand.

* Add a sound for when a hand is raised.

* Refactor raised hand indicator and add tests.

* lint

* Refactor into own files.

* Redact the right thing.

* Tidy up useEffect

* Lint tests

* Remove extra layer

* Add better sound. (woosh)

* Add a small mode for spotlight

* Fix timestamp calculation on relaod.

* Fix call border resizing video

* lint

* Fix and update tests

* Allow timer to be configurable.

* Add preferences tab for choosing to enable timer.

* Drop border from raised hand icon

* Handle cases when a new member event happens.

* Prevent infinite loop

* Major refactor to support various state problems.

* Tidy up and finish test rewrites

* Add some explanation comments.

* Even more comments.

* Use proper duration formatter

* Remove rerender

* Fix redactions not working because they pick up events in transit.

* More tidying

* Use deferred value

* linting

* Add tests for cases where we got a reaction from someone else.

* Be even less brittle.

* Transpose border to GridTile.

* lint

---------

Signed-off-by: Milton Moura <miltonmoura@gmail.com>
Co-authored-by: fkwp <fkwp@users.noreply.github.com>
Co-authored-by: Half-Shot <will@half-shot.uk>
Co-authored-by: Will Hunt <github@half-shot.uk>
2024-11-04 09:54:13 +00:00

94 lines
2.4 KiB
TypeScript

/*
Copyright 2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only
Please see LICENSE in the repository root for full details.
*/
import { logger } from "matrix-js-sdk/src/logger";
import { BehaviorSubject, Observable } from "rxjs";
import { useObservableEagerState } from "observable-hooks";
import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
export class Setting<T> {
public constructor(key: string, defaultValue: T) {
this.key = `matrix-setting-${key}`;
const storedValue = localStorage.getItem(this.key);
let initialValue = defaultValue;
if (storedValue !== null) {
try {
initialValue = JSON.parse(storedValue);
} catch (e) {
logger.warn(
`Invalid value stored for setting ${key}: ${storedValue}.`,
e,
);
}
}
this._value = new BehaviorSubject(initialValue);
this.value = this._value;
}
private readonly key: string;
private readonly _value: BehaviorSubject<T>;
public readonly value: Observable<T>;
public readonly setValue = (value: T): void => {
this._value.next(value);
localStorage.setItem(this.key, JSON.stringify(value));
};
}
/**
* React hook that returns a settings's current value and a setter.
*/
export function useSetting<T>(setting: Setting<T>): [T, (value: T) => void] {
return [useObservableEagerState(setting.value), setting.setValue];
}
// null = undecided
export const optInAnalytics = new Setting<boolean | null>(
"opt-in-analytics",
null,
);
// TODO: This setting can be disabled. Work out an approach to disableable
// settings thats works for Observables in addition to React.
export const useOptInAnalytics = (): [
boolean | null,
((value: boolean | null) => void) | null,
] => {
const setting = useSetting(optInAnalytics);
return PosthogAnalytics.instance.isEnabled() ? setting : [false, null];
};
export const developerSettingsTab = new Setting(
"developer-settings-tab",
false,
);
export const duplicateTiles = new Setting("duplicate-tiles", 0);
export const audioInput = new Setting<string | undefined>(
"audio-input",
undefined,
);
export const audioOutput = new Setting<string | undefined>(
"audio-output",
undefined,
);
export const videoInput = new Setting<string | undefined>(
"video-input",
undefined,
);
export const showHandRaisedTimer = new Setting<boolean>(
"hand-raised-show-timer",
false,
);
export const alwaysShowSelf = new Setting<boolean>("always-show-self", true);