@luxonis/depthai-viewer-common 0.0.1

package/src/index.ts

@@ -0,0 +1,27 @@
+export * from './utils/functions.js';
+
+export * from './components/ButtonLink.js';
+export * from './components/Link.js';
+export * from './components/Pipeline.js';
+export * from './components/Resizable.js';
+export * from './components/Streams.js';
+export * from './components/CTASubLabel.js';
+
+export * from './constants/connection.js';
+export * from './constants/url.js';
+
+export * from './dai-connection/connection.js';
+export * from './dai-connection/decoder.worker.js';
+
+export * from './hooks/connection.js';
+export * from './hooks/navigation.js';
+export * from './hooks/search.js';
+
+export * from './utils/dynamic-base-worker.js';
+export * from './utils/functions.js';
+export * from './utils/sorting.js';
+export * from './utils/url.js';
+
+export * from './providers/DataProvider.js';
+export * from './providers/ConnectionProvider.js';
+export * from './constants/streams.js';

package/src/providers/ConnectionProvider.tsx

@@ -0,0 +1,39 @@
+import { VisualizerContext } from '@luxonis/visualizer-protobuf';
+import { type ConnectionData, useCreateConnection } from '../hooks/connection.js';
+import { useData } from './DataProvider.js';
+import type { DAIService } from '../dai-connection/connection.js';
+import { noop } from '../utils/functions.js';
+import React from 'react';
+
+export const ConnectionContext = React.createContext<ConnectionData>({
+	daiConnection: null,
+	connected: false,
+	topics: [],
+	pipeline: undefined,
+	isPipelineLoading: false,
+	setIsPipelineLoading: noop,
+	connections: [],
+	toggleTopic: noop,
+});
+
+export const ConnectionProvider: React.FC<
+	React.PropsWithChildren<{ activeServices: DAIService[] }>
+> = ({ children, activeServices }) => {
+	const { connectionType, wsUrl, token, clientId } = useData();
+
+	const connectionData = useCreateConnection({
+		type: connectionType,
+		token,
+		clientId,
+		connectionUrl: wsUrl,
+		activeServices,
+	});
+
+	return (
+		<VisualizerContext connections={connectionData.connections}>
+			<ConnectionContext.Provider value={connectionData}>{children}</ConnectionContext.Provider>
+		</VisualizerContext>
+	);
+};
+
+export const useConnection = () => React.useContext(ConnectionContext);

package/src/providers/DataProvider.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { DEFAULT_WS_URL, IS_LOCALHOST, LOCALHOST_WS_URL } from '../constants/url.js';
+import { useFlatSearch } from '../hooks/search.js';
+import { noop } from '../utils/functions.js';
+
+export type DataContext = {
+	columns: number | null;
+	changeColumns: (columns: number | null) => void;
+	changeWsUrl: (url: string) => void;
+	connectionType: 'ws' | 'webrtc';
+	wsUrl: string;
+	token: string;
+	clientId: string;
+};
+
+const DataContext = React.createContext<DataContext>({
+	columns: null,
+	connectionType: 'ws',
+	wsUrl: DEFAULT_WS_URL,
+	changeColumns: noop,
+	changeWsUrl: noop,
+	token: '',
+	clientId: '',
+});
+
+export const useData = () => React.useContext(DataContext);
+
+export const DataProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
+	const { search, updateSearch } = useFlatSearch({
+		defaultInit: { layout: '0', t: '', cid: '' },
+	});
+	const [columns, setColumns] = React.useState<number | null>(() => {
+		return search.layout === '0' ? null : Number(search.layout);
+	});
+	const [connectionUrl, setConnectionUrl] = React.useState(
+		search.t && search.cid ? '' : IS_LOCALHOST ? LOCALHOST_WS_URL : DEFAULT_WS_URL,
+	);
+
+	const changeColumns = React.useCallback(
+		(columns: number | null) => {
+			setColumns(columns);
+			updateSearch('layout', columns ?? 0);
+		},
+		[updateSearch],
+	);
+
+	const changeWsUrl = React.useCallback(
+		(url: string) => {
+			setConnectionUrl(url);
+			updateSearch('t', null);
+			updateSearch('cid', null);
+		},
+		[updateSearch],
+	);
+
+	return (
+		<DataContext.Provider
+			value={{
+				token: search.t as string,
+				clientId: search.cid as string,
+				wsUrl: connectionUrl,
+				connectionType: search.t && search.cid ? 'webrtc' : 'ws',
+				columns,
+				changeColumns,
+				changeWsUrl,
+			}}
+		>
+			{children}
+		</DataContext.Provider>
+	);
+};

