@3deye-toolkit/react-camera 0.0.1-alpha.8 → 0.0.2

package/dist/react-camera.js

@@ -0,0 +1,16 @@
+import{format as e,isSameDay as t}from"date-fns/esm";import i from"i18next";import{of as r,from as a,Observable as n,merge as s,fromEvent as o,Subject as l,EMPTY as c,Subscription as u,timer as d,switchMap as h,filter as m,timeout as p,take as b,TimeoutError as v,mergeMap as f,throwError as g,debounceTime as y,map as w,pairwise as E,interval as C,concatMap as P,delay as k,noop as x}from"rxjs";import R,{useState as O,cloneElement as T,useRef as S,useCallback as j,useContext as M,useEffect as D,useImperativeHandle as z,createContext as I,Children as N}from"react";import{AppContext as L,app as V}from"@3deye-toolkit/core";import{computed as H,reaction as Q,runInAction as A,makeObservable as F,observable as W,action as $,when as U,makeAutoObservable as _}from"mobx";import{observer as B,Observer as Z,useLocalObservable as q}from"mobx-react-lite";import Y from"resize-observer-polyfill";import{mapTo as G,map as J,distinctUntilChanged as X,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 oe,pairwise as le,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{zoomTransform as be,zoomIdentity as ve,zoom as fe}from"d3-zoom";import{compose as ge,translate as ye,rotateDEG as we,scale as Ee,toString as Ce}from"transformation-matrix";import Pe from"clsx";import ke from"react-ink";import{useFloating as xe,offset as Re,flip as Oe,shift as Te,autoUpdate as Se,useInteractions as je,useHover as Me,useRole as De,useDismiss as ze,FloatingPortal as Ie,arrow as Ne,FloatingFocusManager as Le}from"@floating-ui/react";import Ve from"@seznam/compose-react-refs";import{format as He,setYear as Qe,isAfter as Ae,setMonth as Fe,setDate as We,startOfDay as $e,isBefore as Ue,getDaysInMonth as _e,endOfDay as Be,getYear as Ze,isSameYear as qe,getMonth as Ye,isSameMonth as Ge,getDate as Je,setHours as Xe,setMinutes as Ke,setSeconds as et,isSameDay as tt,getHours as it,isSameHour as rt,getMinutes as at,isSameMinute as nt,getSeconds as st,setMilliseconds as ot}from"date-fns";import{scaleLog as lt}from"d3-scale";import{useSpring as ct,config as ut,animated as dt}from"@react-spring/web";import{useDrag as ht}from"@use-gesture/react";var mt={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"},playerTools:{live:"live",closePlayer:"close player",playbackRate:"set playback rate",play:"play",pause:"pause",snapshot:"take video snapshot",volume:"volume",fullScreen:"toggle full screen"},videoResizeMode:{fit:"keep video's aspect ratio",stretch:"stretch video"},ptzControl:{moveCameraHome:"move camera to home position",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 pt=new Map,bt={detection:{order:["querystring","htmlTag","navigator"],lookupQuerystring:"lang"},fallbackLng:"en",load:"all",interpolation:{escapeValue:!1}},vt=i.createInstance();function ft(t,i){const r=pt.get(vt.language);return e(t,i,{locale:r})}const gt=R.createContext(null),yt=!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);var wt,Et;function Ct(e,t=!1){const i=H(e);return new n((e=>{const r=i.observe_((({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"}(wt||(wt={})),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.Uncategorized=40]="Uncategorized",e[e.Unknown=999]="Unknown"}(Et||(Et={}));class Pt{constructor(e,t){Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]});const i=s(o(e,"play").pipe(G(!1)),o(e,"pause").pipe(G(!0))),r=o(e,"volumechange").pipe(J((()=>e.volume)),X()),a=o(e,"timeupdate"),n=s(o(e,yt?"loadeddata":"loadedmetadata"),o(e,"playing")),u=o(e,"ended"),d=o(e,"volumechange").pipe(J((()=>e.muted)),X());t.attach(e,{canSeek$:n,ended$:u,progress$:a,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(o(e,"canplay").subscribe((()=>{e.playbackRate!==t.playbackRate&&(e.playbackRate=t.playbackRate)}))),this.disposables.push(o(e,"error").subscribe((()=>{e.error&&(console.error(e.error),t.error=e.error)}))),this.disposables.push(o(e,"seeking").subscribe((()=>{A((()=>{t.behavior&&(t.behavior.loading=!0)}))}))),this.disposables.push(o(e,"pause").subscribe((()=>{A((()=>{t.behavior&&(t.behavior.loading=!1)}))})));const h=new l;let m=!1;this.disposables.push(s(Ct((()=>t.paused)),h).pipe(K((t=>(m=t,t&&e.paused||!t&&!e.paused?c:t?(e.pause(),c):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(o(e,"seeked").subscribe((()=>{t.paused||h.next(!1)})))}dispose(){this.disposables.forEach((e=>{e instanceof u?e.closed||e.unsubscribe():e()}))}}class kt extends Error{constructor(e){const t=`no playback in ${e} seconds`;super(t),Object.defineProperty(this,"count",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.count=e,"function"==typeof Error.captureStackTrace?Error.captureStackTrace(this,this.constructor):this.stack=new Error(t).stack}get name(){return"PlaybackTimeoutError"}}class xt extends Error{get name(){return"ConnectionTimeoutError"}}class Rt extends Error{get name(){return"CameraOfflineError"}}class Ot extends Error{get name(){return"NoPlayableStreamError"}}class Tt extends Error{get name(){return"NoVideoTrackError"}}class St{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(),F(this,{loading:W,error:W})}getCurrentTime(){const e=this.player.chunk;if(!e)return null;const{clip:t}=this.player,i=t&&t.isTimelapse?(+e.endTime-+e.startTime)/e.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(+e+1e3)});else console.warn("Couldn't jump to the next chunk. Current player time is unknown")})))}initLoadingTimeout(){this.disposables.push(Ct((()=>this.loading),!0).pipe(ee((e=>e?Ct((()=>this.loading),!0).pipe(te(3e4)):c))).subscribe((()=>{this.error=new kt(30)})))}resetVideo(){const{video:e}=this;e.pause(),e.removeAttribute("src"),e.load()}dispose(){this.disposables.forEach((e=>{e instanceof u?e.closed||e.unsubscribe():e()})),this.resetVideo(),this.player=null}}class jt{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(),F(this,{loading:W,error:W})}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(Ct((()=>this.loading),!0).pipe(ee((e=>e?Ct((()=>this.loading),!0).pipe(te(3e4)):c))).subscribe((()=>{A((()=>{this.error=new kt(Math.round(30))}))})))}reactToCamera(){this.disposables.push(Q((()=>({streamUrl:this.player.camera.streamUrl})),(()=>{const e=this.player.camera,{streamUrl:t}=e.raw;A((()=>{this.loading=!0})),this.availabilityStartTime=-1,this.video.src="",t?this.video.src=t:A((()=>{this.player.camera.isOnline?this.error=new Ot:this.error=new Rt}))}),{fireImmediately:!0}))}catchUpAfterPause(){this.disposables.push(o(this.video,"play").pipe(ie((()=>this.live))).subscribe((()=>{console.log("unpaused live HLS"),this.goLive()})))}dispose(){this.disposables.forEach((e=>{e instanceof u?e.closed||e.unsubscribe():e()}))}}var Mt;!function(e){e.Initial="initial",e.Playing="playing",e.Paused="paused",e.Reconnecting="reconnecting",e.Stalled="stalled",e.Error="error",e.Failed="failed"}(Mt||(Mt={}));class Dt{constructor(e,t,i){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,"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:Mt.Initial}),Object.defineProperty(this,"seek",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(!this.hlsPlayer)return;const t=this.hlsPlayer.streamController.fragPlaying;if(!t)return void(this.player.seekTime=e);const i=t.relurl.substr(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.hlsPlayer.streamController.fragPlaying;if(!r)return null;const a=r.relurl.substr(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}}),F(this,{hlsPlayer:W.ref,goLive:!0,live:W,loading:W,error:W,state:W,seek:$,dispose:$}),this.live=t,this.disposables.push(Ct((()=>this.hlsPlayer),!0).pipe(ee((e=>e?new n((t=>{e.on(de.Events.ERROR,((e,i)=>{t.next(i)}))})):c))).subscribe((e=>{console.error(e),A((()=>{"bufferAddCodecError"!==e.details?e.fatal&&(e.type===de.ErrorTypes.MEDIA_ERROR&&this.hlsPlayer&&this.hlsPlayer.recoverMediaError(),this.error=e):this.error=e}))}))),null===e.seekTime&&(this.live=!0),this.initDelayCompensation(),this.initPlayerState(),this.initLoadingTimeout(),this.reactToCamera(),this.catchUpAfterPause()}initDelayCompensation(){this.disposables.push(Ct((()=>this.live),!0).pipe(ee((()=>this.live?Ct((()=>this.state),!0).pipe(ee((e=>e!==Mt.Playing?c:d(5e3+5e3*Math.random(),3e4)))):c))).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===Mt.Playing||this.player.paused||A((()=>this.state=Mt.Playing))})),te(2e3),ie((()=>this.state===Mt.Playing))).subscribe((()=>{A((()=>this.state=Mt.Stalled))}))),this.disposables.push(Q((()=>this.player.paused),(()=>{this.state=Mt.Paused})))}getCurrentTime(){if(!this.hlsPlayer)return null;const e=this.hlsPlayer.streamController.fragPlaying;return e?new Date(+e.relurl.substr(0,e.relurl.length-3)+1e3*(this.video.currentTime-e.start)):null}initLoadingTimeout(){this.disposables.push(Ct((()=>this.loading),!0).pipe(ee((e=>e?Ct((()=>this.loading),!0).pipe(te(3e4)):c))).subscribe((()=>{A((()=>{this.player.camera.isOnline?this.error=new kt(Math.round(30)):this.error=new Rt}))}))),this.disposables.push(Ct((()=>this.state),!0).pipe(ee((e=>e!==Mt.Stalled?c:d(3e4)))).subscribe((()=>{A((()=>{this.player.camera.isOnline?this.error||(this.error=new kt(Math.round(30))):this.error=new Rt}))})))}reactToCamera(){const{player:e}=this;this.disposables.push(Q((()=>({streamUrl:e.camera.streamUrl})),(({streamUrl:t})=>{A((()=>{this.loading=!0})),this.hlsPlayer&&this.hlsPlayer.destroy(),t?(this.hlsPlayer=new de,this.hlsPlayer.attachMedia(this.video),this.hlsPlayer.loadSource(t)):A((()=>{e.camera.isOnline?this.error=new Ot:this.error=new Rt}))}),{fireImmediately:!0}))}catchUpAfterPause(){this.disposables.push(o(this.video,"play").pipe(ie((()=>this.live))).subscribe(this.goLive))}dispose(){this.disposables.forEach((e=>{e instanceof u?e.closed||e.unsubscribe():e()})),this.hlsPlayer&&this.hlsPlayer.destroy(),this.hlsPlayer=null,this.player=null}}globalThis.Hls=de;const zt=new Map;class It{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)}))}}),F(this,{sessionId:W,pluginsCount:W,registerPlugin:$,deregisterPlugin:$}),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(){Ct((()=>this.pluginsCount),!0).pipe(ee((e=>e?c:d(1e4)))).subscribe((()=>{this.dispose()}))}dispose(){this.connection.close(),zt.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)}));A((()=>this.sessionId=t))}startKeepingAlive(){U((()=>!!this.sessionId),(()=>{o(this.connection,"open").pipe(ae(null),ee((()=>d(0,3e4).pipe(ne(o(this.connection,"close")))))).subscribe(this.keepAlive)}))}randomString(e){const t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let i="";for(let r=0;r<e;r++){const e=Math.floor(Math.random()*t.length);i+=t.substring(e,e+1)}return i}}class Nt{constructor(e,t,i,a=["tcp"]){Object.defineProperty(this,"allowedIceCandidateProtocols",{enumerable:!0,configurable:!0,writable:!0,value:a}),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})=>{const{pluginHandleId:t}=this;if(!t)return;const i=JSON.parse(e);"error"===i.janus&&i.transaction===this.startTransaction&&(this.error=i.error,console.error(i.error)),i.sender&&i.sender===t&&("hangup"===i.janus&&(this.error={message:i.reason,code:0},console.error(i.reason)),"event"===i.janus&&i.plugindata&&i.plugindata.data&&i.plugindata.data.error&&(this.error=i.plugindata.data,console.error(i.plugindata.data)),i.jsep&&this.onremotedescription(new RTCSessionDescription(i.jsep)))}}),Object.defineProperty(this,"setStream",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.disposeDelayedStream&&this.disposeDelayedStream(),null!==e?this.disposeDelayedStream=U((()=>"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(Ct((()=>this.pc),!0).pipe(ee((e=>null===e?r(null):o(e,"iceconnectionstatechange").pipe(ae(null),J((()=>e.iceConnectionState)))))).subscribe((e=>{A((()=>this.connectionState=e))})))}}),Object.defineProperty(this,"initTrack",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposables.push(Ct((()=>this.pc),!0).pipe(ee((e=>null===e?r(null):s(o(e,"track").pipe(ae(null)),o(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(Ct((()=>this.stream),!0).pipe(ee((e=>e?d(0,1e3).pipe(se((()=>this.getStats()))):r(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 u?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}}),F(this,{pc:W.ref,pluginHandleId:W,stream:W.ref,stats:W.ref,error:W.ref,connectionState:W,onmessage:$,setStream:$,updateStats:$,dispose:$}),this.server=function(e){if(zt.has(e))return zt.get(e);const t=new It(e);return zt.set(e,t),t}(e),this.server.registerPlugin(),this.cameraId=t,this.pin=i,this.autoAttachPlugin(),this.autoCollectStats(),this.initConnectionState(),this.initTrack(),this.disposables.push(Q((()=>this.pluginHandleId),this.onInit,{fireImmediately:!0})),this.disposables.push(U((()=>!!this.server.sessionId),(()=>this.disposables.push(o(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")))),o=e=>e.split(/\s+/)[2]===t,l={video:n.video.filter(o),audio:n.audio.filter(o)};e=new RTCSessionDescription({type:"offer",sdp:[...s].join("\r\n")});let c={audio:[],video:[]};l.video.length?c=l:(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 void A((()=>{"string"==typeof e&&(e=new Error(e)),this.error=e,console.error(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(Ct((()=>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})),o(this.server.connection,"message").pipe(J((({data:e})=>JSON.parse(e))),ie((t=>t.transaction===e)),oe(1))}))).subscribe((e=>{A((()=>{if("success"!==e.janus)return this.error=e.error,void console.error(e.error);this.pluginHandleId=e.data.id}))})))}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:o,googFrameWidthReceived:l}=i;Object.assign(t,{frameWidth:+l,frameHeight:+o,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()}}class Lt{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===Mt.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}),F(this,{streamingPlugin:W.ref,state:W,setPlayerState:$,ttff:W,streamingError:H,stream:H,loading:W,error:W,dispose:$}),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=Mt.Failed}reconnectWhenNeeded(){return Ct((()=>this.state),!0).pipe(h((e=>{if(e!==Mt.Reconnecting)return c;this.streamingPlugin&&this.streamingPlugin.dispose();const{webRtcUrl:t,id:i,pin:r}=this.player.camera;return A((()=>{this.streamingPlugin=new Nt(t,i,r,this.allowedIceCandidateProtocols)})),Ct((()=>this.stream),!0).pipe(h((e=>e?Ct((()=>{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(m(Boolean),p(3e4)):c)),b(1))}))).subscribe({next:()=>{this.setPlayerState(Mt.Playing)},error:e=>{var t;if(e instanceof v)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=Mt.Stalled):console.warn("player",this.player.id,"cam",this.player.camera.id,"waiting for reconnect"));A((()=>{this.setPlayerState(Mt.Error),this.error=e})),console.error(e)}})}fallbackToDvrOnFirstFrameTimeout(){return Ct((()=>this.state),!0).pipe(h((e=>e!==Mt.Initial?c:Ct((()=>this.stream),!0).pipe(h((e=>e?Ct((()=>{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(m(Boolean),p(1e4)):c)),b(1))))).subscribe({error:e=>{if(e instanceof v)return console.error("player",this.player.id,"cam",this.player.camera.id,"no frames in 10s. Fallback to DVR"),void this.setPlayerState(Mt.Stalled);A((()=>{this.setPlayerState(Mt.Error),this.error=e})),console.error(e)}})}fallBackToDvrOnConnectionProblems(){return Ct((()=>this.state),!0).pipe(h((e=>e!==Mt.Initial?c:Ct((()=>{var e;return null===(e=this.streamingPlugin)||void 0===e?void 0:e.connectionState}),!0).pipe(h((e=>e&&"connected"!==e&&"new"!==e?d(2e4).pipe(f((()=>g((()=>new xt))))):c)))))).subscribe({error:e=>{if(e instanceof xt)return console.error("player",this.player.id,"cam",this.player.camera.id,"no connection established in 20s. Fallback to DVR"),void this.setPlayerState(Mt.Stalled);A((()=>{this.state=Mt.Error,this.error=e})),console.error(e)}})}initTransitionToReconnecting(){return Ct((()=>this.state),!0).pipe(h((e=>e!==Mt.Playing?c:Ct((()=>{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(m(Boolean),y(1e4))))).subscribe((()=>{console.log("player",this.player.id,"cam",this.player.camera.id,"no new frames in 10000s"),this.setPlayerState(Mt.Reconnecting)}))}setInitialIndication(){return Q((()=>this.state),(e=>{e===Mt.Initial&&A((()=>{this.loading=!0,this.error=null}))}))}updateIndicationOnPlaying(){return Q((()=>this.state),(e=>{e===Mt.Playing&&A((()=>{this.loading=!1,this.error=null}))}))}updateIndicationOnReconnecting(){return Q((()=>this.state),(e=>{e===Mt.Reconnecting&&A((()=>{this.loading=!0}))}))}reactToStreamingError(){return Q((()=>this.streamingError),(e=>{var t,i,r;console.error(e);if((null===(t=null==e?void 0:e.message)||void 0===t?void 0:t.toLowerCase().includes("failed to set remote offer sdp"))||(null===(i=null==e?void 0:e.message)||void 0===i?void 0:i.toLowerCase().includes("failed to set local answer sdp"))||(null===(r=null==e?void 0:e.message)||void 0===r?void 0:r.toLowerCase().includes("ice failed"))||(null==e?void 0:e.code)&&465===e.code)return console.warn("player",this.player.id,"cam",this.player.camera.id,"fallback to DVR"),this.error=e,void this.setPlayerState(Mt.Stalled);A((()=>{this.error=e,this.state=Mt.Error}))}))}initTtff(){const e=Date.now();return Ct((()=>this.state),!0).pipe(m((e=>e===Mt.Playing)),b(1)).subscribe((()=>{this.ttff=Date.now()-e}))}initFromErrorToPlaying(){return Ct((()=>this.state),!0).pipe(h((e=>e!==Mt.Error?c:Ct((()=>this.stream),!0).pipe(h((e=>e?Ct((()=>{var e;return this.streamingPlugin?null===(e=this.streamingPlugin.stats)||void 0===e?void 0:e.framesDecoded:null})):c)),m(Boolean),b(1))))).subscribe((()=>{this.setPlayerState(Mt.Playing)}))}initFromInitialToPlaying(){return Ct((()=>this.state),!0).pipe(h((e=>e!==Mt.Initial?c:Ct((()=>this.stream),!0).pipe(h((e=>e?Ct((()=>{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})):c)),m(Boolean),b(1))))).subscribe((()=>{this.setPlayerState(Mt.Playing)}))}initPauseAndResume(){return[Ct((()=>this.state),!0).pipe(h((e=>e!==Mt.Playing?c:Ct((()=>this.player.paused)).pipe(m(Boolean))))).subscribe((()=>{var e;null===(e=this.streamingPlugin)||void 0===e||e.pause(),this.setPlayerState(Mt.Paused)})),Ct((()=>this.state),!0).pipe(h((e=>e!==Mt.Paused?c:Ct((()=>this.player.paused)).pipe(m((e=>!e)))))).subscribe((()=>{var e;null===(e=this.streamingPlugin)||void 0===e||e.resume(),this.setPlayerState(Mt.Playing)}))]}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})),(({url:e,id:t,pin:i,isOnline:r})=>{this.streamingPlugin&&this.streamingPlugin.dispose(),A((()=>{A((()=>{this.loading=!0})),r?(this.streamingPlugin=new Nt(e,t,i,this.allowedIceCandidateProtocols),this.state=Mt.Initial):A((()=>{this.error=new Rt,this.state=Mt.Error,this.streamingPlugin=null}))}))}),{fireImmediately:!0})}reactToStream(){return Q((()=>this.stream),(e=>{A((()=>{if(!e){if(this.state===Mt.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),A((()=>{this.error=new Tt,this.state=Mt.Error})))}))}))}initStats(){return Q((()=>this.streamingPlugin?this.streamingPlugin.stats:null),(e=>{this.player.stats=e}))}dispose(){this.disposables.forEach((e=>{e instanceof u?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 Vt=R.createContext(null);class Ht{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}}),F(this,{startTime:W,endTime:W,setBounds:$}),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 Qt;!function(e){e.Fit="contain",e.Stretch="fill"}(Qt||(Qt={}));const At=(()=>{let e=0;return()=>++e})();class Ft{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:At()}),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:void 0}),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:Qt.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: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=new Date(+(this.targetTime||this.currentTime)-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=new Date(+(this.targetTime||this.currentTime)+e);this.liveChunk&&t>this.liveChunk.endTime?this.goLive():this.changeMedia({time:t,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(Qt),t=(Object.values(Qt).indexOf(this.videoResizeMode)+1)%e.length;this.videoResizeMode=Qt[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 u?e.closed||e.unsubscribe():e()})),this.video=null}}),Object.defineProperty(this,"initFallbackToDVR",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposables.push(Ct((()=>this.behavior),!0).pipe(h((e=>"WebRTC"===this.mode&&e?Ct((()=>e.state),!0).pipe(m((e=>e===Mt.Stalled||e===Mt.Failed))):c))).subscribe((e=>{A((()=>{this.seekTime=null,this.mode="DVR",this.chunk=this.liveChunk||null,this.restoreFromDvrEnabled=e!==Mt.Failed}))})))}}),_(this,{behavior:W.ref,camera:W.ref,chunk:W.ref,chunkRequest:W.ref,liveChunk:W.ref,loopRange:W.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})=>{A((()=>{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(h((()=>s(r(null),this.progress$.pipe(b(1)))))).pipe(w((()=>this.seekTime)),m(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(Ct((()=>this.error),!0).pipe(h((e=>e?Ct((()=>this.camera.isOnline),!1).pipe(m((e=>!e))):c))).subscribe((()=>{this.error instanceof Rt||(this.error=new Rt)})))}initCurrentTime(){this.disposables.push(this.progress$.pipe(m((()=>!this.seekTime&&!this.chunkRequest)),m((()=>!this.paused))).subscribe((()=>{if(!this.behavior)return;const e=this.behavior.getCurrentTime();e&&A((()=>{this.behavior&&(this.behavior.loading=!1),this.error=null,this.currentTime=e,this.targetTime=null}))})))}initPlayableRange(){this.disposables.push(Ct((()=>{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(h((({enabled:e,paused:t,startTime:i,endTime:r})=>e&&!t&&r&&i?Ct((()=>this.currentTime),!0).pipe(E(),m((([e,t])=>null!==e&&null!==t&&e<r&&t>=r))):c))).subscribe((()=>{this.changeMedia({time:this.loopRange.start})})))}initSameChunkRequestFix(){this.disposables.push(this.progress$.pipe(m((()=>{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(Ct((()=>this.liveChunk),!0).pipe(h((e=>e?C(250):c))).subscribe((()=>{A((()=>{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(Ct((()=>this.chunkRequest),!0).pipe(h((e=>{var t;if(null===e)return c;const{time:i,backward:a}=e;if((null===(t=this.clip)||void 0===t?void 0:t.isTimelapse)&&this.clip.archives){const{archives:e}=this.clip,t=e.find((e=>e.startTime<=i&&e.endTime>=i));if(t)return r({chunk:t,time:i,backward:a});if(a){const t=e.find((e=>e.endTime<i));return r(t?{chunk:t,time:i,backward:a}:{chunk:null,time:i,backward:a})}{const t=e.find((e=>e.startTime>i));return r(t?{chunk:t,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 r({chunk:s,time:i,backward:a});return(a?this.archivesStore.fetchPrevChunk({cameraId:n,time:i}):this.archivesStore.fetchNextChunk({cameraId:n,time:i})).pipe(w((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:i})=>{A((()=>{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||A((()=>{this.liveChunk=new Ht({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(Ct((()=>this.mode),!0).pipe(P((async e=>{if(this.behavior){const e=this.behavior;A((()=>this.behavior=null)),await e.dispose()}return e}))).subscribe((e=>{e&&A((()=>{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(Ct((()=>this.behavior),!0).pipe(h((e=>e&&"DVR"===this.mode?Ct((()=>e.live),!0).pipe(h((e=>e?Ct((()=>this.camera.isOnline)).pipe(h((e=>e?(this.goLive(),c):c))):c))):c))).subscribe())}initUpgradeToWebRtcAfterFallbackToDvr(){if(!this.behaviors.WebRTC)return;let e=null;this.disposables.push(Ct((()=>({enabled:this.restoreFromDvrEnabled,mode:this.mode,paused:this.paused}))).pipe(h((({mode:t,enabled:i,paused:a})=>"DVR"!==t||!i||a?(e&&(e.dispose(),e=null),c):r(null).pipe(k(1e4),h((()=>{if(!this.behaviors.WebRTC)return c;e&&(e.dispose(),e=null);const t=e=this.behaviors.WebRTC(this);return Ct((()=>t.state),!0).pipe(f((()=>t.state===Mt.Playing?r(t.state):[Mt.Error,Mt.Failed,Mt.Stalled].includes(t.state)?(t.dispose(),e=null,g((()=>new Error(t.state,{cause:t.error})))):c)),b(1))})),me({initialInterval:1e4,maxInterval:8e4,shouldRetry:e=>!(e instanceof Error&&e.message===Mt.Failed)}))))).subscribe({next:()=>{A((()=>{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),A((()=>{e=null,this.restoreFromDvrEnabled=!1}))}}))}}const Wt=({children:e,label:t,placement:i="bottom"})=>{const[r,a]=O(!1),{x:n,y:s,refs:o,strategy:l,context:c}=xe({placement:i,open:r,onOpenChange:a,middleware:[Re(5),Oe(),Te({padding:8})],whileElementsMounted:(e,t,i)=>Se(e,t,i,{animationFrame:!0})}),{getReferenceProps:u,getFloatingProps:d}=je([Me(c),De(c,{role:"tooltip"}),ze(c,{referencePress:!0})]);return R.createElement(R.Fragment,null,T(e,u({ref:Ve(o.setReference,e.ref),...e.props})),R.createElement(Ie,{id:"x-3deye-floating-ui-root"},r&&R.createElement("div",{...d({ref:o.setFloating,className:"x-3deye-tooltip",style:{position:l,top:null!=s?s:0,left:null!=n?n:0}})},t)))};class $t extends R.Component{render(){const{forwardedRef:e,children:t,className:i,fullWidth:r,variant:a,type:n,title:s,placement:o,...l}=this.props,c=Pe(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",...l},t,l.disabled?null:R.createElement(ke,null));return s?R.createElement(Wt,{label:s,placement:o},u):u}}const Ut=R.forwardRef(((e,t)=>R.createElement($t,{forwardedRef:t,...e})));class _t 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 Bt=R.forwardRef((function({width:e,height:t,placement:i="top",style:r},a){const n=[0,"top"===i?t:0],s=[e,n[1]],o=[e/2,t-n[1]],l=[e/4,t*("top"===i?3:1)/4],c=[.325*e,t-n[1]],u=[e-c[0],c[1]],d=[e-l[0],l[1]],h=e=>e.join(","),m=`M ${h(n)} C ${h(l)} ${h(c)} ${h(o)} ${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}))})),Zt=({opened:e,onOpenChange:t,children:i,target:r,placement:a,className:n,autoDismiss:s=!0,initialFocus:o,withArrow:l=!1})=>{var c,u,d;const h=S(null),{x:m,y:p,refs:b,strategy:v,context:f,middlewareData:g,placement:y,update:w}=xe({open:e,onOpenChange:t,middleware:[Re(5),Oe(),Te(),Ne({element:h})],placement:a,whileElementsMounted:(e,t,i)=>Se(e,t,i,{animationFrame:!0})}),{getReferenceProps:E,getFloatingProps:C}=je([De(f),ze(f,{ancestorScroll:!0,enabled:s})]),P=j((e=>{h.current=e,w()}),[w]),k={top:"bottom",right:"left",bottom:"top",left:"right"}[null!==(c=null==y?void 0:y.split("-")[0])&&void 0!==c?c:"top"]||"top",x=R.createElement("div",{...C({className:Pe("x-3deye-popover-container",n),ref:b.setFloating,style:{position:v,top:null!=p?p:0,left:null!=m?m:0}})},l&&R.createElement(Bt,{ref:P,width:24,height:8,placement:k,style:{position:"absolute",left:null===(u=g.arrow)||void 0===u?void 0:u.x,top:null===(d=g.arrow)||void 0===d?void 0:d.y,[k]:-7}}),i);return R.createElement(R.Fragment,null,T(r,E({ref:b.setReference,...r.props})),R.createElement(Ie,{id:"x-3deye-floating-ui-root"},s&&e&&R.createElement(Le,{context:f,modal:!1,order:["reference","content"],returnFocus:!1,initialFocus:o},x),!s&&e&&x))};const qt=B((()=>{const e=M(Vt),[t,i]=O(!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,o=a.packetsReceived?Math.round(a.packetsLost/(a.packetsLost+a.packetsReceived)*100):0,{ttff:l}=e.behavior,c=l>0?(l/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:o<10?"green":o<50?"yellow":"red"}},o,"%")),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))))}));qt.displayName="PlayerStats";const Yt=B((()=>{const e=M(Vt),[t,i]=O(!1);return R.createElement(Zt,{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(Ut,{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(qt,null))}));Yt.displayName="CameraName";const Gt=B((()=>{const e=M(Vt),i=M(gt);return i&&"syncedPlayers"in i?e.behavior&&e.behavior instanceof Lt?null:R.createElement("div",{className:"x-3deye-player__current-time"+(i.syncedPlayers.players.includes(e)?" x-3deye-player__current-time--synced":"")},e.currentTime&&(r=e.currentTime,t(r,new Date)?ft(r,"HH:mm:ss"):ft(r,"PP HH:mm:ss"))):null;var r}));Gt.displayName="CurrentTimeIndicator";const Jt=B((()=>{const e=M(Vt);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(Ut,{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 Lt)?R.createElement("div",{className:"x-3deye-live-indicator"},vt.t("playerTools.live")):R.createElement(Ut,{style:{pointerEvents:"auto"},className:"x-3deye-button--live",onClick:e.goLive,tabIndex:-1},"go live")}));function Xt(e){return R.forwardRef(((t,i)=>{const{size:r=24,color:a="currentColor",className:n,...s}=t,o=e.viewBox||"0 0 24 24",l=e.svg;return R.createElement("svg",{ref:i,preserveAspectRatio:"xMinYMin",className:Pe("icon",n),width:r,fill:a,viewBox:o,...s},l)}))}Jt.displayName="LiveIndicator";const Kt=Xt({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"}))});Kt.displayName="PauseIcon";const ei=Xt({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"}))});ei.displayName="PlayIcon";const ti=B((()=>{const e=S(null),t=M(Vt),i=S(!1);return D((()=>{const t=e.current;if(!t)return;const i=()=>{t.style.display="none"};return t.addEventListener("animationend",i),()=>{t.removeEventListener("animationend",i)}}),[]),D((()=>{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(Kt,{size:32,color:"rgba(255, 255, 255, 0.8)"}):R.createElement(ei,{size:32,color:"rgba(255, 255, 255, 0.8)"}))}));ti.displayName="PlaybackIndicator";const ii=180/Math.PI;class ri extends R.Component{get player(){return this.context}static getTransformMatrixString(e,t,i){const r=ge(ye(i.x,i.y),we(t),ye(-i.x,-i.y),ye(e.x,e.y),Ee(e.k));return Ce(r)}get currentRotation(){return(this.rotation+this.rotationDelta+360)%360}constructor(e){super(e),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"width",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"height",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"previewWidth",{enumerable:!0,configurable:!0,writable:!0,value:200}),Object.defineProperty(this,"previewHeight",{enumerable:!0,configurable:!0,writable:!0,value:120}),Object.defineProperty(this,"zoom",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"previewZoom",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"zoomContainerRef",{enumerable:!0,configurable:!0,writable:!0,value:R.createRef()}),Object.defineProperty(this,"zoomPreviewRef",{enumerable:!0,configurable:!0,writable:!0,value:R.createRef()}),Object.defineProperty(this,"zoomValue",{enumerable:!0,configurable:!0,writable:!0,value:1}),Object.defineProperty(this,"zoomPreviewVisible",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"rotationCenter",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"rotation",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"rotationDelta",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"startAngle",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"resetVideoResizeModeBeforeRotation",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.player.videoResizeMode=Qt.Fit}}),Object.defineProperty(this,"initRotation",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.zoom.filter((e=>"mousedown"!==e.type||!e.altKey)),this.disposables.push(o(this.zoomContainerRef.current,"mousedown").pipe(se((e=>{if(!e.altKey)return c;e.preventDefault(),this.resetVideoResizeModeBeforeRotation();const{top:t,left:i}=this.zoomContainerRef.current.getBoundingClientRect(),r=be(this.zoomContainerRef.current),a=i+this.width/2*r.k+r.x,n=t+this.height/2*r.k+r.y,s={x:this.width/2*r.k+r.x,y:this.height/2*r.k+r.y};return this.startAngle=ii*Math.atan2(e.clientY-n,e.clientX-a),o(document,"mousemove").pipe(re((e=>{A((()=>{const t=ii*Math.atan2(e.clientY-n,e.clientX-a);this.rotationDelta=t-this.startAngle})),this.player.setTransform(ri.getTransformMatrixString(r,this.rotation+this.rotationDelta,s))})),ne(o(document,"mouseup").pipe(re((()=>A((()=>{this.rotation+=this.rotationDelta,this.rotationDelta=0})))))))}))).subscribe())}}),Object.defineProperty(this,"resetRotation",{enumerable:!0,configurable:!0,writable:!0,value:()=>{const e=be(this.zoomContainerRef.current);this.rotation=0;const t={x:this.width/2*e.k+e.x,y:this.height/2*e.k+e.y};this.player.setTransform(ri.getTransformMatrixString(e,this.rotation,t))}}),Object.defineProperty(this,"zoomed",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const{sourceEvent:t,transform:i}=e,r={x:this.width/2*i.k+i.x,y:this.height/2*i.k+i.y};if(this.player.setTransform(ri.getTransformMatrixString(i,this.rotation,r)),this.zoomValue=Math.round(10*i.k)/10,t&&t.target!==this.previewZoom){const e=1/i.k,t=-i.x/(this.width/this.previewWidth)*e,r=-i.y/(this.height/this.previewHeight)*e,a=ve.translate(t,r).scale(e);this.previewZoom.transform(pe(this.zoomPreviewRef.current),a)}}}),Object.defineProperty(this,"previewZoomed",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const{sourceEvent:t,transform:i}=e,r=pe(this.zoomPreviewRef.current).select(".x-3deye-player__zoomable");if(t&&t.target!==this.zoom){this.constrainPreviewZoom(e);const t=1/i.k,r=-i.x*(this.width/this.previewWidth)*t,a=-i.y*(this.height/this.previewHeight)*t,n=ve.translate(r,a).scale(t);this.zoom.transform(pe(this.zoomContainerRef.current),n)}r.style("transform",`translate(${i.x}px,${i.y}px) scale(${i.k})`),r.style("transform-origin","0 0")}}),Object.defineProperty(this,"constrainPreviewZoom",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const{transform:t}=e;t.x<0&&(t.x=0),t.invertX(this.previewWidth)<this.previewWidth&&(t.x=this.previewWidth*(1-t.k)),t.y<0&&(t.y=0),t.invertY(this.previewHeight)<this.previewHeight&&(t.y=this.previewHeight*(1-t.k))}}),F(this,{zoomValue:W,zoomPreviewVisible:W,rotation:W,rotationDelta:W,currentRotation:H,resetRotation:$,resetVideoResizeModeBeforeRotation:$,zoomed:$})}componentDidMount(){this.width=this.zoomContainerRef.current.clientWidth,this.height=this.zoomContainerRef.current.clientHeight,this.zoom=fe().scaleExtent([1,4]).translateExtent([[0,0],[this.width,this.height]]).extent([[0,0],[this.width,this.height]]).on("zoom",this.zoomed),this.previewZoom=fe().scaleExtent([.25,1]).on("zoom",this.previewZoomed),this.zoomContainerRef.current.addEventListener("mousedown",(e=>{this.props.onMouseDown(e)}),!0),this.zoom(pe(this.zoomContainerRef.current)),pe(this.zoomContainerRef.current).on("dblclick.zoom",null),this.previewZoom(pe(this.zoomPreviewRef.current)),pe(this.zoomPreviewRef.current).on("dblclick.zoom",null),this.initRotation(),this.disposables.push(Q((()=>this.player.transform),(e=>{null===e&&this.zoomContainerRef.current&&this.zoom.transform(pe(this.zoomContainerRef.current),ve)})))}componentWillUnmount(){pe(this.zoomContainerRef.current).on(".zoom",null),this.disposables.forEach((e=>{e instanceof u?e.closed||e.unsubscribe():e()}))}componentDidUpdate(e){e.width===this.props.width&&e.height===this.props.height||this.onSizeChange(this.props.width,this.props.height)}onSizeChange(e,t){if(!e||!t)return;const i=this.width,r=this.height;if(this.width=e,this.height=t,this.zoom.translateExtent([[0,0],[this.width,this.height]]).extent([[0,0],[this.width,this.height]]),!i||!r)return;const a=be(this.zoomContainerRef.current),n=a.x*this.width/i,s=a.y*this.height/r,o=(n-a.x)/a.k,l=(s-a.y)/a.k;this.zoom.translateBy(pe(this.zoomContainerRef.current),o,l)}renderError(e){return e?e instanceof kt?vt.t("player.playbackTimeoutError",{count:e.count}):e instanceof Rt?this.player.camera.enabled?vt.t("player.cameraIsOffline"):vt.t("player.cameraIsDisabled"):e instanceof Ot?vt.t("player.noPlayableStream"):e instanceof Tt?vt.t("player.noVideoTrack"):"error_code"in e&&!this.player.camera.isOnline?this.player.camera.enabled?vt.t("player.cameraIsOffline"):vt.t("player.cameraIsDisabled"):"code"in e?vt.t("player.genericError"):"details"in e?this.player.camera.isOnline?vt.t("player.genericError"):this.player.camera.enabled?vt.t("player.cameraIsOffline"):vt.t("player.cameraIsDisabled"):vt.t("player.genericError"):null}render(){const{player:e}=this,t=`zoom-slider-${e.id}`;return R.createElement(R.Fragment,null,R.createElement("div",{className:"x-3deye-player__overlay"},R.createElement("div",{ref:this.zoomContainerRef,style:{position:"absolute",top:0,bottom:0,left:0,right:0},onDoubleClick:this.props.onDoubleClick||x,onAuxClick:this.props.onAuxClick}),R.createElement(ti,null),R.createElement("div",{className:"x-3deye-player__indicators"},this.props.hideCameraTitle?null:R.createElement(Yt,null),R.createElement("div",{style:{flex:1}}),R.createElement(Jt,null),R.createElement(Gt,null)),R.createElement(Z,null,(()=>R.createElement(R.Fragment,null,e.loading&&R.createElement(_t,{style:{pointerEvents:"none",position:"absolute",top:"calc(50% - 33px)",left:"calc(50% - 33px)"}}),e.error&&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}},this.renderError(e.error)))))),this.props.children),R.createElement(Z,null,(()=>R.createElement(R.Fragment,null,R.createElement("style",null,`\n\t\t\t\t\t\t\t\t#${t} {\n\t\t\t\t\t\t\t\t\tdisplay: ${this.zoomValue>1||this.currentRotation?"block":"none"};\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t#${t} .tick:nth-child(n + ${11-Math.round(11*(this.zoomValue-1)/3)}) {\n\t\t\t\t\t\t\t\t\tborder-top-color: orange;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t`),R.createElement("div",{id:t,className:"x-3deye-player__zoom-slider"},Array.from(Array(11)).map(((e,t)=>R.createElement("div",{key:t,className:"tick"}))),R.createElement(Ut,{className:"rotation-button",disabled:!this.currentRotation,onClick:this.resetRotation,title:this.currentRotation?"reset rotation":"hold Alt key and pan to rotate"},Math.round(this.currentRotation),"°")),R.createElement("div",{ref:this.zoomPreviewRef,className:"x-3deye-player__zoom-preview",style:{width:this.previewWidth,height:this.previewHeight},tabIndex:-1},R.createElement("div",{className:"zoom-value"},`${this.zoomValue}x`),R.createElement("div",{className:"x-3deye-player__zoomable"}))))))}}Object.defineProperty(ri,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:Vt});const ai=!!navigator.platform&&/iPad|iPhone|iPod/.test(navigator.platform),ni=new URLSearchParams(location.search.toLowerCase()),si=ni.has("dash")||ni.has("dvr"),oi=B(R.forwardRef((({id:e,archivesStore:t,startTime:i,endTime:r,clip:a,camera:n,webRtcOptions:s,className:o,controls:l,onDoubleClick:c,onMouseDown:u,onAuxClick:d,hideCameraTitle:h,controllerRef:m,videoRef:p,...b},v)=>{var f;const g=S(null),[y,w]=O(0),E=S(null),C=S(null),[P,k]=O((()=>new WeakRef(n))),x=S(null),[T]=O((()=>new Ft({camera:n,startTime:i,endTime:r,clip:a,archivesStore:t,behaviors:{archive:e=>new St(e,E.current),DVR:e=>!("MediaSource"in window)&&ai?new jt(e,E.current):new Dt(e,si,E.current),WebRTC:si||!1===(null==s?void 0:s.enabled)?null:e=>new Lt(e,null==s?void 0:s.allowedIceCandidateProtocols)}})));z(m,(()=>T)),D((()=>{C.current=new Pt(E.current,T);const e=yt?Ct((()=>T.mode),!0).pipe(le()).subscribe((([e])=>{"WebRTC"===e&&(x.current={restoreAt:T.seekTime},T.detach(),w((e=>e+1)))})):void 0;return()=>{var t;null==e||e.unsubscribe(),null===(t=C.current)||void 0===t||t.dispose(),C.current=null,T.detach()}}),[]);const{muted:M,paused:I}=T;D((()=>{x.current&&(C.current.dispose(),x.current.restoreAt&&T.setStartTime(x.current.restoreAt),C.current=new Pt(E.current,T),x.current=null)}),[y]),D((()=>{const e=new Y((e=>{for(const t of e){const e=t.contentRect.width,i=t.contentRect.height;A((()=>{T.width=e,T.height=i}))}}));return e.observe(g.current),()=>{e.disconnect()}}),[]),D((()=>{if(P.deref()!==n)return T.setCameraAndStartTime(n,i||null),T.setTransform(null),void k(new WeakRef(n));T.setStartTime(i||null)}),[n,+(i||0)]);const N=j((e=>{e.currentTarget===e.target&&0===e.button&&u&&u(e)}),[u]);return R.createElement("div",{ref:Ve(g,v),id:e||`player-${T.id}`,className:Pe(o,"x-3deye-player",{"x-3deye-player--paused":I}),...b},R.createElement("div",{className:"x-3deye-player__zoomable-wrapper"},R.createElement("div",{className:"x-3deye-player__zoomable",style:{transformOrigin:"0 0",transform:null!==(f=T.transform)&&void 0!==f?f:void 0}},R.createElement("video",{key:y,autoPlay:!0,crossOrigin:"anonymous",playsInline:!0,ref:Ve(E,p),muted:M,style:(e=>{var t,i;if("archive"!==T.mode||!yt||"fill"!==e.objectFit)return e;let r=1,a=1;const{width:n,height:s}=T,o=T.camera.raw.width||(null===(t=E.current)||void 0===t?void 0:t.videoWidth),l=T.camera.raw.height||(null===(i=E.current)||void 0===i?void 0:i.videoHeight);if(!(o&&l&&n&&s))return e;const c=o/l;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:T.videoResizeMode})}))),R.createElement(Vt.Provider,{value:T},R.createElement(ri,{onDoubleClick:c,onAuxClick:d,onMouseDown:N,width:T.width,height:T.height,hideCameraTitle:h},l)))})));oi.displayName="Player";const li=R.forwardRef((({children:e,className:t,...i},r)=>(t=t?`x-3deye-player__control ${t}`:"x-3deye-player__control",R.createElement(Ut,{ref:r,className:t,...i},e))));li.displayName="Control";const ci=Xt({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"}))});ci.displayName="CloseIcon";const ui=({onClick:e})=>e?R.createElement(li,{className:"x-3deye-player__control-close",onClick:e,title:vt.t("playerTools.closePlayer")},R.createElement(ci,null)):null;ui.displayName="CloseControl";const di="x-3deye-player__controls--spaced",hi="x-3deye-player__controls--compact",mi="x-3deye-player__control--reflowed";class pi extends R.Component{constructor(){super(...arguments),Object.defineProperty(this,"containerRef",{enumerable:!0,configurable:!0,writable:!0,value:R.createRef()}),Object.defineProperty(this,"mutationObserver",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"resizeReactionDisposer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"reflow",{enumerable:!0,configurable:!0,writable:!0,value:()=>{var e,t;const i=this.containerRef.current;if(!i)return;i.classList.contains(hi)&&(i.classList.remove(hi),Array.from(i.children).filter((e=>e.classList.contains(mi))).forEach((e=>{e.style.position="",e.style.bottom="",e.style.right="",e.classList.remove(mi)}))),i.classList.contains(di)&&(i.classList.remove(di),i.querySelectorAll(".before-spacer").forEach((e=>e.classList.remove("before-spacer"))));if(i.scrollWidth-i.offsetWidth<=0){(null===(e=i.querySelector(".spacer"))||void 0===e?void 0:e.clientWidth)&&i.classList.add(di);for(const e of i.querySelectorAll(".spacer"))null===(t=e.previousElementSibling)||void 0===t||t.classList.add("before-spacer");return}i.classList.add(hi);const r=Array.from(i.children);let a=2,n=a;for(;i.scrollWidth-i.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(mi),a++,n++):a++}}})}get player(){return this.context}componentDidUpdate(){this.reflow()}componentDidMount(){this.containerRef.current&&(this.mutationObserver=new MutationObserver(this.reflow),this.mutationObserver.observe(this.containerRef.current,{childList:!0}),this.resizeReactionDisposer=Q((()=>this.player.width),this.reflow))}componentWillUnmount(){this.mutationObserver.disconnect(),this.resizeReactionDisposer()}render(){return R.createElement("div",{ref:this.containerRef,className:"x-3deye-player__controls",style:this.props.style},this.props.children)}}Object.defineProperty(pi,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:Vt}),Object.defineProperty(pi,"Spacer",{enumerable:!0,configurable:!0,writable:!0,value:()=>R.createElement("div",{className:"spacer"})});const bi=new Map,vi="en";function fi(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}class gi extends R.Component{constructor(){super(...arguments),this.state={head:0,tail:0}}UNSAFE_componentWillReceiveProps(e){const{offset:t}=this.props,i=e.offset,{head:r,tail:a}=this.state;i-t>0&&this.setState({tail:Math.max(a,Math.ceil(i))}),this.setState({head:-1*Math.min(-r,Math.floor(i))})}render(){const{from:e,to:t,offset:i,transition:r}=this.props,a=t-e+1;let{tail:n,head:s}=this.state;return i<0?s=-1*Math.min(-s,Math.floor(i)):n=Math.max(n,Math.ceil(i)),R.createElement("div",{style:{position:"absolute",height:34,lineHeight:"34px",top:"calc(50% - 17px)",overflow:"hidden"}},R.createElement("div",{style:{backgroundColor:"white",width:100,fontSize:"1.6em",textAlign:"center",fontFamily:"Arial, Helvetica, sans-serif",transform:`translateY(${-34*i}px) translateZ(100px)`,transition:r,marginTop:-34*s}},Array.from({length:s+n+1},((t,i)=>R.createElement("div",{key:i},this.props.format(e+((i-s)%a+a)%a))))))}}gi.defaultProps={format:e=>e};class yi extends R.Component{constructor(e){super(e),this.tracker=null,this.velocity=0,this.amplitude=0,this.clickOccured=!1,this.ignoreClick=!1,this.preventAnimation=!1,this.rotationDirection=1,this.onWheel=({deltaY:e})=>{Math.abs(e)>=34?this.setState((t=>{const i=e/Math.abs(e),r=t.rotation+i;if(!(r>this.getMaxRotation()||r<this.getMinRotation()))return{rotation:r}}),this.notifyValueChange):(this.rotationDirection=e/Math.abs(e),this.setState((t=>{const i=t.rotation+e/34;if(!(i>this.getMaxRotation()||i<this.getMinRotation()))return{rotation:i,dragging:!0}}),this.finishRotation))},this.onMouseDown=e=>{const{clientY:t}=e,i=this.state.rotation;let r,a=Date.now(),n=i;clearInterval(this.tracker),this.velocity=this.amplitude=0,this.clickOccured=!1,this.ignoreClick=!1;const s=()=>{const e=Date.now(),t=e-a;a=e;const i=this.state.rotation-n;n=this.state.rotation;const r=1e3*i/(1+t);this.velocity=.8*r+.2*this.velocity},o=({clientY:e})=>{const r=i+(t-e)/34;r>this.getMaxRotation()||r<this.getMinRotation()||this.setState({rotation:r})},l=()=>{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",l),clearInterval(this.tracker),Math.abs(this.velocity)>=5?(this.amplitude=.8*this.velocity,r=this.state.rotation+this.amplitude,a=Date.now(),requestAnimationFrame(c)):this.setState((({rotation:e})=>({rotation:Math.round(e),dragging:!1})),this.notifyValueChange)},c=()=>{const e=Date.now()-a,t=-this.amplitude*Math.exp(-e/325);if(this.amplitude)if(t>.5||t<-.5){const e=r+t;if(e>this.getMaxRotation()||e<this.getMinRotation())return void this.setState((({rotation:e})=>({rotation:Math.round(e),dragging:!1})),this.notifyValueChange);this.setState({rotation:e}),requestAnimationFrame(c)}else this.setState((({rotation:e})=>({rotation:Math.round(e),dragging:!1})),this.notifyValueChange)},u=({clientY:e})=>{if(this.clickOccured)return document.removeEventListener("mousemove",u),void document.removeEventListener("mouseup",d);Math.abs(e-i)>=5&&(this.setState({dragging:!0}),this.ignoreClick=!0,document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",d),document.addEventListener("mousemove",o),document.addEventListener("mouseup",l),this.tracker=window.setInterval(s,100))},d=()=>{document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",d),this.clickOccured||(this.state.dragging&&(this.ignoreClick=!0),this.setState((({rotation:e})=>({rotation:Math.round(e),dragging:!1})),this.notifyValueChange))};document.addEventListener("mousemove",u),document.addEventListener("mouseup",d)},this.getRotationByValue=e=>{const{value:t,from:i,to:r,min:a,max:n}=e;if(void 0===n||void 0===a)return t-i;const s=Math.round(this.state?this.state.rotation:0),o=(s%18+18)%18;let l=s,c=o;for(;this.getCellValue(c,l,i,r)!==t;)c=((c-1)%18+18)%18,l--;let u=s,d=o;for(;this.getCellValue(d,u,i,r)!==t;)d=((d+1)%18+18)%18,u++;return u-s>s-l?l:u},this.getMaxRotation=()=>{const{max:e=1/0}=this.props;if(!isFinite(e))return e;const t=Math.round(this.state.rotation),i=(t%18+18)%18;return t+e-this.getCellValue(i,t)},this.getMinRotation=()=>{const{min:e=-1/0}=this.props;if(!isFinite(e))return e;const t=Math.round(this.state.rotation),i=(t%18+18)%18;return t+e-this.getCellValue(i,t)},this.getCellValue=(e,t,i=this.props.from,r=this.props.to)=>{const a=r-i+1;let n;return n=e<12?t>=0?t%18<9||e<2?(e+18*Math.round(t/18))%a:(e+18*Math.round((t-7)/18))%a:t%18<0&&e>4?(e+18*Math.round((t-9)/18))%a:(e+18*Math.round(t/18))%a:(e-(18-a)+18*Math.round(t/18))%a,i+(n+a)%a},this.renderCellValue=(e,t)=>{const i=this.getMaxRotation(),r=this.getMinRotation();if(Number.isFinite(i)){const a=(t%18+18)%18;let n;if(n=a<5&&e>13?t+e-a-18:a>13&&e<5?t+e-a+18:t+e-a,n=Math.round(n),n>i)return null;if(n<r)return null}return this.props.format?this.props.format(this.getCellValue(e,t)):this.getCellValue(e,t)},this.notifyValueChange=()=>{const e=Math.round(this.state.rotation),{onChange:t}=this.props;if(!t)return;const i=this.getCellValue((e%18+18)%18,e);this.value!==i&&(this.value=i,t(i))};const t=void 0!==e.value?this.getRotationByValue(e):0;this.value=void 0!==e.value?e.value:e.from,this.state={rotation:t,dragging:!1}}UNSAFE_componentWillReceiveProps(e){if(void 0===e.value)return;const{rotation:t}=this.state,i=this.getCellValue((t%18+18)%18,t),r=this.getRotationByValue(e);i===e.value&&e.max===this.props.max&&e.min===this.props.min&&e.from===this.props.from&&e.to===this.props.to||(this.preventAnimation=i===e.value&&t!==r,this.setState({rotation:r},(()=>{this.preventAnimation=!1})),this.value=e.value)}finishRotation(){this.setState((({rotation:e})=>({rotation:this.rotationDirection<0?Math.floor(e):Math.ceil(e),dragging:!1})),this.notifyValueChange)}componentWillUnmount(){}jumpTo(e){this.clickOccured=!0,this.ignoreClick?this.ignoreClick=!1:this.setState((({dragging:t,rotation:i})=>{if(t)return null;const r=(i%18+18)%18;let a;return a=r<5&&e>13?i+e-r-18:r>13&&e<5?i+e-r+18:i+e-r,a>this.getMaxRotation()||a<this.getMinRotation()?null:{rotation:a}}),this.notifyValueChange)}render(){const{rotation:e,dragging:t}=this.state,i=t||this.preventAnimation?"none":"transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1)";return R.createElement("div",{style:{width:100,position:"relative",userSelect:"none",MozUserSelect:"none"},onWheel:this.onWheel,onMouseDown:this.onMouseDown,onTouchStart:({targetTouches:e})=>console.log(e)},R.createElement("div",{style:{background:"linear-gradient(\n\t\t\t\t\t\tto bottom,\n\t\t\t\t\t\trgba(255,255,255,1) 0%,\n\t\t\t\t\t\trgba(255,255,255,0.09) 40%,\n\t\t\t\t\t\trgba(255,255,255,0) 40%,\n\t\t\t\t\t\trgba(255,255,255,0) 60%,\n\t\t\t\t\t\trgba(255,255,255,0.07) 60%,\n\t\t\t\t\t\trgba(255,255,255,1) 100%\n\t\t\t\t\t)",position:"absolute",top:0,bottom:0,left:0,right:0,zIndex:1,pointerEvents:"none"}},R.createElement("div",{style:{position:"absolute",height:34,top:76,left:0,right:0,borderTop:"1px solid #aaa",borderBottom:"1px solid #aaa"}})),R.createElement("div",{style:{height:187}},R.createElement("div",{style:{position:"absolute",top:"50%",left:0,right:0,transformStyle:"preserve-3d",height:34,marginTop:-17,transform:`rotateX(${20*e}deg)`,transition:i,textAlign:"center"}},Array.from({length:18}).map(((t,i)=>R.createElement("div",{key:i,style:{height:34,lineHeight:"34px",transform:`rotateX(${-20*i}deg) translateZ(85px)`,position:"absolute",width:"100%",top:0,left:0,backfaceVisibility:"hidden",fontFamily:"Arial, Helvetica, sans-serif",fontSize:"1.6em",color:"#666"},onClick:()=>this.jumpTo(i)},this.renderCellValue(i,e)))))),R.createElement(gi,Object.assign({offset:e,transition:i},this.props)))}}!
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+function(e,t,i,r){var a,n=arguments.length,s=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var o=e.length-1;o>=0;o--)(a=e[o])&&(s=(n<3?a(s):n>3?a(t,i,s):a(t,i))||s);n>3&&s&&Object.defineProperty(t,i,s)}([function(e){let t;return(i,r,a)=>{void 0===a&&(a=Object.getOwnPropertyDescriptor(i,r));const n=a.value;return a.value=function(...i){clearTimeout(t),t=setTimeout((()=>{t=null,n.apply(this,i)}),e)},a}}(200),fi("design:type",Function),fi("design:paramtypes",[]),fi("design:returntype",void 0)],yi.prototype,"finishRotation",null);const wi=e=>e.toString().padStart(2,"0");class Ei extends R.Component{constructor(){super(...arguments),this.formatMonth=e=>{const t=bi.get(this.props.locale||vi);return He(new Date(2019,e,1),"MMM",{locale:t})},this.onYearChange=e=>{const{maxDate:t,minDate:i,date:r,onChange:a}=this.props;let n=Qe(r,e);Ae(n,t)&&(n=Fe(n,0),n=We(n,1),Ae(n,t)&&(n=$e(n))),Ue(n,i)&&(n=Fe(n,11),n=We(n,_e(n)),Ue(n,i)&&(n=Be(n))),a(n)},this.onMonthChange=e=>{const{maxDate:t,minDate:i,date:r,onChange:a}=this.props;let n=Fe(r,e);Ae(n,t)&&(n=We(n,1),n=$e(n)),Ue(n,i)&&(n=Be(We(n,_e(n)))),a(n)},this.onDayChange=e=>{const{date:t,onChange:i,maxDate:r,minDate:a}=this.props;let n=We(t,e);Ae(n,r)&&(n=$e(n)),Ue(n,a)&&(n=Be(n)),i(n)},this.getYearParams=()=>{const{maxDate:e,minDate:t}=this.props,i=Ze(t),r=Ze(e);return{from:i,to:r,min:i,max:r}},this.getMonthParams=()=>{const{maxDate:e,minDate:t,date:i}=this.props;let r,a;qe(i,t)&&(a=Ye(t)),qe(i,e)&&(r=Ye(e));const n={from:0,to:11};return void 0===a&&void 0===r||(n.min=void 0===a?0:a,n.max=void 0===r?11:r),n},this.getDayParams=()=>{const{maxDate:e,minDate:t,date:i}=this.props,r=_e(i);let a,n;Ge(i,t)&&(a=Je(t)),Ge(i,e)&&(n=Je(e));const s={from:1,to:r};return void 0===a&&void 0===n||(s.min=void 0===a?1:a,s.max=void 0===n?r:n),s}}render(){const{date:e}=this.props;return R.createElement("div",{style:{perspective:1200,display:"flex",justifyContent:"center"}},R.createElement(yi,Object.assign({onChange:this.onYearChange,value:Ze(e)},this.getYearParams())),R.createElement(yi,Object.assign({onChange:this.onMonthChange,value:Ye(e),format:this.formatMonth},this.getMonthParams())),R.createElement(yi,Object.assign({onChange:this.onDayChange,value:Je(e),format:wi},this.getDayParams())))}}const Ci=e=>e.toString().padStart(2,"0");class Pi extends R.Component{constructor(){super(...arguments),this.onHoursChange=e=>{const{maxDate:t,minDate:i,date:r}=this.props;let a=Xe(r,e);Ae(a,t)&&(a=Ke(a,0),a=et(a,0)),Ue(a,i)&&(a=Ke(a,59),a=et(a,59)),this.props.onChange(a)},this.onMinutesChange=e=>{const{maxDate:t,minDate:i,date:r,onChange:a}=this.props;let n=Ke(r,e);Ae(n,t)&&(n=et(n,0)),Ue(n,i)&&(n=et(n,59)),a(n)},this.onSecondsChange=e=>{this.props.onChange(et(this.props.date,e))},this.getHoursParams=()=>{const{maxDate:e,minDate:t,date:i}=this.props;let r,a;tt(i,t)&&(a=it(t)),tt(i,e)&&(r=it(e));const n={from:0,to:23};return void 0===a&&void 0===r||(n.min=void 0===a?0:a,n.max=void 0===r?23:r),n},this.getMinutesParams=()=>{const{maxDate:e,minDate:t,date:i}=this.props;let r,a;rt(i,t)&&(a=at(t)),rt(i,e)&&(r=at(e));const n={from:0,to:59};return void 0===a&&void 0===r||(n.min=void 0===a?0:a,n.max=void 0===r?59:r),n},this.getSecondsParams=()=>{const{maxDate:e,minDate:t,date:i}=this.props;let r,a;nt(i,t)&&(r=st(t)),nt(i,e)&&(a=st(e));const n={from:0,to:59};return void 0===r&&void 0===a||(n.min=void 0===r?0:r,n.max=void 0===a?59:a),n}}render(){const{date:e}=this.props;return R.createElement("div",null,R.createElement("div",null,R.createElement("div",null,R.createElement("div",{style:{perspective:1200,display:"flex",justifyContent:"center"}},R.createElement(yi,Object.assign({onChange:this.onHoursChange,value:it(e),format:Ci},this.getHoursParams())),R.createElement(yi,Object.assign({onChange:this.onMinutesChange,value:at(e),format:Ci},this.getMinutesParams())),R.createElement(yi,Object.assign({onChange:this.onSecondsChange,value:st(e),format:Ci},this.getSecondsParams()))))))}}class ki extends R.Component{constructor(){super(...arguments),this.onChange=e=>{this.props.onChange(e)},this.requestDateMode=()=>{this.props.onModeChange("date")},this.requestTimeMode=()=>{this.props.onModeChange("time")}}shouldComponentUpdate(e){return+e.date!=+this.props.date||+e.minDate!=+this.props.minDate||+e.maxDate!=+this.props.maxDate||e.mode!==this.props.mode}render(){let{date:e,minDate:t,maxDate:i}=this.props;const{mode:r,dateTitle:a,timeTitle:n}=this.props;return e=ot(e,0),t=ot(t,0),i=ot(i,0),Ue(e,t)||Ae(e,i)?(console.error("incorrect params. date must be within given period"),null):R.createElement("div",{style:{width:300,backgroundColor:"white"}},R.createElement("div",{style:{display:"flex",fontSize:"1.6em",fontFamily:"Arial, Helvetica, sans-serif",textAlign:"center"}},R.createElement("div",{style:{flex:1,color:"date"===r?"#0091ff":"black"},onClick:this.requestDateMode},a),R.createElement("div",{style:{flex:1,color:"time"===r?"#0091ff":"black"},onClick:this.requestTimeMode},n)),"date"===r?R.createElement(Ei,{minDate:t,maxDate:i,onChange:this.onChange,date:e}):R.createElement(Pi,{minDate:t,maxDate:i,onChange:this.onChange,date:e}))}}ki.defaultProps={dateTitle:"Date",timeTitle:"Time"};const xi=[{value:.5,name:"1/2x"},{value:1,name:"1x"},{value:2,name:"2x"},{value:4,name:"4x"},{value:8,name:"8x"},{value:16,name:"16x"}],Ri=B((()=>{const[e,t]=O(!1),i=M(Vt);if("WebRTC"===i.mode)return null;let r=xi.findIndex((e=>e.value===i.playbackRate));-1===r&&(r=1);const a=R.createElement(li,{className:"control-playbackrate",onClick:()=>t(!e),title:vt.t("playerTools.playbackRate")},xi[r].name);return R.createElement(Zt,{placement:"top",withArrow:!0,target:a,opened:e,onOpenChange:t,className:"popover-playbackrate"},R.createElement(yi,{from:0,to:xi.length-1,min:0,max:xi.length-1,format:e=>xi[e].name,onChange:e=>{e in xi?i.setPlaybackRate(xi[e].value):console.warn("got invalid value from reel, ignoring")},value:r}))}));Ri.displayName="PlaybackRateControl";const Oi=Xt({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"}))});Oi.displayName="PauseIcon";const Ti=Xt({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"}))});Ti.displayName="PlayIcon";const Si=B((()=>{const e=M(Vt);return R.createElement(li,{className:"x-3deye-player__control-playpause",onClick:e.togglePlayback,title:e.paused?vt.t("playerTools.play"):vt.t("playerTools.pause")},e.paused?R.createElement(Ti,null):R.createElement(Oi,null))}));Si.displayName="PlayPauseControl";const ji=Xt({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"}))});ji.displayName="AspectRatioIcon";const Mi=Xt({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"}))});Mi.displayName="SettingsOverscanIcon";const Di=B((()=>{const e=M(Vt);return R.createElement(li,{onClick:e.toggleResizeMode,title:e.videoResizeMode===Qt.Fit?vt.t("videoResizeMode.fit"):vt.t("videoResizeMode.stretch")},e.videoResizeMode===Qt.Fit?R.createElement(ji,{size:16}):R.createElement(Mi,{size:16}))}));Di.displayName="ResizeModeControl";const zi=Xt({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 "}))});zi.displayName="CameraIcon";const Ii=()=>{const e=R.useContext(Vt);return R.createElement(li,{onClick:()=>{const t=`${e.camera.name} ${ft(e.currentTime||new Date,"yyyy:MM:dd HH:mm:ss")}`;((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"),o=document.createElement("a");o.href=s,o.download=`${t}.jpg`,document.body.appendChild(o),o.click(),o.remove()})(e.video,t)},title:vt.t("playerTools.snapshot")},R.createElement(zi,null))};Ii.displayName="SnapshotControl";const Ni=(e,t,i)=>Math.min(Math.max(e,t),i),Li=()=>{};/Mac|iPod|iPhone|iPad/.test(window.navigator.platform);const Vi=e=>Math.round(e),Hi=R.forwardRef((({value:e,onChange:t,onChangeComplete:i,orientation:r="horizontal",disabled:a=!1,labelFormat:n=(e=>`${e}`),style:s},o)=>{const l=S(null),c=S(null),[u,d]=O(!1),[h,m]=O(e);D((()=>{if(!u)return;const e=l.current;if(!e)return;let a=0,n=0;const s=e.getBoundingClientRect();if(!s)return;const o=({clientX:e,clientY:i})=>{if(!c.current)return;let o=0;"horizontal"===r?(a=Ni(e-s.x,0,s.width),o=a/s.width*100,c.current.style.transform=`translateX(${a}px)`):(n=s.height-Ni(i-s.y,0,s.height),o=n/s.height*100,c.current.style.transform=`translateY(${-n}px)`),m(o),null==t||t(Vi(o))},h=({clientX:e,clientY:a})=>{if(d(!1),!c.current)return;const n="horizontal"===r?Ni(e-s.x,0,s.width)/s.width*100:100*(1-Ni(a-s.y,0,s.height)/s.height);c.current.style.transform="",m(n),null==t||t(Vi(n)),null==i||i(Vi(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(Vi(e)),null==i||i(Vi(e))};return e.addEventListener("pointercancel",p),e.addEventListener("pointermove",o),e.addEventListener("pointerup",h),()=>{e.removeEventListener("pointercancel",p),e.removeEventListener("pointermove",o),e.removeEventListener("pointerup",h)}}),[u,r,t]);const p=j((({clientX:e,clientY:i,pointerId:n})=>{if(!l.current||a)return;d(!0),l.current.setPointerCapture(n);const s=l.current.getBoundingClientRect();if(!s)return;if(!c.current)return;let o=0;if("horizontal"===r){const t=Ni(e-s.x,0,s.width);o=t/s.width*100,c.current.style.transform=`translateX(${t}px)`}else{const e=s.height-Ni(i-s.y,0,s.height);o=e/s.height*100,c.current.style.transform=`translateY(${-e}px)`}m(o),null==t||t(Vi(o))}),[r,a]),b=j((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:Ve(o,l),tabIndex:0,onKeyDown:b,className:Pe("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:Pe("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"}},R.createElement("div",{className:"x-3deye-slider__label "+(u?"open":"")},n(u?Vi(h):e))))}));Hi.displayName="Slider";const Qi=Xt({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"}))});Qi.displayName="VolumeOffIcon";const Ai=Xt({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"}))});Ai.displayName="VolumeUpIcon";const Fi=e=>{e.stopPropagation()},Wi=B((()=>{const e=M(Vt);return R.createElement(li,{className:"volume-control",title:vt.t("playerTools.volume"),onClick:e.toggleMute,onWheel:t=>{const i=t.deltaY;i&&e.setVolume(Ni(e.volume+(i<0?.1:-.1),0,1))}},e.muted?R.createElement(Qi,null):R.createElement(Ai,null),R.createElement("div",{onClick:Fi,className:"volume-range"},R.createElement(Hi,{value:Math.round(100*e.volume),labelFormat:e=>`${e}%`,orientation:"vertical",onChange:t=>{e.setVolume(Number(t)/100)}})))}));Wi.displayName="VolumeControl";const $i=B((({onRequestClose:e,fullscreenControl:t})=>R.createElement(pi,null,R.createElement(Si,null),R.createElement(Wi,null),R.createElement(Ri,null),R.createElement(Di,null),R.createElement(pi.Spacer,null),R.createElement(Ii,null),t,R.createElement(ui,{onClick:e}))));$i.displayName="ToolkitPlayerControls";function Ui(){const[e,t]=O(void 0),[i,r]=O(!1),a=ai&&e instanceof HTMLVideoElement?"webkitEnterFullscreen"in e:document.fullscreenEnabled||Boolean(document.webkitFullscreenEnabled);const n=j((e=>{t(e||void 0)}),[]);D((()=>{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:j((()=>{a&&(document.fullscreenElement!==(e||document.documentElement)?(e||document.documentElement).requestFullscreen():document.exitFullscreen())}),[e,i]),enabled:a,active:i}}const _i=Xt({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"}))});_i.displayName="FullscreenIcon";const Bi=Xt({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"}))});Bi.displayName="FullscreenExitIcon";const Zi=({toggle:e,active:t})=>R.createElement(li,{onClick:null!=e?e:void 0,title:vt.t("playerTools.fullScreen")},t?R.createElement(Bi,null):R.createElement(_i,null));Zi.displayName="FullscreenControl";const qi=Xt({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"}))});qi.displayName="HomeIcon";const Yi=Xt({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)"}))});Yi.displayName="TurtleIcon";const Gi=lt().domain([1,100]).range([0,100]),Ji=B((({movementSpeed:e,setMovementSpeed:t,disallowGoHome:i=!1,disabled:r,cameraId:a})=>{const{api:n}=M(gt),s=Math.floor(Gi.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(Ut,{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:vt.t("ptzControl.moveCameraHome")},R.createElement(qi,{size:24})),Array.from(Array(8),((e,t)=>{const i=[0,1,2,7,3,6,5,4][t],o=t<3?0:t<5?1:2,l=t<4?t%3:(t+1)%3,c=i%2?[0,0]:[-1*(l-1),-1*(o-1)],u=`rotate(${45*i-135}deg)`,d=(l-1)*s,h=(o-1)*-s,m=i%2?24:16;return R.createElement(Ut,{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(ei,{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(Hi,{orientation:"vertical",style:{flex:1,marginTop:10,marginBottom:10},disabled:r,value:e,onChange:t,labelFormat:e=>`move speed: ${e}%`})),R.createElement(Wt,{label:"movement speed"},R.createElement("div",{style:{width:24,height:24,position:"absolute",bottom:-24,left:0}},R.createElement(Yi,null)))))}));Ji.displayName="RelativePtzControls";const Xi=(e,t,i,r)=>Ni(Math.floor((e-t)/i*r),0,r-1),Ki=I({value:null,onPointerDown:Li,setCurrentValue:Li,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,F(this,{currentIdx:W,options:W.ref,currentValue:H,setCurrentIdx:$,setOptions:$})}}const tr=B(R.forwardRef((({value:e,onChange:t,children:i,style:r},a)=>{const[n,s]=O(!1),o=S(null),l=N.map(i,(e=>null==e?void 0:e.props.value))||[],c=q((()=>new er(l.indexOf(e))));c.setOptions(l);const u=N.count(i);D((()=>{c.setCurrentIdx(l.indexOf(e))}),[e]),D((()=>{var e;if(!n)return;const i=null===(e=o.current)||void 0===e?void 0:e.getBoundingClientRect();if(!i)return;const r=({clientX:e})=>{c.setCurrentIdx(Xi(e,i.left,i.width,u))},a=()=>{s(!1),t(l[c.currentIdx])};return document.addEventListener("pointermove",r),document.addEventListener("pointerup",a),()=>{document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",a)}}),[n,u]);return R.createElement(Ki.Provider,{value:{value:e,state:c,onPointerDown:e=>{const t=o.current;if(!t)return;const{left:i,width:r}=t.getBoundingClientRect(),a=Xi(e.clientX,i,r,u);a!==c.currentIdx&&c.setCurrentIdx(a),s(!0)},setCurrentValue:e=>{c.setCurrentIdx(l.indexOf(e))}}},R.createElement("div",{className:"segmented-control-wrapper",style:r,ref:a},R.createElement("div",{role:"radiogroup",ref:o,className:"segmented-control",style:{"--indicator-offset":100*c.currentIdx+"%"}},R.createElement("div",{"aria-hidden":!0,className:Pe("segmented-control-indicator",{active:n}),style:{width:100/l.length+"%"}},R.createElement("div",{className:"segmented-control-indicator-inner"})),i)))})));tr.displayName="SegmentedControl";const ir=B(R.forwardRef((({value:e,children:t},i)=>{const r=M(Ki);return R.createElement("button",{ref:i,role:"radio","aria-checked":r.state.currentValue===e,tabIndex:0,className:Pe("segmented-control-button",{current:r.state.currentValue===e}),onPointerDown:r.onPointerDown,onClick:()=>r.setCurrentValue(e)},t)})));ir.displayName="SegmentedControlOption";const rr=60,ar=B((({cameraId:e,disabled:t})=>{const i=M(gt),r=q((()=>({x:0,y:0,update(e,t){this.x=e,this.y=t}})));D((()=>{const t=Ct((()=>({x:r.x,y:r.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?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]=ct((()=>({x:0,y:0,config:ut.wobbly}))),o=ht((({down:e,movement:[t,i]})=>{if(t*t+i*i>rr*rr){const e=Math.sqrt(t*t+i*i);t=t/e*rr,i=i/e*rr}e?r.update(t/rr,-i/rr):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(dt.div,{...o(),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"}}))}));ar.displayName="ContinuousPtzControls";const nr=Xt({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"}))});nr.displayName="HomeSaveIcon";const sr=B((({cameraId:e,disabled:t})=>{const{api:i,notification:r}=M(gt);return R.createElement(Ut,{disabled:t,className:"x-3deye-button--icon",style:{width:36,height:36},title:vt.t("ptzControl.setHome"),onClick:()=>i.cameras.SetHomePtzCamera({id:e}).subscribe((e=>{e.success?r.success(vt.t("cameraManager.cameraPtzHomeSet")):(r.error(vt.t("cameraManager.errorWhileUpdatingHomePositionDescription")),console.error(e.error))}))},R.createElement(nr,null))}));sr.displayName="SetHome";const or=Xt({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"}))});or.displayName="ZoomOutIcon";const lr=Xt({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"}))});lr.displayName="ZoomInIcon";const cr=Xt({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"}))});cr.displayName="RabbitIcon";const ur=B((({cameraId:e,disabled:t})=>{const{api:i}=M(gt);return R.createElement(Ut,{disabled:t,className:"x-3deye-button--icon",style:{width:36,height:36},title:vt.t("ptzControl.moveCameraHome"),onClick:()=>i.cameras.GoHomePtzCamera({id:e}).subscribe()},R.createElement(qi,null))}));ur.displayName="GoHome";const dr=lt().domain([1,100]).range([0,100]),hr=B((({cameraId:e,style:t,disabled:i,initialZoomSpeed:r=50,initialMovementSpeed:a=50,disallowHomePositionUpdate:n=!1,disallowGoHome:s=!1})=>{const{api:o}=M(gt),[l,c]=O(mr.Relative),[u,d]=O(r),[h,m]=O(a),p=Math.floor(dr.invert(u));return R.createElement("div",{style:{display:"flex",flexDirection:"column",...t}},R.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},R.createElement(Ut,{disabled:i,onClick:()=>o.cameras.MoveCamera({id:e},0,0,-p,0,0).subscribe(),className:"x-3deye-button--icon",style:{gridColumn:"1/1",justifySelf:"start"}},R.createElement(or,{size:24})),R.createElement(Ut,{disabled:i,onClick:()=>o.cameras.MoveCamera({id:e},0,0,p,0,0).subscribe(),className:"x-3deye-button--icon",style:{gridColumn:"2/3",justifySelf:"end"}},R.createElement(lr,{size:24}))),R.createElement("div",{style:{display:"flex",alignItems:"center"}},R.createElement(Wt,{label:"zoom speed"},R.createElement("div",null,R.createElement(Yi,null))),R.createElement(Hi,{style:{flex:1,marginLeft:10,marginRight:10},disabled:i,value:u,onChange:d,labelFormat:e=>`zoom speed: ${e}%`}),R.createElement(cr,null)),l===mr.Relative?R.createElement(Ji,{cameraId:e,disabled:i,movementSpeed:h,setMovementSpeed:m,disallowGoHome:s}):R.createElement(ar,{cameraId:e,disabled:i}),R.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},n?R.createElement("div",{style:{width:24,height:24}}):R.createElement(sr,{cameraId:e,disabled:i}),l===mr.Continuous&&!s&&R.createElement(ur,{cameraId:e,disabled:i})),R.createElement(tr,{value:l,onChange:c},R.createElement(ir,{value:mr.Relative},"Relative"),R.createElement(ir,{value:mr.Continuous},"Continuous")))}));var mr;!function(e){e[e.Relative=0]="Relative",e[e.Continuous=1]="Continuous"}(mr||(mr={}));const pr=B((e=>{var t;const i=null!==(t=M(L))&&void 0!==t?t:V;return R.createElement(gt.Provider,{value:i},R.createElement(hr,{...e}))}));pr.displayName="PtzControls";const br=B(R.forwardRef(((e,t)=>{var i;const r=null!==(i=M(L))&&void 0!==i?i:V,{ref:a,toggle:n,active:s,enabled:o}=Ui(),{cameraId:l,startTime:c,onDoubleClick:u,onMouseDown:d,onRequestClose:h,controls:m=R.createElement($i,{fullscreenControl:o?R.createElement(Zi,{active:s,toggle:n}):void 0,onRequestClose:h}),...p}=e;if(!r.cameras.loaded)return R.createElement("div",{ref:t,...p});const b=l?r.cameras.camerasById.get(l):null;if(!b)return console.warn("can't render player for unknown camera"),R.createElement("div",{ref:t,...p});const v={hideCameraTitle:!0,camera:b,controls:m,onDoubleClick:u,onMouseDown:d,startTime:c,...p},f=Ve(t,yt?void 0:a),g=yt?a:void 0;return R.createElement(gt.Provider,{value:r},R.createElement(oi,{ref:f,videoRef:g,archivesStore:r.archives,webRtcOptions:{enabled:!0},...v}))})));br.displayName="Camera";const vr=Xt({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"}))});vr.displayName="CloseIcon";const fr=Xt({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"})});fr.displayName="CursorIcon";const gr=e=>e.stopPropagation(),yr=B((e=>{const t=S(null),i=q((()=>({current:null}))),r=q((()=>({dragging:!1}))),a=S(new l),n=j((e=>{e.persist(),e.stopPropagation(),a.current.next(e)}),[]),s=$((()=>{i.current=null,e.onRequestCancel()})),c=$((()=>{i.current=null,e.onClose()}));return D((()=>{const n=a.current.pipe(ue((a=>{const n=a.clientX,s=a.clientY;r.dragging=!0;const{top:l,left:c}=t.current.getBoundingClientRect();return o(document,"mousemove").pipe(J((t=>{const i=n-c,r=s-l,a=t.clientX-n,o=t.clientY-s,u=(o>=0?r:r+o)/e.height,d=(a>=0?i:i+a)/e.width,h=u+Math.abs(o)/e.height,m=d+Math.abs(a)/e.width;return{top:Ni(u,0,1),left:Ni(d,0,1),bottom:Ni(h,0,1),right:Ni(m,0,1)}})),ne(o(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()=>n.unsubscribe()}),[e.width,e.height]),D((()=>{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:n,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(Ut,{className:"box-selector-close",onMouseDown:gr,onClick:c,style:{position:"absolute",top:-10,right:-10,padding:2,width:20,height:20,borderRadius:10}},R.createElement(vr,{size:16}))):R.createElement("div",{className:"box-selector-select"},R.createElement("div",null,vt.t("selectArea")),R.createElement("div",{className:"box-selector-preview"},R.createElement("div",{className:"box-selector"},R.createElement(fr,{size:16}))),R.createElement(Ut,{className:"box-selector-cancel",onClick:s},vt.t("button.cancel"))))})),wr=B((({onSelect:e,onRequestCancel:t,onClose:i})=>{const r=M(Vt);return R.createElement(yr,{width:r.width,height:r.height,onSelect:e,onRequestCancel:t,onClose:i})}));wr.displayName="BoxSelector";class Er{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)}}),F(this,{name:W,streamUrl:W,dashStreamUrl:W,enabled:W,isMicEnabled:W,state:W,pin:W,webRtcUrl:W,permissions:W,isOnline:H,update:$}),this.update(e)}}var Cr,Pr;!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"}(Cr||(Cr={})),(Pr={resources:{en:{translation:mt}}})&&Object.assign(bt,Pr),vt.isInitialized?(bt.resources?Object.keys(bt.resources).forEach((e=>{vt.addResourceBundle(e,"translation",bt.resources[e].translation,!0)})):console.warn("i18n is already initialized"),r(vt.t)):a(vt.init(bt));export{wr as BoxSelector,Er as Camera,ui as CloseControl,li as Control,pi as Controls,$i as DefaultControls,Zi as FullscreenControl,Si as PlayPauseControl,Ri as PlaybackRateControl,oi as Player,Vt as PlayerContext,pr as PtzControls,Di as ResizeModeControl,Ii as SnapshotControl,Wi as VolumeControl,br as default,Ui as useFullscreen};

package/dist/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.34.8"
+    }
+  ]
+}

package/package.json

@@ -1,36 +1,44 @@
 {
-	"name": "@3deye-toolkit/react-camera",
-	"version": "0.0.1-alpha.8",
-	"module": "dist/camera.js",
-	"files": ["dist"],
-	"dependencies": {
-    "@3deye-toolkit/core": "0.0.1-alpha.8",
-    "classnames": "2.2.6",
-    "d3-selection": "1.4.1",
-    "d3-zoom": "1.8.3",
-    "date-fns": "2.8.1",
-    "hls.js": "0.13.1",
-    "i18next-browser-languagedetector": "4.0.1",
-    "i18next-xhr-backend": "3.2.2",
-    "i18next": "19.0.2",
-    "mobx-react-lite": "1.5.2",
-    "mobx-react": "6.1.4",
-    "mobx": "5.15.1",
-    "react-datepicker": "2.10.1",
-    "react-ink": "6.4.0",
-    "react-spring": "8.0.27",
-    "reconnecting-websocket": "4.2.0",
-    "rematrix": "0.4.1",
-    "resize-observer-polyfill": "1.5.1",
-    "rxjs": "6.5.4",
-    "screenfull": "5.0.1",
-    "shaka-player": "2.5.7",
-    "tslib": "1.10.0"
+  "name": "@3deye-toolkit/react-camera",
+  "version": "0.0.2",
+  "module": "dist/react-camera.js",
+  "files": [
+    "dist",
+    "types"
+  ],
+  "types": "dist/react-camera.d.ts",
+  "dependencies": {
+    "@3deye-toolkit/core": "0.0.2",
+    "@floating-ui/react": "^0.24.0",
+    "@react-spring/web": "^9.4.2",
+    "@seznam/compose-react-refs": "^1.0.6",
+    "@use-gesture/react": "^10.2.26",
+    "backoff-rxjs": "^7.0.0",
+    "clsx": "^1.2.1",
+    "d3-scale": "^4.0.2",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0",
+    "date-fns": "^2.28.0",
+    "hls.js": "^1.1.3",
+    "i18next": "21.6.11",
+    "mobx": "^6.3.13",
+    "mobx-react-lite": "^3.2.3",
+    "react-ink": "^6.5.3",
+    "reconnecting-websocket": "^4.4.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "rxjs": "^7.5.3",
+    "transformation-matrix": "^2.11.1"
   },
   "peerDependencies": {
-    "react": "16.12.0",
-    "react-dom": "16.12.0"
+    "react": "^16.8.0 || ^17 || ^18",
+    "react-dom": "^16.8.0 || ^17 || ^18"
   },
-  "sideEffects": ["*.css"],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
   "license": "mit"
-}
+}