feat(observation): add dynamic camera sources

2026-07-16 20:56:41 +03:00
parent 05bdab24a5
commit a281faf923
15 changed files with 1592 additions and 52 deletions
@@ -0,0 +1,149 @@
+import { Dropdown, Icon, type IconName } from "@nodedc/ui-react";
+
+import type {
+  ObservationSourceAvailability,
+  ObservationSourceDescriptor,
+  ObservationSourceModality,
+} from "../core/runtime/contracts";
+
+const sourceIcon: Record<ObservationSourceModality, IconName> = {
+  "point-cloud": "globe",
+  video: "video",
+  image: "image",
+  depth: "image",
+};
+
+const availabilityCopy: Record<ObservationSourceAvailability, string> = {
+  unverified: "Не подтверждён",
+  declared: "Канал объявлен",
+  available: "Доступен",
+  connecting: "Подключение",
+  streaming: "Эфир",
+  degraded: "Нестабильно",
+  unavailable: "Недоступен",
+  error: "Ошибка",
+};
+
+export function observationSourceStatusLabel(source: ObservationSourceDescriptor): string {
+  return availabilityCopy[source.availability];
+}
+
+export function ObservationMedia({ source }: { source: ObservationSourceDescriptor }) {
+  if (source.previewUrl && source.modality === "video") {
+    return (
+      <video
+        className="observation-media__asset"
+        src={source.previewUrl}
+        autoPlay
+        muted
+        playsInline
+      />
+    );
+  }
+
+  if (source.previewUrl && (source.modality === "image" || source.modality === "depth")) {
+    return <img className="observation-media__asset" src={source.previewUrl} alt={source.label} />;
+  }
+
+  return (
+    <div className="observation-media__empty">
+      <Icon name={sourceIcon[source.modality]} size={20} />
+      <strong>{observationSourceStatusLabel(source)}</strong>
+      <span>
+        {source.modality === "video"
+          ? "Канал известен, browser-preview ещё не подключён"
+          : source.description}
+      </span>
+    </div>
+  );
+}
+
+export function ObservationSourcePicker({
+  sources,
+  visibleSourceIds,
+  onToggle,
+}: {
+  sources: readonly ObservationSourceDescriptor[];
+  visibleSourceIds: ReadonlySet<string>;
+  onToggle: (sourceId: string) => void;
+}) {
+  const visibleCount = sources.filter((source) => visibleSourceIds.has(source.id)).length;
+
+  return (
+    <Dropdown
+      className="scene-source-picker"
+      placement="bottom-start"
+      width={340}
+      offset={10}
+      surfaceRole="dialog"
+      surfaceClassName="observation-source-menu"
+      trigger={({ open, toggle, setAnchorRef, setTriggerRef, surfaceId }) => (
+        <button
+          ref={(node) => {
+            setAnchorRef(node);
+            setTriggerRef(node);
+          }}
+          type="button"
+          className="scene-source-picker__trigger"
+          data-active={open || visibleCount > 0 ? "true" : undefined}
+          aria-label="Источники данных сцены"
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          aria-controls={surfaceId}
+          onClick={toggle}
+        >
+          <Icon name="database" size={17} />
+          {sources.length > 0 ? <span>{visibleCount}</span> : null}
+        </button>
+      )}
+    >
+      <header className="observation-source-menu__head">
+        <div>
+          <span className="section-eyebrow">НАБЛЮДЕНИЕ</span>
+          <strong>Источники данных</strong>
+        </div>
+        <small>{sources.length ? `${visibleCount} из ${sources.length}` : "нет источников"}</small>
+      </header>
+      {sources.length ? (
+        <div className="observation-source-menu__list">
+          {sources.map((source) => {
+            const selected = visibleSourceIds.has(source.id);
+            return (
+              <button
+                key={source.id}
+                type="button"
+                className="nodedc-dropdown-option observation-source-option"
+                data-selected={selected ? "true" : undefined}
+                aria-pressed={selected}
+                onClick={() => onToggle(source.id)}
+              >
+                <span className="nodedc-dropdown-option__icon">
+                  <Icon name={sourceIcon[source.modality]} size={16} />
+                </span>
+                <span className="nodedc-dropdown-option__body">
+                  <span className="nodedc-dropdown-option__label">{source.label}</span>
+                  <span className="nodedc-dropdown-option__description">
+                    <i data-availability={source.availability} aria-hidden="true" />
+                    {observationSourceStatusLabel(source)} · {source.endpointLabel || source.transport}
+                  </span>
+                </span>
+                <span className="nodedc-dropdown-option__check">
+                  {selected ? <Icon name="check" size={15} /> : null}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="observation-source-menu__empty">
+          <Icon name="database" size={18} />
+          <strong>Каталог пока пуст</strong>
+          <span>Выберите профиль устройства — его плагин опубликует доступные каналы.</span>
+        </div>
+      )}
+      <footer className="observation-source-menu__foot">
+        Каналы приходят из активного device-плагина; сцена не знает модель оборудования.
+      </footer>
+    </Dropdown>
+  );
+}