();
27 | eventTarget.addEventListener("state", (s) => {
28 | setState((s as DeckcordEvent).data);
29 | lastState = state;
30 | });
31 |
32 | useEffect(() => {
33 | serverAPI.callPluginMethod("get_state", {}).then((s) => setState(s.result));
34 | }, []);
35 |
36 | return state;
37 | }
38 |
39 | export const isLoaded = () =>
40 | new Promise((resolve, reject) => {
41 | if (lastState?.loaded) return resolve(true);
42 | eventTarget.addEventListener("state", (s) => {
43 | if ((s as DeckcordEvent).data?.loaded) return resolve(true);
44 | });
45 | });
46 |
47 | export const isLoggedIn = () =>
48 | new Promise((resolve, reject) => {
49 | if (lastState?.logged_in) return resolve(true);
50 | eventTarget.addEventListener("state", (s) => {
51 | if ((s as DeckcordEvent).data?.logged_in) return resolve(true);
52 | });
53 | });
54 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | definePlugin,
3 | PanelSection,
4 | PanelSectionRow,
5 | ServerAPI,
6 | staticClasses,
7 | Router,
8 | sleep,
9 | Focusable,
10 | } from "decky-frontend-lib";
11 | import { VFC } from "react";
12 | import { FaDiscord } from "react-icons/fa";
13 |
14 | import { patchMenu } from "./patches/menuPatch";
15 | import { DiscordTab } from "./components/DiscordTab";
16 | import {
17 | useDeckcordState,
18 | eventTarget,
19 | DeckcordEvent,
20 | isLoaded,
21 | isLoggedIn,
22 | WebRTCEvent,
23 | } from "./hooks/useDeckcordState";
24 |
25 | import { MuteButton } from "./components/buttons/MuteButton";
26 | import { DeafenButton } from "./components/buttons/DeafenButton";
27 | import { DisconnectButton } from "./components/buttons/DisconnectButton";
28 | import { GoLiveButton } from "./components/buttons/GoLiveButton";
29 | import { PushToTalkButton } from "./components/buttons/PushToTalk";
30 | import {
31 | VoiceChatChannel,
32 | VoiceChatMembers,
33 | } from "./components/VoiceChatViews";
34 | import { UploadScreenshot } from "./components/UploadScreenshot";
35 |
36 | declare global {
37 | interface Window {
38 | DISCORD_TAB: any;
39 | DECKCORD: {
40 | dispatchNotification: any;
41 | MIC_PEER_CONNECTION: any;
42 | };
43 | }
44 | }
45 |
46 | const Content: VFC<{ serverAPI: ServerAPI }> = ({ serverAPI }) => {
47 | const state = useDeckcordState(serverAPI);
48 | if (!state?.loaded) {
49 | return (
50 |
51 |
Initializing...
52 |
53 | );
54 | } else if (!state?.logged_in) {
55 | return (
56 |
64 |
Not logged in!
65 |
66 | Open{" "}
67 |
68 |
69 | Discord
70 | {" "}
71 | from the Steam Menu and login.
72 |
73 | If you did not logout, just wait for a few seconds.
74 |
75 | );
76 | } else {
77 | return (
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
97 |
98 |
99 |
100 |
101 |
102 | 
113 | {state?.me?.username}
114 |
115 |
122 |
123 |
124 |
125 |
126 | );
127 | }
128 | };
129 |
130 | export default definePlugin((serverApi: ServerAPI) => {
131 | window.DECKCORD = {
132 | dispatchNotification: (payload: { title: string; body: string }) => {
133 | console.log("Dispatching Deckcord notification: ", payload);
134 | serverApi.toaster.toast(payload);
135 | },
136 | MIC_PEER_CONNECTION: undefined
137 | };
138 |
139 | const setState = (data: any) => {
140 | if (data.webrtc) eventTarget.dispatchEvent(new WebRTCEvent(data.webrtc));
141 | else eventTarget.dispatchEvent(new DeckcordEvent(data));
142 | };
143 | serverApi.callPluginMethod("get_state", {}).then((s) => setState(s));
144 | let ws;
145 | function connect() {
146 | ws = new WebSocket("ws://127.0.0.1:65123/frontend_socket");
147 | ws.onmessage = (ev) => {
148 | const data = JSON.parse(ev.data);
149 | setState(data);
150 | };
151 | ws.onclose = () => setTimeout(() => connect(), 500);
152 | }
153 | connect();
154 |
155 | let peerConnection: RTCPeerConnection;
156 | eventTarget.addEventListener("webrtc", async (ev: any) => {
157 | const data = ev.data;
158 | console.log(data);
159 | if (data.offer) {
160 | console.log("Deckcord: Starting RTC connection");
161 | if (peerConnection) peerConnection.close();
162 | peerConnection = new RTCPeerConnection();
163 | window.DECKCORD.MIC_PEER_CONNECTION = peerConnection;
164 | const localStream = await navigator.mediaDevices.getUserMedia({video: false, audio: true,});
165 | localStream.getTracks().forEach((track) => {
166 | peerConnection.addTrack(track, localStream);
167 | });
168 | await peerConnection.setRemoteDescription(new RTCSessionDescription(data.offer));
169 | const answer = await peerConnection.createAnswer();
170 | await peerConnection.setLocalDescription(answer);
171 | console.log("Deckcord: Sending RTC Answer");
172 | await serverApi.callPluginMethod("mic_webrtc_answer", { answer: answer });
173 | } else if (data.ice) {
174 | try {
175 | while (peerConnection.remoteDescription == null) await sleep(10);
176 | await peerConnection.addIceCandidate(data.ice);
177 | } catch (e) {
178 | console.error("Deckcord: Error adding received ice candidate", e);
179 | }
180 | }
181 | });
182 |
183 | let settingsChangeUnregister: any;
184 | const appLifetimeUnregister =
185 | SteamClient.GameSessions.RegisterForAppLifetimeNotifications(async () => {
186 | await sleep(500);
187 | setPlaying();
188 | }).unregister;
189 | const unpatchMenu = patchMenu();
190 |
191 | const setPlaying = () => {
192 | const app = Router.MainRunningApp;
193 | serverApi.callPluginMethod("set_rpc", {
194 | game: app !== undefined ? app?.display_name : null,
195 | });
196 | };
197 |
198 | let lastDisplayIsExternal = false;
199 | (async () => {
200 | await isLoaded();
201 |
202 | settingsChangeUnregister = SteamClient.Settings.RegisterForSettingsChanges(
203 | async (settings: any) => {
204 | if (settings.bDisplayIsExternal != lastDisplayIsExternal) {
205 | lastDisplayIsExternal = settings.bDisplayIsExternal;
206 | const bounds: any = (
207 | await serverApi.callPluginMethod("get_screen_bounds", {})
208 | ).result;
209 | window.DISCORD_TAB.HEIGHT = bounds.height;
210 | window.DISCORD_TAB.WIDTH = bounds.width;
211 | window.DISCORD_TAB.m_browserView.SetBounds(
212 | 0,
213 | 0,
214 | bounds.width,
215 | bounds.height
216 | );
217 | }
218 | }
219 | );
220 | await isLoggedIn();
221 | setPlaying();
222 | })();
223 |
224 | serverApi.routerHook.addRoute("/discord", () => {
225 | return ;
226 | });
227 |
228 | return {
229 | title: Deckcord
,
230 | content: ,
231 | icon: ,
232 | onDismount() {
233 | unpatchMenu();
234 | try {
235 | appLifetimeUnregister();
236 | settingsChangeUnregister();
237 | } catch (error) {}
238 | },
239 | alwaysRender: true,
240 | };
241 | });
242 |
--------------------------------------------------------------------------------
/src/patches/menuPatch.tsx:
--------------------------------------------------------------------------------
1 | //Credit: https://github.com/jessebofill/DeckWebBrowser
2 |
3 | import { afterPatch, Dropdown, findInReactTree, FooterLegendProps, getReactRoot } from "decky-frontend-lib"
4 | import { FC } from "react"
5 | import { FaDiscord } from "react-icons/fa"
6 |
7 | interface MainMenuItemProps extends FooterLegendProps {
8 | route: string
9 | label: string
10 | onFocus: () => void
11 | onActivate?: () => void
12 | }
13 |
14 | const reactTree = getReactRoot(document.getElementById('root') as any);
15 | let unpatchMethod: any;
16 |
17 | const _patchMenu = () => {
18 | const menuNode = findInReactTree(reactTree, (node) => node?.memoizedProps?.navID == 'MainNavMenuContainer')
19 | if (!menuNode || !menuNode.return?.type) {
20 | console.log('Menu Patch', 'Failed to find main menu root node.')
21 | return () => { }
22 | }
23 | const orig = menuNode.return.type
24 | let patchedInnerMenu: any
25 | const menuWrapper = (props: any) => {
26 | const ret = orig(props)
27 | if (!ret?.props?.children?.props?.children?.[0]?.type) {
28 | console.log('Menu Patch', 'The main menu element could not be found at the expected location. Valve may have changed it.')
29 | return ret
30 | }
31 | if (patchedInnerMenu) {
32 | ret.props.children.props.children[0].type = patchedInnerMenu
33 | } else {
34 | afterPatch(ret.props.children.props.children[0], 'type', (_: any, ret: any) => {
35 | if (!ret?.props?.children || !Array.isArray(ret?.props?.children)) {
36 | console.log('Menu Patch', 'Could not find menu items to patch.');
37 | return ret
38 | }
39 | const itemIndexes = getMenuItemIndexes(ret.props.children)
40 | const menuItemElement = findInReactTree(ret.props.children, (x) =>
41 | x?.type?.toString()?.includes('exactRouteMatch:'),
42 | );
43 |
44 | const newItem =
45 |
51 |
52 | const browserPosition = Number.parseInt(localStorage.getItem("DECKCORD_MENU_POSITION") || "3" as string);
53 |
54 | if (browserPosition === 9) ret.props.children.splice(itemIndexes[itemIndexes.length - 1] + 1, 0, newItem)
55 | else ret.props.children.splice(itemIndexes[browserPosition - 1], 0, newItem)
56 |
57 | return ret
58 | })
59 | patchedInnerMenu = ret.props.children.props.children[0].type
60 | }
61 | return ret;
62 | }
63 | menuNode.return.type = menuWrapper
64 | if (menuNode.return.alternate) {
65 | menuNode.return.alternate.type = menuNode.return.type;
66 | }
67 |
68 | return () => {
69 | menuNode.return.type = orig
70 | menuNode.return.alternate.type = menuNode.return.type;
71 | }
72 | }
73 |
74 | function getMenuItemIndexes(items: any[]) {
75 | return items.flatMap((item, index) => (item && item.$$typeof && item.type !== 'div') ? index : [])
76 | }
77 |
78 | interface MenuItemWrapperProps extends MainMenuItemProps {
79 | MenuItemComponent: FC
80 | }
81 |
82 | const MenuItemWrapper: FC = ({ MenuItemComponent, ...props }) => {
83 |
84 | const choosePosition: any = new (Dropdown as any)({
85 | rgOptions: [
86 | { label: '1', data: 1 },
87 | { label: '2', data: 2 },
88 | { label: '3', data: 3 },
89 | { label: '4', data: 4 },
90 | { label: '5', data: 5 },
91 | { label: '6', data: 6 },
92 | { label: '7', data: 7 },
93 | { label: '8', data: 8 },
94 | { label: '9', data: 9 },
95 | ],
96 | selectedOption: 1,
97 | onChange: (data: any) => {
98 | unpatchMethod();
99 | localStorage.setItem("DECKCORD_MENU_POSITION", data.data);
100 | patchMenu();
101 | }
102 | });
103 | return (
104 | choosePosition.ShowMenu() }
108 | >
109 |
110 |
111 | )
112 | }
113 |
114 | export const patchMenu = () => {
115 | unpatchMethod = _patchMenu()
116 | return unpatchMethod;
117 | }
--------------------------------------------------------------------------------
/src/types.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.svg" {
2 | const content: string;
3 | export default content;
4 | }
5 |
6 | declare module "*.png" {
7 | const content: string;
8 | export default content;
9 | }
10 |
11 | declare module "*.jpg" {
12 | const content: string;
13 | export default content;
14 | }
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "dist",
4 | "module": "ESNext",
5 | "target": "ES2020",
6 | "jsx": "react",
7 | "jsxFactory": "window.SP_REACT.createElement",
8 | "declaration": false,
9 | "moduleResolution": "node",
10 | "noUnusedLocals": true,
11 | "noUnusedParameters": true,
12 | "esModuleInterop": true,
13 | "noImplicitReturns": true,
14 | "noImplicitThis": true,
15 | "noImplicitAny": true,
16 | "strict": true,
17 | "suppressImplicitAnyIndexErrors": true,
18 | "allowSyntheticDefaultImports": true,
19 | "skipLibCheck": true
20 | },
21 | "include": ["src"],
22 | "exclude": ["node_modules"]
23 | }
24 |
--------------------------------------------------------------------------------
![]({"https://steamloopback.host/")
43 |