Lazy load embed contents.

Use server config for image proxy.

package.json

@@ -94,7 +94,7 @@
     "react-router-dom": "^5.2.0",
     "react-scroll": "^1.8.2",
     "redux": "^4.1.0",
-    "revolt.js": "4.3.3-alpha.15",
+    "revolt.js": "4.3.3-alpha.16",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "shade-blend-color": "^1.0.0",

src/components/common/AutoComplete.tsx

@@ -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,

src/components/common/messaging/embed/Embed.tsx

@@ -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
+    const client = useClient();
-    // ! add proxy function to client
-    function proxyImage(url: string) {
-        return `https://jan.revolt.chat/proxy?url=${encodeURIComponent(url)}`;
-    }
 
     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")

src/components/common/messaging/embed/EmbedMedia.tsx

@@ -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({

src/context/intermediate/popovers/ImageViewer.tsx

@@ -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}
                         />

src/context/revoltjs/RevoltClient.tsx

@@ -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);

yarn.lock

@@ -3563,10 +3563,10 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-revolt.js@4.3.3-alpha.15:
+revolt.js@4.3.3-alpha.16:
-  version "4.3.3-alpha.15"
+  version "4.3.3-alpha.16"
-  resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.15.tgz#e511ad500a20f658b15b7bad0fdb9e2a5465d1b1"
+  resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.16.tgz#ed595d34cdefc1d8756694787abda01e28d373e8"
-  integrity sha512-24hIQEO+FIRIAQXITBH2qVvWH6LA1MeJW2/3lj6cqBgJz7lnb3ZNIXZBu5sHbUEJpIDtJiHcOEeaeh3sE2RwxA==
+  integrity sha512-UejqRKYoO98Uj2eki6dZMbEbX8msYz/JgY3EYxhbe1qMnBvLD8JxjcemHTLBf2Iytom8fFQ1EV0ee4Z89Jkcjw==
   dependencies:
     "@insertish/mutable" "1.1.0"
     axios "^0.19.2"