feat: rewrite app system
Some checks reported warnings
arcad/arcast/pipeline/head This commit is unstable
Some checks reported warnings
arcad/arcast/pipeline/head This commit is unstable
This commit is contained in:
74
apps/main/src/pages/ScreenSharingPage/ScreenSharingPage.tsx
Normal file
74
apps/main/src/pages/ScreenSharingPage/ScreenSharingPage.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import { FunctionComponent, useCallback, useEffect, useState } from "react";
|
||||
import styles from "./ScreenSharingPage.module.css";
|
||||
import { Panel } from "../../components/Panel/Panel";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { ScreenViewer } from "./ScreenViewer";
|
||||
import { Button } from "../../components/Button/Button";
|
||||
import {
|
||||
ScreenSharingServer,
|
||||
ScreenSharingServerState,
|
||||
StateChangedEvent,
|
||||
StateChangedEventType,
|
||||
} from "../../api/webrtc";
|
||||
|
||||
export const ScreenSharingPage: FunctionComponent = () => {
|
||||
const { sessionId } = useParams<{ sessionId: string }>();
|
||||
const [server, setServer] = useState<ScreenSharingServer | null>(null);
|
||||
const [state, setState] = useState<string | null>(null);
|
||||
|
||||
const onServerStateChanged = useCallback((evt: Event) => {
|
||||
setState((evt as StateChangedEvent).state);
|
||||
}, []);
|
||||
|
||||
console.log("Server state", state);
|
||||
|
||||
const onShareScreenClick = useCallback(() => {
|
||||
const server = new ScreenSharingServer();
|
||||
server.addEventListener(StateChangedEventType, onServerStateChanged);
|
||||
server.shareScreen({
|
||||
video: true,
|
||||
audio: false,
|
||||
});
|
||||
setServer(server);
|
||||
return () => {
|
||||
server.removeEventListener(StateChangedEventType, onServerStateChanged);
|
||||
server.close();
|
||||
setServer(null);
|
||||
};
|
||||
}, [onServerStateChanged]);
|
||||
|
||||
const onStopSharingClick = useCallback(() => {
|
||||
if (!server) return;
|
||||
server.close();
|
||||
setServer(null);
|
||||
setState(null);
|
||||
}, [server]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!server) return;
|
||||
return () => {
|
||||
if (!server) return;
|
||||
console.log("Closing screen sharing server");
|
||||
server.close();
|
||||
setServer(null);
|
||||
};
|
||||
}, [server]);
|
||||
|
||||
if (sessionId !== undefined) {
|
||||
return <ScreenViewer sessionId={sessionId} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<Panel>
|
||||
<Link to="/">Back to homepage</Link>
|
||||
<h1 className={styles.panelTitle}>Screen sharing</h1>
|
||||
{state === ScreenSharingServerState.Sharing ? (
|
||||
<Button onClick={onStopSharingClick}>Stop sharing</Button>
|
||||
) : (
|
||||
<Button onClick={onShareScreenClick}>Share screen</Button>
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
);
|
||||
};
|
Reference in New Issue
Block a user