Merge pull request 'BUR-58 Добавлена поддержка работы с камерой #4' (#12) from bur-58 into dev

Reviewed-on: #12

package-lock.json

@@ -13,6 +13,7 @@
         "echarts-for-react": "^3.0.2",
         "keycloak-js": "^26.2.3",
         "lucide-react": "^0.468.0",
+        "mpegts.js": "^1.8.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-router-dom": "^7.18.0"
@@ -1234,6 +1235,12 @@
         "react": "^15.0.0 || >=16.0.0"
       }
     },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
+      "license": "MIT"
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -2014,6 +2021,16 @@
         "node": "*"
       }
     },
+    "node_modules/mpegts.js": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/mpegts.js/-/mpegts.js-1.8.0.tgz",
+      "integrity": "sha512-ZtujqtmTjWgcDDkoOnLvrOKUTO/MKgLHM432zGDI8oPaJ0S+ebPxg1nEpDpLw6I7KmV/GZgUIrfbWi3qqEircg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "es6-promise": "^4.2.5",
+        "webworkify-webpack": "github:xqq/webworkify-webpack"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2554,6 +2571,11 @@
         }
       }
     },
+    "node_modules/webworkify-webpack": {
+      "version": "2.1.5",
+      "resolved": "git+ssh://git@github.com/xqq/webworkify-webpack.git#24d1e719b4a6cac37a518b2bb10fe124527ef4ef",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "echarts-for-react": "^3.0.2",
     "keycloak-js": "^26.2.3",
     "lucide-react": "^0.468.0",
+    "mpegts.js": "^1.8.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.18.0"

src/app/router.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Navigate, Route, Routes, useNavigate } from 'react-route
 import { EdgeCurrentPage } from '../features/edge-detail/EdgeCurrentPage';
 import { EdgeDetailPage } from '../features/edge-detail/EdgeDetailPage';
 import { EdgeHistoryPage } from '../features/edge-detail/EdgeHistoryPage';
+import { EdgeVideoPage } from '../features/edge-detail/EdgeVideoPage';
 import { EdgesDashboard } from '../features/edges-dashboard/EdgesDashboard';
 
 function DashboardRoute() {
@@ -19,6 +20,7 @@ export function AppRouter() {
         <Route path="/edges/:edgeId" element={<EdgeDetailPage />} />
         <Route path="/edges/:edgeId/archive" element={<EdgeHistoryPage />} />
         <Route path="/edges/:edgeId/indicators" element={<EdgeCurrentPage />} />
+        <Route path="/edges/:edgeId/video" element={<EdgeVideoPage />} />
         <Route path="*" element={<Navigate to="/edges" replace />} />
       </Routes>
     </BrowserRouter>

src/components/CameraView.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from 'react';
+
+type CameraViewProps = {
+  title?: string;
+  wsUrl: string;
+};
+
+export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    let player: import('mpegts.js').default.Player | null = null;
+    let cancelled = false;
+
+    if (!video) {
+      return;
+    }
+
+    const clearError = () => setError(null);
+    video.addEventListener('playing', clearError);
+    setError(null);
+
+    void import('mpegts.js').then(({ default: mpegts }) => {
+      if (cancelled) {
+        return;
+      }
+
+      if (!mpegts.isSupported()) {
+        setError('Браузер не поддерживает MPEG-TS поток');
+        return;
+      }
+
+      player = mpegts.createPlayer(
+        { type: 'mpegts', isLive: true, url: wsUrl },
+        { liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 1.5 },
+      );
+
+      player.attachMediaElement(video);
+      player.load();
+
+      const playResult = player.play();
+      if (playResult instanceof Promise) {
+        void playResult.then(() => setError(null)).catch(() => setError('Не удалось запустить воспроизведение'));
+      }
+    });
+
+    return () => {
+      cancelled = true;
+      video.removeEventListener('playing', clearError);
+      player?.pause();
+      player?.unload();
+      player?.detachMediaElement();
+      player?.destroy();
+    };
+  }, [wsUrl]);
+
+  return (
+    <article className="camera-view">
+      <video ref={videoRef} className="camera-view__video" controls autoPlay muted playsInline />
+      <div className="camera-view__caption">
+        <strong>{title}</strong>
+        <span>{wsUrl}</span>
+      </div>
+      {error ? <div className="camera-view__error">{error}</div> : null}
+    </article>
+  );
+}

