Added WS to slides

Author: devpaul

packages/slides/index.html

@@ -44,10 +44,16 @@
 			<h1>Present Controls</h1>
 		</header>
 		<div>
-			<ul>
-				<li><button class="share buttonlink">Share Screen</button></li><!-- Share Screen / Stop Sharing -->
+			<div class="connected-container">
+				<span class="indicator"></span><span class="message"></span>
+			</div>
+			<ul class="menu-options">
+				<li><button class="share buttonlink">Share Screen</button></li>
+				<li><button class="stopSharing buttonlink">Stop Sharing</button></li>
 				<li><button class="snapshot buttonlink">Take Snapshot</button></li>
 				<li><button class="openPreview buttonlink">Open Preview</button></li>
+				<li><button class="connect buttonlink">Connect</button></li>
+				<li><button class="disconnect buttonlink">Disconnect</button></li>
 			</ul>
 		</div>
 	</div>

packages/slides/resources/present.styl

@@ -7,3 +7,58 @@
 	max-width: 100%;
 	max-height: 85vh;
 }
+
+.indicator {
+	height: 0.9em;
+	width: 0.9em;
+	border-radius: 50%;
+	display: inline-block;
+	margin-right: 1em;
+	background-color: red;
+}
+
+body.connected {
+	.indicator {
+		background-color: green;
+	}
+
+	.menu-options {
+		.connect {
+			display: none;
+		}
+
+		.disconnect {
+			display: block;
+		}
+	}
+}
+
+body.sharing {
+	.menu-options {
+		.stopSharing {
+			display: block;
+		}
+
+		.snapshot {
+			display: block;
+		}
+
+		.share {
+			display: none;
+		}
+	}
+}
+
+.menu-options {
+	.stopSharing {
+		display: none;
+	}
+
+	.snapshot {
+		display: none;
+	}
+
+	.disconnect {
+		display: none;
+	}
+}

packages/slides/src/config.ts

@@ -0,0 +1,4 @@
+export function getWebSocketServer() {
+	const url = new URL((window as any)?.location);
+	return `ws://${url.host}`;
+}

packages/slides/src/connection/connection.ts

@@ -0,0 +1,49 @@
+import { getWebSocketServer } from "../config";
+import { wait } from "./websocket";
+
+let socket: WebSocket | undefined;
+
+/**
+ * Handles incoming message
+ */
+function messageHandler(event: any) {
+	console.log('message', event);
+}
+
+export function connect(url = getWebSocketServer()) {
+	if (socket && socket.url.indexOf(url) === -1) {
+		throw new Error(`Socket currently connected to ${ socket.url }. Cannot connect to ${ url } unless disconnected.`)
+	}
+	if (!socket) {
+		socket = new WebSocket(url);
+		socket.addEventListener('close', function () {
+			this.removeEventListener('message', messageHandler);
+			socket = undefined;
+		});
+		socket.addEventListener('error', (event) => {
+			console.warn('websocket error', event);
+		});
+		socket.addEventListener('message', messageHandler);
+	}
+
+	return wait(socket);
+}
+
+export function disconnect() {
+	if (socket) {
+		socket.close();
+		socket = undefined;
+	}
+}
+
+export function isConnected() {
+	return socket && socket.readyState <= 1;
+}
+
+export async function send(data: string | ArrayBuffer | Blob | ArrayBufferView) {
+	if (!socket) {
+		throw new Error('No connection');
+	}
+	const ws = await wait(socket);
+	ws.send(data);
+}

packages/slides/src/connection/websocket.ts

@@ -0,0 +1,34 @@
+export const enum WebSocketState {
+	Connecting = 0,
+	Open = 1,
+	Closing = 2,
+	Closed = 3
+}
+
+export function wait(socket?: WebSocket): Promise<WebSocket> {
+	if (!socket) {
+		return Promise.reject(new Error('not connected'));
+	}
+	switch (socket.readyState) {
+		case WebSocketState.Connecting:
+			return new Promise((resolve, reject) => {
+				const onOpen = () => {
+					resolve(socket);
+					socket.removeEventListener('open', onOpen);
+					socket.removeEventListener('error', reject);
+					socket.removeEventListener('close', reject);
+				}
+				socket.addEventListener('open', onOpen);
+				socket.addEventListener('error', reject);
+				socket.addEventListener('close', reject);
+			});
+		case WebSocketState.Open:
+			return Promise.resolve(socket);
+		default:
+			return Promise.reject(new Error('socket is closed'));
+	}
+}
+
+export function is(socket: WebSocket, state: WebSocketState) {
+	return socket.readyState === state;
+}

packages/slides/src/elements.ts

@@ -29,3 +29,11 @@ export function getPreview() {
 export function getOpenPreviewButton() {
 	return document.querySelector('.openPreview');
 }
+
+export function getConnectButton() {
+	return document.querySelector('.menu-options .connect');
+}
+
+export function getDisconnectButton() {
+	return document.querySelector('.menu-options .disconnect');
+}

packages/slides/src/menu.ts

@@ -1,5 +1,6 @@
 import { getScreenMedia, getScreenshot } from "./screen";
-import { getMenuContainer, getPreviewContainer, getPreview, getMenuCloseButton, getShareButton, getSnapshotButton, getPreviewCloseButton, getOpenPreviewButton } from "./elements";
+import { getMenuContainer, getPreviewContainer, getPreview, getMenuCloseButton, getShareButton, getSnapshotButton, getPreviewCloseButton, getOpenPreviewButton, getConnectButton, getDisconnectButton } from "./elements";
+import { connect, disconnect } from "./connection/connection";
 
 export function openMenu() {
 	getMenuContainer()?.classList.add('opened');
@@ -36,6 +37,10 @@ getMenuCloseButton()?.addEventListener('click', closeMenu);
 
 getShareButton()?.addEventListener('click', async () => {
 	const media = await getScreenMedia();
+	document.body.classList.add('sharing');
+	media.getVideoTracks()[0]?.addEventListener('ended', () => {
+		document.body.classList.remove('sharing');
+	});
 });
 
 getSnapshotButton()?.addEventListener('click', async () => {
@@ -52,3 +57,15 @@ getOpenPreviewButton()?.addEventListener('click', () => {
 	closeMenu();
 	openPreview();
 });
+
+getConnectButton()?.addEventListener('click', async () => {
+	const socket = await connect();
+	document.body.classList.add('connected');
+	socket.addEventListener('close', () => {
+		document.body.classList.remove('connected');
+	});
+});
+
+getDisconnectButton()?.addEventListener('click', () => {
+	disconnect();
+});

packages/slides/src/screen.ts

@@ -10,6 +10,14 @@ export function getScreenMedia() {
 	return media;
 }
 
+export async function stopSharing() {
+	if (media) {
+		const m = media;
+		media = undefined;
+		(await m).getTracks().forEach(track => track.stop());
+	}
+}
+
 export async function getScreenshot() {
 	const canvas = document.createElement('canvas');
 	const video = document.createElement('video');