package/src/utils/arrays.ts

@@ -0,0 +1,10 @@
+export function makeColumns<T>(list: T[], columns: number | null): T[][] {
+	if (!columns) {
+		return [list];
+	}
+	const result: T[][] = [];
+	for (let i = 0; i < list.length; i += columns) {
+		result.push(list.slice(i, i + columns));
+	}
+	return result;
+}

package/src/utils/dynamic-base-worker.ts

@@ -0,0 +1,21 @@
+export class DynamicBaseWorker extends Worker {
+	public DEBUG_IS_DYNAMIC_POLYFILL = true;
+
+	constructor(scriptUrl: string | URL, options?: WorkerOptions & { basePath?: string }) {
+		const url = new URL(scriptUrl);
+		if (options?.basePath !== undefined) {
+			url.pathname = `${options.basePath}${url.pathname}`;
+		} else {
+			url.pathname = `${window.__basePath}${url.pathname}`;
+		}
+		super(url.toString(), options);
+	}
+
+	public postMessage(
+		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+		message: any,
+		transfer?: Transferable[] | StructuredSerializeOptions,
+	): void {
+		super.postMessage(message, transfer as Parameters<Worker['postMessage']>['1']);
+	}
+}

package/src/utils/functions.ts

@@ -0,0 +1,3 @@
+export const noop = () => {
+	/* no-op */
+};

package/src/utils/sorting.ts

@@ -0,0 +1,42 @@
+import type { Topic } from '../hooks/connection.js';
+import { StreamTypes } from '../constants/streams.js';
+
+const PreferredStreamOrder: string[] = [
+	StreamTypes.Encoded,
+	StreamTypes.Raw,
+	StreamTypes.Disparity,
+	StreamTypes.PointCloud,
+	StreamTypes.LeftEncoded,
+	StreamTypes.LeftRaw,
+	StreamTypes.RightEncoded,
+	StreamTypes.RightRaw,
+];
+
+export function sortStreamsDefault(streams: Topic[]) {
+	return streams.sort((a, b) => {
+		const indexA = PreferredStreamOrder.indexOf(a.name);
+		const indexB = PreferredStreamOrder.indexOf(b.name);
+
+		if (indexA === -1 && indexB === -1) {
+			if (indexA === -1) {
+				console.warn('No index for stream', a.name);
+			}
+
+			if (indexB === -1) {
+				console.warn('No index for stream', b.name);
+			}
+
+			return 0;
+		}
+
+		if (indexA === -1) {
+			return 1;
+		}
+
+		if (indexB === -1) {
+			return -1;
+		}
+
+		return indexA - indexB;
+	});
+}

package/src/utils/url.ts

@@ -0,0 +1,8 @@
+export function parseUrl(pathname: string) {
+	const segments = pathname.split('/').filter(Boolean);
+
+	const page = segments.at(-1) === 'pipeline' ? 'pipeline' : 'streams';
+
+	const basePath = segments.slice(0, page === 'pipeline' ? -1 : undefined).join('/');
+	return { basePath, page };
+}

package/src/window.d.ts

@@ -0,0 +1,7 @@
+declare global {
+	interface Window {
+		__basePath: string;
+	}
+}
+
+export {};

package/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+		"tsBuildInfoFile": "../../node_modules/.tmp/tsconfig-common.tsbuildinfo",
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node16",
+    "resolveJsonModule": true,
+    "importsNotUsedAsValues": "remove",
+    "target": "ESNext",
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "sourceMap": true,
+    "composite": true,
+    "incremental": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "downlevelIteration": true,
+    "declaration": true,
+    "declarationMap": true,
+    "importHelpers": true,
+    "maxNodeModuleJsDepth": 1,
+    "jsx": "react-jsx",
+    "module": "node16",
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "references": []
+}