BiggerStreamPreview

index.tsx

Download

Source

src/plugins/biggerStreamPreview/index.tsx

1/*

2 * FiveCord — a Discord client mod

4 * SPDX-License-Identifier: GPL-3.0-or-later

5 */

7import { NavContextMenuPatchCallback } from "@api/ContextMenu";

8import { ScreenshareIcon } from "@components/Icons";

9import { Devs } from "@utils/constants";

10import { openImageModal } from "@utils/discord";

11import definePlugin from "@utils/types";

12import { ApplicationStream, Channel, Stream, User } from "@vencord/discord-types";

13import { ApplicationStreamingStore, ApplicationStreamPreviewStore, Menu } from "@webpack/common";

15export interface UserContextProps {

16 channel: Channel,

17 channelSelected: boolean,

18 className: string,

19 config: { context: string; };

20 context: string,

21 onHeightUpdate: Function,

22 position: string,

23 target: HTMLElement,

24 theme: string,

25 user: User;

26}

28export interface StreamContextProps {

29 appContext: string,

30 className: string,

31 config: { context: string; };

32 context: string,

33 exitFullscreen: Function,

34 onHeightUpdate: Function,

35 position: string,

36 target: HTMLElement,

37 stream: Stream,

38 theme: string,

39}

41export const handleViewPreview = async ({ guildId, channelId, ownerId }: ApplicationStream | Stream) => {

42 const previewUrl = await ApplicationStreamPreviewStore.getPreviewURL(guildId, channelId, ownerId);

43 if (!previewUrl) return;

45 openImageModal({

46 url: previewUrl,

47 height: 720,

48 width: 1280

49 });

50};

export const addViewStreamContext: NavContextMenuPatchCallback = (children, { userId }: { userId: string | bigint; }) => {

53 const stream = ApplicationStreamingStore.getAnyStreamForUser(userId);

54 if (!stream) return;

56 const streamPreviewItem = (

57 <Menu.MenuItem

58 label="View Stream Preview"

59 id="view-stream-preview"

60 icon={ScreenshareIcon}

61 action={() => stream && handleViewPreview(stream)}

62 disabled={!stream}

63 />

64 );

66 children.push(<Menu.MenuSeparator />, streamPreviewItem);

67};

69export const streamContextPatch: NavContextMenuPatchCallback = (children, { stream }: StreamContextProps) => {

70 return addViewStreamContext(children, { userId: stream.ownerId });

71};

73export const userContextPatch: NavContextMenuPatchCallback = (children, { user }: UserContextProps) => {

74 if (user) return addViewStreamContext(children, { userId: user.id });

75};

77export default definePlugin({

78 name: "BiggerStreamPreview",

79 description: "This plugin allows you to enlarge stream previews",

80 tags: ["Media", "Appearance"],

81 authors: [Devs.phil],

82 contextMenus: {

83 "user-context": userContextPatch,

84 "stream-context": streamContextPatch

85 }

86});

/*
 * FiveCord — a Discord client mod
 * Copyright (c) 2025 FiveCord
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

import { NavContextMenuPatchCallback } from "@api/ContextMenu";
import { ScreenshareIcon } from "@components/Icons";
import { Devs } from "@utils/constants";
import { openImageModal } from "@utils/discord";
import definePlugin from "@utils/types";
import { ApplicationStream, Channel, Stream, User } from "@vencord/discord-types";
import { ApplicationStreamingStore, ApplicationStreamPreviewStore, Menu } from "@webpack/common";

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({
        url: previewUrl,
        height: 720,
        width: 1280
    });
};

export const addViewStreamContext: NavContextMenuPatchCallback = (children, { userId }: { userId: string | bigint; }) => {
    const stream = ApplicationStreamingStore.getAnyStreamForUser(userId);
    if (!stream) return;

    const streamPreviewItem = (
        <Menu.MenuItem
            label="View Stream Preview"
            id="view-stream-preview"
            icon={ScreenshareIcon}
            action={() => stream && handleViewPreview(stream)}
            disabled={!stream}
        />
    );

    children.push(<Menu.MenuSeparator />, streamPreviewItem);
};

export const streamContextPatch: NavContextMenuPatchCallback = (children, { stream }: StreamContextProps) => {
    return addViewStreamContext(children, { userId: stream.ownerId });
};

export const userContextPatch: NavContextMenuPatchCallback = (children, { user }: UserContextProps) => {
    if (user) return addViewStreamContext(children, { userId: user.id });
};

export default definePlugin({
    name: "BiggerStreamPreview",
    description: "This plugin allows you to enlarge stream previews",
    tags: ["Media", "Appearance"],
    authors: [Devs.phil],
    contextMenus: {
        "user-context": userContextPatch,
        "stream-context": streamContextPatch
    }
});

Source

FiveCord for Windows