@luxonis/depthai-viewer-common 0.0.1

package/README.md

@@ -0,0 +1,11 @@
+# DepthAI Web Viewer | Common | Luxonis
+This package is a workspace common library
+
+## Exports
+- Navigational components `ButtonLink` and `Link` supporing dynamic base path
+- `Pipeline` and `Streams` sections
+- `Resizable` for resizable panes
+- Connection and URL constants
+- Visualizer connection and [Decoding Worker](https://github.com/luxonis/depthai-visualizer-lib?tab=readme-ov-file#important-notes-and-considerations)
+- Connection, navigation and search hooks supporing dynamic base path
+- Data and Connection providers

package/package.json

@@ -0,0 +1,20 @@
+{
+	"name": "@luxonis/depthai-viewer-common",
+	"version": "0.0.1",
+	"description": "Common utilities and components for building a frontend application for DepthAI projects",
+	"license": "ISC",
+	"author": "Luxonis Holding Corporation",
+	"type": "module",
+	"main": "index.js",
+	"exports": {
+		".": "./dist/index.js"
+	},
+	"scripts": {
+		"build": "tsc --build",
+		"build:clean": "rm -fr ../../node_modules/.tmp/tsconfig-common.tsbuildinfo dist && npm run build",
+		"prepublishOnly": "npm run build:clean"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

package/src/components/ButtonLink.tsx

@@ -0,0 +1,12 @@
+import type React from 'react';
+import { Button, type ButtonProps } from '@luxonis/common-fe-components';
+import { Link, type LinkProps } from './Link.js';
+
+export type ButtonLinkProps = ButtonProps & {
+	linkProps: LinkProps;
+};
+
+export const ButtonLink: React.FC<ButtonLinkProps> = ({ linkProps, ...buttonProps }) => {
+	const button = <Button {...buttonProps} />;
+	return !buttonProps.disabled ? <Link {...linkProps}>{button}</Link> : button;
+};

package/src/components/CTASubLabel.tsx

@@ -0,0 +1,39 @@
+import { ExternalLink, Flex, SubLabel } from '@luxonis/common-fe-components';
+import { useConnection } from '../providers/ConnectionProvider.js';
+import React from 'react';
+
+const DISPLAY_LABEL_TIMEOUT = 30_000 as const;
+
+export const CTASubLabel = () => {
+	const { connected, topics } = useConnection();
+	const [shouldDisplayLabel, setShouldDisplayLabel] = React.useState(false);
+	React.useEffect(() => {
+		if (connected && topics.length === 0 && !shouldDisplayLabel) {
+			const timeout = setTimeout(() => setShouldDisplayLabel(true), DISPLAY_LABEL_TIMEOUT);
+			return () => clearTimeout(timeout);
+		}
+	}, [connected, topics, shouldDisplayLabel]);
+
+	return (
+		shouldDisplayLabel && (
+			<Flex textAlign="center">
+				<SubLabel
+					text={
+						<p>
+							You can purchase an OAK camera from the{' '}
+							<ExternalLink raw to="https://shop.luxonis.com" color="light.active">
+								<SubLabel color="link" text="Luxonis Store" />
+							</ExternalLink>
+							. After your purchase,
+							<br /> explore the{' '}
+							<ExternalLink raw to="https://rvc4.docs.luxonis.com/hardware" color="light.active">
+								<SubLabel color="link" text="Luxonis Documentation" />
+							</ExternalLink>{' '}
+							for comprehensive setup tutorials to get started.
+						</p>
+					}
+				/>
+			</Flex>
+		)
+	);
+};

package/src/components/Link.tsx

@@ -0,0 +1,10 @@
+import { Link as _Link } from 'react-router-dom';
+import { useNavigation } from '../hooks/navigation.js';
+
+export type LinkProps = { to: 'pipeline' | 'streams' };
+
+export const Link: React.FC<React.PropsWithChildren<LinkProps>> = ({ to, children }) => {
+	const { makePath } = useNavigation();
+
+	return <_Link to={makePath(to)}>{children}</_Link>;
+};

package/src/components/Pipeline.tsx

@@ -0,0 +1,35 @@
+import { Flex, Header } from '@luxonis/common-fe-components';
+import { PipelineCanvas } from '@luxonis/depthai-pipeline-lib';
+import { useConnection } from '../providers/ConnectionProvider.js';
+import React from 'react';
+
+const PIPELINE_LOADING_TIMEOUT = 60_000;
+
+export const Pipeline: React.FC = () => {
+	const { pipeline, isPipelineLoading, setIsPipelineLoading } = useConnection();
+
+	React.useEffect(() => {
+		if (isPipelineLoading && pipeline === undefined) {
+			const timeout = setTimeout(() => {
+				setIsPipelineLoading(false);
+			}, PIPELINE_LOADING_TIMEOUT);
+			return () => clearTimeout(timeout);
+		}
+	}, [isPipelineLoading, pipeline, setIsPipelineLoading]);
+
+	if (isPipelineLoading) {
+		return (
+			<Flex align="center" justify="center" full>
+				<Header text="Loading pipeline..." />
+			</Flex>
+		);
+	}
+
+	return pipeline === undefined ? (
+		<Flex align="center" justify="center" full>
+			<Header text="Pipeline is not available" />
+		</Flex>
+	) : (
+		<PipelineCanvas pipeline={pipeline} height="full" />
+	);
+};

package/src/components/Resizable.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+
+export type ResizableItem = {
+	component: React.ReactNode;
+};
+
+export type ResizableLayoutProps = {
+	id?: string | null;
+	items: ResizableItem[][];
+};
+
+export const ResizableLayout: React.FC<ResizableLayoutProps> = ({
+	items,
+	id = 'resizable-layout',
+}) => {
+	const groupStyles: React.CSSProperties = React.useMemo(
+		() => ({
+			display: 'flex',
+			gap: '5px',
+		}),
+		[],
+	);
+
+	const panels = React.useMemo(
+		() =>
+			items.map((row, rowIndex) => (
+				<React.Fragment key={`resizable-row-${rowIndex}`}>
+					<Panel order={rowIndex}>
+						<PanelGroup
+							autoSaveId={id && `${id}-${rowIndex}`}
+							direction="horizontal"
+							style={groupStyles}
+						>
+							{row.map((item, itemIndex) => (
+								<React.Fragment key={`resizable-row-${rowIndex}-item-${itemIndex}`}>
+									<Panel order={itemIndex} style={{ display: 'flex' }}>
+										{item.component}
+									</Panel>
+									{itemIndex !== row.length - 1 && <PanelResizeHandle />}
+								</React.Fragment>
+							))}
+						</PanelGroup>
+					</Panel>
+					{rowIndex !== items.length - 1 && <PanelResizeHandle />}
+				</React.Fragment>
+			)),
+		[groupStyles, id, items],
+	);
+
+	return (
+		<PanelGroup autoSaveId={id} direction="vertical" style={groupStyles}>
+			{panels}
+		</PanelGroup>
+	);
+};

package/src/components/Streams.tsx

@@ -0,0 +1,256 @@
+import {
+	Button,
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+	Flex,
+	Header,
+	Input,
+	NormalText,
+	SubHeader,
+	Tooltip,
+} from '@luxonis/common-fe-components';
+import { ImagePanel, PanelLayout, PointCloudPanel } from '@luxonis/visualizer-protobuf';
+import React from 'react';
+
+import { ResizableLayout, type Topic } from '@luxonis/depthai-viewer-common';
+import { StreamTypes } from '../constants/streams.js';
+import { useConnection } from '../providers/ConnectionProvider.js';
+import { useData } from '../providers/DataProvider.js';
+import { makeColumns } from '../utils/arrays.js';
+import { CTASubLabel } from './CTASubLabel.js';
+import type { Configuration } from '@luxonis/depthai-viewer/src/models/configuration.js';
+import { FaUsersViewfinder as VisualizerIcon } from 'react-icons/fa6';
+import { sortStreamsDefault } from '../utils/sorting.js';
+
+const EnabledStreamsView: React.FC<{
+	topics: Topic[][];
+	targetFps?: number;
+	isRawSteamEnabledManually?: boolean;
+	setIsRawSteamEnabledManually?: (value: boolean) => void;
+	triggerToast?: () => void;
+	deviceOptions?: Configuration | null;
+}> = ({
+	topics,
+	targetFps,
+	triggerToast,
+	isRawSteamEnabledManually,
+	setIsRawSteamEnabledManually,
+}) => {
+	const { toggleTopic } = useConnection();
+
+	const items = React.useMemo(() => {
+		return topics.map((row) => {
+			let filteredRow = row;
+
+			if (
+				row.some((topic) => topic.name === StreamTypes.PointCloud) &&
+				row.some((topic) => topic.name !== StreamTypes.Encoded) &&
+				!isRawSteamEnabledManually
+			) {
+				filteredRow = row.filter((topic) => topic.name !== StreamTypes.Encoded);
+			}
+			return filteredRow.map(({ name, annotations, extraAnnotations, kind }) => ({
+				component:
+					kind === 'pointCloud' || name === StreamTypes.PointCloud ? (
+						<PointCloudPanel
+							key={name}
+							toggleTopic={(topic) => {
+								if (!isRawSteamEnabledManually) {
+									toggleTopic(StreamTypes.Encoded);
+								}
+								toggleTopic(topic);
+							}}
+							topic={name}
+						/>
+					) : name !== StreamTypes.Raw &&
+						name !== StreamTypes.LeftRaw &&
+						name !== StreamTypes.RightRaw &&
+						!navigator.userAgent.includes('Chrome') ? (
+						<PanelLayout>
+							<Flex
+								full
+								justify="center"
+								align="center"
+								direction="column"
+								gap="sm"
+								textAlign="center"
+							>
+								<SubHeader text={`${name} is only supported in Google Chrome.`} />
+								<SubHeader text="Please switch to Chrome for the best experience." />
+							</Flex>
+						</PanelLayout>
+					) : (
+						<ImagePanel
+							key={name}
+							toggleTopic={(topic) => {
+								if (isRawSteamEnabledManually && topic === StreamTypes.Encoded) {
+									setIsRawSteamEnabledManually?.(false);
+								}
+								toggleTopic(topic);
+							}}
+							topic={name}
+							annotationTopics={annotations}
+							extraAnnotationTopics={extraAnnotations}
+							targetFps={targetFps}
+							triggerToast={triggerToast}
+							disableAnnotations={
+								name === StreamTypes.LeftRaw ||
+								name === StreamTypes.RightRaw ||
+								name === StreamTypes.LeftEncoded ||
+								name === StreamTypes.RightEncoded
+							}
+						/>
+					),
+			}));
+		});
+	}, [topics, targetFps, triggerToast, isRawSteamEnabledManually, setIsRawSteamEnabledManually]);
+
+	return <ResizableLayout items={items} />;
+};
+
+export const Streams: React.FC<{
+	targetFps?: number;
+	triggerToast?: () => void;
+	setIsRawSteamEnabledManually?: (value: boolean) => void;
+	isRawSteamEnabledManually?: boolean;
+	deviceOptions?: Configuration | null;
+}> = ({
+	targetFps,
+	triggerToast,
+	isRawSteamEnabledManually = true,
+	setIsRawSteamEnabledManually,
+	deviceOptions,
+}) => {
+	const { changeWsUrl, columns, connectionType, wsUrl } = useData();
+	const { connected, topics, toggleTopic } = useConnection();
+	const [shouldDisplayHelper, setShouldDisplayHelper] = React.useState(false);
+	const [connecting, setConnecting] = React.useState(false);
+
+	const enabledTopics = React.useMemo(
+		() =>
+			makeColumns(
+				topics.filter((topic) => topic.enabled),
+				columns,
+			),
+		[columns, topics],
+	);
+
+	const wsUrlRef = React.useRef<HTMLInputElement>(null);
+
+	const handleChangeUrl = React.useCallback(
+		() => wsUrlRef.current?.value && changeWsUrl(wsUrlRef.current.value),
+		[changeWsUrl],
+	);
+
+	const shouldSuggestUrlChange = React.useMemo(
+		() => window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1',
+		[],
+	);
+
+	React.useEffect(() => {
+		if (!shouldDisplayHelper && !shouldSuggestUrlChange) {
+			setTimeout(() => {
+				setShouldDisplayHelper(true);
+			}, 10_000);
+		}
+	}, [shouldDisplayHelper, shouldSuggestUrlChange]);
+
+	const sortedTopics = React.useMemo(() => sortStreamsDefault(topics), [topics]);
+
+	// TODO: Store detections in url or global provider
+	// to persist on re-renders
+	return (
+		<PanelLayout>
+			{enabledTopics.length === 0 || enabledTopics[0].length === 0 ? (
+				<Flex full justify="center" align="center" direction="column" gap="sm">
+					<Header
+						text={
+							connected ? (
+								sortedTopics.length === 0 ? (
+									'DepthAI connected, awaiting device...'
+								) : (
+									<p>
+										To view stream(s), select it with Streams Button{' '}
+										<DropdownMenu>
+											<Tooltip content="Streams">
+												<DropdownMenuTrigger>
+													<Button icon={VisualizerIcon} variant="outline" colorVariant="white" />
+												</DropdownMenuTrigger>
+											</Tooltip>
+											<DropdownMenuContent>
+												{sortedTopics.map((topic, i) => (
+													<DropdownMenuCheckboxItem key={i} onClick={() => toggleTopic(topic.name)}>
+														{topic.name}
+													</DropdownMenuCheckboxItem>
+												))}
+											</DropdownMenuContent>
+										</DropdownMenu>{' '}
+										either here or in the top right corner
+									</p>
+								)
+							) : // TODO: connection details (state, errors, retries, webrtc stage)
+							connectionType === 'ws' ? (
+								'Connecting to DepthAI via WebSocket...'
+							) : (
+								'Connecting to DepthAI via WebRTC...'
+							)
+						}
+					/>
+
+					{!connected &&
+						(shouldSuggestUrlChange ? (
+							<>
+								<SubHeader
+									text={connectionType === 'ws' ? 'Use another URL?' : 'Connect via WebSocket?'}
+								/>
+								<form
+									onSubmit={(event) => {
+										event.stopPropagation();
+										event.preventDefault();
+
+										setConnecting(true);
+
+										handleChangeUrl();
+									}}
+								>
+									<Flex>
+										<Input
+											type="text"
+											ref={wsUrlRef}
+											placeholder={wsUrl}
+											roundedRight={0}
+											onChange={() => setConnecting(false)}
+										/>
+										<Button
+											type="submit"
+											label={connecting ? 'Connecting...' : 'Connect'}
+											style={{
+												borderTopLeftRadius: 0,
+												borderBottomLeftRadius: 0,
+											}}
+										/>
+									</Flex>
+								</form>
+							</>
+						) : (
+							shouldDisplayHelper && (
+								<NormalText text="Please check that you have the correct link to DepthAI Visualizer and that your device is running. You need a new link after any app or device restart." />
+							)
+						))}
+					<CTASubLabel />
+				</Flex>
+			) : (
+				<EnabledStreamsView
+					topics={enabledTopics}
+					targetFps={targetFps}
+					triggerToast={triggerToast}
+					isRawSteamEnabledManually={isRawSteamEnabledManually}
+					setIsRawSteamEnabledManually={setIsRawSteamEnabledManually}
+					deviceOptions={deviceOptions}
+				/>
+			)}
+		</PanelLayout>
+	);
+};

package/src/constants/connection.ts

@@ -0,0 +1,45 @@
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+export type DAIResponse<T = any> = {
+	data: T;
+	error: Error | string | null;
+	message: string | null;
+	status: number;
+};
+
+export const DAI_SERVICE_NAME = {
+	topicGroups: 'topicGroups',
+	pipelineSchema: 'pipelineSchema',
+	keyPressed: 'keyPressed',
+	// Devices
+	getDevices: 'getDevices',
+	startDevice: 'startDevice',
+	stopDevice: 'stopDevice',
+	getDeviceOptions: 'getDeviceOptions',
+	getFpsRange: 'getFpsRange',
+	// Configs
+	getSensors: 'getSensors',
+	setSensors: 'setSensors',
+	getStereoDepth: 'getStereoDepth',
+	setStereoDepth: 'setStereoDepth',
+	getStereoDepthPreset: 'getStereoDepthPreset',
+	setStereoDepthPreset: 'setStereoDepthPreset',
+	getStereoDepthCalibration: 'getStereoDepthCalibration',
+	setStereoDepthCalibration: 'setStereoDepthCalibration',
+	setIr: 'setIr',
+	setPointCloud: 'setPointCloud',
+	setThermal: 'setThermal',
+	getCameraIntrinsics: 'getCameraIntrinsics',
+	// Neural networks
+	getNeuralNetworks: 'getNeuralNetworks',
+	setNeuralNetwork: 'setNeuralNetwork',
+	getNeuralNetworkConfiguration: 'getNeuralNetworkConfiguration',
+	setNeuralNetworkConfiguration: 'setNeuralNetworkConfiguration',
+};
+
+export const SIGNALING_SERVER_URL = 'wss://signal.cloud.luxonis.com/session/';
+export const ICE_SERVERS_API_ENDPOINT =
+	'https://signal.cloud-stg.luxonis.com/api/v1/turn-credentials';
+
+export const DEFAULT_ICE_SERVERS: RTCIceServer[] = [
+	{ urls: ['stun:stun.l.google.com:19302', 'stun:stun1.l.google.com:19302'] },
+];

package/src/constants/streams.ts

@@ -0,0 +1,11 @@
+export const StreamTypes = {
+	Encoded: 'H.264 Stream',
+	LeftEncoded: 'Left H.264 Stream',
+	RightEncoded: 'Right H.264 Stream',
+	Disparity: 'Disparity Stream',
+	Raw: 'Raw Stream',
+	LeftRaw: 'Left Raw Stream',
+	RightRaw: 'Right Raw Stream',
+	PointCloud: 'Point Cloud',
+	NeuralNetwork: 'Neural Network Stream',
+} as const;

package/src/constants/url.ts

@@ -0,0 +1,6 @@
+export const DEFAULT_WS_URL = `wss://${window.location.hostname}:8000/dai`;
+
+export const LOCALHOST_WS_URL = 'ws://localhost:8765';
+
+export const IS_LOCALHOST =
+	window.origin.includes('localhost') || window.origin.includes('127.0.0.1');