@luxonis/depthai-viewer-common 0.0.2 → 0.0.4

package/src/components/Streams.tsx

@@ -1,261 +0,0 @@
-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 { FaUsersViewfinder as VisualizerIcon } from 'react-icons/fa6';
-import { sortStreamsDefault } from '../utils/sorting.js';
-import type { DeviceConfiguration } from '../models/device-configuration.js';
-
-const EnabledStreamsView: React.FC<{
-	topics: Topic[][];
-	targetFps?: number;
-	isRawSteamEnabledManually?: boolean;
-	setIsRawSteamEnabledManually?: (value: boolean) => void;
-	triggerToast?: () => void;
-	deviceOptions?: DeviceConfiguration | null;
-}> = ({
-	topics,
-	targetFps,
-	triggerToast,
-	isRawSteamEnabledManually,
-	setIsRawSteamEnabledManually,
-}) => {
-	const { toggleTopic, topics: allTopics } = useConnection();
-
-	const items = React.useMemo(() => {
-		return topics.map((row) => {
-			let filteredRow = row.filter((topic) => !topic.name.startsWith('_'));
-
-			if (
-				filteredRow.some((topic) => topic.name === StreamTypes.PointCloud) &&
-				filteredRow.some((topic) => topic.name !== StreamTypes.Encoded) &&
-				!isRawSteamEnabledManually
-			) {
-				filteredRow = filteredRow.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 (allTopics.find((t) => t.name === StreamTypes._PointCloudColor)) {
-									toggleTopic(StreamTypes._PointCloudColor);
-								} else if (allTopics.find((t) => t.name === StreamTypes.Encoded)) {
-									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?: DeviceConfiguration | 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.name.startsWith('_')).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.filter((topic) => !topic.name.startsWith('_'))),
-		[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

@@ -1,45 +0,0 @@
-// 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

@@ -1,12 +0,0 @@
-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',
-	_PointCloudColor: '_Point Cloud Color',
-} as const;

package/src/constants/url.ts

@@ -1,6 +0,0 @@
-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');