@3deye-toolkit/react-camera 0.0.3 → 0.0.4

package/dist/react-camera.css

@@ -406,14 +406,12 @@
 }
 
 .x-3deye-player__zoom-preview {
-	display: flex;
-	flex-direction: column;
-	position: absolute;
-	right: 44px;
-	top: 50%;
-	transform: translateY(-50%);
-	background-color: rgba(0, 0, 0, 0.7);
-	border: 1px solid white;
+	-webkit-backdrop-filter: blur(1px);
+	        backdrop-filter: blur(1px);
+	border-radius: 4px;
+	border: 2px solid #ffffff40;
+	overflow: hidden;
+	display: none;
 }
 
 .x-3deye-player__zoom-preview .zoom-value {
@@ -435,39 +433,46 @@
 .x-3deye-player__zoom-preview .x-3deye-player__zoomable {
 	position: relative;
 	flex: 1;
-	background-color: rgba(255, 255, 255, 0.5);
+	background-color: rgba(255, 255, 255, 0.4);
+	border-radius: 4px;
 }
 
+.x-3deye-player__zoom-preview:has(+ :hover),
+	.x-3deye-player__zoom-preview:has(+ :focus-within),
+	.x-3deye-player__zoom-preview:hover {
+		display: block;
+	}
+
 .x-3deye-player__zoom-slider {
+	--primary-color: orange;
+	--surface-highlight-rgb: 255, 255, 255;
 	position: absolute;
 	right: 10px;
 	top: 50%;
 	transform: translateY(-50%);
-	width: 34px;
 	padding: 10px 5px;
 	background-color: rgba(0, 0, 0, 0.5);
 	border: 2px solid rgba(255, 255, 255, 0.25);
 	border-radius: 4px;
 	-webkit-backdrop-filter: blur(2px);
 	        backdrop-filter: blur(2px);
+	opacity: 0.5;
 }
 
-.x-3deye-player__zoom-slider .tick {
-	margin-left: 4px;
-	width: 12px;
-	height: 10px;
-	border-top: 1px solid rgba(255, 255, 255, 0.4);
-}
+.x-3deye-player__zoom-slider:hover {
+		opacity: 1;
+	}
 
-.x-3deye-player__zoom-slider .tick:nth-child(5n + 1) {
-	margin-left: 0px;
-	width: 20px;
-	border-top-width: 2px;
-}
+.x-3deye-player__zoom-slider:focus-within {
+		opacity: 1;
+		display: flex !important;
+	}
 
-.x-3deye-player__zoom-slider .tick:last-child {
-	height: 0;
-}
+.x-3deye-player__zoom-slider .x-3deye-slider__thumb {
+		width: 16px;
+		height: 16px;
+		background: orange;
+	}
 
 .x-3deye-player__zoom-slider .rotation-button {
 	padding: 0;
@@ -478,22 +483,131 @@
 	color: white;
 }
 
-.x-3deye-player__zoom-preview {
-	display: none;
+.x-3deye-slider {
+	position: relative;
+	display: flex;
+	align-items: center;
 }
 
-.x-3deye-player__zoom-slider:hover + .x-3deye-player__zoom-preview,
-.x-3deye-player__zoom-slider + .x-3deye-player__zoom-preview:focus,
-.x-3deye-player__zoom-preview:hover,
-.x-3deye-player__zoom-preview:focus {
-	display: block;
+.x-3deye-slider:focus-visible {
+	outline: none;
+}
+
+.x-3deye-slider.horizontal {
+	width: 100%;
+	height: 20px;
+}
+
+.x-3deye-slider.vertical {
+	width: 20px;
+	height: 100%;
+	flex-direction: column;
+}
+
+.x-3deye-slider__track {
+	background: var(--surface-inverse, gainsboro);
+	position: relative;
+	flex: 1;
+}
+
+.x-3deye-slider__bar {
+	background-color: var(--primary-color, #0067ac);
+	position: absolute;
+}
+
+.x-3deye-slider.disabled .x-3deye-slider__bar {
+	background-color: rgb(165, 165, 165);
+}
+
+.x-3deye-slider.horizontal .x-3deye-slider__bar {
+	top: 0;
+	bottom: 0;
+	left: 0;
+}
+
+.x-3deye-slider.vertical .x-3deye-slider__bar {
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.x-3deye-slider.horizontal .x-3deye-slider__track {
+	height: 3px;
+}
+
+.x-3deye-slider.vertical .x-3deye-slider__track {
+	width: 3px;
+}
+
+.x-3deye-slider__thumb {
+	will-change: transform box-shadow;
+	background: white;
+	box-shadow: 0 0 0 6px rgba(0, 100, 255, 0), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
+		1px 1px 2px 0 rgba(0, 0, 0, 0.25);
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	transition: box-shadow 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
+}
+
+.x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover,
+.x-3deye-slider:focus .x-3deye-slider__thumb {
+	box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.1),
+		0 0 0 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
+}
+
+.x-3deye-slider:focus .x-3deye-slider__thumb.active {
+	box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.2),
+		0 0 0 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
+}
+
+.x-3deye-slider.horizontal .x-3deye-slider__thumb {
+	margin-left: -10px;
+}
+
+.x-3deye-slider.vertical .x-3deye-slider__thumb {
+	margin-bottom: -10px;
+}
+
+.x-3deye-slider__label {
+	pointer-events: none;
+	touch-action: none;
+	will-change: transform;
+	transform: translate(-50%, -100%) scale(0);
+	background: var(--primary-color, #0067ac);
+	bottom: 50%;
+	left: 50%;
+	color: var(--on-primary-color, white);
+	font-size: 0.75rem;
+	border-radius: 4px;
+	width: -moz-fit-content;
+	width: fit-content;
+	min-width: 24px;
+	padding: 4px 8px;
+	position: relative;
+	transition: transform 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
+	transform-origin: center bottom;
+}
+
+.x-3deye-slider__label.open,
+.x-3deye-slider:not(.disabled)
+	.x-3deye-slider__thumb:hover
+	.x-3deye-slider__label,
+.x-3deye-slider:focus .x-3deye-slider__label {
+	transform: translate(-50%, -100%) scale(1);
 }
 
-.x-3deye-player__zoom-slider:is(:hover, :focus),
-.x-3deye-player__zoom-slider:has(
-		+ .x-3deye-player__zoom-preview:is(:focus, :hover)
-	) {
+.x-3deye-slider__label::before {
+	content: '';
 	display: block;
+	position: absolute;
+	top: 100%;
+	left: calc(50% - 5px);
+	width: 0;
+	height: 0;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 5px solid var(--primary-color, #0067ac);
 }
 
 .x-3deye-player__controls {
@@ -643,133 +757,6 @@
 	transform-origin: 16px 12px;
 }
 
-.x-3deye-slider {
-	position: relative;
-	display: flex;
-	align-items: center;
-}
-
-.x-3deye-slider:focus-visible {
-	outline: none;
-}
-
-.x-3deye-slider.horizontal {
-	width: 100%;
-	height: 20px;
-}
-
-.x-3deye-slider.vertical {
-	width: 20px;
-	height: 100%;
-	flex-direction: column;
-}
-
-.x-3deye-slider__track {
-	background: var(--surface-inverse, gainsboro);
-	position: relative;
-	flex: 1;
-}
-
-.x-3deye-slider__bar {
-	background-color: var(--primary-color, #0067ac);
-	position: absolute;
-}
-
-.x-3deye-slider.disabled .x-3deye-slider__bar {
-	background-color: rgb(165, 165, 165);
-}
-
-.x-3deye-slider.horizontal .x-3deye-slider__bar {
-	top: 0;
-	bottom: 0;
-	left: 0;
-}
-
-.x-3deye-slider.vertical .x-3deye-slider__bar {
-	bottom: 0;
-	left: 0;
-	right: 0;
-}
-
-.x-3deye-slider.horizontal .x-3deye-slider__track {
-	height: 3px;
-}
-
-.x-3deye-slider.vertical .x-3deye-slider__track {
-	width: 3px;
-}
-
-.x-3deye-slider__thumb {
-	will-change: transform box-shadow;
-	background: white;
-	box-shadow: 0 0 0 6px rgba(0, 100, 255, 0), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
-		1px 1px 2px 0 rgba(0, 0, 0, 0.25);
-	width: 20px;
-	height: 20px;
-	border-radius: 50%;
-	transition: box-shadow 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
-}
-
-.x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover,
-.x-3deye-slider:focus .x-3deye-slider__thumb {
-	box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.1),
-		0 0 0 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
-}
-
-.x-3deye-slider:focus .x-3deye-slider__thumb.active {
-	box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.2),
-		0 0 0 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
-}
-
-.x-3deye-slider.horizontal .x-3deye-slider__thumb {
-	margin-left: -10px;
-}
-
-.x-3deye-slider.vertical .x-3deye-slider__thumb {
-	margin-bottom: -10px;
-}
-
-.x-3deye-slider__label {
-	pointer-events: none;
-	touch-action: none;
-	will-change: transform;
-	transform: translate(-50%, -100%) scale(0);
-	background: var(--primary-color, #0067ac);
-	bottom: 50%;
-	left: 50%;
-	color: var(--on-primary-color, white);
-	font-size: 0.75rem;
-	border-radius: 4px;
-	width: -moz-fit-content;
-	width: fit-content;
-	min-width: 24px;
-	padding: 4px 8px;
-	position: relative;
-	transition: transform 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
-	transform-origin: center bottom;
-}
-
-.x-3deye-slider__label.open,
-.x-3deye-slider:not(.disabled)
-	.x-3deye-slider__thumb:hover
-	.x-3deye-slider__label,
-.x-3deye-slider:focus .x-3deye-slider__label {
-	transform: translate(-50%, -100%) scale(1);
-}
-
-.x-3deye-slider__label::before {
-	content: '';
-	display: block;
-	position: absolute;
-	top: 100%;
-	left: calc(50% - 5px);
-	width: 0;
-	height: 0;
-	border-left: 5px solid transparent;
-	border-right: 5px solid transparent;
-	border-top: 5px solid var(--primary-color, #0067ac);
-}
-
 .ptz-popover.x-3deye-popover-container {
 	border-radius: 6px;
 	background-color: rgba(15, 15, 20, 0.7);

package/dist/react-camera.d.ts

@@ -1,4 +1,5 @@
 import type { IReactionDisposer } from 'mobx';
+import { Matrix } from 'transformation-matrix';
 import { Observable } from 'rxjs';
 import { default as React_2 } from 'react';
 import { Ref } from 'react';
@@ -189,7 +190,7 @@ export declare const CloseControl: {
     displayName: string;
 };
 
-export declare const Control: React_2.FC<Props_5>;
+export declare const Control: React_2.ForwardRefExoticComponent<Omit<Props_5, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
 
 export declare function Controls({ style, children }: Props_6): React_2.JSX.Element;
 
@@ -276,7 +277,11 @@ export declare class PlayerController {
     stats: any;
     mode: 'archive' | 'DVR' | 'WebRTC' | null;
     behavior: PlayerBehavior | null;
-    transform: string | null;
+    transform: Matrix | null;
+    isRotating: boolean;
+    setTransform: (matrix: Matrix | null, animate?: boolean) => void;
+    resetTransform: () => void;
+    animationController: REACT_SRPING_CONTROLLER_TYPE_HACK;
     width: number;
     height: number;
     chunkRequest: {
@@ -367,7 +372,6 @@ export declare class PlayerController {
     setPlaybackRate: (rate: number) => void;
     reactToVolumeChange(): void;
     togglePlayback: () => void;
-    setTransform(transform: string | null): void;
     play: () => void;
     pause: () => void;
     detach: () => void;
@@ -379,7 +383,7 @@ export declare class PlayerController {
 declare class PlayerError extends ErrorBase<PlayerErrorType> {
 }
 
-declare type PlayerErrorType = 'PLAYER_ERROR' | 'MEDIA_ERROR' | 'STREAMING_ERROR' | 'CAMERA_OFFLINE_ERROR' | 'PLAYBACK_TIMEOUT_ERROR' | 'CONNECTION_TIMEOUT_ERROR' | 'NO_PLAYABLE_STREAM_ERROR' | 'NO_VIDEO_TRACK_ERROR';
+declare type PlayerErrorType = 'PLAYER_ERROR' | 'MEDIA_ERROR' | 'STREAMING_ERROR' | 'CAMERA_OFFLINE_ERROR' | 'PLAYBACK_TIMEOUT_ERROR' | 'CONNECTION_TIMEOUT_ERROR' | 'CONNECTION_FAILED_ERROR' | 'NO_PLAYABLE_STREAM_ERROR' | 'NO_VIDEO_TRACK_ERROR';
 
 declare interface PlayerEventStreams {
     canSeek$: Observable<any>;
@@ -434,6 +438,10 @@ declare interface Props_3 extends Omit<React_2.HTMLAttributes<HTMLDivElement>, '
     controllerRef?: Ref<PlayerController>;
     videoRef?: Ref<HTMLVideoElement>;
     archivesStore: ArchivesStore;
+    auth: {
+        token: Token | null;
+        invalidateToken: () => void;
+    };
 }
 
 declare interface Props_4 {
@@ -550,6 +558,35 @@ declare interface RawClip {
     version: string;
 }
 
+declare type RawToken = {
+    accessToken: string;
+    accessTokenExpires: string;
+    accessTokenIssued: string;
+    clientId: string;
+    expiresIn: number;
+    refreshToken: string;
+    refreshTokenExpires: string;
+    refreshTokenIssued: string;
+    tokenType: string;
+    userName: string;
+} & {
+    access_token: string;
+    access_token_expires: string;
+    access_token_issued: string;
+    client_id: string;
+    expires_in: number;
+    refresh_token: string;
+    refresh_token_expires: string;
+    refresh_token_issued: string;
+    token_type: string;
+    userName: string;
+} & {
+    widgetId?: string;
+    widgetToken?: string;
+};
+
+declare type REACT_SRPING_CONTROLLER_TYPE_HACK = any;
+
 export declare const ResizeModeControl: (() => React_2.JSX.Element) & {
     displayName: string;
 };
@@ -559,6 +596,24 @@ export declare const SnapshotControl: {
     displayName: string;
 };
 
+declare class Token {
+    accessToken: string;
+    accessTokenExpires: Date;
+    accessTokenIssued: Date;
+    clientId: string;
+    expiresIn: number;
+    refreshToken: string;
+    refreshTokenExpires: Date;
+    refreshTokenIssued: Date;
+    tokenType: string;
+    userName: string;
+    invalid: boolean;
+    widgetId?: string;
+    widgetToken?: string;
+    json: RawToken;
+    constructor(raw: RawToken);
+}
+
 export declare function useFullscreen(): {
     ref: (node: HTMLElement | null) => void;
     toggle: () => undefined;

package/dist/react-camera.js

@@ -1 +1 @@
-import e from"i18next";import{of as t,from as r,Observable as i,merge as a,fromEvent as n,Subject as s,EMPTY as l,Subscription as o,timer as c,switchMap as u,filter as d,timeout as h,take as m,TimeoutError as p,mergeMap as b,throwError as v,debounceTime as f,map as g,pairwise as y,interval as E,concatMap as w,delay as P,noop as C}from"rxjs";import k,{useState as R,cloneElement as O,useRef as T,useCallback as S,useContext as x,useMemo as I,useEffect as j,useImperativeHandle as M,useLayoutEffect as N,createContext as L,Children as D}from"react";import{AppContext as _,app as A}from"@3deye-toolkit/core";import{computed as z,observe as F,reaction as Q,runInAction as V,makeObservable as H,observable as U,action as B,when as $,makeAutoObservable as W}from"mobx";import{observer as Z,useLocalObservable as q}from"mobx-react-lite";import G from"resize-observer-polyfill";import{mapTo as Y,map as J,distinctUntilChanged as X,audit as K,switchMap as ee,debounceTime as te,filter as re,tap as ie,startWith as ae,takeUntil as ne,mergeMap as se,take as le,pairwise as oe,auditTime as ce,flatMap as ue}from"rxjs/operators";import de from"hls.js";import he from"reconnecting-websocket";import{retryBackoff as me}from"backoff-rxjs";import{select as pe}from"d3-selection";import{zoom as be,zoomTransform as ve,zoomIdentity as fe,ZoomTransform as ge}from"d3-zoom";import{toString as ye,compose as Ee,translate as we,rotateDEG as Pe,scale as Ce}from"transformation-matrix";import ke from"clsx";import Re from"react-ink";import{useFloating as Oe,offset as Te,flip as Se,shift as xe,autoUpdate as Ie,useInteractions as je,useHover as Me,useRole as Ne,useDismiss as Le,FloatingPortal as De,arrow as _e,FloatingFocusManager as Ae}from"@floating-ui/react";import ze from"@seznam/compose-react-refs";import{scaleLog as Fe}from"d3-scale";import{useSpring as Qe,config as Ve,animated as He}from"@react-spring/web";import{useDrag as Ue}from"@use-gesture/react";var Be={playerTools:{live:"live",goLive:"go live",closePlayer:"close player",playbackRate:"set playback rate",play:"play",pause:"pause",snapshot:"take video snapshot",volume:"volume",fullScreen:"toggle full screen"},player:{playbackTimeoutError:"Error occured. No playback in the last {{count}} seconds",cameraIsOffline:"Camera is offline",cameraIsDisabled:"Camera is disabled",noPlayableStream:"No playable stream available",noVideoTrack:"No video track",genericError:"An error occured. Please try again later"},videoResizeMode:{fit:"keep video's aspect ratio",stretch:"stretch video"},ptzControl:{zoomSpeed:"zoom speed",relative:"Relative",continuous:"Continuous",moveCameraHome:"move camera to home position",movementSpeed:"movement speed",setHome:"set as home"},cameraManager:{cameraPtzHomeSet:"New home position is set",errorWhileUpdatingHomePositionDescription:"Sorry, camera PTZ failed to respond to the request.\nPlease make sure your have Internet connection and refresh your browser"},selectArea:"select area",button:{cancel:"Cancel"}};const $e={detection:{order:["querystring","htmlTag","navigator"],lookupQuerystring:"lang"},fallbackLng:"en",load:"all",interpolation:{escapeValue:!1}},We=e.createInstance(),Ze=k.createContext(null),qe=!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);var Ge,Ye;function Je(e,t=!1){const r=z(e);return new i((e=>{const i=F(r,(({newValue:t})=>e.next(t)),t);return()=>i()}))}!function(e){e[e.CONNECTING=0]="CONNECTING",e[e.CONNECTED=1]="CONNECTED",e[e.RECONNECTING=2]="RECONNECTING",e[e.DISCONNECTED=3]="DISCONNECTED"}(Ge||(Ge={})),function(e){e[e.Motion=0]="Motion",e[e.Tampering=1]="Tampering",e[e.PanTiltZoom=2]="PanTiltZoom",e[e.CrossLine=3]="CrossLine",e[e.Intrusion=4]="Intrusion",e[e.LicensePlate=5]="LicensePlate",e[e.FaceDetection=6]="FaceDetection",e[e.Audio=7]="Audio",e[e.Analytic=8]="Analytic",e[e.SpeedDetection=9]="SpeedDetection",e[e.PeopleCounter=10]="PeopleCounter",e[e.Temperature=11]="Temperature",e[e.PoS=12]="PoS",e[e.GPS=13]="GPS",e[e.DigitalInput=14]="DigitalInput",e[e.Normal=15]="Normal",e[e.Suspicious=16]="Suspicious",e[e.Loitering=17]="Loitering",e[e.Vandalism=18]="Vandalism",e[e.Trespass=19]="Trespass",e[e.Emergency=20]="Emergency",e[e.LifeInDanger=21]="LifeInDanger",e[e.ErroneousAlert=22]="ErroneousAlert",e[e.Misidentification=23]="Misidentification",e[e.Fire=24]="Fire",e[e.MedicalDuress=25]="MedicalDuress",e[e.HoldUp=26]="HoldUp",e[e.CheckIn=27]="CheckIn",e[e.CheckOut=28]="CheckOut",e[e.ClockIn=29]="ClockIn",e[e.ClockOut=30]="ClockOut",e[e.ParkingStart=31]="ParkingStart",e[e.ParkingEnd=32]="ParkingEnd",e[e.ParkingViolation=33]="ParkingViolation",e[e.GateAccess=34]="GateAccess",e[e.DoorAccess=35]="DoorAccess",e[e.TemperatureCheck=36]="TemperatureCheck",e[e.IDCheck=37]="IDCheck",e[e.PPECheck=38]="PPECheck",e[e.WelfareCheck=39]="WelfareCheck",e[e.VehicleBreakIn=40]="VehicleBreakIn",e[e.DrugTrafficking=41]="DrugTrafficking",e[e.Assault=42]="Assault",e[e.PackageDelivery=43]="PackageDelivery",e[e.Uncategorized=999]="Uncategorized"}(Ye||(Ye={}));class Xe extends Error{constructor(e,t,r){super(t),Object.defineProperty(this,"name",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"message",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"cause",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.name=e,this.message=t,this.cause=r}}class Ke extends Xe{}class et{constructor(e,t){Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]});const r=a(n(e,"play").pipe(Y(!1)),n(e,"pause").pipe(Y(!0))),i=n(e,"volumechange").pipe(J((()=>e.volume)),X()),o=n(e,"timeupdate"),c=a(n(e,qe?"loadeddata":"loadedmetadata"),n(e,"playing")),u=n(e,"ended"),d=n(e,"volumechange").pipe(J((()=>e.muted)),X());t.attach(e,{canSeek$:c,ended$:u,progress$:o,volume$:i,muted$:d}),this.disposables.push(Q((()=>t.stream),(t=>{e.srcObject=t}))),this.disposables.push(Q((()=>t.volume),(t=>{e.volume=t}))),this.disposables.push(Q((()=>t.playbackRate),(t=>{e.playbackRate=t}))),this.disposables.push(n(e,"canplay").subscribe((()=>{e.playbackRate!==t.playbackRate&&(e.playbackRate=t.playbackRate)}))),this.disposables.push(n(e,"error").subscribe((()=>{e.error&&(console.error(e.error),t.error=new Ke("MEDIA_ERROR",e.error.message,e.error))}))),this.disposables.push(n(e,"seeking").subscribe((()=>{V((()=>{t.behavior&&(t.behavior.loading=!0)}))}))),this.disposables.push(n(e,"pause").subscribe((()=>{V((()=>{t.behavior&&(t.behavior.loading=!1)}))})));const h=new s;let m=!1;this.disposables.push(a(Je((()=>t.paused)),h).pipe(K((t=>(m=t,t&&e.paused||!t&&!e.paused?l:t?(e.pause(),l):e.play().catch((e=>console.error(e))))))).subscribe((e=>{e!==m&&h.next(e)}))),this.disposables.push(r.subscribe((e=>{(e&&!t.paused||!e&&t.paused)&&h.next(t.paused)}))),this.disposables.push(n(e,"seeked").subscribe((()=>{t.paused||h.next(!1)})))}dispose(){this.disposables.forEach((e=>{e instanceof o?e.closed||e.unsubscribe():e()}))}}class tt{constructor(e,t){Object.defineProperty(this,"player",{enumerable:!0,configurable:!0,writable:!0,value:e}),Object.defineProperty(this,"video",{enumerable:!0,configurable:!0,writable:!0,value:t}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"loading",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"seek",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(!this.player.chunk)return;const t=this.player.clip&&this.player.clip.isTimelapse?1e3*this.player.chunk.duration/(+this.player.chunk.endTime-+this.player.chunk.startTime):1,r=(+e-+this.player.chunk.startTime)/1e3*t;this.video.currentTime=r}}),this.playNextChunkOnComplete(),this.reactToChunk(),this.initLoadingTimeout(),H(this,{loading:U,error:U})}getCurrentTime(){const e=this.player.chunk;if(!e)return null;const{clip:t}=this.player,r=t&&t.isTimelapse?(+e.endTime-+e.startTime)/this.video.duration:1e3;return new Date(+e.startTime+this.video.currentTime*r)}reactToChunk(){this.disposables.push(Q((()=>this.player.chunk),(e=>{if(!e)return this.video.pause(),this.video.removeAttribute("src"),void this.video.load();this.loading=!0,this.video.src=e.streamUrl,this.video.playbackRate=this.player.playbackRate}),{fireImmediately:!0}))}playNextChunkOnComplete(){this.disposables.push(this.player.ended$.subscribe((()=>{const{currentTime:e}=this.player;if(e)if(this.player.clip&&this.player.clip.isTimelapse){const{archives:t}=this.player.clip;if(t){const r=t.find((t=>t.startTime>=e));if(!r||r===this.player.chunk)return;return void this.player.changeMedia({time:null==r?void 0:r.startTime,chunk:r})}}else this.player.changeMedia({time:new Date(+this.player.chunk.endTime+1)});else console.warn("Couldn't jump to the next chunk. Current player time is unknown")})))}initLoadingTimeout(){this.disposables.push(Je((()=>this.loading),!0).pipe(ee((e=>e?Je((()=>this.loading),!0).pipe(te(3e4)):l))).subscribe((()=>{this.error=new Ke("PLAYBACK_TIMEOUT_ERROR","playback timeout",{timeout:Math.round(30)})})))}resetVideo(){const{video:e}=this;e.pause(),e.removeAttribute("src"),e.load()}dispose(){this.disposables.forEach((e=>{e instanceof o?e.closed||e.unsubscribe():e()})),this.resetVideo(),this.player=null}}class rt{constructor(e,t){Object.defineProperty(this,"player",{enumerable:!0,configurable:!0,writable:!0,value:e}),Object.defineProperty(this,"video",{enumerable:!0,configurable:!0,writable:!0,value:t}),Object.defineProperty(this,"live",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"loading",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"availabilityStartTime",{enumerable:!0,configurable:!0,writable:!0,value:-1}),this.initLoadingTimeout(),this.reactToCamera(),this.catchUpAfterPause(),H(this,{loading:U,error:U})}goLive(){this.video.currentTime=this.video.seekable.end(0)}getCurrentTime(){return this.availabilityStartTime<0&&this.updateAvailabilityStartTime(),new Date(this.availabilityStartTime+1e3*this.video.currentTime)}updateAvailabilityStartTime(){this.video.seekable.length&&(this.availabilityStartTime=Date.now()-1e3*this.video.seekable.end(0))}getDateRange(){const{availabilityStartTime:e}=this;if(e<0)return null;if(!this.video.seekable.length)return null;return[new Date(e+1e3*this.video.seekable.start(0)),new Date(e+1e3*this.video.seekable.end(0))]}seek(e){this.live=!1,this.availabilityStartTime<0&&(this.updateAvailabilityStartTime(),this.availabilityStartTime<0)?this.player.seekTime=e:this.video.currentTime=(+e-+this.availabilityStartTime)/1e3}initLoadingTimeout(){this.disposables.push(Je((()=>this.loading),!0).pipe(ee((e=>e?Je((()=>this.loading),!0).pipe(te(3e4)):l))).subscribe((()=>{V((()=>{this.error=new Ke("PLAYBACK_TIMEOUT_ERROR","playback timeout",{timeout:Math.round(30)})}))})))}reactToCamera(){this.disposables.push(Q((()=>({streamUrl:this.player.camera.streamUrl})),(()=>{const e=this.player.camera,{streamUrl:t}=e.raw;V((()=>{this.loading=!0})),this.availabilityStartTime=-1,this.video.src="",t?this.video.src=t:V((()=>{this.player.camera.isOnline?this.error=new Ke("NO_PLAYABLE_STREAM_ERROR","no playable stream"):this.error=new Ke("CAMERA_OFFLINE_ERROR","camera offline")}))}),{fireImmediately:!0}))}catchUpAfterPause(){this.disposables.push(n(this.video,"play").pipe(re((()=>this.live))).subscribe((()=>{console.log("unpaused live HLS"),this.goLive()})))}dispose(){this.disposables.forEach((e=>{e instanceof o?e.closed||e.unsubscribe():e()}))}}var it;!function(e){e.Initial="initial",e.InitiallyPaused="initially-paused",e.Playing="playing",e.Paused="paused",e.Reconnecting="reconnecting",e.Stalled="stalled",e.Error="error",e.Failed="failed"}(it||(it={}));const at=3e4;class nt{constructor(e,t,r){Object.defineProperty(this,"player",{enumerable:!0,configurable:!0,writable:!0,value:e}),Object.defineProperty(this,"video",{enumerable:!0,configurable:!0,writable:!0,value:r}),Object.defineProperty(this,"hlsPlayer",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"live",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"loading",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:it.Initial}),Object.defineProperty(this,"seek",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(!this.hlsPlayer)return;const t=this.getPlayingFragment();if(!(null==t?void 0:t.relurl))return void(this.player.seekTime=e);const r=+t.relurl.substring(0,t.relurl.length-3)-1e3*t.start;this.video.currentTime=(+e-r)/1e3,this.live=!1}}),Object.defineProperty(this,"getDateRange",{enumerable:!0,configurable:!0,writable:!0,value:()=>{if(!this.hlsPlayer)return null;const e=this.video.seekable;if(!e.length)return null;const t=e.start(0),r=e.end(e.length-1),i=this.getPlayingFragment();if(!(null==i?void 0:i.relurl))return null;const a=+i.relurl.substring(0,i.relurl.length-3)-1e3*i.start;return[new Date(1e3*t+a),new Date(1e3*r+a)]}}),Object.defineProperty(this,"goLive",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.seek(new Date),this.live=!0}}),H(this,{hlsPlayer:U.ref,goLive:!0,live:U,loading:U,error:U,state:U,seek:B,dispose:B}),this.live=t,this.disposables.push(Je((()=>this.hlsPlayer),!0).pipe(ee((e=>e?new i((t=>{e.on(de.Events.ERROR,((e,r)=>{t.next(r)}))})):l))).subscribe((e=>{console.error(e),V((()=>{"bufferAddCodecError"!==e.details?e.fatal&&(e.type===de.ErrorTypes.MEDIA_ERROR&&this.hlsPlayer&&this.hlsPlayer.recoverMediaError(),this.error=new Ke("PLAYER_ERROR","HLS error",e)):this.error=new Ke("PLAYER_ERROR","HLS error",e)}))}))),null===e.seekTime&&(this.live=!0),this.initDelayCompensation(),this.initPlayerState(),this.initLoadingTimeout(),this.reactToCamera(),this.catchUpAfterPause()}initDelayCompensation(){this.disposables.push(Je((()=>this.live),!0).pipe(ee((()=>this.live?Je((()=>this.state),!0).pipe(ee((e=>e!==it.Playing?l:c(5e3+5e3*Math.random(),3e4)))):l))).subscribe((()=>{const e=this.getDateRange(),{currentTime:t}=this.player;e&&t&&+e[1]-+t>6e4&&this.goLive()})))}initPlayerState(){this.disposables.push(this.player.progress$.pipe(ie((()=>{this.state===it.Playing||this.player.paused||V((()=>this.state=it.Playing))})),te(2e3),re((()=>this.state===it.Playing))).subscribe((()=>{V((()=>this.state=it.Stalled))}))),this.disposables.push(Q((()=>this.player.paused),(()=>{this.player.paused&&(this.state=it.Paused)})))}getPlayingFragment(){var e,t,r;return null!==(r=null===(t=null===(e=this.hlsPlayer)||void 0===e?void 0:e.streamController)||void 0===t?void 0:t.fragPlaying)&&void 0!==r?r:null}getCurrentTime(){if(!this.hlsPlayer)return null;const e=this.getPlayingFragment();return(null==e?void 0:e.relurl)?new Date(+e.relurl.substring(0,e.relurl.length-3)+1e3*(this.video.currentTime-e.start)):null}initLoadingTimeout(){this.disposables.push(Je((()=>this.loading),!0).pipe(ee((e=>e?Je((()=>this.loading),!0).pipe(te(at)):l))).subscribe((()=>{V((()=>{this.player.camera.isOnline?this.error=new Ke("PLAYBACK_TIMEOUT_ERROR","playback timeout",{timeout:Math.round(30)}):this.error=new Ke("CAMERA_OFFLINE_ERROR","camera is offline")}))}))),this.disposables.push(Je((()=>this.state),!0).pipe(ee((e=>e!==it.Stalled?l:c(at)))).subscribe((()=>{V((()=>{this.player.camera.isOnline?this.error||(this.error=new Ke("PLAYBACK_TIMEOUT_ERROR","playback timeout",{timeout:Math.round(30)})):this.error=new Ke("CAMERA_OFFLINE_ERROR","camera is offline")}))})))}reactToCamera(){const{player:e}=this;this.disposables.push(Q((()=>({streamUrl:e.camera.streamUrl})),(({streamUrl:t})=>{V((()=>{this.loading=!0})),this.hlsPlayer&&this.hlsPlayer.destroy(),t?(this.hlsPlayer=new de,this.hlsPlayer.attachMedia(this.video),this.hlsPlayer.loadSource(t)):V((()=>{e.camera.isOnline?this.error=new Ke("NO_PLAYABLE_STREAM_ERROR","no playable stream"):this.error=new Ke("CAMERA_OFFLINE_ERROR","camera is offline")}))}),{fireImmediately:!0}))}catchUpAfterPause(){this.disposables.push(n(this.video,"play").pipe(re((()=>this.live))).subscribe(this.goLive))}dispose(){this.disposables.forEach((e=>{e instanceof o?e.closed||e.unsubscribe():e()})),this.hlsPlayer&&this.hlsPlayer.destroy(),this.hlsPlayer=null,this.player=null}}globalThis.Hls=de;const st=new Map;class lt{constructor(e){Object.defineProperty(this,"url",{enumerable:!0,configurable:!0,writable:!0,value:e}),Object.defineProperty(this,"connection",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"sessionId",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"keepAliveIntervalId",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"pluginsCount",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"registerPlugin",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.pluginsCount++}}),Object.defineProperty(this,"deregisterPlugin",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.pluginsCount--}}),Object.defineProperty(this,"keepAlive",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.connection.send(JSON.stringify({janus:"keepalive",session_id:this.sessionId,transaction:this.randomString(12)}))}}),H(this,{sessionId:U,pluginsCount:U,registerPlugin:B,deregisterPlugin:B}),this.init()}async init(){const{url:e}=this;this.connection=new he(e,"janus-protocol",{maxReconnectionDelay:3e4}),this.startKeepingAlive(),this.stopWhenNoLongerNeeded(),this.connection.addEventListener("message",(({data:e})=>{const t=JSON.parse(e);"error"===t.janus&&458===t.error.code&&this.createSession()})),await new Promise((e=>{const t=()=>{this.connection.removeEventListener("open",t),e(void 0)};this.connection.addEventListener("open",t)})),this.createSession()}stopWhenNoLongerNeeded(){Je((()=>this.pluginsCount),!0).pipe(ee((e=>e?l:c(1e4)))).subscribe((()=>{this.dispose()}))}dispose(){this.connection.close(),st.delete(this.url)}async createSession(){const e=this.randomString(12);this.connection.send(JSON.stringify({janus:"create",transaction:e}));const t=await new Promise(((t,r)=>{const i=a=>{const n=JSON.parse(a.data);if(n.transaction===e){if(this.connection.removeEventListener("message",i),"success"===n.janus)return t(n.data.id);r(n.janus.error)}};this.connection.addEventListener("message",i)}));V((()=>this.sessionId=t))}startKeepingAlive(){$((()=>!!this.sessionId),(()=>{n(this.connection,"open").pipe(ae(null),ee((()=>c(0,3e4).pipe(ne(n(this.connection,"close")))))).subscribe(this.keepAlive)}))}randomString(e){const t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let r="";for(let i=0;i<e;i++){const e=Math.floor(62*Math.random());r+=t.substring(e,e+1)}return r}}class ot extends Xe{}class ct{constructor(e,r,i,s=["tcp"]){Object.defineProperty(this,"allowedIceCandidateProtocols",{enumerable:!0,configurable:!0,writable:!0,value:s}),Object.defineProperty(this,"server",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"pc",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"pluginHandleId",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"stream",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"stats",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"cameraId",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"pin",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"connectionState",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"disposeDelayedStream",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"startTransaction",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"statsRequest",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"onInit",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(!e)return;const{cameraId:t,pin:r}=this;this.pc&&(this.disposeDelayedStream&&(this.disposeDelayedStream(),this.disposeDelayedStream=null),this.safeCloseRTCPeerConnection(this.pc));this.pc=new RTCPeerConnection({iceServers:[{urls:"stun:stun.l.google.com:19302"}],bundlePolicy:"max-bundle"}),this.server.connection.send(JSON.stringify({janus:"message",handle_id:e,session_id:this.server.sessionId,body:{request:"watch",id:t,pin:r},transaction:this.server.randomString(12)}))}}),Object.defineProperty(this,"pause",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.server.connection.send(JSON.stringify({janus:"message",handle_id:this.pluginHandleId,session_id:this.server.sessionId,body:{request:"pause",id:this.cameraId},transaction:this.server.randomString(12)}))}}),Object.defineProperty(this,"resume",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.server.connection.send(JSON.stringify({janus:"message",handle_id:this.pluginHandleId,session_id:this.server.sessionId,body:{request:"start",id:this.cameraId},transaction:this.server.randomString(12)}))}}),Object.defineProperty(this,"onmessage",{enumerable:!0,configurable:!0,writable:!0,value:({data:e})=>{var t;const{pluginHandleId:r}=this;if(!r)return;const i=JSON.parse(e);return"error"===i.janus&&i.transaction===this.startTransaction?(this.error=new ot("STREAMING_ERROR",i.error.reason,i.error),console.error(i.error)):"sender"in i&&i.sender===r?"hangup"===i.janus?("ICE FAILED"===i.reason.toUpperCase()?this.error=new ot("ICE_FAILED",i.reason,i):this.error=new ot("STREAMING_ERROR",i.reason,i),console.error(i.reason)):"event"===i.janus&&(null===(t=i.plugindata)||void 0===t?void 0:t.data)&&"error"in i.plugindata.data?(this.error=new ot("STREAMING_ERROR",i.plugindata.data.error.reason,i.plugindata.data.error),console.error(i.plugindata.data)):void("jsep"in i&&this.onremotedescription(new RTCSessionDescription(i.jsep))):void 0}}),Object.defineProperty(this,"setStream",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.disposeDelayedStream&&this.disposeDelayedStream(),null!==e?this.disposeDelayedStream=$((()=>"completed"===this.connectionState||"connected"===this.connectionState),(()=>{this.stream=e})):this.stream=null}}),Object.defineProperty(this,"initConnectionState",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposables.push(Je((()=>this.pc),!0).pipe(ee((e=>null===e?t(null):n(e,"iceconnectionstatechange").pipe(ae(null),J((()=>e.iceConnectionState)))))).subscribe((e=>{V((()=>this.connectionState=e))})))}}),Object.defineProperty(this,"initTrack",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposables.push(Je((()=>this.pc),!0).pipe(ee((e=>null===e?t(null):a(n(e,"track").pipe(ae(null)),n(e,"addstream").pipe(J((e=>({streams:[e.stream]})))))))).subscribe((e=>{let t=null;null!==e&&(t=e.streams[0],e.track&&(e.track.onended=e=>{this.stream&&this.stream.removeTrack(e.target)})),this.setStream(t)})))}}),Object.defineProperty(this,"autoCollectStats",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposables.push(Je((()=>this.stream),!0).pipe(ee((e=>e?c(0,1e3).pipe(se((()=>this.getStats()))):t(null)))).subscribe(this.updateStats))}}),Object.defineProperty(this,"updateStats",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(e){if(this.stats){const t=e.bytesReceived-this.stats.bytesReceived,r=e.timestamp-this.stats.timestamp;e.bitrate=t/r,e.startTime=this.stats.startTime}else e.startTime=e.timestamp;this.stats=e}else this.stats=null}}),Object.defineProperty(this,"dispose",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposeDelayedStream&&(this.disposeDelayedStream(),this.disposeDelayedStream=null),this.pc&&this.safeCloseRTCPeerConnection(this.pc),this.disposables.forEach((e=>{e instanceof o?e.closed||e.unsubscribe():e()})),this.server.deregisterPlugin(),this.server.connection.send(JSON.stringify({janus:"detach",handle_id:this.pluginHandleId,session_id:this.server.sessionId,transaction:this.server.randomString(12)})),this.pc=null,this.stream=null,this.stats=null,this.error=null}}),H(this,{pc:U.ref,pluginHandleId:U,stream:U.ref,stats:U.ref,error:U.ref,connectionState:U,onmessage:B,setStream:B,updateStats:B,dispose:B}),this.server=function(e){if(st.has(e))return st.get(e);const t=new lt(e);return st.set(e,t),t}(e),this.server.registerPlugin(),this.cameraId=r,this.pin=i,this.autoAttachPlugin(),this.autoCollectStats(),this.initConnectionState(),this.initTrack(),this.disposables.push(Q((()=>this.pluginHandleId),this.onInit,{fireImmediately:!0})),this.disposables.push($((()=>!!this.server.sessionId),(()=>this.disposables.push(n(this.server.connection,"message").subscribe(this.onmessage)))))}async onremotedescription(e){const{pluginHandleId:t}=this,r=this.pc;if(!e.sdp)return;const i=[];if(1===this.allowedIceCandidateProtocols.length){const t=this.allowedIceCandidateProtocols[0],r=e.sdp.split("\r\n");let a="video";const n={video:[],audio:[]};for(const e of r)e.startsWith("a=mid:audio")?a="audio":e.startsWith("a=mid:video")?a="video":e.startsWith("a=candidate")&&n[a].push(e);const s=r.filter((e=>!(e.startsWith("a=candidate")||e.startsWith("a=end-of-candidates")))),l=e=>e.split(/\s+/)[2]===t,o={video:n.video.filter(l),audio:n.audio.filter(l)};e=new RTCSessionDescription({type:"offer",sdp:[...s].join("\r\n")});let c={audio:[],video:[]};o.video.length?c=o:(console.warn(`no video ${t.toUpperCase()} candidates found. Falling back to all candidates`),c=n);for(const e in c)c.hasOwnProperty(e)&&c[e].forEach((t=>{i.push(new RTCIceCandidate({candidate:t.replace(/^a=/,""),sdpMLineIndex:0,sdpMid:e}))}))}try{await r.setRemoteDescription(e),i.forEach((e=>{r.addIceCandidate(e)}));const a=await r.createAnswer();await r.setLocalDescription(a);const n={type:a.type,sdp:a.sdp};this.startTransaction=this.server.randomString(12),this.server.connection.send(JSON.stringify({janus:"message",handle_id:t,session_id:this.server.sessionId,body:{request:"start"},jsep:n,transaction:this.startTransaction}))}catch(e){return console.error(e),void V((()=>{e instanceof Error&&e.message.toLowerCase().includes("failed to set remote offer sdp")?this.error=new ot("SDP_OFFER_FAILED",e.message,e):e instanceof Error&&e.message.toLowerCase().includes("failed to set local answer sdp")?this.error=new ot("SDP_ANSWER_FAILED",e.message,e):this.error=new ot("STREAMING_ERROR",e instanceof Error?e.message:e,e)}))}r.addEventListener("icecandidate",(e=>{e.candidate&&this.server.connection.send(JSON.stringify({janus:"trickle",candidate:e.candidate,handle_id:t,session_id:this.server.sessionId,transaction:this.server.randomString(12)}))}))}autoAttachPlugin(){this.disposables.push(Je((()=>this.server?this.server.sessionId:null),!0).pipe(re(Boolean),ee((()=>{const e=this.server.randomString(12);return this.server.connection.send(JSON.stringify({janus:"attach",plugin:"janus.plugin.streaming",transaction:e,session_id:this.server.sessionId})),n(this.server.connection,"message").pipe(J((({data:e})=>JSON.parse(e))),re((t=>"transaction"in t&&t.transaction===e)),le(1))}))).subscribe((e=>{V((()=>{switch(e.janus){case"success":this.pluginHandleId=e.data.id;break;case"error":this.error=new ot("PLUGIN_INIT_ERROR",e.error.reason,e);break;default:console.error("unexpected message",e)}}))})))}async getStats(){if(!this.pc)return null;this.statsRequest=this.pc.getStats();const e=await this.statsRequest;this.statsRequest=null;const t={};return e.forEach((e=>{if("inbound-rtp"!==e.type||"video"!==e.kind&&"video"!==e.mediaType){if("track"===e.type){const{frameWidth:r,frameHeight:i,framesDropped:a,framesReceived:n}=e;Object.assign(t,{frameWidth:r,frameHeight:i,framesDropped:a,framesReceived:n})}else if("candidate-pair"===e.type)Object.assign(t,{rtt:1e3*e.currentRoundTripTime});else if("ssrc"===e.type){const r={};e.values.forEach((e=>Object.keys(e).forEach((t=>r[t]=e[t]))));const{framesDecoded:i,bytesReceived:a,packetsLost:n,packetsReceived:s,googFrameHeightReceived:l,googFrameWidthReceived:o}=r;Object.assign(t,{frameWidth:+o,frameHeight:+l,framesDecoded:i,bytesReceived:a,packetsLost:n,packetsReceived:s})}}else{const{bytesReceived:r,framesDecoded:i,packetsLost:a,packetsReceived:n,timestamp:s}=e;Object.assign(t,{bytesReceived:r,framesDecoded:i,packetsLost:a,packetsReceived:n,timestamp:s})}})),t}async safeCloseRTCPeerConnection(e){await this.statsRequest,e.close()}}const ut=1e4;class dt{setPlayerState(e){this.state=e}get streamingError(){return this.streamingPlugin?this.streamingPlugin.error:null}get stream(){return this.streamingPlugin?this.streamingPlugin.stream:null}getCurrentTime(){return this.state===it.Playing?new Date:null}constructor(e,t){Object.defineProperty(this,"player",{enumerable:!0,configurable:!0,writable:!0,value:e}),Object.defineProperty(this,"allowedIceCandidateProtocols",{enumerable:!0,configurable:!0,writable:!0,value:t}),Object.defineProperty(this,"streamingPlugin",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"ttff",{enumerable:!0,configurable:!0,writable:!0,value:-1}),Object.defineProperty(this,"live",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"loading",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"transitionToInitialState",{enumerable:!0,configurable:!0,writable:!0,value:()=>{const{webRtcUrl:e,id:t,pin:r}=this.player.camera;V((()=>{this.streamingPlugin&&this.streamingPlugin.dispose(),this.streamingPlugin=new ct(e,t,r,this.allowedIceCandidateProtocols),this.state=it.Initial}))}}),H(this,{streamingPlugin:U.ref,state:U,setPlayerState:B,ttff:U,streamingError:z,stream:z,loading:U,error:U,dispose:B}),this.player=e,RTCPeerConnection?this.disposables.push(this.reactToStream(),...this.initPauseAndResume(),this.reconnectWhenNeeded(),this.fallbackToDvrOnFirstFrameTimeout(),this.fallBackToDvrOnConnectionProblems(),this.initTransitionToReconnecting(),this.setInitialIndication(),this.updateIndicationOnPlaying(),this.updateIndicationOnReconnecting(),this.initFromErrorToPlaying(),this.initFromInitialToPlaying(),this.reactToStreamingError(),this.initTtff(),this.initStats(),this.reactToCamera()):this.state=it.Failed}reconnectWhenNeeded(){return Je((()=>this.state),!0).pipe(u((e=>{if(e!==it.Reconnecting)return l;this.streamingPlugin&&this.streamingPlugin.dispose();const{webRtcUrl:t,id:r,pin:i}=this.player.camera;return V((()=>{this.streamingPlugin=new ct(t,r,i,this.allowedIceCandidateProtocols)})),Je((()=>this.stream),!0).pipe(u((e=>e?Je((()=>{var e,t,r;return null!==(r=null===(t=null===(e=this.streamingPlugin)||void 0===e?void 0:e.stats)||void 0===t?void 0:t.framesDecoded)&&void 0!==r?r:null}),!0).pipe(d(Boolean),h(3e4)):l)),m(1))}))).subscribe({next:()=>{this.setPlayerState(it.Playing)},error:e=>{var t;if(e instanceof p)return console.error("player",this.player.id,"cam",this.player.camera.id,"no frames in 30s after reconnect"),void((null===(t=this.streamingPlugin)||void 0===t?void 0:t.pc)&&["connected","new"].includes(this.streamingPlugin.pc.iceConnectionState)?(console.warn("player",this.player.id,"cam",this.player.camera.id,"fallback to DVR"),this.state=it.Stalled):console.warn("player",this.player.id,"cam",this.player.camera.id,"waiting for reconnect"));V((()=>{this.setPlayerState(it.Error),this.error=e})),console.error(e)}})}fallbackToDvrOnFirstFrameTimeout(){return Je((()=>this.state),!0).pipe(u((e=>e!==it.Initial?l:Je((()=>this.stream),!0).pipe(u((e=>e?Je((()=>{var e,t,r;return null!==(r=null===(t=null===(e=this.streamingPlugin)||void 0===e?void 0:e.stats)||void 0===t?void 0:t.framesDecoded)&&void 0!==r?r:null}),!0).pipe(d(Boolean),h(ut)):l)),m(1))))).subscribe({error:e=>{if(e instanceof p)return console.error("player",this.player.id,"cam",this.player.camera.id,"no frames in 10s. Fallback to DVR"),void this.setPlayerState(it.Stalled);V((()=>{this.setPlayerState(it.Error),this.error=e})),console.error(e)}})}fallBackToDvrOnConnectionProblems(){return Je((()=>this.state),!0).pipe(u((e=>e!==it.Initial?l:Je((()=>{var e;return null===(e=this.streamingPlugin)||void 0===e?void 0:e.connectionState}),!0).pipe(u((e=>e&&"connected"!==e&&"new"!==e?c(2e4).pipe(b((()=>v((()=>new Ke("CONNECTION_TIMEOUT_ERROR","Connection timeout")))))):l)))))).subscribe({error:e=>{if(e instanceof Ke&&"CONNECTION_TIMEOUT_ERROR"===e.name)return console.error("player",this.player.id,"cam",this.player.camera.id,"no connection established in 20s. Fallback to DVR"),void this.setPlayerState(it.Stalled);V((()=>{this.state=it.Error,this.error=e})),console.error(e)}})}initTransitionToReconnecting(){return Je((()=>this.state),!0).pipe(u((e=>e!==it.Playing?l:Je((()=>{var e,t,r;return null!==(r=null===(t=null===(e=this.streamingPlugin)||void 0===e?void 0:e.stats)||void 0===t?void 0:t.framesDecoded)&&void 0!==r?r:null}),!0).pipe(d(Boolean),f(ut))))).subscribe((()=>{console.log("player",this.player.id,"cam",this.player.camera.id,"no new frames in 10000s"),this.setPlayerState(it.Reconnecting)}))}setInitialIndication(){return Q((()=>this.state),(e=>{e===it.Initial&&V((()=>{this.loading=!0,this.error=null}))}))}updateIndicationOnPlaying(){return Q((()=>this.state),(e=>{e===it.Playing&&V((()=>{this.loading=!1,this.error=null}))}))}updateIndicationOnReconnecting(){return Q((()=>this.state),(e=>{e===it.Reconnecting&&V((()=>{this.loading=!0}))}))}reactToStreamingError(){return Q((()=>this.streamingError),(e=>{if(!e)return;console.error(e);if("PLUGIN_INIT_ERROR"===e.name||"ERROR_PROCESSING_SDP"===e.name||"ICE_FAILED"===e.name||"SDP_OFFER_FAILED"===e.name||"SDP_ANSWER_FAILED"===e.name)return console.warn("player",this.player.id,"cam",this.player.camera.id,"fallback to DVR"),this.error=new Ke("STREAMING_ERROR",e.message,e),void this.setPlayerState(it.Stalled);V((()=>{this.error=new Ke("STREAMING_ERROR",e.message,e),this.state=it.Error}))}))}initTtff(){const e=Date.now();return Je((()=>this.state),!0).pipe(d((e=>e===it.Playing)),m(1)).subscribe((()=>{this.ttff=Date.now()-e}))}initFromErrorToPlaying(){return Je((()=>this.state),!0).pipe(u((e=>e!==it.Error?l:Je((()=>this.stream),!0).pipe(u((e=>e?Je((()=>{var e;return this.streamingPlugin?null===(e=this.streamingPlugin.stats)||void 0===e?void 0:e.framesDecoded:null})):l)),d(Boolean),m(1))))).subscribe((()=>{this.setPlayerState(it.Playing)}))}initFromInitialToPlaying(){return Je((()=>this.state),!0).pipe(u((e=>e!==it.Initial?l:Je((()=>this.stream),!0).pipe(u((e=>e?Je((()=>{var e,t,r;return null!==(r=null===(t=null===(e=this.streamingPlugin)||void 0===e?void 0:e.stats)||void 0===t?void 0:t.framesDecoded)&&void 0!==r?r:null})):l)),d(Boolean),m(1))))).subscribe((()=>{this.setPlayerState(it.Playing)}))}initPauseAndResume(){return[Je((()=>this.state),!0).pipe(d((e=>e===it.Playing||e===it.Paused))).subscribe((e=>{var t,r;e===it.Playing?null===(t=this.streamingPlugin)||void 0===t||t.resume():null===(r=this.streamingPlugin)||void 0===r||r.pause()})),Je((()=>this.state),!0).pipe(u((e=>e!==it.Playing?l:Je((()=>this.player.paused)).pipe(d(Boolean))))).subscribe((()=>{this.setPlayerState(it.Paused)})),Je((()=>this.state),!0).pipe(u((e=>e!==it.Paused?l:Je((()=>this.player.paused)).pipe(d((e=>!e)))))).subscribe((()=>{this.setPlayerState(it.Playing)})),Je((()=>this.state),!0).pipe(u((e=>e!==it.Initial?l:Je((()=>this.player.paused)).pipe(d((e=>e)))))).subscribe((()=>{var e;null===(e=this.streamingPlugin)||void 0===e||e.dispose(),this.loading=!1,this.setPlayerState(it.InitiallyPaused)})),Je((()=>this.state),!0).pipe(u((e=>e!==it.InitiallyPaused?l:Je((()=>this.player.paused)).pipe(d((e=>!e)))))).subscribe(this.transitionToInitialState)]}reactToCamera(){return Q((()=>({id:this.player.camera.id,url:this.player.camera.webRtcUrl,pin:this.player.camera.pin,isOnline:this.player.camera.isOnline,enabled:this.player.camera.enabled})),(({id:e,isOnline:t},r)=>{this.streamingPlugin&&this.streamingPlugin.dispose(),V((()=>{t?this.player.paused&&e===(null==r?void 0:r.id)?this.state=it.InitiallyPaused:this.transitionToInitialState():(this.error=new Ke("CAMERA_OFFLINE_ERROR","Camera is offline"),this.state=it.Error,this.streamingPlugin=null)}))}),{fireImmediately:!0})}reactToStream(){return Q((()=>this.stream),(e=>{V((()=>{if(!e){if(this.state===it.Reconnecting)return;return void(this.player.stream=null)}this.player.stream=e;const t=e.getVideoTracks();t&&0!==t.length||(console.warn("player",this.player.id,"cam",this.player.camera.id,"no video",t),this.error=new Ke("NO_VIDEO_TRACK_ERROR","No video track"),this.state=it.Error)}))}))}initStats(){return Q((()=>this.streamingPlugin?this.streamingPlugin.stats:null),(e=>{this.player.stats=e}))}dispose(){this.disposables.forEach((e=>{e instanceof o?e.closed||e.unsubscribe():e()})),this.player.stream&&(this.player.stream=null),this.streamingPlugin&&this.streamingPlugin.dispose(),this.streamingPlugin=null,this.player.stats=null,this.player=null}}const ht=k.createContext(null);class mt{constructor(e){Object.defineProperty(this,"cameraId",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"streamUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"dashStreamUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"startTime",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"endTime",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"length",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"isLive",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"isDvr",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"hasDvr",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"rtmpStreamUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"managed",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"setBounds",{enumerable:!0,configurable:!0,writable:!0,value:e=>{[this.startTime,this.endTime]=e}}),H(this,{startTime:U,endTime:U,setBounds:B}),this.streamUrl=e.streamUrl,this.dashStreamUrl=e.dashStreamUrl,this.startTime=e.startTime,this.endTime=e.endTime,this.length=e.length,this.cameraId=e.cameraId}}var pt;!function(e){e.Fit="contain",e.Stretch="fill"}(pt||(pt={}));const bt=(()=>{let e=0;return()=>++e})();class vt{get loading(){var e,t;return null!==(t=null===(e=this.behavior)||void 0===e?void 0:e.loading)&&void 0!==t&&t}constructor({camera:e,startTime:t,endTime:r,clip:i,archivesStore:a,behaviors:n}){Object.defineProperty(this,"id",{enumerable:!0,configurable:!0,writable:!0,value:bt()}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"liveChunk",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"currentTime",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"targetTime",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"chunk",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"paused",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"playbackRate",{enumerable:!0,configurable:!0,writable:!0,value:1}),Object.defineProperty(this,"volume",{enumerable:!0,configurable:!0,writable:!0,value:1}),Object.defineProperty(this,"muted",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"videoResizeMode",{enumerable:!0,configurable:!0,writable:!0,value:pt.Stretch}),Object.defineProperty(this,"camera",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"stats",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"mode",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"behavior",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"transform",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"width",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"height",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"chunkRequest",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"loopRange",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"loopRangeEnabled",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"restoreFromDvrEnabled",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"pendingBehavior",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"video",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"clip",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"startTime",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"endTime",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"stream",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"canSeek",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"canSeek$",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"progress$",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"muted$",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"volume$",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"ended$",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"archivesStore",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"behaviors",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"seekTime",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"seek",{enumerable:!0,configurable:!0,writable:!0,value:e=>{"WebRTC"!==this.mode?this.behavior&&this.behavior.seek?this.behavior.seek(e):console.warn("incorrect call of seek"):console.warn("cannot seek in live mode")}}),Object.defineProperty(this,"changeMedia",{enumerable:!0,configurable:!0,writable:!0,value:({time:e,chunk:t,backward:r=!1})=>{if(this.restoreFromDvrEnabled=!1,this.targetTime=null!=e?e:null,this.loopRange&&e>=this.loopRange.end&&(this.loopRangeEnabled=!1),this.loopRange&&e<this.loopRange.end&&(this.loopRangeEnabled=!0),!t&&this.chunk&&this.chunk.startTime<=e&&(this.chunk.endTime>=e||this.chunk.isLive)&&(t=this.chunk),!t)return this.chunkRequest={time:e,backward:r},this.canSeek=!1,void(this.mode="archive");if(t){if(this.chunkRequest=null,this.paused&&(this.paused=!1),"WebRTC"!==this.mode&&t===this.chunk&&this.canSeek)return this.seek(e);this.canSeek=!1,this.error=null,this.mode=t.isLive?"DVR":"archive",this.chunk=t,this.seekTime=e}}}),Object.defineProperty(this,"seekBackward",{enumerable:!0,configurable:!0,writable:!0,value:e=>{var t;if(!this.currentTime&&this.targetTime)return;!this.currentTime&&(null===(t=this.behavior)||void 0===t?void 0:t.live)&&this.changeMedia({time:new Date(Date.now()-e),backward:!0});const r=this.targetTime||this.currentTime;if(!r)return;const i=new Date(+r-e);this.changeMedia({time:i,backward:!0})}}),Object.defineProperty(this,"seekForward",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(!this.currentTime&&this.targetTime)return;const t=this.targetTime||this.currentTime;if(!t)return;const r=new Date(+t+e);this.liveChunk&&r>this.liveChunk.endTime?this.goLive():this.changeMedia({time:r,backward:!1})}}),Object.defineProperty(this,"goLive",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.seekTime=null,this.playbackRate=1,this.paused=!1,this.behaviors.WebRTC?this.mode="WebRTC":"DVR"===this.mode?this.behavior&&this.behavior.goLive&&this.behavior.goLive():(this.mode="DVR",this.chunk=this.liveChunk||null)}}),Object.defineProperty(this,"setCamera",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.camera=e}}),Object.defineProperty(this,"setCameraAndStartTime",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{this.camera=e,this.startTime=t}}),Object.defineProperty(this,"toggleResizeMode",{enumerable:!0,configurable:!0,writable:!0,value:()=>{const e=Object.keys(pt),t=(Object.values(pt).indexOf(this.videoResizeMode)+1)%e.length;this.videoResizeMode=pt[e[t]]}}),Object.defineProperty(this,"setVideoResizeMode",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.videoResizeMode=e}}),Object.defineProperty(this,"toggleMute",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.muted=!this.muted}}),Object.defineProperty(this,"setStartTime",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.startTime=e}}),Object.defineProperty(this,"setVolume",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.volume=e}}),Object.defineProperty(this,"setPlaybackRate",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.playbackRate=e}}),Object.defineProperty(this,"togglePlayback",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.paused=!this.paused}}),Object.defineProperty(this,"play",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.paused=!1}}),Object.defineProperty(this,"pause",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.paused=!0}}),Object.defineProperty(this,"detach",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.behavior&&(this.behavior.dispose(),this.behavior=null),this.disposables.forEach((e=>{e instanceof o?e.closed||e.unsubscribe():e()})),this.video=null}}),Object.defineProperty(this,"initFallbackToDVR",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposables.push(Je((()=>this.behavior),!0).pipe(u((e=>"WebRTC"===this.mode&&e?Je((()=>e.state),!0).pipe(d((e=>e===it.Stalled||e===it.Failed))):l))).subscribe((e=>{V((()=>{this.seekTime=null,this.mode="DVR",this.chunk=this.liveChunk||null,this.restoreFromDvrEnabled=e!==it.Failed}))})))}}),W(this,{behavior:U.ref,camera:U.ref,chunk:U.ref,chunkRequest:U.ref,liveChunk:U.ref,loopRange:U.ref}),this.camera=e,this.startTime=t||null,this.endTime=r||null,this.clip=i,this.archivesStore=a,this.behaviors=n,i?(this.loopRange={start:i.startTime,end:i.endTime},this.loopRangeEnabled=!0):this.loopRange=null,this.disposables.push(Q((()=>{var e;return null===(e=this.behavior)||void 0===e?void 0:e.error}),(()=>{var e,t;this.error=null!==(t=null===(e=this.behavior)||void 0===e?void 0:e.error)&&void 0!==t?t:null})))}attach(e,{canSeek$:t,progress$:r,muted$:i,volume$:a,ended$:n}){this.video=e,this.canSeek$=t,this.progress$=r,this.ended$=n,this.muted$=i,this.volume$=a,this.reactToVolumeChange(),this.initPlayerBehavior(),this.seekAfterReady(),this.stopLoadingOnError(),this.initChunkRequest(),this.initLiveChunkUpdate(),this.initCurrentTime(),this.initSameChunkRequestFix(),this.setupLiveChunk(),this.replaceErrorMessageOnOffline(),this.disposables.push(this.canSeek$.subscribe((()=>this.canSeek=!0))),this.disposables.push(Q((()=>({camera:this.camera,startTime:this.startTime})),(({startTime:e})=>{V((()=>{this.chunk&&this.chunk.cameraId!==this.camera.id&&(this.chunk=null,this.currentTime=null),this.chunkRequest=null,this.setupLiveChunk(),e?this.changeMedia({time:e}):this.goLive()}))}))),this.clip||this.startTime||this.mode||this.goLive(),!this.clip&&this.startTime&&this.changeMedia({time:this.startTime}),this.initPlayableRange(),this.initUpgradeToWebRtcWhenCameraIsBackOnline(),this.initUpgradeToWebRtcAfterFallbackToDvr(),this.initFallbackToDVR()}seekAfterReady(){this.disposables.push(this.canSeek$.pipe(u((()=>a(t(null),this.progress$.pipe(m(1)))))).pipe(g((()=>this.seekTime)),d(Boolean)).subscribe((e=>{this.seekTime=null,this.seek(e)})))}stopLoadingOnError(){this.disposables.push(Q((()=>this.error),(e=>{e&&this.behavior&&(this.behavior.loading=!1)})))}replaceErrorMessageOnOffline(){this.disposables.push(Je((()=>this.error),!0).pipe(u((e=>e?Je((()=>this.camera.isOnline),!1).pipe(d((e=>!e))):l))).subscribe((()=>{this.error instanceof Ke&&"CAMERA_OFFLINE_ERROR"===this.error.name||(this.error=new Ke("CAMERA_OFFLINE_ERROR","camera is offline"))})))}initCurrentTime(){this.disposables.push(this.progress$.pipe(d((()=>!this.seekTime&&!this.chunkRequest)),d((()=>!this.paused))).subscribe((()=>{if(!this.behavior)return;const e=this.behavior.getCurrentTime();e&&V((()=>{this.behavior&&(this.behavior.loading=!1),this.error=null,this.currentTime=e,this.targetTime=null}))})))}initPlayableRange(){this.disposables.push(Je((()=>{var e,t;return{enabled:this.loopRangeEnabled,paused:this.paused,startTime:null===(e=this.loopRange)||void 0===e?void 0:e.start,endTime:null===(t=this.loopRange)||void 0===t?void 0:t.end}}),!0).pipe(u((({enabled:e,paused:t,startTime:r,endTime:i})=>e&&!t&&i&&r?Je((()=>this.currentTime),!0).pipe(y(),d((([e,t])=>null!==e&&null!==t&&e<i&&t>=i))):l))).subscribe((()=>{this.loopRange&&this.changeMedia({time:this.loopRange.start})})))}initSameChunkRequestFix(){this.disposables.push(this.progress$.pipe(d((()=>{var e;return!this.chunkRequest&&!!this.seekTime&&!(null===(e=this.chunk)||void 0===e?void 0:e.isLive)}))).subscribe((()=>{this.seekTime&&this.chunk&&this.chunk.startTime<=this.seekTime&&this.chunk.endTime>=this.seekTime&&(this.seek(this.seekTime),this.seekTime=null)})))}initLiveChunkUpdate(){this.disposables.push(Je((()=>this.liveChunk),!0).pipe(u((e=>e?E(250):l))).subscribe((()=>{V((()=>{if("DVR"===this.mode&&this.behavior&&"function"==typeof this.behavior.getDateRange&&this.liveChunk){const e=this.behavior.getDateRange();if(!e)return;this.liveChunk.setBounds(e)}"DVR"!==this.mode&&this.liveChunk&&!this.liveChunk.managed&&this.liveChunk.setBounds([new Date(Date.now()-1e3*this.camera.raw.dvrWindowLength),new Date])}))})))}initChunkRequest(){this.disposables.push(Je((()=>this.chunkRequest),!0).pipe(u((e=>{var r;if(null===e)return l;const{time:i,backward:a}=e;if((null===(r=this.clip)||void 0===r?void 0:r.isTimelapse)&&this.clip.archives){const{archives:e}=this.clip,r=e.find((e=>e.startTime<=i&&e.endTime>=i));if(r)return t({chunk:r,time:i,backward:a});if(a){const r=e.find((e=>e.endTime<i));return t(r?{chunk:r,time:i,backward:a}:{chunk:null,time:i,backward:a})}{const r=e.find((e=>e.startTime>i));return t(r?{chunk:r,time:i,backward:a}:{chunk:null,time:i,backward:a})}}const n=this.camera.id,s=this.archivesStore.getChunks({cameraId:this.camera.id,from:i,to:i})[0];if(s)return t({chunk:s,time:i,backward:a});return(a?this.archivesStore.fetchPrevChunk({cameraId:n,time:i}):this.archivesStore.fetchNextChunk({cameraId:n,time:i})).pipe(g((e=>e?a?i<=e.endTime?{chunk:e,time:i,backward:a}:{chunk:e,time:new Date(+e.endTime-5e3),backward:a}:{chunk:e,time:new Date(Math.max(+e.startTime,+i)),backward:a}:this.liveChunk&&this.liveChunk.startTime<i?{chunk:this.liveChunk,time:i,backward:a}:{chunk:null,time:i,backward:a})))}))).subscribe((({chunk:e,time:t,backward:r})=>{V((()=>{if(!e){if(r||!this.liveChunk)return void(this.chunkRequest=null);e=this.liveChunk}this.currentTime=e.startTime,this.changeMedia({chunk:e,time:t})}))})))}setupLiveChunk(){const{camera:e}=this;e.streamUrl&&e.raw.dvrWindowLength?this.liveChunk&&this.liveChunk.cameraId===e.id||V((()=>{this.liveChunk=new mt({cameraId:e.id,endTime:new Date,startTime:new Date(Date.now()-e.dvrWindowLength),streamUrl:e.streamUrl,dashStreamUrl:e.dashStreamUrl,length:e.dvrWindowLength})})):this.liveChunk=null}initPlayerBehavior(){this.disposables.push(Je((()=>this.mode),!0).pipe(w((async e=>{if(this.behavior){const e=this.behavior;V((()=>this.behavior=null)),await e.dispose()}return e}))).subscribe((e=>{e&&V((()=>{if("WebRTC"===e&&this.pendingBehavior)return this.behavior=this.pendingBehavior,void(this.pendingBehavior=null);const t=this.behaviors[e];this.behavior=t?t(this):null}))})))}reactToVolumeChange(){this.disposables.push(this.volume$.subscribe(this.setVolume))}setTransform(e){this.transform=e}initUpgradeToWebRtcWhenCameraIsBackOnline(){this.behaviors.WebRTC&&this.disposables.push(Je((()=>{var e;return!this.paused&&"DVR"===this.mode&&(null===(e=this.behavior)||void 0===e?void 0:e.live)}),!0).pipe(u((e=>e?Je((()=>this.camera.isOnline)).pipe(u((e=>e?(this.goLive(),l):l))):l))).subscribe())}initUpgradeToWebRtcAfterFallbackToDvr(){if(!this.behaviors.WebRTC)return;let e=null;this.disposables.push(Je((()=>({enabled:this.restoreFromDvrEnabled,mode:this.mode,paused:this.paused}))).pipe(u((({mode:r,enabled:i,paused:a})=>"DVR"!==r||!i||a?(e&&(e.dispose(),e=null),l):t(null).pipe(P(1e4),u((()=>{if(!this.behaviors.WebRTC)return l;e&&(e.dispose(),e=null);const r=e=this.behaviors.WebRTC(this);return Je((()=>r.state),!0).pipe(b((()=>{const{state:i}=r;if(!i)return l;if(i===it.Playing)return t(i);if([it.Error,it.Failed,it.Stalled].includes(i)){r.dispose(),e=null;const t=r.error;return v((()=>new Error(i,{cause:t})))}return l})),m(1))})),me({initialInterval:1e4,maxInterval:8e4,shouldRetry:e=>!(e instanceof Error&&e.message===it.Failed)}))))).subscribe({next:()=>{V((()=>{this.seekTime=null,this.playbackRate=1,this.paused=!1,this.pendingBehavior=e,e=null,this.mode="WebRTC",this.restoreFromDvrEnabled=!1}))},error:t=>{console.error("Failed to upgrade to WebRTC after fallback to DVR",t),V((()=>{e=null,this.restoreFromDvrEnabled=!1}))}}))}}class ft extends k.PureComponent{render(){return k.createElement("svg",{focusable:"false",viewBox:"0 0 66 66",className:"spinner",...this.props},k.createElement("circle",{fill:"none",strokeWidth:3,cx:33,cy:33,r:30,stroke:"white"}))}}const gt=({children:e,label:t,placement:r="bottom",disabled:i})=>{const[a,n]=R(!1),{x:s,y:l,refs:o,strategy:c,context:u}=Oe({placement:r,open:a,onOpenChange:n,middleware:[Te(5),Se(),xe({padding:8})],whileElementsMounted:(e,t,r)=>Ie(e,t,r,{animationFrame:!0})}),{getReferenceProps:d,getFloatingProps:h}=je([Me(u,{enabled:!i}),Ne(u,{role:"tooltip"}),Le(u,{referencePress:!0})]);return k.createElement(k.Fragment,null,O(e,d({ref:ze(o.setReference,e.ref),...e.props})),k.createElement(De,{id:"x-3deye-floating-ui-root"},a&&k.createElement("div",{...h({ref:o.setFloating,className:"x-3deye-tooltip",style:{position:c,top:null!=l?l:0,left:null!=s?s:0}})},t)))};class yt extends k.Component{render(){const{forwardedRef:e,children:t,className:r,fullWidth:i,variant:a,type:n,title:s,placement:l,...o}=this.props,c=ke(r,"x-3deye-button",{"x-3deye-button--fullwidth":i},a?`x-3deye-button--${a}`:void 0),u=k.createElement("button",{ref:e,className:c,type:n||"button",...o},t,o.disabled?null:k.createElement(Re,null));return void 0===s?u:k.createElement(gt,{label:s,placement:l,disabled:!s},u)}}const Et=k.forwardRef(((e,t)=>k.createElement(yt,{forwardedRef:t,...e}))),wt=k.forwardRef((function({width:e,height:t,placement:r="top",style:i},a){const n=[0,"top"===r?t:0],s=[e,n[1]],l=[e/2,t-n[1]],o=[e/4,t*("top"===r?3:1)/4],c=[.325*e,t-n[1]],u=[e-c[0],c[1]],d=[e-o[0],o[1]],h=e=>e.join(","),m=`M ${h(n)} C ${h(o)} ${h(c)} ${h(l)} ${h(u)} ${h(d)} ${h(s)}`,p=`${m} Z`;return k.createElement("svg",{ref:a,className:"tip",style:i,width:e,height:t,fill:"var(--tip-background, #fff)"},k.createElement("path",{className:"tip-body",d:p}),k.createElement("path",{className:"tip-border",d:m,stroke:"var(--tip-border, transparent)",strokeWidth:1}))})),Pt=({opened:e,onOpenChange:t,children:r,target:i,placement:a,className:n,style:s,autoDismiss:l=!0,initialFocus:o,withArrow:c=!1})=>{var u,d,h;const m=T(null),{x:p,y:b,refs:v,strategy:f,context:g,middlewareData:y,placement:E,update:w}=Oe({open:e,onOpenChange:t,middleware:[Te(5),Se(),xe(),_e({element:m})],placement:a,whileElementsMounted:(e,t,r)=>Ie(e,t,(()=>{var e;0!==(null===(e=g.elements.domReference)||void 0===e?void 0:e.getBoundingClientRect().width)?r():g.onOpenChange(!1)}),{animationFrame:!0})}),{getReferenceProps:P,getFloatingProps:C}=je([Ne(g),Le(g,{ancestorScroll:!0,enabled:l})]),R=S((e=>{m.current=e,w()}),[w]),x={top:"bottom",right:"left",bottom:"top",left:"right"}[null!==(u=null==E?void 0:E.split("-")[0])&&void 0!==u?u:"top"]||"top",I=k.createElement("div",{...C({className:ke("x-3deye-popover-container",n),ref:v.setFloating,style:{...s,position:f,top:null!=b?b:0,left:null!=p?p:0}})},c&&k.createElement(wt,{ref:R,width:24,height:8,placement:x,style:{position:"absolute",left:null===(d=y.arrow)||void 0===d?void 0:d.x,top:null===(h=y.arrow)||void 0===h?void 0:h.y,[x]:-7}}),r);return k.createElement(k.Fragment,null,O(i,P({ref:v.setReference,...i.props})),k.createElement(De,{id:"x-3deye-floating-ui-root"},l&&e&&k.createElement(Ae,{context:g,modal:!1,order:["reference","content"],returnFocus:!1,initialFocus:o},I),!l&&e&&I))};const Ct=Z((()=>{const e=x(ht),[t,r]=R(!1);if(!e.stats||!e.behavior)return null;const i=e=>{e.preventDefault(),r(!t)};if(!t)return k.createElement("details",{className:"x-3deye-player__stats",open:t,style:{pointerEvents:"auto"}},k.createElement("summary",{onClick:i},"Stats"));const a=e.stats,n=a.timestamp-a.startTime,s=a.bytesReceived/n,l=a.packetsReceived?Math.round(a.packetsLost/(a.packetsLost+a.packetsReceived)*100):0,{ttff:o}=e.behavior,c=o>0?(o/1e3).toFixed(2)+" s":"TBD";return k.createElement("details",{className:"x-3deye-player__stats",open:t,style:{pointerEvents:"auto"}},k.createElement("summary",{onClick:i},"Stats"),k.createElement("dl",null,k.createElement("div",null,k.createElement("dt",null,"frame width:")," ",k.createElement("dd",null,a.frameWidth||e.video.videoWidth)),k.createElement("div",null,k.createElement("dt",null,"frame height:")," ",k.createElement("dd",null,a.frameHeight||e.video.videoHeight)),k.createElement("div",null,k.createElement("dt",null,"bitrate:"),k.createElement("dd",null,Math.round(8*a.bitrate)," kbit/s")),k.createElement("div",null,k.createElement("dt",null,"average bitrate:")," ",k.createElement("dd",null,Math.round(8*s)," kbit/s")),k.createElement("div",null,k.createElement("dt",null,"elapsed time:")," ",k.createElement("dd",null,Math.floor(n/1e3)," s")),k.createElement("div",null,k.createElement("dt",null,"packets loss:"),k.createElement("dd",{style:{color:l<10?"green":l<50?"yellow":"red"}},l,"%")),k.createElement("div",null,k.createElement("dt",null,"packets received:")," ",k.createElement("dd",null,a.packetsReceived)),k.createElement("div",null,k.createElement("dt",null,"packets lost:")," ",k.createElement("dd",null,a.packetsLost)),k.createElement("div",null,k.createElement("dt",null,"frames received:")," ",k.createElement("dd",null,a.framesReceived)),k.createElement("div",null,k.createElement("dt",null,"frames decoded:")," ",k.createElement("dd",null,a.framesDecoded)),k.createElement("div",null,k.createElement("dt",null,"frames dropped:")," ",k.createElement("dd",null,a.framesDropped)),k.createElement("div",null,k.createElement("dt",null,"round-trip time:")," ",k.createElement("dd",null,a.rtt)),k.createElement("div",null,k.createElement("dt",null,"time to first frame:")," ",k.createElement("dd",null,c))))}));Ct.displayName="PlayerStats";const kt=Z((()=>{const e=x(ht),[t,r]=R(!1);return k.createElement(Pt,{className:"x-3deye-player__camera-name-popover",opened:t,onOpenChange:r,placement:"bottom-start",autoDismiss:!1,withArrow:!0,target:k.createElement("div",{className:"x-3deye-player__camera-name",onClick:()=>r(!t)},e.camera.name)},k.createElement("div",null,"id:"," ",k.createElement(Et,{style:{height:24},onClick:()=>function(e){const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t)}(e.camera.id.toString()),title:"copy to clipboard"},e.camera.id)),k.createElement("div",{style:{lineHeight:"24px"}},"provider: ",e.mode),k.createElement(Ct,null))}));kt.displayName="CameraName";const Rt=Z((()=>{var e;const t=x(ht),r=x(Ze),{utc:i,hour12:a}=null!==(e=null==r?void 0:r.account.preferences)&&void 0!==e?e:{utc:!1,hour12:!1},n=I((()=>{const e=new Intl.DateTimeFormat(We.language,{timeStyle:"medium",timeZone:i?"UTC":void 0,hour12:a||void 0,hourCycle:a?void 0:"h23"}),t=new Intl.DateTimeFormat(We.language,{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZone:i?"UTC":void 0,hour12:a||void 0,hourCycle:a?void 0:"h23"});return r=>((e,t,r)=>r?e.getUTCFullYear()===t.getUTCFullYear()&&e.getUTCMonth()===t.getUTCMonth()&&e.getUTCDate()===t.getUTCDate():e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate())(r,new Date,i)?e.format(r):t.format(r)}),[i,a]);return r&&"activeLayoutView"in r?t.behavior&&t.behavior instanceof dt?null:k.createElement("div",{className:"x-3deye-player__current-time"+(r.activeLayoutView&&"synced"in r.activeLayoutView&&r.activeLayoutView.synced.players.includes(t)?" x-3deye-player__current-time--synced":"")},t.currentTime&&n(t.currentTime)):null}));Rt.displayName="CurrentTimeIndicator";const Ot=Z((()=>{const e=x(ht);if(e.endTime)return null;if(!e.camera.isOnline)return null;if(e.error)return null;if(e.behavior&&e.behavior.live&&e.behavior.delay&&e.behavior.delay>1)return k.createElement(Et,{className:"x-3deye-delay-indicator",style:{pointerEvents:"auto"},onClick:e.behavior.goLive},(e=>{const t=Math.floor(e)%60;return`- ${(Math.floor(e)-t)/60}:${t<10?"0"+t:t}`})(e.behavior.delay));return!e.paused&&(e.behavior&&e.behavior instanceof dt)?k.createElement("div",{className:"x-3deye-live-indicator"},We.t("playerTools.live")):k.createElement(Et,{style:{pointerEvents:"auto"},className:"x-3deye-button--live",onClick:e.goLive,tabIndex:-1},We.t("playerTools.goLive"))}));function Tt(e){return k.forwardRef(((t,r)=>{const{size:i=24,color:a="currentColor",className:n,...s}=t,l=e.viewBox||"0 0 24 24",o=e.svg;return k.createElement("svg",{ref:r,preserveAspectRatio:"xMinYMin",className:ke("icon",n),width:i,fill:a,viewBox:l,...s},o)}))}Ot.displayName="LiveIndicator";const St=Tt({viewBox:"0 0 24 24",svg:k.createElement(k.Fragment,null,k.createElement("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"}),k.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});St.displayName="PauseIcon";const xt=Tt({viewBox:"0 0 24 24",svg:k.createElement(k.Fragment,null,k.createElement("path",{d:"M8 5v14l11-7z"}),k.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});xt.displayName="PlayIcon";const It=Z((()=>{const e=T(null),t=x(ht),r=T(!1);return j((()=>{const t=e.current;if(!t)return;const r=()=>{t.style.display="none"};return t.addEventListener("animationend",r),()=>{t.removeEventListener("animationend",r)}}),[]),j((()=>{e.current&&(r.current?e.current.style.display="block":r.current=!0)})),k.createElement("div",{ref:e,className:"x-3deye-player__playback-indicator"},t.paused?k.createElement(St,{size:32,color:"rgba(255, 255, 255, 0.8)"}):k.createElement(xt,{size:32,color:"rgba(255, 255, 255, 0.8)"}))}));It.displayName="PlaybackIndicator";const jt=Z((()=>{const e=x(ht);if(!e.error)return null;const t=e.error?"CONNECTION_TIMEOUT_ERROR"===e.error.name?We.t("player.playbackTimeoutError",{count:e.error.cause.count}):"CAMERA_OFFLINE_ERROR"===e.error.name?e.camera.enabled?We.t("player.cameraIsOffline"):We.t("player.cameraIsDisabled"):"NO_PLAYABLE_STREAM_ERROR"===e.error.name?We.t("player.noPlayableStream"):"NO_VIDEO_TRACK_ERROR"===e.error.name?We.t("player.noVideoTrack"):We.t("player.genericError"):null;return k.createElement("div",{style:{position:"absolute",top:0,left:0,bottom:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"}},k.createElement("span",{style:{backgroundColor:"rgba(0, 0, 0, 0.5)",padding:"8px 16px",fontSize:12}},t))}));const Mt=Z((({hideCameraTitle:e,width:t,height:r,onDoubleClick:i,onAuxClick:a,onMouseDown:n,children:s})=>{const l=x(ht),o=k.useRef(null),c=k.useRef(null),u=`zoom-slider-${l.id}`,[d,h]=R(1),m=200,p=120,b=T(!1),v=T(be()),f=T(be()),g=T(0),y=T(0),E=T(t),w=T(r);E.current=t,w.current=r;const P=({sourceEvent:e,transform:t})=>{const r={x:E.current/2*t.k+t.x,y:w.current/2*t.k+t.y};if(l.setTransform(ye(function(e,t,r){return Ee(we(r.x,r.y),Pe(t),we(-r.x,-r.y),we(e.x,e.y),Ce(e.k))}(t,0,r))),h(Math.round(10*t.k)/10),e&&e.target!==c.current){const e=1/t.k,r=-t.x/(E.current/m)*e,i=-t.y/(w.current/p)*e,a=fe.translate(r,i).scale(e);f.current.transform(pe(c.current),a)}},O=({sourceEvent:e,transform:t})=>{const r=pe(c.current).select(".x-3deye-player__zoomable");if(e&&e.target!==c.current){const e=1/(t=(e=>{const t={k:e.k,x:e.x,y:e.y};return e.x<0&&(t.x=0),e.invertX(m)<m&&(t.x=m*(1-e.k)),e.y<0&&(t.y=0),e.invertY(p)<p&&(t.y=p*(1-e.k)),new ge(t.k,t.x,t.y)})(t)).k,r=-t.x*(E.current/m)*e,i=-t.y*(w.current/p)*e,a=fe.translate(r,i).scale(e);v.current.transform(pe(o.current),a)}r.style("transform",`translate(${t.x}px,${t.y}px) scale(${t.k})`),r.style("transform-origin","0 0")};return j((()=>{if(o.current&&t&&r){if(b.current){if(v.current.translateExtent([[0,0],[t,r]]).extent([[0,0],[t,r]]),!g.current||!y.current)return;const e=ve(o.current),i=e.x*t/g.current,a=e.y*r/y.current,n=(i-e.x)/e.k,s=(a-e.y)/e.k;v.current.translateBy(pe(o.current),n,s)}else b.current=!0,v.current.scaleExtent([1,4]).translateExtent([[0,0],[t,r]]).extent([[0,0],[t,r]]).on("zoom",P),f.current.scaleExtent([.25,1]).on("zoom",O),v.current(pe(o.current)),pe(o.current).on("dblclick.zoom",null),f.current(pe(c.current)),pe(c.current).on("dblclick.zoom",null);g.current=t,y.current=r}}),[t,r]),j((()=>{if(o.current)return o.current.addEventListener("mousedown",n,!0),()=>{var e;b.current=!1,pe(o.current).on(".zoom",null),null===(e=o.current)||void 0===e||e.removeEventListener("mousedown",n,!0)}}),[]),j((()=>Q((()=>l.transform),(e=>{var t;null===e&&o.current&&(null===(t=v.current)||void 0===t||t.transform(pe(o.current),fe))}))),[]),k.createElement(k.Fragment,null,k.createElement("div",{className:"x-3deye-player__overlay"},k.createElement("div",{ref:o,style:{position:"absolute",top:0,bottom:0,left:0,right:0},onDoubleClick:i||C,onAuxClick:a}),k.createElement(It,null),k.createElement("div",{className:"x-3deye-player__indicators"},e?null:k.createElement(kt,null),k.createElement("div",{style:{flex:1}}),k.createElement(Ot,null),k.createElement(Rt,null)),l.loading&&k.createElement(ft,{style:{pointerEvents:"none",position:"absolute",top:"calc(50% - 33px)",left:"calc(50% - 33px)"}}),k.createElement(jt,null),s),k.createElement(k.Fragment,null,k.createElement("style",null,`\n\t\t\t\t\t\t\t:where(#${u}) {\n\t\t\t\t\t\t\t\tdisplay: ${d>1?"block":"none"};\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t#${u} .tick:nth-child(n + ${11-Math.round(11*(d-1)/3)}) {\n\t\t\t\t\t\t\t\tborder-top-color: orange;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t`),k.createElement("div",{id:u,className:"x-3deye-player__zoom-slider"},Array.from(Array(11)).map(((e,t)=>k.createElement("div",{key:t,className:"tick"})))),k.createElement("div",{ref:c,className:"x-3deye-player__zoom-preview",style:{width:m,height:p},tabIndex:-1},k.createElement("div",{className:"zoom-value"},`${d}x`),k.createElement("div",{className:"x-3deye-player__zoomable"}))))}));Mt.displayName="PlayerOverlay";const Nt=!!navigator.platform&&/iPad|iPhone|iPod/.test(navigator.platform),Lt=new URLSearchParams(location.search.toLowerCase()),Dt=Lt.has("dash")||Lt.has("dvr"),_t=Z(k.forwardRef((({id:e,archivesStore:t,startTime:r,endTime:i,clip:a,camera:n,webRtcOptions:s,className:l,controls:o,onDoubleClick:c,onMouseDown:u,onAuxClick:d,hideCameraTitle:h,controllerRef:m,videoRef:p,...b},v)=>{var f;const g=T(null),[y,E]=R(0),w=T(null),P=T(null),[C,O]=R((()=>new WeakRef(n))),x=T(null),[I]=R((()=>new vt({camera:n,startTime:r,endTime:i,clip:a,archivesStore:t,behaviors:{archive:e=>new tt(e,w.current),DVR:e=>!("MediaSource"in window)&&Nt?new rt(e,w.current):new nt(e,Dt,w.current),WebRTC:Dt||!1===(null==s?void 0:s.enabled)?null:e=>new dt(e,null==s?void 0:s.allowedIceCandidateProtocols)}})));M(m,(()=>I),[]),j((()=>{P.current=new et(w.current,I);const e=qe?Je((()=>I.mode),!0).pipe(oe()).subscribe((([e])=>{"WebRTC"===e&&(x.current={restoreAt:I.seekTime},I.detach(),E((e=>e+1)))})):void 0;return()=>{var t;null==e||e.unsubscribe(),null===(t=P.current)||void 0===t||t.dispose(),P.current=null,I.detach()}}),[]);const{muted:N,paused:L}=I;j((()=>{x.current&&(P.current.dispose(),x.current.restoreAt&&I.setStartTime(x.current.restoreAt),P.current=new et(w.current,I),x.current=null)}),[y]),j((()=>{const e=new G((e=>{for(const t of e){const e=t.contentRect.width,r=t.contentRect.height;V((()=>{I.width=e,I.height=r}))}}));return e.observe(g.current),()=>{e.disconnect()}}),[]),j((()=>{if(C.deref()!==n)return I.setCameraAndStartTime(n,r||null),I.setTransform(null),void O(new WeakRef(n));I.setStartTime(r||null)}),[n,+(r||0)]);const D=S((e=>{e.currentTarget===e.target&&0===e.button&&u&&u(e)}),[u]);return k.createElement("div",{ref:ze(g,v),id:e||`player-${I.id}`,className:ke(l,"x-3deye-player",{"x-3deye-player--paused":L}),...b},k.createElement("div",{className:"x-3deye-player__zoomable-wrapper"},k.createElement("div",{className:"x-3deye-player__zoomable",style:{transformOrigin:"0 0",transform:null!==(f=I.transform)&&void 0!==f?f:void 0}},k.createElement("video",{key:y,autoPlay:!0,crossOrigin:"anonymous",playsInline:!0,ref:ze(w,p),muted:N,style:(e=>{var t,r;if("archive"!==I.mode||!qe||"fill"!==e.objectFit)return e;let i=1,a=1;const{width:n,height:s}=I,l=I.camera.raw.width||(null===(t=w.current)||void 0===t?void 0:t.videoWidth),o=I.camera.raw.height||(null===(r=w.current)||void 0===r?void 0:r.videoHeight);if(!(l&&o&&n&&s))return e;const c=l/o;n/s>c?(i=n/(s*c),a=1):(i=1,a=s/(n/c));const{objectFit:u,...d}=e;return{...d,objectFit:"contain",scale:`${i} ${a}`}})({objectFit:I.videoResizeMode})}))),k.createElement(ht.Provider,{value:I},k.createElement(Mt,{onDoubleClick:c,onAuxClick:d,onMouseDown:D,width:I.width,height:I.height,hideCameraTitle:h},o)))})));_t.displayName="Player";const At=k.forwardRef((({children:e,className:t,...r},i)=>(t=t?`x-3deye-player__control ${t}`:"x-3deye-player__control",k.createElement(Et,{ref:i,className:t,...r},e))));At.displayName="Control";const zt=Tt({viewBox:"0 0 24 24",svg:k.createElement(k.Fragment,null,k.createElement("path",{d:"M12 13.05 6.925 18.125Q6.725 18.325 6.413 18.337Q6.1 18.35 5.875 18.125Q5.65 17.9 5.65 17.6Q5.65 17.3 5.875 17.075L10.95 12L5.875 6.925Q5.675 6.725 5.663 6.412Q5.65 6.1 5.875 5.875Q6.1 5.65 6.4 5.65Q6.7 5.65 6.925 5.875L12 10.95L17.075 5.875Q17.275 5.675 17.588 5.662Q17.9 5.65 18.125 5.875Q18.35 6.1 18.35 6.4Q18.35 6.7 18.125 6.925L13.05 12L18.125 17.075Q18.325 17.275 18.337 17.587Q18.35 17.9 18.125 18.125Q17.9 18.35 17.6 18.35Q17.3 18.35 17.075 18.125Z"}))});zt.displayName="CloseIcon";const Ft=({onClick:e})=>e?k.createElement(At,{className:"x-3deye-player__control-close",onClick:e,title:We.t("playerTools.closePlayer")},k.createElement(zt,null)):null;Ft.displayName="CloseControl";const Qt="x-3deye-player__controls--spaced",Vt="x-3deye-player__controls--compact",Ht="x-3deye-player__control--reflowed",Ut=e=>{var t,r;if(!e)return;e.classList.contains(Vt)&&(e.classList.remove(Vt),Array.from(e.children).filter((e=>e.classList.contains(Ht))).forEach((e=>{e.style.position="",e.style.bottom="",e.style.right="",e.classList.remove(Ht)}))),e.classList.contains(Qt)&&(e.classList.remove(Qt),e.querySelectorAll(".before-spacer").forEach((e=>e.classList.remove("before-spacer"))));if(e.scrollWidth-e.offsetWidth<=0){(null===(t=e.querySelector(".spacer"))||void 0===t?void 0:t.clientWidth)&&e.classList.add(Qt);for(const t of e.querySelectorAll(".spacer"))null===(r=t.previousElementSibling)||void 0===r||r.classList.add("before-spacer");return}e.classList.add(Vt);const i=Array.from(e.children);let a=2,n=a;for(;e.scrollWidth-e.offsetWidth>0&&a<=i.length;){const e=i[i.length-a];e&&!e.classList.contains("spacer")?(e.style.position="absolute",e.style.bottom=8+38*(n-1)+"px",e.style.right="8px",e.classList.add(Ht),a++,n++):a++}};function Bt({style:e,children:t}){const r=T(null);return j((()=>{if(!r.current)return;const e=new MutationObserver((()=>Ut(r.current)));return e.observe(r.current,{childList:!0}),()=>e.disconnect()}),[]),j((()=>{const e=new ResizeObserver((()=>{Ut(r.current)})),t=r.current;return t&&e.observe(t),()=>e.disconnect()}),[]),N((()=>{Ut(r.current)})),k.createElement("div",{ref:r,className:"x-3deye-player__controls",style:e},t)}Bt.Spacer=()=>k.createElement("div",{className:"spacer"});const $t=[{value:.5,name:"0.5x"},{value:1,name:"1x"},{value:2,name:"2x"},{value:4,name:"4x"},{value:8,name:"8x"},{value:16,name:"16x"}],Wt=Z((()=>{const[e,t]=R(!1),r=x(ht);if("WebRTC"===r.mode)return null;let i=$t.findIndex((e=>e.value===r.playbackRate));-1===i&&(i=1);const a=k.createElement(At,{className:"control-playbackrate",onClick:()=>t(!e),title:We.t("playerTools.playbackRate")},$t[i].name);return k.createElement(Pt,{placement:"top",withArrow:!0,target:a,opened:e,onOpenChange:t,className:"popover-playbackrate"},Array.from({length:$t.length},((e,t)=>(t=$t.length-1-t,k.createElement(Et,{key:t,onClick:()=>{return e=t,void r.setPlaybackRate($t[e].value);var e},style:{border:"2px solid "+(t===i?"rgba(255,255,255,0.5)":"transparent")}},$t[t].name)))))}));Wt.displayName="PlaybackRateControl";const Zt=Tt({viewBox:"0 0 24 24",svg:k.createElement(k.Fragment,null,k.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),k.createElement("path",{d:"M14.75 18.5Q14.125 18.5 13.688 18.062Q13.25 17.625 13.25 17V7Q13.25 6.375 13.688 5.938Q14.125 5.5 14.75 5.5H17Q17.625 5.5 18.062 5.938Q18.5 6.375 18.5 7V17Q18.5 17.625 18.062 18.062Q17.625 18.5 17 18.5ZM7 18.5Q6.375 18.5 5.938 18.062Q5.5 17.625 5.5 17V7Q5.5 6.375 5.938 5.938Q6.375 5.5 7 5.5H9.25Q9.875 5.5 10.312 5.938Q10.75 6.375 10.75 7V17Q10.75 17.625 10.312 18.062Q9.875 18.5 9.25 18.5ZM14.75 17H17V7H14.75ZM7 17H9.25V7H7ZM7 7V17ZM14.75 7V17Z"}))});Zt.displayName="PauseIcon";const qt=Tt({viewBox:"0 0 24 24",svg:k.createElement(k.Fragment,null,k.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),k.createElement("path",{d:"M 8.739583,18.4955 Q 8.2525391,18.799994 7.7654953,18.526169 7.2791816,18.252344 7.2791816,17.674025 V 6.3259749 q 0,-0.578319 0.4863137,-0.852144 0.4870438,-0.273825 0.9740877,0.03067 l 8.91429,5.6889941 q 0.456376,0.304494 0.456376,0.806872 0,0.501648 -0.456376,0.806142 z M 8.80019,12.014969 Z m 0,4.625091 7.302007,-4.625091 L 8.80019,7.3906079 Z"}))});qt.displayName="PlayIcon";const Gt=Z((()=>{const e=x(ht);return k.createElement(At,{className:"x-3deye-player__control-playpause",onClick:e.togglePlayback,title:e.paused?We.t("playerTools.play"):We.t("playerTools.pause")},e.paused?k.createElement(qt,null):k.createElement(Zt,null))}));Gt.displayName="PlayPauseControl";const Yt=Tt({viewBox:"0 0 24 24",svg:k.createElement("g",null,k.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),k.createElement("path",{d:"M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"}))});Yt.displayName="AspectRatioIcon";const Jt=Tt({viewBox:"0 0 24 24",svg:k.createElement("g",null,k.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),k.createElement("path",{d:"M12.01 5.5L10 8h4l-1.99-2.5zM18 10v4l2.5-1.99L18 10zM6 10l-2.5 2.01L6 14v-4zm8 6h-4l2.01 2.5L14 16zm7-13H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"}))});Jt.displayName="SettingsOverscanIcon";const Xt=Z((()=>{const e=x(ht);return k.createElement(At,{onClick:e.toggleResizeMode,title:e.videoResizeMode===pt.Fit?We.t("videoResizeMode.fit"):We.t("videoResizeMode.stretch")},e.videoResizeMode===pt.Fit?k.createElement(Yt,{size:16}):k.createElement(Jt,{size:16}))}));Xt.displayName="ResizeModeControl";const Kt=Tt({viewBox:"0 0 24 24",svg:k.createElement(k.Fragment,null,k.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),k.createElement("path",{d:"M 10 3.5 C 9.75 3.5 9.508724 3.5503906 9.2753906 3.6503906 C 9.0420573 3.7503906 8.8424479 3.8908854 8.6757812 4.0742188 L 7.3496094 5.5 L 4.3007812 5.5 C 3.8007813 5.5 3.3753906 5.6753906 3.0253906 6.0253906 C 2.6753906 6.3753906 2.5 6.8007812 2.5 7.3007812 L 2.5 18.699219 C 2.5 19.199219 2.6753906 19.624609 3.0253906 19.974609 C 3.3753906 20.324609 3.8007813 20.5 4.3007812 20.5 L 19.699219 20.5 C 20.199219 20.5 20.624609 20.324609 20.974609 19.974609 C 21.324609 19.624609 21.5 19.199219 21.5 18.699219 L 21.5 7.3007812 C 21.5 6.8007813 21.324609 6.3753906 20.974609 6.0253906 C 20.624609 5.6753906 20.199219 5.5 19.699219 5.5 L 16.650391 5.5 L 15.324219 4.0742188 C 15.157552 3.8908854 14.957943 3.7503906 14.724609 3.6503906 C 14.491276 3.5503906 14.25 3.5 14 3.5 L 10 3.5 z M 4.3007812 7 L 19.699219 7 C 19.782552 7 19.853443 7.029224 19.912109 7.0878906 C 19.970109 7.1458906 20 7.2174479 20 7.3007812 L 20 18.699219 C 20 18.782552 19.970109 18.853443 19.912109 18.912109 C 19.853443 18.970109 19.782552 19 19.699219 19 L 4.3007812 19 C 4.2174479 19 4.1458906 18.970109 4.0878906 18.912109 C 4.029224 18.853443 4 18.782552 4 18.699219 L 4 7.3007812 C 4 7.2174479 4.029224 7.1458906 4.0878906 7.0878906 C 4.1458906 7.029224 4.2174479 7 4.3007812 7 z M 12 8.875 C 10.85 8.875 9.8742188 9.2742187 9.0742188 10.074219 C 8.2742188 10.874219 7.875 11.85 7.875 13 C 7.875 14.15 8.2742187 15.125781 9.0742188 15.925781 C 9.8742188 16.725781 10.85 17.125 12 17.125 C 13.15 17.125 14.125781 16.725781 14.925781 15.925781 C 15.725781 15.125781 16.125 14.15 16.125 13 C 16.125 11.85 15.725781 10.874219 14.925781 10.074219 C 14.125781 9.2742188 13.15 8.875 12 8.875 z M 12 10.386719 A 2.6057522 2.6057522 0 0 1 14.605469 12.992188 A 2.6057522 2.6057522 0 0 1 12 15.599609 A 2.6057522 2.6057522 0 0 1 9.3945312 12.992188 A 2.6057522 2.6057522 0 0 1 12 10.386719 z "}))});Kt.displayName="CameraIcon";const er=()=>{const e=k.useContext(ht);return k.createElement(At,{onClick:()=>{const t=`${e.camera.name} ${(e.currentTime||new Date).toISOString().replace(/:/g,"-")}`;((e,t)=>{const r=document.createElement("canvas"),i=r.getContext("2d");if(!i)return;const{videoWidth:a,videoHeight:n}=e;r.width=a,r.height=n,i.drawImage(e,0,0,a,n);const s=r.toDataURL("image/jpeg"),l=document.createElement("a");l.href=s,l.download=`${t}.jpg`,document.body.appendChild(l),l.click(),l.remove()})(e.video,t)},title:We.t("playerTools.snapshot")},k.createElement(Kt,null))};er.displayName="SnapshotControl";const tr=(e,t,r)=>Math.min(Math.max(e,t),r),rr=()=>{},ir=e=>Math.round(e),ar=k.forwardRef((({value:e,onChange:t,onChangeComplete:r,orientation:i="horizontal",disabled:a=!1,labelFormat:n=(e=>`${e}`),style:s},l)=>{const o=T(null),c=T(null),[u,d]=R(!1),[h,m]=R(e);j((()=>{if(!u)return;const e=o.current;if(!e)return;let a=0,n=0;const s=e.getBoundingClientRect();if(!s)return;const l=({clientX:e,clientY:r})=>{if(!c.current)return;let l=0;"horizontal"===i?(a=tr(e-s.x,0,s.width),l=a/s.width*100,c.current.style.transform=`translateX(${a}px)`):(n=s.height-tr(r-s.y,0,s.height),l=n/s.height*100,c.current.style.transform=`translateY(${-n}px)`),m(l),null==t||t(ir(l))},h=({clientX:e,clientY:a})=>{if(d(!1),!c.current)return;const n="horizontal"===i?tr(e-s.x,0,s.width)/s.width*100:100*(1-tr(a-s.y,0,s.height)/s.height);c.current.style.transform="",m(n),null==t||t(ir(n)),null==r||r(ir(n))},p=()=>{if(d(!1),!c.current)return;const e="horizontal"===i?a/s.width*100:n/s.height*100;c.current.style.transform="",null==t||t(ir(e)),null==r||r(ir(e))};return e.addEventListener("pointercancel",p),e.addEventListener("pointermove",l),e.addEventListener("pointerup",h),()=>{e.removeEventListener("pointercancel",p),e.removeEventListener("pointermove",l),e.removeEventListener("pointerup",h)}}),[u,i,t]);const p=S((({clientX:e,clientY:r,pointerId:n})=>{if(!o.current||a)return;d(!0),o.current.setPointerCapture(n);const s=o.current.getBoundingClientRect();if(!s)return;if(!c.current)return;let l=0;if("horizontal"===i){const t=tr(e-s.x,0,s.width);l=t/s.width*100,c.current.style.transform=`translateX(${t}px)`}else{const e=s.height-tr(r-s.y,0,s.height);l=e/s.height*100,c.current.style.transform=`translateY(${-e}px)`}m(l),null==t||t(ir(l))}),[i,a]),b=S((i=>{if(a)return;let n=null;"ArrowLeft"===i.code?n=Math.max(e-1,0):"ArrowRight"===i.code?n=Math.min(e+1,100):"ArrowDown"===i.code?n=Math.max(e-1,0):"ArrowUp"===i.code&&(n=Math.min(e+1,100)),null!==n&&(i.stopPropagation(),i.preventDefault(),null==t||t(n),null==r||r(n))}),[e,t,r,i,a]);return k.createElement("div",{ref:ze(l,o),tabIndex:0,onKeyDown:b,className:ke("x-3deye-slider",i,{disabled:a}),onPointerDown:p,style:s},k.createElement("div",{className:"x-3deye-slider__track"},k.createElement("div",{className:"x-3deye-slider__bar",style:{width:"horizontal"===i?`${u?h:e}%`:void 0,height:"vertical"===i?`${u?h:e}%`:void 0}})),k.createElement("div",{ref:c,className:ke("x-3deye-slider__thumb",{active:u}),style:{touchAction:"none",userSelect:"none",position:"absolute",left:"horizontal"===i?u?0:`${e}%`:"auto",bottom:"vertical"===i?u?0:`${e}%`:"auto"}},null!==n&&k.createElement("div",{className:"x-3deye-slider__label "+(u?"open":"")},n(u?ir(h):e))))}));ar.displayName="Slider";const nr=Tt({viewBox:"0 0 24 24",svg:k.createElement(k.Fragment,null,k.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),k.createElement("path",{d:"M18.95 21.6 16.45 19.125Q16.15 19.3 15.838 19.462Q15.525 19.625 15.2 19.775Q14.825 19.925 14.5 19.675Q14.175 19.425 14.175 19Q14.175 18.8 14.3 18.65Q14.425 18.5 14.6 18.4Q14.8 18.325 15 18.237Q15.2 18.15 15.375 18.05L11.8 14.45V16.6Q11.8 17.2 11.238 17.438Q10.675 17.675 10.25 17.25L7.5 14.5H4.7Q4.3 14.5 4.05 14.238Q3.8 13.975 3.8 13.6V10.4Q3.8 10.025 4.05 9.762Q4.3 9.5 4.7 9.5H6.825L2.525 5.2Q2.325 4.975 2.312 4.662Q2.3 4.35 2.525 4.125Q2.75 3.925 3.05 3.925Q3.35 3.925 3.575 4.125L20 20.55Q20.2 20.775 20.213 21.087Q20.225 21.4 20 21.6Q19.775 21.825 19.475 21.825Q19.175 21.825 18.95 21.6ZM15.2 4.175Q17.575 5.175 19.025 7.275Q20.475 9.375 20.475 11.975Q20.475 13.3 20.088 14.5Q19.7 15.7 18.975 16.725L17.9 15.65Q18.425 14.85 18.7 13.912Q18.975 12.975 18.975 11.975Q18.975 9.825 17.775 8.087Q16.575 6.35 14.6 5.55Q14.4 5.45 14.288 5.287Q14.175 5.125 14.175 4.925Q14.175 4.5 14.5 4.262Q14.825 4.025 15.2 4.175ZM9.3 11.975ZM15.925 13.675 14.175 11.925V8.3Q15.175 8.85 15.738 9.85Q16.3 10.85 16.3 12Q16.3 12.45 16.2 12.862Q16.1 13.275 15.925 13.675ZM11.8 9.525 9.625 7.375 10.25 6.75Q10.675 6.325 11.238 6.562Q11.8 6.8 11.8 7.4ZM10.3 15.15V12.95L8.325 11H5.3V13H8.15Z"}))});nr.displayName="VolumeOffIcon";const sr=Tt({viewBox:"0 0 24 24",svg:k.createElement(k.Fragment,null,k.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),k.createElement("path",{d:"M15.05 19.775Q14.675 19.925 14.363 19.675Q14.05 19.425 14.05 19Q14.05 18.8 14.163 18.65Q14.275 18.5 14.475 18.4Q16.45 17.6 17.65 15.863Q18.85 14.125 18.85 11.975Q18.85 9.825 17.65 8.087Q16.45 6.35 14.475 5.55Q14.25 5.45 14.15 5.287Q14.05 5.125 14.05 4.925Q14.05 4.5 14.363 4.262Q14.675 4.025 15.05 4.175Q17.45 5.175 18.9 7.275Q20.35 9.375 20.35 11.975Q20.35 14.575 18.9 16.675Q17.45 18.775 15.05 19.775ZM4.55 14.5Q4.175 14.5 3.913 14.238Q3.65 13.975 3.65 13.6V10.4Q3.65 10.025 3.913 9.762Q4.175 9.5 4.55 9.5H7.375L10.125 6.75Q10.55 6.325 11.1 6.562Q11.65 6.8 11.65 7.4V16.6Q11.65 17.2 11.1 17.438Q10.55 17.675 10.125 17.25L7.375 14.5ZM14.05 15.65V8.3Q15 8.825 15.575 9.825Q16.15 10.825 16.15 12Q16.15 13.175 15.575 14.15Q15 15.125 14.05 15.65ZM10.15 8.85 8 11H5.15V13H8L10.15 15.15ZM7.65 12Z"}))});sr.displayName="VolumeUpIcon";const lr=e=>{e.stopPropagation()},or=Z((()=>{const e=x(ht);return k.createElement(At,{className:"volume-control",title:We.t("playerTools.volume"),onClick:e.toggleMute,onWheel:t=>{const r=t.deltaY;r&&e.setVolume(tr(e.volume+(r<0?.1:-.1),0,1))}},e.muted?k.createElement(nr,null):k.createElement(sr,null),k.createElement("div",{onClick:lr,className:"volume-range"},k.createElement(ar,{value:Math.round(100*e.volume),labelFormat:e=>`${e}%`,orientation:"vertical",onChange:t=>{e.setVolume(Number(t)/100)}})))}));or.displayName="VolumeControl";const cr=Z((({onRequestClose:e,fullscreenControl:t})=>k.createElement(Bt,null,k.createElement(Gt,null),k.createElement(or,null),k.createElement(Wt,null),k.createElement(Xt,null),k.createElement(Bt.Spacer,null),k.createElement(er,null),t,k.createElement(Ft,{onClick:e}))));cr.displayName="ToolkitPlayerControls";function ur(){const[e,t]=R(void 0),[r,i]=R(!1),a=Nt&&e instanceof HTMLVideoElement?"webkitEnterFullscreen"in e:document.fullscreenEnabled||Boolean(document.webkitFullscreenEnabled);const n=S((e=>{t(e||void 0)}),[]);j((()=>{const t=()=>{i(document.fullscreenElement===(e||document.documentElement))};return document.addEventListener("fullscreenchange",t),document.addEventListener("webkitfullscreenchange",t),()=>{document.removeEventListener("fullscreenchange",t),document.removeEventListener("webkitfullscreenchange",t)}}),[e]);return{ref:n,toggle:S((()=>{a&&(document.fullscreenElement!==(e||document.documentElement)?(e||document.documentElement).requestFullscreen():document.exitFullscreen())}),[e,r]),enabled:a,active:r}}const dr=Tt({viewBox:"0 0 24 24",svg:k.createElement(k.Fragment,null,k.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),k.createElement("path",{d:"M5 19v-5h1.5v3.5H10V19Zm0-9V5h5v1.5H6.5V10Zm9 9v-1.5h3.5V14H19v5Zm3.5-9V6.5H14V5h5v5Z"}))});dr.displayName="FullscreenIcon";const hr=Tt({viewBox:"0 0 24 24",svg:k.createElement(k.Fragment,null,k.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),k.createElement("path",{d:"M8.5 19v-3.5H5V14h5v5ZM5 10V8.5h3.5V5H10v5Zm9 9v-5h5v1.5h-3.5V19Zm0-9V5h1.5v3.5H19V10Z"}))});hr.displayName="FullscreenExitIcon";const mr=({toggle:e,active:t})=>k.createElement(At,{onClick:null!=e?e:void 0,title:We.t("playerTools.fullScreen")},t?k.createElement(hr,null):k.createElement(dr,null));mr.displayName="FullscreenControl";const pr=Tt({viewBox:"0 0 24 24",svg:k.createElement(k.Fragment,null,k.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),k.createElement("path",{d:"M12 3L1 11.4l1.21 1.59L4 11.62V21h16v-9.38l1.79 1.36L23 11.4zm6 16H6v-8.9l6-4.58 6 4.58z"}))});pr.displayName="HomeIcon";const br=Tt({viewBox:"0 0 79.375 79.375",svg:k.createElement(k.Fragment,null,k.createElement("path",{d:"M138.93 101.512c-16.578.124-32.548 6.13-47.309 17.925-7.317 5.847-15.399 14.393-17.77 18.788-1.58 2.931-3.668 7.757-6.367 14.712-7.457 19.225-11.997 29.033-16.8 36.297-1.638 2.476-1.781 2.231 1.748 2.99.613.133 1.285.26 1.984.383-1.634 3.885-5.948 9.571-11.436 13.088-1.138.73-4.443 2.638-7.345 4.242-5.362 2.964-7.66 4.377-9.285 5.713-1.765 1.45-4.48 4.224-4.786 4.891-.23.503-.304 1.445-.29 3.686.015 2.55.098 3.286.546 4.824 1.28 4.391 3.49 7.175 6.205 7.824 1.303.311 1.77.296 3.342-.107 3.624-.931 6.702-3.5 16.992-14.186 8.097-8.408 10.799-10.842 14.067-12.672.031-.017.064-.03.095-.047 1.093.759 2.373 1.422 3.221 1.602 2.71.574 28.721 2.944 47.403 4.318 8.207.604 16.372 1.208 18.142 1.342 1.77.134 10.736.21 19.924.17 13.044-.058 18.042.009 20.807-1.867-4.243 6.551-9.009 15.985-6.569 22.843 1.043 2.745 3.456 5.444 5.754 6.438 3.466 1.5 7.874-1.423 12.715-8.428 2.22-3.213 4.69-7.493 8.592-14.894 2.167-4.11 3.373-6.495 4.076-8.534l1.717-.51c.66 0 3.167-.885 5.047-1.782 4.06-1.939 9.627-5.707 15.574-10.543 2.402-1.954 7.135-5.996 9.199-7.846 18.116 13.509 29.936 25.039 32.766 32.033.311.77.629 1.4.705 1.4.433 0 4.516-4.066 6.2-6.175 4.187-5.243 6.403-10.354 6.403-14.76-1.252-15.979-37.802-28.468-28.124-33.08 3.282-1.563.627-3.716 11.572-3.293 7.862-.501 11.288-1.289 14.761-3.395 3.58-2.17 5.372-4.62 6.983-9.545 1.017-3.19.806-4.87.326-9.017 1.96-1.74 2.14-7.427-.22-9.6-1.625-1.913-4.807-3.627-8.503-4.576-8.376-2.15-24.507-1.09-32.883 2.162-1.493.58-2.487 1.192-4.244 2.615-2.451 1.986-5.58 4.847-8.601 7.868-1.114 1.113-1.585 1.613-2.075 2.52l-1.562-1.31c-.293-.296-1.923-1.951-3.621-3.677-16.038-16.305-32.66-28.14-48.71-34.682-10.253-4.18-20.42-6.223-30.366-6.148zm127.783 39.14c1.656-.08 3.338 1.31 3.51 3.819.104 1.518-.393 2.89-1.362 3.76-.361.324-.977.524-1.797.585-1.044.078-1.36-.003-1.95-.494-1.605-1.334-2.077-3.308-1.272-5.324.617-1.547 1.738-2.29 2.87-2.346z",transform:"scale(.26458)"}))});br.displayName="TurtleIcon";const vr=Fe().domain([1,100]).range([0,100]),fr=Z((({movementSpeed:e,setMovementSpeed:t,disallowGoHome:r=!1,disabled:i,cameraId:a})=>{const{api:n}=x(Ze),s=Math.floor(vr.invert(e));return k.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr) 24px",flex:1}},r?k.createElement("div",{style:{gridRow:2,gridColumn:2}}):k.createElement(Et,{disabled:i,onClick:()=>n.cameras.GoHomePtzCamera({id:a}).subscribe(),className:"x-3deye-button--icon",style:{gridRow:2,gridColumn:2,justifySelf:"center",alignSelf:"center",width:36,height:36},title:We.t("ptzControl.moveCameraHome")},k.createElement(pr,{size:24})),Array.from(Array(8),((e,t)=>{const r=[0,1,2,7,3,6,5,4][t],l=t<3?0:t<5?1:2,o=t<4?t%3:(t+1)%3,c=r%2?[0,0]:[-1*(o-1),-1*(l-1)],u=`rotate(${45*r-135}deg)`,d=(o-1)*s,h=(l-1)*-s,m=r%2?24:16;return k.createElement(Et,{disabled:i,key:t,onClick:()=>n.cameras.MoveCamera({id:a},d,h,0,0,0).subscribe(),className:"x-3deye-button--icon",style:{transform:`translate(${10*c[0]}px, ${10*c[1]}px)`,justifySelf:"center",alignSelf:"center",width:36,height:36}},k.createElement(xt,{style:{transform:u},size:m}))})),k.createElement("div",{style:{gridColumn:"4",gridRow:"1 / span 3",position:"relative"}},k.createElement("div",{style:{position:"absolute",top:0,bottom:0,left:0,aspectRatio:"1/1",display:"flex",flexDirection:"column"}},k.createElement(ar,{orientation:"vertical",style:{flex:1,marginTop:10,marginBottom:10},disabled:i,value:e,onChange:t,labelFormat:e=>`${e}%`})),k.createElement(gt,{label:We.t("ptzControl.movementSpeed")},k.createElement("div",{style:{width:24,height:24,position:"absolute",bottom:-24,left:0}},k.createElement(br,null)))))}));fr.displayName="RelativePtzControls";const gr=(e,t,r,i)=>tr(Math.floor((e-t)/r*i),0,i-1),yr=L({value:null,onPointerDown:rr,setCurrentValue:rr,state:{currentIdx:0,currentValue:null,options:[]}});class Er{get currentValue(){return this.options[this.currentIdx]}constructor(e=0){Object.defineProperty(this,"currentIdx",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"setCurrentIdx",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.currentIdx=e}}),Object.defineProperty(this,"setOptions",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.options=e}}),this.currentIdx=e,H(this,{currentIdx:U,options:U.ref,currentValue:z,setCurrentIdx:B,setOptions:B})}}const wr=Z(k.forwardRef((({value:e,onChange:t,children:r,style:i},a)=>{const[n,s]=R(!1),l=T(null),o=D.map(r,(e=>null==e?void 0:e.props.value))||[],c=q((()=>new Er(o.indexOf(e))));c.setOptions(o);const u=D.count(r);j((()=>{c.setCurrentIdx(o.indexOf(e))}),[e]),j((()=>{var e;if(!n)return;const r=null===(e=l.current)||void 0===e?void 0:e.getBoundingClientRect();if(!r)return;const i=({clientX:e})=>{c.setCurrentIdx(gr(e,r.left,r.width,u))},a=()=>{s(!1),t(o[c.currentIdx])};return document.addEventListener("pointermove",i),document.addEventListener("pointerup",a),()=>{document.removeEventListener("pointermove",i),document.removeEventListener("pointerup",a)}}),[n,u]);return k.createElement(yr.Provider,{value:{value:e,state:c,onPointerDown:e=>{const t=l.current;if(!t)return;const{left:r,width:i}=t.getBoundingClientRect(),a=gr(e.clientX,r,i,u);a!==c.currentIdx&&c.setCurrentIdx(a),s(!0)},setCurrentValue:e=>{c.setCurrentIdx(o.indexOf(e))}}},k.createElement("div",{className:"segmented-control-wrapper",style:i,ref:a},k.createElement("div",{role:"radiogroup",ref:l,className:"segmented-control",style:{"--indicator-offset":100*c.currentIdx+"%"}},k.createElement("div",{"aria-hidden":!0,className:ke("segmented-control-indicator",{active:n}),style:{width:100/o.length+"%"}},k.createElement("div",{className:"segmented-control-indicator-inner"})),r)))}))),Pr=Z(k.forwardRef((({value:e,children:t},r)=>{const i=x(yr);return k.createElement("button",{ref:r,role:"radio","aria-checked":i.state.currentValue===e,tabIndex:0,className:ke("segmented-control-button",{current:i.state.currentValue===e}),onPointerDown:i.onPointerDown,onClick:()=>i.setCurrentValue(e)},t)})));Pr.displayName="SegmentedControlOption";const Cr=60,kr=Z((({cameraId:e,disabled:t})=>{const r=x(Ze),i=q((()=>({x:0,y:0,update(e,t){this.x=e,this.y=t}})));j((()=>{const t=Je((()=>({x:i.x,y:i.y}))).pipe(X(((e,t)=>Math.round(100*e.x)===Math.round(t.x)&&Math.round(100*e.y)===Math.round(t.y))),ce(100),ee((t=>t.x||t.y?r.api.cameras.MoveCameraContinuousStart({id:e},Math.round(100*t.x),Math.round(100*t.y),0,30):r.api.cameras.MoveCameraContinuousStop({id:e})))).subscribe();return()=>t.unsubscribe()}),[]);const[{x:a,y:n},s]=Qe((()=>({x:0,y:0,config:Ve.wobbly}))),l=Ue((({down:e,movement:[t,r]})=>{if(t*t+r*r>Cr*Cr){const e=Math.sqrt(t*t+r*r);t=t/e*Cr,r=r/e*Cr}e?i.update(t/Cr,-r/Cr):i.update(0,0),s.start({x:e?t:0,y:e?r:0,immediate:e})}),{enabled:!t});return k.createElement("div",{style:{display:"grid",placeItems:"center",position:"relative",flex:1}},k.createElement("div",{style:{gridRow:"1 / 1",gridColumn:"1 / 1",width:120,height:120,borderRadius:"50%",background:"rgba(255, 255, 255, 0.25)"}}),k.createElement(He.div,{...l(),style:{x:a,y:n,width:50,height:50,background:"rgb(255 255 255 / 0.5)",touchAction:"none",borderRadius:"50%",gridRow:"1 / 1",gridColumn:"1 / 1"}}))}));kr.displayName="ContinuousPtzControls";const Rr=Tt({viewBox:"0 0 24 24",svg:k.createElement(k.Fragment,null,k.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),k.createElement("path",{d:"M20 15.256v1.828A9 2 0 0 1 21 18a9 2 0 0 1-9 2 9 2 0 0 1-9-2 9 2 0 0 1 1-.914v-1.824A11 4 0 0 0 1 18a11 4 0 0 0 11 4 11 4 0 0 0 11-4 11 4 0 0 0-3-2.744z"}),k.createElement("path",{d:"M12 3 1 11.4l1.21 1.59L4 11.62V19h2v-8.9l6-4.58 6 4.58V19h2v-7.38l1.79 1.36L23 11.4 12 3z"}),k.createElement("path",{d:"m16 14-4 4-4-4 1.41-1.41L11 14.17v-4.15l2-.02v4.17l1.59-1.59z"}))});Rr.displayName="HomeSaveIcon";const Or=Z((({cameraId:e,disabled:t})=>{const{api:r,notification:i}=x(Ze);return k.createElement(Et,{disabled:t,className:"x-3deye-button--icon",style:{width:36,height:36},title:We.t("ptzControl.setHome"),onClick:()=>r.cameras.SetHomePtzCamera({id:e}).subscribe((e=>{e.success?i.success(We.t("cameraManager.cameraPtzHomeSet")):(i.error(We.t("cameraManager.errorWhileUpdatingHomePositionDescription")),console.error(e.error))}))},k.createElement(Rr,null))}));Or.displayName="SetHome";const Tr=Tt({viewBox:"0 0 24 24",svg:k.createElement(k.Fragment,null,k.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),k.createElement("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"}))});Tr.displayName="ZoomOutIcon";const Sr=Tt({viewBox:"0 0 24 24",svg:k.createElement(k.Fragment,null,k.createElement("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"}),k.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}),k.createElement("path",{d:"M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"}))});Sr.displayName="ZoomInIcon";const xr=Tt({viewBox:"0 0 100 100",svg:k.createElement(k.Fragment,null,k.createElement("path",{d:"M87.783 47.898c-1.132-2.958-8.699-12.701-10.266-13.223-1.565-.521-4.872-.348-4.872-.348-1.479-16.616-5.132-18.442-7.654-20.269-2.523-1.826-2.263 5.395-2.263 5.395-.87-3.045-5.307-8.004-8.352-7.221-3.045.783-1.391 10.788-.956 13.57.437 2.785 4.35 6.785 5.827 8.96 1.479 2.174.697 4.088.697 4.088-1.218 1.741-1.044 6.119-1.044 6.119-3.043-.494-6.001 3.016-6.001 3.016-6.874-2.956-10.808-3.016-10.808-3.016-20.86.208-23.515 20.064-23.822 26.65-.745-.324-1.78-.315-3.116.737-3.071 2.419-.88 5.383-.88 5.383-.865-.238-1.722-4.225-1.722-4.225-1.963 4.198 1.606 7.065 1.606 7.065-1.33.285-3.53-1.206-3.53-1.206.208.281 1.585 2.426 4.26 5.227 3.376 3.532 8.355 2.771 10.81 2.676.088.018.163.01.233-.01l.071-.002.012-.03c.386-.172.692-.719 2.295-.182l2.06 1.296s18.203.169 21.053 0c1.546-.092-1.566-4.523-1.566-4.523 5.654-.349 8.699-2.437 8.699-2.437l8.735 7.129h9.164c1.801 0 .697-1.93.697-1.93l-8.593-7.809.956-1.652c3.306-.696 5.655-3.915 6.001-4.523.35-.609.089-5.132.089-5.132s.349.435 1.826-1.393c1.48-1.827-.173-4.697-.607-5.307-.434-.607-1.305-4.438-1.305-4.438s5.827-.348 7.22-1.044c1.389-.693 6.176-4.434 5.046-7.391z"}))});xr.displayName="RabbitIcon";const Ir=Z((({cameraId:e,disabled:t})=>{const{api:r}=x(Ze);return k.createElement(Et,{disabled:t,className:"x-3deye-button--icon",style:{width:36,height:36},title:We.t("ptzControl.moveCameraHome"),onClick:()=>r.cameras.GoHomePtzCamera({id:e}).subscribe()},k.createElement(pr,null))}));Ir.displayName="GoHome";const jr=Fe().domain([1,100]).range([0,100]),Mr=Z((({cameraId:e,style:t,disabled:r,initialZoomSpeed:i=50,initialMovementSpeed:a=50,disallowHomePositionUpdate:n=!1,disallowGoHome:s=!1})=>{const{api:l}=x(Ze),[o,c]=R(Nr.Relative),[u,d]=R(i),[h,m]=R(a),p=Math.floor(jr.invert(u));return k.createElement("div",{style:{display:"flex",flexDirection:"column",...t}},k.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},k.createElement(Et,{disabled:r,onClick:()=>l.cameras.MoveCamera({id:e},0,0,-p,0,0).subscribe(),className:"x-3deye-button--icon",style:{gridColumn:"1/1",justifySelf:"start"}},k.createElement(Tr,{size:24})),k.createElement(Et,{disabled:r,onClick:()=>l.cameras.MoveCamera({id:e},0,0,p,0,0).subscribe(),className:"x-3deye-button--icon",style:{gridColumn:"2/3",justifySelf:"end"}},k.createElement(Sr,{size:24}))),k.createElement("div",{style:{display:"flex",alignItems:"center"}},k.createElement(gt,{label:We.t("ptzControl.zoomSpeed")},k.createElement("div",null,k.createElement(br,null))),k.createElement(ar,{style:{flex:1,marginLeft:10,marginRight:10},disabled:r,value:u,onChange:d,labelFormat:e=>`${e}%`}),k.createElement(xr,null)),o===Nr.Relative?k.createElement(fr,{cameraId:e,disabled:r,movementSpeed:h,setMovementSpeed:m,disallowGoHome:s}):k.createElement(kr,{cameraId:e,disabled:r}),k.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},n?k.createElement("div",{style:{width:24,height:24}}):k.createElement(Or,{cameraId:e,disabled:r}),o===Nr.Continuous&&!s&&k.createElement(Ir,{cameraId:e,disabled:r})),k.createElement(wr,{value:o,onChange:c},k.createElement(Pr,{value:Nr.Relative},We.t("ptzControl.relative")),k.createElement(Pr,{value:Nr.Continuous},We.t("ptzControl.continuous"))))}));var Nr;!function(e){e[e.Relative=0]="Relative",e[e.Continuous=1]="Continuous"}(Nr||(Nr={}));const Lr=Z((e=>{var t;const r=null!==(t=x(_))&&void 0!==t?t:A;return k.createElement(Ze.Provider,{value:r},k.createElement(Mr,{...e}))}));Lr.displayName="PtzControls";const Dr=Z(k.forwardRef(((e,t)=>{var r;const i=null!==(r=x(_))&&void 0!==r?r:A,{ref:a,toggle:n,active:s,enabled:l}=ur(),{cameraId:o,startTime:c,onDoubleClick:u,onMouseDown:d,onRequestClose:h,playerRef:m,controls:p=k.createElement(cr,{fullscreenControl:l?k.createElement(mr,{active:s,toggle:n}):void 0,onRequestClose:h}),...b}=e;if(!i.cameras.loaded)return k.createElement("div",{ref:t,...b});const v=o?i.cameras.camerasById.get(o):null;if(!v)return console.warn("can't render player for unknown camera"),k.createElement("div",{ref:t,...b});const f={hideCameraTitle:!0,camera:v,controls:p,onDoubleClick:u,onMouseDown:d,startTime:c,controllerRef:m,...b},g=ze(t,qe?void 0:a),y=qe?a:void 0;return k.createElement(Ze.Provider,{value:i},k.createElement(_t,{ref:g,videoRef:y,archivesStore:i.archives,webRtcOptions:{enabled:!0},...f}))})));function _r(){const[e,t]=R(null);return{playerRef:S((e=>{t(null!=e?e:null)}),[]),player:e}}Dr.displayName="CameraPlayer";const Ar=Tt({viewBox:"0 0 24 24",svg:k.createElement("g",null,k.createElement("path",{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}),k.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});Ar.displayName="CloseIcon";const zr=Tt({viewBox:"0 0 24 24",svg:k.createElement("path",{d:"M7,2l12,11.2l-5.8,0.5l3.3,7.3l-2.2,1l-3.2-7.4L7,18.5V2"})});zr.displayName="CursorIcon";const Fr=e=>e.stopPropagation(),Qr=Z((e=>{const t=T(null),r=q((()=>({current:null}))),i=q((()=>({dragging:!1}))),a=T(new s),l=S((e=>{e.persist(),e.stopPropagation(),a.current.next(e)}),[]),o=B((()=>{r.current=null,e.onRequestCancel()})),c=B((()=>{r.current=null,e.onClose()}));return j((()=>{const s=a.current.pipe(ue((a=>{const s=a.clientX,l=a.clientY;i.dragging=!0;const{top:o,left:c}=t.current.getBoundingClientRect();return n(document,"mousemove").pipe(J((t=>{const r=s-c,i=l-o,a=t.clientX-s,n=t.clientY-l,u=(n>=0?i:i+n)/e.height,d=(a>=0?r:r+a)/e.width,h=u+Math.abs(n)/e.height,m=d+Math.abs(a)/e.width;return{top:tr(u,0,1),left:tr(d,0,1),bottom:tr(h,0,1),right:tr(m,0,1)}})),ne(n(document,"mouseup").pipe(ie((()=>{if(i.dragging=!1,!r.current)return;const t=(r.current.bottom-r.current.top)*(r.current.right-r.current.left);e.width*e.height*t<100?r.current=null:e.onSelect({Top:r.current.top,Left:r.current.left,Bottom:r.current.bottom,Right:r.current.right})})))))}))).subscribe((e=>{e&&(r.current=e)}));return()=>s.unsubscribe()}),[e.width,e.height]),j((()=>{if(r.current)return;const e=e=>{const t=e.target;/^(input|select|textarea)$/i.test(t.tagName)||"Escape"===e.code&&c()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[null===r.current]),k.createElement("div",{ref:t,onMouseDown:l,style:{position:"absolute",top:0,left:0,width:e.width,height:e.height,display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column"}},r.current?k.createElement("div",{className:"box-selector",style:{position:"absolute",top:100*r.current.top+"%",left:100*r.current.left+"%",bottom:100*(1-r.current.bottom)+"%",right:100*(1-r.current.right)+"%"}},i.dragging?null:k.createElement(Et,{className:"box-selector-close",onMouseDown:Fr,onClick:c,style:{position:"absolute",top:-10,right:-10,padding:2,width:20,height:20,borderRadius:10}},k.createElement(Ar,{size:16}))):k.createElement("div",{className:"box-selector-select"},k.createElement("div",null,We.t("selectArea")),k.createElement("div",{className:"box-selector-preview"},k.createElement("div",{className:"box-selector"},k.createElement(zr,{size:16}))),k.createElement(Et,{className:"box-selector-cancel",onClick:o},We.t("button.cancel"))))})),Vr=Z((({onSelect:e,onRequestCancel:t,onClose:r})=>{const i=x(ht);return k.createElement(Qr,{width:i.width,height:i.height,onSelect:e,onRequestCancel:t,onClose:r})}));Vr.displayName="BoxSelector";class Hr{get isOnline(){return this.enabled&&"Started"===this.state}get supportsWebRTC(){return!!this.webRtcUrl}constructor(e){Object.defineProperty(this,"id",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"name",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"imageUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"streamUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"dashStreamUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"address",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"archiveDuration",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"dvrWindowLength",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"stateUpdatedAt",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"raw",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"enabled",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"isMicEnabled",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"pin",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"webRtcUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"isPtz",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"permissions",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"update",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.raw=e,this.id=e.id,this.name=e.name,this.isPtz=e.isPTZ,this.isMicEnabled=e.isMicEnabled,this.imageUrl=e.imageUrl,this.address=e.cameraAddress?JSON.parse(e.cameraAddress):null,this.streamUrl=e.streamUrl,this.dashStreamUrl=e.dashStreamUrl,this.enabled=e.enabled,this.state=this.raw.cameraState,this.dvrWindowLength=e.dvrWindowLength?1e3*e.dvrWindowLength:e.dvrWindowLength,this.archiveDuration=e.archiveDuration,this.pin=e.pin,this.webRtcUrl=e.webRtcUrl,this.permissions=e.permissions||0,this.stateUpdatedAt=new Date(e.cameraStateChangedTime)}}),Object.defineProperty(this,"can",{enumerable:!0,configurable:!0,writable:!0,value:e=>this.permissions&e}),H(this,{name:U,streamUrl:U,dashStreamUrl:U,enabled:U,isMicEnabled:U,state:U,pin:U,webRtcUrl:U,permissions:U,isOnline:z,update:B}),this.update(e)}}var Ur,Br;!function(e){e[e.View=1]="View",e[e.SaveClip=2]="SaveClip",e[e.Share=4]="Share",e[e.Ptz=8]="Ptz",e[e.EditSettings=16]="EditSettings",e[e.Timelapse=32]="Timelapse",e[e.Delete=64]="Delete"}(Ur||(Ur={})),(Br={resources:{en:{translation:Be}}})&&Object.assign($e,Br),We.isInitialized?($e.resources?Object.keys($e.resources).forEach((e=>{We.addResourceBundle(e,"translation",$e.resources[e].translation,!0)})):console.warn("i18n is already initialized"),t(We.t)):r(We.init($e));export{Vr as BoxSelector,Hr as Camera,Dr as CameraPlayer,Ft as CloseControl,At as Control,Bt as Controls,cr as DefaultControls,mr as FullscreenControl,Gt as PlayPauseControl,Wt as PlaybackRateControl,_t as Player,ht as PlayerContext,Lr as PtzControls,Xt as ResizeModeControl,er as SnapshotControl,or as VolumeControl,Dr as default,ur as useFullscreen,_r as usePlayerRef};
+import e from"i18next";import{of as t,from as i,Observable as r,merge as a,fromEvent as n,Subject as s,EMPTY as l,Subscription as o,timer as c,switchMap as u,filter as d,timeout as h,take as m,TimeoutError as p,throwError as b,mergeMap as v,debounceTime as f,map as g,pairwise as y,interval as w,concatMap as E,delay as P,noop as C}from"rxjs";import R,{useState as k,cloneElement as O,useRef as T,useCallback as S,useContext as M,useMemo as x,useEffect as I,useImperativeHandle as j,useLayoutEffect as N,createContext as L,Children as D}from"react";import{AppContext as _,app as A}from"@3deye-toolkit/core";import{computed as F,observe as z,reaction as Q,runInAction as V,makeObservable as H,observable as U,action as B,when as W,makeAutoObservable as $}from"mobx";import{observer as q,useLocalObservable as Z}from"mobx-react-lite";import Y from"resize-observer-polyfill";import{mapTo as G,map as X,distinctUntilChanged as J,audit as K,switchMap as ee,debounceTime as te,filter as ie,tap as re,startWith as ae,takeUntil as ne,mergeMap as se,take as le,pairwise as oe,auditTime as ce}from"rxjs/operators";import ue,{ErrorDetails as de,ErrorTypes as he}from"hls.js";import me from"reconnecting-websocket";import{Controller as pe,useSpring as be,config as ve,animated as fe}from"@react-spring/web";import{retryBackoff as ge}from"backoff-rxjs";import{decomposeTSR as ye,identity as we,compose as Ee,rotate as Pe,translate as Ce,scale as Re,inverse as ke,applyToPoint as Oe,fromTwoMovingPoints as Te,fromObject as Se,applyToPoints as Me,toCSS as xe}from"transformation-matrix";import Ie from"clsx";import je from"react-ink";import{useFloating as Ne,offset as Le,flip as De,shift as _e,autoUpdate as Ae,useInteractions as Fe,useHover as ze,useRole as Qe,useDismiss as Ve,FloatingPortal as He,arrow as Ue,FloatingFocusManager as Be}from"@floating-ui/react";import We from"@seznam/compose-react-refs";import{useDrag as $e,useGesture as qe}from"@use-gesture/react";import{scaleLinear as Ze,scaleLog as Ye}from"d3-scale";var Ge={playerTools:{resetRotation:"reset rotation",live:"live",goLive:"go live",closePlayer:"close player",playbackRate:"set playback rate",play:"play",pause:"pause",snapshot:"capture video frame",volume:"volume",fullScreen:"toggle full screen"},player:{playbackTimeoutError:"Error occured. No playback in the last {{count}} seconds",cameraIsOffline:"Camera is offline",cameraIsDisabled:"Camera is disabled",noPlayableStream:"No playable stream available",noVideoTrack:"No video track",genericError:"An error occured. Please try again later"},videoResizeMode:{fit:"keep video's aspect ratio",stretch:"stretch video"},ptzControl:{zoomSpeed:"zoom speed",relative:"Relative",continuous:"Continuous",moveCameraHome:"move camera to home position",movementSpeed:"movement speed",setHome:"set as home"},cameraManager:{cameraPtzHomeSet:"New home position is set",errorWhileUpdatingHomePositionDescription:"Sorry, camera PTZ failed to respond to the request.\nPlease make sure your have Internet connection and refresh your browser"},selectArea:"select area",button:{cancel:"Cancel"}};const Xe={detection:{order:["querystring","htmlTag","navigator"],lookupQuerystring:"lang"},fallbackLng:"en",load:"all",interpolation:{escapeValue:!1}},Je=e.createInstance(),Ke=R.createContext(null),et=!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);var tt,it,rt;function at(e,t=!1){const i=F(e);return new r((e=>{const r=z(i,(({newValue:t})=>e.next(t)),t);return()=>r()}))}!function(e){e[e.CONNECTING=0]="CONNECTING",e[e.CONNECTED=1]="CONNECTED",e[e.RECONNECTING=2]="RECONNECTING",e[e.DISCONNECTED=3]="DISCONNECTED"}(tt||(tt={})),function(e){e[e.INFO=0]="INFO",e[e.WARN=1]="WARN",e[e.ERROR=2]="ERROR"}(it||(it={})),function(e){e[e.Motion=0]="Motion",e[e.Tampering=1]="Tampering",e[e.PanTiltZoom=2]="PanTiltZoom",e[e.CrossLine=3]="CrossLine",e[e.Intrusion=4]="Intrusion",e[e.LicensePlate=5]="LicensePlate",e[e.FaceDetection=6]="FaceDetection",e[e.Audio=7]="Audio",e[e.Analytic=8]="Analytic",e[e.SpeedDetection=9]="SpeedDetection",e[e.PeopleCounter=10]="PeopleCounter",e[e.Temperature=11]="Temperature",e[e.PoS=12]="PoS",e[e.GPS=13]="GPS",e[e.DigitalInput=14]="DigitalInput",e[e.Normal=15]="Normal",e[e.Suspicious=16]="Suspicious",e[e.Loitering=17]="Loitering",e[e.Vandalism=18]="Vandalism",e[e.Trespass=19]="Trespass",e[e.Emergency=20]="Emergency",e[e.LifeInDanger=21]="LifeInDanger",e[e.ErroneousAlert=22]="ErroneousAlert",e[e.Misidentification=23]="Misidentification",e[e.Fire=24]="Fire",e[e.MedicalDuress=25]="MedicalDuress",e[e.HoldUp=26]="HoldUp",e[e.CheckIn=27]="CheckIn",e[e.CheckOut=28]="CheckOut",e[e.ClockIn=29]="ClockIn",e[e.ClockOut=30]="ClockOut",e[e.ParkingStart=31]="ParkingStart",e[e.ParkingEnd=32]="ParkingEnd",e[e.ParkingViolation=33]="ParkingViolation",e[e.GateAccess=34]="GateAccess",e[e.DoorAccess=35]="DoorAccess",e[e.TemperatureCheck=36]="TemperatureCheck",e[e.IDCheck=37]="IDCheck",e[e.PPECheck=38]="PPECheck",e[e.WelfareCheck=39]="WelfareCheck",e[e.VehicleBreakIn=40]="VehicleBreakIn",e[e.DrugTrafficking=41]="DrugTrafficking",e[e.Assault=42]="Assault",e[e.PackageDelivery=43]="PackageDelivery",e[e.Uncategorized=999]="Uncategorized"}(rt||(rt={}));class nt extends Error{constructor(e,t,i){super(t),Object.defineProperty(this,"name",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"message",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"cause",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.name=e,this.message=t,this.cause=i}}class st extends nt{}class lt{constructor(e,t){Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]});const i=a(n(e,"play").pipe(G(!1)),n(e,"pause").pipe(G(!0))),r=n(e,"volumechange").pipe(X((()=>e.volume)),J()),o=n(e,"timeupdate"),c=a(n(e,et?"loadeddata":"loadedmetadata"),n(e,"playing")),u=n(e,"ended"),d=n(e,"volumechange").pipe(X((()=>e.muted)),J());t.attach(e,{canSeek$:c,ended$:u,progress$:o,volume$:r,muted$:d}),this.disposables.push(Q((()=>t.stream),(t=>{e.srcObject=t}))),this.disposables.push(Q((()=>t.volume),(t=>{e.volume=t}))),this.disposables.push(Q((()=>t.playbackRate),(t=>{e.playbackRate=t}))),this.disposables.push(n(e,"canplay").subscribe((()=>{e.playbackRate!==t.playbackRate&&(e.playbackRate=t.playbackRate)}))),this.disposables.push(n(e,"error").subscribe((()=>{e.error&&(console.error(e.error),t.error=new st("MEDIA_ERROR",e.error.message,e.error))}))),this.disposables.push(n(e,"seeking").subscribe((()=>{V((()=>{t.behavior&&(t.behavior.loading=!0)}))}))),this.disposables.push(n(e,"pause").subscribe((()=>{V((()=>{t.behavior&&(t.behavior.loading=!1)}))})));const h=new s;let m=!1;this.disposables.push(a(at((()=>t.paused)),h).pipe(K((t=>(m=t,t&&e.paused||!t&&!e.paused?l:t?(e.pause(),l):e.play().catch((e=>console.error(e))))))).subscribe((e=>{e!==m&&h.next(e)}))),this.disposables.push(i.subscribe((e=>{(e&&!t.paused||!e&&t.paused)&&h.next(t.paused)}))),this.disposables.push(n(e,"seeked").subscribe((()=>{t.paused||h.next(!1)})))}dispose(){this.disposables.forEach((e=>{e instanceof o?e.closed||e.unsubscribe():e()}))}}class ot{constructor(e,t){Object.defineProperty(this,"player",{enumerable:!0,configurable:!0,writable:!0,value:e}),Object.defineProperty(this,"video",{enumerable:!0,configurable:!0,writable:!0,value:t}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"loading",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"seek",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(!this.player.chunk)return;const t=this.player.clip&&this.player.clip.isTimelapse?1e3*this.player.chunk.duration/(+this.player.chunk.endTime-+this.player.chunk.startTime):1,i=(+e-+this.player.chunk.startTime)/1e3*t;this.video.currentTime=i}}),this.playNextChunkOnComplete(),this.reactToChunk(),this.initLoadingTimeout(),H(this,{loading:U,error:U})}getCurrentTime(){const e=this.player.chunk;if(!e)return null;const{clip:t}=this.player,i=t&&t.isTimelapse&&this.video.duration?(+e.endTime-+e.startTime)/this.video.duration:1e3;return new Date(+e.startTime+this.video.currentTime*i)}reactToChunk(){this.disposables.push(Q((()=>this.player.chunk),(e=>{if(!e)return this.video.pause(),this.video.removeAttribute("src"),void this.video.load();this.loading=!0,this.video.src=e.streamUrl,this.video.playbackRate=this.player.playbackRate}),{fireImmediately:!0}))}playNextChunkOnComplete(){this.disposables.push(this.player.ended$.subscribe((()=>{const{currentTime:e}=this.player;if(e)if(this.player.clip&&this.player.clip.isTimelapse){const{archives:t}=this.player.clip;if(t){const i=t.find((t=>t.startTime>=e));if(!i||i===this.player.chunk)return;return void this.player.changeMedia({time:null==i?void 0:i.startTime,chunk:i})}}else this.player.changeMedia({time:new Date(+this.player.chunk.endTime+1)});else console.warn("Couldn't jump to the next chunk. Current player time is unknown")})))}initLoadingTimeout(){this.disposables.push(at((()=>this.loading),!0).pipe(ee((e=>e?at((()=>this.loading),!0).pipe(te(3e4)):l))).subscribe((()=>{this.error=new st("PLAYBACK_TIMEOUT_ERROR","playback timeout",{timeout:Math.round(30)})})))}resetVideo(){const{video:e}=this;e.pause(),e.removeAttribute("src"),e.load()}dispose(){this.disposables.forEach((e=>{e instanceof o?e.closed||e.unsubscribe():e()})),this.resetVideo(),this.player=null}}class ct{constructor(e,t){Object.defineProperty(this,"player",{enumerable:!0,configurable:!0,writable:!0,value:e}),Object.defineProperty(this,"video",{enumerable:!0,configurable:!0,writable:!0,value:t}),Object.defineProperty(this,"live",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"loading",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"availabilityStartTime",{enumerable:!0,configurable:!0,writable:!0,value:-1}),this.initLoadingTimeout(),this.reactToCamera(),this.catchUpAfterPause(),H(this,{loading:U,error:U})}goLive(){this.video.currentTime=this.video.seekable.end(0)}getCurrentTime(){return this.availabilityStartTime<0&&this.updateAvailabilityStartTime(),new Date(this.availabilityStartTime+1e3*this.video.currentTime)}updateAvailabilityStartTime(){this.video.seekable.length&&(this.availabilityStartTime=Date.now()-1e3*this.video.seekable.end(0))}getDateRange(){const{availabilityStartTime:e}=this;if(e<0)return null;if(!this.video.seekable.length)return null;return[new Date(e+1e3*this.video.seekable.start(0)),new Date(e+1e3*this.video.seekable.end(0))]}seek(e){this.live=!1,this.availabilityStartTime<0&&(this.updateAvailabilityStartTime(),this.availabilityStartTime<0)?this.player.seekTime=e:this.video.currentTime=(+e-+this.availabilityStartTime)/1e3}initLoadingTimeout(){this.disposables.push(at((()=>this.loading),!0).pipe(ee((e=>e?at((()=>this.loading),!0).pipe(te(3e4)):l))).subscribe((()=>{V((()=>{this.error=new st("PLAYBACK_TIMEOUT_ERROR","playback timeout",{timeout:Math.round(30)})}))})))}reactToCamera(){this.disposables.push(Q((()=>({streamUrl:this.player.camera.streamUrl})),(()=>{const e=this.player.camera,{streamUrl:t}=e.raw;V((()=>{this.loading=!0})),this.availabilityStartTime=-1,this.video.src="",t?this.video.src=t:V((()=>{this.player.camera.isOnline?this.error=new st("NO_PLAYABLE_STREAM_ERROR","no playable stream"):this.error=new st("CAMERA_OFFLINE_ERROR","camera offline")}))}),{fireImmediately:!0}))}catchUpAfterPause(){this.disposables.push(n(this.video,"play").pipe(ie((()=>this.live))).subscribe((()=>{console.log("unpaused live HLS"),this.goLive()})))}dispose(){this.disposables.forEach((e=>{e instanceof o?e.closed||e.unsubscribe():e()}))}}var ut;!function(e){e.Initial="initial",e.InitiallyPaused="initially-paused",e.Playing="playing",e.Paused="paused",e.Reconnecting="reconnecting",e.Stalled="stalled",e.Error="error",e.Failed="failed"}(ut||(ut={}));const dt=3e4;class ht{constructor(e,t,i,a){Object.defineProperty(this,"player",{enumerable:!0,configurable:!0,writable:!0,value:e}),Object.defineProperty(this,"video",{enumerable:!0,configurable:!0,writable:!0,value:i}),Object.defineProperty(this,"auth",{enumerable:!0,configurable:!0,writable:!0,value:a}),Object.defineProperty(this,"hlsPlayer",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"live",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"loading",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:ut.Initial}),Object.defineProperty(this,"seek",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(!this.hlsPlayer)return;const t=this.getPlayingFragment();if(!(null==t?void 0:t.relurl))return void(this.player.seekTime=e);const i=+t.relurl.substring(0,t.relurl.length-3)-1e3*t.start;this.video.currentTime=(+e-i)/1e3,this.live=!1}}),Object.defineProperty(this,"getDateRange",{enumerable:!0,configurable:!0,writable:!0,value:()=>{if(!this.hlsPlayer)return null;const e=this.video.seekable;if(!e.length)return null;const t=e.start(0),i=e.end(e.length-1),r=this.getPlayingFragment();if(!(null==r?void 0:r.relurl))return null;const a=+r.relurl.substring(0,r.relurl.length-3)-1e3*r.start;return[new Date(1e3*t+a),new Date(1e3*i+a)]}}),Object.defineProperty(this,"goLive",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.seek(new Date),this.live=!0}}),H(this,{hlsPlayer:U.ref,goLive:!0,live:U,loading:U,error:U,state:U,seek:B,dispose:B}),this.live=t,this.disposables.push(at((()=>this.hlsPlayer),!0).pipe(ee((e=>e?new r((t=>{e.on(ue.Events.ERROR,((e,i)=>{t.next(i)}))})):l))).subscribe((e=>{console.error(e),V((()=>{var t,i;if(e.details!==de.BUFFER_ADD_CODEC_ERROR)return e.type===he.NETWORK_ERROR&&[de.FRAG_LOAD_ERROR,de.MANIFEST_LOAD_ERROR].includes(e.details)&&403===(null===(t=e.response)||void 0===t?void 0:t.code)?(this.auth.invalidateToken(),void(e.fatal&&(null===(i=this.hlsPlayer)||void 0===i||i.startLoad()))):void(e.fatal&&(e.type===he.MEDIA_ERROR&&this.hlsPlayer&&this.hlsPlayer.recoverMediaError(),this.error=new st("PLAYER_ERROR","HLS error",e)));this.error=new st("PLAYER_ERROR","HLS error",e)}))}))),null===e.seekTime&&(this.live=!0),this.initDelayCompensation(),this.initPlayerState(),this.initLoadingTimeout(),this.reactToCamera(),this.catchUpAfterPause()}initDelayCompensation(){this.disposables.push(at((()=>this.live),!0).pipe(ee((()=>this.live?at((()=>this.state),!0).pipe(ee((e=>e!==ut.Playing?l:c(5e3+5e3*Math.random(),3e4)))):l))).subscribe((()=>{const e=this.getDateRange(),{currentTime:t}=this.player;e&&t&&+e[1]-+t>6e4&&this.goLive()})))}initPlayerState(){this.disposables.push(this.player.progress$.pipe(re((()=>{this.state===ut.Playing||this.player.paused||V((()=>this.state=ut.Playing))})),te(2e3),ie((()=>this.state===ut.Playing))).subscribe((()=>{V((()=>this.state=ut.Stalled))}))),this.disposables.push(Q((()=>this.player.paused),(()=>{this.player.paused&&(this.state=ut.Paused)})))}getPlayingFragment(){var e,t,i;return null!==(i=null===(t=null===(e=this.hlsPlayer)||void 0===e?void 0:e.streamController)||void 0===t?void 0:t.fragPlaying)&&void 0!==i?i:null}getCurrentTime(){if(!this.hlsPlayer)return null;const e=this.getPlayingFragment();return(null==e?void 0:e.relurl)?new Date(+e.relurl.substring(0,e.relurl.length-3)+1e3*(this.video.currentTime-e.start)):null}initLoadingTimeout(){this.disposables.push(at((()=>this.loading),!0).pipe(ee((e=>e?at((()=>this.loading),!0).pipe(te(dt)):l))).subscribe((()=>{V((()=>{this.player.camera.isOnline?this.error=new st("PLAYBACK_TIMEOUT_ERROR","playback timeout",{timeout:Math.round(30)}):this.error=new st("CAMERA_OFFLINE_ERROR","camera is offline")}))}))),this.disposables.push(at((()=>this.state),!0).pipe(ee((e=>e!==ut.Stalled?l:c(dt)))).subscribe((()=>{V((()=>{this.player.camera.isOnline?this.error||(this.error=new st("PLAYBACK_TIMEOUT_ERROR","playback timeout",{timeout:Math.round(30)})):this.error=new st("CAMERA_OFFLINE_ERROR","camera is offline")}))})))}reactToCamera(){const{player:e,auth:t}=this;this.disposables.push(Q((()=>({streamUrl:e.camera.streamUrl})),(({streamUrl:i})=>{V((()=>{this.loading=!0})),this.hlsPlayer&&this.hlsPlayer.destroy(),i?(this.hlsPlayer=new ue({xhrSetup:(e,i)=>{var r;const a=null===(r=t.token)||void 0===r?void 0:r.accessToken;i.includes("?token=")?i=i.replace(/token=\d+/,`token=${a}`):i+=`?token=${a}`,e.open("GET",i,!0)}}),this.hlsPlayer.attachMedia(this.video),this.hlsPlayer.loadSource(i)):V((()=>{e.camera.isOnline?this.error=new st("NO_PLAYABLE_STREAM_ERROR","no playable stream"):this.error=new st("CAMERA_OFFLINE_ERROR","camera is offline")}))}),{fireImmediately:!0}))}catchUpAfterPause(){this.disposables.push(n(this.video,"play").pipe(ie((()=>this.live))).subscribe(this.goLive))}dispose(){this.disposables.forEach((e=>{e instanceof o?e.closed||e.unsubscribe():e()})),this.hlsPlayer&&this.hlsPlayer.destroy(),this.hlsPlayer=null,this.player=null}}globalThis.Hls=ue;const mt=new Map;class pt{constructor(e){Object.defineProperty(this,"url",{enumerable:!0,configurable:!0,writable:!0,value:e}),Object.defineProperty(this,"connection",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"sessionId",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"keepAliveIntervalId",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"pluginsCount",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"registerPlugin",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.pluginsCount++}}),Object.defineProperty(this,"deregisterPlugin",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.pluginsCount--}}),Object.defineProperty(this,"keepAlive",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.connection.send(JSON.stringify({janus:"keepalive",session_id:this.sessionId,transaction:this.randomString(12)}))}}),H(this,{sessionId:U,pluginsCount:U,registerPlugin:B,deregisterPlugin:B}),this.init()}async init(){const{url:e}=this;this.connection=new me(e,"janus-protocol",{maxReconnectionDelay:3e4}),this.startKeepingAlive(),this.stopWhenNoLongerNeeded(),this.connection.addEventListener("message",(({data:e})=>{const t=JSON.parse(e);"error"===t.janus&&458===t.error.code&&this.createSession()})),await new Promise((e=>{const t=()=>{this.connection.removeEventListener("open",t),e(void 0)};this.connection.addEventListener("open",t)})),this.createSession()}stopWhenNoLongerNeeded(){at((()=>this.pluginsCount),!0).pipe(ee((e=>e?l:c(1e4)))).subscribe((()=>{this.dispose()}))}dispose(){this.connection.close(),mt.delete(this.url)}async createSession(){const e=this.randomString(12);this.connection.send(JSON.stringify({janus:"create",transaction:e}));const t=await new Promise(((t,i)=>{const r=a=>{const n=JSON.parse(a.data);if(n.transaction===e){if(this.connection.removeEventListener("message",r),"success"===n.janus)return t(n.data.id);i(n.janus.error)}};this.connection.addEventListener("message",r)}));V((()=>this.sessionId=t))}startKeepingAlive(){W((()=>!!this.sessionId),(()=>{n(this.connection,"open").pipe(ae(null),ee((()=>c(0,3e4).pipe(ne(n(this.connection,"close")))))).subscribe(this.keepAlive)}))}randomString(e){const t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let i="";for(let r=0;r<e;r++){const e=Math.floor(62*Math.random());i+=t.substring(e,e+1)}return i}}class bt extends nt{}class vt{constructor(e,i,r,s=["tcp"]){Object.defineProperty(this,"allowedIceCandidateProtocols",{enumerable:!0,configurable:!0,writable:!0,value:s}),Object.defineProperty(this,"server",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"pc",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"pluginHandleId",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"stream",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"stats",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"cameraId",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"pin",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"connectionState",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"disposeDelayedStream",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"startTransaction",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"statsRequest",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"onInit",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(!e)return;const{cameraId:t,pin:i}=this;this.pc&&(this.disposeDelayedStream&&(this.disposeDelayedStream(),this.disposeDelayedStream=null),this.safeCloseRTCPeerConnection(this.pc));this.pc=new RTCPeerConnection({iceServers:[{urls:"stun:stun.l.google.com:19302"}],bundlePolicy:"max-bundle"}),this.server.connection.send(JSON.stringify({janus:"message",handle_id:e,session_id:this.server.sessionId,body:{request:"watch",id:t,pin:i},transaction:this.server.randomString(12)}))}}),Object.defineProperty(this,"pause",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.server.connection.send(JSON.stringify({janus:"message",handle_id:this.pluginHandleId,session_id:this.server.sessionId,body:{request:"pause",id:this.cameraId},transaction:this.server.randomString(12)}))}}),Object.defineProperty(this,"resume",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.server.connection.send(JSON.stringify({janus:"message",handle_id:this.pluginHandleId,session_id:this.server.sessionId,body:{request:"start",id:this.cameraId},transaction:this.server.randomString(12)}))}}),Object.defineProperty(this,"onmessage",{enumerable:!0,configurable:!0,writable:!0,value:({data:e})=>{var t;const{pluginHandleId:i}=this;if(!i)return;const r=JSON.parse(e);return"error"===r.janus&&r.transaction===this.startTransaction?(this.error=new bt("STREAMING_ERROR",r.error.reason,r.error),console.error(r.error)):"sender"in r&&r.sender===i?"hangup"===r.janus?("ICE FAILED"===r.reason.toUpperCase()?this.error=new bt("ICE_FAILED",r.reason,r):this.error=new bt("STREAMING_ERROR",r.reason,r),console.error(r.reason)):"event"===r.janus&&(null===(t=r.plugindata)||void 0===t?void 0:t.data)&&"error"in r.plugindata.data?(this.error=new bt("STREAMING_ERROR",r.plugindata.data.error.reason,r.plugindata.data.error),console.error(r.plugindata.data)):void("jsep"in r&&this.onremotedescription(new RTCSessionDescription(r.jsep))):void 0}}),Object.defineProperty(this,"setStream",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.disposeDelayedStream&&this.disposeDelayedStream(),null!==e?this.disposeDelayedStream=W((()=>"completed"===this.connectionState||"connected"===this.connectionState),(()=>{this.stream=e})):this.stream=null}}),Object.defineProperty(this,"initConnectionState",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposables.push(at((()=>this.pc),!0).pipe(ee((e=>null===e?t(null):n(e,"iceconnectionstatechange").pipe(ae(null),X((()=>e.iceConnectionState)))))).subscribe((e=>{V((()=>this.connectionState=e))})))}}),Object.defineProperty(this,"initTrack",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposables.push(at((()=>this.pc),!0).pipe(ee((e=>null===e?t(null):a(n(e,"track").pipe(ae(null)),n(e,"addstream").pipe(X((e=>({streams:[e.stream]})))))))).subscribe((e=>{let t=null;null!==e&&(t=e.streams[0],e.track&&(e.track.onended=e=>{this.stream&&this.stream.removeTrack(e.target)})),this.setStream(t)})))}}),Object.defineProperty(this,"autoCollectStats",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposables.push(at((()=>this.stream),!0).pipe(ee((e=>e?c(0,1e3).pipe(se((()=>this.getStats()))):t(null)))).subscribe(this.updateStats))}}),Object.defineProperty(this,"updateStats",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(e){if(this.stats){const t=e.bytesReceived-this.stats.bytesReceived,i=e.timestamp-this.stats.timestamp;e.bitrate=t/i,e.startTime=this.stats.startTime}else e.startTime=e.timestamp;this.stats=e}else this.stats=null}}),Object.defineProperty(this,"dispose",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposeDelayedStream&&(this.disposeDelayedStream(),this.disposeDelayedStream=null),this.pc&&this.safeCloseRTCPeerConnection(this.pc),this.disposables.forEach((e=>{e instanceof o?e.closed||e.unsubscribe():e()})),this.server.deregisterPlugin(),this.server.connection.send(JSON.stringify({janus:"detach",handle_id:this.pluginHandleId,session_id:this.server.sessionId,transaction:this.server.randomString(12)})),this.pc=null,this.stream=null,this.stats=null,this.error=null}}),H(this,{pc:U.ref,pluginHandleId:U,stream:U.ref,stats:U.ref,error:U.ref,connectionState:U,onmessage:B,setStream:B,updateStats:B,dispose:B}),this.server=function(e){if(mt.has(e))return mt.get(e);const t=new pt(e);return mt.set(e,t),t}(e),this.server.registerPlugin(),this.cameraId=i,this.pin=r,this.autoAttachPlugin(),this.autoCollectStats(),this.initConnectionState(),this.initTrack(),this.disposables.push(Q((()=>this.pluginHandleId),this.onInit,{fireImmediately:!0})),this.disposables.push(W((()=>!!this.server.sessionId),(()=>this.disposables.push(n(this.server.connection,"message").subscribe(this.onmessage)))))}async onremotedescription(e){const{pluginHandleId:t}=this,i=this.pc;if(!e.sdp)return;const r=[];if(1===this.allowedIceCandidateProtocols.length){const t=this.allowedIceCandidateProtocols[0],i=e.sdp.split("\r\n");let a="video";const n={video:[],audio:[]};for(const e of i)e.startsWith("a=mid:audio")?a="audio":e.startsWith("a=mid:video")?a="video":e.startsWith("a=candidate")&&n[a].push(e);const s=i.filter((e=>!(e.startsWith("a=candidate")||e.startsWith("a=end-of-candidates")))),l=e=>e.split(/\s+/)[2]===t,o={video:n.video.filter(l),audio:n.audio.filter(l)};e=new RTCSessionDescription({type:"offer",sdp:[...s].join("\r\n")});let c={audio:[],video:[]};o.video.length?c=o:(console.warn(`no video ${t.toUpperCase()} candidates found. Falling back to all candidates`),c=n);for(const e in c)c.hasOwnProperty(e)&&c[e].forEach((t=>{r.push(new RTCIceCandidate({candidate:t.replace(/^a=/,""),sdpMLineIndex:0,sdpMid:e}))}))}try{await i.setRemoteDescription(e),r.forEach((e=>{i.addIceCandidate(e)}));const a=await i.createAnswer();await i.setLocalDescription(a);const n={type:a.type,sdp:a.sdp};this.startTransaction=this.server.randomString(12),this.server.connection.send(JSON.stringify({janus:"message",handle_id:t,session_id:this.server.sessionId,body:{request:"start"},jsep:n,transaction:this.startTransaction}))}catch(e){return console.error(e),void V((()=>{e instanceof Error&&e.message.toLowerCase().includes("failed to set remote offer sdp")?this.error=new bt("SDP_OFFER_FAILED",e.message,e):e instanceof Error&&e.message.toLowerCase().includes("failed to set local answer sdp")?this.error=new bt("SDP_ANSWER_FAILED",e.message,e):this.error=new bt("STREAMING_ERROR",e instanceof Error?e.message:e,e)}))}i.addEventListener("icecandidate",(e=>{e.candidate&&this.server.connection.send(JSON.stringify({janus:"trickle",candidate:e.candidate,handle_id:t,session_id:this.server.sessionId,transaction:this.server.randomString(12)}))}))}autoAttachPlugin(){this.disposables.push(at((()=>this.server?this.server.sessionId:null),!0).pipe(ie(Boolean),ee((()=>{const e=this.server.randomString(12);return this.server.connection.send(JSON.stringify({janus:"attach",plugin:"janus.plugin.streaming",transaction:e,session_id:this.server.sessionId})),n(this.server.connection,"message").pipe(X((({data:e})=>JSON.parse(e))),ie((t=>"transaction"in t&&t.transaction===e)),le(1))}))).subscribe((e=>{V((()=>{switch(e.janus){case"success":this.pluginHandleId=e.data.id;break;case"error":this.error=new bt("PLUGIN_INIT_ERROR",e.error.reason,e);break;default:console.error("unexpected message",e)}}))})))}async getStats(){if(!this.pc)return null;this.statsRequest=this.pc.getStats();const e=await this.statsRequest;this.statsRequest=null;const t={};return e.forEach((e=>{if("inbound-rtp"!==e.type||"video"!==e.kind&&"video"!==e.mediaType){if("track"===e.type){const{frameWidth:i,frameHeight:r,framesDropped:a,framesReceived:n}=e;Object.assign(t,{frameWidth:i,frameHeight:r,framesDropped:a,framesReceived:n})}else if("candidate-pair"===e.type)Object.assign(t,{rtt:1e3*e.currentRoundTripTime});else if("ssrc"===e.type){const i={};e.values.forEach((e=>Object.keys(e).forEach((t=>i[t]=e[t]))));const{framesDecoded:r,bytesReceived:a,packetsLost:n,packetsReceived:s,googFrameHeightReceived:l,googFrameWidthReceived:o}=i;Object.assign(t,{frameWidth:+o,frameHeight:+l,framesDecoded:r,bytesReceived:a,packetsLost:n,packetsReceived:s})}}else{const{bytesReceived:i,framesDecoded:r,packetsLost:a,packetsReceived:n,timestamp:s}=e;Object.assign(t,{bytesReceived:i,framesDecoded:r,packetsLost:a,packetsReceived:n,timestamp:s})}})),t}async safeCloseRTCPeerConnection(e){await this.statsRequest,e.close()}}const ft=1e4;class gt{setPlayerState(e){this.state=e}get streamingError(){return this.streamingPlugin?this.streamingPlugin.error:null}get stream(){return this.streamingPlugin?this.streamingPlugin.stream:null}getCurrentTime(){return this.state===ut.Playing?new Date:null}constructor(e,t){Object.defineProperty(this,"player",{enumerable:!0,configurable:!0,writable:!0,value:e}),Object.defineProperty(this,"allowedIceCandidateProtocols",{enumerable:!0,configurable:!0,writable:!0,value:t}),Object.defineProperty(this,"streamingPlugin",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"ttff",{enumerable:!0,configurable:!0,writable:!0,value:-1}),Object.defineProperty(this,"live",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"loading",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"transitionToInitialState",{enumerable:!0,configurable:!0,writable:!0,value:()=>{const{webRtcUrl:e,id:t,pin:i}=this.player.camera;V((()=>{this.streamingPlugin&&this.streamingPlugin.dispose(),this.streamingPlugin=new vt(e,t,i,this.allowedIceCandidateProtocols),this.state=ut.Initial}))}}),H(this,{streamingPlugin:U.ref,state:U,setPlayerState:B,ttff:U,streamingError:F,stream:F,loading:U,error:U,dispose:B}),this.player=e,RTCPeerConnection?this.disposables.push(this.reactToStream(),...this.initPauseAndResume(),this.reconnectWhenNeeded(),this.fallbackToDvrOnFirstFrameTimeout(),this.fallBackToDvrOnConnectionProblems(),this.initTransitionToReconnecting(),this.setInitialIndication(),this.updateIndicationOnPlaying(),this.updateIndicationOnReconnecting(),this.initFromErrorToPlaying(),this.initFromInitialToPlaying(),this.reactToStreamingError(),this.initTtff(),this.initStats(),this.reactToCamera()):this.state=ut.Failed}reconnectWhenNeeded(){return at((()=>this.state),!0).pipe(u((e=>{if(e!==ut.Reconnecting)return l;this.streamingPlugin&&this.streamingPlugin.dispose();const{webRtcUrl:t,id:i,pin:r}=this.player.camera;return V((()=>{this.streamingPlugin=new vt(t,i,r,this.allowedIceCandidateProtocols)})),at((()=>this.stream),!0).pipe(u((e=>e?at((()=>{var e,t,i;return null!==(i=null===(t=null===(e=this.streamingPlugin)||void 0===e?void 0:e.stats)||void 0===t?void 0:t.framesDecoded)&&void 0!==i?i:null}),!0).pipe(d(Boolean),h(3e4)):l)),m(1))}))).subscribe({next:()=>{this.setPlayerState(ut.Playing)},error:e=>{var t;if(e instanceof p)return console.error("player",this.player.id,"cam",this.player.camera.id,"no frames in 30s after reconnect"),void((null===(t=this.streamingPlugin)||void 0===t?void 0:t.pc)&&["connected","new"].includes(this.streamingPlugin.pc.iceConnectionState)?(console.warn("player",this.player.id,"cam",this.player.camera.id,"fallback to DVR"),this.state=ut.Stalled):console.warn("player",this.player.id,"cam",this.player.camera.id,"waiting for reconnect"));V((()=>{this.setPlayerState(ut.Error),this.error=e})),console.error(e)}})}fallbackToDvrOnFirstFrameTimeout(){return at((()=>this.state),!0).pipe(u((e=>e!==ut.Initial?l:at((()=>this.stream),!0).pipe(u((e=>e?at((()=>{var e,t,i;return null!==(i=null===(t=null===(e=this.streamingPlugin)||void 0===e?void 0:e.stats)||void 0===t?void 0:t.framesDecoded)&&void 0!==i?i:null}),!0).pipe(d(Boolean),h(ft)):l)),m(1))))).subscribe({error:e=>{if(e instanceof p)return console.error("player",this.player.id,"cam",this.player.camera.id,"no frames in 10s. Fallback to DVR"),void this.setPlayerState(ut.Stalled);V((()=>{this.setPlayerState(ut.Error),this.error=e})),console.error(e)}})}fallBackToDvrOnConnectionProblems(){return at((()=>this.state),!0).pipe(u((e=>e!==ut.Initial?l:at((()=>{var e;return null===(e=this.streamingPlugin)||void 0===e?void 0:e.connectionState}),!0).pipe(u((e=>e&&"connected"!==e&&"new"!==e?"failed"===e?b((()=>new st("CONNECTION_FAILED_ERROR","Connection failed"))):c(2e4).pipe(v((()=>b((()=>new st("CONNECTION_TIMEOUT_ERROR","Connection timeout")))))):l)))))).subscribe({error:e=>e instanceof st&&"CONNECTION_TIMEOUT_ERROR"===e.name?(console.error("player",this.player.id,"cam",this.player.camera.id,"no connection established in 20s. Fallback to DVR"),void this.setPlayerState(ut.Stalled)):e instanceof st&&"CONNECTION_FAILED_ERROR"===e.name?(console.error("player",this.player.id,"cam",this.player.camera.id,"Connection failed"),void this.setPlayerState(ut.Stalled)):(V((()=>{this.state=ut.Error,this.error=e})),void console.error(e))})}initTransitionToReconnecting(){return at((()=>this.state),!0).pipe(u((e=>e!==ut.Playing?l:at((()=>{var e,t,i;return null!==(i=null===(t=null===(e=this.streamingPlugin)||void 0===e?void 0:e.stats)||void 0===t?void 0:t.framesDecoded)&&void 0!==i?i:null}),!0).pipe(d(Boolean),f(ft))))).subscribe((()=>{console.log("player",this.player.id,"cam",this.player.camera.id,"no new frames in 10000s"),this.setPlayerState(ut.Reconnecting)}))}setInitialIndication(){return Q((()=>this.state),(e=>{e===ut.Initial&&V((()=>{this.loading=!0,this.error=null}))}))}updateIndicationOnPlaying(){return Q((()=>this.state),(e=>{e===ut.Playing&&V((()=>{this.loading=!1,this.error=null}))}))}updateIndicationOnReconnecting(){return Q((()=>this.state),(e=>{e===ut.Reconnecting&&V((()=>{this.loading=!0}))}))}reactToStreamingError(){return Q((()=>this.streamingError),(e=>{if(!e)return;console.error(e);if("PLUGIN_INIT_ERROR"===e.name||"ERROR_PROCESSING_SDP"===e.name||"ICE_FAILED"===e.name||"SDP_OFFER_FAILED"===e.name||"SDP_ANSWER_FAILED"===e.name)return console.warn("player",this.player.id,"cam",this.player.camera.id,"fallback to DVR"),this.error=new st("STREAMING_ERROR",e.message,e),void this.setPlayerState(ut.Stalled);V((()=>{this.error=new st("STREAMING_ERROR",e.message,e),this.state=ut.Error}))}))}initTtff(){const e=Date.now();return at((()=>this.state),!0).pipe(d((e=>e===ut.Playing)),m(1)).subscribe((()=>{this.ttff=Date.now()-e}))}initFromErrorToPlaying(){return at((()=>this.state),!0).pipe(u((e=>e!==ut.Error?l:at((()=>this.stream),!0).pipe(u((e=>e?at((()=>{var e;return this.streamingPlugin?null===(e=this.streamingPlugin.stats)||void 0===e?void 0:e.framesDecoded:null})):l)),d(Boolean),m(1))))).subscribe((()=>{this.setPlayerState(ut.Playing)}))}initFromInitialToPlaying(){return at((()=>this.state),!0).pipe(u((e=>e!==ut.Initial?l:at((()=>this.stream),!0).pipe(u((e=>e?at((()=>{var e,t,i;return null!==(i=null===(t=null===(e=this.streamingPlugin)||void 0===e?void 0:e.stats)||void 0===t?void 0:t.framesDecoded)&&void 0!==i?i:null})):l)),d(Boolean),m(1))))).subscribe((()=>{this.setPlayerState(ut.Playing)}))}initPauseAndResume(){return[at((()=>this.state),!0).pipe(d((e=>e===ut.Playing||e===ut.Paused))).subscribe((e=>{var t,i;e===ut.Playing?null===(t=this.streamingPlugin)||void 0===t||t.resume():null===(i=this.streamingPlugin)||void 0===i||i.pause()})),at((()=>this.state),!0).pipe(u((e=>e!==ut.Playing?l:at((()=>this.player.paused)).pipe(d(Boolean))))).subscribe((()=>{this.setPlayerState(ut.Paused)})),at((()=>this.state),!0).pipe(u((e=>e!==ut.Paused?l:at((()=>this.player.paused)).pipe(d((e=>!e)))))).subscribe((()=>{this.setPlayerState(ut.Playing)})),at((()=>this.state),!0).pipe(u((e=>e!==ut.Initial?l:at((()=>this.player.paused)).pipe(d((e=>e)))))).subscribe((()=>{var e;null===(e=this.streamingPlugin)||void 0===e||e.dispose(),this.loading=!1,this.setPlayerState(ut.InitiallyPaused)})),at((()=>this.state),!0).pipe(u((e=>e!==ut.InitiallyPaused?l:at((()=>this.player.paused)).pipe(d((e=>!e)))))).subscribe(this.transitionToInitialState)]}reactToCamera(){return Q((()=>({id:this.player.camera.id,url:this.player.camera.webRtcUrl,pin:this.player.camera.pin,isOnline:this.player.camera.isOnline,enabled:this.player.camera.enabled})),(({id:e,isOnline:t},i)=>{this.streamingPlugin&&this.streamingPlugin.dispose(),V((()=>{t?this.player.paused&&e===(null==i?void 0:i.id)?this.state=ut.InitiallyPaused:this.transitionToInitialState():(this.error=new st("CAMERA_OFFLINE_ERROR","Camera is offline"),this.state=ut.Error,this.streamingPlugin=null)}))}),{fireImmediately:!0})}reactToStream(){return Q((()=>this.stream),(e=>{V((()=>{if(!e){if(this.state===ut.Reconnecting)return;return void(this.player.stream=null)}this.player.stream=e;const t=e.getVideoTracks();t&&0!==t.length||(console.warn("player",this.player.id,"cam",this.player.camera.id,"no video",t),this.error=new st("NO_VIDEO_TRACK_ERROR","No video track"),this.state=ut.Error)}))}))}initStats(){return Q((()=>this.streamingPlugin?this.streamingPlugin.stats:null),(e=>{this.player.stats=e}))}dispose(){this.disposables.forEach((e=>{e instanceof o?e.closed||e.unsubscribe():e()})),this.player.stream&&(this.player.stream=null),this.streamingPlugin&&this.streamingPlugin.dispose(),this.streamingPlugin=null,this.player.stats=null,this.player=null}}const yt=R.createContext(null);class wt{constructor(e){Object.defineProperty(this,"cameraId",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"streamUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"dashStreamUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"startTime",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"endTime",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"length",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"isLive",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"isDvr",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"hasDvr",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"rtmpStreamUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"managed",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"setBounds",{enumerable:!0,configurable:!0,writable:!0,value:e=>{[this.startTime,this.endTime]=e}}),H(this,{startTime:U,endTime:U,setBounds:B}),this.streamUrl=e.streamUrl,this.dashStreamUrl=e.dashStreamUrl,this.startTime=e.startTime,this.endTime=e.endTime,this.length=e.length,this.cameraId=e.cameraId}}var Et;!function(e){e.Fit="contain",e.Stretch="fill"}(Et||(Et={}));const Pt=(()=>{let e=0;return()=>++e})();class Ct{get loading(){var e,t;return null!==(t=null===(e=this.behavior)||void 0===e?void 0:e.loading)&&void 0!==t&&t}constructor({camera:e,startTime:t,endTime:i,clip:r,archivesStore:a,behaviors:n}){Object.defineProperty(this,"id",{enumerable:!0,configurable:!0,writable:!0,value:Pt()}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"liveChunk",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"currentTime",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"targetTime",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"chunk",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"paused",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"playbackRate",{enumerable:!0,configurable:!0,writable:!0,value:1}),Object.defineProperty(this,"volume",{enumerable:!0,configurable:!0,writable:!0,value:1}),Object.defineProperty(this,"muted",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"videoResizeMode",{enumerable:!0,configurable:!0,writable:!0,value:Et.Stretch}),Object.defineProperty(this,"camera",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"stats",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"mode",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"behavior",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"transform",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"isRotating",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"setTransform",{enumerable:!0,configurable:!0,writable:!0,value:(e,t=!1)=>{const{translate:{tx:i,ty:r},rotation:{angle:a},scale:{sx:n}}=ye(null!=e?e:we());this.isRotating=!1,this.animationController.start({scale:n,x:i,y:r,angle:a,immediate:!t})}}),Object.defineProperty(this,"resetTransform",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.isRotating=!1,this.setTransform(we())}}),Object.defineProperty(this,"animationController",{enumerable:!0,configurable:!0,writable:!0,value:new pe({scale:1,x:0,y:0,angle:0,onChange:e=>{V((()=>{var t;if(this.isRotating){const i=null!==(t=this.transform)&&void 0!==t?t:we(),{rotation:{angle:r}}=ye(i);this.transform=Ee(Pe(e.value.angle-r,this.width/2,this.height/2),i)}else this.transform=Ee(Ce(e.value.x,e.value.y),Re(e.value.scale,e.value.scale),Pe(e.value.angle))}))}})}),Object.defineProperty(this,"width",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"height",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"chunkRequest",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"loopRange",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"loopRangeEnabled",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"restoreFromDvrEnabled",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"pendingBehavior",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"video",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"clip",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"startTime",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"endTime",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"stream",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"canSeek",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"canSeek$",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"progress$",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"muted$",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"volume$",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"ended$",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"archivesStore",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"behaviors",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"seekTime",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"seek",{enumerable:!0,configurable:!0,writable:!0,value:e=>{"WebRTC"!==this.mode?this.behavior&&this.behavior.seek?this.behavior.seek(e):console.warn("incorrect call of seek"):console.warn("cannot seek in live mode")}}),Object.defineProperty(this,"changeMedia",{enumerable:!0,configurable:!0,writable:!0,value:({time:e,chunk:t,backward:i=!1})=>{if(this.restoreFromDvrEnabled=!1,this.targetTime=null!=e?e:null,this.loopRange&&e>=this.loopRange.end&&(this.loopRangeEnabled=!1),this.loopRange&&e<this.loopRange.end&&(this.loopRangeEnabled=!0),!t&&this.chunk&&this.chunk.startTime<=e&&(this.chunk.endTime>=e||this.chunk.isLive)&&(t=this.chunk),!t)return this.chunkRequest={time:e,backward:i},this.canSeek=!1,void(this.mode="archive");if(t){if(this.chunkRequest=null,this.paused&&(this.paused=!1),"WebRTC"!==this.mode&&t===this.chunk&&this.canSeek)return this.seek(e);this.canSeek=!1,this.error=null,this.mode=t.isLive?"DVR":"archive",this.chunk=t,this.seekTime=e}}}),Object.defineProperty(this,"seekBackward",{enumerable:!0,configurable:!0,writable:!0,value:e=>{var t;if(!this.currentTime&&this.targetTime)return;!this.currentTime&&(null===(t=this.behavior)||void 0===t?void 0:t.live)&&this.changeMedia({time:new Date(Date.now()-e),backward:!0});const i=this.targetTime||this.currentTime;if(!i)return;const r=new Date(+i-e);this.changeMedia({time:r,backward:!0})}}),Object.defineProperty(this,"seekForward",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(!this.currentTime&&this.targetTime)return;const t=this.targetTime||this.currentTime;if(!t)return;const i=new Date(+t+e);this.liveChunk&&i>this.liveChunk.endTime?this.goLive():this.changeMedia({time:i,backward:!1})}}),Object.defineProperty(this,"goLive",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.seekTime=null,this.playbackRate=1,this.paused=!1,this.behaviors.WebRTC?this.mode="WebRTC":"DVR"===this.mode?this.behavior&&this.behavior.goLive&&this.behavior.goLive():(this.mode="DVR",this.chunk=this.liveChunk||null)}}),Object.defineProperty(this,"setCamera",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.camera=e}}),Object.defineProperty(this,"setCameraAndStartTime",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{this.camera=e,this.startTime=t}}),Object.defineProperty(this,"toggleResizeMode",{enumerable:!0,configurable:!0,writable:!0,value:()=>{const e=Object.keys(Et),t=(Object.values(Et).indexOf(this.videoResizeMode)+1)%e.length;this.videoResizeMode=Et[e[t]]}}),Object.defineProperty(this,"setVideoResizeMode",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.videoResizeMode=e}}),Object.defineProperty(this,"toggleMute",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.muted=!this.muted}}),Object.defineProperty(this,"setStartTime",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.startTime=e}}),Object.defineProperty(this,"setVolume",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.volume=e}}),Object.defineProperty(this,"setPlaybackRate",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.playbackRate=e}}),Object.defineProperty(this,"togglePlayback",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.paused=!this.paused}}),Object.defineProperty(this,"play",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.paused=!1}}),Object.defineProperty(this,"pause",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.paused=!0}}),Object.defineProperty(this,"detach",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.behavior&&(this.behavior.dispose(),this.behavior=null),this.disposables.forEach((e=>{e instanceof o?e.closed||e.unsubscribe():e()})),this.video=null}}),Object.defineProperty(this,"initFallbackToDVR",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposables.push(at((()=>this.behavior),!0).pipe(u((e=>"WebRTC"===this.mode&&e?at((()=>e.state),!0).pipe(d((e=>e===ut.Stalled||e===ut.Failed))):l))).subscribe((e=>{V((()=>{this.seekTime=null,this.mode="DVR",this.chunk=this.liveChunk||null,this.restoreFromDvrEnabled=e!==ut.Failed}))})))}}),$(this,{behavior:U.ref,camera:U.ref,chunk:U.ref,chunkRequest:U.ref,liveChunk:U.ref,loopRange:U.ref}),this.camera=e,this.startTime=t||null,this.endTime=i||null,this.clip=r,this.archivesStore=a,this.behaviors=n,r?(this.loopRange={start:r.startTime,end:r.endTime},this.loopRangeEnabled=!0):this.loopRange=null,this.disposables.push(Q((()=>{var e;return null===(e=this.behavior)||void 0===e?void 0:e.error}),(()=>{var e,t;this.error=null!==(t=null===(e=this.behavior)||void 0===e?void 0:e.error)&&void 0!==t?t:null})))}attach(e,{canSeek$:t,progress$:i,muted$:r,volume$:a,ended$:n}){this.video=e,this.canSeek$=t,this.progress$=i,this.ended$=n,this.muted$=r,this.volume$=a,this.reactToVolumeChange(),this.initPlayerBehavior(),this.seekAfterReady(),this.stopLoadingOnError(),this.initChunkRequest(),this.initLiveChunkUpdate(),this.initCurrentTime(),this.initSameChunkRequestFix(),this.setupLiveChunk(),this.replaceErrorMessageOnOffline(),this.disposables.push(this.canSeek$.subscribe((()=>{this.canSeek=!0}))),this.disposables.push(Q((()=>({camera:this.camera,startTime:this.startTime})),(({startTime:e})=>{V((()=>{this.chunk&&this.chunk.cameraId!==this.camera.id&&(this.chunk=null,this.currentTime=null),this.chunkRequest=null,this.setupLiveChunk(),e?this.changeMedia({time:e}):this.goLive()}))}))),this.clip||this.startTime||this.mode||this.goLive(),!this.clip&&this.startTime&&this.changeMedia({time:this.startTime}),this.initPlayableRange(),this.initUpgradeToWebRtcWhenCameraIsBackOnline(),this.initUpgradeToWebRtcAfterFallbackToDvr(),this.initFallbackToDVR()}seekAfterReady(){this.disposables.push(this.canSeek$.pipe(u((()=>a(t(null),this.progress$.pipe(m(1)))))).pipe(g((()=>this.seekTime)),d(Boolean)).subscribe((e=>{this.seekTime=null,this.seek(e)})))}stopLoadingOnError(){this.disposables.push(Q((()=>this.error),(e=>{e&&this.behavior&&(this.behavior.loading=!1)})))}replaceErrorMessageOnOffline(){this.disposables.push(at((()=>this.error),!0).pipe(u((e=>e?at((()=>this.camera.isOnline),!1).pipe(d((e=>!e))):l))).subscribe((()=>{this.error instanceof st&&"CAMERA_OFFLINE_ERROR"===this.error.name||(this.error=new st("CAMERA_OFFLINE_ERROR","camera is offline"))})))}initCurrentTime(){this.disposables.push(this.progress$.pipe(d((()=>!this.seekTime&&!this.chunkRequest)),d((()=>!this.paused))).subscribe((()=>{if(!this.behavior)return;const e=this.behavior.getCurrentTime();e&&V((()=>{this.behavior&&(this.behavior.loading=!1),this.error=null,this.currentTime=e,this.targetTime=null}))})))}initPlayableRange(){this.disposables.push(at((()=>{var e,t;return{enabled:this.loopRangeEnabled,paused:this.paused,startTime:null===(e=this.loopRange)||void 0===e?void 0:e.start,endTime:null===(t=this.loopRange)||void 0===t?void 0:t.end}}),!0).pipe(u((({enabled:e,paused:t,startTime:i,endTime:r})=>e&&!t&&r&&i?at((()=>this.currentTime),!0).pipe(y(),d((([e,t])=>null!==e&&null!==t&&e<r&&t>=r))):l))).subscribe((()=>{this.loopRange&&this.changeMedia({time:this.loopRange.start})})))}initSameChunkRequestFix(){this.disposables.push(this.progress$.pipe(d((()=>{var e;return!this.chunkRequest&&!!this.seekTime&&!(null===(e=this.chunk)||void 0===e?void 0:e.isLive)}))).subscribe((()=>{this.seekTime&&this.chunk&&this.chunk.startTime<=this.seekTime&&this.chunk.endTime>=this.seekTime&&(this.seek(this.seekTime),this.seekTime=null)})))}initLiveChunkUpdate(){this.disposables.push(at((()=>this.liveChunk),!0).pipe(u((e=>e?w(250):l))).subscribe((()=>{V((()=>{if("DVR"===this.mode&&this.behavior&&"function"==typeof this.behavior.getDateRange&&this.liveChunk){const e=this.behavior.getDateRange();if(!e)return;this.liveChunk.setBounds(e)}"DVR"!==this.mode&&this.liveChunk&&!this.liveChunk.managed&&this.liveChunk.setBounds([new Date(Date.now()-1e3*this.camera.raw.dvrWindowLength),new Date])}))})))}initChunkRequest(){this.disposables.push(at((()=>this.chunkRequest),!0).pipe(u((e=>{var i;if(null===e)return l;const{time:r,backward:a}=e;if((null===(i=this.clip)||void 0===i?void 0:i.isTimelapse)&&this.clip.archives){const{archives:e}=this.clip,i=e.find((e=>e.startTime<=r&&e.endTime>=r));if(i)return t({chunk:i,time:r,backward:a});if(a){const i=e.find((e=>e.endTime<r));return t(i?{chunk:i,time:r,backward:a}:{chunk:null,time:r,backward:a})}{const i=e.find((e=>e.startTime>r));return t(i?{chunk:i,time:r,backward:a}:{chunk:null,time:r,backward:a})}}const n=this.camera.id,s=this.archivesStore.getChunks({cameraId:this.camera.id,from:r,to:r})[0];if(s)return t({chunk:s,time:r,backward:a});return(a?this.archivesStore.fetchPrevChunk({cameraId:n,time:r}):this.archivesStore.fetchNextChunk({cameraId:n,time:r})).pipe(g((e=>e?a?r<=e.endTime?{chunk:e,time:r,backward:a}:{chunk:e,time:new Date(+e.endTime-5e3),backward:a}:{chunk:e,time:new Date(Math.max(+e.startTime,+r)),backward:a}:this.liveChunk&&this.liveChunk.startTime<r?{chunk:this.liveChunk,time:r,backward:a}:{chunk:null,time:r,backward:a})))}))).subscribe((({chunk:e,time:t,backward:i})=>{V((()=>{if(!e){if(i||!this.liveChunk)return void(this.chunkRequest=null);e=this.liveChunk}this.currentTime=e.startTime,this.changeMedia({chunk:e,time:t})}))})))}setupLiveChunk(){const{camera:e}=this;e.streamUrl&&e.raw.dvrWindowLength?this.liveChunk&&this.liveChunk.cameraId===e.id||V((()=>{this.liveChunk=new wt({cameraId:e.id,endTime:new Date,startTime:new Date(Date.now()-e.dvrWindowLength),streamUrl:e.streamUrl,dashStreamUrl:e.dashStreamUrl,length:e.dvrWindowLength})})):this.liveChunk=null}initPlayerBehavior(){this.disposables.push(at((()=>this.mode),!0).pipe(E((async e=>{if(this.behavior){const e=this.behavior;V((()=>this.behavior=null)),await e.dispose()}return e}))).subscribe((e=>{e&&V((()=>{if("WebRTC"===e&&this.pendingBehavior)return this.behavior=this.pendingBehavior,void(this.pendingBehavior=null);const t=this.behaviors[e];this.behavior=t?t(this):null}))})))}reactToVolumeChange(){this.disposables.push(this.volume$.subscribe(this.setVolume))}initUpgradeToWebRtcWhenCameraIsBackOnline(){this.behaviors.WebRTC&&this.disposables.push(at((()=>{var e;return!this.paused&&"DVR"===this.mode&&(null===(e=this.behavior)||void 0===e?void 0:e.live)}),!0).pipe(u((e=>e?at((()=>this.camera.isOnline)).pipe(u((e=>e?(this.goLive(),l):l))):l))).subscribe())}initUpgradeToWebRtcAfterFallbackToDvr(){if(!this.behaviors.WebRTC)return;let e=null;this.disposables.push(at((()=>({enabled:this.restoreFromDvrEnabled,mode:this.mode,paused:this.paused}))).pipe(u((({mode:i,enabled:r,paused:a})=>"DVR"!==i||!r||a?(e&&(e.dispose(),e=null),l):t(null).pipe(P(1e4),u((()=>{if(!this.behaviors.WebRTC)return l;e&&(e.dispose(),e=null);const i=e=this.behaviors.WebRTC(this);return at((()=>i.state),!0).pipe(v((()=>{const{state:r}=i;if(!r)return l;if(r===ut.Playing)return t(r);if([ut.Error,ut.Failed,ut.Stalled].includes(r)){i.dispose(),e=null;const t=i.error;return b((()=>new Error(r,{cause:t})))}return l})),m(1))})),ge({initialInterval:1e4,maxInterval:8e4,shouldRetry:e=>!(e instanceof Error&&e.message===ut.Failed)}))))).subscribe({next:()=>{V((()=>{this.seekTime=null,this.playbackRate=1,this.paused=!1,this.pendingBehavior=e,e=null,this.mode="WebRTC",this.restoreFromDvrEnabled=!1}))},error:t=>{console.error("Failed to upgrade to WebRTC after fallback to DVR",t),V((()=>{e=null,this.restoreFromDvrEnabled=!1}))}}))}}class Rt extends R.PureComponent{render(){return R.createElement("svg",{focusable:"false",viewBox:"0 0 66 66",className:"spinner",...this.props},R.createElement("circle",{fill:"none",strokeWidth:3,cx:33,cy:33,r:30,stroke:"white"}))}}const kt=({children:e,label:t,placement:i="bottom",disabled:r})=>{const[a,n]=k(!1),{x:s,y:l,refs:o,strategy:c,context:u}=Ne({placement:i,open:a,onOpenChange:n,middleware:[Le(5),De(),_e({padding:8})],whileElementsMounted:(e,t,i)=>Ae(e,t,i,{animationFrame:!0})}),{getReferenceProps:d,getFloatingProps:h}=Fe([ze(u,{enabled:!r}),Qe(u,{role:"tooltip"}),Ve(u,{referencePress:!0})]);return R.createElement(R.Fragment,null,O(e,d({ref:We(o.setReference,e.ref),...e.props})),R.createElement(He,{id:"x-3deye-floating-ui-root"},a&&R.createElement("div",{...h({ref:o.setFloating,className:"x-3deye-tooltip",style:{position:c,top:null!=l?l:0,left:null!=s?s:0}})},t)))};class Ot extends R.Component{render(){const{forwardedRef:e,children:t,className:i,fullWidth:r,variant:a,type:n,title:s,placement:l,...o}=this.props,c=Ie(i,"x-3deye-button",{"x-3deye-button--fullwidth":r},a?`x-3deye-button--${a}`:void 0),u=R.createElement("button",{ref:e,className:c,type:n||"button",...o},t,o.disabled?null:R.createElement(je,null));return void 0===s?u:R.createElement(kt,{label:s,placement:l,disabled:!s},u)}}const Tt=R.forwardRef(((e,t)=>R.createElement(Ot,{forwardedRef:t,...e}))),St=R.forwardRef((function({width:e,height:t,placement:i="top",style:r},a){const n=[0,"top"===i?t:0],s=[e,n[1]],l=[e/2,t-n[1]],o=[e/4,t*("top"===i?3:1)/4],c=[.325*e,t-n[1]],u=[e-c[0],c[1]],d=[e-o[0],o[1]],h=e=>e.join(","),m=`M ${h(n)} C ${h(o)} ${h(c)} ${h(l)} ${h(u)} ${h(d)} ${h(s)}`,p=`${m} Z`;return R.createElement("svg",{ref:a,className:"tip",style:r,width:e,height:t,fill:"var(--tip-background, #fff)"},R.createElement("path",{className:"tip-body",d:p}),R.createElement("path",{className:"tip-border",d:m,stroke:"var(--tip-border, transparent)",strokeWidth:1}))})),Mt=({opened:e,onOpenChange:t,children:i,target:r,placement:a,className:n,style:s,autoDismiss:l=!0,initialFocus:o,withArrow:c=!1})=>{var u,d,h;const m=T(null),{x:p,y:b,refs:v,strategy:f,context:g,middlewareData:y,placement:w,update:E}=Ne({open:e,onOpenChange:t,middleware:[Le(5),De(),_e(),Ue({element:m})],placement:a,whileElementsMounted:(e,t,i)=>Ae(e,t,(()=>{var e;0!==(null===(e=g.elements.domReference)||void 0===e?void 0:e.getBoundingClientRect().width)?i():g.onOpenChange(!1)}),{animationFrame:!0})}),{getReferenceProps:P,getFloatingProps:C}=Fe([Qe(g),Ve(g,{ancestorScroll:!0,enabled:l})]),k=S((e=>{m.current=e,E()}),[E]),M={top:"bottom",right:"left",bottom:"top",left:"right"}[null!==(u=null==w?void 0:w.split("-")[0])&&void 0!==u?u:"top"]||"top",x=R.createElement("div",{...C({className:Ie("x-3deye-popover-container",n),ref:v.setFloating,style:{...s,position:f,top:null!=b?b:0,left:null!=p?p:0}})},c&&R.createElement(St,{ref:k,width:24,height:8,placement:M,style:{position:"absolute",left:null===(d=y.arrow)||void 0===d?void 0:d.x,top:null===(h=y.arrow)||void 0===h?void 0:h.y,[M]:-7}}),i);return R.createElement(R.Fragment,null,O(r,P({ref:v.setReference,...r.props})),R.createElement(He,{id:"x-3deye-floating-ui-root"},l&&e&&R.createElement(Be,{context:g,modal:!1,order:["reference","content"],returnFocus:!1,initialFocus:o},x),!l&&e&&x))};const xt=q((()=>{const e=M(yt),[t,i]=k(!1);if(!e.stats||!e.behavior)return null;const r=e=>{e.preventDefault(),i(!t)};if(!t)return R.createElement("details",{className:"x-3deye-player__stats",open:t,style:{pointerEvents:"auto"}},R.createElement("summary",{onClick:r},"Stats"));const a=e.stats,n=a.timestamp-a.startTime,s=a.bytesReceived/n,l=a.packetsReceived?Math.round(a.packetsLost/(a.packetsLost+a.packetsReceived)*100):0,{ttff:o}=e.behavior,c=o>0?(o/1e3).toFixed(2)+" s":"TBD";return R.createElement("details",{className:"x-3deye-player__stats",open:t,style:{pointerEvents:"auto"}},R.createElement("summary",{onClick:r},"Stats"),R.createElement("dl",null,R.createElement("div",null,R.createElement("dt",null,"frame width:")," ",R.createElement("dd",null,a.frameWidth||e.video.videoWidth)),R.createElement("div",null,R.createElement("dt",null,"frame height:")," ",R.createElement("dd",null,a.frameHeight||e.video.videoHeight)),R.createElement("div",null,R.createElement("dt",null,"bitrate:"),R.createElement("dd",null,Math.round(8*a.bitrate)," kbit/s")),R.createElement("div",null,R.createElement("dt",null,"average bitrate:")," ",R.createElement("dd",null,Math.round(8*s)," kbit/s")),R.createElement("div",null,R.createElement("dt",null,"elapsed time:")," ",R.createElement("dd",null,Math.floor(n/1e3)," s")),R.createElement("div",null,R.createElement("dt",null,"packets loss:"),R.createElement("dd",{style:{color:l<10?"green":l<50?"yellow":"red"}},l,"%")),R.createElement("div",null,R.createElement("dt",null,"packets received:")," ",R.createElement("dd",null,a.packetsReceived)),R.createElement("div",null,R.createElement("dt",null,"packets lost:")," ",R.createElement("dd",null,a.packetsLost)),R.createElement("div",null,R.createElement("dt",null,"frames received:")," ",R.createElement("dd",null,a.framesReceived)),R.createElement("div",null,R.createElement("dt",null,"frames decoded:")," ",R.createElement("dd",null,a.framesDecoded)),R.createElement("div",null,R.createElement("dt",null,"frames dropped:")," ",R.createElement("dd",null,a.framesDropped)),R.createElement("div",null,R.createElement("dt",null,"round-trip time:")," ",R.createElement("dd",null,a.rtt)),R.createElement("div",null,R.createElement("dt",null,"time to first frame:")," ",R.createElement("dd",null,c))))}));xt.displayName="PlayerStats";const It=q((()=>{const e=M(yt),[t,i]=k(!1);return R.createElement(Mt,{className:"x-3deye-player__camera-name-popover",opened:t,onOpenChange:i,placement:"bottom-start",autoDismiss:!1,withArrow:!0,target:R.createElement("div",{className:"x-3deye-player__camera-name",onClick:()=>i(!t)},e.camera.name)},R.createElement("div",null,"id:"," ",R.createElement(Tt,{style:{height:24},onClick:()=>function(e){const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t)}(e.camera.id.toString()),title:"copy to clipboard"},e.camera.id)),R.createElement("div",{style:{lineHeight:"24px"}},"provider: ",e.mode),R.createElement(xt,null))}));It.displayName="CameraName";const jt=q((()=>{var e;const t=M(yt),i=M(Ke),{utc:r,hour12:a}=null!==(e=null==i?void 0:i.account.preferences)&&void 0!==e?e:{utc:!1,hour12:!1},n=x((()=>{const e=new Intl.DateTimeFormat(Je.language,{timeStyle:"medium",timeZone:r?"UTC":void 0,hour12:a||void 0,hourCycle:a?void 0:"h23"}),t=new Intl.DateTimeFormat(Je.language,{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZone:r?"UTC":void 0,hour12:a||void 0,hourCycle:a?void 0:"h23"});return i=>((e,t,i)=>i?e.getUTCFullYear()===t.getUTCFullYear()&&e.getUTCMonth()===t.getUTCMonth()&&e.getUTCDate()===t.getUTCDate():e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate())(i,new Date,r)?e.format(i):t.format(i)}),[r,a]);return i&&"activeLayoutView"in i?t.behavior&&t.behavior instanceof gt?null:R.createElement("div",{className:"x-3deye-player__current-time"+(i.activeLayoutView&&"synced"in i.activeLayoutView&&i.activeLayoutView.synced.players.includes(t)?" x-3deye-player__current-time--synced":"")},t.currentTime&&n(t.currentTime)):null}));jt.displayName="CurrentTimeIndicator";const Nt=q((()=>{const e=M(yt);if(e.endTime)return null;if(!e.camera.isOnline)return null;if(e.error)return null;if(e.behavior&&e.behavior.live&&e.behavior.delay&&e.behavior.delay>1)return R.createElement(Tt,{className:"x-3deye-delay-indicator",style:{pointerEvents:"auto"},onClick:e.behavior.goLive},(e=>{const t=Math.floor(e)%60;return`- ${(Math.floor(e)-t)/60}:${t<10?"0"+t:t}`})(e.behavior.delay));return!e.paused&&(e.behavior&&e.behavior instanceof gt)?R.createElement("div",{className:"x-3deye-live-indicator"},Je.t("playerTools.live")):R.createElement(Tt,{style:{pointerEvents:"auto"},className:"x-3deye-button--live",onClick:e.goLive,tabIndex:-1},Je.t("playerTools.goLive"))}));function Lt(e){return R.forwardRef(((t,i)=>{const{size:r=24,color:a="currentColor",className:n,...s}=t,l=e.viewBox||"0 0 24 24",o=e.svg;return R.createElement("svg",{ref:i,preserveAspectRatio:"xMinYMin",className:Ie("icon",n),width:r,fill:a,viewBox:l,...s},o)}))}Nt.displayName="LiveIndicator";const Dt=Lt({viewBox:"0 0 24 24",svg:R.createElement(R.Fragment,null,R.createElement("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"}),R.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});Dt.displayName="PauseIcon";const _t=Lt({viewBox:"0 0 24 24",svg:R.createElement(R.Fragment,null,R.createElement("path",{d:"M8 5v14l11-7z"}),R.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});_t.displayName="PlayIcon";const At=q((()=>{const e=T(null),t=M(yt),i=T(!1);return I((()=>{const t=e.current;if(!t)return;const i=()=>{t.style.display="none"};return t.addEventListener("animationend",i),()=>{t.removeEventListener("animationend",i)}}),[]),I((()=>{e.current&&(i.current?e.current.style.display="block":i.current=!0)})),R.createElement("div",{ref:e,className:"x-3deye-player__playback-indicator"},t.paused?R.createElement(Dt,{size:32,color:"rgba(255, 255, 255, 0.8)"}):R.createElement(_t,{size:32,color:"rgba(255, 255, 255, 0.8)"}))}));At.displayName="PlaybackIndicator";const Ft=q((()=>{const e=M(yt);if(!e.error)return null;const t=e.error?"CONNECTION_TIMEOUT_ERROR"===e.error.name?Je.t("player.playbackTimeoutError",{count:e.error.cause.count}):"CAMERA_OFFLINE_ERROR"===e.error.name?e.camera.enabled?Je.t("player.cameraIsOffline"):Je.t("player.cameraIsDisabled"):"NO_PLAYABLE_STREAM_ERROR"===e.error.name?Je.t("player.noPlayableStream"):"NO_VIDEO_TRACK_ERROR"===e.error.name?Je.t("player.noVideoTrack"):Je.t("player.genericError"):null;return R.createElement("div",{style:{position:"absolute",top:0,left:0,bottom:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"}},R.createElement("span",{style:{backgroundColor:"rgba(0, 0, 0, 0.5)",padding:"8px 16px",fontSize:12}},t))})),zt=120;function Qt({angle:e,onChange:t}){const i=T(e);i.current=e;const r=Array.from({length:40}).map(((t,i)=>{const r=Math.PI/20;let a=Math.max(0,r*i+e+2*Math.PI);for(;a>2*Math.PI;)a-=2*Math.PI;return[i,Math.sin(a)/2,a>=0&&a<=Math.PI/2?(Math.PI/2-a)/Math.PI*2:a>=1.5*Math.PI&&a<=2*Math.PI?(a-1.5*Math.PI)/Math.PI*2:0,0===i||e>=0&&r*i>=2*Math.PI-e||e<0&&r*i<-e]})).filter((e=>e[2])),a=$e((({first:e,movement:[r,a],memo:n})=>{if(e)return{a:i.current};const{a:s}=n;return t(s+a/zt*2),{a:s}}));return R.createElement("div",{style:{touchAction:"none",position:"relative",height:zt},...a()},r.map((([e,t,i,r],a)=>{const n=e%5==0;return R.createElement("div",{key:a,style:{position:"absolute",width:0===e?30:n?24:20,height:2,background:r?"orange":"currentColor",opacity:i,translate:`${0===e?-5:n?-2:0}px ${60+t*zt}px`}})})))}const Vt=(e,t,i)=>Math.min(Math.max(e,t),i),Ht=()=>{},Ut=e=>Math.round(e),Bt=R.forwardRef((({value:e,onChange:t,onChangeComplete:i,orientation:r="horizontal",disabled:a=!1,labelFormat:n=e=>`${e}`,style:s},l)=>{const o=T(null),c=T(null),[u,d]=k(!1),[h,m]=k(e);I((()=>{if(!u)return;const e=o.current;if(!e)return;let a=0,n=0;const s=e.getBoundingClientRect();if(!s||!s.width||!s.height)return void d(!1);const l=({clientX:e,clientY:i})=>{if(!c.current)return;let l=0;"horizontal"===r?(a=Vt(e-s.x,0,s.width),l=a/s.width*100,c.current.style.transform=`translateX(${a}px)`):(n=s.height-Vt(i-s.y,0,s.height),l=n/s.height*100,c.current.style.transform=`translateY(${-n}px)`),m(l),null==t||t(Ut(l))},h=({clientX:e,clientY:a})=>{if(d(!1),!c.current)return;const n="horizontal"===r?Vt(e-s.x,0,s.width)/s.width*100:100*(1-Vt(a-s.y,0,s.height)/s.height);c.current.style.transform="",m(n),null==t||t(Ut(n)),null==i||i(Ut(n))},p=()=>{if(d(!1),!c.current)return;const e="horizontal"===r?a/s.width*100:n/s.height*100;c.current.style.transform="",null==t||t(Ut(e)),null==i||i(Ut(e))};return e.addEventListener("pointercancel",p),e.addEventListener("pointermove",l),e.addEventListener("pointerup",h),()=>{e.removeEventListener("pointercancel",p),e.removeEventListener("pointermove",l),e.removeEventListener("pointerup",h)}}),[u,r,t]);const p=S((({clientX:e,clientY:i,pointerId:n})=>{if(!o.current||a)return;d(!0),o.current.setPointerCapture(n);const s=o.current.getBoundingClientRect();if(!s)return;if(!c.current)return;let l=0;if("horizontal"===r){const t=Vt(e-s.x,0,s.width);l=t/s.width*100,c.current.style.transform=`translateX(${t}px)`}else{const e=s.height-Vt(i-s.y,0,s.height);l=e/s.height*100,c.current.style.transform=`translateY(${-e}px)`}m(l),null==t||t(Ut(l))}),[r,a]),b=S((r=>{if(a)return;let n=null;"ArrowLeft"===r.code?n=Math.max(e-1,0):"ArrowRight"===r.code?n=Math.min(e+1,100):"ArrowDown"===r.code?n=Math.max(e-1,0):"ArrowUp"===r.code&&(n=Math.min(e+1,100)),null!==n&&(r.stopPropagation(),r.preventDefault(),null==t||t(n),null==i||i(n))}),[e,t,i,r,a]);return R.createElement("div",{ref:We(l,o),tabIndex:0,onKeyDown:b,className:Ie("x-3deye-slider",r,{disabled:a}),onPointerDown:p,style:s},R.createElement("div",{className:"x-3deye-slider__track"},R.createElement("div",{className:"x-3deye-slider__bar",style:{width:"horizontal"===r?`${u?h:e}%`:void 0,height:"vertical"===r?`${u?h:e}%`:void 0}})),R.createElement("div",{ref:c,className:Ie("x-3deye-slider__thumb",{active:u}),style:{touchAction:"none",userSelect:"none",position:"absolute",left:"horizontal"===r?u?0:`${e}%`:"auto",bottom:"vertical"===r?u?0:`${e}%`:"auto"}},null!==n&&R.createElement("div",{className:"x-3deye-slider__label "+(u?"open":"")},n(u?Ut(h):e))))}));function Wt(e,t,i){return t<i?Math.max(Math.min(e,i),t):Math.max(Math.min(e,t),i)}function $t(e,t,i){e=Se(e);const r=Me(e,[[0,0],[0,i],[t,0],[t,i]]),a=Math.min(...r.map((e=>e[0]))),n=Math.max(...r.map((e=>e[0]))),s=Math.min(...r.map((e=>e[1]))),l=Math.max(...r.map((e=>e[1]))),{scale:{sx:o},rotation:{angle:c}}=ye(e);if(c<0)if(c>-Math.PI/2){const r=-Math.sin(c)*o*t;e.e=Wt(e.e,t+a-n,0),e.f=Wt(e.f,r-l+s+i,r)}else{const r=-Math.cos(c)*o*t;e.e=Wt(e.e,r,t+a-n+r),e.f=Wt(e.f,i,l-s)}if(c>0)if(c<Math.PI/2){const r=Math.sin(c)*o*i;e.e=Wt(e.e,r-n+a+t,r),e.f=Wt(e.f,i+s-l,0)}else{const r=-Math.cos(c)*o*i;e.e=Wt(e.e,t,n-a),e.f=Wt(e.f,i+s-l+r,r)}return 0===c&&(e.e=Wt(e.e,(1-o)*t,0),e.f=Wt(e.f,(1-o)*i,0)),e}Bt.displayName="Slider";const qt=q((({hideCameraTitle:e,width:t,height:i,onDoubleClick:r,onAuxClick:a,onMouseDown:n,children:s})=>{var l;const o=M(yt),c=R.useRef(null),u=R.useRef(null),d=`zoom-slider-${o.id}`,h=200,m=136,p=()=>{var e;const t=null!==(e=o.transform)&&void 0!==e?e:we();if(!u.current)return;const i=u.current.querySelector(".x-3deye-player__zoomable");if(!i)return;i.style.transformOrigin="0 0";const{scale:{sx:r},translate:{tx:a,ty:n},rotation:{angle:s}}=ye(t);if(0===s){const e=1/r,t=-a/(o.width/h)*e,s=-n/(o.height/m)*e;return void(i.style.transform=xe(Ee(Ce(t,s),Re(e))))}const{width:l,height:c}=o,d=Me(t,[[0,0],[0,c],[l,0],[l,c]]),p=Math.min(...d.map((([e])=>e))),b=Math.max(...d.map((([e])=>e))),v=Math.min(...d.map((([e,t])=>t))),f=Math.max(...d.map((([e,t])=>t)));let g=0,y=0,w=1,E=[0,1],P=[0,1];if(s<0&&s>-Math.PI/2){const e=-Math.sin(s)*r*l;w=l/(l+Math.abs(l+p-b)),E=[0,h*(1-w)],P=[0,m*(1-w)],g=Ze([0,l+p-b],E)(t.e),y=Ze([e,e-f+v+c],P)(t.f),i.dataset.factorX=((l+p-b)/(E[1]-E[0])).toString(),i.dataset.factorY=((-f+v+c)/(P[1]-P[0])).toString()}if(s<0&&s<-Math.PI/2){const e=-Math.cos(s)*r*l;w=l/(l+Math.abs(l+p-b)),E=[0,h*(1-w)],P=[0,m*(1-w)],g=Ze([e,l+p-b+e],E)(t.e),y=Ze([f-v,c],P)(t.f),i.dataset.factorX=((l+p-b)/(E[1]-E[0])).toString(),i.dataset.factorY=((c-f+v)/(P[1]-P[0])).toString()}if(s>0&&s<Math.PI/2){const e=Math.sin(s)*r*c;w=c/(c+Math.abs(c+v-f)),E=[0,h*(1-w)],P=[0,m*(1-w)],g=Ze([e,e-b+p+l],E)(t.e),y=Ze([0,c+v-f],P)(t.f),i.dataset.factorX=((-b+p+l)/(E[1]-E[0])).toString(),i.dataset.factorY=((c+v-f)/(P[1]-P[0])).toString()}if(s>0&&s>Math.PI/2){const e=-Math.cos(s)*r*c;w=c/(c+Math.abs(c+v-f)),E=[0,h*(1-w)],P=[0,m*(1-w)],g=Ze([b-p,l],E)(t.e),y=Ze([e,c+v-f+e],P)(t.f),i.dataset.factorX=((l-b+p)/(E[1]-E[0])).toString(),i.dataset.factorY=((c+v-f)/(P[1]-P[0])).toString()}i.style.transform=xe(Ee(Ce(g,y),Re(w)))};I((()=>Q((()=>({width:o.width,height:o.height})),(({width:e,height:t},{width:i,height:r})=>{var a;if(!e||!t)return;if(!i||!r)return;if(i===e&&r===t)return;const n=null!==(a=o.transform)&&void 0!==a?a:we(),{scale:s}=ye(n);if(1===s.sx)return;const l=ke(n),c=Oe(l,{x:i/2,y:r/2}),u=Oe(n,{x:c.x/i*e,y:c.y/r*t}),d=Ee(Ce(e/2-u.x,t/2-u.y),n);o.setTransform(d),p()}))),[]),qe({onMouseDown:({event:e})=>{n(e)},onDrag:({movement:e,last:r,altKey:a,first:n,xy:s,memo:l,pinching:u,cancel:d})=>{var h;if(u)return void d();const m=n?null!==(h=o.transform)&&void 0!==h?h:we():l.matrix;if(a&&n){const{top:e,left:r}=c.current.getBoundingClientRect(),{rotation:{angle:a}}=ye(m);return{startAngle:Math.atan2(s[1]-(e+i/2),s[0]-(r+t/2))-a,matrix:m}}if(void 0!==(null==l?void 0:l.startAngle)){const{top:e,left:r}=c.current.getBoundingClientRect(),{rotation:{angle:a}}=ye(m),n=Math.atan2(s[1]-(e+i/2),s[0]-(r+t/2)),u=Ee(Pe(n-l.startAngle-a,t/2,i/2),m);return void o.setTransform(u)}const p=$t(Ee(Ce(...e),m),t,i);return o.setTransform(p),{matrix:m}},onPinch:({first:e,last:t,da:i,origin:r,memo:a})=>{var n;if(t)return;const[s,l]=i;let[u,d]=r;const{top:h,left:m}=c.current.getBoundingClientRect();u-=m,d-=h;const p={x:u+s/2*Math.sin(l*Math.PI/180),y:d-s/2*Math.cos(l*Math.PI/180)},b={x:u-s/2*Math.sin(l*Math.PI/180),y:d+s/2*Math.cos(l*Math.PI/180)};if(e){return{prevP1:p,prevP2:b,prevMatrix:null!==(n=o.transform)&&void 0!==n?n:we()}}const{prevP1:v,prevP2:f,prevMatrix:g}=a,y=Te(v,f,p,b),w=Ee(y,g);return o.setTransform(w),{prevP1:p,prevP2:b,prevMatrix:w}},onWheel:({last:e,event:r,memo:a})=>{var n,s;if(e)return;const l=null!==(s=null!==(n=a)&&void 0!==n?n:o.transform)&&void 0!==s?s:we(),{top:u,left:d}=c.current.getBoundingClientRect(),h=r.clientX-d,m=r.clientY-u;let p=2**function(e){return-e.deltaY*(1===e.deltaMode?.05:e.deltaMode?1:.002)*(e.ctrlKey?10:1)}(r);const b=Math.sqrt(l.a**2+l.b**2);p*b<1&&(p=1/b),p*b>4&&(p=4/b);const v=$t(Ee(Re(p,p,h,m),l),t,i);return o.setTransform(v,!0),v}},{target:c,pinch:{pinchOnWheel:!1,scaleBounds:{min:.5,max:2}},wheel:{eventOptions:{passive:!1},preventDefault:!0}}),I((()=>Q((()=>o.transform),p)),[]);const b=$e((({movement:e,first:t,memo:i,target:r})=>{var a;if(t){const{rotation:{angle:e}}=ye(null!==(a=o.transform)&&void 0!==a?a:we());return{matrix:o.transform,angle:e}}const{matrix:n,angle:s}=i,l=$t(s?Ee(Ce(e[0]*+r.dataset.factorX,e[1]*+r.dataset.factorY),n):Ee(n,Ce(-e[0]*o.width/h,-e[1]*o.height/m)),o.width,o.height);return o.setTransform(l),{matrix:n,angle:s}})),{scale:{sx:v},rotation:{angle:f}}=ye(null!==(l=o.transform)&&void 0!==l?l:we());return R.createElement(R.Fragment,null,R.createElement("div",{className:"x-3deye-player__overlay"},R.createElement("div",{ref:c,style:{position:"absolute",touchAction:"none",top:0,bottom:0,left:0,right:0},onDoubleClick:r||C,onAuxClick:a}),R.createElement(At,null),R.createElement("div",{className:"x-3deye-player__indicators"},e?null:R.createElement(It,null),R.createElement("div",{style:{flex:1}}),R.createElement(Nt,null),R.createElement(jt,null)),o.loading&&R.createElement(Rt,{style:{pointerEvents:"none",position:"absolute",top:"calc(50% - 33px)",left:"calc(50% - 33px)"}}),R.createElement(Ft,null),s),R.createElement(R.Fragment,null,R.createElement("div",{id:d,className:"x-3deye-player__zoom-slider",style:{color:"#fff8",display:1!==v||0!==f?"flex":"none",gap:8}},R.createElement("div",{ref:u,className:"x-3deye-player__zoom-preview",style:{width:204,height:140},tabIndex:-1},R.createElement("div",{className:"zoom-value"},`${v.toPrecision(3)}x`),R.createElement("div",{className:"x-3deye-player__zoomable",...b(),style:{touchAction:"none"}})),R.createElement("div",{style:{height:136,paddingBlock:8,paddingLeft:8,marginLeft:-8}},R.createElement(Bt,{orientation:"vertical",value:(v-1)/3*100,onChange:e=>{var t;const i=1+e/100*3,r=null!==(t=o.transform)&&void 0!==t?t:we(),a=o.width/2,n=o.height/2,s=Math.sqrt(r.a**2+r.b**2),l=$t(Ee(Re(i/s,i/s,a,n),r),o.width,o.height);o.setTransform(l)},labelFormat:null})),R.createElement("div",{style:{paddingBottom:20,width:32,marginRight:-8}},R.createElement(Qt,{angle:f,onChange:e=>{var r;const a=null!==(r=o.transform)&&void 0!==r?r:we(),{rotation:{angle:n}}=ye(a),s=Ee(Pe(e-n,t/2,i/2),a);o.setTransform(s)}}),R.createElement(Tt,{disabled:!f,title:f?Je.t("playerTools.resetRotation"):null,style:{position:"absolute",color:"currentColor",right:4,bottom:2,fontFamily:"Roboto Mono, monospace",letterSpacing:"-0.1em",paddingInline:0,paddingBlock:2,height:"fit-content",fontSize:"0.75rem"},onMouseDown:()=>{var e;const r=null!==(e=o.transform)&&void 0!==e?e:we(),{rotation:{angle:a}}=ye(r),n=Ee(Pe(-a,t/2,i/2),r),s=$t(n,t,i);o.setTransform(s,!0),o.isRotating=Math.abs(n.e-s.e)<1e-6&&Math.abs(n.f-s.f)<1e-6}},(180*f/Math.PI).toFixed(1),"°")))))}));qt.displayName="PlayerOverlay";const Zt=new URLSearchParams(location.search.toLowerCase()),Yt=Zt.has("dash")||Zt.has("dvr"),Gt=q(R.forwardRef((({id:e,archivesStore:t,auth:i,startTime:r,endTime:a,clip:n,camera:s,webRtcOptions:l,className:o,controls:c,onDoubleClick:u,onMouseDown:d,onAuxClick:h,hideCameraTitle:m,controllerRef:p,videoRef:b,...v},f)=>{const g=T(null),[y,w]=k(0),E=T(null),P=T(null),[C,O]=k((()=>new WeakRef(s))),M=T(null),[x]=k((()=>new Ct({camera:s,startTime:r,endTime:a,clip:n,archivesStore:t,behaviors:{archive:e=>new ot(e,E.current),DVR:e=>ue.isSupported()?new ht(e,Yt,E.current,i):new ct(e,E.current),WebRTC:Yt||!1===(null==l?void 0:l.enabled)?null:e=>new gt(e,null==l?void 0:l.allowedIceCandidateProtocols)}})));j(p,(()=>x),[]),I((()=>{P.current=new lt(E.current,x);const e=et?at((()=>x.mode),!0).pipe(oe()).subscribe((([e])=>{"WebRTC"===e&&(M.current={restoreAt:x.seekTime},x.detach(),w((e=>e+1)))})):void 0;return()=>{var t;null==e||e.unsubscribe(),null===(t=P.current)||void 0===t||t.dispose(),P.current=null,x.detach()}}),[]);const{muted:N,paused:L}=x;I((()=>{M.current&&(P.current.dispose(),M.current.restoreAt&&x.setStartTime(M.current.restoreAt),P.current=new lt(E.current,x),M.current=null)}),[y]),I((()=>{const e=new Y((e=>{for(const t of e){const e=t.contentRect.width,i=t.contentRect.height;V((()=>{x.width=e,x.height=i}))}}));return e.observe(g.current),()=>{e.disconnect()}}),[]),I((()=>{if(C.deref()!==s)return x.setCameraAndStartTime(s,r||null),x.resetTransform(),void O(new WeakRef(s));x.setStartTime(r||null)}),[s,+(r||0)]);const D=S((e=>{e.currentTarget===e.target&&0===e.button&&d&&d(e)}),[d]);return R.createElement("div",{ref:We(g,f),id:e||`player-${x.id}`,className:Ie(o,"x-3deye-player",{"x-3deye-player--paused":L}),...v},R.createElement("div",{className:"x-3deye-player__zoomable-wrapper"},R.createElement("div",{className:"x-3deye-player__zoomable",style:{transformOrigin:"0 0",transform:x.transform?xe(x.transform):void 0}},R.createElement("video",{key:y,autoPlay:!0,crossOrigin:"anonymous",playsInline:!0,ref:We(E,b),muted:N,style:(e=>{var t,i;if("archive"!==x.mode||!et||"fill"!==e.objectFit)return e;let r=1,a=1;const{width:n,height:s}=x,l=x.camera.raw.width||(null===(t=E.current)||void 0===t?void 0:t.videoWidth),o=x.camera.raw.height||(null===(i=E.current)||void 0===i?void 0:i.videoHeight);if(!(l&&o&&n&&s))return e;const c=l/o;n/s>c?(r=n/(s*c),a=1):(r=1,a=s/(n/c));const{objectFit:u,...d}=e;return{...d,objectFit:"contain",scale:`${r} ${a}`}})({objectFit:x.videoResizeMode})}))),R.createElement(yt.Provider,{value:x},R.createElement(qt,{onDoubleClick:u,onAuxClick:h,onMouseDown:D,width:x.width,height:x.height,hideCameraTitle:m},c)))})));Gt.displayName="Player";const Xt=R.forwardRef((({children:e,className:t,...i},r)=>(t=t?`x-3deye-player__control ${t}`:"x-3deye-player__control",R.createElement(Tt,{ref:r,className:t,...i},e))));Xt.displayName="Control";const Jt=Lt({viewBox:"0 0 24 24",svg:R.createElement(R.Fragment,null,R.createElement("path",{d:"M12 13.05 6.925 18.125Q6.725 18.325 6.413 18.337Q6.1 18.35 5.875 18.125Q5.65 17.9 5.65 17.6Q5.65 17.3 5.875 17.075L10.95 12L5.875 6.925Q5.675 6.725 5.663 6.412Q5.65 6.1 5.875 5.875Q6.1 5.65 6.4 5.65Q6.7 5.65 6.925 5.875L12 10.95L17.075 5.875Q17.275 5.675 17.588 5.662Q17.9 5.65 18.125 5.875Q18.35 6.1 18.35 6.4Q18.35 6.7 18.125 6.925L13.05 12L18.125 17.075Q18.325 17.275 18.337 17.587Q18.35 17.9 18.125 18.125Q17.9 18.35 17.6 18.35Q17.3 18.35 17.075 18.125Z"}))});Jt.displayName="CloseIcon";const Kt=({onClick:e})=>e?R.createElement(Xt,{className:"x-3deye-player__control-close",onClick:e,title:Je.t("playerTools.closePlayer")},R.createElement(Jt,null)):null;Kt.displayName="CloseControl";const ei="x-3deye-player__controls--spaced",ti="x-3deye-player__controls--compact",ii="x-3deye-player__control--reflowed",ri=e=>{var t,i;if(!e)return;e.classList.contains(ti)&&(e.classList.remove(ti),Array.from(e.children).filter((e=>e.classList.contains(ii))).forEach((e=>{e.style.position="",e.style.bottom="",e.style.right="",e.classList.remove(ii)}))),e.classList.contains(ei)&&(e.classList.remove(ei),e.querySelectorAll(".before-spacer").forEach((e=>e.classList.remove("before-spacer"))));if(e.scrollWidth-e.offsetWidth<=0){(null===(t=e.querySelector(".spacer"))||void 0===t?void 0:t.clientWidth)&&e.classList.add(ei);for(const t of e.querySelectorAll(".spacer"))null===(i=t.previousElementSibling)||void 0===i||i.classList.add("before-spacer");return}e.classList.add(ti);const r=Array.from(e.children);let a=2,n=a;for(;e.scrollWidth-e.offsetWidth>0&&a<=r.length;){const e=r[r.length-a];e&&!e.classList.contains("spacer")?(e.style.position="absolute",e.style.bottom=8+38*(n-1)+"px",e.style.right="8px",e.classList.add(ii),a++,n++):a++}};function ai({style:e,children:t}){const i=T(null);return I((()=>{if(!i.current)return;const e=new MutationObserver((()=>ri(i.current)));return e.observe(i.current,{childList:!0}),()=>e.disconnect()}),[]),I((()=>{const e=new ResizeObserver((()=>{ri(i.current)})),t=i.current;return t&&e.observe(t),()=>e.disconnect()}),[]),N((()=>{ri(i.current)})),R.createElement("div",{ref:i,className:"x-3deye-player__controls",style:e},t)}ai.Spacer=()=>R.createElement("div",{className:"spacer"});const ni=[{value:.5,name:"0.5x"},{value:1,name:"1x"},{value:2,name:"2x"},{value:4,name:"4x"},{value:8,name:"8x"},{value:16,name:"16x"}],si=q((()=>{const[e,t]=k(!1),i=M(yt);if("WebRTC"===i.mode)return null;let r=ni.findIndex((e=>e.value===i.playbackRate));-1===r&&(r=1);const a=R.createElement(Xt,{className:"control-playbackrate",onClick:()=>t(!e),title:Je.t("playerTools.playbackRate")},ni[r].name);return R.createElement(Mt,{placement:"top",withArrow:!0,target:a,opened:e,onOpenChange:t,className:"popover-playbackrate"},Array.from({length:ni.length},((e,t)=>(t=ni.length-1-t,R.createElement(Tt,{key:t,onClick:()=>{return e=t,void i.setPlaybackRate(ni[e].value);var e},style:{border:"2px solid "+(t===r?"rgba(255,255,255,0.5)":"transparent")}},ni[t].name)))))}));si.displayName="PlaybackRateControl";const li=Lt({viewBox:"0 0 24 24",svg:R.createElement(R.Fragment,null,R.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),R.createElement("path",{d:"M14.75 18.5Q14.125 18.5 13.688 18.062Q13.25 17.625 13.25 17V7Q13.25 6.375 13.688 5.938Q14.125 5.5 14.75 5.5H17Q17.625 5.5 18.062 5.938Q18.5 6.375 18.5 7V17Q18.5 17.625 18.062 18.062Q17.625 18.5 17 18.5ZM7 18.5Q6.375 18.5 5.938 18.062Q5.5 17.625 5.5 17V7Q5.5 6.375 5.938 5.938Q6.375 5.5 7 5.5H9.25Q9.875 5.5 10.312 5.938Q10.75 6.375 10.75 7V17Q10.75 17.625 10.312 18.062Q9.875 18.5 9.25 18.5ZM14.75 17H17V7H14.75ZM7 17H9.25V7H7ZM7 7V17ZM14.75 7V17Z"}))});li.displayName="PauseIcon";const oi=Lt({viewBox:"0 0 24 24",svg:R.createElement(R.Fragment,null,R.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),R.createElement("path",{d:"M 8.739583,18.4955 Q 8.2525391,18.799994 7.7654953,18.526169 7.2791816,18.252344 7.2791816,17.674025 V 6.3259749 q 0,-0.578319 0.4863137,-0.852144 0.4870438,-0.273825 0.9740877,0.03067 l 8.91429,5.6889941 q 0.456376,0.304494 0.456376,0.806872 0,0.501648 -0.456376,0.806142 z M 8.80019,12.014969 Z m 0,4.625091 7.302007,-4.625091 L 8.80019,7.3906079 Z"}))});oi.displayName="PlayIcon";const ci=q((()=>{const e=M(yt);return R.createElement(Xt,{className:"x-3deye-player__control-playpause",onClick:e.togglePlayback,title:e.paused?Je.t("playerTools.play"):Je.t("playerTools.pause")},e.paused?R.createElement(oi,null):R.createElement(li,null))}));ci.displayName="PlayPauseControl";const ui=Lt({viewBox:"0 0 24 24",svg:R.createElement("g",null,R.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),R.createElement("path",{d:"M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"}))});ui.displayName="AspectRatioIcon";const di=Lt({viewBox:"0 0 24 24",svg:R.createElement("g",null,R.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),R.createElement("path",{d:"M12.01 5.5L10 8h4l-1.99-2.5zM18 10v4l2.5-1.99L18 10zM6 10l-2.5 2.01L6 14v-4zm8 6h-4l2.01 2.5L14 16zm7-13H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"}))});di.displayName="SettingsOverscanIcon";const hi=q((()=>{const e=M(yt);return R.createElement(Xt,{onClick:e.toggleResizeMode,title:e.videoResizeMode===Et.Fit?Je.t("videoResizeMode.fit"):Je.t("videoResizeMode.stretch")},e.videoResizeMode===Et.Fit?R.createElement(ui,{size:16}):R.createElement(di,{size:16}))}));hi.displayName="ResizeModeControl";const mi=Lt({viewBox:"0 0 24 24",svg:R.createElement(R.Fragment,null,R.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),R.createElement("path",{d:"M 10 3.5 C 9.75 3.5 9.508724 3.5503906 9.2753906 3.6503906 C 9.0420573 3.7503906 8.8424479 3.8908854 8.6757812 4.0742188 L 7.3496094 5.5 L 4.3007812 5.5 C 3.8007813 5.5 3.3753906 5.6753906 3.0253906 6.0253906 C 2.6753906 6.3753906 2.5 6.8007812 2.5 7.3007812 L 2.5 18.699219 C 2.5 19.199219 2.6753906 19.624609 3.0253906 19.974609 C 3.3753906 20.324609 3.8007813 20.5 4.3007812 20.5 L 19.699219 20.5 C 20.199219 20.5 20.624609 20.324609 20.974609 19.974609 C 21.324609 19.624609 21.5 19.199219 21.5 18.699219 L 21.5 7.3007812 C 21.5 6.8007813 21.324609 6.3753906 20.974609 6.0253906 C 20.624609 5.6753906 20.199219 5.5 19.699219 5.5 L 16.650391 5.5 L 15.324219 4.0742188 C 15.157552 3.8908854 14.957943 3.7503906 14.724609 3.6503906 C 14.491276 3.5503906 14.25 3.5 14 3.5 L 10 3.5 z M 4.3007812 7 L 19.699219 7 C 19.782552 7 19.853443 7.029224 19.912109 7.0878906 C 19.970109 7.1458906 20 7.2174479 20 7.3007812 L 20 18.699219 C 20 18.782552 19.970109 18.853443 19.912109 18.912109 C 19.853443 18.970109 19.782552 19 19.699219 19 L 4.3007812 19 C 4.2174479 19 4.1458906 18.970109 4.0878906 18.912109 C 4.029224 18.853443 4 18.782552 4 18.699219 L 4 7.3007812 C 4 7.2174479 4.029224 7.1458906 4.0878906 7.0878906 C 4.1458906 7.029224 4.2174479 7 4.3007812 7 z M 12 8.875 C 10.85 8.875 9.8742188 9.2742187 9.0742188 10.074219 C 8.2742188 10.874219 7.875 11.85 7.875 13 C 7.875 14.15 8.2742187 15.125781 9.0742188 15.925781 C 9.8742188 16.725781 10.85 17.125 12 17.125 C 13.15 17.125 14.125781 16.725781 14.925781 15.925781 C 15.725781 15.125781 16.125 14.15 16.125 13 C 16.125 11.85 15.725781 10.874219 14.925781 10.074219 C 14.125781 9.2742188 13.15 8.875 12 8.875 z M 12 10.386719 A 2.6057522 2.6057522 0 0 1 14.605469 12.992188 A 2.6057522 2.6057522 0 0 1 12 15.599609 A 2.6057522 2.6057522 0 0 1 9.3945312 12.992188 A 2.6057522 2.6057522 0 0 1 12 10.386719 z "}))});mi.displayName="CameraIcon";const pi=()=>{const e=R.useContext(yt);return R.createElement(Xt,{onClick:()=>{const t=`${e.camera.name} ${(e.currentTime||new Date).toISOString().replace(/:/g,"-")}`;((e,t)=>{const i=document.createElement("canvas"),r=i.getContext("2d");if(!r)return;const{videoWidth:a,videoHeight:n}=e;i.width=a,i.height=n,r.drawImage(e,0,0,a,n);const s=i.toDataURL("image/jpeg"),l=document.createElement("a");l.href=s,l.download=`${t}.jpg`,document.body.appendChild(l),l.click(),l.remove()})(e.video,t)},title:Je.t("playerTools.snapshot")},R.createElement(mi,null))};pi.displayName="SnapshotControl";const bi=Lt({viewBox:"0 0 24 24",svg:R.createElement(R.Fragment,null,R.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),R.createElement("path",{d:"M18.95 21.6 16.45 19.125Q16.15 19.3 15.838 19.462Q15.525 19.625 15.2 19.775Q14.825 19.925 14.5 19.675Q14.175 19.425 14.175 19Q14.175 18.8 14.3 18.65Q14.425 18.5 14.6 18.4Q14.8 18.325 15 18.237Q15.2 18.15 15.375 18.05L11.8 14.45V16.6Q11.8 17.2 11.238 17.438Q10.675 17.675 10.25 17.25L7.5 14.5H4.7Q4.3 14.5 4.05 14.238Q3.8 13.975 3.8 13.6V10.4Q3.8 10.025 4.05 9.762Q4.3 9.5 4.7 9.5H6.825L2.525 5.2Q2.325 4.975 2.312 4.662Q2.3 4.35 2.525 4.125Q2.75 3.925 3.05 3.925Q3.35 3.925 3.575 4.125L20 20.55Q20.2 20.775 20.213 21.087Q20.225 21.4 20 21.6Q19.775 21.825 19.475 21.825Q19.175 21.825 18.95 21.6ZM15.2 4.175Q17.575 5.175 19.025 7.275Q20.475 9.375 20.475 11.975Q20.475 13.3 20.088 14.5Q19.7 15.7 18.975 16.725L17.9 15.65Q18.425 14.85 18.7 13.912Q18.975 12.975 18.975 11.975Q18.975 9.825 17.775 8.087Q16.575 6.35 14.6 5.55Q14.4 5.45 14.288 5.287Q14.175 5.125 14.175 4.925Q14.175 4.5 14.5 4.262Q14.825 4.025 15.2 4.175ZM9.3 11.975ZM15.925 13.675 14.175 11.925V8.3Q15.175 8.85 15.738 9.85Q16.3 10.85 16.3 12Q16.3 12.45 16.2 12.862Q16.1 13.275 15.925 13.675ZM11.8 9.525 9.625 7.375 10.25 6.75Q10.675 6.325 11.238 6.562Q11.8 6.8 11.8 7.4ZM10.3 15.15V12.95L8.325 11H5.3V13H8.15Z"}))});bi.displayName="VolumeOffIcon";const vi=Lt({viewBox:"0 0 24 24",svg:R.createElement(R.Fragment,null,R.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),R.createElement("path",{d:"M15.05 19.775Q14.675 19.925 14.363 19.675Q14.05 19.425 14.05 19Q14.05 18.8 14.163 18.65Q14.275 18.5 14.475 18.4Q16.45 17.6 17.65 15.863Q18.85 14.125 18.85 11.975Q18.85 9.825 17.65 8.087Q16.45 6.35 14.475 5.55Q14.25 5.45 14.15 5.287Q14.05 5.125 14.05 4.925Q14.05 4.5 14.363 4.262Q14.675 4.025 15.05 4.175Q17.45 5.175 18.9 7.275Q20.35 9.375 20.35 11.975Q20.35 14.575 18.9 16.675Q17.45 18.775 15.05 19.775ZM4.55 14.5Q4.175 14.5 3.913 14.238Q3.65 13.975 3.65 13.6V10.4Q3.65 10.025 3.913 9.762Q4.175 9.5 4.55 9.5H7.375L10.125 6.75Q10.55 6.325 11.1 6.562Q11.65 6.8 11.65 7.4V16.6Q11.65 17.2 11.1 17.438Q10.55 17.675 10.125 17.25L7.375 14.5ZM14.05 15.65V8.3Q15 8.825 15.575 9.825Q16.15 10.825 16.15 12Q16.15 13.175 15.575 14.15Q15 15.125 14.05 15.65ZM10.15 8.85 8 11H5.15V13H8L10.15 15.15ZM7.65 12Z"}))});vi.displayName="VolumeUpIcon";const fi=e=>{e.stopPropagation()},gi=q((()=>{const e=M(yt);return R.createElement(Xt,{className:"volume-control",title:Je.t("playerTools.volume"),onClick:e.toggleMute,onWheel:t=>{const i=t.deltaY;i&&e.setVolume(Vt(e.volume+(i<0?.1:-.1),0,1))}},e.muted?R.createElement(bi,null):R.createElement(vi,null),R.createElement("div",{onClick:fi,className:"volume-range"},R.createElement(Bt,{value:Math.round(100*e.volume),labelFormat:e=>`${e}%`,orientation:"vertical",onChange:t=>{e.setVolume(Number(t)/100)}})))}));gi.displayName="VolumeControl";const yi=q((({onRequestClose:e,fullscreenControl:t})=>R.createElement(ai,null,R.createElement(ci,null),R.createElement(gi,null),R.createElement(si,null),R.createElement(hi,null),R.createElement(ai.Spacer,null),R.createElement(pi,null),t,R.createElement(Kt,{onClick:e}))));yi.displayName="ToolkitPlayerControls";const wi=!!navigator.platform&&/iPad|iPhone|iPod/.test(navigator.platform);function Ei(){const[e,t]=k(void 0),[i,r]=k(!1),a=wi&&e instanceof HTMLVideoElement?"webkitEnterFullscreen"in e:document.fullscreenEnabled||Boolean(document.webkitFullscreenEnabled);const n=S((e=>{t(e||void 0)}),[]);I((()=>{const t=()=>{r(document.fullscreenElement===(e||document.documentElement))};return document.addEventListener("fullscreenchange",t),document.addEventListener("webkitfullscreenchange",t),()=>{document.removeEventListener("fullscreenchange",t),document.removeEventListener("webkitfullscreenchange",t)}}),[e]);return{ref:n,toggle:S((()=>{a&&(document.fullscreenElement!==(e||document.documentElement)?(e||document.documentElement).requestFullscreen():document.exitFullscreen())}),[e,i]),enabled:a,active:i}}const Pi=Lt({viewBox:"0 0 24 24",svg:R.createElement(R.Fragment,null,R.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),R.createElement("path",{d:"M5 19v-5h1.5v3.5H10V19Zm0-9V5h5v1.5H6.5V10Zm9 9v-1.5h3.5V14H19v5Zm3.5-9V6.5H14V5h5v5Z"}))});Pi.displayName="FullscreenIcon";const Ci=Lt({viewBox:"0 0 24 24",svg:R.createElement(R.Fragment,null,R.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),R.createElement("path",{d:"M8.5 19v-3.5H5V14h5v5ZM5 10V8.5h3.5V5H10v5Zm9 9v-5h5v1.5h-3.5V19Zm0-9V5h1.5v3.5H19V10Z"}))});Ci.displayName="FullscreenExitIcon";const Ri=({toggle:e,active:t})=>R.createElement(Xt,{onClick:null!=e?e:void 0,title:Je.t("playerTools.fullScreen")},t?R.createElement(Ci,null):R.createElement(Pi,null));Ri.displayName="FullscreenControl";const ki=Lt({viewBox:"0 0 24 24",svg:R.createElement(R.Fragment,null,R.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),R.createElement("path",{d:"M12 3L1 11.4l1.21 1.59L4 11.62V21h16v-9.38l1.79 1.36L23 11.4zm6 16H6v-8.9l6-4.58 6 4.58z"}))});ki.displayName="HomeIcon";const Oi=Lt({viewBox:"0 0 79.375 79.375",svg:R.createElement(R.Fragment,null,R.createElement("path",{d:"M138.93 101.512c-16.578.124-32.548 6.13-47.309 17.925-7.317 5.847-15.399 14.393-17.77 18.788-1.58 2.931-3.668 7.757-6.367 14.712-7.457 19.225-11.997 29.033-16.8 36.297-1.638 2.476-1.781 2.231 1.748 2.99.613.133 1.285.26 1.984.383-1.634 3.885-5.948 9.571-11.436 13.088-1.138.73-4.443 2.638-7.345 4.242-5.362 2.964-7.66 4.377-9.285 5.713-1.765 1.45-4.48 4.224-4.786 4.891-.23.503-.304 1.445-.29 3.686.015 2.55.098 3.286.546 4.824 1.28 4.391 3.49 7.175 6.205 7.824 1.303.311 1.77.296 3.342-.107 3.624-.931 6.702-3.5 16.992-14.186 8.097-8.408 10.799-10.842 14.067-12.672.031-.017.064-.03.095-.047 1.093.759 2.373 1.422 3.221 1.602 2.71.574 28.721 2.944 47.403 4.318 8.207.604 16.372 1.208 18.142 1.342 1.77.134 10.736.21 19.924.17 13.044-.058 18.042.009 20.807-1.867-4.243 6.551-9.009 15.985-6.569 22.843 1.043 2.745 3.456 5.444 5.754 6.438 3.466 1.5 7.874-1.423 12.715-8.428 2.22-3.213 4.69-7.493 8.592-14.894 2.167-4.11 3.373-6.495 4.076-8.534l1.717-.51c.66 0 3.167-.885 5.047-1.782 4.06-1.939 9.627-5.707 15.574-10.543 2.402-1.954 7.135-5.996 9.199-7.846 18.116 13.509 29.936 25.039 32.766 32.033.311.77.629 1.4.705 1.4.433 0 4.516-4.066 6.2-6.175 4.187-5.243 6.403-10.354 6.403-14.76-1.252-15.979-37.802-28.468-28.124-33.08 3.282-1.563.627-3.716 11.572-3.293 7.862-.501 11.288-1.289 14.761-3.395 3.58-2.17 5.372-4.62 6.983-9.545 1.017-3.19.806-4.87.326-9.017 1.96-1.74 2.14-7.427-.22-9.6-1.625-1.913-4.807-3.627-8.503-4.576-8.376-2.15-24.507-1.09-32.883 2.162-1.493.58-2.487 1.192-4.244 2.615-2.451 1.986-5.58 4.847-8.601 7.868-1.114 1.113-1.585 1.613-2.075 2.52l-1.562-1.31c-.293-.296-1.923-1.951-3.621-3.677-16.038-16.305-32.66-28.14-48.71-34.682-10.253-4.18-20.42-6.223-30.366-6.148zm127.783 39.14c1.656-.08 3.338 1.31 3.51 3.819.104 1.518-.393 2.89-1.362 3.76-.361.324-.977.524-1.797.585-1.044.078-1.36-.003-1.95-.494-1.605-1.334-2.077-3.308-1.272-5.324.617-1.547 1.738-2.29 2.87-2.346z",transform:"scale(.26458)"}))});Oi.displayName="TurtleIcon";const Ti=Ye().domain([1,100]).range([0,100]),Si=q((({movementSpeed:e,setMovementSpeed:t,disallowGoHome:i=!1,disabled:r,cameraId:a})=>{const{api:n}=M(Ke),s=Math.floor(Ti.invert(e));return R.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr) 24px",flex:1}},i?R.createElement("div",{style:{gridRow:2,gridColumn:2}}):R.createElement(Tt,{disabled:r,onClick:()=>n.cameras.GoHomePtzCamera({id:a}).subscribe(),className:"x-3deye-button--icon",style:{gridRow:2,gridColumn:2,justifySelf:"center",alignSelf:"center",width:36,height:36},title:Je.t("ptzControl.moveCameraHome")},R.createElement(ki,{size:24})),Array.from(Array(8),((e,t)=>{const i=[0,1,2,7,3,6,5,4][t],l=t<3?0:t<5?1:2,o=t<4?t%3:(t+1)%3,c=i%2?[0,0]:[-1*(o-1),-1*(l-1)],u=`rotate(${45*i-135}deg)`,d=(o-1)*s,h=(l-1)*-s,m=i%2?24:16;return R.createElement(Tt,{disabled:r,key:t,onClick:()=>n.cameras.MoveCamera({id:a},d,h,0,0,0).subscribe(),className:"x-3deye-button--icon",style:{transform:`translate(${10*c[0]}px, ${10*c[1]}px)`,justifySelf:"center",alignSelf:"center",width:36,height:36}},R.createElement(_t,{style:{transform:u},size:m}))})),R.createElement("div",{style:{gridColumn:"4",gridRow:"1 / span 3",position:"relative"}},R.createElement("div",{style:{position:"absolute",top:0,bottom:0,left:0,aspectRatio:"1/1",display:"flex",flexDirection:"column"}},R.createElement(Bt,{orientation:"vertical",style:{flex:1,marginTop:10,marginBottom:10},disabled:r,value:e,onChange:t,labelFormat:e=>`${e}%`})),R.createElement(kt,{label:Je.t("ptzControl.movementSpeed")},R.createElement("div",{style:{width:24,height:24,position:"absolute",bottom:-24,left:0}},R.createElement(Oi,null)))))}));Si.displayName="RelativePtzControls";const Mi=(e,t,i,r)=>Vt(Math.floor((e-t)/i*r),0,r-1),xi=L({value:null,onPointerDown:Ht,setCurrentValue:Ht,state:{currentIdx:0,currentValue:null,options:[]}});class Ii{get currentValue(){return this.options[this.currentIdx]}constructor(e=0){Object.defineProperty(this,"currentIdx",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"setCurrentIdx",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.currentIdx=e}}),Object.defineProperty(this,"setOptions",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.options=e}}),this.currentIdx=e,H(this,{currentIdx:U,options:U.ref,currentValue:F,setCurrentIdx:B,setOptions:B})}}const ji=q(R.forwardRef((({value:e,onChange:t,children:i,style:r},a)=>{const[n,s]=k(!1),l=T(null),o=D.map(i,(e=>null==e?void 0:e.props.value))||[],c=Z((()=>new Ii(o.indexOf(e))));c.setOptions(o);const u=D.count(i);I((()=>{c.setCurrentIdx(o.indexOf(e))}),[e]),I((()=>{var e;if(!n)return;const i=null===(e=l.current)||void 0===e?void 0:e.getBoundingClientRect();if(!i)return;const r=({clientX:e})=>{c.setCurrentIdx(Mi(e,i.left,i.width,u))},a=()=>{s(!1),t(o[c.currentIdx])};return document.addEventListener("pointermove",r),document.addEventListener("pointerup",a),()=>{document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",a)}}),[n,u]);return R.createElement(xi.Provider,{value:{value:e,state:c,onPointerDown:e=>{const t=l.current;if(!t)return;const{left:i,width:r}=t.getBoundingClientRect(),a=Mi(e.clientX,i,r,u);a!==c.currentIdx&&c.setCurrentIdx(a),s(!0)},setCurrentValue:e=>{c.setCurrentIdx(o.indexOf(e))}}},R.createElement("div",{className:"segmented-control-wrapper",style:r,ref:a},R.createElement("div",{role:"radiogroup",ref:l,className:"segmented-control",style:{"--indicator-offset":100*c.currentIdx+"%"}},R.createElement("div",{"aria-hidden":!0,className:Ie("segmented-control-indicator",{active:n}),style:{width:100/o.length+"%"}},R.createElement("div",{className:"segmented-control-indicator-inner"})),i)))}))),Ni=q(R.forwardRef((({value:e,children:t},i)=>{const r=M(xi);return R.createElement("button",{ref:i,role:"radio","aria-checked":r.state.currentValue===e,tabIndex:0,className:Ie("segmented-control-button",{current:r.state.currentValue===e}),onPointerDown:r.onPointerDown,onClick:()=>r.setCurrentValue(e)},t)})));Ni.displayName="SegmentedControlOption";const Li=60,Di=q((({cameraId:e,disabled:t})=>{const i=M(Ke),r=Z((()=>({x:0,y:0,update(e,t){this.x=e,this.y=t}})));I((()=>{const t=at((()=>({x:r.x,y:r.y}))).pipe(J(((e,t)=>Math.round(100*e.x)===Math.round(t.x)&&Math.round(100*e.y)===Math.round(t.y))),ce(100),ee((t=>t.x||t.y?i.api.cameras.MoveCameraContinuousStart({id:e},Math.round(100*t.x),Math.round(100*t.y),0,30):i.api.cameras.MoveCameraContinuousStop({id:e})))).subscribe();return()=>t.unsubscribe()}),[]);const[{x:a,y:n},s]=be((()=>({x:0,y:0,config:ve.wobbly}))),l=$e((({down:e,movement:[t,i]})=>{if(t*t+i*i>Li*Li){const e=Math.sqrt(t*t+i*i);t=t/e*Li,i=i/e*Li}e?r.update(t/Li,-i/Li):r.update(0,0),s.start({x:e?t:0,y:e?i:0,immediate:e})}),{enabled:!t});return R.createElement("div",{style:{display:"grid",placeItems:"center",position:"relative",flex:1}},R.createElement("div",{style:{gridRow:"1 / 1",gridColumn:"1 / 1",width:120,height:120,borderRadius:"50%",background:"rgba(255, 255, 255, 0.25)"}}),R.createElement(fe.div,{...l(),style:{x:a,y:n,width:50,height:50,background:"rgb(255 255 255 / 0.5)",touchAction:"none",borderRadius:"50%",gridRow:"1 / 1",gridColumn:"1 / 1"}}))}));Di.displayName="ContinuousPtzControls";const _i=Lt({viewBox:"0 0 24 24",svg:R.createElement(R.Fragment,null,R.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),R.createElement("path",{d:"M20 15.256v1.828A9 2 0 0 1 21 18a9 2 0 0 1-9 2 9 2 0 0 1-9-2 9 2 0 0 1 1-.914v-1.824A11 4 0 0 0 1 18a11 4 0 0 0 11 4 11 4 0 0 0 11-4 11 4 0 0 0-3-2.744z"}),R.createElement("path",{d:"M12 3 1 11.4l1.21 1.59L4 11.62V19h2v-8.9l6-4.58 6 4.58V19h2v-7.38l1.79 1.36L23 11.4 12 3z"}),R.createElement("path",{d:"m16 14-4 4-4-4 1.41-1.41L11 14.17v-4.15l2-.02v4.17l1.59-1.59z"}))});_i.displayName="HomeSaveIcon";const Ai=q((({cameraId:e,disabled:t})=>{const{api:i,notification:r}=M(Ke);return R.createElement(Tt,{disabled:t,className:"x-3deye-button--icon",style:{width:36,height:36},title:Je.t("ptzControl.setHome"),onClick:()=>i.cameras.SetHomePtzCamera({id:e}).subscribe((e=>{e.success?r.success(Je.t("cameraManager.cameraPtzHomeSet")):(r.error(Je.t("cameraManager.errorWhileUpdatingHomePositionDescription")),console.error(e.error))}))},R.createElement(_i,null))}));Ai.displayName="SetHome";const Fi=Lt({viewBox:"0 0 24 24",svg:R.createElement(R.Fragment,null,R.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),R.createElement("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"}))});Fi.displayName="ZoomOutIcon";const zi=Lt({viewBox:"0 0 24 24",svg:R.createElement(R.Fragment,null,R.createElement("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"}),R.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}),R.createElement("path",{d:"M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"}))});zi.displayName="ZoomInIcon";const Qi=Lt({viewBox:"0 0 100 100",svg:R.createElement(R.Fragment,null,R.createElement("path",{d:"M87.783 47.898c-1.132-2.958-8.699-12.701-10.266-13.223-1.565-.521-4.872-.348-4.872-.348-1.479-16.616-5.132-18.442-7.654-20.269-2.523-1.826-2.263 5.395-2.263 5.395-.87-3.045-5.307-8.004-8.352-7.221-3.045.783-1.391 10.788-.956 13.57.437 2.785 4.35 6.785 5.827 8.96 1.479 2.174.697 4.088.697 4.088-1.218 1.741-1.044 6.119-1.044 6.119-3.043-.494-6.001 3.016-6.001 3.016-6.874-2.956-10.808-3.016-10.808-3.016-20.86.208-23.515 20.064-23.822 26.65-.745-.324-1.78-.315-3.116.737-3.071 2.419-.88 5.383-.88 5.383-.865-.238-1.722-4.225-1.722-4.225-1.963 4.198 1.606 7.065 1.606 7.065-1.33.285-3.53-1.206-3.53-1.206.208.281 1.585 2.426 4.26 5.227 3.376 3.532 8.355 2.771 10.81 2.676.088.018.163.01.233-.01l.071-.002.012-.03c.386-.172.692-.719 2.295-.182l2.06 1.296s18.203.169 21.053 0c1.546-.092-1.566-4.523-1.566-4.523 5.654-.349 8.699-2.437 8.699-2.437l8.735 7.129h9.164c1.801 0 .697-1.93.697-1.93l-8.593-7.809.956-1.652c3.306-.696 5.655-3.915 6.001-4.523.35-.609.089-5.132.089-5.132s.349.435 1.826-1.393c1.48-1.827-.173-4.697-.607-5.307-.434-.607-1.305-4.438-1.305-4.438s5.827-.348 7.22-1.044c1.389-.693 6.176-4.434 5.046-7.391z"}))});Qi.displayName="RabbitIcon";const Vi=q((({cameraId:e,disabled:t})=>{const{api:i}=M(Ke);return R.createElement(Tt,{disabled:t,className:"x-3deye-button--icon",style:{width:36,height:36},title:Je.t("ptzControl.moveCameraHome"),onClick:()=>i.cameras.GoHomePtzCamera({id:e}).subscribe()},R.createElement(ki,null))}));Vi.displayName="GoHome";const Hi=Ye().domain([1,100]).range([0,100]),Ui=q((({cameraId:e,style:t,disabled:i,initialZoomSpeed:r=50,initialMovementSpeed:a=50,disallowHomePositionUpdate:n=!1,disallowGoHome:s=!1})=>{const{api:l}=M(Ke),[o,c]=k(Bi.Relative),[u,d]=k(r),[h,m]=k(a),p=Math.floor(Hi.invert(u));return R.createElement("div",{style:{display:"flex",flexDirection:"column",...t}},R.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},R.createElement(Tt,{disabled:i,onClick:()=>l.cameras.MoveCamera({id:e},0,0,-p,0,0).subscribe(),className:"x-3deye-button--icon",style:{gridColumn:"1/1",justifySelf:"start"}},R.createElement(Fi,{size:24})),R.createElement(Tt,{disabled:i,onClick:()=>l.cameras.MoveCamera({id:e},0,0,p,0,0).subscribe(),className:"x-3deye-button--icon",style:{gridColumn:"2/3",justifySelf:"end"}},R.createElement(zi,{size:24}))),R.createElement("div",{style:{display:"flex",alignItems:"center"}},R.createElement(kt,{label:Je.t("ptzControl.zoomSpeed")},R.createElement("div",null,R.createElement(Oi,null))),R.createElement(Bt,{style:{flex:1,marginLeft:10,marginRight:10},disabled:i,value:u,onChange:d,labelFormat:e=>`${e}%`}),R.createElement(Qi,null)),o===Bi.Relative?R.createElement(Si,{cameraId:e,disabled:i,movementSpeed:h,setMovementSpeed:m,disallowGoHome:s}):R.createElement(Di,{cameraId:e,disabled:i}),R.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},n?R.createElement("div",{style:{width:24,height:24}}):R.createElement(Ai,{cameraId:e,disabled:i}),o===Bi.Continuous&&!s&&R.createElement(Vi,{cameraId:e,disabled:i})),R.createElement(ji,{value:o,onChange:c},R.createElement(Ni,{value:Bi.Relative},Je.t("ptzControl.relative")),R.createElement(Ni,{value:Bi.Continuous},Je.t("ptzControl.continuous"))))}));var Bi;!function(e){e[e.Relative=0]="Relative",e[e.Continuous=1]="Continuous"}(Bi||(Bi={}));const Wi=q((e=>{var t;const i=null!==(t=M(_))&&void 0!==t?t:A;return R.createElement(Ke.Provider,{value:i},R.createElement(Ui,{...e}))}));Wi.displayName="PtzControls";const $i=q(R.forwardRef(((e,t)=>{var i;const r=null!==(i=M(_))&&void 0!==i?i:A,{ref:a,toggle:n,active:s,enabled:l}=Ei(),{cameraId:o,startTime:c,onDoubleClick:u,onMouseDown:d,onRequestClose:h,playerRef:m,controls:p=R.createElement(yi,{fullscreenControl:l?R.createElement(Ri,{active:s,toggle:n}):void 0,onRequestClose:h}),...b}=e;if(!r.cameras.loaded)return R.createElement("div",{ref:t,...b});const v=o?r.cameras.camerasById.get(o):null;if(!v)return console.warn("can't render player for unknown camera"),R.createElement("div",{ref:t,...b});const f={hideCameraTitle:!0,camera:v,controls:p,onDoubleClick:u,onMouseDown:d,startTime:c,controllerRef:m,...b},g=We(t,et?void 0:a),y=et?a:void 0;return R.createElement(Ke.Provider,{value:r},R.createElement(Gt,{ref:g,videoRef:y,archivesStore:r.archives,auth:r.auth,webRtcOptions:{enabled:!0},...f}))})));function qi(){const[e,t]=k(null);return{playerRef:S((e=>{t(null!=e?e:null)}),[]),player:e}}$i.displayName="CameraPlayer";const Zi=Lt({viewBox:"0 0 24 24",svg:R.createElement("g",null,R.createElement("path",{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}),R.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});Zi.displayName="CloseIcon";const Yi=Lt({viewBox:"0 0 24 24",svg:R.createElement("path",{d:"M7,2l12,11.2l-5.8,0.5l3.3,7.3l-2.2,1l-3.2-7.4L7,18.5V2"})});Yi.displayName="CursorIcon";const Gi=e=>e.stopPropagation(),Xi=q((e=>{const t=T(null),i=Z((()=>({current:null}))),r=Z((()=>({dragging:!1}))),a=T(new s),l=S((e=>{e.persist(),e.stopPropagation(),a.current.next(e)}),[]),o=B((()=>{i.current=null,e.onRequestCancel()})),c=B((()=>{i.current=null,e.onClose()}));return I((()=>{const s=a.current.pipe(se((a=>{const s=a.clientX,l=a.clientY;r.dragging=!0;const{top:o,left:c}=t.current.getBoundingClientRect();return n(document,"mousemove").pipe(X((t=>{const i=s-c,r=l-o,a=t.clientX-s,n=t.clientY-l,u=(n>=0?r:r+n)/e.height,d=(a>=0?i:i+a)/e.width,h=u+Math.abs(n)/e.height,m=d+Math.abs(a)/e.width;return{top:Vt(u,0,1),left:Vt(d,0,1),bottom:Vt(h,0,1),right:Vt(m,0,1)}})),ne(n(document,"mouseup").pipe(re((()=>{if(r.dragging=!1,!i.current)return;const t=(i.current.bottom-i.current.top)*(i.current.right-i.current.left);e.width*e.height*t<100?i.current=null:e.onSelect({Top:i.current.top,Left:i.current.left,Bottom:i.current.bottom,Right:i.current.right})})))))}))).subscribe((e=>{e&&(i.current=e)}));return()=>s.unsubscribe()}),[e.width,e.height]),I((()=>{if(i.current)return;const e=e=>{const t=e.target;/^(input|select|textarea)$/i.test(t.tagName)||"Escape"===e.code&&c()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[null===i.current]),R.createElement("div",{ref:t,onMouseDown:l,style:{position:"absolute",top:0,left:0,width:e.width,height:e.height,display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column"}},i.current?R.createElement("div",{className:"box-selector",style:{position:"absolute",top:100*i.current.top+"%",left:100*i.current.left+"%",bottom:100*(1-i.current.bottom)+"%",right:100*(1-i.current.right)+"%"}},r.dragging?null:R.createElement(Tt,{className:"box-selector-close",onMouseDown:Gi,onClick:c,style:{position:"absolute",top:-10,right:-10,padding:2,width:20,height:20,borderRadius:10}},R.createElement(Zi,{size:16}))):R.createElement("div",{className:"box-selector-select"},R.createElement("div",null,Je.t("selectArea")),R.createElement("div",{className:"box-selector-preview"},R.createElement("div",{className:"box-selector"},R.createElement(Yi,{size:16}))),R.createElement(Tt,{className:"box-selector-cancel",onClick:o},Je.t("button.cancel"))))})),Ji=q((({onSelect:e,onRequestCancel:t,onClose:i})=>{const r=M(yt);return R.createElement(Xi,{width:r.width,height:r.height,onSelect:e,onRequestCancel:t,onClose:i})}));Ji.displayName="BoxSelector";class Ki{get isOnline(){return this.enabled&&"Started"===this.state}get supportsWebRTC(){return!!this.webRtcUrl}constructor(e){Object.defineProperty(this,"id",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"name",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"imageUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"streamUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"dashStreamUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"address",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"archiveDuration",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"dvrWindowLength",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"stateUpdatedAt",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"raw",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"enabled",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"isMicEnabled",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"pin",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"webRtcUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"isPtz",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"permissions",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"update",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.raw=e,this.id=e.id,this.name=e.name,this.isPtz=e.isPTZ,this.isMicEnabled=e.isMicEnabled,this.imageUrl=e.imageUrl,this.address=e.cameraAddress?JSON.parse(e.cameraAddress):null,this.streamUrl=e.streamUrl,this.dashStreamUrl=e.dashStreamUrl,this.enabled=e.enabled,this.state=this.raw.cameraState,this.dvrWindowLength=e.dvrWindowLength?1e3*e.dvrWindowLength:e.dvrWindowLength,this.archiveDuration=e.archiveDuration,this.pin=e.pin,this.webRtcUrl=e.webRtcUrl,this.permissions=e.permissions||0,this.stateUpdatedAt=new Date(e.cameraStateChangedTime)}}),Object.defineProperty(this,"can",{enumerable:!0,configurable:!0,writable:!0,value:e=>this.permissions&e}),H(this,{name:U,streamUrl:U,dashStreamUrl:U,enabled:U,isMicEnabled:U,state:U,pin:U,webRtcUrl:U,permissions:U,isOnline:F,update:B}),this.update(e)}}var er,tr;!function(e){e[e.View=1]="View",e[e.SaveClip=2]="SaveClip",e[e.Share=4]="Share",e[e.Ptz=8]="Ptz",e[e.EditSettings=16]="EditSettings",e[e.Timelapse=32]="Timelapse",e[e.Delete=64]="Delete"}(er||(er={})),(tr={resources:{en:{translation:Ge}}})&&Object.assign(Xe,tr),Je.isInitialized?(Xe.resources?Object.keys(Xe.resources).forEach((e=>{Je.addResourceBundle(e,"translation",Xe.resources[e].translation,!0)})):console.warn("i18n is already initialized"),t(Je.t)):i(Je.init(Xe));export{Ji as BoxSelector,Ki as Camera,$i as CameraPlayer,Kt as CloseControl,Xt as Control,ai as Controls,yi as DefaultControls,Ri as FullscreenControl,ci as PlayPauseControl,si as PlaybackRateControl,Gt as Player,yt as PlayerContext,Wi as PtzControls,hi as ResizeModeControl,pi as SnapshotControl,gi as VolumeControl,$i as default,Ei as useFullscreen,qi as usePlayerRef};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3deye-toolkit/react-camera",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "module": "dist/react-camera.js",
   "files": [
     "dist",
@@ -8,7 +8,7 @@
   ],
   "types": "dist/react-camera.d.ts",
   "dependencies": {
-    "@3deye-toolkit/core": "0.0.3",
+    "@3deye-toolkit/core": "0.0.4",
     "@floating-ui/react": "^0.25.4",
     "@react-spring/web": "^9.7.3",
     "@seznam/compose-react-refs": "^1.0.6",
@@ -16,9 +16,7 @@
     "backoff-rxjs": "^7.0.0",
     "clsx": "^2.0.0",
     "d3-scale": "^4.0.2",
-    "d3-selection": "^3.0.0",
-    "d3-zoom": "^3.0.0",
-    "hls.js": "1.4.4",
+    "hls.js": "^1.5.8",
     "i18next": "23.5.1",
     "mobx": "^6.10.2",
     "mobx-react-lite": "^3.4.3",