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

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")}>