mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
Lazy load embed contents.
Use server config for image proxy.
This commit is contained in:
parent
95a7ee405d
commit
ca975aae7b
7 changed files with 28 additions and 32 deletions
|
@ -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",
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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")
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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,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);
|
||||
|
|
|
@ -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:
|
||||
version "4.3.3-alpha.15"
|
||||
resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.15.tgz#e511ad500a20f658b15b7bad0fdb9e2a5465d1b1"
|
||||
integrity sha512-24hIQEO+FIRIAQXITBH2qVvWH6LA1MeJW2/3lj6cqBgJz7lnb3ZNIXZBu5sHbUEJpIDtJiHcOEeaeh3sE2RwxA==
|
||||
revolt.js@4.3.3-alpha.16:
|
||||
version "4.3.3-alpha.16"
|
||||
resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.16.tgz#ed595d34cdefc1d8756694787abda01e28d373e8"
|
||||
integrity sha512-UejqRKYoO98Uj2eki6dZMbEbX8msYz/JgY3EYxhbe1qMnBvLD8JxjcemHTLBf2Iytom8fFQ1EV0ee4Z89Jkcjw==
|
||||
dependencies:
|
||||
"@insertish/mutable" "1.1.0"
|
||||
axios "^0.19.2"
|
||||
|
|
Loading…
Reference in a new issue