@3deye-toolkit/react-camera 0.0.1-alpha.21 → 0.0.1-alpha.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react-camera.css +158 -134
- package/dist/react-camera.d.ts +133 -37
- package/dist/react-camera.js +2 -2
- package/dist/tsdoc-metadata.json +1 -1
- package/package.json +13 -13
package/dist/react-camera.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{format as e,isSameDay as t}from"date-fns/esm";import i from"i18next";import{from as r,Observable as a,merge as n,fromEvent as s,Subject as o,EMPTY as l,Subscription as c,timer as u,of as h,TimeoutError as d,interval as m,noop as p}from"rxjs";import*as b from"react";import v,{useContext as f,useState as g,useRef as y,useEffect as w,useCallback as C,createContext as E,Children as P}from"react";import{AppContext as k,app as R}from"@3deye-toolkit/core";import{computed as O,reaction as x,runInAction as T,makeObservable as S,observable as j,action as M,when as D,makeAutoObservable as z}from"mobx";import{observer as L,Observer as N,useLocalObservable as I}from"mobx-react-lite";import V from"resize-observer-polyfill";import{mapTo as A,map as H,distinctUntilChanged as W,audit as _,switchMap as $,debounceTime as U,filter as B,tap as q,startWith as F,takeUntil as J,flatMap as Z,take as Y,timeout as G,concatMap as X,mergeMap as K,pairwise as Q,auditTime as ee}from"rxjs/operators";import te from"hls.js";import ie from"reconnecting-websocket";import{select as re}from"d3-selection";import{zoomTransform as ae,zoomIdentity as ne,zoom as se}from"d3-zoom";import*as oe from"rematrix";import le from"clsx";import ce from"react-ink";import ue from"@reach/tooltip";import{useSpring as he,animated as de,config as me}from"@react-spring/web";import pe from"react-dom";import be from"screenfull";import{format as ve,setYear as fe,isAfter as ge,setMonth as ye,setDate as we,startOfDay as Ce,isBefore as Ee,getDaysInMonth as Pe,endOfDay as ke,getYear as Re,isSameYear as Oe,getMonth as xe,isSameMonth as Te,getDate as Se,setHours as je,setMinutes as Me,setSeconds as De,isSameDay as ze,getHours as Le,isSameHour as Ne,getMinutes as Ie,isSameMinute as Ve,getSeconds as Ae}from"date-fns";import{scaleLog as He}from"d3-scale";import{useDrag as We}from"@use-gesture/react";var _e={player:{playbackTimeoutError:"No playback in {{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",fullScreen:"toggle full screen",playbackRate:"set playback rate",play:"play",pause:"pause",snapshot:"take video snapshot",volume:"volume"},videoResizeMode:{fit:"keep video's aspect ratio",stretch:"stretch video"},selectArea:"select area",button:{cancel:"Cancel"},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"}};const $e=new Map,Ue={detection:{order:["querystring","htmlTag","navigator"],lookupQuerystring:"lang"},fallbackLng:"en",load:"all",interpolation:{escapeValue:!1}},Be=i.createInstance();function qe(t,i){const r=$e.get(Be.language);return e(t,i,{locale:r})}const Fe=v.createContext(null),Je=!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);var Ze,Ye;function Ge(e,t=!1){const i=O(e);return new a((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"}(Ze||(Ze={})),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"}(Ye||(Ye={}));class Xe{constructor(e,t){Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]});const i=n(s(e,"play").pipe(A(!1)),s(e,"pause").pipe(A(!0))),r=s(e,"volumechange").pipe(H((()=>e.volume)),W()),a=s(e,"timeupdate"),c=n(s(e,Je?"loadeddata":"loadedmetadata"),s(e,"playing")),u=s(e,"ended"),h=s(e,"volumechange").pipe(H((()=>e.muted)),W());t.attach(e,{canSeek$:c,ended$:u,progress$:a,volume$:r,muted$:h}),this.disposables.push(x((()=>t.stream),(t=>{e.srcObject=t}))),this.disposables.push(x((()=>t.volume),(t=>{e.volume=t}))),this.disposables.push(x((()=>t.playbackRate),(t=>{e.playbackRate=t}))),this.disposables.push(s(e,"canplay").subscribe((()=>{e.playbackRate!==t.playbackRate&&(e.playbackRate=t.playbackRate)}))),this.disposables.push(s(e,"error").subscribe((()=>{console.error(e.error),t.error=e.error}))),this.disposables.push(s(e,"seeking").subscribe((()=>{T((()=>t.loading=!0))}))),this.disposables.push(s(e,"pause").subscribe((()=>{T((()=>t.loading=!1))})));const d=new o;let m=!1;this.disposables.push(n(Ge((()=>t.paused)),d).pipe(_((t=>(m=t,t&&e.paused||!t&&!e.paused?l:t?(e.pause(),l):e.play().catch((e=>console.error(e))))))).subscribe((e=>{e!==m&&d.next(e)}))),this.disposables.push(i.subscribe((e=>{(e&&!t.paused||!e&&t.paused)&&d.next(t.paused)}))),this.disposables.push(s(e,"seeked").subscribe((()=>{t.paused||d.next(!1)})))}dispose(){this.disposables.forEach((e=>{e instanceof c?e.closed||e.unsubscribe():e()}))}}class Ke 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 Qe extends Error{get name(){return"CameraOfflineError"}}class et extends Error{get name(){return"NoPlayableStreamError"}}class tt extends Error{get name(){return"NoVideoTrackError"}}class it{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,"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()}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(x((()=>this.player.chunk),(e=>{if(!e)return this.video.pause(),this.video.removeAttribute("src"),void this.video.load();this.player.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(Ge((()=>this.player.loading),!0).pipe($((e=>e?Ge((()=>this.player.loading),!0).pipe(U(3e4)):l))).subscribe((()=>{this.player.error=new Ke(30)})))}resetVideo(){const{video:e}=this;e.pause(),e.removeAttribute("src"),e.load()}dispose(){this.disposables.forEach((e=>{e instanceof c?e.closed||e.unsubscribe():e()})),this.resetVideo(),this.player=null}}class rt{constructor(e,t){Object.defineProperty(this,"player",{enumerable:!0,configurable:!0,writable:!0,value:e}),Object.defineProperty(this,"video",{enumerable:!0,configurable:!0,writable:!0,value:t}),Object.defineProperty(this,"live",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"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()}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(Ge((()=>this.player.loading),!0).pipe($((e=>e?Ge((()=>this.player.loading),!0).pipe(U(3e4)):l))).subscribe((()=>{this.player.error=new Ke(Math.round(30))})))}reactToCamera(){this.disposables.push(x((()=>({streamUrl:this.player.camera.streamUrl})),(()=>{const e=this.player.camera,{streamUrl:t}=e.raw;this.player.loading=!0,this.availabilityStartTime=-1,this.video.src="",t?this.video.src=t:this.player.camera.isOnline?this.player.error=new et:this.player.error=new Qe}),{fireImmediately:!0}))}catchUpAfterPause(){this.disposables.push(s(this.video,"play").pipe(B((()=>this.live))).subscribe((()=>{console.log("unpaused live HLS"),this.goLive()})))}dispose(){this.disposables.forEach((e=>{e instanceof c?e.closed||e.unsubscribe():e()}))}}var at;!function(e){e.Initial="initial",e.Playing="playing",e.Paused="paused",e.Reconnecting="reconnecting",e.Stalled="stalled",e.Error="error"}(at||(at={}));class nt{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,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:at.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}}),S(this,{hlsPlayer:j.ref,live:j,state:j,seek:M,dispose:M}),this.live=t,this.disposables.push(Ge((()=>this.hlsPlayer),!0).pipe($((e=>e?new a((t=>{e.on(te.Events.ERROR,((e,i)=>{t.next(i)}))})):l))).subscribe((t=>{console.error(t),"bufferAddCodecError"!==t.details?t.fatal&&(t.type===te.ErrorTypes.MEDIA_ERROR&&this.hlsPlayer&&this.hlsPlayer.recoverMediaError(),e.error=t):e.error=t}))),e.loading=!0,null===e.seekTime&&(this.live=!0),this.initDelayCompensation(),this.initPlayerState(),this.initLoadingTimeout(),this.reactToCamera(),this.catchUpAfterPause()}initDelayCompensation(){this.disposables.push(Ge((()=>this.live),!0).pipe($((()=>this.live?Ge((()=>this.state),!0).pipe($((e=>e!==at.Playing?l:u(5e3+5e3*Math.random(),3e4)))):l))).subscribe((()=>{const e=this.getDateRange(),{currentTime:t}=this.player;e&&t&&+e[1]-+t>6e4&&this.goLive()})))}initPlayerState(){this.disposables.push(this.player.progress$.pipe(q((()=>{this.state===at.Playing||this.player.paused||T((()=>this.state=at.Playing))})),U(2e3),B((()=>this.state===at.Playing))).subscribe((()=>{T((()=>this.state=at.Stalled))}))),this.disposables.push(x((()=>this.player.paused),(()=>{this.state=at.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(){const{player:e}=this;this.disposables.push(Ge((()=>e.loading),!0).pipe($((t=>t?Ge((()=>e.loading),!0).pipe(U(3e4)):l))).subscribe((()=>{e.camera.isOnline?e.error=new Ke(Math.round(30)):e.error=new Qe}))),this.disposables.push(Ge((()=>this.state),!0).pipe($((e=>e!==at.Stalled?l:u(3e4)))).subscribe((()=>{e.camera.isOnline?e.error||(e.error=new Ke(Math.round(30))):e.error=new Qe})))}reactToCamera(){const{player:e}=this;this.disposables.push(x((()=>({streamUrl:e.camera.streamUrl})),(({streamUrl:t})=>{e.loading=!0,this.hlsPlayer&&this.hlsPlayer.destroy(),t?(this.hlsPlayer=new te,this.hlsPlayer.attachMedia(this.video),this.hlsPlayer.loadSource(t)):e.camera.isOnline?e.error=new et:e.error=new Qe}),{fireImmediately:!0}))}catchUpAfterPause(){this.disposables.push(s(this.video,"play").pipe(B((()=>this.live))).subscribe(this.goLive))}dispose(){this.disposables.forEach((e=>{e instanceof c?e.closed||e.unsubscribe():e()})),this.hlsPlayer&&this.hlsPlayer.destroy(),this.hlsPlayer=null,this.player=null}}global.Hls=te;const st=new Map;class ot{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)}))}}),S(this,{sessionId:j,pluginsCount:j,registerPlugin:M,deregisterPlugin:M}),this.init()}async init(){const{url:e}=this;this.connection=new ie(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(){Ge((()=>this.pluginsCount),!0).pipe($((e=>e?l:u(1e4)))).subscribe((()=>{this.dispose()}))}dispose(){this.connection.close(),st.delete(this.url)}async createSession(){const e=this.randomString(12);this.connection.send(JSON.stringify({janus:"create",transaction:e}));const t=await new Promise(((t,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)}));T((()=>this.sessionId=t))}startKeepingAlive(){D((()=>!!this.sessionId),(()=>{s(this.connection,"open").pipe(F(null),$((()=>u(0,3e4).pipe(J(s(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 lt{constructor(e,t,i,r=!0){Object.defineProperty(this,"tcpOnly",{enumerable:!0,configurable:!0,writable:!0,value:r}),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,"onplugininit",{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&&("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=D((()=>"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(Ge((()=>this.pc),!0).pipe($((e=>null===e?h(null):s(e,"iceconnectionstatechange").pipe(F(null),H((()=>e.iceConnectionState)))))).subscribe((e=>{T((()=>this.connectionState=e))})))}}),Object.defineProperty(this,"initTrack",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposables.push(Ge((()=>this.pc),!0).pipe($((e=>null===e?h(null):n(s(e,"track").pipe(F(null)),s(e,"addstream").pipe(H((e=>({streams:[e.stream]})))))))).subscribe((e=>{let t=null;null!==e&&(t=e.streams[0],e.track&&(e.track.onended=e=>{console.log("cam",this.cameraId,"remote track removed"),this.stream&&this.stream.removeTrack(e.target)})),this.setStream(t)})))}}),Object.defineProperty(this,"autoCollectStats",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposables.push(Ge((()=>this.stream),!0).pipe($((e=>e?u(0,1e3).pipe(Z((()=>this.getStats()))):h(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}}),S(this,{pc:j.ref,pluginHandleId:j,stream:j.ref,stats:j.ref,error:j.ref,connectionState:j,onmessage:M,setStream:M,updateStats:M}),this.server=function(e){if(st.has(e))return st.get(e);const t=new ot(e);return st.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(x((()=>this.pluginHandleId),this.onplugininit,{fireImmediately:!0})),this.disposables.push(D((()=>!!this.server.sessionId),(()=>this.disposables.push(s(this.server.connection,"message").subscribe(this.onmessage)))))}async onremotedescription(e){const{pluginHandleId:t}=this,i=this.pc;if(!e.sdp)return;const r=[];if(this.tcpOnly){const t=e.sdp.split("\r\n");let i="video";const a={video:[],audio:[]};for(const e of t)e.startsWith("a=mid:audio")?i="audio":e.startsWith("a=mid:video")?i="video":e.startsWith("a=candidate")&&a[i].push(e);const n=t.filter((e=>!(e.startsWith("a=candidate")||e.startsWith("a=end-of-candidates")))),s=e=>"tcp"===e.split(/\s+/)[2],o={video:a.video.filter(s),audio:a.audio.filter(s)};e=new RTCSessionDescription({type:"offer",sdp:[...n].join("\r\n")});let l={audio:[],video:[]};o.video.length?l=o:(console.warn("no video TCP candidates found. Falling back to UDP"),l=a);for(const e in l)l.hasOwnProperty(e)&&l[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 T((()=>{"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(Ge((()=>this.server?this.server.sessionId:null),!0).pipe(B(Boolean),$((()=>{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})),s(this.server.connection,"message").pipe(H((({data:e})=>JSON.parse(e))),B((t=>t.transaction===e)),Y(1))}))).subscribe((e=>{T((()=>{if("success"!==e.janus)return this.error=e.error,void console.log(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()}dispose(){this.disposeDelayedStream&&(this.disposeDelayedStream(),this.disposeDelayedStream=null),this.pc&&this.safeCloseRTCPeerConnection(this.pc),this.disposables.forEach((e=>{e instanceof c?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}}class ct{constructor(e){Object.defineProperty(this,"player",{enumerable:!0,configurable:!0,writable:!0,value:e}),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,"playerState",{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,"onRemoteStream",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(!e){if(this.playerState===at.Reconnecting)return;return void(this.player.stream=null)}this.player.stream=e;const t=e.getVideoTracks();t&&0!==t.length||(console.warn("player",this.player.id,"cam",this.player.camera.id,"no video",t),this.player.error=new tt,this.playerState=at.Error)}}),S(this,{streamingPlugin:j.ref,playerState:j,setPlayerState:M,ttff:j,streamingError:O,stream:O,onRemoteStream:M,dispose:M}),this.player=e;const t=Date.now();RTCPeerConnection?(this.initStream(),this.initStats(),this.reactToCamera(),this.disposables.push(Ge((()=>this.playerState),!0).pipe($((e=>e!==at.Playing?l:Ge((()=>this.player.paused)).pipe(B(Boolean))))).subscribe((()=>{var e;null===(e=this.streamingPlugin)||void 0===e||e.pause(),this.setPlayerState(at.Paused)}))),this.disposables.push(Ge((()=>this.playerState),!0).pipe($((e=>e!==at.Paused?l:Ge((()=>this.player.paused)).pipe(B((e=>!e)))))).subscribe((()=>{var e;null===(e=this.streamingPlugin)||void 0===e||e.resume(),this.setPlayerState(at.Playing)}))),this.disposables.push(Ge((()=>this.playerState),!0).pipe($((e=>e!==at.Initial?l:Ge((()=>this.stream),!0).pipe($((e=>e?Ge((()=>{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(B(Boolean),G(1e4)):l)),Y(1))))).subscribe({error:e=>{if(e instanceof d)return console.error("player",this.player.id,"cam",this.player.camera.id,"no frames in 10s. Fallback to DVR"),void this.player.fallbackToDVR();this.playerState=at.Error,this.player.error=e,console.error(e)}})),this.disposables.push(Ge((()=>this.playerState),!0).pipe($((e=>e!==at.Initial?l:Ge((()=>this.stream),!0).pipe($((e=>e?Ge((()=>{var e,t,i;return null!==(i=null===(t=null===(e=this.streamingPlugin)||void 0===e?void 0:e.stats)||void 0===t?void 0:t.framesDecoded)&&void 0!==i?i:null})):l)),B(Boolean),Y(1))))).subscribe((()=>{this.setPlayerState(at.Playing)}))),this.disposables.push(Ge((()=>this.playerState),!0).pipe($((e=>e!==at.Playing?l:Ge((()=>{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(B(Boolean),U(1e4))))).subscribe((()=>{console.log("player",this.player.id,"cam",this.player.camera.id,"no new frames in 10000s"),this.setPlayerState(at.Reconnecting)}))),this.disposables.push(x((()=>this.playerState),(e=>{e===at.Initial&&(this.player.loading=!0,this.player.error=null)}))),this.disposables.push(x((()=>this.playerState),(e=>{e===at.Playing&&(this.player.loading=!1,this.player.error=null)}))),this.disposables.push(x((()=>this.playerState),(e=>{e===at.Reconnecting&&(this.player.loading=!0)}))),this.disposables.push(Ge((()=>this.playerState),!0).pipe($((e=>{if(e!==at.Reconnecting)return l;this.streamingPlugin&&this.streamingPlugin.dispose();const{webRtcUrl:t,id:i,pin:r}=this.player.camera;return T((()=>{this.streamingPlugin=new lt(t,i,r)})),Ge((()=>this.stream),!0).pipe($((e=>e?Ge((()=>{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(B(Boolean),G(3e4)):l)),Y(1))}))).subscribe((()=>{this.setPlayerState(at.Playing)}),(e=>{var t;if(e instanceof d)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.player.fallbackToDVR()):console.warn("player",this.player.id,"cam",this.player.camera.id,"waiting for reconnect"));this.setPlayerState(at.Error),this.player.error=e,console.error(e)}))),this.disposables.push(Ge((()=>this.playerState),!0).pipe($((e=>e!==at.Error?l:Ge((()=>this.stream),!0).pipe($((e=>e?Ge((()=>{var e;return this.streamingPlugin?null===(e=this.streamingPlugin.stats)||void 0===e?void 0:e.framesDecoded:null})):l)),B(Boolean),Y(1))))).subscribe((()=>{this.setPlayerState(at.Playing)}))),this.disposables.push(x((()=>this.streamingError),(e=>{var t,i;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==e?void 0:e.code)&&465===e.code)return console.warn("player",this.player.id,"cam",this.player.camera.id,"fallback to DVR"),void this.player.fallbackToDVR();this.player.error=e,this.playerState=at.Error}))),this.disposables.push(Ge((()=>this.playerState),!0).pipe(B((e=>e===at.Playing)),Y(1)).subscribe((()=>{this.ttff=Date.now()-t})))):this.player.fallbackToDVR()}get streamingError(){return this.streamingPlugin?this.streamingPlugin.error:null}get stream(){return this.streamingPlugin?this.streamingPlugin.stream:null}dispose(){this.disposables.forEach((e=>{e instanceof c?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}setPlayerState(e){this.playerState=e}getCurrentTime(){return this.playerState===at.Playing?new Date:null}reactToCamera(){this.disposables.push(x((()=>({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(),this.player.loading=!0,r?(this.streamingPlugin=new lt(e,t,i),this.playerState=at.Initial):(this.player.error=new Qe,this.playerState=at.Error,this.streamingPlugin=null)}),{fireImmediately:!0}))}initStream(){this.disposables.push(x((()=>this.stream),this.onRemoteStream))}initStats(){this.disposables.push(x((()=>this.streamingPlugin?this.streamingPlugin.stats:null),(e=>{this.player.stats=e})))}}const ut=v.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}}),S(this,{startTime:j,endTime:j,setBounds:M}),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 dt;!function(e){e.Fit="contain",e.Stretch="fill"}(dt||(dt={}));const mt=(()=>{let e=0;return()=>++e})();class pt{constructor({camera:e,startTime:t,endTime:i,clip:r,archivesStore:a,behaviors:n}){Object.defineProperty(this,"id",{enumerable:!0,configurable:!0,writable:!0,value:mt()}),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,"chunk",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"paused",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"loading",{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:dt.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,"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,"chunkRequestTime",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"requestedArchivesSince",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"archivesRequest",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),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})=>{if(!t&&e&&this.chunk&&this.chunk.startTime<=e&&(this.chunk.endTime>=e||this.chunk.isLive)&&(t=this.chunk),!t&&e)return this.chunkRequestTime=e,this.canSeek=!1,void(this.mode="archive");if(t){if(this.chunkRequestTime=null,this.paused&&(this.paused=!1),"WebRTC"!==this.mode&&t===this.chunk&&e&&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,"requestArchives",{enumerable:!0,configurable:!0,writable:!0,value:e=>(this.loading=!0,this.requestedArchivesSince<e?(console.log("waiting for data"),this.archivesRequest):(this.requestedArchivesSince=e,this.archivesRequest=this.archivesStore.fetch(this.camera.id,e,new Date),console.log("requested data"),this.archivesRequest))}),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,"fallbackToDVR",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.seekTime=null,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(dt),t=(Object.values(dt).indexOf(this.videoResizeMode)+1)%e.length;this.videoResizeMode=dt[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 c?e.closed||e.unsubscribe():e()})),this.video=null}}),S(this,{behavior:j.ref,detach:M,camera:j.ref,changeMedia:M,chunk:j.ref,chunkRequestTime:j,currentTime:j,error:j,fallbackToDVR:M,goLive:M,height:j,liveChunk:j.ref,loading:j,mode:j,muted:j,play:M,pause:M,togglePlayback:M,paused:j,playbackRate:j,setCamera:M,setCameraAndStartTime:M,setPlaybackRate:M,setVideoResizeMode:M,setVolume:M,startTime:j,setStartTime:M,stats:j.ref,stream:j,toggleMute:M,videoResizeMode:j,volume:j,width:j}),this.camera=e,this.startTime=t||null,this.endTime=i||null,this.clip=r,this.archivesStore=a,this.behaviors=n}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.setupLiveChunk(),this.replaceErrorMessageOnOffline(),this.disposables.push(this.canSeek$.subscribe((()=>this.canSeek=!0))),this.disposables.push(x((()=>({camera:this.camera,startTime:this.startTime})),(({startTime:e})=>{T((()=>{this.chunk&&this.chunk.cameraId!==this.camera.id&&(this.chunk=null,this.currentTime=null),this.chunkRequestTime=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.initUpgradeToWebRtc()}seekAfterReady(){this.disposables.push(this.canSeek$.pipe($((()=>n(h(null),this.progress$.pipe(Y(1)))))).pipe(H((()=>this.seekTime)),B(Boolean)).subscribe((e=>{this.seekTime=null,this.seek(e)})))}stopLoadingOnError(){this.disposables.push(x((()=>this.error),(e=>{e&&(this.loading=!1)})))}replaceErrorMessageOnOffline(){this.disposables.push(Ge((()=>this.error),!0).pipe($((e=>e?Ge((()=>this.camera.isOnline),!1).pipe(B((e=>!e))):l))).subscribe((()=>{this.error instanceof Qe||(this.error=new Qe)})))}initCurrentTime(){this.disposables.push(this.progress$.pipe(B((()=>!this.seekTime&&!this.chunkRequestTime)),B((()=>!this.paused))).subscribe((()=>{if(!this.behavior)return;const e=this.behavior.getCurrentTime();e&&T((()=>{this.loading=!1,this.error=null,this.currentTime=e}))})))}initLiveChunkUpdate(){this.disposables.push(Ge((()=>this.liveChunk),!0).pipe($((e=>e?m(250):l))).subscribe((()=>{T((()=>{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(Ge((()=>this.chunkRequestTime),!0).pipe($((e=>{if(null===e)return l;const t=this.camera.id,i=this.liveChunk&&this.liveChunk.startTime<e?this.liveChunk:this.archivesStore.getChunks({cameraId:this.camera.id,from:e,to:e})[0];return i?h({chunk:i,time:e}):this.requestArchives(e).pipe(H((()=>({chunk:this.archivesStore.findClosestChunk({cameraId:t,time:e}),time:e}))))}))).subscribe((({chunk:e,time:t})=>{T((()=>{if(!e){if(!this.liveChunk)return void(this.chunkRequestTime=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||T((()=>{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(Ge((()=>this.mode),!0).pipe(X((async e=>{if(this.behavior){const e=this.behavior;T((()=>this.behavior=null)),await e.dispose()}return e}))).subscribe((e=>{e&&T((()=>{const t=this.behaviors[e];this.behavior=t?t(this):null}))})))}reactToVolumeChange(){this.disposables.push(this.volume$.subscribe(this.setVolume))}initUpgradeToWebRtc(){this.behaviors.WebRTC&&this.disposables.push(Ge((()=>this.behavior),!0).pipe($((e=>e&&"DVR"===this.mode?Ge((()=>e.live),!0).pipe($((e=>e?Ge((()=>this.camera.isOnline)).pipe($((e=>e?(this.goLive(),l):l))):l))):l))).subscribe())}}const bt={background:"rgb(0 0 0 / 0.9)",color:"white",border:"none",borderRadius:"4px",padding:"0.5em 1em",fontSize:12},vt=({label:e,children:t})=>v.createElement(ue,{label:e,style:bt},t);vt.displayName="Tooltip";class ft extends v.Component{render(){const{forwardedRef:e,children:t,className:i,fullwidth:r,type:a,title:n,...s}=this.props,o=le(i,"x-3deye-button",{fullwidth:r}),l=v.createElement("button",{ref:e,className:o,type:a||"button",...s},t,s.disabled?null:v.createElement(ce,null));return n?v.createElement(vt,{label:n},l):l}}const gt=v.forwardRef(((e,t)=>v.createElement(ft,{forwardedRef:t,...e})));class yt extends v.PureComponent{render(){return v.createElement("svg",{focusable:"false",viewBox:"0 0 66 66",className:"spinner",...this.props},v.createElement("circle",{fill:"none",strokeWidth:3,cx:33,cy:33,r:30,stroke:"white"}))}}const wt=e=>`scale(${e})`,Ct=({children:e,from:t,style:i})=>{const r=he({opacity:1,from:{opacity:0},config:{tension:300}});return b.createElement(de.div,{style:{...i,...r,transform:r.opacity.to(wt),transformOrigin:`${t||"bottom"} center`,width:"max-content"}},e)},Et=document.body;class Pt extends v.Component{constructor(e){super(e),Object.defineProperty(this,"el",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.el=document.createElement("div")}componentDidMount(){Et.appendChild(this.el)}componentWillUnmount(){Et.removeChild(this.el)}render(){return pe.createPortal(this.props.children,this.el)}}const kt=({width:e,height:t,color:i,position:r="top",style:a})=>{const n=[0,"top"===r?t:0],s=[e,n[1]],o=[e/2,t-n[1]],l=[e/4,t*("top"===r?3:1)/4],c=[.325*e,t-n[1]],u=[e-c[0],c[1]],h=[e-l[0],l[1]],d=e=>e.join(","),m=`M ${d(n)} C ${d(l)} ${d(c)} ${d(o)} ${d(u)} ${d(h)} ${d(s)} Z`;return v.createElement("svg",{className:"tip",style:a,width:e,height:t,fill:i},v.createElement("path",{d:m}))};class Rt extends v.Component{constructor(){super(...arguments),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:{top:0,left:0,bottom:"auto",tipPosition:"bottom",tipOffset:0}}),Object.defineProperty(this,"targetRef",{enumerable:!0,configurable:!0,writable:!0,value:v.createRef()}),Object.defineProperty(this,"popoverRef",{enumerable:!0,configurable:!0,writable:!0,value:v.createRef()}),Object.defineProperty(this,"outsideClickListener",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const t=e.target;if(this.popoverRef.current.contains(t))return;const i=this.targetRef.current;i&&i.contains(t)||this.props.onCloseRequest()}}),Object.defineProperty(this,"updatePosition",{enumerable:!0,configurable:!0,writable:!0,value:()=>{if(!this.popoverRef)return;const{disablePortal:e}=this.props,t=this.targetRef.current;if(!t)return void console.warn("popover: no target element found");const{top:i,left:r,bottom:a,height:n,width:s}=t.getBoundingClientRect();let o="calc(50% - 12px)",l="auto";const c=this.popoverRef.current;let u="bottom"===this.props.placement?a+10:i-c.clientHeight-10,h=r+s/2-c.clientWidth/2,d="bottom"===this.props.placement?"top":"bottom";u<0&&(u=a+10,d="top"),h<0&&(h=0,o=r+s/2-12),h+c.clientWidth>window.innerWidth&&(h=window.innerWidth-c.clientWidth,o=r-h+s/2-12),e&&(u=n+10,h=0,o=8,"top"===this.props.placement&&(l=u,u="auto")),this.setState({top:u,bottom:l,left:h,tipPosition:d,tipOffset:o},(()=>{this.forceUpdate()}))}})}componentWillUnmount(){this.stopOutsideClickListening()}componentDidUpdate(e){const{ignoreOutsideClick:t}=this.props;this.props.opened&&!e.opened&&(t||this.startOutsideClickListening(),requestAnimationFrame(this.updatePosition)),!this.props.opened&&e.opened&&this.stopOutsideClickListening()}render(){const{top:e,left:t,bottom:i,tipPosition:r,tipOffset:a}=this.state,{className:n,opened:s,disablePortal:o,disableAnimation:l}=this.props,c={position:"absolute",left:a};"bottom"===r?c.bottom=-8:c.top=-8;const u=le(n,"x-3deye-popover-body");let h=null;if(s){const a={zIndex:o?1:100000001,position:"absolute",top:e,bottom:i,left:t},n=v.createElement("div",{className:u,ref:this.popoverRef},this.props.children,v.createElement(kt,{width:24,height:8,position:r,color:"white",style:c}));h=l?v.createElement("div",{style:a},n):v.createElement(Ct,{from:r,style:a},n)}const d=v.cloneElement(this.props.target,{ref:this.targetRef});if(o)return v.createElement("div",{className:"x-3deye-popover",onMouseLeave:this.props.onMouseLeave},d,h);const m=s&&v.createElement(Pt,null,h);return v.createElement(v.Fragment,null,d,m)}startOutsideClickListening(){document.addEventListener("mousedown",this.outsideClickListener,!0)}stopOutsideClickListening(){document.removeEventListener("mousedown",this.outsideClickListener,!0)}}const Ot=L((()=>{const e=f(ut),[t,i]=g(!1);if(!e.stats)return null;const r=e=>{e.preventDefault(),i(!t)};if(!t)return v.createElement("details",{className:"x-3deye-player__stats",open:t,style:{pointerEvents:"auto"}},v.createElement("summary",{onClick:r},"more"));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 v.createElement("details",{className:"x-3deye-player__stats",open:t,style:{pointerEvents:"auto"}},v.createElement("summary",{onClick:r},"more"),v.createElement("dl",null,v.createElement("div",null,v.createElement("dt",null,"frame width:")," ",v.createElement("dd",null,a.frameWidth||e.video.videoWidth)),v.createElement("div",null,v.createElement("dt",null,"frame height:")," ",v.createElement("dd",null,a.frameHeight||e.video.videoHeight)),v.createElement("div",null,v.createElement("dt",null,"bitrate:")," ",v.createElement("dd",null,Math.round(8*a.bitrate)," kbit/s")),v.createElement("div",null,v.createElement("dt",null,"average bitrate:")," ",v.createElement("dd",null,Math.round(8*s)," kbit/s")),v.createElement("div",null,v.createElement("dt",null,"elapsed time:")," ",v.createElement("dd",null,Math.floor(n/1e3)," s")),v.createElement("div",null,v.createElement("dt",null,"packets loss:"),v.createElement("dd",{style:{color:o<10?"green":o<50?"yellow":"red"}},o,"% ")),v.createElement("div",null,v.createElement("dt",null,"packets received:")," ",v.createElement("dd",null,a.packetsReceived)),v.createElement("div",null,v.createElement("dt",null,"packets lost:")," ",v.createElement("dd",null,a.packetsLost)),v.createElement("div",null,v.createElement("dt",null,"frames received:")," ",v.createElement("dd",null,a.framesReceived)),v.createElement("div",null,v.createElement("dt",null,"frames decoded:")," ",v.createElement("dd",null,a.framesDecoded)),v.createElement("div",null,v.createElement("dt",null,"frames dropped:")," ",v.createElement("dd",null,a.framesDropped)),v.createElement("div",null,v.createElement("dt",null,"round-trip time:")," ",v.createElement("dd",null,a.rtt)),v.createElement("div",null,v.createElement("dt",null,"time to first frame:")," ",v.createElement("dd",null,c))))}));Ot.displayName="PlayerStats";const xt=L((()=>{const e=f(ut),[t,i]=g(!1);return v.createElement(Rt,{className:"x-3deye-player__camera-name-popover",opened:t,onCloseRequest:()=>i(!1),placement:"bottom",ignoreOutsideClick:!0,disablePortal:!0,target:v.createElement("div",{className:"x-3deye-player__camera-name",onClick:()=>i(!t)},e.camera.name)},v.createElement("div",null,"id:"," ",v.createElement(gt,{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)),v.createElement("div",{style:{marginBottom:4}},"provider: ",e.mode),v.createElement(Ot,null))}));xt.displayName="CameraName";const Tt=L((()=>{const e=f(ut),i=f(Fe);return"syncedPlayers"in i?e.behavior&&e.behavior instanceof ct?null:v.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)?qe(r,"HH:mm:ss"):qe(r,"PP HH:mm:ss"))):null;var r}));Tt.displayName="CurrentTimeIndicator";const St=L((()=>{const e=f(ut);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 v.createElement(gt,{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 ct)?v.createElement("div",{className:"x-3deye-live-indicator"},Be.t("playerTools.live")):v.createElement(gt,{style:{pointerEvents:"auto"},className:"x-3deye-button--live",onClick:e.goLive,tabIndex:-1},"go live")}));function jt(e){return t=>{const{size:i=24,color:r="currentColor",className:a,...n}=t,s=e.viewBox||"0 0 24 24",o=e.svg;return v.createElement("svg",{preserveAspectRatio:"xMinYMin",className:`icon ${a}`,width:i,fill:r,viewBox:s,height:i,...n},o)}}St.displayName="LiveIndicator";const Mt=jt({viewBox:"0 0 24 24",svg:v.createElement(v.Fragment,null,v.createElement("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"}),v.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});Mt.displayName="PauseIcon";const Dt=jt({viewBox:"0 0 24 24",svg:v.createElement(v.Fragment,null,v.createElement("path",{d:"M8 5v14l11-7z"}),v.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});Dt.displayName="PlayIcon";const zt=L((()=>{const e=y(null),t=f(ut),i=y(!1);return w((()=>{const t=e.current;if(!t)return;const i=()=>{t.style.display="none"};return t.addEventListener("animationend",i),()=>{t.removeEventListener("animationend",i)}}),[]),w((()=>{e.current&&(i.current?e.current.style.display="block":i.current=!0)})),v.createElement("div",{ref:e,className:"x-3deye-player__playback-indicator"},t.paused?v.createElement(Mt,{size:32,color:"rgba(255, 255, 255, 0.8)"}):v.createElement(Dt,{size:32,color:"rgba(255, 255, 255, 0.8)"}))}));zt.displayName="PlaybackIndicator";const Lt=180/Math.PI;class Nt extends v.Component{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:v.createRef()}),Object.defineProperty(this,"zoomPreviewRef",{enumerable:!0,configurable:!0,writable:!0,value:v.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=dt.Fit}}),Object.defineProperty(this,"initRotation",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.zoom.filter((e=>"mousedown"!==e.type||!e.altKey)),this.disposables.push(s(this.zoomContainerRef.current,"mousedown").pipe(K((e=>{if(!e.altKey)return l;e.preventDefault(),this.resetVideoResizeModeBeforeRotation();const{top:t,left:i}=this.zoomContainerRef.current.getBoundingClientRect(),r=ae(this.zoomContainerRef.current),a=i+this.width/2*r.k+r.x,n=t+this.height/2*r.k+r.y,o={x:this.width/2*r.k+r.x,y:this.height/2*r.k+r.y};return this.startAngle=Lt*Math.atan2(e.clientY-n,e.clientX-a),s(document,"mousemove").pipe(q((e=>{T((()=>{const t=Lt*Math.atan2(e.clientY-n,e.clientX-a);this.rotationDelta=t-this.startAngle})),this.props.zoomed(Nt.getTransformMatrixString(r,this.rotation+this.rotationDelta,o))})),J(s(document,"mouseup").pipe(q((()=>T((()=>{this.rotation+=this.rotationDelta,this.rotationDelta=0})))))))}))).subscribe())}}),Object.defineProperty(this,"resetRotation",{enumerable:!0,configurable:!0,writable:!0,value:()=>{const e=ae(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.props.zoomed(Nt.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.props.zoomed(Nt.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=ne.translate(t,r).scale(e);this.previewZoom.transform(re(this.zoomPreviewRef.current),a)}}}),Object.defineProperty(this,"previewZoomed",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const{sourceEvent:t,transform:i}=e,r=re(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=ne.translate(r,a).scale(t);this.zoom.transform(re(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))}}),S(this,{zoomValue:j,zoomPreviewVisible:j,rotation:j,rotationDelta:j,currentRotation:O,resetRotation:M,resetVideoResizeModeBeforeRotation:M,zoomed:M})}get player(){return this.context}static getTransformMatrixString(e,t,i){const r=oe.translate(e.x,e.y),a=oe.scale(e.k),n=oe.multiply(r,a),s=[oe.translate(i.x,i.y),oe.rotate(t),oe.translate(-i.x,-i.y),n].reduce(oe.multiply);return oe.toString(s)}get currentRotation(){return(this.rotation+this.rotationDelta+360)%360}componentDidMount(){this.width=this.zoomContainerRef.current.clientWidth,this.height=this.zoomContainerRef.current.clientHeight,this.zoom=se().scaleExtent([1,4]).translateExtent([[0,0],[this.width,this.height]]).extent([[0,0],[this.width,this.height]]).on("zoom",this.zoomed),this.previewZoom=se().scaleExtent([.25,1]).on("zoom",this.previewZoomed),this.zoomContainerRef.current.addEventListener("mousedown",this.props.onMouseDown,!0),this.zoom(re(this.zoomContainerRef.current)),re(this.zoomContainerRef.current).on("dblclick.zoom",null),this.previewZoom(re(this.zoomPreviewRef.current)),re(this.zoomPreviewRef.current).on("dblclick.zoom",null),this.initRotation()}componentWillUnmount(){re(this.zoomContainerRef.current).on(".zoom",null),this.disposables.forEach((e=>{e instanceof c?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=ae(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(re(this.zoomContainerRef.current),o,l)}renderError(e){return e?e instanceof Ke?Be.t("player.playbackTimeoutError",{count:e.count}):e instanceof Qe?this.player.camera.enabled?Be.t("player.cameraIsOffline"):Be.t("player.cameraIsDisabled"):e instanceof et?Be.t("player.noPlayableStream"):e instanceof tt?Be.t("player.noVideoTrack"):"error_code"in e&&!this.player.camera.isOnline?this.player.camera.enabled?Be.t("player.cameraIsOffline"):Be.t("player.cameraIsDisabled"):"code"in e?Be.t("player.genericError"):"details"in e?this.player.camera.isOnline?Be.t("player.genericError"):this.player.camera.enabled?Be.t("player.cameraIsOffline"):Be.t("player.cameraIsDisabled"):Be.t("player.genericError"):null}render(){const{player:e}=this,t=`zoom-slider-${e.id}`;return v.createElement(v.Fragment,null,v.createElement("div",{className:"x-3deye-player__overlay"},v.createElement("div",{ref:this.zoomContainerRef,style:{position:"absolute",top:0,bottom:0,left:0,right:0},onDoubleClick:this.props.onDoubleClick||p,onAuxClick:this.props.onAuxClick}),v.createElement(zt,null),v.createElement("div",{className:"x-3deye-player__indicators"},this.props.hideCameraTitle?null:v.createElement(xt,null),v.createElement("div",{style:{flex:1}}),v.createElement(St,null),v.createElement(Tt,null)),v.createElement(N,null,(()=>v.createElement(v.Fragment,null,e.loading&&v.createElement(yt,{style:{pointerEvents:"none",position:"absolute",top:"calc(50% - 33px)",left:"calc(50% - 33px)"}}),e.error&&v.createElement("div",{style:{position:"absolute",top:0,left:0,bottom:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"}},v.createElement("span",{style:{backgroundColor:"rgba(0, 0, 0, 0.5)",padding:"8px 16px",fontSize:12}},this.renderError(e.error)))))),this.props.children),v.createElement(N,null,(()=>v.createElement(v.Fragment,null,v.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`),v.createElement("div",{id:t,className:"x-3deye-player__zoom-slider"},Array.from(Array(11)).map(((e,t)=>v.createElement("div",{key:t,className:"tick"}))),v.createElement(gt,{className:"rotation-button",disabled:!this.currentRotation,onClick:this.resetRotation,title:this.currentRotation?"reset rotation":"hold Alt key during panning to rotate"},Math.round(this.currentRotation),"°")),v.createElement("div",{ref:this.zoomPreviewRef,className:"x-3deye-player__zoom-preview",style:{width:this.previewWidth,height:this.previewHeight},tabIndex:-1},v.createElement("div",{className:"zoom-value"},`${this.zoomValue}x`),v.createElement("div",{className:"x-3deye-player__zoomable"}))))))}}Object.defineProperty(Nt,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:ut});const It=!!navigator.platform&&/iPad|iPhone|iPod/.test(navigator.platform),Vt=new URLSearchParams(location.search.toLowerCase()),At=Vt.has("dash")||Vt.has("dvr");class Ht extends v.Component{constructor(e,t){super(e,t),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"videoElementRef",{enumerable:!0,configurable:!0,writable:!0,value:v.createRef()}),Object.defineProperty(this,"zoomableRef",{enumerable:!0,configurable:!0,writable:!0,value:v.createRef()}),Object.defineProperty(this,"containerRef",{enumerable:!0,configurable:!0,writable:!0,value:v.createRef()}),Object.defineProperty(this,"resizeObserver",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"controller",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"adapter",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"videoElementKey",{enumerable:!0,configurable:!0,writable:!0,value:1}),Object.defineProperty(this,"safariFixData",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"zoomed",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.zoomableRef.current&&(this.zoomableRef.current.style.transform=e,this.zoomableRef.current.style.transformOrigin="0 0")}}),Object.defineProperty(this,"onMouseDown",{enumerable:!0,configurable:!0,writable:!0,value:e=>{e.currentTarget===e.target&&0===e.button&&this.props.onMouseDown&&this.props.onMouseDown(e)}}),S(this,{videoElementKey:j});const{startTime:i,endTime:r,clip:a,camera:n}=e,s=At||this.props.disableWebRtc;this.controller=new pt({camera:n,startTime:i,endTime:r,clip:a,archivesStore:this.context.archives,behaviors:{archive:e=>new it(e,this.video),DVR:e=>!("MediaSource"in window)&&It?new rt(e,this.video):new nt(e,At,this.video),WebRTC:s?null:e=>new ct(e)}})}get video(){return this.videoElementRef.current}componentDidMount(){this.adapter=new Xe(this.video,this.controller),Je&&this.disposables.push(Ge((()=>this.controller.mode),!0).pipe(Q()).subscribe((([e])=>{"WebRTC"===e&&T((()=>{this.videoElementKey++,this.safariFixData={restoreAt:this.controller.seekTime},this.controller.detach()}))}))),this.resizeObserver=new V((e=>{for(const t of e){const e=t.contentRect.width,i=t.contentRect.height;T((()=>{this.controller.width=e,this.controller.height=i}))}})),this.resizeObserver.observe(this.containerRef.current)}componentWillUnmount(){this.disposables.forEach((e=>{e instanceof c?e.closed||e.unsubscribe():e()})),this.adapter.dispose(),this.controller.detach(),this.resizeObserver&&this.resizeObserver.disconnect(),this.resizeObserver=null}componentDidUpdate(e){e.camera!==this.props.camera?this.controller.setCameraAndStartTime(this.props.camera,this.props.startTime||null):(!e.startTime&&this.props.startTime||e.startTime&&!this.props.startTime||e.startTime&&this.props.startTime&&+e.startTime!=+this.props.startTime)&&this.controller.setStartTime(this.props.startTime||null)}render(){return v.createElement(N,null,(()=>{const{muted:e,paused:t}=this.controller,{id:i=`player-${this.controller.id}`,className:r,camera:a,startTime:n,endTime:s,clip:o,controls:l,onDoubleClick:c,onMouseDown:u,onAuxClick:h,hideCameraTitle:d,disableWebRtc:m,...p}=this.props,b=le(r,"x-3deye-player",{"x-3deye-player--paused":t});return w((()=>{this.safariFixData&&(this.adapter.dispose(),this.safariFixData.restoreAt&&this.controller.setStartTime(this.safariFixData.restoreAt),this.adapter=new Xe(this.video,this.controller),this.safariFixData=null)}),[this.videoElementKey]),v.createElement("div",{ref:this.containerRef,id:i,className:b,...p},v.createElement("div",{ref:this.zoomableRef,className:"x-3deye-player__zoomable"},v.createElement("video",{key:this.videoElementKey,autoPlay:!0,crossOrigin:"anonymous",playsInline:!0,ref:this.videoElementRef,muted:e,style:{objectFit:this.controller.videoResizeMode}})),v.createElement(ut.Provider,{value:this.controller},v.createElement(Nt,{zoomed:this.zoomed,onDoubleClick:c,onAuxClick:h,onMouseDown:this.onMouseDown,width:this.controller.width,height:this.controller.height,hideCameraTitle:d},l)))}))}}Object.defineProperty(Ht,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:Fe});const Wt=jt({viewBox:"-6 -6 24 24",svg:v.createElement("path",{d:"M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"})});Wt.displayName="JamCloseIcon";const _t=v.forwardRef((({children:e,className:t,...i},r)=>(t=t?`x-3deye-player__control ${t}`:"x-3deye-player__control",v.createElement(gt,{ref:r,className:t,...i},e))));_t.displayName="Control";const $t=({onClick:e})=>e?v.createElement(_t,{className:"x-3deye-player__control-close",onClick:e,title:Be.t("playerTools.closePlayer")},v.createElement(Wt,{size:24,color:"currentColor"})):null;$t.displayName="CloseControl";const Ut="x-3deye-player__controls--spaced",Bt="x-3deye-player__controls--compact",qt="x-3deye-player__control--reflowed";class Ft extends v.Component{constructor(){super(...arguments),Object.defineProperty(this,"containerRef",{enumerable:!0,configurable:!0,writable:!0,value:v.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(Bt)&&(i.classList.remove(Bt),Array.from(i.children).filter((e=>e.classList.contains(qt))).forEach((e=>{e.style.position="",e.style.bottom="",e.style.right="",e.classList.remove(qt)}))),i.classList.contains(Ut)&&(i.classList.remove(Ut),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(Ut);for(const e of i.querySelectorAll(".spacer"))null===(t=e.previousElementSibling)||void 0===t||t.classList.add("before-spacer");return}i.classList.add(Bt);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(qt),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=x((()=>this.player.width),this.reflow))}componentWillUnmount(){this.mutationObserver.disconnect(),this.resizeReactionDisposer()}render(){return v.createElement("div",{ref:this.containerRef,className:"x-3deye-player__controls",style:this.props.style},this.props.children)}}Object.defineProperty(Ft,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:ut}),Object.defineProperty(Ft,"Spacer",{enumerable:!0,configurable:!0,writable:!0,value:()=>v.createElement("div",{className:"spacer"})});const Jt=jt({viewBox:"0 0 24 24",svg:v.createElement(v.Fragment,null,v.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),v.createElement("path",{d:"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"}))});Jt.displayName="FullscreenIcon";const Zt=({onClick:e})=>e?v.createElement(_t,{onClick:e,title:Be.t("playerTools.fullScreen")},v.createElement(Jt,{size:24,color:"currentColor"})):null;Zt.displayName="FullscreenControl";const Yt=new Map,Gt="en";function Xt(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}class Kt extends v.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)),v.createElement("div",{style:{position:"absolute",height:34,lineHeight:"34px",top:"calc(50% - 17px)",overflow:"hidden"}},v.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)=>v.createElement("div",{key:i},this.props.format(e+((i-s)%a+a)%a))))))}}Kt.defaultProps={format:e=>e};class Qt extends v.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",h);Math.abs(e-i)>=5&&(this.setState({dragging:!0}),this.ignoreClick=!0,document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",h),document.addEventListener("mousemove",o),document.addEventListener("mouseup",l),this.tracker=window.setInterval(s,100))},h=()=>{document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",h),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",h)},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,h=o;for(;this.getCellValue(h,u,i,r)!==t;)h=((h+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 v.createElement("div",{style:{width:100,position:"relative",userSelect:"none",MozUserSelect:"none"},onWheel:this.onWheel,onMouseDown:this.onMouseDown,onTouchStart:({targetTouches:e})=>console.log(e)},v.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"}},v.createElement("div",{style:{position:"absolute",height:34,top:76,left:0,right:0,borderTop:"1px solid #aaa",borderBottom:"1px solid #aaa"}})),v.createElement("div",{style:{height:187}},v.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)=>v.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)))))),v.createElement(Kt,Object.assign({offset:e,transition:i},this.props)))}}!
|
|
1
|
+
import{format as e,isSameDay as t}from"date-fns/esm";import i from"i18next";import{from as r,Observable as a,merge as n,fromEvent as s,Subject as o,EMPTY as l,Subscription as c,timer as u,of as h,TimeoutError as d,interval as m,noop as p}from"rxjs";import*as b from"react";import v,{useContext as f,useState as g,useRef as y,useEffect as w,useCallback as E,createContext as C,Children as P}from"react";import{AppContext as k,app as O}from"@3deye-toolkit/core";import{computed as x,reaction as R,runInAction as T,makeObservable as S,observable as j,action as M,when as D,makeAutoObservable as z}from"mobx";import{observer as L,Observer as N,useLocalObservable as I}from"mobx-react-lite";import V from"resize-observer-polyfill";import{mapTo as H,map as A,distinctUntilChanged as U,audit as W,switchMap as _,debounceTime as $,filter as B,tap as F,startWith as q,takeUntil as J,mergeMap as Z,take as Y,timeout as G,concatMap as X,pairwise as K,flatMap as Q,auditTime as ee}from"rxjs/operators";import te from"hls.js";import ie from"reconnecting-websocket";import{select as re}from"d3-selection";import{zoomTransform as ae,zoomIdentity as ne,zoom as se}from"d3-zoom";import*as oe from"rematrix";import le from"clsx";import ce from"react-ink";import ue from"@reach/tooltip";import{useSpring as he,animated as de,config as me}from"@react-spring/web";import pe from"react-dom";import be from"screenfull";import{format as ve,setYear as fe,isAfter as ge,setMonth as ye,setDate as we,startOfDay as Ee,isBefore as Ce,getDaysInMonth as Pe,endOfDay as ke,getYear as Oe,isSameYear as xe,getMonth as Re,isSameMonth as Te,getDate as Se,setHours as je,setMinutes as Me,setSeconds as De,isSameDay as ze,getHours as Le,isSameHour as Ne,getMinutes as Ie,isSameMinute as Ve,getSeconds as He}from"date-fns";import{scaleLog as Ae}from"d3-scale";import{useDrag as Ue}from"@use-gesture/react";var We={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",fullScreen:"toggle full screen",playbackRate:"set playback rate",play:"play",pause:"pause",snapshot:"take video snapshot",volume:"volume"},videoResizeMode:{fit:"keep video's aspect ratio",stretch:"stretch video"},selectArea:"select area",button:{cancel:"Cancel"},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"}};const _e=new Map,$e={detection:{order:["querystring","htmlTag","navigator"],lookupQuerystring:"lang"},fallbackLng:"en",load:"all",interpolation:{escapeValue:!1}},Be=i.createInstance();function Fe(t,i){const r=_e.get(Be.language);return e(t,i,{locale:r})}const qe=v.createContext(null),Je=!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);var Ze,Ye;function Ge(e,t=!1){const i=x(e);return new a((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"}(Ze||(Ze={})),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"}(Ye||(Ye={}));class Xe{constructor(e,t){Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]});const i=n(s(e,"play").pipe(H(!1)),s(e,"pause").pipe(H(!0))),r=s(e,"volumechange").pipe(A((()=>e.volume)),U()),a=s(e,"timeupdate"),c=n(s(e,Je?"loadeddata":"loadedmetadata"),s(e,"playing")),u=s(e,"ended"),h=s(e,"volumechange").pipe(A((()=>e.muted)),U());t.attach(e,{canSeek$:c,ended$:u,progress$:a,volume$:r,muted$:h}),this.disposables.push(R((()=>t.stream),(t=>{e.srcObject=t}))),this.disposables.push(R((()=>t.volume),(t=>{e.volume=t}))),this.disposables.push(R((()=>t.playbackRate),(t=>{e.playbackRate=t}))),this.disposables.push(s(e,"canplay").subscribe((()=>{e.playbackRate!==t.playbackRate&&(e.playbackRate=t.playbackRate)}))),this.disposables.push(s(e,"error").subscribe((()=>{e.error&&(console.error(e.error),t.error=e.error)}))),this.disposables.push(s(e,"seeking").subscribe((()=>{T((()=>t.loading=!0))}))),this.disposables.push(s(e,"pause").subscribe((()=>{T((()=>{t.loading=!1}))})));const d=new o;let m=!1;this.disposables.push(n(Ge((()=>t.paused)),d).pipe(W((t=>(m=t,t&&e.paused||!t&&!e.paused?l:t?(e.pause(),l):e.play().catch((e=>console.error(e))))))).subscribe((e=>{e!==m&&d.next(e)}))),this.disposables.push(i.subscribe((e=>{(e&&!t.paused||!e&&t.paused)&&d.next(t.paused)}))),this.disposables.push(s(e,"seeked").subscribe((()=>{t.paused||d.next(!1)})))}dispose(){this.disposables.forEach((e=>{e instanceof c?e.closed||e.unsubscribe():e()}))}}class Ke 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 Qe extends Error{get name(){return"CameraOfflineError"}}class et extends Error{get name(){return"NoPlayableStreamError"}}class tt extends Error{get name(){return"NoVideoTrackError"}}class it{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,"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()}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(R((()=>this.player.chunk),(e=>{if(!e)return this.video.pause(),this.video.removeAttribute("src"),void this.video.load();this.player.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(Ge((()=>this.player.loading),!0).pipe(_((e=>e?Ge((()=>this.player.loading),!0).pipe($(3e4)):l))).subscribe((()=>{this.player.error=new Ke(30)})))}resetVideo(){const{video:e}=this;e.pause(),e.removeAttribute("src"),e.load()}dispose(){this.disposables.forEach((e=>{e instanceof c?e.closed||e.unsubscribe():e()})),this.resetVideo(),this.player=null}}class rt{constructor(e,t){Object.defineProperty(this,"player",{enumerable:!0,configurable:!0,writable:!0,value:e}),Object.defineProperty(this,"video",{enumerable:!0,configurable:!0,writable:!0,value:t}),Object.defineProperty(this,"live",{enumerable:!0,configurable:!0,writable:!0,value:!0}),Object.defineProperty(this,"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()}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(Ge((()=>this.player.loading),!0).pipe(_((e=>e?Ge((()=>this.player.loading),!0).pipe($(3e4)):l))).subscribe((()=>{this.player.error=new Ke(Math.round(30))})))}reactToCamera(){this.disposables.push(R((()=>({streamUrl:this.player.camera.streamUrl})),(()=>{const e=this.player.camera,{streamUrl:t}=e.raw;this.player.loading=!0,this.availabilityStartTime=-1,this.video.src="",t?this.video.src=t:this.player.camera.isOnline?this.player.error=new et:this.player.error=new Qe}),{fireImmediately:!0}))}catchUpAfterPause(){this.disposables.push(s(this.video,"play").pipe(B((()=>this.live))).subscribe((()=>{console.log("unpaused live HLS"),this.goLive()})))}dispose(){this.disposables.forEach((e=>{e instanceof c?e.closed||e.unsubscribe():e()}))}}var at;!function(e){e.Initial="initial",e.Playing="playing",e.Paused="paused",e.Reconnecting="reconnecting",e.Stalled="stalled",e.Error="error"}(at||(at={}));class nt{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,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:at.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}}),S(this,{hlsPlayer:j.ref,goLive:!0,live:j,state:j,seek:M,dispose:M}),this.live=t,this.disposables.push(Ge((()=>this.hlsPlayer),!0).pipe(_((e=>e?new a((t=>{e.on(te.Events.ERROR,((e,i)=>{t.next(i)}))})):l))).subscribe((t=>{console.error(t),"bufferAddCodecError"!==t.details?t.fatal&&(t.type===te.ErrorTypes.MEDIA_ERROR&&this.hlsPlayer&&this.hlsPlayer.recoverMediaError(),e.error=t):e.error=t}))),e.loading=!0,null===e.seekTime&&(this.live=!0),this.initDelayCompensation(),this.initPlayerState(),this.initLoadingTimeout(),this.reactToCamera(),this.catchUpAfterPause()}initDelayCompensation(){this.disposables.push(Ge((()=>this.live),!0).pipe(_((()=>this.live?Ge((()=>this.state),!0).pipe(_((e=>e!==at.Playing?l:u(5e3+5e3*Math.random(),3e4)))):l))).subscribe((()=>{const e=this.getDateRange(),{currentTime:t}=this.player;e&&t&&+e[1]-+t>6e4&&this.goLive()})))}initPlayerState(){this.disposables.push(this.player.progress$.pipe(F((()=>{this.state===at.Playing||this.player.paused||T((()=>this.state=at.Playing))})),$(2e3),B((()=>this.state===at.Playing))).subscribe((()=>{T((()=>this.state=at.Stalled))}))),this.disposables.push(R((()=>this.player.paused),(()=>{this.state=at.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(){const{player:e}=this;this.disposables.push(Ge((()=>e.loading),!0).pipe(_((t=>t?Ge((()=>e.loading),!0).pipe($(3e4)):l))).subscribe((()=>{e.camera.isOnline?e.error=new Ke(Math.round(30)):e.error=new Qe}))),this.disposables.push(Ge((()=>this.state),!0).pipe(_((e=>e!==at.Stalled?l:u(3e4)))).subscribe((()=>{e.camera.isOnline?e.error||(e.error=new Ke(Math.round(30))):e.error=new Qe})))}reactToCamera(){const{player:e}=this;this.disposables.push(R((()=>({streamUrl:e.camera.streamUrl})),(({streamUrl:t})=>{e.loading=!0,this.hlsPlayer&&this.hlsPlayer.destroy(),t?(this.hlsPlayer=new te,this.hlsPlayer.attachMedia(this.video),this.hlsPlayer.loadSource(t)):e.camera.isOnline?e.error=new et:e.error=new Qe}),{fireImmediately:!0}))}catchUpAfterPause(){this.disposables.push(s(this.video,"play").pipe(B((()=>this.live))).subscribe(this.goLive))}dispose(){this.disposables.forEach((e=>{e instanceof c?e.closed||e.unsubscribe():e()})),this.hlsPlayer&&this.hlsPlayer.destroy(),this.hlsPlayer=null,this.player=null}}globalThis.Hls=te;const st=new Map;class ot{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)}))}}),S(this,{sessionId:j,pluginsCount:j,registerPlugin:M,deregisterPlugin:M}),this.init()}async init(){const{url:e}=this;this.connection=new ie(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(){Ge((()=>this.pluginsCount),!0).pipe(_((e=>e?l:u(1e4)))).subscribe((()=>{this.dispose()}))}dispose(){this.connection.close(),st.delete(this.url)}async createSession(){const e=this.randomString(12);this.connection.send(JSON.stringify({janus:"create",transaction:e}));const t=await new Promise(((t,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)}));T((()=>this.sessionId=t))}startKeepingAlive(){D((()=>!!this.sessionId),(()=>{s(this.connection,"open").pipe(q(null),_((()=>u(0,3e4).pipe(J(s(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 lt{constructor(e,t,i,r=!0){Object.defineProperty(this,"tcpOnly",{enumerable:!0,configurable:!0,writable:!0,value:r}),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,"onplugininit",{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&&("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=D((()=>"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(Ge((()=>this.pc),!0).pipe(_((e=>null===e?h(null):s(e,"iceconnectionstatechange").pipe(q(null),A((()=>e.iceConnectionState)))))).subscribe((e=>{T((()=>this.connectionState=e))})))}}),Object.defineProperty(this,"initTrack",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposables.push(Ge((()=>this.pc),!0).pipe(_((e=>null===e?h(null):n(s(e,"track").pipe(q(null)),s(e,"addstream").pipe(A((e=>({streams:[e.stream]})))))))).subscribe((e=>{let t=null;null!==e&&(t=e.streams[0],e.track&&(e.track.onended=e=>{console.log("cam",this.cameraId,"remote track removed"),this.stream&&this.stream.removeTrack(e.target)})),this.setStream(t)})))}}),Object.defineProperty(this,"autoCollectStats",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.disposables.push(Ge((()=>this.stream),!0).pipe(_((e=>e?u(0,1e3).pipe(Z((()=>this.getStats()))):h(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}}),S(this,{pc:j.ref,pluginHandleId:j,stream:j.ref,stats:j.ref,error:j.ref,connectionState:j,onmessage:M,setStream:M,updateStats:M}),this.server=function(e){if(st.has(e))return st.get(e);const t=new ot(e);return st.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(R((()=>this.pluginHandleId),this.onplugininit,{fireImmediately:!0})),this.disposables.push(D((()=>!!this.server.sessionId),(()=>this.disposables.push(s(this.server.connection,"message").subscribe(this.onmessage)))))}async onremotedescription(e){const{pluginHandleId:t}=this,i=this.pc;if(!e.sdp)return;const r=[];if(this.tcpOnly){const t=e.sdp.split("\r\n");let i="video";const a={video:[],audio:[]};for(const e of t)e.startsWith("a=mid:audio")?i="audio":e.startsWith("a=mid:video")?i="video":e.startsWith("a=candidate")&&a[i].push(e);const n=t.filter((e=>!(e.startsWith("a=candidate")||e.startsWith("a=end-of-candidates")))),s=e=>"tcp"===e.split(/\s+/)[2],o={video:a.video.filter(s),audio:a.audio.filter(s)};e=new RTCSessionDescription({type:"offer",sdp:[...n].join("\r\n")});let l={audio:[],video:[]};o.video.length?l=o:(console.warn("no video TCP candidates found. Falling back to UDP"),l=a);for(const e in l)l.hasOwnProperty(e)&&l[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 T((()=>{"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(Ge((()=>this.server?this.server.sessionId:null),!0).pipe(B(Boolean),_((()=>{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})),s(this.server.connection,"message").pipe(A((({data:e})=>JSON.parse(e))),B((t=>t.transaction===e)),Y(1))}))).subscribe((e=>{T((()=>{if("success"!==e.janus)return this.error=e.error,void console.log(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()}dispose(){this.disposeDelayedStream&&(this.disposeDelayedStream(),this.disposeDelayedStream=null),this.pc&&this.safeCloseRTCPeerConnection(this.pc),this.disposables.forEach((e=>{e instanceof c?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}}class ct{constructor(e){Object.defineProperty(this,"player",{enumerable:!0,configurable:!0,writable:!0,value:e}),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,"playerState",{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,"onRemoteStream",{enumerable:!0,configurable:!0,writable:!0,value:e=>{if(!e){if(this.playerState===at.Reconnecting)return;return void(this.player.stream=null)}this.player.stream=e;const t=e.getVideoTracks();t&&0!==t.length||(console.warn("player",this.player.id,"cam",this.player.camera.id,"no video",t),this.player.error=new tt,this.playerState=at.Error)}}),S(this,{streamingPlugin:j.ref,playerState:j,setPlayerState:M,ttff:j,streamingError:x,stream:x,onRemoteStream:M,dispose:M}),this.player=e;const t=Date.now();RTCPeerConnection?(this.initStream(),this.initStats(),this.reactToCamera(),this.disposables.push(Ge((()=>this.playerState),!0).pipe(_((e=>e!==at.Playing?l:Ge((()=>this.player.paused)).pipe(B(Boolean))))).subscribe((()=>{var e;null===(e=this.streamingPlugin)||void 0===e||e.pause(),this.setPlayerState(at.Paused)}))),this.disposables.push(Ge((()=>this.playerState),!0).pipe(_((e=>e!==at.Paused?l:Ge((()=>this.player.paused)).pipe(B((e=>!e)))))).subscribe((()=>{var e;null===(e=this.streamingPlugin)||void 0===e||e.resume(),this.setPlayerState(at.Playing)}))),this.disposables.push(Ge((()=>this.playerState),!0).pipe(_((e=>e!==at.Initial?l:Ge((()=>this.stream),!0).pipe(_((e=>e?Ge((()=>{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(B(Boolean),G(1e4)):l)),Y(1))))).subscribe({error:e=>{if(e instanceof d)return console.error("player",this.player.id,"cam",this.player.camera.id,"no frames in 10s. Fallback to DVR"),void this.player.fallbackToDVR();this.playerState=at.Error,this.player.error=e,console.error(e)}})),this.disposables.push(Ge((()=>this.playerState),!0).pipe(_((e=>e!==at.Initial?l:Ge((()=>this.stream),!0).pipe(_((e=>e?Ge((()=>{var e,t,i;return null!==(i=null===(t=null===(e=this.streamingPlugin)||void 0===e?void 0:e.stats)||void 0===t?void 0:t.framesDecoded)&&void 0!==i?i:null})):l)),B(Boolean),Y(1))))).subscribe((()=>{this.setPlayerState(at.Playing)}))),this.disposables.push(Ge((()=>this.playerState),!0).pipe(_((e=>e!==at.Playing?l:Ge((()=>{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(B(Boolean),$(1e4))))).subscribe((()=>{console.log("player",this.player.id,"cam",this.player.camera.id,"no new frames in 10000s"),this.setPlayerState(at.Reconnecting)}))),this.disposables.push(R((()=>this.playerState),(e=>{e===at.Initial&&(this.player.loading=!0,this.player.error=null)}))),this.disposables.push(R((()=>this.playerState),(e=>{e===at.Playing&&(this.player.loading=!1,this.player.error=null)}))),this.disposables.push(R((()=>this.playerState),(e=>{e===at.Reconnecting&&(this.player.loading=!0)}))),this.disposables.push(Ge((()=>this.playerState),!0).pipe(_((e=>{if(e!==at.Reconnecting)return l;this.streamingPlugin&&this.streamingPlugin.dispose();const{webRtcUrl:t,id:i,pin:r}=this.player.camera;return T((()=>{this.streamingPlugin=new lt(t,i,r)})),Ge((()=>this.stream),!0).pipe(_((e=>e?Ge((()=>{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(B(Boolean),G(3e4)):l)),Y(1))}))).subscribe((()=>{this.setPlayerState(at.Playing)}),(e=>{var t;if(e instanceof d)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.player.fallbackToDVR()):console.warn("player",this.player.id,"cam",this.player.camera.id,"waiting for reconnect"));this.setPlayerState(at.Error),this.player.error=e,console.error(e)}))),this.disposables.push(Ge((()=>this.playerState),!0).pipe(_((e=>e!==at.Error?l:Ge((()=>this.stream),!0).pipe(_((e=>e?Ge((()=>{var e;return this.streamingPlugin?null===(e=this.streamingPlugin.stats)||void 0===e?void 0:e.framesDecoded:null})):l)),B(Boolean),Y(1))))).subscribe((()=>{this.setPlayerState(at.Playing)}))),this.disposables.push(R((()=>this.streamingError),(e=>{var t,i;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==e?void 0:e.code)&&465===e.code)return console.warn("player",this.player.id,"cam",this.player.camera.id,"fallback to DVR"),void this.player.fallbackToDVR();this.player.error=e,this.playerState=at.Error}))),this.disposables.push(Ge((()=>this.playerState),!0).pipe(B((e=>e===at.Playing)),Y(1)).subscribe((()=>{this.ttff=Date.now()-t})))):this.player.fallbackToDVR()}get streamingError(){return this.streamingPlugin?this.streamingPlugin.error:null}get stream(){return this.streamingPlugin?this.streamingPlugin.stream:null}dispose(){this.disposables.forEach((e=>{e instanceof c?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}setPlayerState(e){this.playerState=e}getCurrentTime(){return this.playerState===at.Playing?new Date:null}reactToCamera(){this.disposables.push(R((()=>({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(),this.player.loading=!0,r?(this.streamingPlugin=new lt(e,t,i),this.playerState=at.Initial):(this.player.error=new Qe,this.playerState=at.Error,this.streamingPlugin=null)}),{fireImmediately:!0}))}initStream(){this.disposables.push(R((()=>this.stream),this.onRemoteStream))}initStats(){this.disposables.push(R((()=>this.streamingPlugin?this.streamingPlugin.stats:null),(e=>{this.player.stats=e})))}}const ut=v.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}}),S(this,{startTime:j,endTime:j,setBounds:M}),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 dt;!function(e){e.Fit="contain",e.Stretch="fill"}(dt||(dt={}));const mt=(()=>{let e=0;return()=>++e})();class pt{constructor({camera:e,startTime:t,endTime:i,clip:r,archivesStore:a,behaviors:n}){Object.defineProperty(this,"id",{enumerable:!0,configurable:!0,writable:!0,value:mt()}),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,"loading",{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:dt.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:void 0}),Object.defineProperty(this,"height",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"chunkRequest",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"archivesRequest",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),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.targetTime=null!=e?e:null,!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=>{if(!this.currentTime&&this.targetTime)return;const t=new Date(+(this.targetTime||this.currentTime)-e);this.changeMedia({time:t,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,"fallbackToDVR",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.seekTime=null,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(dt),t=(Object.values(dt).indexOf(this.videoResizeMode)+1)%e.length;this.videoResizeMode=dt[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 c?e.closed||e.unsubscribe():e()})),this.video=null}}),z(this,{behavior:j.ref,camera:j.ref,chunk:j.ref,chunkRequest:j.ref,liveChunk:j.ref}),this.camera=e,this.startTime=t||null,this.endTime=i||null,this.clip=r,this.archivesStore=a,this.behaviors=n}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(R((()=>({camera:this.camera,startTime:this.startTime})),(({startTime:e})=>{T((()=>{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.initUpgradeToWebRtc()}seekAfterReady(){this.disposables.push(this.canSeek$.pipe(_((()=>n(h(null),this.progress$.pipe(Y(1)))))).pipe(A((()=>this.seekTime)),B(Boolean)).subscribe((e=>{this.seekTime=null,this.seek(e)})))}stopLoadingOnError(){this.disposables.push(R((()=>this.error),(e=>{e&&(this.loading=!1)})))}replaceErrorMessageOnOffline(){this.disposables.push(Ge((()=>this.error),!0).pipe(_((e=>e?Ge((()=>this.camera.isOnline),!1).pipe(B((e=>!e))):l))).subscribe((()=>{this.error instanceof Qe||(this.error=new Qe)})))}initCurrentTime(){this.disposables.push(this.progress$.pipe(B((()=>!this.seekTime&&!this.chunkRequest)),B((()=>!this.paused))).subscribe((()=>{if(!this.behavior)return;const e=this.behavior.getCurrentTime();e&&T((()=>{this.loading=!1,this.error=null,this.currentTime=e,this.targetTime=null}))})))}initSameChunkRequestFix(){this.disposables.push(this.progress$.pipe(B((()=>{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(Ge((()=>this.liveChunk),!0).pipe(_((e=>e?m(250):l))).subscribe((()=>{T((()=>{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(Ge((()=>this.chunkRequest),!0).pipe(_((e=>{if(null===e)return l;const{time:t,backward:i}=e,r=this.camera.id,a=this.archivesStore.getChunks({cameraId:this.camera.id,from:t,to:t})[0];if(a)return h({chunk:a,time:t,backward:i});return(i?this.archivesStore.fetchPrevChunk({cameraId:r,time:t}):this.archivesStore.fetchNextChunk({cameraId:r,time:t})).pipe(A((e=>e?{chunk:e,time:i?new Date(+e.endTime-5e3):new Date(Math.max(+e.startTime,+t)),backward:i}:this.liveChunk&&this.liveChunk.startTime<t?{chunk:this.liveChunk,time:t,backward:i}:{chunk:null,time:t,backward:i})))}))).subscribe((({chunk:e,time:t,backward:i})=>{T((()=>{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||T((()=>{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(Ge((()=>this.mode),!0).pipe(X((async e=>{if(this.behavior){const e=this.behavior;T((()=>this.behavior=null)),await e.dispose()}return e}))).subscribe((e=>{e&&T((()=>{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}initUpgradeToWebRtc(){this.behaviors.WebRTC&&this.disposables.push(Ge((()=>this.behavior),!0).pipe(_((e=>e&&"DVR"===this.mode?Ge((()=>e.live),!0).pipe(_((e=>e?Ge((()=>this.camera.isOnline)).pipe(_((e=>e?(this.goLive(),l):l))):l))):l))).subscribe())}}const bt={background:"rgb(0 0 0 / 0.9)",color:"white",border:"none",borderRadius:"4px",padding:"0.5em 1em",fontSize:12},vt=({label:e,children:t})=>v.createElement(ue,{label:e,style:bt},t);vt.displayName="Tooltip";class ft extends v.Component{render(){const{forwardedRef:e,children:t,className:i,fullwidth:r,type:a,title:n,...s}=this.props,o=le(i,"x-3deye-button",{fullwidth:r}),l=v.createElement("button",{ref:e,className:o,type:a||"button",...s},t,s.disabled?null:v.createElement(ce,null));return n?v.createElement(vt,{label:n},l):l}}const gt=v.forwardRef(((e,t)=>v.createElement(ft,{forwardedRef:t,...e})));class yt extends v.PureComponent{render(){return v.createElement("svg",{focusable:"false",viewBox:"0 0 66 66",className:"spinner",...this.props},v.createElement("circle",{fill:"none",strokeWidth:3,cx:33,cy:33,r:30,stroke:"white"}))}}const wt=e=>`scale(${e})`,Et=({children:e,from:t,style:i})=>{const r=he({opacity:1,from:{opacity:0},config:{tension:300}});return b.createElement(de.div,{style:{...i,...r,transform:r.opacity.to(wt),transformOrigin:`${t||"bottom"} center`,width:"max-content"}},e)},Ct=document.body;class Pt extends v.Component{constructor(e){super(e),Object.defineProperty(this,"el",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.el=document.createElement("div")}componentDidMount(){Ct.appendChild(this.el)}componentWillUnmount(){Ct.removeChild(this.el)}render(){return pe.createPortal(this.props.children,this.el)}}const kt=({width:e,height:t,color:i,position:r="top",style:a})=>{const n=[0,"top"===r?t:0],s=[e,n[1]],o=[e/2,t-n[1]],l=[e/4,t*("top"===r?3:1)/4],c=[.325*e,t-n[1]],u=[e-c[0],c[1]],h=[e-l[0],l[1]],d=e=>e.join(","),m=`M ${d(n)} C ${d(l)} ${d(c)} ${d(o)} ${d(u)} ${d(h)} ${d(s)} Z`;return v.createElement("svg",{className:"tip",style:a,width:e,height:t,fill:i},v.createElement("path",{d:m}))};class Ot extends v.Component{constructor(){super(...arguments),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:{top:0,left:0,bottom:"auto",tipPosition:"bottom",tipOffset:0}}),Object.defineProperty(this,"targetRef",{enumerable:!0,configurable:!0,writable:!0,value:v.createRef()}),Object.defineProperty(this,"popoverRef",{enumerable:!0,configurable:!0,writable:!0,value:v.createRef()}),Object.defineProperty(this,"outsideClickListener",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const t=e.target;if(this.popoverRef.current.contains(t))return;const i=this.targetRef.current;i&&i.contains(t)||this.props.onCloseRequest()}}),Object.defineProperty(this,"updatePosition",{enumerable:!0,configurable:!0,writable:!0,value:()=>{if(!this.popoverRef)return;const{disablePortal:e}=this.props,t=this.targetRef.current;if(!t)return void console.warn("popover: no target element found");const{top:i,left:r,bottom:a,height:n,width:s}=t.getBoundingClientRect();let o="calc(50% - 12px)",l="auto";const c=this.popoverRef.current;let u="bottom"===this.props.placement?a+10:i-c.clientHeight-10,h=r+s/2-c.clientWidth/2,d="bottom"===this.props.placement?"top":"bottom";u<0&&(u=a+10,d="top"),h<0&&(h=0,o=r+s/2-12),h+c.clientWidth>window.innerWidth&&(h=window.innerWidth-c.clientWidth,o=r-h+s/2-12),e&&(u=n+10,h=0,o=8,"top"===this.props.placement&&(l=u,u="auto")),this.setState({top:u,bottom:l,left:h,tipPosition:d,tipOffset:o},(()=>{this.forceUpdate()}))}})}componentWillUnmount(){this.stopOutsideClickListening()}componentDidUpdate(e){const{ignoreOutsideClick:t}=this.props;this.props.opened&&!e.opened&&(t||this.startOutsideClickListening(),requestAnimationFrame(this.updatePosition)),!this.props.opened&&e.opened&&this.stopOutsideClickListening()}render(){const{top:e,left:t,bottom:i,tipPosition:r,tipOffset:a}=this.state,{className:n,opened:s,disablePortal:o,disableAnimation:l}=this.props,c={position:"absolute",left:a};"bottom"===r?c.bottom=-8:c.top=-8;const u=le(n,"x-3deye-popover-body");let h=null;if(s){const a={zIndex:o?1:100000001,position:"absolute",top:e,bottom:i,left:t},n=v.createElement("div",{className:u,ref:this.popoverRef},this.props.children,v.createElement(kt,{width:24,height:8,position:r,color:"white",style:c}));h=l?v.createElement("div",{style:a},n):v.createElement(Et,{from:r,style:a},n)}const d=v.cloneElement(this.props.target,{ref:this.targetRef});if(o)return v.createElement("div",{className:"x-3deye-popover",onMouseLeave:this.props.onMouseLeave},d,h);const m=s&&v.createElement(Pt,null,h);return v.createElement(v.Fragment,null,d,m)}startOutsideClickListening(){document.addEventListener("mousedown",this.outsideClickListener,!0)}stopOutsideClickListening(){document.removeEventListener("mousedown",this.outsideClickListener,!0)}}const xt=L((()=>{const e=f(ut),[t,i]=g(!1);if(!e.stats)return null;const r=e=>{e.preventDefault(),i(!t)};if(!t)return v.createElement("details",{className:"x-3deye-player__stats",open:t,style:{pointerEvents:"auto"}},v.createElement("summary",{onClick:r},"more"));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 v.createElement("details",{className:"x-3deye-player__stats",open:t,style:{pointerEvents:"auto"}},v.createElement("summary",{onClick:r},"more"),v.createElement("dl",null,v.createElement("div",null,v.createElement("dt",null,"frame width:")," ",v.createElement("dd",null,a.frameWidth||e.video.videoWidth)),v.createElement("div",null,v.createElement("dt",null,"frame height:")," ",v.createElement("dd",null,a.frameHeight||e.video.videoHeight)),v.createElement("div",null,v.createElement("dt",null,"bitrate:")," ",v.createElement("dd",null,Math.round(8*a.bitrate)," kbit/s")),v.createElement("div",null,v.createElement("dt",null,"average bitrate:")," ",v.createElement("dd",null,Math.round(8*s)," kbit/s")),v.createElement("div",null,v.createElement("dt",null,"elapsed time:")," ",v.createElement("dd",null,Math.floor(n/1e3)," s")),v.createElement("div",null,v.createElement("dt",null,"packets loss:"),v.createElement("dd",{style:{color:o<10?"green":o<50?"yellow":"red"}},o,"% ")),v.createElement("div",null,v.createElement("dt",null,"packets received:")," ",v.createElement("dd",null,a.packetsReceived)),v.createElement("div",null,v.createElement("dt",null,"packets lost:")," ",v.createElement("dd",null,a.packetsLost)),v.createElement("div",null,v.createElement("dt",null,"frames received:")," ",v.createElement("dd",null,a.framesReceived)),v.createElement("div",null,v.createElement("dt",null,"frames decoded:")," ",v.createElement("dd",null,a.framesDecoded)),v.createElement("div",null,v.createElement("dt",null,"frames dropped:")," ",v.createElement("dd",null,a.framesDropped)),v.createElement("div",null,v.createElement("dt",null,"round-trip time:")," ",v.createElement("dd",null,a.rtt)),v.createElement("div",null,v.createElement("dt",null,"time to first frame:")," ",v.createElement("dd",null,c))))}));xt.displayName="PlayerStats";const Rt=L((()=>{const e=f(ut),[t,i]=g(!1);return v.createElement(Ot,{className:"x-3deye-player__camera-name-popover",opened:t,onCloseRequest:()=>i(!1),placement:"bottom",ignoreOutsideClick:!0,disablePortal:!0,target:v.createElement("div",{className:"x-3deye-player__camera-name",onClick:()=>i(!t)},e.camera.name)},v.createElement("div",null,"id:"," ",v.createElement(gt,{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)),v.createElement("div",{style:{marginBottom:4}},"provider: ",e.mode),v.createElement(xt,null))}));Rt.displayName="CameraName";const Tt=L((()=>{const e=f(ut),i=f(qe);return"syncedPlayers"in i?e.behavior&&e.behavior instanceof ct?null:v.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)?Fe(r,"HH:mm:ss"):Fe(r,"PP HH:mm:ss"))):null;var r}));Tt.displayName="CurrentTimeIndicator";const St=L((()=>{const e=f(ut);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 v.createElement(gt,{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 ct)?v.createElement("div",{className:"x-3deye-live-indicator"},Be.t("playerTools.live")):v.createElement(gt,{style:{pointerEvents:"auto"},className:"x-3deye-button--live",onClick:e.goLive,tabIndex:-1},"go live")}));function jt(e){return t=>{const{size:i=24,color:r="currentColor",className:a,...n}=t,s=e.viewBox||"0 0 24 24",o=e.svg;return v.createElement("svg",{preserveAspectRatio:"xMinYMin",className:le("icon",a),width:i,fill:r,viewBox:s,...n},o)}}St.displayName="LiveIndicator";const Mt=jt({viewBox:"0 0 24 24",svg:v.createElement(v.Fragment,null,v.createElement("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"}),v.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});Mt.displayName="PauseIcon";const Dt=jt({viewBox:"0 0 24 24",svg:v.createElement(v.Fragment,null,v.createElement("path",{d:"M8 5v14l11-7z"}),v.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});Dt.displayName="PlayIcon";const zt=L((()=>{const e=y(null),t=f(ut),i=y(!1);return w((()=>{const t=e.current;if(!t)return;const i=()=>{t.style.display="none"};return t.addEventListener("animationend",i),()=>{t.removeEventListener("animationend",i)}}),[]),w((()=>{e.current&&(i.current?e.current.style.display="block":i.current=!0)})),v.createElement("div",{ref:e,className:"x-3deye-player__playback-indicator"},t.paused?v.createElement(Mt,{size:32,color:"rgba(255, 255, 255, 0.8)"}):v.createElement(Dt,{size:32,color:"rgba(255, 255, 255, 0.8)"}))}));zt.displayName="PlaybackIndicator";const Lt=180/Math.PI;class Nt extends v.Component{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:v.createRef()}),Object.defineProperty(this,"zoomPreviewRef",{enumerable:!0,configurable:!0,writable:!0,value:v.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=dt.Fit}}),Object.defineProperty(this,"initRotation",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.zoom.filter((e=>"mousedown"!==e.type||!e.altKey)),this.disposables.push(s(this.zoomContainerRef.current,"mousedown").pipe(Z((e=>{if(!e.altKey)return l;e.preventDefault(),this.resetVideoResizeModeBeforeRotation();const{top:t,left:i}=this.zoomContainerRef.current.getBoundingClientRect(),r=ae(this.zoomContainerRef.current),a=i+this.width/2*r.k+r.x,n=t+this.height/2*r.k+r.y,o={x:this.width/2*r.k+r.x,y:this.height/2*r.k+r.y};return this.startAngle=Lt*Math.atan2(e.clientY-n,e.clientX-a),s(document,"mousemove").pipe(F((e=>{T((()=>{const t=Lt*Math.atan2(e.clientY-n,e.clientX-a);this.rotationDelta=t-this.startAngle})),this.player.setTransform(Nt.getTransformMatrixString(r,this.rotation+this.rotationDelta,o))})),J(s(document,"mouseup").pipe(F((()=>T((()=>{this.rotation+=this.rotationDelta,this.rotationDelta=0})))))))}))).subscribe())}}),Object.defineProperty(this,"resetRotation",{enumerable:!0,configurable:!0,writable:!0,value:()=>{const e=ae(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(Nt.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(Nt.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=ne.translate(t,r).scale(e);this.previewZoom.transform(re(this.zoomPreviewRef.current),a)}}}),Object.defineProperty(this,"previewZoomed",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const{sourceEvent:t,transform:i}=e,r=re(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=ne.translate(r,a).scale(t);this.zoom.transform(re(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))}}),S(this,{zoomValue:j,zoomPreviewVisible:j,rotation:j,rotationDelta:j,currentRotation:x,resetRotation:M,resetVideoResizeModeBeforeRotation:M,zoomed:M})}get player(){return this.context}static getTransformMatrixString(e,t,i){const r=oe.translate(e.x,e.y),a=oe.scale(e.k),n=oe.multiply(r,a),s=[oe.translate(i.x,i.y),oe.rotate(t),oe.translate(-i.x,-i.y),n].reduce(oe.multiply);return oe.toString(s)}get currentRotation(){return(this.rotation+this.rotationDelta+360)%360}componentDidMount(){this.width=this.zoomContainerRef.current.clientWidth,this.height=this.zoomContainerRef.current.clientHeight,this.zoom=se().scaleExtent([1,4]).translateExtent([[0,0],[this.width,this.height]]).extent([[0,0],[this.width,this.height]]).on("zoom",this.zoomed),this.previewZoom=se().scaleExtent([.25,1]).on("zoom",this.previewZoomed),this.zoomContainerRef.current.addEventListener("mousedown",this.props.onMouseDown,!0),this.zoom(re(this.zoomContainerRef.current)),re(this.zoomContainerRef.current).on("dblclick.zoom",null),this.previewZoom(re(this.zoomPreviewRef.current)),re(this.zoomPreviewRef.current).on("dblclick.zoom",null),this.initRotation(),this.disposables.push(R((()=>this.player.transform),(e=>{null===e&&this.zoomContainerRef.current&&this.zoom.transform(re(this.zoomContainerRef.current),ne)})))}componentWillUnmount(){re(this.zoomContainerRef.current).on(".zoom",null),this.disposables.forEach((e=>{e instanceof c?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=ae(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(re(this.zoomContainerRef.current),o,l)}renderError(e){return e?e instanceof Ke?Be.t("player.playbackTimeoutError",{count:e.count}):e instanceof Qe?this.player.camera.enabled?Be.t("player.cameraIsOffline"):Be.t("player.cameraIsDisabled"):e instanceof et?Be.t("player.noPlayableStream"):e instanceof tt?Be.t("player.noVideoTrack"):"error_code"in e&&!this.player.camera.isOnline?this.player.camera.enabled?Be.t("player.cameraIsOffline"):Be.t("player.cameraIsDisabled"):"code"in e?Be.t("player.genericError"):"details"in e?this.player.camera.isOnline?Be.t("player.genericError"):this.player.camera.enabled?Be.t("player.cameraIsOffline"):Be.t("player.cameraIsDisabled"):Be.t("player.genericError"):null}render(){const{player:e}=this,t=`zoom-slider-${e.id}`;return v.createElement(v.Fragment,null,v.createElement("div",{className:"x-3deye-player__overlay"},v.createElement("div",{ref:this.zoomContainerRef,style:{position:"absolute",top:0,bottom:0,left:0,right:0},onDoubleClick:this.props.onDoubleClick||p,onAuxClick:this.props.onAuxClick}),v.createElement(zt,null),v.createElement("div",{className:"x-3deye-player__indicators"},this.props.hideCameraTitle?null:v.createElement(Rt,null),v.createElement("div",{style:{flex:1}}),v.createElement(St,null),v.createElement(Tt,null)),v.createElement(N,null,(()=>v.createElement(v.Fragment,null,e.loading&&v.createElement(yt,{style:{pointerEvents:"none",position:"absolute",top:"calc(50% - 33px)",left:"calc(50% - 33px)"}}),e.error&&v.createElement("div",{style:{position:"absolute",top:0,left:0,bottom:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"}},v.createElement("span",{style:{backgroundColor:"rgba(0, 0, 0, 0.5)",padding:"8px 16px",fontSize:12}},this.renderError(e.error)))))),this.props.children),v.createElement(N,null,(()=>v.createElement(v.Fragment,null,v.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`),v.createElement("div",{id:t,className:"x-3deye-player__zoom-slider"},Array.from(Array(11)).map(((e,t)=>v.createElement("div",{key:t,className:"tick"}))),v.createElement(gt,{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),"°")),v.createElement("div",{ref:this.zoomPreviewRef,className:"x-3deye-player__zoom-preview",style:{width:this.previewWidth,height:this.previewHeight},tabIndex:-1},v.createElement("div",{className:"zoom-value"},`${this.zoomValue}x`),v.createElement("div",{className:"x-3deye-player__zoomable"}))))))}}Object.defineProperty(Nt,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:ut});const It=!!navigator.platform&&/iPad|iPhone|iPod/.test(navigator.platform),Vt=new URLSearchParams(location.search.toLowerCase()),Ht=Vt.has("dash")||Vt.has("dvr");class At extends v.Component{constructor(e,t){super(e,t),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"videoElementRef",{enumerable:!0,configurable:!0,writable:!0,value:v.createRef()}),Object.defineProperty(this,"containerRef",{enumerable:!0,configurable:!0,writable:!0,value:v.createRef()}),Object.defineProperty(this,"resizeObserver",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"controller",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"adapter",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"videoElementKey",{enumerable:!0,configurable:!0,writable:!0,value:1}),Object.defineProperty(this,"safariFixData",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"onMouseDown",{enumerable:!0,configurable:!0,writable:!0,value:e=>{e.currentTarget===e.target&&0===e.button&&this.props.onMouseDown&&this.props.onMouseDown(e)}}),S(this,{videoElementKey:j});const{startTime:i,endTime:r,clip:a,camera:n}=e,s=Ht||this.props.disableWebRtc;this.controller=new pt({camera:n,startTime:i,endTime:r,clip:a,archivesStore:this.context.archives,behaviors:{archive:e=>new it(e,this.video),DVR:e=>!("MediaSource"in window)&&It?new rt(e,this.video):new nt(e,Ht,this.video),WebRTC:s?null:e=>new ct(e)}})}get video(){return this.videoElementRef.current}componentDidMount(){this.adapter=new Xe(this.video,this.controller),Je&&this.disposables.push(Ge((()=>this.controller.mode),!0).pipe(K()).subscribe((([e])=>{"WebRTC"===e&&T((()=>{this.videoElementKey++,this.safariFixData={restoreAt:this.controller.seekTime},this.controller.detach()}))}))),this.resizeObserver=new V((e=>{for(const t of e){const e=t.contentRect.width,i=t.contentRect.height;T((()=>{this.controller.width=e,this.controller.height=i}))}})),this.resizeObserver.observe(this.containerRef.current)}componentWillUnmount(){this.disposables.forEach((e=>{e instanceof c?e.closed||e.unsubscribe():e()})),this.adapter.dispose(),this.controller.detach(),this.resizeObserver&&this.resizeObserver.disconnect(),this.resizeObserver=null}componentDidUpdate(e){e.camera!==this.props.camera?(this.controller.setCameraAndStartTime(this.props.camera,this.props.startTime||null),this.controller.setTransform(null)):(!e.startTime&&this.props.startTime||e.startTime&&!this.props.startTime||e.startTime&&this.props.startTime&&+e.startTime!=+this.props.startTime)&&this.controller.setStartTime(this.props.startTime||null)}render(){return v.createElement(N,null,(()=>{var e;const{muted:t,paused:i}=this.controller,{id:r=`player-${this.controller.id}`,className:a,camera:n,startTime:s,endTime:o,clip:l,controls:c,onDoubleClick:u,onMouseDown:h,onAuxClick:d,hideCameraTitle:m,disableWebRtc:p,...b}=this.props,f=le(a,"x-3deye-player",{"x-3deye-player--paused":i});return w((()=>{this.safariFixData&&(this.adapter.dispose(),this.safariFixData.restoreAt&&this.controller.setStartTime(this.safariFixData.restoreAt),this.adapter=new Xe(this.video,this.controller),this.safariFixData=null)}),[this.videoElementKey]),v.createElement("div",{ref:this.containerRef,id:r,className:f,...b},v.createElement("div",{className:"x-3deye-player__zoomable-wrapper"},v.createElement("div",{className:"x-3deye-player__zoomable",style:{transformOrigin:"0 0",transform:null!==(e=this.controller.transform)&&void 0!==e?e:void 0}},v.createElement("video",{key:this.videoElementKey,autoPlay:!0,crossOrigin:"anonymous",playsInline:!0,ref:this.videoElementRef,muted:t,style:{objectFit:this.controller.videoResizeMode}}))),v.createElement(ut.Provider,{value:this.controller},v.createElement(Nt,{onDoubleClick:u,onAuxClick:d,onMouseDown:this.onMouseDown,width:this.controller.width,height:this.controller.height,hideCameraTitle:m},c)))}))}}Object.defineProperty(At,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:qe});const Ut=jt({viewBox:"-6 -6 24 24",svg:v.createElement("path",{d:"M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"})});Ut.displayName="JamCloseIcon";const Wt=v.forwardRef((({children:e,className:t,...i},r)=>(t=t?`x-3deye-player__control ${t}`:"x-3deye-player__control",v.createElement(gt,{ref:r,className:t,...i},e))));Wt.displayName="Control";const _t=({onClick:e})=>e?v.createElement(Wt,{className:"x-3deye-player__control-close",onClick:e,title:Be.t("playerTools.closePlayer")},v.createElement(Ut,{size:24,color:"currentColor"})):null;_t.displayName="CloseControl";const $t="x-3deye-player__controls--spaced",Bt="x-3deye-player__controls--compact",Ft="x-3deye-player__control--reflowed";class qt extends v.Component{constructor(){super(...arguments),Object.defineProperty(this,"containerRef",{enumerable:!0,configurable:!0,writable:!0,value:v.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(Bt)&&(i.classList.remove(Bt),Array.from(i.children).filter((e=>e.classList.contains(Ft))).forEach((e=>{e.style.position="",e.style.bottom="",e.style.right="",e.classList.remove(Ft)}))),i.classList.contains($t)&&(i.classList.remove($t),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($t);for(const e of i.querySelectorAll(".spacer"))null===(t=e.previousElementSibling)||void 0===t||t.classList.add("before-spacer");return}i.classList.add(Bt);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(Ft),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=R((()=>this.player.width),this.reflow))}componentWillUnmount(){this.mutationObserver.disconnect(),this.resizeReactionDisposer()}render(){return v.createElement("div",{ref:this.containerRef,className:"x-3deye-player__controls",style:this.props.style},this.props.children)}}Object.defineProperty(qt,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:ut}),Object.defineProperty(qt,"Spacer",{enumerable:!0,configurable:!0,writable:!0,value:()=>v.createElement("div",{className:"spacer"})});const Jt=jt({viewBox:"0 0 24 24",svg:v.createElement(v.Fragment,null,v.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),v.createElement("path",{d:"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"}))});Jt.displayName="FullscreenIcon";const Zt=({onClick:e})=>e?v.createElement(Wt,{onClick:e,title:Be.t("playerTools.fullScreen")},v.createElement(Jt,{size:24,color:"currentColor"})):null;Zt.displayName="FullscreenControl";const Yt=new Map,Gt="en";function Xt(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}class Kt extends v.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)),v.createElement("div",{style:{position:"absolute",height:34,lineHeight:"34px",top:"calc(50% - 17px)",overflow:"hidden"}},v.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)=>v.createElement("div",{key:i},this.props.format(e+((i-s)%a+a)%a))))))}}Kt.defaultProps={format:e=>e};class Qt extends v.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",h);Math.abs(e-i)>=5&&(this.setState({dragging:!0}),this.ignoreClick=!0,document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",h),document.addEventListener("mousemove",o),document.addEventListener("mouseup",l),this.tracker=window.setInterval(s,100))},h=()=>{document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",h),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",h)},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,h=o;for(;this.getCellValue(h,u,i,r)!==t;)h=((h+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 v.createElement("div",{style:{width:100,position:"relative",userSelect:"none",MozUserSelect:"none"},onWheel:this.onWheel,onMouseDown:this.onMouseDown,onTouchStart:({targetTouches:e})=>console.log(e)},v.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"}},v.createElement("div",{style:{position:"absolute",height:34,top:76,left:0,right:0,borderTop:"1px solid #aaa",borderBottom:"1px solid #aaa"}})),v.createElement("div",{style:{height:187}},v.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)=>v.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)))))),v.createElement(Kt,Object.assign({offset:e,transition:i},this.props)))}}!
|
|
2
2
|
/*! *****************************************************************************
|
|
3
3
|
Copyright (c) Microsoft Corporation. All rights reserved.
|
|
4
4
|
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
@@ -13,4 +13,4 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
|
|
|
13
13
|
See the Apache Version 2.0 License for specific language governing permissions
|
|
14
14
|
and limitations under the License.
|
|
15
15
|
***************************************************************************** */
|
|
16
|
-
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),Xt("design:type",Function),Xt("design:paramtypes",[]),Xt("design:returntype",void 0)],Qt.prototype,"finishRotation",null);const ei=e=>e.toString().padStart(2,"0");class ti extends v.Component{constructor(){super(...arguments),this.formatMonth=e=>{const t=Yt.get(this.props.locale||Gt);return ve(new Date(2019,e,1),"MMM",{locale:t})},this.onYearChange=e=>{const{maxDate:t,minDate:i,date:r,onChange:a}=this.props;let n=fe(r,e);ge(n,t)&&(n=ye(n,0),n=we(n,1),ge(n,t)&&(n=Ce(n))),Ee(n,i)&&(n=ye(n,11),n=we(n,Pe(n)),Ee(n,i)&&(n=ke(n))),a(n)},this.onMonthChange=e=>{const{maxDate:t,minDate:i,date:r,onChange:a}=this.props;let n=ye(r,e);ge(n,t)&&(n=we(n,1),n=Ce(n)),Ee(n,i)&&(n=ke(we(n,Pe(n)))),a(n)},this.onDayChange=e=>{const{date:t,onChange:i,maxDate:r,minDate:a}=this.props;let n=we(t,e);ge(n,r)&&(n=Ce(n)),Ee(n,a)&&(n=ke(n)),i(n)},this.getYearParams=()=>{const{maxDate:e,minDate:t}=this.props,i=Re(t),r=Re(e);return{from:i,to:r,min:i,max:r}},this.getMonthParams=()=>{const{maxDate:e,minDate:t,date:i}=this.props;let r,a;Oe(i,t)&&(a=xe(t)),Oe(i,e)&&(r=xe(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=Pe(i);let a,n;Te(i,t)&&(a=Se(t)),Te(i,e)&&(n=Se(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 v.createElement("div",{style:{perspective:1200,display:"flex",justifyContent:"center"}},v.createElement(Qt,Object.assign({onChange:this.onYearChange,value:Re(e)},this.getYearParams())),v.createElement(Qt,Object.assign({onChange:this.onMonthChange,value:xe(e),format:this.formatMonth},this.getMonthParams())),v.createElement(Qt,Object.assign({onChange:this.onDayChange,value:Se(e),format:ei},this.getDayParams())))}}const ii=e=>e.toString().padStart(2,"0");class ri extends v.Component{constructor(){super(...arguments),this.onHoursChange=e=>{const{maxDate:t,minDate:i,date:r}=this.props;let a=je(r,e);ge(a,t)&&(a=Me(a,0),a=De(a,0)),Ee(a,i)&&(a=Me(a,59),a=De(a,59)),this.props.onChange(a)},this.onMinutesChange=e=>{const{maxDate:t,minDate:i,date:r,onChange:a}=this.props;let n=Me(r,e);ge(n,t)&&(n=De(n,0)),Ee(n,i)&&(n=De(n,59)),a(n)},this.onSecondsChange=e=>{this.props.onChange(De(this.props.date,e))},this.getHoursParams=()=>{const{maxDate:e,minDate:t,date:i}=this.props;let r,a;ze(i,t)&&(a=Le(t)),ze(i,e)&&(r=Le(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;Ne(i,t)&&(a=Ie(t)),Ne(i,e)&&(r=Ie(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;Ve(i,t)&&(r=Ae(t)),Ve(i,e)&&(a=Ae(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 v.createElement("div",null,v.createElement("div",null,v.createElement("div",null,v.createElement("div",{style:{perspective:1200,display:"flex",justifyContent:"center"}},v.createElement(Qt,Object.assign({onChange:this.onHoursChange,value:Le(e),format:ii},this.getHoursParams())),v.createElement(Qt,Object.assign({onChange:this.onMinutesChange,value:Ie(e),format:ii},this.getMinutesParams())),v.createElement(Qt,Object.assign({onChange:this.onSecondsChange,value:Ae(e),format:ii},this.getSecondsParams()))))))}}class ai extends v.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(){const{date:e,minDate:t,maxDate:i,mode:r,dateTitle:a,timeTitle:n}=this.props;return Ee(e,t)||ge(e,i)?(console.error("incorrect params. date must be within given period"),null):v.createElement("div",{style:{width:300,backgroundColor:"white"}},v.createElement("div",{style:{display:"flex",fontSize:"1.6em",fontFamily:"Arial, Helvetica, sans-serif",textAlign:"center"}},v.createElement("div",{style:{flex:1,color:"date"===r?"#0091ff":"black"},onClick:this.requestDateMode},a),v.createElement("div",{style:{flex:1,color:"time"===r?"#0091ff":"black"},onClick:this.requestTimeMode},n)),"date"===r?v.createElement(ti,{minDate:t,maxDate:i,onChange:this.onChange,date:e}):v.createElement(ri,{minDate:t,maxDate:i,onChange:this.onChange,date:e}))}}ai.defaultProps={dateTitle:"Date",timeTitle:"Time"};const ni=[{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"}],si=L((()=>{const[e,t]=g(!1),i=f(ut);if("WebRTC"===i.mode)return null;let r=ni.findIndex((e=>e.value===i.playbackRate));-1===r&&(r=1);const a=v.createElement(_t,{className:"control-playbackrate",onClick:()=>t(!e),title:Be.t("playerTools.playbackRate")},ni[r].name);return v.createElement(Rt,{target:a,opened:e,onCloseRequest:()=>t(!1)},v.createElement(Qt,{from:0,to:ni.length-1,min:0,max:ni.length-1,format:e=>ni[e].name,onChange:e=>{e in ni?i.setPlaybackRate(ni[e].value):console.warn("got invalid value from reel, ignoring")},value:r}))}));si.displayName="PlaybackRateControl";const oi=jt({viewBox:"-4 -3 24 24",svg:v.createElement("path",{d:"M13.82 9.523a.976.976 0 0 0-.324-1.363L3.574 2.128a1.031 1.031 0 0 0-.535-.149c-.56 0-1.013.443-1.013.99V15.03c0 .185.053.366.153.523.296.464.92.606 1.395.317l9.922-6.031c.131-.08.243-.189.325-.317zm.746 1.997l-9.921 6.031c-1.425.867-3.3.44-4.186-.951A2.918 2.918 0 0 1 0 15.03V2.97C0 1.329 1.36 0 3.04 0c.567 0 1.123.155 1.605.448l9.921 6.032c1.425.866 1.862 2.696.975 4.088-.246.386-.58.712-.975.952z"})});oi.displayName="JamPlayIcon";const li=jt({viewBox:"-4 -3 24 24",svg:v.createElement("path",{d:"M2 0h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 2v14h2V2H2zm10-2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 2v14h2V2h-2z"})});li.displayName="JamPauseIcon";const ci=L((()=>{const e=f(ut);return v.createElement(_t,{className:"x-3deye-player__control-playpause",onClick:e.togglePlayback,title:e.paused?Be.t("playerTools.play"):Be.t("playerTools.pause")},e.paused?v.createElement(oi,{size:16}):v.createElement(li,{size:16}))}));ci.displayName="PlayPauseControl";const ui=jt({viewBox:"0 0 24 24",svg:v.createElement("g",null,v.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),v.createElement("path",{d:"M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"}))});ui.displayName="AspectRatioIcon";const hi=jt({viewBox:"0 0 24 24",svg:v.createElement("g",null,v.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),v.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"}))});hi.displayName="SettingsOverscanIcon";const di=L((()=>{const e=f(ut);return v.createElement(_t,{onClick:e.toggleResizeMode,title:e.videoResizeMode===dt.Fit?Be.t("videoResizeMode.fit"):Be.t("videoResizeMode.stretch")},e.videoResizeMode===dt.Fit?v.createElement(ui,{size:16}):v.createElement(hi,{size:16}))}));di.displayName="ResizeModeControl";const mi=jt({viewBox:"-2 -4 24 24",svg:v.createElement("path",{d:"M5.676 5H4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1.676l-.387-1.501A2.002 2.002 0 0 0 12 2H8a2 2 0 0 0-1.937 1.499L5.676 5zm-1.55-2C4.57 1.275 6.136 0 8 0h4a4.002 4.002 0 0 1 3.874 3H16a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h.126zM10 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"})});mi.displayName="JamCameraIcon";class pi extends v.Component{constructor(){super(...arguments),Object.defineProperty(this,"getSnapshot",{enumerable:!0,configurable:!0,writable:!0,value:()=>{const e=document.createElement("canvas"),t=e.getContext("2d");if(e.width=this.player.video.videoWidth,e.height=this.player.video.videoHeight,!t)return;t.drawImage(this.player.video,0,0,e.width,e.height);const i=e.toDataURL("image/jpeg"),r=atob(i.substring("data:image/jpeg;base64,".length)),a=new Uint8Array(r.length);for(let e=0,t=r.length;e<t;++e)a[e]=r.charCodeAt(e);const n=new Blob([a.buffer],{type:"application/octet-stream"}),s=document.createElement("a");s.href=URL.createObjectURL(n);const o=`${this.player.camera.name} ${qe(this.player.currentTime||new Date,"yyyy:MM:dd HH:mm:ss")}`;s.download=`${o}.jpg`,document.body.appendChild(s),s.click(),s.remove()}})}get player(){return this.context}render(){return v.createElement(_t,{onClick:this.getSnapshot,title:Be.t("playerTools.snapshot")},v.createElement(mi,{size:16,color:"currentColor"}))}}Object.defineProperty(pi,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:ut});const bi=jt({viewBox:"-1 -3 24 24",svg:v.createElement("path",{d:"M12 2h-.6a2 2 0 0 0-1.444.617L6.239 6.5H2v5h4.239l3.717 3.883A2 2 0 0 0 11.4 16H12V2zM5.385 4.5L8.51 1.234A4 4 0 0 1 11.401 0H13a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-1.6a4 4 0 0 1-2.889-1.234L5.385 13.5H2a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h3.385zM19.415 9l1.413 1.414a1 1 0 1 1-1.414 1.414L18 10.414l-1.414 1.414a1 1 0 1 1-1.414-1.414L16.586 9l-1.414-1.414a1 1 0 0 1 1.414-1.414L18 7.586l1.414-1.414a1 1 0 1 1 1.414 1.414L19.414 9z"})});bi.displayName="JamVolumeMuteIcon";const vi=jt({viewBox:"-1 -3 24 24",svg:v.createElement("path",{d:"M12 2h-.6a2 2 0 0 0-1.444.617L6.239 6.5H2v5h4.239l3.717 3.883A2 2 0 0 0 11.4 16H12V2zM5.385 4.5L8.51 1.234A4 4 0 0 1 11.401 0H13a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-1.6a4 4 0 0 1-2.889-1.234L5.385 13.5H2a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h3.385zM16 7a1 1 0 0 1 0-2 4 4 0 1 1 0 8 1 1 0 0 1 0-2 2 2 0 1 0 0-4z"})});vi.displayName="JamVolumeDownIcon";const fi=(e,t,i)=>Math.min(Math.max(e,t),i),gi=()=>{},yi=e=>{e.stopPropagation()},wi=L((()=>{const e=f(ut);return v.createElement(_t,{className:"volume-control",title:Be.t("playerTools.volume"),onClick:e.toggleMute,onWheel:t=>{const i=t.deltaY;i&&e.setVolume(fi(e.volume+(i<0?.1:-.1),0,1))}},e.muted?v.createElement(bi,{size:16,color:"currentColor"}):v.createElement(vi,{size:16,color:"currentColor"}),v.createElement("div",{onClick:yi,className:"volume-range"},v.createElement("input",{type:"range",min:0,max:100,value:100*e.volume,onChange:t=>{e.setVolume(Number(t.target.value)/100)}})))}));wi.displayName="VolumeControl";const Ci=L((({onRequestClose:e,onRequestToggleFullscreen:t})=>v.createElement(Ft,null,v.createElement(ci,null),v.createElement(wi,null),v.createElement(si,null),v.createElement(di,null),v.createElement(Ft.Spacer,null),v.createElement(pi,null),v.createElement(Zt,{onClick:t}),v.createElement($t,{onClick:e}))));Ci.displayName="ToolkitPlayerControls";const Ei=L((e=>{var t;const i=null!==(t=f(k))&&void 0!==t?t:R,r=y(null),[a,n]=g(null);w((()=>{var e,t;if(a)return;(null===(e=r.current)||void 0===e?void 0:e.containerRef.current)&&(It?"webkitEnterFullscreen"in((null===(t=r.current)||void 0===t?void 0:t.video)||{})&&n((()=>()=>{var e;const t=null===(e=r.current)||void 0===e?void 0:e.video;t&&("webkitDisplayingFullscreen"in t?t.webkitExitFullscreen():t.webkitEnterFullscreen())})):be.isEnabled&&n((()=>()=>{var e,t;be.isEnabled&&be.toggle(Je?null===(e=r.current)||void 0===e?void 0:e.video:null===(t=r.current)||void 0===t?void 0:t.containerRef.current)})))}));const{cameraId:s,startTime:o,onDoubleClick:l,onMouseDown:c,onRequestClose:u,controls:h=v.createElement(Ci,{onRequestToggleFullscreen:a,onRequestClose:u}),...d}=e;if(!i.cameras.loaded)return v.createElement("div",{...d});const m=s?i.cameras.camerasById.get(s):null;if(!m)return console.warn("can't render player for unknown camera"),v.createElement("div",{...d});const p={hideCameraTitle:!0,camera:m,controls:h,onDoubleClick:l,onMouseDown:c,startTime:o,...d};return v.createElement(Fe.Provider,{value:i},v.createElement(Ht,{ref:r,...p}))}));Ei.displayName="Camera";const Pi=jt({viewBox:"0 0 24 24",svg:v.createElement("g",null,v.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"}),v.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});Pi.displayName="CloseIcon";const ki=jt({viewBox:"0 0 24 24",svg:v.createElement("path",{d:"M7,2l12,11.2l-5.8,0.5l3.3,7.3l-2.2,1l-3.2-7.4L7,18.5V2"})});ki.displayName="CursorIcon";const Ri=e=>e.stopPropagation(),Oi=L((e=>{const t=y(null),i=I((()=>({current:null}))),r=I((()=>({dragging:!1}))),a=y(new o),n=C((e=>{e.persist(),e.stopPropagation(),a.current.next(e)}),[]),l=M((()=>{i.current=null,e.onRequestCancel()})),c=M((()=>{i.current=null,e.onClose()}));return w((()=>{const n=a.current.pipe(Z((a=>{const n=a.clientX,o=a.clientY;r.dragging=!0;const{top:l,left:c}=t.current.getBoundingClientRect();return s(document,"mousemove").pipe(H((t=>{const i=n-c,r=o-l,a=t.clientX-n,s=t.clientY-o,u=(s>=0?r:r+s)/e.height,h=(a>=0?i:i+a)/e.width,d=u+Math.abs(s)/e.height,m=h+Math.abs(a)/e.width;return{top:fi(u,0,1),left:fi(h,0,1),bottom:fi(d,0,1),right:fi(m,0,1)}})),J(s(document,"mouseup").pipe(q((()=>{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]),w((()=>{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]),v.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?v.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:v.createElement(gt,{className:"box-selector-close",onMouseDown:Ri,onClick:c,style:{position:"absolute",top:-10,right:-10,padding:2,width:20,height:20,borderRadius:10}},v.createElement(Pi,{size:16}))):v.createElement("div",{className:"box-selector-select"},v.createElement("div",null,Be.t("selectArea")),v.createElement("div",{className:"box-selector-preview"},v.createElement("div",{className:"box-selector"},v.createElement(ki,{size:16}))),v.createElement(gt,{className:"box-selector-cancel",onClick:l},Be.t("button.cancel"))))})),xi=L((({onSelect:e,onRequestCancel:t,onClose:i})=>{const r=f(ut);return v.createElement(Oi,{width:r.width,height:r.height,onSelect:e,onRequestCancel:t,onClose:i})}));xi.displayName="BoxSelector";const Ti=jt({viewBox:"0 0 24 24",svg:v.createElement(v.Fragment,null,v.createElement("path",{d:"M15.54 5.54L13.77 7.3 12 5.54 10.23 7.3 8.46 5.54 12 2zm2.92 10l-1.76-1.77L18.46 12l-1.76-1.77 1.76-1.77L22 12zm-10 2.92l1.77-1.76L12 18.46l1.77-1.76 1.77 1.76L12 22zm-2.92-10l1.76 1.77L5.54 12l1.76 1.77-1.76 1.77L2 12z"}),v.createElement("circle",{cx:"12",cy:"12",r:"3"}),v.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}))});Ti.displayName="ControlIcon";const Si=jt({viewBox:"0 0 24 24",svg:v.createElement(v.Fragment,null,v.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),v.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"}))});function ji(){const e=f(ut);return!("WebRTC"!==e.mode||!e.camera.isPtz)&&!!(8&e.camera.permissions)}Si.displayName="HomeIcon";const Mi=jt({viewBox:"0 0 79.375 79.375",svg:v.createElement(v.Fragment,null,v.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)"}))});Mi.displayName="TurtleIcon";const Di=He().domain([1,100]).range([0,100]),zi=L((()=>{const e=f(ut),{api:t}=f(Fe),[i,r]=g(50),a=!ji(),n=Math.floor(Di.invert(i));return v.createElement("div",{style:{display:"grid",height:160,gridTemplateColumns:"repeat(3, 1fr) 24px",margin:"auto"}},v.createElement(gt,{disabled:a,onClick:()=>t.cameras.GoHomePtzCamera(e.camera).subscribe(),className:"x-3deye-button--icon",style:{gridRow:2,gridColumn:2,justifySelf:"center",alignSelf:"center",width:36,height:36},title:Be.t("ptzControl.moveCameraHome")},v.createElement(Si,{size:24})),Array.from(Array(8),((i,r)=>{const s=[0,1,2,7,3,6,5,4][r],o=r<3?0:r<5?1:2,l=r<4?r%3:(r+1)%3,c=s%2?[0,0]:[-1*(l-1),-1*(o-1)],u=`rotate(${45*s-135}deg)`,h=(l-1)*n,d=(o-1)*-n,m=s%2?24:16;return v.createElement(gt,{disabled:a,key:r,onClick:()=>t.cameras.MoveCamera(e.camera,h,d,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}},v.createElement(Dt,{style:{transform:u},size:m}))})),v.createElement("div",{style:{gridColumn:"4",gridRow:"1 / span 3",position:"relative"}},v.createElement(vt,{label:"movement speed"},v.createElement("input",{disabled:a,style:{width:160,transform:"rotate(-90deg) translateX(-100%)",transformOrigin:"top left"},type:"range",min:0,max:100,step:5,value:i,onChange:e=>r(+e.target.value)})),v.createElement(Mi,{style:{position:"absolute",bottom:-24}})))}));zi.displayName="RelativePtzControls";const Li=(e,t,i,r)=>fi(Math.floor((e-t)/i*r),0,r-1),Ni=E({value:null,onPointerDown:gi,setCurrentValue:gi,state:{currentIdx:0,currentValue:null,options:[]}});class Ii{constructor(){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}}),z(this,{options:j.ref,setOptions:M})}get currentValue(){return this.options[this.currentIdx]}}const Vi=L((({value:e,onChange:t,children:i})=>{const[r,a]=g(!1),n=y(null),s=P.map(i,(e=>e.props.value))||[],o=I((()=>new Ii));o.setOptions(s);const l=P.count(i);w((()=>{o.setCurrentIdx(s.indexOf(e))}),[e]),w((()=>{var e;if(!r)return;const i=null===(e=n.current)||void 0===e?void 0:e.getBoundingClientRect();if(!i)return;const c=({clientX:e})=>{o.setCurrentIdx(Li(e,i.left,i.width,l))},u=()=>{a(!1),t(s[o.currentIdx])};return document.addEventListener("pointermove",c),document.addEventListener("pointerup",u),()=>{document.removeEventListener("pointermove",c),document.removeEventListener("pointerup",u)}}),[r,l]);return v.createElement(Ni.Provider,{value:{value:e,state:o,onPointerDown:e=>{const t=n.current;if(!t)return;const{left:i,width:r}=t.getBoundingClientRect(),s=Li(e.clientX,i,r,l);s!==o.currentIdx&&o.setCurrentIdx(s),a(!0)},setCurrentValue:e=>{o.setCurrentIdx(s.indexOf(e))}}},v.createElement("div",{className:"segmented-control-wrapper"},v.createElement("div",{role:"radiogroup",ref:n,className:"segmented-control",style:{"--indicator-offset":100*o.currentIdx+"%"}},v.createElement("div",{"aria-hidden":!0,className:le("segmented-control-indicator",{active:r}),style:{width:100/s.length+"%"}},v.createElement("div",{className:"segmented-control-indicator-inner"})),i)))}));Vi.displayName="SegmentedControl";const Ai=L((({value:e,children:t})=>{const i=f(Ni);return v.createElement("button",{role:"radio","aria-checked":i.value===e,tabIndex:0,className:le("segmented-control-button",{current:i.state.currentValue===e}),onPointerDown:i.onPointerDown,onClick:()=>i.setCurrentValue(e)},t)}));Ai.displayName="SegmentedControlOption";const Hi=60,Wi=L((()=>{const e=f(Fe),t=f(ut),i=I((()=>({x:0,y:0,update(e,t){this.x=e,this.y=t}}))),r=ji();w((()=>{const r=Ge((()=>({x:i.x,y:i.y}))).pipe(W(((e,t)=>Math.round(100*e.x)===Math.round(t.x)&&Math.round(100*e.y)===Math.round(t.y))),ee(100),$((i=>i.x||i.y?e.api.cameras.MoveCameraContinuousStart({id:t.camera.id},Math.round(100*i.x),Math.round(100*i.y),0,30):e.api.cameras.MoveCameraContinuousStop({id:t.camera.id})))).subscribe();return()=>r.unsubscribe()}),[]);const[{x:a,y:n},s]=he((()=>({x:0,y:0,config:me.wobbly}))),o=We((({down:e,movement:[t,r]})=>{if(t*t+r*r>Hi*Hi){const e=Math.sqrt(t*t+r*r);t=t/e*Hi,r=r/e*Hi}e?i.update(t/Hi,-r/Hi):i.update(0,0),s.start({x:e?t:0,y:e?r:0,immediate:e})}),{enabled:r});return v.createElement("div",{style:{display:"grid",placeItems:"center",position:"relative",height:160}},v.createElement(gt,{disabled:!r,onClick:()=>e.api.cameras.GoHomePtzCamera(t.camera).subscribe(),className:"x-3deye-button--icon",style:{position:"absolute",right:0,bottom:0,width:36,height:36},title:Be.t("ptzControl.moveCameraHome")},v.createElement(Si,{size:24})),v.createElement("div",{style:{gridRow:"1 / 1",gridColumn:"1 / 1",width:120,height:120,borderRadius:"50%",background:"rgba(255, 255, 255, 0.25)"}}),v.createElement(de.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"}}))}));Wi.displayName="ContinuousPtzControls";const _i=L((()=>{const e=!ji(),t=f(ut),{api:i,notification:r}=f(Fe);return v.createElement(gt,{disabled:e,style:{width:"100%",marginBottom:10,marginTop:10,borderRadius:6},onClick:()=>i.cameras.SetHomePtzCamera(t.camera).subscribe((e=>{e.success?(r.error(Be.t("cameraManager.errorWhileUpdatingHomePositionDescription")),console.error(e.error)):r.success(Be.t("cameraManager.cameraPtzHomeSet"))}))},Be.t("ptzControl.setHome"))}));_i.displayName="SetHome";const $i=jt({viewBox:"0 0 24 24",svg:v.createElement(v.Fragment,null,v.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),v.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"}))});$i.displayName="ZoomOutIcon";const Ui=jt({viewBox:"0 0 24 24",svg:v.createElement(v.Fragment,null,v.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"}),v.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}),v.createElement("path",{d:"M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"}))});Ui.displayName="ZoomInIcon";const Bi=jt({viewBox:"0 0 100 100",svg:v.createElement(v.Fragment,null,v.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"}))});Bi.displayName="RabbitIcon";const qi=He().domain([1,100]).range([0,100]),Fi=L((()=>{const{api:e}=f(Fe),t=f(ut),[i,r]=g(!1),[a,n]=g(Ji.Relative),s=ji(),[o,l]=g(50),c=Math.floor(qi.invert(o));return w((()=>{"WebRTC"!==t.mode&&r(!1)})),s?v.createElement(Rt,{className:"ptz-popover",opened:i,onCloseRequest:()=>r(!1),placement:"top",target:v.createElement(_t,{onClick:()=>r(!i),title:"PTZ"},v.createElement(Ti,{size:24,color:"currentColor"}))},v.createElement("div",null,v.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},v.createElement(gt,{onClick:()=>e.cameras.MoveCamera(t.camera,0,0,-c,0,0).subscribe(),className:"x-3deye-button--icon",style:{gridColumn:"1/1",justifySelf:"start"}},v.createElement($i,{size:24})),v.createElement(gt,{onClick:()=>e.cameras.MoveCamera(t.camera,0,0,c,0,0).subscribe(),className:"x-3deye-button--icon",style:{gridColumn:"2/3",justifySelf:"end"}},v.createElement(Ui,{size:24}))),v.createElement("div",{style:{display:"flex"}},v.createElement(Mi,null),v.createElement(vt,{label:"zoom speed"},v.createElement("input",{style:{flex:1},type:"range",min:0,max:100,step:5,value:o,onChange:e=>l(+e.target.value)})),v.createElement(Bi,null)),a===Ji.Relative?v.createElement(zi,null):v.createElement(Wi,null),v.createElement(_i,null)),v.createElement(Vi,{value:a,onChange:n},v.createElement(Ai,{value:Ji.Relative},"Relative"),v.createElement(Ai,{value:Ji.Continuous},"Continuous"))):null}));var Ji,Zi;!function(e){e[e.Relative=0]="Relative",e[e.Continuous=1]="Continuous"}(Ji||(Ji={})),(Zi={resources:{en:{translation:_e}}})&&Object.assign(Ue,Zi),r(Be.init(Ue));export default Ei;export{xi as BoxSelector,$t as CloseControl,_t as Control,Ft as Controls,Ci as DefaultControls,Zt as FullscreenControl,ci as PlayPauseControl,si as PlaybackRateControl,ut as PlayerContext,Fi as PtzControl,di as ResizeModeControl,pi as SnapshotControl,wi as VolumeControl};
|
|
16
|
+
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),Xt("design:type",Function),Xt("design:paramtypes",[]),Xt("design:returntype",void 0)],Qt.prototype,"finishRotation",null);const ei=e=>e.toString().padStart(2,"0");class ti extends v.Component{constructor(){super(...arguments),this.formatMonth=e=>{const t=Yt.get(this.props.locale||Gt);return ve(new Date(2019,e,1),"MMM",{locale:t})},this.onYearChange=e=>{const{maxDate:t,minDate:i,date:r,onChange:a}=this.props;let n=fe(r,e);ge(n,t)&&(n=ye(n,0),n=we(n,1),ge(n,t)&&(n=Ee(n))),Ce(n,i)&&(n=ye(n,11),n=we(n,Pe(n)),Ce(n,i)&&(n=ke(n))),a(n)},this.onMonthChange=e=>{const{maxDate:t,minDate:i,date:r,onChange:a}=this.props;let n=ye(r,e);ge(n,t)&&(n=we(n,1),n=Ee(n)),Ce(n,i)&&(n=ke(we(n,Pe(n)))),a(n)},this.onDayChange=e=>{const{date:t,onChange:i,maxDate:r,minDate:a}=this.props;let n=we(t,e);ge(n,r)&&(n=Ee(n)),Ce(n,a)&&(n=ke(n)),i(n)},this.getYearParams=()=>{const{maxDate:e,minDate:t}=this.props,i=Oe(t),r=Oe(e);return{from:i,to:r,min:i,max:r}},this.getMonthParams=()=>{const{maxDate:e,minDate:t,date:i}=this.props;let r,a;xe(i,t)&&(a=Re(t)),xe(i,e)&&(r=Re(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=Pe(i);let a,n;Te(i,t)&&(a=Se(t)),Te(i,e)&&(n=Se(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 v.createElement("div",{style:{perspective:1200,display:"flex",justifyContent:"center"}},v.createElement(Qt,Object.assign({onChange:this.onYearChange,value:Oe(e)},this.getYearParams())),v.createElement(Qt,Object.assign({onChange:this.onMonthChange,value:Re(e),format:this.formatMonth},this.getMonthParams())),v.createElement(Qt,Object.assign({onChange:this.onDayChange,value:Se(e),format:ei},this.getDayParams())))}}const ii=e=>e.toString().padStart(2,"0");class ri extends v.Component{constructor(){super(...arguments),this.onHoursChange=e=>{const{maxDate:t,minDate:i,date:r}=this.props;let a=je(r,e);ge(a,t)&&(a=Me(a,0),a=De(a,0)),Ce(a,i)&&(a=Me(a,59),a=De(a,59)),this.props.onChange(a)},this.onMinutesChange=e=>{const{maxDate:t,minDate:i,date:r,onChange:a}=this.props;let n=Me(r,e);ge(n,t)&&(n=De(n,0)),Ce(n,i)&&(n=De(n,59)),a(n)},this.onSecondsChange=e=>{this.props.onChange(De(this.props.date,e))},this.getHoursParams=()=>{const{maxDate:e,minDate:t,date:i}=this.props;let r,a;ze(i,t)&&(a=Le(t)),ze(i,e)&&(r=Le(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;Ne(i,t)&&(a=Ie(t)),Ne(i,e)&&(r=Ie(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;Ve(i,t)&&(r=He(t)),Ve(i,e)&&(a=He(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 v.createElement("div",null,v.createElement("div",null,v.createElement("div",null,v.createElement("div",{style:{perspective:1200,display:"flex",justifyContent:"center"}},v.createElement(Qt,Object.assign({onChange:this.onHoursChange,value:Le(e),format:ii},this.getHoursParams())),v.createElement(Qt,Object.assign({onChange:this.onMinutesChange,value:Ie(e),format:ii},this.getMinutesParams())),v.createElement(Qt,Object.assign({onChange:this.onSecondsChange,value:He(e),format:ii},this.getSecondsParams()))))))}}class ai extends v.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(){const{date:e,minDate:t,maxDate:i,mode:r,dateTitle:a,timeTitle:n}=this.props;return Ce(e,t)||ge(e,i)?(console.error("incorrect params. date must be within given period"),null):v.createElement("div",{style:{width:300,backgroundColor:"white"}},v.createElement("div",{style:{display:"flex",fontSize:"1.6em",fontFamily:"Arial, Helvetica, sans-serif",textAlign:"center"}},v.createElement("div",{style:{flex:1,color:"date"===r?"#0091ff":"black"},onClick:this.requestDateMode},a),v.createElement("div",{style:{flex:1,color:"time"===r?"#0091ff":"black"},onClick:this.requestTimeMode},n)),"date"===r?v.createElement(ti,{minDate:t,maxDate:i,onChange:this.onChange,date:e}):v.createElement(ri,{minDate:t,maxDate:i,onChange:this.onChange,date:e}))}}ai.defaultProps={dateTitle:"Date",timeTitle:"Time"};const ni=[{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"}],si=L((()=>{const[e,t]=g(!1),i=f(ut);if("WebRTC"===i.mode)return null;let r=ni.findIndex((e=>e.value===i.playbackRate));-1===r&&(r=1);const a=v.createElement(Wt,{className:"control-playbackrate",onClick:()=>t(!e),title:Be.t("playerTools.playbackRate")},ni[r].name);return v.createElement(Ot,{target:a,opened:e,onCloseRequest:()=>t(!1)},v.createElement(Qt,{from:0,to:ni.length-1,min:0,max:ni.length-1,format:e=>ni[e].name,onChange:e=>{e in ni?i.setPlaybackRate(ni[e].value):console.warn("got invalid value from reel, ignoring")},value:r}))}));si.displayName="PlaybackRateControl";const oi=jt({viewBox:"-4 -3 24 24",svg:v.createElement("path",{d:"M13.82 9.523a.976.976 0 0 0-.324-1.363L3.574 2.128a1.031 1.031 0 0 0-.535-.149c-.56 0-1.013.443-1.013.99V15.03c0 .185.053.366.153.523.296.464.92.606 1.395.317l9.922-6.031c.131-.08.243-.189.325-.317zm.746 1.997l-9.921 6.031c-1.425.867-3.3.44-4.186-.951A2.918 2.918 0 0 1 0 15.03V2.97C0 1.329 1.36 0 3.04 0c.567 0 1.123.155 1.605.448l9.921 6.032c1.425.866 1.862 2.696.975 4.088-.246.386-.58.712-.975.952z"})});oi.displayName="JamPlayIcon";const li=jt({viewBox:"-4 -3 24 24",svg:v.createElement("path",{d:"M2 0h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 2v14h2V2H2zm10-2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 2v14h2V2h-2z"})});li.displayName="JamPauseIcon";const ci=L((()=>{const e=f(ut);return v.createElement(Wt,{className:"x-3deye-player__control-playpause",onClick:e.togglePlayback,title:e.paused?Be.t("playerTools.play"):Be.t("playerTools.pause")},e.paused?v.createElement(oi,{size:16}):v.createElement(li,{size:16}))}));ci.displayName="PlayPauseControl";const ui=jt({viewBox:"0 0 24 24",svg:v.createElement("g",null,v.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),v.createElement("path",{d:"M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"}))});ui.displayName="AspectRatioIcon";const hi=jt({viewBox:"0 0 24 24",svg:v.createElement("g",null,v.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),v.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"}))});hi.displayName="SettingsOverscanIcon";const di=L((()=>{const e=f(ut);return v.createElement(Wt,{onClick:e.toggleResizeMode,title:e.videoResizeMode===dt.Fit?Be.t("videoResizeMode.fit"):Be.t("videoResizeMode.stretch")},e.videoResizeMode===dt.Fit?v.createElement(ui,{size:16}):v.createElement(hi,{size:16}))}));di.displayName="ResizeModeControl";const mi=jt({viewBox:"-2 -4 24 24",svg:v.createElement("path",{d:"M5.676 5H4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1.676l-.387-1.501A2.002 2.002 0 0 0 12 2H8a2 2 0 0 0-1.937 1.499L5.676 5zm-1.55-2C4.57 1.275 6.136 0 8 0h4a4.002 4.002 0 0 1 3.874 3H16a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h.126zM10 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"})});mi.displayName="JamCameraIcon";class pi extends v.Component{constructor(){super(...arguments),Object.defineProperty(this,"getSnapshot",{enumerable:!0,configurable:!0,writable:!0,value:()=>{const e=document.createElement("canvas"),t=e.getContext("2d");if(e.width=this.player.video.videoWidth,e.height=this.player.video.videoHeight,!t)return;t.drawImage(this.player.video,0,0,e.width,e.height);const i=e.toDataURL("image/jpeg"),r=atob(i.substring("data:image/jpeg;base64,".length)),a=new Uint8Array(r.length);for(let e=0,t=r.length;e<t;++e)a[e]=r.charCodeAt(e);const n=new Blob([a.buffer],{type:"application/octet-stream"}),s=document.createElement("a");s.href=URL.createObjectURL(n);const o=`${this.player.camera.name} ${Fe(this.player.currentTime||new Date,"yyyy:MM:dd HH:mm:ss")}`;s.download=`${o}.jpg`,document.body.appendChild(s),s.click(),s.remove()}})}get player(){return this.context}render(){return v.createElement(Wt,{onClick:this.getSnapshot,title:Be.t("playerTools.snapshot")},v.createElement(mi,{size:16,color:"currentColor"}))}}Object.defineProperty(pi,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:ut});const bi=jt({viewBox:"-1 -3 24 24",svg:v.createElement("path",{d:"M12 2h-.6a2 2 0 0 0-1.444.617L6.239 6.5H2v5h4.239l3.717 3.883A2 2 0 0 0 11.4 16H12V2zM5.385 4.5L8.51 1.234A4 4 0 0 1 11.401 0H13a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-1.6a4 4 0 0 1-2.889-1.234L5.385 13.5H2a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h3.385zM19.415 9l1.413 1.414a1 1 0 1 1-1.414 1.414L18 10.414l-1.414 1.414a1 1 0 1 1-1.414-1.414L16.586 9l-1.414-1.414a1 1 0 0 1 1.414-1.414L18 7.586l1.414-1.414a1 1 0 1 1 1.414 1.414L19.414 9z"})});bi.displayName="JamVolumeMuteIcon";const vi=jt({viewBox:"-1 -3 24 24",svg:v.createElement("path",{d:"M12 2h-.6a2 2 0 0 0-1.444.617L6.239 6.5H2v5h4.239l3.717 3.883A2 2 0 0 0 11.4 16H12V2zM5.385 4.5L8.51 1.234A4 4 0 0 1 11.401 0H13a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-1.6a4 4 0 0 1-2.889-1.234L5.385 13.5H2a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h3.385zM16 7a1 1 0 0 1 0-2 4 4 0 1 1 0 8 1 1 0 0 1 0-2 2 2 0 1 0 0-4z"})});vi.displayName="JamVolumeDownIcon";const fi=(e,t,i)=>Math.min(Math.max(e,t),i),gi=()=>{},yi=e=>{e.stopPropagation()},wi=L((()=>{const e=f(ut);return v.createElement(Wt,{className:"volume-control",title:Be.t("playerTools.volume"),onClick:e.toggleMute,onWheel:t=>{const i=t.deltaY;i&&e.setVolume(fi(e.volume+(i<0?.1:-.1),0,1))}},e.muted?v.createElement(bi,{size:16,color:"currentColor"}):v.createElement(vi,{size:16,color:"currentColor"}),v.createElement("div",{onClick:yi,className:"volume-range"},v.createElement("input",{type:"range",min:0,max:100,value:100*e.volume,onChange:t=>{e.setVolume(Number(t.target.value)/100)}})))}));wi.displayName="VolumeControl";const Ei=L((({onRequestClose:e,onRequestToggleFullscreen:t})=>v.createElement(qt,null,v.createElement(ci,null),v.createElement(wi,null),v.createElement(si,null),v.createElement(di,null),v.createElement(qt.Spacer,null),v.createElement(pi,null),v.createElement(Zt,{onClick:t}),v.createElement(_t,{onClick:e}))));Ei.displayName="ToolkitPlayerControls";const Ci=L((e=>{var t;const i=null!==(t=f(k))&&void 0!==t?t:O,r=y(null),[a,n]=g(null);w((()=>{var e,t;if(a)return;(null===(e=r.current)||void 0===e?void 0:e.containerRef.current)&&(It?"webkitEnterFullscreen"in((null===(t=r.current)||void 0===t?void 0:t.video)||{})&&n((()=>()=>{var e;const t=null===(e=r.current)||void 0===e?void 0:e.video;t&&("webkitDisplayingFullscreen"in t?t.webkitExitFullscreen():t.webkitEnterFullscreen())})):be.isEnabled&&n((()=>()=>{var e,t;be.isEnabled&&be.toggle(Je?null===(e=r.current)||void 0===e?void 0:e.video:null===(t=r.current)||void 0===t?void 0:t.containerRef.current)})))}));const{cameraId:s,startTime:o,onDoubleClick:l,onMouseDown:c,onRequestClose:u,controls:h=v.createElement(Ei,{onRequestToggleFullscreen:a,onRequestClose:u}),...d}=e;if(!i.cameras.loaded)return v.createElement("div",{...d});const m=s?i.cameras.camerasById.get(s):null;if(!m)return console.warn("can't render player for unknown camera"),v.createElement("div",{...d});const p={hideCameraTitle:!0,camera:m,controls:h,onDoubleClick:l,onMouseDown:c,startTime:o,...d};return v.createElement(qe.Provider,{value:i},v.createElement(At,{ref:r,...p}))}));Ci.displayName="Camera";const Pi=jt({viewBox:"0 0 24 24",svg:v.createElement("g",null,v.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"}),v.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});Pi.displayName="CloseIcon";const ki=jt({viewBox:"0 0 24 24",svg:v.createElement("path",{d:"M7,2l12,11.2l-5.8,0.5l3.3,7.3l-2.2,1l-3.2-7.4L7,18.5V2"})});ki.displayName="CursorIcon";const Oi=e=>e.stopPropagation(),xi=L((e=>{const t=y(null),i=I((()=>({current:null}))),r=I((()=>({dragging:!1}))),a=y(new o),n=E((e=>{e.persist(),e.stopPropagation(),a.current.next(e)}),[]),l=M((()=>{i.current=null,e.onRequestCancel()})),c=M((()=>{i.current=null,e.onClose()}));return w((()=>{const n=a.current.pipe(Q((a=>{const n=a.clientX,o=a.clientY;r.dragging=!0;const{top:l,left:c}=t.current.getBoundingClientRect();return s(document,"mousemove").pipe(A((t=>{const i=n-c,r=o-l,a=t.clientX-n,s=t.clientY-o,u=(s>=0?r:r+s)/e.height,h=(a>=0?i:i+a)/e.width,d=u+Math.abs(s)/e.height,m=h+Math.abs(a)/e.width;return{top:fi(u,0,1),left:fi(h,0,1),bottom:fi(d,0,1),right:fi(m,0,1)}})),J(s(document,"mouseup").pipe(F((()=>{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]),w((()=>{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]),v.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?v.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:v.createElement(gt,{className:"box-selector-close",onMouseDown:Oi,onClick:c,style:{position:"absolute",top:-10,right:-10,padding:2,width:20,height:20,borderRadius:10}},v.createElement(Pi,{size:16}))):v.createElement("div",{className:"box-selector-select"},v.createElement("div",null,Be.t("selectArea")),v.createElement("div",{className:"box-selector-preview"},v.createElement("div",{className:"box-selector"},v.createElement(ki,{size:16}))),v.createElement(gt,{className:"box-selector-cancel",onClick:l},Be.t("button.cancel"))))})),Ri=L((({onSelect:e,onRequestCancel:t,onClose:i})=>{const r=f(ut);return v.createElement(xi,{width:r.width,height:r.height,onSelect:e,onRequestCancel:t,onClose:i})}));Ri.displayName="BoxSelector";class Ti{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)}}),S(this,{name:j,streamUrl:j,dashStreamUrl:j,enabled:j,isMicEnabled:j,state:j,pin:j,webRtcUrl:j,permissions:j,isOnline:x,update:M}),this.update(e)}get isOnline(){return this.enabled&&"Started"===this.state}get supportsWebRTC(){return!!this.webRtcUrl}}const Si=jt({viewBox:"0 0 24 24",svg:v.createElement(v.Fragment,null,v.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),v.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"}))});function ji(){const e=f(ut);return!("WebRTC"!==e.mode||!e.camera.isPtz)&&!!(8&e.camera.permissions)}Si.displayName="HomeIcon";const Mi=jt({viewBox:"0 0 79.375 79.375",svg:v.createElement(v.Fragment,null,v.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)"}))});Mi.displayName="TurtleIcon";const Di=Ae().domain([1,100]).range([0,100]),zi=L((({movementSpeed:e,setMovementSpeed:t})=>{const i=f(ut),{api:r}=f(qe),a=!ji(),n=Math.floor(Di.invert(e));return v.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr) 24px",flex:1}},v.createElement(gt,{disabled:a,onClick:()=>r.cameras.GoHomePtzCamera(i.camera).subscribe(),className:"x-3deye-button--icon",style:{gridRow:2,gridColumn:2,justifySelf:"center",alignSelf:"center",width:36,height:36},title:Be.t("ptzControl.moveCameraHome")},v.createElement(Si,{size:24})),Array.from(Array(8),((e,t)=>{const s=[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=s%2?[0,0]:[-1*(l-1),-1*(o-1)],u=`rotate(${45*s-135}deg)`,h=(l-1)*n,d=(o-1)*-n,m=s%2?24:16;return v.createElement(gt,{disabled:a,key:t,onClick:()=>r.cameras.MoveCamera(i.camera,h,d,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}},v.createElement(Dt,{style:{transform:u},size:m}))})),v.createElement("div",{style:{gridColumn:"4",gridRow:"1 / span 3",position:"relative"}},v.createElement("div",{style:{position:"absolute",top:0,bottom:0,left:0,aspectRatio:"1/1"}},v.createElement(vt,{label:"movement speed"},v.createElement("input",{disabled:a,style:{width:"100%",transform:"rotate(-90deg) translateX(-100%)",transformOrigin:"top left"},type:"range",min:0,max:100,step:5,value:e,onChange:e=>t(+e.target.value)}))),v.createElement(Mi,{style:{position:"absolute",bottom:-24,left:0}})))}));zi.displayName="RelativePtzControls";const Li=(e,t,i,r)=>fi(Math.floor((e-t)/i*r),0,r-1),Ni=C({value:null,onPointerDown:gi,setCurrentValue:gi,state:{currentIdx:0,currentValue:null,options:[]}});class Ii{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,S(this,{currentIdx:j,options:j.ref,currentValue:x,setCurrentIdx:M,setOptions:M})}get currentValue(){return this.options[this.currentIdx]}}const Vi=L((({value:e,onChange:t,children:i,style:r})=>{const[a,n]=g(!1),s=y(null),o=P.map(i,(e=>null==e?void 0:e.props.value))||[],l=I((()=>new Ii(o.indexOf(e))));l.setOptions(o);const c=P.count(i);w((()=>{l.setCurrentIdx(o.indexOf(e))}),[e]),w((()=>{var e;if(!a)return;const i=null===(e=s.current)||void 0===e?void 0:e.getBoundingClientRect();if(!i)return;const r=({clientX:e})=>{l.setCurrentIdx(Li(e,i.left,i.width,c))},u=()=>{n(!1),t(o[l.currentIdx])};return document.addEventListener("pointermove",r),document.addEventListener("pointerup",u),()=>{document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",u)}}),[a,c]);return v.createElement(Ni.Provider,{value:{value:e,state:l,onPointerDown:e=>{const t=s.current;if(!t)return;const{left:i,width:r}=t.getBoundingClientRect(),a=Li(e.clientX,i,r,c);a!==l.currentIdx&&l.setCurrentIdx(a),n(!0)},setCurrentValue:e=>{l.setCurrentIdx(o.indexOf(e))}}},v.createElement("div",{className:"segmented-control-wrapper",style:r},v.createElement("div",{role:"radiogroup",ref:s,className:"segmented-control",style:{"--indicator-offset":100*l.currentIdx+"%"}},v.createElement("div",{"aria-hidden":!0,className:le("segmented-control-indicator",{active:a}),style:{width:100/o.length+"%"}},v.createElement("div",{className:"segmented-control-indicator-inner"})),i)))}));Vi.displayName="SegmentedControl";const Hi=L((({value:e,children:t})=>{const i=f(Ni);return v.createElement("button",{role:"radio","aria-checked":i.state.currentValue===e,tabIndex:0,className:le("segmented-control-button",{current:i.state.currentValue===e}),onPointerDown:i.onPointerDown,onClick:()=>i.setCurrentValue(e)},t)}));Hi.displayName="SegmentedControlOption";const Ai=60,Ui=L((()=>{const e=f(qe),t=f(ut),i=I((()=>({x:0,y:0,update(e,t){this.x=e,this.y=t}}))),r=ji();w((()=>{const r=Ge((()=>({x:i.x,y:i.y}))).pipe(U(((e,t)=>Math.round(100*e.x)===Math.round(t.x)&&Math.round(100*e.y)===Math.round(t.y))),ee(100),_((i=>i.x||i.y?e.api.cameras.MoveCameraContinuousStart({id:t.camera.id},Math.round(100*i.x),Math.round(100*i.y),0,30):e.api.cameras.MoveCameraContinuousStop({id:t.camera.id})))).subscribe();return()=>r.unsubscribe()}),[]);const[{x:a,y:n},s]=he((()=>({x:0,y:0,config:me.wobbly}))),o=Ue((({down:e,movement:[t,r]})=>{if(t*t+r*r>Ai*Ai){const e=Math.sqrt(t*t+r*r);t=t/e*Ai,r=r/e*Ai}e?i.update(t/Ai,-r/Ai):i.update(0,0),s.start({x:e?t:0,y:e?r:0,immediate:e})}),{enabled:r});return v.createElement("div",{style:{display:"grid",placeItems:"center",position:"relative",flex:1}},v.createElement("div",{style:{gridRow:"1 / 1",gridColumn:"1 / 1",width:120,height:120,borderRadius:"50%",background:"rgba(255, 255, 255, 0.25)"}}),v.createElement(de.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"}}))}));Ui.displayName="ContinuousPtzControls";const Wi=jt({viewBox:"0 0 24 24",svg:v.createElement(v.Fragment,null,v.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),v.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"}),v.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"}),v.createElement("path",{d:"m16 14-4 4-4-4 1.41-1.41L11 14.17v-4.15l2-.02v4.17l1.59-1.59z"}))});Wi.displayName="HomeSaveIcon";const _i=L((()=>{const e=!ji(),t=f(ut),{api:i,notification:r}=f(qe);return v.createElement(gt,{disabled:e,className:"x-3deye-button--icon",style:{width:36,height:36},title:Be.t("ptzControl.setHome"),onClick:()=>i.cameras.SetHomePtzCamera(t.camera).subscribe((e=>{e.success?r.success(Be.t("cameraManager.cameraPtzHomeSet")):(r.error(Be.t("cameraManager.errorWhileUpdatingHomePositionDescription")),console.error(e.error))}))},v.createElement(Wi,null))}));_i.displayName="SetHome";const $i=jt({viewBox:"0 0 24 24",svg:v.createElement(v.Fragment,null,v.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),v.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"}))});$i.displayName="ZoomOutIcon";const Bi=jt({viewBox:"0 0 24 24",svg:v.createElement(v.Fragment,null,v.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"}),v.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}),v.createElement("path",{d:"M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"}))});Bi.displayName="ZoomInIcon";const Fi=jt({viewBox:"0 0 100 100",svg:v.createElement(v.Fragment,null,v.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"}))});Fi.displayName="RabbitIcon";const qi=L((()=>{const e=!ji(),t=f(ut),{api:i}=f(qe);return v.createElement(gt,{disabled:e,className:"x-3deye-button--icon",style:{width:36,height:36},title:Be.t("ptzControl.moveCameraHome"),onClick:()=>i.cameras.GoHomePtzCamera(t.camera).subscribe()},v.createElement(Si,null))}));qi.displayName="GoHome";const Ji=Ae().domain([1,100]).range([0,100]),Zi=L((({style:e})=>{const{api:t}=f(qe),i=f(ut),[r,a]=g(Yi.Relative),[n,s]=g(50),[o,l]=g(50),c=Math.floor(Ji.invert(n)),u=!ji();return v.createElement("div",{style:{display:"flex",flexDirection:"column",...e}},v.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},v.createElement(gt,{disabled:u,onClick:()=>t.cameras.MoveCamera(i.camera,0,0,-c,0,0).subscribe(),className:"x-3deye-button--icon",style:{gridColumn:"1/1",justifySelf:"start"}},v.createElement($i,{size:24})),v.createElement(gt,{disabled:u,onClick:()=>t.cameras.MoveCamera(i.camera,0,0,c,0,0).subscribe(),className:"x-3deye-button--icon",style:{gridColumn:"2/3",justifySelf:"end"}},v.createElement(Bi,{size:24}))),v.createElement("div",{style:{display:"flex"}},v.createElement(Mi,null),v.createElement(vt,{label:"zoom speed"},v.createElement("input",{disabled:u,style:{flex:1},type:"range",min:0,max:100,step:5,value:n,onChange:e=>s(+e.target.value)})),v.createElement(Fi,null)),r===Yi.Relative?v.createElement(zi,{movementSpeed:o,setMovementSpeed:l}):v.createElement(Ui,null),v.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},v.createElement(_i,null),r===Yi.Continuous&&v.createElement(qi,null)),v.createElement(Vi,{value:r,onChange:a},v.createElement(Hi,{value:Yi.Relative},"Relative"),v.createElement(Hi,{value:Yi.Continuous},"Continuous")))}));var Yi,Gi;!function(e){e[e.Relative=0]="Relative",e[e.Continuous=1]="Continuous"}(Yi||(Yi={})),(Gi={resources:{en:{translation:We}}})&&Object.assign($e,Gi),r(Be.init($e));export{Ri as BoxSelector,Ti as Camera,_t as CloseControl,Wt as Control,qt as Controls,Ei as DefaultControls,Zt as FullscreenControl,ci as PlayPauseControl,si as PlaybackRateControl,ut as PlayerContext,Zi as PtzControls,di as ResizeModeControl,pi as SnapshotControl,wi as VolumeControl,Ci as default};
|