8 | 9 |
70 | CONNECTED
71 | 
72 |
73 | );
74 | }
75 |
76 | return (
77 |
78 | {!isAllowed && (
79 |
131 | );
132 | }
133 |
134 | export default App;
135 |
--------------------------------------------------------------------------------
/web/src/App.tsx:
--------------------------------------------------------------------------------
1 | import NoSleep from "nosleep.js";
2 | import { useEffect } from "react";
3 | import { useLongPress } from "use-long-press";
4 |
5 | import { Action, usePeer } from "./usePeer";
6 |
7 | const noSleep = new NoSleep();
8 |
9 | if (!noSleep.isEnabled) {
10 | console.log("No sleep enabled");
11 | noSleep.enable();
12 | }
13 |
14 | function App() {
15 | const { connectWrapper, sendMessage, status } = usePeer();
16 |
17 | useEffect(() => {
18 | async function init() {
19 | const params = new URLSearchParams(window.location.search);
20 | const address = params.get("id");
21 | if (!address) {
22 | alert("Wrong address, please scan again.");
23 | } else {
24 | connectWrapper(address);
25 | }
26 | }
27 | init();
28 | // eslint-disable-next-line react-hooks/exhaustive-deps
29 | }, []);
30 |
31 | const nextButtonBind = useLongPress(() => {
32 | sendMessage({ action: Action.F5 });
33 | });
34 |
35 | const prevButtonBind = useLongPress(() => {
36 | sendMessage({ action: Action.ESC });
37 | });
38 |
39 | if (status !== "CONNECTED") {
40 | return (
41 |
88 |
89 |
90 | )}
91 |
124 | open("https://github.com/thewh1teagle/mobslide")}
126 | className="absolute bottom-2 opacity-50 text-sm cursor-pointer"
127 | >
128 | mobslide {pkgInfo?.semver}
129 |
130 |
42 | {status}
43 |
44 |
45 | );
46 | }
47 |
48 | return (
49 |
50 |
135 | );
136 | }
137 |
138 | export default App;
139 |
--------------------------------------------------------------------------------
/desktop/src/lib/usePeer.ts:
--------------------------------------------------------------------------------
1 | import Peer, { DataConnection } from "peerjs";
2 | import { useEffect, useRef, useState } from "react";
3 | import { PEERJS_OPTIONS } from "./config";
4 |
5 | export enum Action {
6 | VOL_UP,
7 | VOL_DN,
8 | PG_UP,
9 | PG_DN,
10 | F5,
11 | ESC,
12 | }
13 | export interface Message {
14 | action: Action;
15 | }
16 |
17 | type Status = "CONNECTING" | "CONNECTED" | "DISCONNECTED" | "INIT" | "READY";
18 |
19 | export function usePeer(id?: string, listener?: boolean) {
20 | const peerRef = useRef
51 |
134 |
52 |
71 |
90 |
91 |
92 |
112 |
132 |
133 |