diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx index 91b01dcb..96df3dc7 100644 --- a/src/components/Icons.tsx +++ b/src/components/Icons.tsx @@ -147,6 +147,26 @@ export function OwnerCrownIcon(props: IconProps) { ); } +/** + * Discord's screenshare icon, as seen in the connection panel + */ +export function ScreenshareIcon(props: IconProps) { + return ( + + + + ); +} + export function ImageVisible(props: IconProps) { return ( . +*/ + +import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu"; +import { ScreenshareIcon } from "@components/Icons"; +import { Devs } from "@utils/constants"; +import { openImageModal } from "@utils/discord"; +import definePlugin from "@utils/types"; +import { Menu } from "@webpack/common"; +import { Channel, User } from "discord-types/general"; + +import { ApplicationStreamingStore, ApplicationStreamPreviewStore } from "./webpack/stores"; +import { ApplicationStream, Stream } from "./webpack/types/stores"; + +export interface UserContextProps { + channel: Channel, + channelSelected: boolean, + className: string, + config: { context: string; }; + context: string, + onHeightUpdate: Function, + position: string, + target: HTMLElement, + theme: string, + user: User; +} + +export interface StreamContextProps { + appContext: string, + className: string, + config: { context: string; }; + context: string, + exitFullscreen: Function, + onHeightUpdate: Function, + position: string, + target: HTMLElement, + stream: Stream, + theme: string, +} + +export const handleViewPreview = async ({ guildId, channelId, ownerId }: ApplicationStream | Stream) => { + const previewUrl = await ApplicationStreamPreviewStore.getPreviewURL(guildId, channelId, ownerId); + if (!previewUrl) return; + + openImageModal(previewUrl); +}; + +export const addViewStreamContext: NavContextMenuPatchCallback = (children, { userId }: { userId: string | bigint; }) => () => { + const streamPreviewItemIdentifier = "view-stream-preview"; + + const stream = ApplicationStreamingStore.getAnyStreamForUser(userId); + + const streamPreviewItem = ( + stream && handleViewPreview(stream)} + disabled={!stream} + /> + ); + + children.push(, streamPreviewItem); +}; + +export const streamContextPatch: NavContextMenuPatchCallback = (children, { stream }: StreamContextProps) => { + return addViewStreamContext(children, { userId: stream.ownerId }); +}; + +export const userContextPatch: NavContextMenuPatchCallback = (children, { user }: UserContextProps) => { + return addViewStreamContext(children, { userId: user.id }); +}; + +export default definePlugin({ + name: "BiggerStreamPreview", + description: "This plugin allows you to enlarge stream previews", + authors: [Devs.phil], + start: () => { + addContextMenuPatch("user-context", userContextPatch); + addContextMenuPatch("stream-context", streamContextPatch); + }, + stop: () => { + removeContextMenuPatch("user-context", userContextPatch); + removeContextMenuPatch("stream-context", streamContextPatch); + } +}); diff --git a/src/plugins/biggerStreamPreview/webpack/stores.ts b/src/plugins/biggerStreamPreview/webpack/stores.ts new file mode 100644 index 00000000..e8a4ee2c --- /dev/null +++ b/src/plugins/biggerStreamPreview/webpack/stores.ts @@ -0,0 +1,25 @@ +/* + * Vencord, a modification for Discord's desktop app + * Copyright (c) 2023 Vendicated and contributors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . +*/ + + +import { findStoreLazy } from "@webpack"; + +import * as t from "./types/stores"; + +export const ApplicationStreamPreviewStore: t.ApplicationStreamPreviewStore = findStoreLazy("ApplicationStreamPreviewStore"); +export const ApplicationStreamingStore: t.ApplicationStreamingStore = findStoreLazy("ApplicationStreamingStore"); diff --git a/src/plugins/biggerStreamPreview/webpack/types/stores.ts b/src/plugins/biggerStreamPreview/webpack/types/stores.ts new file mode 100644 index 00000000..0265986f --- /dev/null +++ b/src/plugins/biggerStreamPreview/webpack/types/stores.ts @@ -0,0 +1,77 @@ +/* + * Vencord, a modification for Discord's desktop app + * Copyright (c) 2023 Vendicated and contributors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . +*/ + +import { FluxStore } from "@webpack/types"; + +export interface ApplicationStreamPreviewStore extends FluxStore { + getIsPreviewLoading: (guildId: string | bigint | null, channelId: string | bigint, ownerId: string | bigint) => boolean; + getPreviewURL: (guildId: string | bigint | null, channelId: string | bigint, ownerId: string | bigint) => Promise; + getPreviewURLForStreamKey: (streamKey: string) => ReturnType; +} + +export interface ApplicationStream { + streamType: string; + guildId: string | null; + channelId: string; + ownerId: string; +} + +export interface Stream extends ApplicationStream { + state: string; +} + +export interface RTCStream { + region: string, + streamKey: string, + viewerIds: string[]; +} + +export interface StreamMetadata { + id: string | null, + pid: number | null, + sourceName: string | null; +} + +export interface StreamingStoreState { + activeStreams: [string, Stream][]; + rtcStreams: { [key: string]: RTCStream; }; + streamerActiveStreamMetadatas: { [key: string]: StreamMetadata | null; }; + streamsByUserAndGuild: { [key: string]: { [key: string]: ApplicationStream; }; }; +} + +/** + * example how a stream key could look like: `call(type of connection):1116549917987192913(channelId):305238513941667851(ownerId)` + */ +export interface ApplicationStreamingStore extends FluxStore { + getActiveStreamForApplicationStream: (stream: ApplicationStream) => Stream | null; + getActiveStreamForStreamKey: (streamKey: string) => Stream | null; + getActiveStreamForUser: (userId: string | bigint, guildId?: string | bigint | null) => Stream | null; + getAllActiveStreams: () => Stream[]; + getAllApplicationStreams: () => ApplicationStream[]; + getAllApplicationStreamsForChannel: (channelId: string | bigint) => ApplicationStream[]; + getAllActiveStreamsForChannel: (channelId: string | bigint) => Stream[]; + getAnyStreamForUser: (userId: string | bigint) => Stream | ApplicationStream | null; + getStreamForUser: (userId: string | bigint, guildId?: string | bigint | null) => Stream | null; + getCurrentUserActiveStream: () => Stream | null; + getLastActiveStream: () => Stream | null; + getState: () => StreamingStoreState; + getRTCStream: (streamKey: string) => RTCStream | null; + getStreamerActiveStreamMetadata: () => StreamMetadata; + getViewerIds: (stream: ApplicationStream) => string[]; + isSelfStreamHidden: (channelId: string | bigint | null) => boolean; +} diff --git a/src/plugins/viewIcons.tsx b/src/plugins/viewIcons.tsx index a2248969..616d178b 100644 --- a/src/plugins/viewIcons.tsx +++ b/src/plugins/viewIcons.tsx @@ -20,15 +20,12 @@ import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatc import { definePluginSettings } from "@api/Settings"; import { ImageIcon } from "@components/Icons"; import { Devs } from "@utils/constants"; -import { ModalRoot, ModalSize, openModal } from "@utils/modal"; -import { LazyComponent } from "@utils/react"; +import { openImageModal } from "@utils/discord"; import definePlugin, { OptionType } from "@utils/types"; -import { find, findByCode, findByPropsLazy } from "@webpack"; +import { findByPropsLazy } from "@webpack"; import { GuildMemberStore, Menu } from "@webpack/common"; import type { Channel, Guild, User } from "discord-types/general"; -const ImageModal = LazyComponent(() => findByCode(".MEDIA_MODAL_CLOSE,")); -const MaskedLink = LazyComponent(() => find(m => m.type?.toString().includes("MASKED_LINK)"))); const BannerStore = findByPropsLazy("getGuildBannerURL"); interface UserContextProps { @@ -60,26 +57,29 @@ const settings = definePluginSettings({ value: "jpg", } ] + }, + imgSize: { + type: OptionType.SELECT, + description: "The image size to use", + options: ["128", "256", "512", "1024", "2048", "4096"].map(n => ({ label: n, value: n, default: n === "1024" })) } }); function openImage(url: string) { const format = url.startsWith("/") ? "png" : settings.store.format; + const u = new URL(url, window.location.href); - u.searchParams.set("size", "512"); + u.searchParams.set("size", settings.store.imgSize); u.pathname = u.pathname.replace(/\.(png|jpe?g|webp)$/, `.${format}`); url = u.toString(); - openModal(modalProps => ( - - - - )); + u.searchParams.set("size", "4096"); + const originalUrl = u.toString(); + + openImageModal(url, { + original: originalUrl, + height: 256 + }); } const UserContext: NavContextMenuPatchCallback = (children, { user, guildId }: UserContextProps) => () => { @@ -90,7 +90,7 @@ const UserContext: NavContextMenuPatchCallback = (children, { user, guildId }: U openImage(BannerStore.getUserAvatarURL(user, true, 512))} + action={() => openImage(BannerStore.getUserAvatarURL(user, true))} icon={ImageIcon} /> {memberAvatar && ( @@ -122,7 +122,6 @@ const GuildContext: NavContextMenuPatchCallback = (children, { guild: { id, icon openImage(BannerStore.getGuildIconURL({ id, icon, - size: 512, canAnimate: true })) } diff --git a/src/utils/constants.ts b/src/utils/constants.ts index bcd8023a..7dc3601f 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -319,6 +319,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({ name: "amia", id: 142007603549962240n }, + phil: { + name: "phil", + id: 305288513941667851n + }, ImLvna: { name: "Luna <3", id: 174200708818665472n diff --git a/src/utils/discord.ts b/src/utils/discord.tsx similarity index 72% rename from src/utils/discord.ts rename to src/utils/discord.tsx index 228e2b4b..27526454 100644 --- a/src/utils/discord.ts +++ b/src/utils/discord.tsx @@ -18,9 +18,11 @@ import { MessageObject } from "@api/MessageEvents"; import { findByPropsLazy, findLazy } from "@webpack"; -import { ChannelStore, ComponentDispatch, GuildStore, PrivateChannelsStore, SelectedChannelStore } from "@webpack/common"; +import { ChannelStore, ComponentDispatch, GuildStore, MaskedLink, ModalImageClasses, PrivateChannelsStore, SelectedChannelStore } from "@webpack/common"; import { Guild, Message } from "discord-types/general"; +import { ImageModal, ModalRoot, ModalSize, openModal } from "./modal"; + const PreloadedUserSettings = findLazy(m => m.ProtoClass?.typeName.endsWith("PreloadedUserSettings")); const MessageActions = findByPropsLazy("editMessage", "sendMessage"); @@ -77,3 +79,23 @@ export function sendMessage( return MessageActions.sendMessage(channelId, messageData, waitForChannelReady, extra); } + +export function openImageModal(url: string, props?: Partial>): string { + return openModal(modalProps => ( + + } + shouldHideMediaOptions={false} + shouldAnimate + {...props} + /> + + )); +} diff --git a/src/utils/modal.tsx b/src/utils/modal.tsx index 05d235fc..4ac6f9b1 100644 --- a/src/utils/modal.tsx +++ b/src/utils/modal.tsx @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import { filters, mapMangledModuleLazy } from "@webpack"; +import { filters, findByCode, mapMangledModuleLazy } from "@webpack"; import type { ComponentType, PropsWithChildren, ReactNode, Ref } from "react"; import { LazyComponent } from "./react"; @@ -107,6 +107,25 @@ export const Modals = mapMangledModuleLazy(".closeWithCircleBackground", { }>; }; +export type ImageModal = ComponentType<{ + className?: string; + src: string; + placeholder: string; + original: string; + width?: number; + height?: number; + animated?: boolean; + responsive?: boolean; + renderLinkComponent(props: any): ReactNode; + maxWidth?: number; + maxHeight?: number; + shouldAnimate?: boolean; + onClose?(): void; + shouldHideMediaOptions?: boolean; +}>; + +export const ImageModal = LazyComponent(() => findByCode(".renderLinkComponent", ".responsive") as ImageModal); + export const ModalRoot = LazyComponent(() => Modals.ModalRoot); export const ModalHeader = LazyComponent(() => Modals.ModalHeader); export const ModalContent = LazyComponent(() => Modals.ModalContent); diff --git a/src/webpack/common/classes.ts b/src/webpack/common/classes.ts new file mode 100644 index 00000000..5c1a6763 --- /dev/null +++ b/src/webpack/common/classes.ts @@ -0,0 +1,24 @@ +/* + * Vencord, a modification for Discord's desktop app + * Copyright (c) 2023 Vendicated and contributors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . +*/ + +import { findByPropsLazy } from "@webpack"; + +import * as t from "./types/classes"; + +export const ModalImageClasses: t.ImageModalClasses = findByPropsLazy("image", "modal"); +export const ButtonWrapperClasses: t.ButtonWrapperClasses = findByPropsLazy("buttonWrapper", "buttonContent"); diff --git a/src/webpack/common/components.ts b/src/webpack/common/components.ts index f308cff2..55d3b84d 100644 --- a/src/webpack/common/components.ts +++ b/src/webpack/common/components.ts @@ -17,7 +17,7 @@ */ // eslint-disable-next-line path-alias/no-relative -import { filters, findByPropsLazy, waitFor } from "@webpack"; +import { filters, waitFor } from "@webpack"; import { waitForComponent } from "./internal"; import * as t from "./types/components"; @@ -51,11 +51,10 @@ export let Avatar: t.Avatar; /** css colour resolver stuff, no clue what exactly this does, just copied usage from Discord */ export let useToken: t.useToken; +export const MaskedLink = waitForComponent("MaskedLink", m => m?.type?.toString().includes("MASKED_LINK)")); export const Timestamp = waitForComponent("Timestamp", filters.byCode(".Messages.MESSAGE_EDITED_TIMESTAMP_A11Y_LABEL.format")); export const Flex = waitForComponent("Flex", ["Justify", "Align", "Wrap"]); -export const ButtonWrapperClasses = findByPropsLazy("buttonWrapper", "buttonContent") as Record; - waitFor("FormItem", m => { ({ useToken, Card, Button, FormSwitch: Switch, Tooltip, TextInput, TextArea, Text, Select, SearchableSelect, Slider, ButtonLooks, TabBar, Popout, Dialog, Paginator, ScrollerThin, Clickable, Avatar } = m); Forms = m; diff --git a/src/webpack/common/index.ts b/src/webpack/common/index.ts index dff7826c..2ad9c54e 100644 --- a/src/webpack/common/index.ts +++ b/src/webpack/common/index.ts @@ -16,6 +16,7 @@ * along with this program. If not, see . */ +export * from "./classes"; export * from "./components"; export * from "./menu"; export * from "./react"; @@ -24,4 +25,3 @@ export * as ComponentTypes from "./types/components.d"; export * as MenuTypes from "./types/menu.d"; export * as UtilTypes from "./types/utils.d"; export * from "./utils"; - diff --git a/src/webpack/common/types/classes.d.ts b/src/webpack/common/types/classes.d.ts new file mode 100644 index 00000000..0d2946fe --- /dev/null +++ b/src/webpack/common/types/classes.d.ts @@ -0,0 +1,40 @@ +/* + * Vencord, a modification for Discord's desktop app + * Copyright (c) 2023 Vendicated and contributors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . +*/ + +export interface ImageModalClasses { + image: string, + modal: string, + responsiveWidthMobile: string; +} + +export interface ButtonWrapperClasses { + hoverScale: string; + buttonWrapper: string; + button: string; + iconMask: string; + buttonContent: string; + icon: string; + pulseIcon: string; + pulseButton: string; + notificationDot: string; + sparkleContainer: string; + sparkleStar: string; + sparklePlus: string; + sparkle: string; + active: string; +} diff --git a/src/webpack/common/types/components.d.ts b/src/webpack/common/types/components.d.ts index 7bc313c3..d6d19fed 100644 --- a/src/webpack/common/types/components.d.ts +++ b/src/webpack/common/types/components.d.ts @@ -398,6 +398,13 @@ export type Paginator = ComponentType<{ hideMaxPage?: boolean; }>; +export type MaskedLink = ComponentType<{ + onClick(): void; + trusted: boolean; + title: string, + href: string; +}>; + export type ScrollerThin = ComponentType; MenuCheckboxItem: RC<{ id: string;