HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

Lazy load embed contents.

Browse Source 
Use server config for image proxy.
This commit is contained in:
Paul
2021-07-24 11:22:08 +01:00
parent 95a7ee405d
commit ca975aae7b
7 changed files with 28 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/AutoComplete.tsx
View File

@@ -2,9 +2,9 @@ import { SYSTEM_USER_ID, User } from "revolt.js";
import { Channels } from "revolt.js/dist/api/objects";
import styled, { css } from "styled-components";
import { StateUpdater, useContext, useState } from "preact/hooks";
import { StateUpdater, useState } from "preact/hooks";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import { useClient } from "../../context/revoltjs/RevoltClient";
import { emojiDictionary } from "../../assets/emojis";
import ChannelIcon from "./ChannelIcon";
@@ -52,7 +52,7 @@ export function useAutoComplete(
): AutoCompleteProps {
const [state, setState] = useState<AutoCompleteState>({ type: "none" });
const [focused, setFocused] = useState(false);
const client = useContext(AppContext);
const client = useClient();
function findSearchString(
el: HTMLTextAreaElement,

12
src/components/common/messaging/embed/Embed.tsx
View File

@@ -5,6 +5,7 @@ import classNames from "classnames";
import { useContext } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
import EmbedMedia from "./EmbedMedia";
@@ -19,11 +20,7 @@ const CONTAINER_PADDING = 24;
const MAX_PREVIEW_SIZE = 150;
export default function Embed({ embed }: Props) {
// ! FIXME: temp code
// ! add proxy function to client
function proxyImage(url: string) {
return `https://jan.revolt.chat/proxy?url=${encodeURIComponent(url)}`;
}
const client = useClient();
const { openScreen } = useIntermediate();
const maxWidth = Math.min(
@@ -95,7 +92,7 @@ export default function Embed({ embed }: Props) {
{embed.icon_url && (
<img
className={styles.favicon}
src={proxyImage(embed.icon_url)}
src={client.proxyFile(embed.icon_url)}
draggable={false}
onError={(e) =>
(e.currentTarget.style.display =
@@ -152,9 +149,10 @@ export default function Embed({ embed }: Props) {
<img
className={classNames(styles.embed, styles.image)}
style={calculateSize(embed.width, embed.height)}
src={proxyImage(embed.url)}
src={client.proxyFile(embed.url)}
type="text/html"
frameBorder="0"
loading="lazy"
onClick={() => openScreen({ id: "image_viewer", embed })}
onMouseDown={(ev) =>
ev.button === 1 && window.open(embed.url, "_blank")

16
src/components/common/messaging/embed/EmbedMedia.tsx
View File

@@ -3,6 +3,7 @@ import { Embed } from "revolt.js/dist/api/objects";
import styles from "./Embed.module.scss";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../context/revoltjs/RevoltClient";
interface Props {
embed: Embed;
@@ -11,19 +12,15 @@ interface Props {
}
export default function EmbedMedia({ embed, width, height }: Props) {
// ! FIXME: temp code
// ! add proxy function to client
function proxyImage(url: string) {
return `https://jan.revolt.chat/proxy?url=${encodeURIComponent(url)}`;
}
if (embed.type !== "Website") return null;
const { openScreen } = useIntermediate();
const client = useClient();
switch (embed.special?.type) {
case "YouTube":
return (
<iframe
loading="lazy"
src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`}
allowFullScreen
style={{ height }}
@@ -38,6 +35,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
frameBorder="0"
allowFullScreen
scrolling="no"
loading="lazy"
style={{ height }}
/>
);
@@ -45,6 +43,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
return (
<iframe
src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
loading="lazy"
frameBorder="0"
allowFullScreen
allowTransparency
@@ -59,6 +58,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
)}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
frameBorder="0"
scrolling="no"
loading="lazy"
style={{ height }}
/>
);
@@ -69,6 +69,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
embed.special.id
}/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
seamless
loading="lazy"
style={{ height }}
/>
);
@@ -79,7 +80,8 @@ export default function EmbedMedia({ embed, width, height }: Props) {
return (
<img
className={styles.image}
src={proxyImage(url)}
src={client.proxyFile(url)}
loading="lazy"
style={{ width, height }}
onClick={() =>
openScreen({

12
src/context/intermediate/popovers/ImageViewer.tsx
View File

@@ -11,7 +11,7 @@ import AttachmentActions from "../../../components/common/messaging/attachments/
import EmbedMediaActions from "../../../components/common/messaging/embed/EmbedMediaActions";
import Modal from "../../../components/ui/Modal";
import { AppContext } from "../../revoltjs/RevoltClient";
import { useClient } from "../../revoltjs/RevoltClient";
interface Props {
onClose: () => void;
@@ -22,12 +22,6 @@ interface Props {
type ImageMetadata = AttachmentMetadata & { type: "Image" };
export function ImageViewer({ attachment, embed, onClose }: Props) {
// ! FIXME: temp code
// ! add proxy function to client
function proxyImage(url: string) {
return `https://jan.revolt.chat/proxy?url=${encodeURIComponent(url)}`;
}
if (attachment && attachment.metadata.type !== "Image") {
console.warn(
`Attempted to use a non valid attatchment type in the image viewer: ${attachment.metadata.type}`,
@@ -35,7 +29,7 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
return null;
}
const client = useContext(AppContext);
const client = useClient();
return (
<Modal visible={true} onClose={onClose} noBackground>
@@ -55,7 +49,7 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
{embed && (
<>
<img
src={proxyImage(embed.url)}
src={client.proxyFile(embed.url)}
width={embed.width}
height={embed.height}
/>

4
src/context/revoltjs/RevoltClient.tsx
View File

@@ -4,7 +4,7 @@ import { Client } from "revolt.js";
import { Route } from "revolt.js/dist/api/routes";
import { createContext } from "preact";
import { useEffect, useMemo, useState } from "preact/hooks";
import { useContext, useEffect, useMemo, useState } from "preact/hooks";
import { SingletonMessageRenderer } from "../../lib/renderer/Singleton";
@@ -239,3 +239,5 @@ export default connectState<{ children: Children }>(Context, (state) => {
sync: state.sync,
};
});
export const useClient = () => useContext(AppContext);