Pipe Client Implementation

# Using npm
npm i @onehop/client @onehop/react

# Using yarn
yarn add @onehop/client @onehop/react

import React from "react";
import ReactDOM from "react-dom";
import { hop } from "@onehop/client";

import App from "./App";

hop.init({ projectId: "project_xxx" // TODO: replace with your project ID });

ReactDOM.render(<App />, document.getElementById("root"));

import {useRef} from 'react';
import {usePipeRoom} from '@onehop/react';

const joinToken = 'prjt_xxx'; // TODO: replace this with a real Pipe join token

export function Livestream() {
	const videoRef = useRef(null);

	const room = usePipeRoom({
		joinToken,
		ref: videoRef,
	});

	return (
		<>
			<button disabled={!room.canPlay} onClick={() => videoRef.current?.play()}>
				play
			</button>

			<video ref={videoRef} />
		</>
	);
}

import {hop, pipe} from '@onehop/client';

// TypeScript only — declaring that `node` is a variable
// that exists, and is a DOM Video element
declare const node: HTMLVideoElement;

const client = hop.init({
	projectId: 'project_xxx',
});

const joinToken = 'join_token_xxx';

client.subscribeToPipeRoom(joinToken);

client.getRoomStateMap().addListener(map => {
	const room = map.get(joinToken);

	if (
		!room ||
		room.subscription !== 'available' ||
		!room.connection.llhls?.edge_endpoint
	) {
		console.log('Not ready:', {room});
		return;
	}

	pipe.mount(node, room.connection.llhls.edge_endpoint);
});