Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-22 10:22:30 +01:00
Code Issues Releases Activity

open gifs in image viewer

Browse Source
This commit is contained in:
Puyodead1 2023-12-22 23:27:36 -05:00
parent f810397861
commit ecda1d7c12
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
4 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/messaging/EmbedMedia.tsx
View File

@ -101,6 +101,13 @@ function EmbedMedia({ embed, width, height, thumbnail }: Props) {
controls={embed.type !== EmbedType.GIFV} controls={embed.type !== EmbedType.GIFV}
autoPlay={embed.type === EmbedType.GIFV} autoPlay={embed.type === EmbedType.GIFV}
muted={embed.type === EmbedType.GIFV ? true : undefined} muted={embed.type === EmbedType.GIFV ? true : undefined}
onClick={() => {
modalController.push({
type: "image_viewer",
attachment: embed.video!,
isVideo: true,
});
}}
/> />
); );
} else if (embed.image && !thumbnail) { } else if (embed.image && !thumbnail) {
@ -113,13 +120,9 @@ function EmbedMedia({ embed, width, height, thumbnail }: Props) {
loading="lazy" loading="lazy"
style={{ width: "100%", height: "100%" }} style={{ width: "100%", height: "100%" }}
onClick={() => { onClick={() => {
if (!embed.image) {
console.error("embed has no image... wtf");
return;
}
modalController.push({ modalController.push({
type: "image_viewer", type: "image_viewer",
attachment: embed.image, attachment: embed.image!,
}); });
}} }}
/> />
@ -134,13 +137,9 @@ function EmbedMedia({ embed, width, height, thumbnail }: Props) {
loading="lazy" loading="lazy"
style={{ width, height }} style={{ width, height }}
onClick={() => { onClick={() => {
if (!embed.thumbnail) {
console.error("embed has no thumbnail... wtf");
return;
}
modalController.push({ modalController.push({
type: "image_viewer", type: "image_viewer",
attachment: embed.thumbnail, attachment: embed.thumbnail!,
}); });
}} }}
/> />

7
src/components/messaging/MessageEmbed.tsx
View File

@ -74,7 +74,12 @@ function MessageEmbed({ embed }: Props) {
} }
const { width, height } = calculateSize(mw, mh); const { width, height } = calculateSize(mw, mh);
if (embed.type === EmbedType.GIFV || EMBEDDABLE_PROVIDERS.includes(embed.provider?.name ?? "")) { if (
embed.type === EmbedType.GIFV ||
embed.type === EmbedType.Image ||
embed.type === EmbedType.Video ||
EMBEDDABLE_PROVIDERS.includes(embed.provider?.name ?? "")
) {
return <EmbedMedia embed={embed} width={height} height={height} />; return <EmbedMedia embed={embed} width={height} height={height} />;
} }

20
src/components/modals/ImageViewerModal.tsx
View File

@ -1,4 +1,4 @@
import { APIAttachment, APIEmbedImage, APIEmbedThumbnail } from "@spacebarchat/spacebar-api-types/v9"; import { APIAttachment, APIEmbedImage, APIEmbedThumbnail, APIEmbedVideo } from "@spacebarchat/spacebar-api-types/v9";
import styled from "styled-components"; import styled from "styled-components";
import { Modal } from "./ModalComponents"; import { Modal } from "./ModalComponents";
@ -15,9 +15,10 @@ const Container = styled.div`
`; `;
interface Props { interface Props {
attachment: APIAttachment | APIEmbedImage | APIEmbedThumbnail; attachment: APIAttachment | APIEmbedImage | APIEmbedThumbnail | APIEmbedVideo;
width?: number; width?: number;
height?: number; height?: number;
isVideo?: boolean; // should only be for gifs
} }
export function ImageViewerModal(props: Props) { export function ImageViewerModal(props: Props) {
@ -27,7 +28,20 @@ export function ImageViewerModal(props: Props) {
return ( return (
<Modal {...props} transparent maxWidth="100vw" maxHeight="100vh" withoutCloseButton withEmptyActionBar> <Modal {...props} transparent maxWidth="100vw" maxHeight="100vh" withoutCloseButton withEmptyActionBar>
<Container> <Container>
<img src={props.attachment.url} width={width} height={height} loading="eager" /> {props.isVideo ? (
<video
loop
autoPlay
onContextMenu={(e) => {
e.preventDefault();
e.stopPropagation();
}}
>
<source src={props.attachment.url} />
</video>
) : (
<img src={props.attachment.url} width={width} height={height} loading="eager" />
)}
</Container> </Container>
</Modal> </Modal>
); );

5
src/controllers/modals/types.ts
View File

@ -1,6 +1,6 @@
// adapted from https://github.com/revoltchat/revite/blob/master/src/controllers/modals/types.ts // adapted from https://github.com/revoltchat/revite/blob/master/src/controllers/modals/types.ts
import { APIAttachment, APIEmbedImage, APIEmbedThumbnail } from "@spacebarchat/spacebar-api-types/v9"; import { APIAttachment, APIEmbedImage, APIEmbedThumbnail, APIEmbedVideo } from "@spacebarchat/spacebar-api-types/v9";
import Channel from "../../stores/objects/Channel"; import Channel from "../../stores/objects/Channel";
import Guild from "../../stores/objects/Guild"; import Guild from "../../stores/objects/Guild";
import GuildMember from "../../stores/objects/GuildMember"; import GuildMember from "../../stores/objects/GuildMember";
@ -45,9 +45,10 @@ export type Modal = {
} }
| { | {
type: "image_viewer"; type: "image_viewer";
attachment: APIAttachment | APIEmbedImage | APIEmbedThumbnail; attachment: APIAttachment | APIEmbedImage | APIEmbedThumbnail | APIEmbedVideo;
width?: number; width?: number;
height?: number; height?: number;
isVideo?: boolean;
} }
); );