src/components/CameraViewsContainer.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react';
+
+type CameraViewsContainerProps = PropsWithChildren;
+
+export function CameraViewsContainer({ children }: CameraViewsContainerProps) {
+  return <div className="camera-views-grid">{children}</div>;
+}

src/entities/camera/api.ts

@@ -0,0 +1,7 @@
+import { getJson } from '../../shared/api/http';
+import { cloudApiUrl } from '../../shared/config/env';
+import type { CameraResponse } from './types';
+
+export function getCameras(edge: string): Promise<CameraResponse> {
+  return getJson<CameraResponse>(cloudApiUrl, '/camera', { edge });
+}

src/entities/camera/types.ts

@@ -0,0 +1,9 @@
+export type CameraItem = {
+  protocol: string;
+  source: string;
+};
+
+export type CameraResponse = {
+  edge: string;
+  items: CameraItem[];
+};

src/entities/history/api.ts

@@ -3,6 +3,6 @@ import { cloudApiUrl } from '../../shared/config/env';
 import type { HistoryRequest, HistoryResponse } from './types';
 
 /** Запрашивает исторический ряд с avg-линией и min/max-диапазоном для графика. */
-export function getHistory(params: HistoryRequest): Promise<HistoryResponse> {
-  return getJson<HistoryResponse>(cloudApiUrl, '/history', params);
+export function getHistory(params: HistoryRequest, signal?: AbortSignal): Promise<HistoryResponse> {
+  return getJson<HistoryResponse>(cloudApiUrl, '/history', params, { signal });
 }

src/features/edge-detail/EdgeVideoPage.tsx

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useParams } from 'react-router-dom';
+import { getCameras } from '../../entities/camera/api';
+import { EdgePageLayout } from './components/EdgePageLayout';
+import { VideoView } from './components/VideoView';
+
+export function EdgeVideoPage() {
+  const { edgeId = '' } = useParams();
+  const cameras = useQuery({
+    queryKey: ['camera', edgeId],
+    queryFn: () => getCameras(edgeId),
+    enabled: Boolean(edgeId),
+  });
+  const cameraItems = useMemo(() => cameras.data?.items ?? [], [cameras.data?.items]);
+
+  return (
+    <EdgePageLayout
+      currentEventsConnected={false}
+      edgeId={edgeId}
+      view="video"
+      onRefresh={() => void cameras.refetch()}
+    >
+      <VideoView cameras={cameraItems} loading={cameras.isPending} isError={cameras.isError} error={cameras.error} />
+    </EdgePageLayout>
+  );
+}

src/features/edge-detail/components/ArchiveView.tsx

@@ -202,7 +202,12 @@ export function ArchiveView({
         ) : null}
       </div>
 
