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

feat: port ImageViewer

Browse Source
This commit is contained in:
Paul Makles
2022-06-30 19:34:04 +01:00
parent 1664aaee15
commit 0d3f29515e
11 changed files with 58 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/common/messaging/attachments/ImageFile.tsx
View File

@@ -2,11 +2,10 @@ import { API } from "revolt.js";
import styles from "./Attachment.module.scss";
import classNames from "classnames";
import { useContext, useState } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useState } from "preact/hooks";
import { useClient } from "../../../../controllers/client/ClientController";
import { modalController } from "../../../../controllers/modals/ModalController";
enum ImageLoadingState {
Loading,
@@ -21,7 +20,6 @@ type Props = JSX.HTMLAttributes<HTMLImageElement> & {
export default function ImageFile({ attachment, ...props }: Props) {
const [loading, setLoading] = useState(ImageLoadingState.Loading);
const client = useClient();
const { openScreen } = useIntermediate();
const url = client.generateFileURL(attachment)!;
return (
@@ -33,7 +31,9 @@ export default function ImageFile({ attachment, ...props }: Props) {
className={classNames(styles.image, {
[styles.loading]: loading !== ImageLoadingState.Loaded,
})}
onClick={() => openScreen({ id: "image_viewer", attachment })}
onClick={() =>
modalController.push({ type: "image_viewer", attachment })
}
onMouseDown={(ev) => ev.button === 1 && window.open(url, "_blank")}
onLoad={() => setLoading(ImageLoadingState.Loaded)}
onError={() => setLoading(ImageLoadingState.Error)}

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

@@ -7,6 +7,7 @@ import { useContext } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../controllers/client/ClientController";
import { modalController } from "../../../../controllers/modals/ModalController";
import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
import Markdown from "../../../markdown/Markdown";
import Attachment from "../attachments/Attachment";
@@ -24,7 +25,7 @@ const MAX_PREVIEW_SIZE = 150;
export default function Embed({ embed }: Props) {
const client = useClient();
const { openScreen, openLink } = useIntermediate();
const { openLink } = useIntermediate();
const maxWidth = Math.min(
useContext(MessageAreaWidthContext) - CONTAINER_PADDING,
MAX_EMBED_WIDTH,
@@ -191,7 +192,9 @@ export default function Embed({ embed }: Props) {
type="text/html"
frameBorder="0"
loading="lazy"
onClick={() => openScreen({ id: "image_viewer", embed })}
onClick={() =>
modalController.push({ type: "image_viewer", embed })
}
onMouseDown={(ev) => ev.button === 1 && openLink(embed.url)}
/>
);

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

@@ -3,9 +3,8 @@ import { API } from "revolt.js";
import styles from "./Embed.module.scss";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { useClient } from "../../../../controllers/client/ClientController";
import { modalController } from "../../../../controllers/modals/ModalController";
interface Props {
embed: API.Embed;
@@ -15,7 +14,6 @@ interface Props {
export default function EmbedMedia({ embed, width, height }: Props) {
if (embed.type !== "Website") return null;
const { openScreen } = useIntermediate();
const client = useClient();
switch (embed.special?.type) {
@@ -118,8 +116,8 @@ export default function EmbedMedia({ embed, width, height }: Props) {
loading="lazy"
style={{ width, height }}
onClick={() =>
openScreen({
id: "image_viewer",
modalController.push({
type: "image_viewer",
embed: embed.image!,
})
}