nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Lint and fixes

Browse Source
This commit is contained in:
Half-Shot
2025-04-04 12:17:58 +01:00
parent b12a13eba4
commit 35503035e2
13 changed files with 220 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/@types/matrix-js-sdk.d.ts vendored
View File

@@ -18,8 +18,6 @@ import { MediaPreviewConfig } from "./media_preview.ts";
// Extend Matrix JS SDK types via Typescript declaration merging to support unspecced event fields and types
declare module "matrix-js-sdk/src/types" {
export interface FileInfo {
/**
@@ -91,7 +89,7 @@ declare module "matrix-js-sdk/src/types" {
accepted: string[];
};
"io.element.msc4278.media_preview_config": MediaPreviewConfig,
"io.element.msc4278.media_preview_config": MediaPreviewConfig;
}
export interface AudioContent {

7
src/@types/media_preview.ts
View File

@@ -1,10 +1,11 @@
export enum MediaPreviewValue {
On = "on",
Private = "private",
Off = "off"
Off = "off",
}
export const MEDIA_PREVIEW_ACCOUNT_DATA_TYPE = "io.element.msc4278.media_preview_config";
export interface MediaPreviewConfig extends Record<string, unknown> {
media_previews: MediaPreviewValue,
invite_avatars: MediaPreviewValue,
media_previews: MediaPreviewValue;
invite_avatars: MediaPreviewValue;
}

5
src/components/views/avatars/RoomAvatar.tsx
View File

@@ -97,8 +97,9 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
private static getImageUrls(props: IProps): string[] {
const myMembership = props.room?.getMyMembership();
if (myMembership === KnownMembership.Invite || !myMembership) {
if (SettingsStore.getValue("mediaPreviewConfig", props.room?.roomId).invite_avatars !== MediaPreviewValue.On) {
if (
SettingsStore.getValue("mediaPreviewConfig", props.room?.roomId).invite_avatars !== MediaPreviewValue.On
) {
// The user has opted out of showing avatars, so return no urls here.
return [];
}

10
src/components/views/rooms/LinkPreviewGroup.tsx
View File

@@ -17,6 +17,7 @@ import AccessibleButton from "../elements/AccessibleButton";
import { _t } from "../../../languageHandler";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
import { useMediaVisible } from "../../../hooks/useMediaVisible";
const INITIAL_NUM_PREVIEWS = 2;
@@ -29,6 +30,7 @@ interface IProps {
const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick }) => {
const cli = useContext(MatrixClientContext);
const [expanded, toggleExpanded] = useStateToggle();
const [mediaVisible] = useMediaVisible(mxEvent.getId()!, mxEvent.getRoomId()!);
const ts = mxEvent.getTs();
const previews = useAsyncMemo<[string, IPreviewUrlResponse][]>(
@@ -55,7 +57,13 @@ const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick }) =
return (
<div className="mx_LinkPreviewGroup">
{showPreviews.map(([link, preview], i) => (
<LinkPreviewWidget key={link} link={link} preview={preview} mxEvent={mxEvent}>
<LinkPreviewWidget
mediaVisible={mediaVisible}
key={link}
link={link}
preview={preview}
mxEvent={mxEvent}
>
{i === 0 ? (
<AccessibleButton
className="mx_LinkPreviewGroup_hide"

6
src/components/views/rooms/LinkPreviewWidget.tsx
View File

@@ -11,20 +11,19 @@ import { decode } from "html-entities";
import { type MatrixEvent, type IPreviewUrlResponse } from "matrix-js-sdk/src/matrix";
import { Linkify } from "../../../HtmlUtils";
import SettingsStore from "../../../settings/SettingsStore";
import Modal from "../../../Modal";
import * as ImageUtils from "../../../ImageUtils";
import { mediaFromMxc } from "../../../customisations/Media";
import ImageView from "../elements/ImageView";
import LinkWithTooltip from "../elements/LinkWithTooltip";
import PlatformPeg from "../../../PlatformPeg";
import { MediaPreviewValue } from "../../../@types/media_preview";
interface IProps {
link: string;
preview: IPreviewUrlResponse;
mxEvent: MatrixEvent; // the Event associated with the preview
children?: ReactNode;
mediaVisible: boolean;
}
export default class LinkPreviewWidget extends React.Component<IProps> {
@@ -70,8 +69,7 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
// FIXME: do we want to factor out all image displaying between this and MImageBody - especially for lightboxing?
let image: string | null = p["og:image"] ?? null;
// HSTODO: Private rooms?
if (!SettingsStore.getValue("mediaPreviewConfig", this.props.mxEvent.getRoomId()).media_previews !== MediaPreviewValue.On) {
if (!this.props.mediaVisible) {
image = null; // Don't render a button to show the image, just hide it outright
}
const imageMaxWidth = 100;

111
src/components/views/settings/tabs/user/MediaPreviewSetting.tsx Normal file
View File

@@ -0,0 +1,111 @@
import React, { ChangeEventHandler } from "react";
import { Field, HelpMessage, InlineField, Label, RadioInput, Root } from "@vector-im/compound-web";
import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
import { useCallback } from "react";
import { MediaPreviewConfig, MediaPreviewValue } from "../../../../../@types/media_preview";
import { _t } from "../../../../../languageHandler";
import { useSettingValue } from "../../../../../hooks/useSettings";
import SettingsStore from "../../../../../settings/SettingsStore";
import { SettingLevel } from "../../../../../settings/SettingLevel";
export function MediaPreviewAccountSettings() {
const currentMediaPreview = useSettingValue("mediaPreviewConfig");
const avatarOnChange = useCallback(
(c: boolean) => {
const newValue = {
...currentMediaPreview,
// N.B. Switch is inverted. "Hide avatars..."
invite_avatars: c ? MediaPreviewValue.Off : MediaPreviewValue.On,
} satisfies MediaPreviewConfig;
SettingsStore.setValue("mediaPreviewConfig", null, SettingLevel.ACCOUNT, newValue);
},
[currentMediaPreview],
);
const mediaPreviewOnChangeOff = useCallback<ChangeEventHandler<HTMLInputElement>>(
(event) => {
if (!event.target.checked) {
return;
}
SettingsStore.setValue("mediaPreviewConfig", null, SettingLevel.ACCOUNT, {
...currentMediaPreview,
media_previews: MediaPreviewValue.Off,
} satisfies MediaPreviewConfig);
},
[currentMediaPreview],
);
const mediaPreviewOnChangePrivate = useCallback<ChangeEventHandler<HTMLInputElement>>(
(event) => {
if (!event.target.checked) {
return;
}
SettingsStore.setValue("mediaPreviewConfig", null, SettingLevel.ACCOUNT, {
...currentMediaPreview,
media_previews: MediaPreviewValue.Private,
} satisfies MediaPreviewConfig);
},
[currentMediaPreview],
);
const mediaPreviewOnChangeOn = useCallback<ChangeEventHandler<HTMLInputElement>>(
(event) => {
if (!event.target.checked) {
return;
}
SettingsStore.setValue("mediaPreviewConfig", null, SettingLevel.ACCOUNT, {
...currentMediaPreview,
media_previews: MediaPreviewValue.On,
} satisfies MediaPreviewConfig);
},
[currentMediaPreview],
);
return (
<Root>
<LabelledToggleSwitch
label={_t("settings|media_preview|hide_avatars")}
value={currentMediaPreview.invite_avatars === MediaPreviewValue.Off}
onChange={avatarOnChange}
/>
<Field role="radiogroup" name="media_previews">
<Label>{_t("settings|media_preview|media_preview_label")}</Label>
<HelpMessage>{_t("settings|media_preview|media_preview_description")}</HelpMessage>
<InlineField
name="media_preview_off"
control={
<RadioInput
checked={currentMediaPreview.media_previews === MediaPreviewValue.Off}
onChange={mediaPreviewOnChangeOff}
/>
}
>
<Label>{_t("settings|media_preview|hide_media")}</Label>
</InlineField>
<InlineField
name="media_preview_private"
control={
<RadioInput
checked={currentMediaPreview.media_previews === MediaPreviewValue.Private}
onChange={mediaPreviewOnChangePrivate}
/>
}
>
<Label>{_t("settings|media_preview|show_in_private")}</Label>
</InlineField>
<InlineField
name="media_preview_on"
control={
<RadioInput
checked={currentMediaPreview.media_previews === MediaPreviewValue.On}
onChange={mediaPreviewOnChangeOn}
/>
}
>
<Label>{_t("settings|media_preview|show_media")}</Label>
</InlineField>
</Field>
</Root>
);
}

8
src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
View File

@@ -32,6 +32,7 @@ import SpellCheckSettings from "../../SpellCheckSettings";
import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
import * as TimezoneHandler from "../../../../../TimezoneHandler";
import { type BooleanSettingKey } from "../../../../../settings/Settings.tsx";
import { MediaPreviewAccountSettings } from "./MediaPreviewSetting.tsx";
interface IProps {
closeSettingsFn(success: boolean): void;
@@ -162,11 +163,6 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
"useOnlyCurrentProfiles",
];
private static SAFETY_SETTINGS: BooleanSettingKey[] = [
"showAvatarsOnInvites",
"showImages", // "Show media in timeline"
];
private static ROOM_DIRECTORY_SETTINGS: BooleanSettingKey[] = ["SpotlightSearch.showNsfwPublicRooms"];
private static GENERAL_SETTINGS: BooleanSettingKey[] = [
@@ -340,7 +336,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
</SettingsSubsection>
<SettingsSubsection heading={_t("common|moderation_and_safety")}>
{this.renderGroup(PreferencesUserSettingsTab.SAFETY_SETTINGS)}
<MediaPreviewAccountSettings />
</SettingsSubsection>
<SettingsSubsection heading={_t("settings|preferences|room_directory_heading")}>

23
src/hooks/useMediaVisible.ts
View File

@@ -35,6 +35,16 @@ export function useMediaVisible(eventId: string, roomId: string): [boolean, (vis
[eventId, eventVisibility],
);
const roomIsPrivate = useMemo(() => {
const joinRule = client.getRoom(roomId)?.getJoinRule();
if (PRIVATE_JOIN_RULES.includes(joinRule as JoinRule)) {
return true;
} else { // All other join rules, and unknown will default to hiding.
return false;
}
}, [client, roomId])
// Always prefer the explicit per-event user preference here.
if (eventVisibility[eventId]) {
return [true, setMediaVisible];
@@ -42,13 +52,12 @@ export function useMediaVisible(eventId: string, roomId: string): [boolean, (vis
return [false, setMediaVisible];
} else if (mediaPreviewSetting.media_previews === MediaPreviewValue.On) {
return [true, setMediaVisible];
}
const joinRule = client.getRoom(roomId)?.getJoinRule();
if (PRIVATE_JOIN_RULES.includes(joinRule as JoinRule)) {
console.log("Room is private");
return [true, setMediaVisible];
} else { // All other join rules, and unknown will default to hiding.
console.log("Room is probably public");
} else if (mediaPreviewSetting.media_previews === MediaPreviewValue.Private) {
return [roomIsPrivate, setMediaVisible];
} else {
// Invalid setting.
console.warn("Invalid media visibility setting", mediaPreviewSetting.media_previews);
return [false, setMediaVisible];
}
}

12
src/i18n/strings/en_EN.json
View File

@@ -525,6 +525,7 @@
"message_timestamp_invalid": "Invalid timestamp",
"microphone": "Microphone",
"model": "Model",
"moderation_and_safety": "Moderation and safety",
"modern": "Modern",
"mute": "Mute",
"n_members": {
@@ -2681,13 +2682,10 @@
"unable_to_load_msisdns": "Unable to load phone numbers",
"username": "Username"
},
"show_media": "Show media in timeline",
"show_media_description": "A hidden media can always be shown by tapping on it",
"inline_url_previews_default": "Enable inline URL previews by default",
"inline_url_previews_room": "Enable URL previews by default for participants in this room",
"inline_url_previews_room_account": "Enable URL previews for this room (only affects you)",
"insert_trailing_colon_mentions": "Insert a trailing colon after user mentions at the start of a message",
"invite_avatars": "Show avatars of rooms you have been invited to",
"jump_to_bottom_on_send": "Jump to the bottom of the timeline when you send a message",
"key_backup": {
"backup_in_progress": "Your keys are being backed up (the first backup could take a few minutes).",
@@ -2746,6 +2744,14 @@
"labs_mjolnir": {
"dialog_title": "<strong>Settings:</strong> Ignored Users"
},
"media_preview": {
"hide_avatars": "Hide avatars of room and inviter",
"media_preview_label": "Show media in timeline",
"media_preview_description": "A hidden media can always be shown by tapping on it",
"hide_media": "Always hide",
"show_in_private": "In private rooms",
"show_media": "Always show"
},
"notifications": {
"default_setting_description": "This setting will be applied by default to all your rooms.",
"default_setting_section": "I want to be notified for (Default Setting)",

3
src/settings/SettingsStore.ts
View File

@@ -716,7 +716,7 @@ export default class SettingsStore {
localStorage.setItem(MIGRATION_DONE_FLAG, "true");
}
/**
/**
* Migrate the setting for visible images to a setting.
*/
private static migrateMediaControlsToSetting(): void {
@@ -735,7 +735,6 @@ export default class SettingsStore {
});
} // else, we don't set anything and use the server value
localStorage.setItem(MIGRATION_DONE_FLAG, "true");
}

