70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
import type {RefObject} from "react";
|
|
import {FloatingMediaWindow} from "../../../../packages/spatial-ui/src/FloatingMediaWindow";
|
|
export {initialObservationWindowRect,shouldCaptureWorkspacePointer} from "../../../../packages/spatial-ui/src/FloatingMediaWindow";
|
|
|
|
import type { ObservationWindowRect } from "../core/observation/useObservationLayout";
|
|
import type { ObservationSourceDescriptor } from "../core/runtime/contracts";
|
|
import { ObservationMedia, observationSourceStatusLabel } from "./ObservationSources";
|
|
import type { RecordedObservationPlayback } from "./RecordedFmp4Player";
|
|
import type {
|
|
RecordedAdmissionPhase,
|
|
RecordedCameraAdmissionState,
|
|
} from "../core/observation/recordedSessionAdmission";
|
|
|
|
export function FloatingObservationWindow({
|
|
source,
|
|
index,
|
|
count,
|
|
boundsRef,
|
|
rect,
|
|
maximized,
|
|
active,
|
|
hidden = false,
|
|
onRectChange,
|
|
onMaximizedChange,
|
|
onActivate,
|
|
onClose,
|
|
playback,
|
|
prepareRecorded,
|
|
recordedSessionGate,
|
|
recordedAdmissionKey,
|
|
onRecordedAdmissionChange,
|
|
}: {
|
|
source: ObservationSourceDescriptor;
|
|
index: number;
|
|
count: number;
|
|
boundsRef: RefObject<HTMLElement | null>;
|
|
rect?: ObservationWindowRect;
|
|
maximized: boolean;
|
|
active: boolean;
|
|
hidden?: boolean;
|
|
onRectChange: (rect: ObservationWindowRect) => void;
|
|
onMaximizedChange: (maximized: boolean) => void;
|
|
onActivate: () => void;
|
|
onClose: () => void;
|
|
playback?: RecordedObservationPlayback | null;
|
|
prepareRecorded?: boolean;
|
|
recordedSessionGate?: RecordedAdmissionPhase;
|
|
recordedAdmissionKey?: string | null;
|
|
onRecordedAdmissionChange?: (
|
|
sourceId: string,
|
|
state: RecordedCameraAdmissionState,
|
|
) => void;
|
|
}) {
|
|
return <FloatingMediaWindow title={source.label} subtitle={source.description}
|
|
index={index} count={count} boundsRef={boundsRef} rect={rect} maximized={maximized}
|
|
active={active} hidden={hidden} onRectChange={onRectChange} onMaximizedChange={onMaximizedChange}
|
|
onActivate={onActivate} onClose={onClose} resizable={source.capabilities.resizable}
|
|
status={<span className="floating-observation-window__status"><i data-availability={source.availability} aria-hidden="true"/>{observationSourceStatusLabel(source)}</span>}
|
|
footer={<span className="floating-observation-window__footer"><span>{source.endpointLabel || source.transport}</span><span>{source.capabilities.timelineMode === "live-only" ? "Эфир без буфера" : "Временная шкала"}</span></span>}>
|
|
<ObservationMedia
|
|
source={source}
|
|
playback={playback}
|
|
prepareRecorded={prepareRecorded}
|
|
recordedSessionGate={recordedSessionGate}
|
|
recordedAdmissionKey={recordedAdmissionKey}
|
|
onRecordedAdmissionChange={onRecordedAdmissionChange}
|
|
/>
|
|
</FloatingMediaWindow>;
|
|
}
|