-      <div className="archive-chart">
+      <div
+        className="archive-chart"
+        onFocusCapture={() => setSelectorOpen(false)}
+        onPointerDown={() => setSelectorOpen(false)}
+        onPointerEnter={() => setSelectorOpen(false)}
+      >
         <div className="toolbar">
           <div className="segmented">
             {RANGE_PRESETS.map((preset) => (
@@ -249,7 +254,7 @@ export function ArchiveView({
 
         {selectedTags.length ? (
           <HistoryChart
-            key={`${range.from}:${range.to}:${selectedTags.join(',')}`}
+            key={`${range.from}:${range.to}:${historyAxis.granulate}`}
             edge={edgeId}
             from={fromIso}
             to={toIso}

src/features/edge-detail/components/EdgeSidebar.tsx

@@ -1,4 +1,4 @@
-import { Activity, BarChart3, Gauge, Menu, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { Activity, BarChart3, Gauge, Menu, PanelLeftClose, PanelLeftOpen, Video } from 'lucide-react';
 import type { DetailView } from '../types';
 
 type EdgeSidebarProps = {
@@ -56,6 +56,14 @@ export function EdgeSidebar({ collapsed, edgePath, view, onNavigate, onToggleCol
           <Activity size={18} />
           <span className="nav-label">Показатели</span>
         </button>
+        <button
+          className={`nav-item nav-item--button ${view === 'video' ? 'nav-item--active' : ''}`}
+          type="button"
+          onClick={() => onNavigate(`${edgePath}/video`)}
+        >
+          <Video size={18} />
+          <span className="nav-label">Видео</span>
+        </button>
       </nav>
     </aside>
   );

src/features/edge-detail/components/VideoView.tsx

@@ -0,0 +1,46 @@
+import { Video } from 'lucide-react';
+import { CameraView } from '../../../components/CameraView';
+import { CameraViewsContainer } from '../../../components/CameraViewsContainer';
+import type { CameraItem } from '../../../entities/camera/types';
+
+type VideoViewProps = {
+  cameras: CameraItem[];
+  error: unknown;
+  isError: boolean;
+  loading: boolean;
+};
+
+function createWsUrl(camera: CameraItem): string {
+  const protocol = camera.protocol.replace(/:\/?\/?$/, '');
+  const source = camera.source.replace(/^\/\//, '');
+  return `${protocol}://${source}`;
+}
+
+export function VideoView({ cameras, error, isError, loading }: VideoViewProps) {
+  return (
+    <section className="video-section">
+      <div className="section-header">
+        <div>
+          <span className="page-kicker">
+            <Video size={14} />
+            Видео
+          </span>
+          <h2>Видеопотоки буровой</h2>
+        </div>
+      </div>
+
+      {loading ? <div className="empty-panel">Загрузка камер...</div> : null}
+      {isError ? <div className="empty-panel">Не удалось загрузить камеры: {String(error)}</div> : null}
+      {!loading && !isError && cameras.length === 0 ? <div className="empty-panel">Камеры для этой буровой не настроены</div> : null}
+
+      {!loading && !isError && cameras.length > 0 ? (
+        <CameraViewsContainer>
+          {cameras.map((camera, index) => {
+            const wsUrl = createWsUrl(camera);
+            return <CameraView key={`${camera.protocol}:${camera.source}`} title={`Камера ${index + 1}`} wsUrl={wsUrl} />;
+          })}
+        </CameraViewsContainer>
+      ) : null}
+    </section>
+  );
+}

src/features/edge-detail/types.ts

@@ -1 +1 @@
-export type DetailView = 'overview' | 'archive' | 'indicators';
+export type DetailView = 'overview' | 'archive' | 'indicators' | 'video';

src/features/history-chart/HistoryChart.tsx

@@ -18,6 +18,10 @@ type HistoryChartProps = {
 };
 
 /** Контейнер истории: загружает выбранные теги и передает готовые серии в область ECharts. */
+function isXAxisDataZoom(state: DataZoomState): boolean {
+  return state.dataZoomId?.startsWith('history-x-') || state.dataZoomIndex === 0 || state.dataZoomIndex === 1;
+}
+
 export function HistoryChart({
   edge,
   from,
@@ -49,7 +53,12 @@ export function HistoryChart({
   );
 
   const handleDataZoom = useCallback((event: DataZoomEventBatch) => {
-    const state = event.batch?.[0] ?? event;
+    const state = (event.batch ?? [event]).find(isXAxisDataZoom);
+
+    if (!state) {
+      return;
+    }
+
     dataZoomRef.current = {
       start: state.start,
       end: state.end,

src/features/history-chart/chartTypes.ts

@@ -8,6 +8,8 @@ export type TooltipParam = {
 };
 
 export type DataZoomState = {
+  dataZoomId?: string;
+  dataZoomIndex?: number;
   start?: number;
   end?: number;
   startValue?: number;

src/features/history-chart/historyChartFormat.ts

@@ -60,6 +60,19 @@ function formatChartValue(value: number): string {
   }).format(value);
 }
 
+/** Показывает одно значение, если min/avg/max визуально совпадают. */
+function formatTooltipValue(value: AvgPointValue): string {
+  const avg = formatChartValue(value[1]);
+  const min = formatChartValue(value[2]);
+  const max = formatChartValue(value[3]);
+
+  if (min === avg && avg === max) {
+    return avg;
+  }
+
+  return `min ${min} · avg ${avg} · max ${max}`;
+}
+
 function isAvgPointValue(value: unknown): value is AvgPointValue {
   return Array.isArray(value) && value.length >= 5 && value.every((item) => typeof item === 'number');
 }
@@ -91,7 +104,7 @@ export function formatTooltip(params: unknown): string {
       '<div class="chart-tooltip-row">',
       `<span class="chart-tooltip-label" style="--chart-tooltip-marker-color:${item.color ?? 'currentColor'};">${item.seriesName ?? ''}</span>`,
       '<strong>',
-      `min ${formatChartValue(value[2])} · avg ${formatChartValue(value[1])} · max ${formatChartValue(value[3])}`,
+      formatTooltipValue(value),
       value[4] > 1 ? ` · ${value[4]} точек` : '',
       '</strong>',
       '</div>',

src/features/history-chart/historyChartOptions.ts

@@ -54,7 +54,7 @@ export function createHistoryChartOptions({
     grid: {
       top: 54,
       left: 48,
-      right: 24,
+      right: 56,
       bottom: 72,
     },
     xAxis: {
@@ -79,7 +79,9 @@ export function createHistoryChartOptions({
     },
     dataZoom: [
       {
+        id: 'history-x-inside',
         type: 'inside',
+        xAxisIndex: 0,
         throttle: 80,
         start: dataZoomState.start,
         end: dataZoomState.end,
@@ -87,7 +89,9 @@ export function createHistoryChartOptions({
         endValue: dataZoomState.endValue,
       },
       {
+        id: 'history-x-slider',
         type: 'slider',
+        xAxisIndex: 0,
         bottom: 18,
         height: 28,
         borderColor: 'rgba(148, 163, 184, 0.24)',
@@ -102,6 +106,28 @@ export function createHistoryChartOptions({
         startValue: dataZoomState.startValue,
         endValue: dataZoomState.endValue,
       },
+      {
+        id: 'history-y-inside',
+        type: 'inside',
+        yAxisIndex: 0,
+        filterMode: 'none',
+        throttle: 80,
+      },
+      {
+        id: 'history-y-slider',
+        type: 'slider',
+        yAxisIndex: 0,
+        filterMode: 'none',
+        right: 8,
+        width: 12,
+        borderColor: 'rgba(148, 163, 184, 0.24)',
+        fillerColor: 'rgba(91, 143, 249, 0.18)',
+        handleStyle: {
+          color: '#d4a574',
+          borderColor: '#e8c9a0',
+        },
+        textStyle: { color: '#94a3b8' },
+      },
     ],
     series,
   };

src/features/history-chart/useHistoryChartQueries.ts

@@ -33,7 +33,7 @@ export function useHistoryChartQueries({
   const queries = useQueries({
     queries: tags.map((tag) => ({
       queryKey: ['history', edge, tag, from, to, granulate],
-      queryFn: () => getHistory({ edge, tag, from, to, granulate }),
+      queryFn: ({ signal }: { signal: AbortSignal }) => getHistory({ edge, tag, from, to, granulate }, signal),
       enabled,
     })),
   });

src/styles/detail.css

@@ -2,4 +2,5 @@
 @import './detail/overview.css';
 @import './detail/indicators.css';
 @import './detail/archive.css';
+@import './detail/video.css';
 @import './detail/electrical.css';

src/styles/detail/video.css

@@ -0,0 +1,87 @@
+.video-section {
+  min-height: 0;
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background:
+    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.08), transparent 38%),
+    linear-gradient(145deg, rgba(17, 24, 39, 0.9), rgba(2, 6, 23, 0.78));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 18px 36px rgba(0, 0, 0, 0.28);
+}
+
+.camera-views-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.camera-view {
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+  border: 1px solid rgba(88, 103, 121, 0.42);
+  border-radius: 8px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
+    #000;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    0 10px 22px rgba(0, 0, 0, 0.32);
+}
+
+.camera-view__video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  display: block;
+  background: #000;
+  object-fit: contain;
+}
+
+.camera-view__caption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 38px;
+  padding: 0 10px;
+  border-top: 1px solid rgba(148, 163, 184, 0.16);
+  background: rgba(2, 6, 23, 0.88);
+  color: #cbd5e1;
+}
+
+.camera-view__caption strong,
+.camera-view__caption span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.camera-view__caption strong {
+  flex: 0 0 auto;
+  color: #f8fafc;
+  font-size: 0.82rem;
+}
+
+.camera-view__caption span {
+  font-size: 0.72rem;
+}
+
+.camera-view__error {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 18px;
+  background: rgba(2, 6, 23, 0.82);
+  color: #fca5a5;
+  text-align: center;
+}
+
+@media (max-width: 900px) {
+  .camera-views-grid {
+    grid-template-columns: 1fr;
+  }
+}