Organized settings, made Embed compontent more logical
This commit is contained in:
parent
618602dc4f
commit
d36a6f6022
3 changed files with 38 additions and 42 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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)}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue