BUR-58 Добавлена оптимальная конфигурация для потока видео

Reviewed-on: #19

src/components/CameraView.tsx

@@ -6,6 +6,21 @@ type CameraViewProps = {
   wsUrl: string;
 };
 
+const CAMERA_PLAYER_CONFIG = {
+  enableWorker: true,
+  enableStashBuffer: true,
+  stashInitialSize: 512,
+  autoCleanupSourceBuffer: true,
+  autoCleanupMaxBackwardDuration: 10,
+  autoCleanupMinBackwardDuration: 5,
+  liveBufferLatencyChasing: true,
+  liveBufferLatencyMaxLatency: 5.0,
+  liveBufferLatencyMinRemain: 2.0,
+  liveSync: false,
+  lazyLoad: false,
+  deferLoadAfterSourceOpen: false,
+};
+
 export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -13,6 +28,7 @@ export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
   useEffect(() => {
     const video = videoRef.current;
     let player: ReturnType<typeof mpegts.createPlayer> | null = null;
+    const handlePlayerError = () => setError('Ошибка видеопотока');
 
     if (!video) {
       return;
@@ -30,20 +46,22 @@ export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
     }
 
     player = mpegts.createPlayer(
-      { type: 'mpegts', isLive: true, url: wsUrl },
-      { liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 1.5 },
+      { type: 'mpegts', isLive: true, url: wsUrl, hasAudio: false },
+      CAMERA_PLAYER_CONFIG,
     );
 
+    player.on(mpegts.Events.ERROR, handlePlayerError);
     player.attachMediaElement(video);
     player.load();
 
     const playResult = player.play();
     if (playResult instanceof Promise) {
-      void playResult.then(() => setError(null)).catch(() => setError('Не удалось запустить воспроизведение'));
+      void playResult.then(() => setError(null)).catch(() => undefined);
     }
 
     return () => {
       video.removeEventListener('playing', clearError);
+      player?.off(mpegts.Events.ERROR, handlePlayerError);
       player?.pause();
       player?.unload();
       player?.detachMediaElement();

src/features/history-chart/HistoryChart.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { EChartsOption } from 'echarts';
 import { getHistoryGranularity, type HistoryAxisLabelFormat } from '../../utils/historyGranularity';
 import type { DataZoomEventBatch, DataZoomState, HistoryZoomRange } from './chartTypes';
 import { HistoryChartArea } from './HistoryChartArea';
@@ -86,6 +87,39 @@ function isSameZoomRange(left: HistoryZoomRange, right: HistoryZoomRange): boole
   return left.from === right.from && left.to === right.to && left.granulate === right.granulate;
 }
 
+/** Вычисляет, какую часть верхнеуровневого периода занимает текущий пользовательский zoom. */
+function createDataZoomState(baseRange: HistoryZoomRange, zoomRange: HistoryZoomRange): DataZoomState {
+  // Верхнеуровневый период берём из инпутов "С/По" и считаем его полными 0..100%.
+  const baseFromMs = new Date(baseRange.from).getTime();
+  const baseToMs = new Date(baseRange.to).getTime();
+
+  // Пользовательский zoom живёт внутри верхнеуровневого периода и должен быть выделен на нижней шкале.
+  const zoomFromMs = new Date(zoomRange.from).getTime();
+  const zoomToMs = new Date(zoomRange.to).getTime();
+  const baseSpanMs = baseToMs - baseFromMs;
+
+  // Если даты некорректны, показываем весь период, чтобы не ломать управление графиком.
+  if (
+    !Number.isFinite(baseFromMs) ||
+    !Number.isFinite(baseToMs) ||
+    !Number.isFinite(zoomFromMs) ||
+    !Number.isFinite(zoomToMs) ||
+    baseSpanMs <= 0
+  ) {
+    return { start: 0, end: 100 };
+  }
+
+  // Переводим абсолютные даты zoom-а в проценты относительно верхнеуровневого периода.
+  const start = ((zoomFromMs - baseFromMs) / baseSpanMs) * 100;
+  const end = ((zoomToMs - baseFromMs) / baseSpanMs) * 100;
+
+  // Ограничиваем значения диапазоном 0..100, чтобы ECharts не получил выход за шкалу.
+  return {
+    start: Math.max(0, Math.min(100, start)),
+    end: Math.max(0, Math.min(100, end)),
+  };
+}
+
 export function HistoryChart({
   edge,
   from,
@@ -96,11 +130,17 @@ export function HistoryChart({
   to,
   tagLabels = {},
 }: HistoryChartProps) {
+  const baseRange = useMemo(
+    () => createInitialZoomRange({ from, granulate, labelFormat, tickIntervalMs, to }),
+    [from, granulate, labelFormat, tickIntervalMs, to],
+  );
   const [zoomRange, setZoomRange] = useState(() =>
     createInitialZoomRange({ from, granulate, labelFormat, tickIntervalMs, to }),
   );
+  const baseRangeRef = useRef(baseRange);
   const zoomRangeRef = useRef(zoomRange);
   const zoomTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastReadyOptionRef = useRef<EChartsOption | null>(null);
   const lines = useHistoryChartQueries({
     edge,
     from: zoomRange.from,
@@ -112,12 +152,13 @@ export function HistoryChart({
   const series = useHistoryChartSeries(lines, zoomRange.granulate);
   const legendData = useMemo(() => lines.map((line) => line.label), [lines]);
   const loading = lines.some((line) => line.loading);
+  const hasData = series.length > 0;
 
   useEffect(() => {
-    const nextRange = createInitialZoomRange({ from, granulate, labelFormat, tickIntervalMs, to });
-    zoomRangeRef.current = nextRange;
-    setZoomRange(nextRange);
-  }, [from, granulate, labelFormat, tickIntervalMs, to]);
+    baseRangeRef.current = baseRange;
+    zoomRangeRef.current = baseRange;
+    setZoomRange(baseRange);
+  }, [baseRange]);
 
   useEffect(() => {
     zoomRangeRef.current = zoomRange;
@@ -135,17 +176,29 @@ export function HistoryChart({
   const option = useMemo(
     () =>
       createHistoryChartOptions({
-        dataZoomState: { start: 0, end: 100 },
-        from: zoomRange.from,
-        to: zoomRange.to,
+        dataZoomState: createDataZoomState(baseRange, zoomRange),
+        from: baseRange.from,
+        to: baseRange.to,
         labelFormat: zoomRange.labelFormat,
         legendData,
         series,
         tickIntervalMs: zoomRange.tickIntervalMs,
       }),
-    [legendData, series, zoomRange],
+    [baseRange, legendData, series, zoomRange],
   );
 
+  // Во время lazy-загрузки нового zoom-диапазона оставляем на экране последний готовый график.
+  // Так canvas не заменяется loader-ом и пользователь не теряет визуальный контекст.
+  const fallbackOption = loading && !hasData ? lastReadyOptionRef.current : null;
+  const displayOption = fallbackOption ?? option;
+  const displayHasData = hasData || Boolean(fallbackOption);
+
+  useEffect(() => {
+    if (hasData) {
+      lastReadyOptionRef.current = option;
+    }
+  }, [hasData, option]);
+
   const handleDataZoom = useCallback((event: DataZoomEventBatch) => {
     const state = (event.batch ?? [event]).find(isXAxisDataZoom);
 
@@ -153,8 +206,9 @@ export function HistoryChart({
       return;
     }
 
+    const baseRange = baseRangeRef.current;
     const currentRange = zoomRangeRef.current;
-    const nextRange = getZoomRangeFromEvent(state, currentRange);
+    const nextRange = getZoomRangeFromEvent(state, baseRange);
 
     if (!nextRange || isSameZoomRange(nextRange, currentRange)) {
       return;
@@ -172,10 +226,10 @@ export function HistoryChart({
 
   return (
     <HistoryChartArea
-      hasData={series.length > 0}
+      hasData={displayHasData}
       hasSelection={tags.length > 0}
       loading={loading}
-      option={option}
+      option={displayOption}
       onDataZoom={handleDataZoom}
     />
   );

src/features/history-chart/HistoryChartArea.tsx

@@ -31,7 +31,7 @@ export function HistoryChartArea({
     return <div className="chart-placeholder">Разверните список показателей и выберите серию для графика</div>;
   }
 
-  if (loading) {
+  if (!hasData && loading) {
     return <div className="chart-placeholder">Загрузка графика...</div>;
   }
 

src/features/history-chart/useHistoryChartQueries.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useQueries } from '@tanstack/react-query';
+import { keepPreviousData, useQueries } from '@tanstack/react-query';
 import { getHistory } from '../../entities/history/api';
 import type { HistoryPoint } from '../../entities/history/types';
 
@@ -35,6 +35,7 @@ export function useHistoryChartQueries({
       queryKey: ['history', edge, tag, from, to, granulate],
       queryFn: ({ signal }: { signal: AbortSignal }) => getHistory({ edge, tag, from, to, granulate }, signal),
       enabled,
+      placeholderData: keepPreviousData,
     })),
   });