74
src/settings/controllers/MediaPreviewConfigController.ts
View File

@@ -7,23 +7,19 @@ Please see LICENSE files in the repository root for full details.
import { ClientEvent, MatrixEvent, type MatrixClient } from "matrix-js-sdk/src/matrix";
import { AccountDataEvents } from "matrix-js-sdk/src/types";
import { MediaPreviewConfig, MediaPreviewValue } from "../../@types/media_preview.ts";
import { MEDIA_PREVIEW_ACCOUNT_DATA_TYPE, MediaPreviewConfig, MediaPreviewValue } from "../../@types/media_preview.ts";
import { SettingLevel } from "../SettingLevel.ts";
import MatrixClientBackedController from "./MatrixClientBackedController.ts";
const CLIENT_KEY = "io.element.msc4278.media_preview_config";
/**
* TODO
*/
export default class MediaPreviewConfigController extends MatrixClientBackedController {
public static readonly default: AccountDataEvents["io.element.msc4278.media_preview_config"] = {
media_previews: MediaPreviewValue.On,
invite_avatars: MediaPreviewValue.On
}
invite_avatars: MediaPreviewValue.On,
};
private globalSetting: MediaPreviewConfig = MediaPreviewConfigController.default;
@@ -31,29 +27,52 @@ export default class MediaPreviewConfigController extends MatrixClientBackedCont
super();
}
private getRoomValue = (roomId: string): MediaPreviewConfig|null => {
return this.client?.getRoom(roomId)?.getAccountData(CLIENT_KEY)?.getContent<MediaPreviewConfig>() ?? null;
}
private getRoomValue = (roomId: string): MediaPreviewConfig | null => {
return (
this.client
?.getRoom(roomId)
?.getAccountData(MEDIA_PREVIEW_ACCOUNT_DATA_TYPE)
?.getContent<MediaPreviewConfig>() ?? null
);
};
private onAccountData = (event: MatrixEvent): void => {
if (event.getType() !== MEDIA_PREVIEW_ACCOUNT_DATA_TYPE) {
return;
}
console.log("OnAccountData", event);
// TODO: Validate.
const roomId = event.getRoomId();
if (!roomId) {
this.globalSetting = event.getContent();
this.globalSetting = {
...MediaPreviewConfigController.default,
...event.getContent(),
};
console.log("CONFIG Updating global settings", this.globalSetting);
}
};
protected async initMatrixClient(newClient: MatrixClient, oldClient?: MatrixClient): Promise<void> {
oldClient?.off(ClientEvent.AccountData, this.onAccountData);
newClient.on(ClientEvent.AccountData, this.onAccountData);
const accountData = newClient.getAccountData(CLIENT_KEY);
const accountData = newClient.getAccountData(MEDIA_PREVIEW_ACCOUNT_DATA_TYPE);
if (accountData) this.onAccountData(accountData);
}
public getValueOverride(level: SettingLevel, roomId: string | null,): MediaPreviewConfig {
public getValueOverride(level: SettingLevel, roomId: string | null): MediaPreviewConfig {
// TODO: Use SettingLevel?
if (roomId) {
return this.getRoomValue(roomId) ?? this.globalSetting;
console.log(
"MediaPreviewConfigController",
"getValueOverride",
this.getRoomValue(roomId),
this.globalSetting,
);
// Use globals for any undefined setting
return {
...this.getRoomValue(roomId),
...this.globalSetting,
};
}
return this.globalSetting;
}
@@ -62,13 +81,26 @@ export default class MediaPreviewConfigController extends MatrixClientBackedCont
return false;
}
public onChange(_level: SettingLevel, roomId: string | null, newValue: MediaPreviewConfig): void {
if (roomId) {
this.client?.setRoomAccountData(roomId, CLIENT_KEY, {
value: newValue
});
return;
public async beforeChange(
level: SettingLevel,
roomId: string | null,
newValue: MediaPreviewConfig,
): Promise<boolean> {
if (!this.client) {
// No client!
return false;
}
this.client?.setAccountDataRaw(CLIENT_KEY, newValue);
if (roomId) {
await this.client.setRoomAccountData(roomId, MEDIA_PREVIEW_ACCOUNT_DATA_TYPE, {
value: newValue,
});
return true;
}
await this.client.setAccountDataRaw(MEDIA_PREVIEW_ACCOUNT_DATA_TYPE, newValue);
return true;
}
public onChange(_level: SettingLevel, roomId: string | null, newValue: MediaPreviewConfig): void {
console.log("onChange", roomId, newValue);
}
}

4
src/settings/handlers/AccountSettingsHandler.ts
View File

@@ -15,6 +15,7 @@ import MatrixClientBackedSettingsHandler from "./MatrixClientBackedSettingsHandl
import { objectClone, objectKeyChanges } from "../../utils/objects";
import { SettingLevel } from "../SettingLevel";
import { type WatchManager } from "../WatchManager";
import { MEDIA_PREVIEW_ACCOUNT_DATA_TYPE } from "../../@types/media_preview";
const BREADCRUMBS_LEGACY_EVENT_TYPE = "im.vector.riot.breadcrumb_rooms";
const BREADCRUMBS_EVENT_TYPE = "im.vector.setting.breadcrumbs";
@@ -68,6 +69,9 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
} else if (event.getType() === RECENT_EMOJI_EVENT_TYPE) {
const val = event.getContent()["enabled"];
this.watchers.notifyUpdate("recent_emoji", null, SettingLevel.ACCOUNT, val);
} else if (event.getType() === MEDIA_PREVIEW_ACCOUNT_DATA_TYPE) {
console.log("notifyupdate");
this.watchers.notifyUpdate("mediaPreviewConfig", null, SettingLevel.ROOM_ACCOUNT, event.getContent());
}
};

4
src/settings/handlers/RoomAccountSettingsHandler.ts
View File

@@ -14,6 +14,7 @@ import MatrixClientBackedSettingsHandler from "./MatrixClientBackedSettingsHandl
import { objectClone, objectKeyChanges } from "../../utils/objects";
import { SettingLevel } from "../SettingLevel";
import { type WatchManager } from "../WatchManager";
import { MEDIA_PREVIEW_ACCOUNT_DATA_TYPE } from "../../@types/media_preview";
const ALLOWED_WIDGETS_EVENT_TYPE = "im.vector.setting.allowed_widgets";
const DEFAULT_SETTINGS_EVENT_TYPE = "im.vector.web.settings";
@@ -56,6 +57,9 @@ export default class RoomAccountSettingsHandler extends MatrixClientBackedSettin
}
} else if (event.getType() === ALLOWED_WIDGETS_EVENT_TYPE) {
this.watchers.notifyUpdate("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, event.getContent());
} else if (event.getType() === MEDIA_PREVIEW_ACCOUNT_DATA_TYPE) {
console.log("notifyupdate");
this.watchers.notifyUpdate("mediaPreviewConfig", roomId, SettingLevel.ROOM_ACCOUNT, event.getContent());
}
};