Organized settings, made Embed compontent more logical

This commit is contained in:
ayes-web 2022-11-17 16:47:35 +02:00
parent 618602dc4f
commit d36a6f6022
3 changed files with 38 additions and 42 deletions

View file

@ -440,28 +440,27 @@ function Embed({ link }) {
}); });
if (urlPreviewInfo != null) { if (urlPreviewInfo != null) {
const imageURL = urlPreviewInfo['og:image'] || urlPreviewInfo['og:image:secure_url'];
const image = (imageURL != null) ? (
<Image
link={mx.mxcUrlToHttp(imageURL)}
height={urlPreviewInfo['og:image:height'] != null ? parseInt(urlPreviewInfo['og:image:height'], 10) : null}
width={urlPreviewInfo['og:image:width'] != null ? parseInt(urlPreviewInfo['og:image:width'], 10) : null}
name={urlPreviewInfo['og:image:alt'] || urlPreviewInfo['og:site_name'] || ''}
type={urlPreviewInfo['og:image:type'] != null ? urlPreviewInfo['og:image:type'] : null}
/>
) : null;
// Image only embed // Image only embed
if (urlPreviewInfo['og:image'] != null && urlPreviewInfo['og:image:width'] != null && urlPreviewInfo['og:image:height'] != null && urlPreviewInfo['og:title'] == null && urlPreviewInfo['og:description'] == null) { if (image != null && urlPreviewInfo['og:title'] == null && urlPreviewInfo['og:description'] == null) {
return ( return (
<div className="file-container"> <div className="file-container">
<Image {image}
link={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])}
height={parseInt(urlPreviewInfo['og:image:height'], 10)}
width={parseInt(urlPreviewInfo['og:image:width'], 10)}
name={urlPreviewInfo['og:image:alt'] || urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'] || ''}
type={urlPreviewInfo['og:image:type']}
/>
</div> </div>
); );
} }
let embedTitle; const embedTitle = urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'];
if (urlPreviewInfo['og:site_name'] != null && urlPreviewInfo['og:title'] != null) {
embedTitle = `${urlPreviewInfo['og:site_name']} - ${urlPreviewInfo['og:title']}`;
} else {
embedTitle = urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'];
}
return ( return (
<div className="file-container"> <div className="file-container">
@ -480,15 +479,9 @@ function Embed({ link }) {
)} )}
</div> </div>
{urlPreviewInfo['og:image'] != null && urlPreviewInfo['og:image:width'] != null && urlPreviewInfo['og:image:height'] != null && ( <div className="embed-media">
<Image {image}
link={mx.mxcUrlToHttp(urlPreviewInfo['og:image'])} </div>
height={parseInt(urlPreviewInfo['og:image:height'], 10)}
width={parseInt(urlPreviewInfo['og:image:width'], 10)}
name={urlPreviewInfo['og:image:alt'] || urlPreviewInfo['og:title'] || urlPreviewInfo['og:site_name'] || ''}
type={urlPreviewInfo['og:image:type']}
/>
)}
</div> </div>
</div> </div>
); );

View file

@ -70,23 +70,22 @@ function RoomSelector({
isUnread={isUnread} isUnread={isUnread}
content={( content={(
<> <>
{!settings.showRoomListAvatar && ( {settings.showRoomListAvatar ? (
<Avatar <Avatar
text={name} text={name}
bgColor={colorMXID(roomId)} bgColor={colorMXID(roomId)}
imageSrc={imageSrc} imageSrc={avatarSrc}
iconColor="var(--ic-surface-low)" size="extra-small"
iconSrc={iconSrc} />
size="extra-small" ) : (
/> <Avatar
)} text={name}
{settings.showRoomListAvatar && ( bgColor={colorMXID(roomId)}
<Avatar imageSrc={imageSrc}
text={name} iconColor="var(--ic-surface-low)"
bgColor={colorMXID(roomId)} iconSrc={iconSrc}
imageSrc={avatarSrc} size="extra-small"
size="extra-small" />
/>
)} )}
<Text variant="b1" weight={isUnread ? 'medium' : 'normal'}> <Text variant="b1" weight={isUnread ? 'medium' : 'normal'}>
{twemojify(name)} {twemojify(name)}

View file

@ -91,6 +91,9 @@ function AppearanceSection() {
)} )}
content={<Text variant="b3">Will show room avatars in the room list.</Text>} content={<Text variant="b3">Will show room avatars in the room list.</Text>}
/> />
</div>
<div className="settings-appearance__card">
<MenuHeader>URL Previews</MenuHeader>
<SettingTile <SettingTile
title="Show URL previews" title="Show URL previews"
options={( options={(
@ -107,9 +110,10 @@ function AppearanceSection() {
<Toggle <Toggle
isActive={settings.showYoutubeEmbedPlayer} isActive={settings.showYoutubeEmbedPlayer}
onToggle={() => { toggleShowYoutubeEmbedPlayer(); updateState({}); }} onToggle={() => { toggleShowYoutubeEmbedPlayer(); updateState({}); }}
disabled={!settings.showUrlPreview}
/> />
)} )}
content={<Text variant="b3">Will show a youtube embed player for youtube links. (You need to enable url previews for this)</Text>} content={<Text variant="b3">Will show a youtube embed player for youtube links.</Text>}
/> />
</div> </div>
<div className="settings-appearance__card"> <div className="settings-appearance__card">