@3deye-toolkit/react-camera 0.0.1-alpha.8 → 0.0.2
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 +757 -321
- package/dist/react-camera.d.ts +549 -0
- package/dist/react-camera.js +16 -0
- package/dist/tsdoc-metadata.json +11 -0
- package/package.json +39 -31
- package/dist/camera.js +0 -16
package/dist/camera.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import{__rest as e,__decorate as t,__metadata as s}from"tslib";import i,{useRef as n,useCallback as r,useEffect as a,useContext as o,createElement as l}from"react";import{app as h}from"@3deye-toolkit/core";import{observer as c,Observer as p}from"mobx-react";import m from"screenfull";import d from"resize-observer-polyfill";import{Subject as u,fromEvent as v,merge as g,Subscription as f,Observable as y,empty as b,of as E,throwError as z,timer as k,TimeoutError as w,interval as C,noop as M}from"rxjs";import{observer as x,useObservable as T}from"mobx-react-lite";import{flatMap as R,map as S,takeUntil as H,tap as L,mapTo as P,distinctUntilChanged as V,switchMap as D,retryWhen as O,catchError as B,startWith as I,pairwise as j,filter as A,concatMap as N,debounceTime as F,take as W,timeout as U}from"rxjs/operators";import $ from"classnames";import q from"react-ink";import _ from"i18next";import"i18next-browser-languagedetector";import"i18next-xhr-backend";import{format as J,setYear as Y,isAfter as Z,setMonth as K,setDate as X,startOfDay as G,isBefore as Q,getDaysInMonth as ee,endOfDay as te,getYear as se,isSameYear as ie,getMonth as ne,isSameMonth as re,getDate as ae,setHours as oe,setMinutes as le,setSeconds as he,isSameDay as ce,getHours as pe,isSameHour as me,getMinutes as de,isSameMinute as ue,getSeconds as ve}from"date-fns";import{format as ge,isSameDay as fe}from"date-fns/esm";import{es as ye,pt as be}from"date-fns/esm/locale";import{registerLocale as Ee}from"react-datepicker";import{reaction as ze,observable as ke,computed as we,action as Ce,runInAction as Me,when as xe}from"mobx";import Te from"hls.js";import Re from"reconnecting-websocket";import{event as Se,select as He}from"d3-selection";import{zoomTransform as Le,zoomIdentity as Pe,zoom as Ve}from"d3-zoom";import{translate as De,scale as Oe,multiply as Be,rotate as Ie,toString as je}from"rematrix";import Ae from"react-dom";import{useSpring as Ne,animated as Fe}from"react-spring";const We=i.createContext(null),Ue=i.createContext(null);class $e extends i.Component{render(){const t=this.props,{forwardedRef:s,children:n,className:r,fullwidth:a,type:o}=t,l=e(t,["forwardedRef","children","className","fullwidth","type"]),h=$(r,{button:!0,fullwidth:a});return i.createElement("button",Object.assign({ref:s,className:h,type:o||"button"},l),n,l.disabled?null:i.createElement(q,null))}}var qe=i.forwardRef((e,t)=>i.createElement($e,Object.assign({forwardedRef:t},e)));const _e=new Map,Je="en";class Ye extends i.Component{constructor(){super(...arguments),this.state={head:0,tail:0}}componentWillReceiveProps(e){const{offset:t}=this.props,s=e.offset,{head:i,tail:n}=this.state;s-t>0&&this.setState({tail:Math.max(n,Math.ceil(s))}),this.setState({head:-1*Math.min(-i,Math.floor(s))})}render(){const{from:e,to:t,offset:s,transition:n}=this.props,r=t-e+1;let{tail:a,head:o}=this.state;return s<0?o=-1*Math.min(-o,Math.floor(s)):a=Math.max(a,Math.ceil(s)),i.createElement("div",{style:{position:"absolute",height:34,lineHeight:"34px",top:"calc(50% - 17px)",overflow:"hidden"}},i.createElement("div",{style:{backgroundColor:"white",width:100,fontSize:"1.6em",textAlign:"center",fontFamily:"Arial, Helvetica, sans-serif",transform:`translateY(${-34*s}px) translateZ(100px)`,transition:n,marginTop:-34*o}},Array.from({length:o+a+1},(t,s)=>i.createElement("div",{key:s},this.props.format(e+((s-o)%r+r)%r)))))}}Ye.defaultProps={format:e=>e};class Ze extends i.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 s=e/Math.abs(e),i=t.rotation+s;if(!(i>this.getMaxRotation()||i<this.getMinRotation()))return{rotation:i}},this.notifyValueChange):(this.rotationDirection=e/Math.abs(e),this.setState(t=>{const s=t.rotation+e/34;if(!(s>this.getMaxRotation()||s<this.getMinRotation()))return{rotation:s,dragging:!0}},this.finishRotation))},this.onMouseDown=e=>{const{clientY:t}=e,s=this.state.rotation;let i,n=Date.now(),r=s;clearInterval(this.tracker),this.velocity=this.amplitude=0,this.clickOccured=!1,this.ignoreClick=!1;const a=()=>{const e=Date.now(),t=e-n;n=e;const s=this.state.rotation-r;r=this.state.rotation;const i=1e3*s/(1+t);this.velocity=.8*i+.2*this.velocity},o=({clientY:e})=>{const i=s+(t-e)/34;i>this.getMaxRotation()||i<this.getMinRotation()||this.setState({rotation:i})},l=()=>{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",l),clearInterval(this.tracker),Math.abs(this.velocity)>=5?(this.amplitude=.8*this.velocity,i=this.state.rotation+this.amplitude,n=Date.now(),requestAnimationFrame(h)):this.setState(({rotation:e})=>({rotation:Math.round(e),dragging:!1}),this.notifyValueChange)},h=()=>{const e=Date.now()-n,t=-this.amplitude*Math.exp(-e/325);if(this.amplitude)if(t>.5||t<-.5){const e=i+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(h)}else this.setState(({rotation:e})=>({rotation:Math.round(e),dragging:!1}),this.notifyValueChange)},c=({clientY:e})=>{if(this.clickOccured)return document.removeEventListener("mousemove",c),void document.removeEventListener("mouseup",p);Math.abs(e-s)>=5&&(this.setState({dragging:!0}),this.ignoreClick=!0,document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",p),document.addEventListener("mousemove",o),document.addEventListener("mouseup",l),this.tracker=window.setInterval(a,100))},p=()=>{document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",p),this.clickOccured||(this.state.dragging&&(this.ignoreClick=!0),this.setState(({rotation:e})=>({rotation:Math.round(e),dragging:!1}),this.notifyValueChange))};document.addEventListener("mousemove",c),document.addEventListener("mouseup",p)},this.getRotationByValue=e=>{const{value:t,from:s,to:i,min:n,max:r}=e;if(void 0===r||void 0===n)return t-s;const a=Math.round(this.state?this.state.rotation:0),o=(a%18+18)%18;let l=a,h=o;for(;this.getCellValue(h,l,s,i)!==t;)h=((h-1)%18+18)%18,l--;let c=a,p=o;for(;this.getCellValue(p,c,s,i)!==t;)p=((p+1)%18+18)%18,c++;return c-a>a-l?l:c},this.getMaxRotation=()=>{const{max:e=1/0}=this.props;if(!isFinite(e))return e;const t=Math.round(this.state.rotation),s=(t%18+18)%18;return t+e-this.getCellValue(s,t)},this.getMinRotation=()=>{const{min:e=-1/0}=this.props;if(!isFinite(e))return e;const t=Math.round(this.state.rotation),s=(t%18+18)%18;return t+e-this.getCellValue(s,t)},this.getCellValue=(e,t,s=this.props.from,i=this.props.to)=>{const n=i-s+1;let r;return r=e<12?t>=0?t%18<9||e<2?(e+18*Math.round(t/18))%n:(e+18*Math.round((t-7)/18))%n:t%18<0&&e>4?(e+18*Math.round((t-9)/18))%n:(e+18*Math.round(t/18))%n:(e-(18-n)+18*Math.round(t/18))%n,s+(r+n)%n},this.renderCellValue=(e,t)=>{const s=this.getMaxRotation(),i=this.getMinRotation();if(Number.isFinite(s)){const n=(t%18+18)%18;let r;if(r=n<5&&e>13?t+e-n-18:n>13&&e<5?t+e-n+18:t+e-n,r=Math.round(r),r>s)return null;if(r<i)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 s=this.getCellValue((e%18+18)%18,e);this.value!==s&&(this.value=s,t(s))};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}}componentWillReceiveProps(e){if(void 0===e.value)return;const{rotation:t}=this.state,s=this.getCellValue((t%18+18)%18,t),i=this.getRotationByValue(e);s===e.value&&e.max===this.props.max&&e.min===this.props.min&&e.from===this.props.from&&e.to===this.props.to||(this.preventAnimation=s===e.value&&t!==i,this.setState({rotation:i},()=>{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:s})=>{if(t)return null;const i=(s%18+18)%18;let n;return n=i<5&&e>13?s+e-i-18:i>13&&e<5?s+e-i+18:s+e-i,n>this.getMaxRotation()||n<this.getMinRotation()?null:{rotation:n}},this.notifyValueChange)}render(){const{rotation:e,dragging:t}=this.state,s=t||this.preventAnimation?"none":"transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1)";return i.createElement("div",{style:{width:100,position:"relative",userSelect:"none",MozUserSelect:"none"},onWheel:this.onWheel,onMouseDown:this.onMouseDown,onTouchStart:({targetTouches:e})=>console.log(e)},i.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"}},i.createElement("div",{style:{position:"absolute",height:34,top:76,left:0,right:0,borderTop:"1px solid #aaa",borderBottom:"1px solid #aaa"}})),i.createElement("div",{style:{height:187}},i.createElement("div",{style:{position:"absolute",top:"50%",left:0,right:0,transformStyle:"preserve-3d",height:34,marginTop:-17,transform:`rotateX(${20*e}deg)`,transition:s,textAlign:"center"}},Array.from({length:18}).map((t,s)=>i.createElement("div",{key:s,style:{height:34,lineHeight:"34px",transform:`rotateX(${-20*s}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(s)},this.renderCellValue(s,e))))),i.createElement(Ye,Object.assign({offset:e,transition:s},this.props)))}}t([function(e){let t;return(s,i,n)=>{void 0===n&&(n=Object.getOwnPropertyDescriptor(s,i));const r=n.value;return n.value=function(...s){clearTimeout(t),t=setTimeout(()=>{t=null,r.apply(this,s)},e)},n}}(200),s("design:type",Function),s("design:paramtypes",[]),s("design:returntype",void 0)],Ze.prototype,"finishRotation",null);const Ke=e=>e.toString().padStart(2,"0");class Xe extends i.Component{constructor(){super(...arguments),this.formatMonth=e=>{const t=_e.get(this.props.locale||Je);return J(new Date(2019,e,1),"MMM",{locale:t})},this.onYearChange=e=>{const{maxDate:t,minDate:s,date:i,onChange:n}=this.props;let r=Y(i,e);Z(r,t)&&(r=K(r,0),r=X(r,1),Z(r,t)&&(r=G(r))),Q(r,s)&&(r=K(r,11),r=X(r,ee(r)),Q(r,s)&&(r=te(r))),n(r)},this.onMonthChange=e=>{const{maxDate:t,minDate:s,date:i,onChange:n}=this.props;let r=K(i,e);Z(r,t)&&(r=X(r,1),r=G(r)),Q(r,s)&&(r=te(X(r,ee(r)))),n(r)},this.onDayChange=e=>{const{date:t,onChange:s,maxDate:i,minDate:n}=this.props;let r=X(t,e);Z(r,i)&&(r=G(r)),Q(r,n)&&(r=te(r)),s(r)},this.getYearParams=()=>{const{maxDate:e,minDate:t}=this.props,s=se(t),i=se(e);return{from:s,to:i,min:s,max:i}},this.getMonthParams=()=>{const{maxDate:e,minDate:t,date:s}=this.props;let i,n;ie(s,t)&&(n=ne(t)),ie(s,e)&&(i=ne(e));const r={from:0,to:11};return void 0===n&&void 0===i||(r.min=void 0===n?0:n,r.max=void 0===i?11:i),r},this.getDayParams=()=>{const{maxDate:e,minDate:t,date:s}=this.props,i=ee(s);let n,r;re(s,t)&&(n=ae(t)),re(s,e)&&(r=ae(e));const a={from:1,to:i};return void 0===n&&void 0===r||(a.min=void 0===n?1:n,a.max=void 0===r?i:r),a}}render(){const{date:e}=this.props;return i.createElement("div",{style:{perspective:1200,display:"flex",justifyContent:"center"}},i.createElement(Ze,Object.assign({onChange:this.onYearChange,value:se(e)},this.getYearParams())),i.createElement(Ze,Object.assign({onChange:this.onMonthChange,value:ne(e),format:this.formatMonth},this.getMonthParams())),i.createElement(Ze,Object.assign({onChange:this.onDayChange,value:ae(e),format:Ke},this.getDayParams())))}}const Ge=e=>e.toString().padStart(2,"0");class Qe extends i.Component{constructor(){super(...arguments),this.onHoursChange=e=>{const{maxDate:t,minDate:s,date:i}=this.props;let n=oe(i,e);Z(n,t)&&(n=le(n,0),n=he(n,0)),Q(n,s)&&(n=le(n,59),n=he(n,59)),this.props.onChange(n)},this.onMinutesChange=e=>{const{maxDate:t,minDate:s,date:i,onChange:n}=this.props;let r=le(i,e);Z(r,t)&&(r=he(r,0)),Q(r,s)&&(r=he(r,59)),n(r)},this.onSecondsChange=e=>{this.props.onChange(he(this.props.date,e))},this.getHoursParams=()=>{const{maxDate:e,minDate:t,date:s}=this.props;let i,n;ce(s,t)&&(n=pe(t)),ce(s,e)&&(i=pe(e));const r={from:0,to:23};return void 0===n&&void 0===i||(r.min=void 0===n?0:n,r.max=void 0===i?23:i),r},this.getMinutesParams=()=>{const{maxDate:e,minDate:t,date:s}=this.props;let i,n;me(s,t)&&(n=de(t)),me(s,e)&&(i=de(e));const r={from:0,to:59};return void 0===n&&void 0===i||(r.min=void 0===n?0:n,r.max=void 0===i?59:i),r},this.getSecondsParams=()=>{const{maxDate:e,minDate:t,date:s}=this.props;let i,n;ue(s,t)&&(i=ve(t)),ue(s,e)&&(n=ve(e));const r={from:0,to:59};return void 0===i&&void 0===n||(r.min=void 0===i?0:i,r.max=void 0===n?59:n),r}}render(){const{date:e}=this.props;return i.createElement("div",null,i.createElement("div",null,i.createElement("div",null,i.createElement("div",{style:{perspective:1200,display:"flex",justifyContent:"center"}},i.createElement(Ze,Object.assign({onChange:this.onHoursChange,value:pe(e),format:Ge},this.getHoursParams())),i.createElement(Ze,Object.assign({onChange:this.onMinutesChange,value:de(e),format:Ge},this.getMinutesParams())),i.createElement(Ze,Object.assign({onChange:this.onSecondsChange,value:ve(e),format:Ge},this.getSecondsParams()))))))}}class et extends i.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:s,mode:n,dateTitle:r,timeTitle:a}=this.props;return Q(e,t)||Z(e,s)?(console.error("incorrect params. date must be within given period"),null):i.createElement("div",{style:{width:300,backgroundColor:"white"}},i.createElement("div",{style:{display:"flex",fontSize:"1.6em",fontFamily:"Arial, Helvetica, sans-serif",textAlign:"center"}},i.createElement("div",{style:{flex:1,color:"date"===n?"#0091ff":"black"},onClick:this.requestDateMode},r),i.createElement("div",{style:{flex:1,color:"time"===n?"#0091ff":"black"},onClick:this.requestTimeMode},a)),"date"===n?i.createElement(Xe,{minDate:t,maxDate:s,onChange:this.onChange,date:e}):i.createElement(Qe,{minDate:t,maxDate:s,onChange:this.onChange,date:e}))}}et.defaultProps={dateTitle:"Date",timeTitle:"Time"};const tt=new Map,st=_;function it(e,t){tt.set(e,t),Ee(e,t),function(e,t){_e.set(e,t)}(e,t)}function nt(e,t){const s=tt.get(st.language);return ge(e,t,{locale:s})}it("es",ye),it("pt",be);const rt=(e,t,s)=>Math.min(Math.max(e,t),s),at={add:{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.createElement("path",{d:"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},"chevron-down":{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.createElement("path",{d:"M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"}),i.createElement("path",{d:"M0-.75h24v24H0z",fill:"none"}))},"chevron-up":{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.createElement("path",{d:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},"chevron-right":{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.createElement("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},close:{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.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"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},"more-vert":{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}))},sidebar:{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.createElement("path",{d:"M 19,17 H 10 V 7 h 9 M 21,5 H 3 v 14 h 18 z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},undock:{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.createElement("path",{d:"M7 5v10h14V5zM3 7v12h16v-2H5V7zm6 0h10v6H9z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},label:{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M10.13 3.245a1.994 1.994 0 0 0-1.542.992l-5.491 9.53c-.55.954-.23 2.178.723 2.728l8.66 5c.953.55 2.174.216 2.724-.737l5.509-9.521c.335-.58.349-1.265.087-1.832L17.65 2.54z"}))},camera:{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"}))},cancel:{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.createElement("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},"locate-scrubber":{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}),i.createElement("path",{d:"M19 16v-3h4v-2h-4V8l-4 4zM5 8v3H1v2h4v3l4-4zm6 12h2V2h-2z"}),i.createElement("circle",{cx:"12",cy:"19",r:"3"}))},rewind:{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M18,9.86v4.28L14.97,12L18,9.86 M9,9.86v4.28L5.97,12L9,9.86 M20,6l-8.5,6l8.5,6V6L20,6z M11,6l-8.5,6l8.5,6V6L11,6z"}))},forward:{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M15,9.86L18.03,12L15,14.14V9.86 M6,9.86L9.03,12L6,14.14V9.86 M13,6v12l8.5-6L13,6L13,6z M4,6v12l8.5-6L4,6L4,6z"}))},download:{viewBox:"0 0 24 24",svg:i.createElement("g",null,i.createElement("path",{fill:"none",d:"M0,0h24v24H0V0z"}),i.createElement("path",{d:"M19.35,10.04C18.67,6.59,15.64,4,12,4C9.11,4,6.6,5.64,5.35,8.04C2.34,8.36,0,10.91,0,14c0,3.31,2.69,6,6,6h13\n\t\t\tc2.76,0,5-2.24,5-5C24,12.36,21.95,10.22,19.35,10.04z M19,18H6c-2.21,0-4-1.79-4-4c0-2.05,1.53-3.76,3.56-3.97l1.07-0.11\n\t\t\tl0.5-0.95C8.08,7.14,9.94,6,12,6c2.62,0,4.88,1.86,5.39,4.43l0.3,1.5l1.53,0.11C20.78,12.14,22,13.45,22,15\n\t\t\tC22,16.65,20.65,18,19,18z"}),i.createElement("polygon",{points:"13.45,10 10.55,10 10.55,13 8,13 12,17 16,13 13.45,13"}))},delete:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}),i.createElement("g",null,i.createElement("path",{d:"M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"})))},timelapse:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M16.24 7.76A5.974 5.974 0 0 0 12 6v6l-4.24 4.24c2.34 2.34 6.14 2.34 8.49 0a5.99 5.99 0 0 0-.01-8.48zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"}))},pause:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M6 19h4V5H6v14zm8-14v14h4V5h-4z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},play:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M8 5v14l11-7z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},playlist:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M4 15h16v-2H4v2zm0 4h16v-2H4v2zm0-8h16V9H4v2zm0-6v2h16V5H4z"}),i.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}))},map:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},library:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z"}))},notification:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"}))},categories:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},"arrow-right":{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M10 17l5-5-5-5v10z"}),i.createElement("path",{fill:"none",d:"M0 24V0h24v24H0z"}))},person:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},"view-module":{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},sync:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},unsync:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M0 0h24v24H0zm0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M10 6.35V4.26c-.8.21-1.55.54-2.23.96l1.46 1.46c.25-.12.5-.24.77-.33zm-7.14-.94l2.36 2.36a7.925 7.925 0 0 0 1.14 9.87L4 20h6v-6l-2.24 2.24A6.003 6.003 0 0 1 6 12c0-1 .25-1.94.68-2.77l8.08 8.08c-.25.13-.5.25-.77.34v2.09c.8-.21 1.55-.54 2.23-.96l2.36 2.36 1.27-1.27L4.14 4.14 2.86 5.41zM20 4h-6v6l2.24-2.24A6.003 6.003 0 0 1 18 12c0 1-.25 1.94-.68 2.77l1.46 1.46a7.925 7.925 0 0 0-1.14-9.87L20 4z"}))},"volume-down":{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M18.5 12A4.5 4.5 0 0 0 16 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},"volume-off":{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},fullscreen:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"}))},"fullscreen-exit":{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"}))},thumbnails:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M4 4v2H0v12h4v2h16v-2h4V6h-4V4H4zm1.455 1.334h1.453v1.332H5.455V5.334zm2.908 0h1.455v1.332H8.363V5.334zm2.91 0h1.454v1.332h-1.454V5.334zm2.909 0h1.455v1.332h-1.455V5.334zm2.91 0h1.453v1.332h-1.453V5.334zM1.059 7h1.058v1H1.06V7zm2.117 0H4v1h-.824V7zM20 7h.824v1H20V7zm1.883 0h1.058v1h-1.058V7zM5.455 8h13.09v8H5.455V8zM1.06 9H4v6H1.059V9zM20 9h2.941v6H20V9zM1.059 16h1.058v1H1.06v-1zm2.117 0H4v1h-.824v-1zM20 16h.824v1H20v-1zm1.883 0h1.058v1h-1.058v-1zM5.455 17.334h1.453v1.332H5.455v-1.332zm2.908 0h1.455v1.332H8.363v-1.332zm2.91 0h1.454v1.332h-1.454v-1.332zm2.909 0h1.455v1.332h-1.455v-1.332zm2.91 0h1.453v1.332h-1.453v-1.332z"}))},"create-clip":{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("g",{id:"g16",transform:"matrix(.7033 0 0 .66667 -.462 2.333)"},i.createElement("path",{d:"M31.937 25V3H3.5v22zM28.015 5h1.961v2h-1.961zm0 4h1.961v2h-1.961zm0 4h1.961v2h-1.961zm0 4h1.961v2h-1.961zm0 4h1.961v2h-1.961zM9.384 5h16.67v18H9.384zM5.5 5h2v2h-2zm0 4h2v2h-2zm0 4h2v2h-2zm0 4h2v2h-2zm0 4h2v2h-2z"}),i.createElement("path",{d:"M9.625 7.625h14.75v14.75H9.625z",id:"path6",fill:"none"}),i.createElement("circle",{cx:"13.313",cy:"18.688",r:"1.229",id:"circle8",fill:"none"}),i.createElement("circle",{cx:"17",cy:"15",r:".307",id:"circle10",fill:"none"}),i.createElement("circle",{cx:"13.313",cy:"11.313",r:"1.229",id:"circle12",fill:"none"}),i.createElement("path",{d:"M16.268 11.32c.141-.307.221-.645.221-1.008a2.457 2.457 0 1 0-2.458 2.458c.363 0 .701-.08 1.008-.221L16.49 14l-1.45 1.45a2.398 2.398 0 0 0-1.008-.221 2.457 2.457 0 1 0 2.458 2.458c0-.363-.08-.701-.221-1.008l1.45-1.45 4.302 4.302h1.844v-.615zm-2.237.222a1.229 1.229 0 1 1 0-2.457 1.229 1.229 0 0 1 0 2.457zm0 7.375a1.229 1.229 0 1 1 0-2.457 1.229 1.229 0 0 1 0 2.457zm3.688-4.61a.304.304 0 0 1-.307-.307c0-.172.135-.307.307-.307s.307.135.307.307a.304.304 0 0 1-.307.307zm4.302-5.838l-3.688 3.688 1.229 1.229 4.302-4.302v-.615z"})))},"jam-pause":{viewBox:"-4 -3 24 24",svg:i.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"})},"jam-play":{viewBox:"-4 -3 24 24",svg:i.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"})},"jam-volume-down":{viewBox:"-1 -3 24 24",svg:i.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"})},"jam-volume-mute":{viewBox:"-1 -3 24 24",svg:i.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"})},"jam-grid":{viewBox:"-2 -2 24 24",svg:i.createElement("path",{d:"M2 2v4h4V2H2zm0-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm12 0h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 2v4h4V2h-4zm0 10h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zm0 2v4h4v-4h-4zM2 12h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zm0 2v4h4v-4H2z"})},"jam-map":{viewBox:"-2 -2 24 24",svg:i.createElement("path",{d:"M2 17.613l3.419-1.14A5 5 0 0 1 6 16.317V2.387L2 3.721v13.892zm-.662 2.328A1 1 0 0 1 0 19V3a1 1 0 0 1 .706-.956L5.419.473a5 5 0 0 1 3.162 0l3.47 1.157a3 3 0 0 0 1.898 0L18.662.059A1 1 0 0 1 20 1v16a1 1 0 0 1-.706.956l-4.713 1.571a5 5 0 0 1-3.162 0l-3.47-1.157a3 3 0 0 0-1.898 0l-4.713 1.571zM18 16.28V2.387l-3.419 1.14a5 5 0 0 1-.581.156v13.93l4-1.334zm-6 1.334V3.683a5 5 0 0 1-.581-.156L8 2.387v13.93a5 5 0 0 1 .581.156L12 17.613z"})},"jam-refresh":{viewBox:"-1.5 -2.5 24 24",svg:i.createElement("path",{d:"M17.83 4.194l.42-1.377a1 1 0 1 1 1.913.585l-1.17 3.825a1 1 0 0 1-1.248.664l-3.825-1.17a1 1 0 1 1 .585-1.912l1.672.511A7.381 7.381 0 0 0 3.185 6.584l-.26.633a1 1 0 1 1-1.85-.758l.26-.633A9.381 9.381 0 0 1 17.83 4.194zM2.308 14.807l-.327 1.311a1 1 0 1 1-1.94-.484l.967-3.88a1 1 0 0 1 1.265-.716l3.828.954a1 1 0 0 1-.484 1.941l-1.786-.445a7.384 7.384 0 0 0 13.216-1.792 1 1 0 1 1 1.906.608 9.381 9.381 0 0 1-5.38 5.831 9.386 9.386 0 0 1-11.265-3.328z"})},"jam-refresh-disabled":{viewBox:"0 0 1000 1000",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M771 596s3.135-13.72 14.295-23.678c9.824-8.766 26.766-14.393 40.705-8.322 44.209 19.254 23 63 23 63l-12 30z"}),i.createElement("path",{d:"M133.452 116.262l758.786 701.786a41.5 41.5 0 0 1-58.69 58.69s-35.084-35.415-92.561-87.766c-.177-.161-95.5 99.8-261.879 99.8-143.03 0-254.171-74.942-319.948-167.255-.1-.142-14.263 57.042-14.263 57.042s-13 33.184-40.876 29.887C54.347 802.568 63 759 63 759l40-160.913A47.86 47.86 0 0 1 116 573c15.984-15.716 36.986-10.037 36.986-10.037s114.6 29.361 162.946 40.5C339.544 608.9 352.755 634.365 348 652c-9.686 35.922-38.922 35.226-50.161 32.639-32-7.37-74.932-17.925-74.932-17.925s82.831 139 256.575 139c122.07 0 200.624-74.124 200.572-74.174C550.93 607.824 363.206 435.289 229.015 317.618c-.145-.128-20.291 26.919-46.939 91.71-6.913 16.81-32.914 31.275-56.676 17.9-18.277-10.289-26.105-31.266-20.326-48.937 24.3-74.3 62.612-117.389 62.572-117.432-53.078-55.995-92.884-85.906-92.884-85.906a41.5 41.5 0 0 1 58.69-58.691z"}),i.createElement("path",{d:"M358 213s51.052-26 121-26c178.393 0 257 139 257 139l-73-23s-34.43-8.448-48 25c-15.325 37.773 26 56 26 56l162 49s16.2 6.072 32-4 17-20 17-20l51-164s10.933-40.7-29-52c-34.45-9.748-50 23-50 23l-19 62S697.016 104 480 104c-108.167 0-187 49-187 49z"}))},"jam-close":{viewBox:"-6 -6 24 24",svg:i.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"})},"aspect-ratio":{viewBox:"0 0 1000 1000",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M786.864 166H208.241C145.638 166 83 221.33 83 285.047v428.3C83 776.157 139.182 834 209.869 834h582.1C860.579 834 917 773.784 917 713.533v-426.9C917 221.834 856.793 166 786.864 166zm44.776 115.431v437.2c0 13.086-20.229 30.649-35.5 30.649H200.32c-12.238 0-31.96-18.745-31.96-28.877V280.092c0-11.127 19.122-29.372 31.382-29.372h600.25c12.716 0 31.648 20.35 31.648 30.711z"}),i.createElement("path",{d:"M252.9 335.128V550h85.57V421.6h128.587v-86.472H252.9z"}),i.createElement("path",{d:"M747.1 663.872V449h-85.57v128.4H532.943v86.474H747.1z"}))},share:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"}))},peek:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"}))},unpeek:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M1.455 11c-.165.326-.32.658-.455 1 1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-.135-.342-.29-.674-.455-1-1.95 3.853-5.935 6.5-10.545 6.5S3.405 14.853 1.455 11z"}))},"jam-camera":{viewBox:"-2 -4 24 24",svg:i.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"})},"jam-activity":{viewBox:"-2 -3 24 24",svg:i.createElement("path",{d:"M7.116 10.749L6 1.948l-1.116 8.8H1c-.552 0-1-.437-1-.976a.99.99 0 0 1 1-.978h2.116l.9-7.086C4.15.636 5.15-.124 6.245.008c.91.11 1.626.81 1.739 1.7l.899 7.086h1.974L12 16.04l1.142-7.245H19c.552 0 1 .438 1 .978s-.448.977-1 .977h-4.142l-.881 5.587a1.978 1.978 0 0 1-1.672 1.634c-1.092.165-2.113-.567-2.282-1.634l-.88-5.587H7.115z"})},search:{viewBox:"-2.5 -2.5 24 24",svg:i.createElement("path",{d:"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12zm6.32-1.094l3.58 3.58a1 1 0 1 1-1.415 1.413l-3.58-3.58a8 8 0 1 1 1.414-1.414z"})},help:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"}))},"jam-play-circle":{viewBox:"-2 -2 24 24",svg:i.createElement("path",{d:"M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm4.126-6.254l-4.055 2.898c-.905.646-2.13.389-2.737-.576A2.201 2.201 0 0 1 7 12.898V7.102C7 5.942 7.883 5 8.972 5c.391 0 .774.124 1.099.356l4.055 2.898c.905.647 1.146 1.952.54 2.917a2.042 2.042 0 0 1-.54.575zM8.972 7.102v5.796L13.027 10 8.972 7.102z"})},pdf:{viewBox:"0 0 36 44",svg:i.createElement(i.Fragment,null,i.createElement("defs",null,i.createElement("clipPath",{id:"a"},i.createElement("path",{d:"M0 0h36v44H0z"}))),i.createElement("g",{clipPath:"url(#a)"},i.createElement("path",{d:"M11.33 24c-.76-.011-1.52.046-2.27.17V32h1.66v-2.84c.19.014.38.014.57 0a3.303 3.303 0 0 0 2.41-.83 2.63 2.63 0 0 0 .68-1.88 2.39 2.39 0 0 0-.79-1.83 3.38 3.38 0 0 0-2.26-.62zm0 3.81a2.384 2.384 0 0 1-.56 0v-2.38a2.67 2.67 0 0 1 .69-.07c.84 0 1.31.44 1.31 1.16a1.27 1.27 0 0 1-1.49 1.3l.05-.01zM23.06 32h1.68v-3.19h2.66v-1.46h-2.66v-1.81h2.85v-1.47h-4.53V32zm-5.73-8c-.76-.005-1.519.052-2.27.17V32c.63.084 1.265.124 1.9.12a5.08 5.08 0 0 0 3.42-1 4.15 4.15 0 0 0 1.23-3.21 3.61 3.61 0 0 0-1.25-3 4.538 4.538 0 0 0-3.03-.91zm0 6.67a2.958 2.958 0 0 1-.58 0v-5.21a3.29 3.29 0 0 1 .76-.07 2.2 2.2 0 0 1 2.33 2.52c-.01 1.89-1 2.78-2.51 2.77v-.01zM26 0H4a4 4 0 0 0-4 4v36a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4V11L26 0zm8 40a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h18v10a2 2 0 0 0 2 2h10v26zM24 12V2h1l9 10H24z"})))},stop:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M6 6h12v12H6z"}))},"zoom-in":{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.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"}),i.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}),i.createElement("path",{d:"M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"}))},"zoom-out":{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.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"}))},control:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.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"}),i.createElement("circle",{cx:"12",cy:"12",r:"3"}),i.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}))},mic:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},"arrow-forward":{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z"}),i.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}))},"jam-shield":{viewBox:"-4 -2 24 24",svg:i.createElement("path",{d:"M2 4.386V8a9.02 9.02 0 0 0 3.08 6.787L8 17.342l2.92-2.555A9.019 9.019 0 0 0 14 8V4.386l-6-2.25-6 2.25zM.649 2.756L8 0l7.351 2.757a1 1 0 0 1 .649.936V8c0 3.177-1.372 6.2-3.763 8.293L8 20l-4.237-3.707A11.019 11.019 0 0 1 0 8V3.693a1 1 0 0 1 .649-.936z"})},"jam-shield-filled":{viewBox:"-4 -1.5 24 24",svg:i.createElement("path",{d:"M.649 3.322L8 .565l7.351 2.757a1 1 0 0 1 .649.936v4.307c0 3.177-1.372 6.2-3.763 8.292L8 20.565l-4.237-3.708A11.019 11.019 0 0 1 0 8.565V4.258a1 1 0 0 1 .649-.936z"})},"jam-shield-check-filled":{viewBox:"-4 -1.5 24 24",svg:i.createElement("path",{d:"M.649 3.322L8 .565l7.351 2.757a1 1 0 0 1 .649.936v4.307c0 3.177-1.372 6.2-3.763 8.292L8 20.565l-4.237-3.708A11.019 11.019 0 0 1 0 8.565V4.258a1 1 0 0 1 .649-.936zm6.29 7.51L5.525 9.42a1 1 0 1 0-1.414 1.414l2.121 2.121a1 1 0 0 0 1.414 0l4.243-4.243a1 1 0 1 0-1.414-1.414l-3.536 3.536z"})},"directions-run":{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),i.createElement("path",{d:"M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"}))},"directions-car":{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},done:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),i.createElement("path",{d:"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"}))},"blur-on":{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M6 13c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-8c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-3 .5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM6 5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm15 5.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zM14 7c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0-3.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zm-11 10c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm0-17c.28 0 .5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5zM10 7c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0 5.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm8 .5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-8c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0-4c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm3 8.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM14 17c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm-4-12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0 8.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm4-4.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-4c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},alien:{viewBox:"0 0 1050 1280",svg:i.createElement("g",{transform:"translate(0.000000,1280.000000) scale(0.100000,-0.100000)"},i.createElement("path",{d:"M4845 12789 c-822 -47 -1550 -229 -2210 -554 -483 -237 -826 -483 -1205 -864 -291 -292 -481 -535 -679 -866 -417 -698 -653 -1484 -733 -2435 -26 -315 -14 -1132 23 -1535 95 -1033 356 -1798 909 -2670 316 -497 846 -1183 1521 -1965 989 -1148 1752 -1724 2479 -1871 165 -34 435 -34 600 0 581 118 1206 526 1911 1249 551 564 1406 1597 1872 2263 575 821 889 1535 1042 2369 77 422 111 821 121 1415 13 719 -46 1276 -196 1851 -154 591 -423 1176 -751 1637 -253 353 -601 712 -941 968 -899 677 -2058 1025 -3388 1017 -129 0 -298 -5 -375 -9z m-2630 -6149 c446 -64 1102 -602 1700 -1395 564 -748 893 -1494 836 -1896 -28 -203 -125 -313 -318 -363 -165 -43 -449 -41 -678 5 -900 180 -1888 974 -2265 1819 -127 285 -191 596 -176 855 36 615 318 961 801 983 17 1 62 -3 100 -8z m6350 -17 c202 -43 385 -195 492 -408 99 -196 150 -516 124 -775 -52 -512 -313 -1015 -771 -1484 -638 -654 -1491 -1050 -2149 -997 -220 18 -327 56 -411 148 -194 212 -122 680 199 1298 461 888 1292 1814 1901 2120 237 119 400 145 615 98z m-2255 -4823 c0 -36 -120 -181 -203 -243 -179 -138 -403 -212 -714 -238 -385 -32 -766 58 -1000 238 -83 62 -203 207 -203 243 0 7 336 10 1060 10 724 0 1060 -3 1060 -10z"}))},flame:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},palette:{viewBox:"0 0 24 24",svg:i.createElement(i.Fragment,null,i.createElement("path",{d:"M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"}),i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))},"selection-multiple-marker":{viewBox:"0 0 24 24",svg:i.createElement("path",{d:"M7 4H9V6H8V7H6V5C6 4.45 6.45 4 7 4M19 4C19.55 4 20 4.45 20 5V7H18V6H17V4H19M11 6V4H15V6H11M7 18C6.45 18 6 17.55 6 17V15H8V16H9V18H7M6 9H8V13H6V9M3 8H4V20H14.58L16.03 22L3 22C2.45 22 2 21.55 2 21V9C2 8.45 2.45 8 3 8M18.5 12C20.4 12 22 13.6 22 15.5C22 18.1 18.5 22 18.5 22C18.5 22 15 18.1 15 15.5C15 13.6 16.6 12 18.5 12M18.5 16.8C19.2 16.8 19.8 16.2 19.7 15.6C19.7 15 19.1 14.4 18.5 14.4C17.9 14.4 17.3 14.9 17.3 15.6C17.3 16.2 17.8 16.8 18.5 16.8M11 18V16H13C13.09 16.66 13.27 17.33 13.5 18H11M20 9V10.23C19.5 10.08 19 10 18.5 10L18 10.03V9H20Z"})},overscan:{viewBox:"0 0 24 24",svg:i.createElement("path",{d:"M12 5.5L10 8H14L12 5.5M18 10V14L20.5 12L18 10M6 10L3.5 12L6 14V10M14 16H10L12 18.5L14 16M21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3M21 19H3V5H21V19Z"})}};class ot extends i.Component{render(){const t=this.props,{name:s,size:n=24,color:r="currentColor"}=t,a=e(t,["name","size","color"]),o=at[s].viewBox||"0 0 24 24",l=at[s].svg||at[s];return i.createElement("svg",Object.assign({preserveAspectRatio:"xMinYMin",className:"icon",width:n,fill:r,viewBox:o,height:n},a),l)}}const lt=e=>e.stopPropagation(),ht=x(e=>{const t=n(null),s=T({current:null}),o=T({dragging:!1}),l=n(new u),h=r(e=>{e.persist(),e.stopPropagation(),l.current.next(e)},[]);return a(()=>{const i=l.current.pipe(R(i=>{const n=i.clientX,r=i.clientY;o.dragging=!0;const{top:a,left:l}=t.current.getBoundingClientRect();return v(document,"mousemove").pipe(S(t=>{const s=n-l,i=r-a,o=t.clientX-n,h=t.clientY-r,c=(h>=0?i:i+h)/e.height,p=(o>=0?s:s+o)/e.width,m=c+Math.abs(h)/e.height,d=p+Math.abs(o)/e.width;return{top:rt(c,0,1),left:rt(p,0,1),bottom:rt(m,0,1),right:rt(d,0,1)}}),H(v(document,"mouseup").pipe(L(()=>{if(o.dragging=!1,!s.current)return;const t=(s.current.bottom-s.current.top)*(s.current.right-s.current.left);e.width*e.height*t<100?s.current=null:e.onSelect({Top:s.current.top,Left:s.current.left,Bottom:s.current.bottom,Right:s.current.right})}))))})).subscribe(e=>{e&&(s.current=e)});return()=>i.unsubscribe()},[e.width,e.height]),a(()=>{if(s.current)return;const t=t=>{const s=t.target;/^(input|select|textarea)$/i.test(s.tagName)||27===t.keyCode&&e.onRequestCancel()};return document.addEventListener("keydown",t),()=>{document.removeEventListener("keydown",t)}},[null===s.current]),i.createElement("div",{ref:t,onMouseDown:h,style:{position:"absolute",top:0,left:0,width:e.width,height:e.height,display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column"}},s.current?i.createElement("div",{className:"box-selector",style:{position:"absolute",top:100*s.current.top+"%",left:100*s.current.left+"%",bottom:100*(1-s.current.bottom)+"%",right:100*(1-s.current.right)+"%"}},o.dragging?null:i.createElement(qe,{className:"box-selector-close",onMouseDown:lt,onClick:e.onRequestCancel,style:{position:"absolute",top:-10,right:-10,padding:2,width:20,height:20,borderRadius:10}},i.createElement(ot,{size:16,name:"close"}))):i.createElement(i.Fragment,null,i.createElement("div",{style:{pointerEvents:"none",color:"rgba(255, 255, 255, 0.8)",backgroundColor:"rgba(0, 0, 0, 0.5)",textTransform:"uppercase",fontWeight:"bold",borderRadius:4,padding:8,width:"content-width"}},st.t("selectArea")),i.createElement(qe,{onClick:e.onRequestCancel},"Cancel")))}),ct=x(()=>{const e=o(Ue),t=o(We);return a(()=>()=>{t.eventSearchPanel.player===e&&(t.eventSearchPanel.player=null,t.eventSearchPanel.opened=!1)},[]),t.eventSearchPanel.overlayOpened&&t.eventSearchPanel.player===e?i.createElement(ht,{onRequestCancel:t.eventSearchPanel.cancel,onSelect:t.eventSearchPanel.onSelect,height:e.height,width:e.width}):null});class pt{constructor(e,t){this.disposables=[];const s=g(v(e,"play").pipe(P(!1)),v(e,"pause").pipe(P(!0))),i=v(e,"volumechange").pipe(S(()=>e.volume),V()),n=v(e,"timeupdate"),r=g(v(e,"loadedmetadata"),v(e,"playing")),a=v(e,"ended"),o=v(e,"volumechange").pipe(S(()=>e.muted),V());t.init(e,{canSeek$:r,ended$:a,progress$:n,volume$:i,muted$:o}),this.disposables.push(ze(()=>t.stream,t=>{e.srcObject=t})),this.disposables.push(ze(()=>t.volume,t=>{e.volume=t})),this.disposables.push(ze(()=>t.playbackRate,t=>{e.playbackRate=t})),this.disposables.push(v(e,"canplay").subscribe(()=>{e.playbackRate!==t.playbackRate&&(e.playbackRate=t.playbackRate)})),this.disposables.push(v(e,"error").subscribe(()=>{console.error(e.error),t.error=e.error})),this.disposables.push(ze(()=>t.paused,t=>{t?e.paused||e.pause():!t&&e.paused&&e.play()})),this.disposables.push(s.subscribe(s=>{"hidden"!==document.visibilityState&&(s&&!t.paused&&e.play(),!s&&t.paused&&e.pause())})),this.disposables.push(v(e,"seeking").subscribe(()=>{t.loading=!0})),this.disposables.push(v(e,"seeked").subscribe(()=>{t.paused||e.play()}))}dispose(){this.disposables.forEach(e=>{e instanceof f?e.closed||e.unsubscribe():e()})}}var mt,dt;
|
|
2
|
-
/*! *****************************************************************************
|
|
3
|
-
Copyright (c) Microsoft Corporation. All rights reserved.
|
|
4
|
-
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
5
|
-
this file except in compliance with the License. You may obtain a copy of the
|
|
6
|
-
License at http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
-
|
|
8
|
-
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
9
|
-
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
|
10
|
-
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
|
11
|
-
MERCHANTABLITY OR NON-INFRINGEMENT.
|
|
12
|
-
|
|
13
|
-
See the Apache Version 2.0 License for specific language governing permissions
|
|
14
|
-
and limitations under the License.
|
|
15
|
-
***************************************************************************** */
|
|
16
|
-
function ut(e,t,s,i){var n,r=arguments.length,a=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,s,i);else for(var o=e.length-1;o>=0;o--)(n=e[o])&&(a=(r<3?n(a):r>3?n(t,s,a):n(t,s))||a);return r>3&&a&&Object.defineProperty(t,s,a),a}function vt(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}!function(e){e[e.CONNECTING=0]="CONNECTING",e[e.CONNECTED=1]="CONNECTED",e[e.RECONNECTING=2]="RECONNECTING",e[e.DISCONNECTED=3]="DISCONNECTED"}(mt||(mt={}));class gt{constructor(e){this.json=e,this.accessToken=e.access_token||e.accessToken,this.accessTokenExpires=new Date(e.access_token_expires||e.accessTokenExpires),this.accessTokenIssued=new Date(e.access_token_issued||e.accessTokenIssued),this.clientId=e.client_id||e.clientId,this.expiresIn=e.expires_in||e.expiresIn,this.refreshToken=e.refresh_token||e.refreshToken,this.refreshTokenExpires=new Date(e.refresh_token_expires||e.refreshTokenExpires),this.refreshTokenIssued=new Date(e.refresh_token_issued||e.refreshTokenIssued),this.tokenType=e.token_type||e.tokenType,this.userName=e.userName,this.widgetId=e.widgetId,this.widgetToken=e.widgetToken,this.invalid=!1}}function ft(e,t=!1){const s=we(e);return y.create(e=>s.observe(({newValue:t})=>e.next(t),t))}class yt{constructor({tokenServiceUrl:e,widgetTokenServiceUrl:t,storage:s,tokenStorageKey:i,deviceInfo:n,clientId:r}){this.token=null,this.isAuthenticating=!1,this.signOut=()=>{this.isAuthenticating||(this.token=null)},this.signIn=({username:e,password:t,tokenToKick:s,agreedWithTerms:i})=>{if(this.isAuthenticating)return;Me(()=>this.isAuthenticating=!0);const n={username:e,password:t};return s&&(n.kick_refresh_token=s),i&&(n.agree_with_terms=!0),this.fetchTokenBy("password",n).then(e=>(Me(()=>{this.token=e,this.isAuthenticating=!1}),e)).catch(e=>{throw Me(()=>{this.isAuthenticating=!1}),e})},this.invalidateToken=()=>{this.token&&(this.token=Object.assign(Object.assign({},this.token),{invalid:!0}))},this.isAuthenticating=!0,this.storage=s,this.tokenServiceUrl=e,this.widgetTokenServiceUrl=t,this.tokenStorageKey=i,this.deviceInfo=n,this.clientId=r,this.getInitialToken().then(e=>{this.token=e,this.isAuthenticating=!1});const a=ft(()=>this.token),o=a.pipe(D(e=>{if(null===e)return b();const t=E(e).pipe(R(e=>e.widgetId?this.fetchWidgetToken(e):this.fetchTokenBy("refresh_token",{refresh_token:e.refreshToken})),O(e=>e.pipe(R(e=>!e.status||401!==e.status&&403!==e.status&&409!==e.status?e.error&&"refresh_token_error"===e.error||"invalid_grant"===e.error?z(e):k(5e3):z(e)))));if(!e.invalid){const s=Math.max(.75*(+e.accessTokenExpires-Date.now()),0);return k(s).pipe(R(()=>t))}return t}),B(e=>(console.error(e),this.token=null,o)));o.subscribe(e=>{this.token=e,console.warn("token updated")}),a.pipe(I(null),j(),A(([e,t])=>!!(t||!t&&e)),N(([,e])=>this.storeToken(e))).subscribe()}get isAuthenticated(){return Boolean(this.token&&!this.isAuthenticating)}async getTokenFromStorage(){const e=await this.storage.getItem(this.tokenStorageKey);return e?new gt(JSON.parse(e)):null}async storeToken(e){return!e||e.invalid?this.storage.removeItem(this.tokenStorageKey):this.storage.setItem(this.tokenStorageKey,JSON.stringify(e.json))}async getInitialToken(){const e=await this.getTokenFromStorage();if(!e)return null;if(+e.accessTokenExpires>Date.now())return e;if(e.widgetId&&e.widgetToken)return e;if(+e.refreshTokenExpires>Date.now())try{const{refreshToken:t}=e;return await this.fetchTokenBy("refresh_token",{refresh_token:t})}catch(e){this.token=null,this.storeToken(null),console.error("refresh token error",e)}return null}async fetchTokenBy(e,t){const s=Object.assign({grant_type:e,client_id:this.clientId,device:this.deviceInfo},t),i=Object.keys(s).map(e=>`${e}=${encodeURIComponent(s[e])}`).join("&"),n=new Headers;n.append("Content-Type","application/x-www-form-urlencoded"),n.append("accept","application/json");const r=await fetch(this.tokenServiceUrl,{method:"POST",headers:n,body:i});try{const e=await r.json();return 200!==r.status?Promise.reject({status:r.status,data:e}):new gt(e)}catch(e){return Promise.reject(r)}}async fetchWidgetToken(e){const{widgetId:t,widgetToken:s}=e;if(!t||!s)throw new Error("token must contain widgetId and widgetToken");if(!this.widgetTokenServiceUrl)throw new Error("please set widgetTokenServiceUrl");const i={widgetId:t,userKey:s},n=new Headers;n.append("Content-Type","application/x-www-form-urlencoded"),n.append("accept","application/json");const r=Object.keys(i).map(e=>`${e}=${encodeURIComponent(i[e])}`).join("&"),a=await fetch(this.widgetTokenServiceUrl,{method:"POST",headers:n,body:r});try{const e=await a.json();return 200!==a.status?Promise.reject({status:a.status,data:e}):new gt(Object.assign({widgetId:t,widgetToken:s},e))}catch(e){return Promise.reject(a)}}}ut([ke,vt("design:type",Object)],yt.prototype,"token",void 0),ut([ke,vt("design:type",Boolean)],yt.prototype,"isAuthenticating",void 0),ut([we,vt("design:type",Boolean),vt("design:paramtypes",[])],yt.prototype,"isAuthenticated",null),ut([Ce,vt("design:type",Object)],yt.prototype,"signOut",void 0),ut([Ce,vt("design:type",Object)],yt.prototype,"invalidateToken",void 0),function(e){e.Motion="Motion",e.Tampering="Tampering",e.PanTiltZoom="PanTiltZoom",e.CrossLine="CrossLine",e.Start="Start",e.Stop="Stop",e.Restart="Restart",e.Audio="Audio",e.Analytic="Analytic",e.Unknown="Unknown"}(dt||(dt={}));class bt extends Error{constructor(e){const t=`no playback in ${e} seconds`;super(t),this.count=e,"function"==typeof Error.captureStackTrace?Error.captureStackTrace(this,this.constructor):this.stack=new Error(t).stack}get name(){return"PlaybackTimeoutError"}}class Et extends Error{get name(){return"CameraOfflineError"}}class zt extends Error{get name(){return"NoPlayableStreamError"}}class kt extends Error{get name(){return"NoVideoTrackError"}}class wt{constructor(e,t){this.player=e,this.video=t,this.disposables=[],this.seek=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,s=(+e-+this.player.chunk.startTime)/1e3*t;this.video.currentTime=s},this.playNextChunkOnComplete(),this.reactToChunk(),this.initLoadingTimeout()}getCurrentTime(){const e=this.player.chunk;if(!e)return null;const{clip:t}=this.player,s=t&&t.isTimelapse?(+e.endTime-+e.startTime)/e.duration:1e3;return new Date(+e.startTime+this.video.currentTime*s)}reactToChunk(){this.disposables.push(ze(()=>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(()=>{this.player.clip&&this.player.clip.isTimelapse||(this.player.currentTime?this.player.changeMedia({time:new Date(+this.player.currentTime+1e3)}):console.warn("Couldn't jump to the next chunk. Current player time is unknown"))}))}initLoadingTimeout(){this.disposables.push(ft(()=>this.player.loading,!0).pipe(D(e=>e?ft(()=>this.player.loading,!0).pipe(F(3e4)):b())).subscribe(()=>{this.player.error=new bt(30)}))}resetVideo(){const{video:e}=this;e.pause(),e.removeAttribute("src"),e.load()}dispose(){this.disposables.forEach(e=>{e instanceof f?e.closed||e.unsubscribe():e()}),this.resetVideo(),this.player=null}}class Ct{constructor(e,t){this.player=e,this.video=t,this.live=!0,this.disposables=[],this.availabilityStartTime=-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;return e<0?null:this.video.seekable.length?[new Date(e+1e3*this.video.seekable.start(0)),new Date(e+1e3*this.video.seekable.end(0))]:null}seek(e){this.availabilityStartTime<0&&(this.updateAvailabilityStartTime(),this.availabilityStartTime<0)?this.player.seekTime=e:this.video.currentTime=(+e-+this.availabilityStartTime)/1e3}initLoadingTimeout(){this.disposables.push(ft(()=>this.player.loading,!0).pipe(D(e=>e?ft(()=>this.player.loading,!0).pipe(F(3e4)):b())).subscribe(()=>{this.player.error=new bt(Math.round(30))}))}reactToCamera(){this.disposables.push(ze(()=>({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 zt:this.player.error=new Et},{fireImmediately:!0}))}catchUpAfterPause(){this.disposables.push(v(this.video,"play").pipe(A(()=>this.live)).subscribe(()=>{console.log("unpaused live HLS"),this.goLive()}))}dispose(){this.disposables.forEach(e=>{e instanceof f?e.closed||e.unsubscribe():e()})}}var Mt;!function(e){e.Initial="initial",e.Playing="playing",e.Paused="paused",e.Reconnecting="reconnecting",e.Stalled="stalled",e.Error="error"}(Mt||(Mt={}));class xt{constructor(e,t,s){this.player=e,this.video=s,this.hlsPlayer=null,this.live=!1,this.disposables=[],this.state=Mt.Initial,this.seek=e=>{if(!this.hlsPlayer)return;const t=this.hlsPlayer.streamController.fragPlaying;if(!t)return void(this.player.seekTime=e);const s=t.relurl.substr(0,t.relurl.length-3)-1e3*t.start;this.video.currentTime=(+e-s)/1e3,this.live=!1},this.getDateRange=()=>{if(!this.hlsPlayer)return null;const e=this.video.seekable;if(!e.length)return null;const t=e.start(0),s=e.end(e.length-1),i=this.hlsPlayer.streamController.fragPlaying;if(!i)return null;const n=i.relurl.substr(0,i.relurl.length-3)-1e3*i.start;return[new Date(1e3*t+n),new Date(1e3*s+n)]},this.goLive=()=>{this.seek(new Date),this.live=!0},this.live=t,this.disposables.push(ft(()=>this.hlsPlayer,!0).pipe(D(e=>e?new y(t=>{e.on(Te.Events.ERROR,(e,s)=>{t.next(s)})}):b())).subscribe(t=>{console.error(t),t.fatal&&(t.type===Te.ErrorTypes.MEDIA_ERROR&&this.hlsPlayer&&this.hlsPlayer.recoverMediaError(),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(ft(()=>this.live,!0).pipe(D(()=>this.live?ft(()=>this.state,!0).pipe(D(e=>e!==Mt.Playing?b():k(5e3+5e3*Math.random(),3e4))):b())).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(L(()=>{this.state===Mt.Playing||this.player.paused||(this.state=Mt.Playing)}),F(2e3),A(()=>this.state===Mt.Playing)).subscribe(()=>{this.state=Mt.Stalled})),this.disposables.push(ze(()=>this.player.paused,()=>{this.state=Mt.Paused}))}getCurrentTime(){if(!this.hlsPlayer)return null;const e=this.hlsPlayer.streamController.fragPlaying;return e?new Date(+e.relurl.substr(0,e.relurl.length-3)+1e3*(this.video.currentTime-e.start)):null}initLoadingTimeout(){const{player:e}=this;this.disposables.push(ft(()=>e.loading,!0).pipe(D(t=>t?ft(()=>e.loading,!0).pipe(F(3e4)):b())).subscribe(()=>{e.camera.isOnline?e.error=new bt(Math.round(30)):e.error=new Et})),this.disposables.push(ft(()=>this.state,!0).pipe(D(e=>e!==Mt.Stalled?b():k(3e4))).subscribe(()=>{e.camera.isOnline?e.error||(e.error=new bt(Math.round(30))):e.error=new Et}))}reactToCamera(){const{player:e}=this;this.disposables.push(ze(()=>({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 zt:e.error=new Et},{fireImmediately:!0}))}catchUpAfterPause(){this.disposables.push(v(this.video,"play").pipe(A(()=>this.live)).subscribe(this.goLive))}async dispose(){this.disposables.forEach(e=>{e instanceof f?e.closed||e.unsubscribe():e()}),this.hlsPlayer&&this.hlsPlayer.destroy(),this.hlsPlayer=null,this.player=null}}t([ke.ref],xt.prototype,"hlsPlayer",void 0),t([ke],xt.prototype,"live",void 0),t([ke],xt.prototype,"state",void 0),global.Hls=Te;const Tt=new Map;class Rt{constructor(e){this.url=e,this.keepAliveIntervalId=null,this.pluginsCount=0,this.keepAlive=()=>{this.connection.send(JSON.stringify({janus:"keepalive",session_id:this.sessionId,transaction:this.randomString(12)}))},this.init()}registerPlugin(){this.pluginsCount++}deregisterPlugin(){this.pluginsCount--}async init(){const{url:e}=this;this.connection=new Re(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()};this.connection.addEventListener("open",t)}),this.createSession()}stopWhenNoLongerNeeded(){ft(()=>this.pluginsCount,!0).pipe(D(e=>e?b():k(1e4))).subscribe(()=>{this.dispose()})}dispose(){this.connection.close(),Tt.delete(this.url)}async createSession(){const e=this.randomString(12);this.connection.send(JSON.stringify({janus:"create",transaction:e})),this.sessionId=await new Promise((t,s)=>{const i=n=>{const r=JSON.parse(n.data);if(r.transaction===e){if(this.connection.removeEventListener("message",i),"success"===r.janus)return t(r.data.id);s(r.janus.error)}};this.connection.addEventListener("message",i)})}startKeepingAlive(){xe(()=>!!this.sessionId,()=>{v(this.connection,"open").pipe(I(null),D(()=>k(0,3e4).pipe(H(v(this.connection,"close"))))).subscribe(this.keepAlive)})}randomString(e){const t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let s="";for(let i=0;i<e;i++){const e=Math.floor(Math.random()*t.length);s+=t.substring(e,e+1)}return s}}t([ke],Rt.prototype,"sessionId",void 0),t([ke],Rt.prototype,"pluginsCount",void 0);class St{constructor(e,t,s,i=!0){this.tcpOnly=i,this.pc=null,this.stream=null,this.stats=null,this.error=null,this.disposables=[],this.connectionState=null,this.statsRequest=null,this.onplugininit=e=>{if(!e)return;const{cameraId:t,pin:s}=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:s},transaction:this.server.randomString(12)}))},this.pause=()=>{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)}))},this.resume=()=>{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)}))},this.initConnectionState=()=>{this.disposables.push(ft(()=>this.pc,!0).pipe(D(e=>null===e?E(null):v(e,"iceconnectionstatechange").pipe(I(null),S(()=>e.iceConnectionState)))).subscribe(e=>{this.connectionState=e}))},this.initTrack=()=>{this.disposables.push(ft(()=>this.pc,!0).pipe(D(e=>null===e?E(null):g(v(e,"track").pipe(I(null)),v(e,"addstream").pipe(S(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)}))},this.autoCollectStats=()=>{this.disposables.push(ft(()=>this.stream,!0).pipe(D(e=>e?k(0,1e3).pipe(R(()=>this.getStats())):E(null))).subscribe(this.updateStats))},this.server=function(e){if(Tt.has(e))return Tt.get(e);const t=new Rt(e);return Tt.set(e,t),t}(e),this.server.registerPlugin(),this.cameraId=t,this.pin=s,this.autoAttachPlugin(),this.autoCollectStats(),this.initConnectionState(),this.initTrack(),this.disposables.push(ze(()=>this.pluginHandleId,this.onplugininit,{fireImmediately:!0})),this.disposables.push(xe(()=>!!this.server.sessionId,()=>this.disposables.push(v(this.server.connection,"message").subscribe(this.onmessage))))}onmessage({data:e}){const{pluginHandleId:t}=this;if(!t)return;const s=JSON.parse(e);"error"===s.janus&&s.transaction===this.startTransaction&&(this.error=s.error,console.error(s.error)),s.sender&&s.sender===t&&("event"===s.janus&&s.plugindata&&s.plugindata.data&&s.plugindata.data.error&&(this.error=s.plugindata.data,console.error(s.plugindata.data)),s.jsep&&this.onremotedescription(new RTCSessionDescription(s.jsep)))}async onremotedescription(e){const{pluginHandleId:t}=this,s=this.pc;if(!e.sdp)return;const i=[];if(this.tcpOnly){const t=e.sdp.split("\r\n");let s="video";const n={video:[],audio:[]};for(const e of t)e.startsWith("a=mid:audio")?s="audio":e.startsWith("a=mid:video")?s="video":e.startsWith("a=candidate")&&n[s].push(e);const r=t.filter(e=>!(e.startsWith("a=candidate")||e.startsWith("a=end-of-candidates"))),a=e=>"tcp"===e.split(/\s+/)[2],o={video:n.video.filter(a),audio:n.audio.filter(a)};e=new RTCSessionDescription({type:"offer",sdp:[...r].join("\r\n")});let l={audio:[],video:[]};o.video.length?l=o:(console.warn("no video TCP candidates found. Falling back to UDP"),l=n);for(const e in l)l.hasOwnProperty(e)&&l[e].forEach(t=>{i.push(new RTCIceCandidate({candidate:t.replace(/^a=/,""),sdpMLineIndex:0,sdpMid:e}))})}try{await s.setRemoteDescription(e),i.forEach(e=>s.addIceCandidate(e))}catch(e){return this.error=e,void console.error(e)}const n=await s.createAnswer();await s.setLocalDescription(n);const r={type:n.type,sdp:n.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:r,transaction:this.startTransaction})),s.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)}))})}setStream(e){this.disposeDelayedStream&&this.disposeDelayedStream(),null!==e?this.disposeDelayedStream=xe(()=>"completed"===this.connectionState||"connected"===this.connectionState,()=>{this.stream=e}):this.stream=null}autoAttachPlugin(){this.disposables.push(ft(()=>this.server?this.server.sessionId:null,!0).pipe(A(Boolean),D(()=>{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})),v(this.server.connection,"message").pipe(S(({data:e})=>JSON.parse(e)),A(t=>t.transaction===e),W(1))})).subscribe(e=>{if("success"!==e.janus)return this.error=e.error,void console.log(e.error);this.pluginHandleId=e.data.id}))}updateStats(e){if(e){if(this.stats){const t=e.bytesReceived-this.stats.bytesReceived,s=e.timestamp-this.stats.timestamp;e.bitrate=t/s,e.startTime=this.stats.startTime}else e.startTime=e.timestamp;this.stats=e}else this.stats=null}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){const{bytesReceived:s,packetsLost:i,packetsReceived:n,timestamp:r}=e;Object.assign(t,{bytesReceived:s,packetsLost:i,packetsReceived:n,timestamp:r})}else if("track"===e.type){const{frameWidth:s,frameHeight:i,framesDecoded:n,framesDropped:r,framesReceived:a}=e;Object.assign(t,{frameWidth:s,frameHeight:i,framesDecoded:n,framesDropped:r,framesReceived:a})}else if("candidate-pair"===e.type)Object.assign(t,{rtt:1e3*e.currentRoundTripTime});else if("ssrc"===e.type){const s={};e.values.forEach(e=>Object.keys(e).forEach(t=>s[t]=e[t]));const{framesDecoded:i,bytesReceived:n,packetsLost:r,packetsReceived:a,googFrameHeightReceived:o,googFrameWidthReceived:l}=s;Object.assign(t,{frameWidth:+l,frameHeight:+o,framesDecoded:i,bytesReceived:n,packetsLost:r,packetsReceived:a})}}),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 f?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}}t([ke.ref],St.prototype,"pc",void 0),t([ke],St.prototype,"pluginHandleId",void 0),t([ke.ref],St.prototype,"stream",void 0),t([ke.ref],St.prototype,"stats",void 0),t([ke.ref],St.prototype,"error",void 0),t([ke],St.prototype,"connectionState",void 0),t([Ce.bound],St.prototype,"onmessage",null),t([Ce.bound],St.prototype,"setStream",null),t([Ce.bound],St.prototype,"updateStats",null);class Ht{constructor(e){this.player=e,this.disposables=[],this.playerState=null,this.live=!0,this.onRemoteStream=e=>{if(!e){if(this.playerState===Mt.Reconnecting)return;return void(this.player.stream=null)}this.player.stream=e;const t=e.getVideoTracks();t&&0!==t.length||(console.warn("player",this.player.id,"cam",this.player.camera.id,"no video",t),this.player.error=new kt,this.playerState=Mt.Error)},this.player=e,RTCPeerConnection?(this.initStream(),this.initStats(),this.reactToCamera(),this.disposables.push(ft(()=>this.playerState,!0).pipe(D(e=>e!==Mt.Playing?b():ft(()=>this.player.paused).pipe(A(Boolean)))).subscribe(()=>{this.streamingPlugin.pause(),this.playerState=Mt.Paused})),this.disposables.push(ft(()=>this.playerState,!0).pipe(D(e=>e!==Mt.Paused?b():ft(()=>this.player.paused).pipe(A(e=>!e)))).subscribe(()=>{this.streamingPlugin.resume(),this.playerState=Mt.Playing})),this.disposables.push(ft(()=>this.playerState,!0).pipe(D(e=>e!==Mt.Initial?b():ft(()=>this.stream,!0).pipe(D(e=>e?ft(()=>this.streamingPlugin.stats?this.streamingPlugin.stats.framesDecoded:null,!0).pipe(A(Boolean),U(1e4)):b()),W(1)))).subscribe(void 0,e=>{if(e instanceof w)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=Mt.Error,this.player.error=e,console.error(e)})),this.disposables.push(ft(()=>this.playerState,!0).pipe(D(e=>e!==Mt.Initial?b():ft(()=>this.stream,!0).pipe(D(e=>e?ft(()=>this.streamingPlugin.stats?this.streamingPlugin.stats.framesDecoded:null):b()),A(Boolean),W(1)))).subscribe(()=>{this.playerState=Mt.Playing})),this.disposables.push(ft(()=>this.playerState,!0).pipe(D(e=>e!==Mt.Playing?b():ft(()=>this.streamingPlugin.stats?this.streamingPlugin.stats.framesDecoded:null,!0).pipe(A(Boolean),F(1e4)))).subscribe(()=>{console.log("player",this.player.id,"cam",this.player.camera.id,"no new frames in 10000s"),this.playerState=Mt.Reconnecting})),this.disposables.push(ze(()=>this.playerState,e=>{e===Mt.Initial&&(this.player.loading=!0,this.player.error=null)})),this.disposables.push(ze(()=>this.playerState,e=>{e===Mt.Playing&&(this.player.loading=!1,this.player.error=null)})),this.disposables.push(ze(()=>this.playerState,e=>{e===Mt.Reconnecting&&(this.player.loading=!0)})),this.disposables.push(ft(()=>this.playerState,!0).pipe(D(e=>{if(e!==Mt.Reconnecting)return b();this.streamingPlugin&&this.streamingPlugin.dispose();const{webRtcUrl:t,id:s,pin:i}=this.player.camera;return this.streamingPlugin=new St(t,s,i),ft(()=>this.stream,!0).pipe(D(e=>e?ft(()=>this.streamingPlugin.stats?this.streamingPlugin.stats.framesDecoded:null,!0).pipe(A(Boolean),U(3e4)):b()),W(1))})).subscribe(()=>{this.playerState=Mt.Playing},e=>{if(e instanceof w)return console.error("player",this.player.id,"cam",this.player.camera.id,"no frames in 30s after reconnect"),void(this.streamingPlugin.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.playerState=Mt.Error,this.player.error=e,console.error(e)})),this.disposables.push(ft(()=>this.playerState,!0).pipe(D(e=>e!==Mt.Error?b():ft(()=>this.stream,!0).pipe(D(e=>e?ft(()=>this.streamingPlugin.stats?this.streamingPlugin.stats.framesDecoded:null):b()),A(Boolean),W(1)))).subscribe(()=>{this.playerState=Mt.Playing})),this.disposables.push(ze(()=>this.streamingError,e=>{if(console.error(e),e&&(e.message&&e.message.toLowerCase().includes("failed to set remote offer sdp")||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=Mt.Error}))):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 f?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}getCurrentTime(){return this.playerState===Mt.Playing?new Date:null}reactToCamera(){this.disposables.push(ze(()=>({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:s,isOnline:i})=>{this.streamingPlugin&&this.streamingPlugin.dispose(),this.player.loading=!0,i?(this.streamingPlugin=new St(e,t,s),this.playerState=Mt.Initial):(this.player.error=new Et,this.playerState=Mt.Error,this.streamingPlugin=null)},{fireImmediately:!0}))}initStream(){this.disposables.push(ze(()=>this.stream,this.onRemoteStream))}initStats(){this.disposables.push(ze(()=>this.streamingPlugin?this.streamingPlugin.stats:null,e=>{this.player.stats=e}))}}t([ke.ref],Ht.prototype,"streamingPlugin",void 0),t([ke],Ht.prototype,"playerState",void 0),t([we],Ht.prototype,"streamingError",null),t([we],Ht.prototype,"stream",null);class Lt{constructor(e){this.isLive=!0,this.isDvr=!0,this.hasDvr=!0,this.managed=!1,this.setBounds=e=>{[this.startTime,this.endTime]=e},this.streamUrl=e.streamUrl,this.dashStreamUrl=e.dashStreamUrl,this.startTime=e.startTime,this.endTime=e.endTime,this.length=e.length,this.cameraId=e.cameraId}}var Pt;t([ke],Lt.prototype,"startTime",void 0),t([ke],Lt.prototype,"endTime",void 0),t([Ce],Lt.prototype,"setBounds",void 0),function(e){e.Fit="contain",e.Stretch="fill"}(Pt||(Pt={}));const Vt=(()=>{let e=0;return()=>++e})();class Dt{constructor({camera:e,startTime:t,endTime:s,clip:i,archivesStore:n,behaviors:r}){this.id=Vt(),this.disposables=[],this.currentTime=null,this.chunk=null,this.paused=!1,this.loading=!1,this.playbackRate=1,this.volume=1,this.muted=!0,this.videoResizeMode=Pt.Stretch,this.stats=null,this.mode=null,this.behavior=null,this.startTime=null,this.endTime=null,this.stream=null,this.canSeek=!1,this.seek=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")},this.changeMedia=({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}},this.requestArchives=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)),this.toggleResizeMode=()=>{const e=Object.keys(Pt),t=(Object.values(Pt).indexOf(this.videoResizeMode)+1)%e.length;this.videoResizeMode=Pt[e[t]]},this.toggleMute=()=>{this.muted=!this.muted},this.setVolume=e=>{this.volume=e},this.setPlaybackRate=e=>{this.playbackRate=e},this.togglePlayback=()=>{this.paused=!this.paused},this.play=()=>{this.paused=!1},this.pause=()=>{this.paused=!0},this.camera=e,this.startTime=t||null,this.endTime=s||null,this.clip=i,this.archivesStore=n,this.behaviors=r}init(e,{canSeek$:t,progress$:s,muted$:i,volume$:n,ended$:r}){this.video=e,this.canSeek$=t,this.progress$=s,this.ended$=r,this.muted$=i,this.volume$=n,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(ze(()=>({camera:this.camera,startTime:this.startTime}),({startTime:e})=>{Me(()=>{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.goLive(),!this.clip&&this.startTime&&this.changeMedia({time:this.startTime}),this.initUpgradeToWebRtc()}seekAfterReady(){this.disposables.push(this.canSeek$.pipe(D(()=>g(E(null),this.progress$.pipe(W(1))))).pipe(S(()=>this.seekTime),A(Boolean)).subscribe(e=>{this.seekTime=null,this.seek(e)}))}stopLoadingOnError(){this.disposables.push(ze(()=>this.error,e=>{e&&(this.loading=!1)}))}replaceErrorMessageOnOffline(){this.disposables.push(ft(()=>this.error,!0).pipe(D(e=>e?ft(()=>this.camera.isOnline,!1).pipe(A(e=>!e)):b())).subscribe(()=>{this.error instanceof Et||(this.error=new Et)}))}initCurrentTime(){this.disposables.push(this.progress$.pipe(A(()=>!this.seekTime&&!this.chunkRequestTime),A(()=>!this.paused)).subscribe(()=>{if(!this.behavior)return;const e=this.behavior.getCurrentTime();e&&Me(()=>{this.loading=!1,this.error=null,this.currentTime=e})}))}initLiveChunkUpdate(){this.disposables.push(ft(()=>this.liveChunk,!0).pipe(D(e=>e?C(250):b())).subscribe(()=>{Me(()=>{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(ft(()=>this.chunkRequestTime).pipe(D(e=>{if(null===e)return b();const t=this.camera.id,s=this.liveChunk&&this.liveChunk.startTime<e?this.liveChunk:this.archivesStore.getChunks({cameraId:this.camera.id,from:e,to:e})[0];return s?E({chunk:s,time:e}):this.requestArchives(e).pipe(S(()=>({chunk:this.archivesStore.findClosestChunk({cameraId:t,time:e}),time:e})))})).subscribe(({chunk:e,time: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||(this.liveChunk=new Lt({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(ft(()=>this.mode,!0).pipe(N(async e=>{if(this.behavior){const e=this.behavior;this.behavior=null,await e.dispose()}return e})).subscribe(e=>{if(!e)return;const t=this.behaviors[e];this.behavior=t?t(this):null}))}goLive(){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)}fallbackToDVR(){this.seekTime=null,this.mode="DVR",this.chunk=this.liveChunk||null}setCamera(e){this.camera=e}setCameraAndStartTime(e,t){this.camera=e,this.startTime=t}reactToVolumeChange(){this.disposables.push(this.volume$.subscribe(this.setVolume))}dispose(){this.behavior&&(this.behavior.dispose(),this.behavior=null),this.disposables.forEach(e=>{e instanceof f?e.closed||e.unsubscribe():e()}),this.video=null}initUpgradeToWebRtc(){this.behaviors.WebRTC&&this.disposables.push(ft(()=>this.behavior,!0).pipe(D(e=>e&&"DVR"===this.mode?ft(()=>e.live,!0).pipe(D(e=>e?ft(()=>this.camera.isOnline).pipe(D(e=>e?(this.goLive(),b()):b())):b())):b())).subscribe())}}t([ke.ref],Dt.prototype,"liveChunk",void 0),t([ke],Dt.prototype,"currentTime",void 0),t([ke.ref],Dt.prototype,"chunk",void 0),t([ke],Dt.prototype,"paused",void 0),t([ke],Dt.prototype,"loading",void 0),t([ke],Dt.prototype,"error",void 0),t([ke],Dt.prototype,"playbackRate",void 0),t([ke],Dt.prototype,"volume",void 0),t([ke],Dt.prototype,"muted",void 0),t([ke],Dt.prototype,"videoResizeMode",void 0),t([ke.ref],Dt.prototype,"camera",void 0),t([ke.ref],Dt.prototype,"stats",void 0),t([ke],Dt.prototype,"mode",void 0),t([ke.ref],Dt.prototype,"behavior",void 0),t([ke],Dt.prototype,"width",void 0),t([ke],Dt.prototype,"height",void 0),t([ke],Dt.prototype,"chunkRequestTime",void 0),t([ke],Dt.prototype,"startTime",void 0),t([ke],Dt.prototype,"stream",void 0),t([Ce],Dt.prototype,"changeMedia",void 0),t([Ce.bound],Dt.prototype,"goLive",null),t([Ce.bound],Dt.prototype,"fallbackToDVR",null),t([Ce.bound],Dt.prototype,"setCamera",null),t([Ce.bound],Dt.prototype,"setCameraAndStartTime",null),t([Ce],Dt.prototype,"toggleMute",void 0),t([Ce],Dt.prototype,"setVolume",void 0),t([Ce],Dt.prototype,"setPlaybackRate",void 0);class Ot extends i.PureComponent{render(){return i.createElement("svg",Object.assign({focusable:"false",viewBox:"0 0 66 66",className:"spinner"},this.props),i.createElement("circle",{fill:"none",strokeWidth:3,cx:33,cy:33,r:30,stroke:"white"}))}}const Bt=e=>`scale(${e})`,It=({children:e,from:t,style:s}={from:"bottom"})=>{const i=Ne({opacity:1,from:{opacity:0},config:{tension:300}});return l(Fe.div,{style:Object.assign(Object.assign(Object.assign({},s),i),{transform:i.opacity.interpolate(Bt),transformOrigin:`${t} center`,width:"max-content"})},e)},jt=document.body;class At extends i.Component{constructor(e){super(e),this.el=document.createElement("div")}componentDidMount(){jt.appendChild(this.el)}componentWillUnmount(){jt.removeChild(this.el)}render(){return Ae.createPortal(this.props.children,this.el)}}const Nt=({width:e,height:t,color:s,position:n="top",style:r})=>{const a=[0,"top"===n?t:0],o=[e,a[1]],l=[e/2,t-a[1]],h=[e/4,t*("top"===n?3:1)/4],c=[.325*e,t-a[1]],p=[e-c[0],c[1]],m=[e-h[0],h[1]],d=e=>e.join(","),u=`M ${d(a)} `+`C ${d(h)} ${d(c)} ${d(l)} `+`${d(p)} ${d(m)} ${d(o)} Z`;return i.createElement("svg",{className:"tip",style:r,width:e,height:t,fill:s},i.createElement("path",{d:u}))};class Ft extends i.Component{constructor(){super(...arguments),this.state={top:0,left:0,bottom:"auto",tipPosition:"bottom",tipOffset:0},this.targetRef=i.createRef(),this.popoverRef=i.createRef(),this.outsideClickListener=e=>{const t=e.target;if(this.popoverRef.current.contains(t))return;const s=Ae.findDOMNode(this.targetRef.current);s&&s.contains(t)||this.props.onCloseRequest()},this.updatePosition=()=>{if(!this.popoverRef)return;const{disablePortal:e}=this.props,t=Ae.findDOMNode(this.targetRef.current);if(!t)return void console.warn("popover: no target element found");const{top:s,left:i,bottom:n,height:r,width:a}=t.getBoundingClientRect();let o="calc(50% - 12px)",l="auto";const h=this.popoverRef.current;let c="bottom"===this.props.position?n+10:s-h.clientHeight-10,p=i+a/2-h.clientWidth/2,m="bottom"===this.props.position?"top":"bottom";c<0&&(c=n+10,m="top"),p<0&&(p=0,o=i+a/2-12),p+h.clientWidth>window.innerWidth&&(p=window.innerWidth-h.clientWidth,o=i-p+a/2-12),e&&(c=r+10,p=0,o=8,"top"===this.props.position&&(l=c,c="auto")),this.setState({top:c,bottom:l,left:p,tipPosition:m,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:s,tipPosition:n,tipOffset:r}=this.state,{className:a,opened:o,disablePortal:l,disableAnimation:h}=this.props,c={position:"absolute",left:r};"bottom"===n?c.bottom=-8:c.top=-8;const p=$(a,"popover-body");let m=null;if(o){const r={zIndex:l?1:100000001,position:"absolute",top:e,bottom:s,left:t},a=i.createElement("div",{className:p,ref:this.popoverRef},this.props.children,i.createElement(Nt,{width:24,height:8,position:n,color:"white",style:c}));m=h?i.createElement("div",{className:"popover-wrapper",style:r},a):i.createElement(It,{from:n,style:r},a)}const d=i.cloneElement(this.props.target,{ref:this.targetRef});if(l)return i.createElement("div",{className:"popover",onMouseLeave:this.props.onMouseLeave},d,m);const u=o&&i.createElement(At,null,m);return i.createElement(i.Fragment,null,d,u)}startOutsideClickListening(){document.addEventListener("mousedown",this.outsideClickListener,!0)}stopOutsideClickListening(){document.removeEventListener("mousedown",this.outsideClickListener,!0)}}let Wt=class extends i.Component{constructor(){super(...arguments),this.statsOpened=!1,this.toggleStats=e=>{e.preventDefault(),this.statsOpened=!this.statsOpened}}get statsEnabled(){return Boolean(this.context.stats)}render(){if(!this.statsEnabled)return null;if(!this.statsOpened)return i.createElement("details",{open:this.statsOpened,style:{pointerEvents:"auto"}},i.createElement("summary",{onClick:this.toggleStats},"more"));const e=this.context.stats,t=e.timestamp-e.startTime,s=e.bytesReceived/t,n=e.packetsReceived?Math.round(e.packetsLost/(e.packetsLost+e.packetsReceived)*100):0;return i.createElement("details",{open:this.statsOpened,style:{pointerEvents:"auto"}},i.createElement("summary",{onClick:this.toggleStats},"more"),i.createElement("div",null,"frame width: ",e.frameWidth),i.createElement("div",null,"frame height: ",e.frameHeight),i.createElement("div",null,"bitrate: ",Math.round(8*e.bitrate)," kbit/s"),i.createElement("div",null,"average bitrate: ",Math.round(8*s)," kbit/s"),i.createElement("div",null,"elapsed time: ",Math.floor(t/1e3)," s"),i.createElement("div",null,"packets loss:"," ",i.createElement("span",{style:{color:n<10?"green":n<50?"yellow":"red"}},n,"%")),i.createElement("div",null,"packets received: ",e.packetsReceived),i.createElement("div",null,"packets lost: ",e.packetsLost),i.createElement("div",null,"frames received: ",e.framesReceived),i.createElement("div",null,"frames decoded: ",e.framesDecoded),i.createElement("div",null,"frames dropped: ",e.framesDropped),i.createElement("div",null,"round-trip time: ",e.rtt))}};Wt.contextType=Ue,t([ke],Wt.prototype,"statsOpened",void 0),t([we],Wt.prototype,"statsEnabled",null),Wt=t([c],Wt);var Ut=Wt;let $t=class extends i.Component{constructor(){super(...arguments),this.cameraPopoverOpened=!1}get statsEnabled(){return Boolean(this.context.stats)}render(){const e=this.context;return i.createElement(Ft,{className:"camera-name-popover",opened:this.cameraPopoverOpened,onCloseRequest:()=>this.cameraPopoverOpened=!1,position:"bottom",ignoreOutsideClick:!0,disablePortal:!0,target:i.createElement("div",{className:"camera-name",onClick:()=>this.cameraPopoverOpened=!this.cameraPopoverOpened},e.camera.name)},i.createElement("div",null,"id:"," ",i.createElement(qe,{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)),i.createElement("div",null,"provider: ",e.mode),i.createElement(Ut,null))}};$t.contextType=Ue,t([ke],$t.prototype,"cameraPopoverOpened",void 0),t([we],$t.prototype,"statsEnabled",null),$t=t([c],$t);var qt=$t;const _t=x(()=>{const e=o(Ue),t=o(We);return"syncedPlayers"in t?e.behavior&&e.behavior instanceof Ht?null:i.createElement("div",{className:"current-time"+(t.syncedPlayers.players.includes(e)?" synced":"")},e.currentTime&&(s=e.currentTime,fe(s,new Date)?nt(s,"HH:mm:ss"):nt(s,"PP HH:mm:ss"))):null;var s});_t.displayName="CurrentTimeIndicator";const Jt=x(()=>{const e=o(Ue);return e.endTime?null:e.camera.isOnline?e.error?null:e.behavior&&e.behavior.live&&e.behavior.delay&&e.behavior.delay>1?i.createElement(qe,{className:"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)):!e.paused&&(e.behavior&&e.behavior instanceof Ht)?i.createElement("div",{className:"live-indicator"},st.t("playerTools.live")):i.createElement(qe,{style:{pointerEvents:"auto"},className:"button-go-live",onClick:e.goLive,tabIndex:-1},"go live"):null});Jt.displayName="LiveIndicator";let Yt=class extends i.Component{constructor(){super(...arguments),this.elementRef=i.createRef()}get player(){return this.context}componentDidMount(){this.elementRef.current.addEventListener("animationend",()=>{this.elementRef.current.style.display="none"})}componentDidUpdate(){this.elementRef.current.style.display="block"}render(){const{player:e}=this;return i.createElement("div",{ref:this.elementRef,className:"playback-indicator"},i.createElement(ot,{size:32,name:e.paused?"pause":"play",color:"rgba(255, 255, 255, 0.8)"}))}};Yt.contextType=Ue,Yt=t([c],Yt);var Zt=Yt;const Kt=180/Math.PI;class Xt extends i.Component{constructor(){super(...arguments),this.disposables=[],this.previewWidth=200,this.previewHeight=120,this.zoomContainerRef=i.createRef(),this.zoomPreviewRef=i.createRef(),this.zoomValue=1,this.rotationCenter=null,this.rotation=0,this.rotationDelta=0,this.startAngle=0,this.initRotation=()=>{this.zoom.filter(()=>"mousedown"!==Se.type||!Se.altKey),this.disposables.push(v(this.zoomContainerRef.current,"mousedown").pipe(R(e=>{if(!e.altKey)return b();e.preventDefault(),this.player.videoResizeMode=Pt.Fit;const{top:t,left:s}=this.zoomContainerRef.current.getBoundingClientRect(),i=Le(this.zoomContainerRef.current),n=s+this.width/2*i.k+i.x,r=t+this.height/2*i.k+i.y,a={x:this.width/2*i.k+i.x,y:this.height/2*i.k+i.y};return this.startAngle=Kt*Math.atan2(e.clientY-r,e.clientX-n),v(document,"mousemove").pipe(L(e=>{const t=Kt*Math.atan2(e.clientY-r,e.clientX-n);this.rotationDelta=t-this.startAngle,this.props.zoomed(Xt.getTransformMatrixString(i,this.rotation+this.rotationDelta,a))}),H(v(document,"mouseup").pipe(L(()=>Me(()=>{this.rotation+=this.rotationDelta,this.rotationDelta=0})))))})).subscribe())},this.resetRotation=()=>{const e=Le(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(Xt.getTransformMatrixString(e,this.rotation,t))},this.zoomed=()=>{const{transform:e}=Se,t={x:this.width/2*e.k+e.x,y:this.height/2*e.k+e.y};if(this.props.zoomed(Xt.getTransformMatrixString(e,this.rotation,t)),this.zoomValue=Math.round(10*e.k)/10,Se.sourceEvent&&Se.sourceEvent.target!==this.previewZoom){const t=1/e.k,s=-e.x/(this.width/this.previewWidth)*t,i=-e.y/(this.height/this.previewHeight)*t,n=Pe.translate(s,i).scale(t);this.previewZoom.transform(He(this.zoomPreviewRef.current),n)}},this.previewZoomed=()=>{const{transform:e}=Se,t=He(this.zoomPreviewRef.current).select(".zoomable");if(Se.sourceEvent&&Se.sourceEvent.target!==this.zoom){this.constrainPreviewZoom();const t=1/e.k,s=-e.x*(this.width/this.previewWidth)*t,i=-e.y*(this.height/this.previewHeight)*t,n=Pe.translate(s,i).scale(t);this.zoom.transform(He(this.zoomContainerRef.current),n)}t.style("transform",`translate(${e.x}px,${e.y}px) scale(${e.k})`),t.style("transform-origin","0 0")},this.constrainPreviewZoom=()=>{Se.transform.x<0&&(Se.transform.x=0),Se.transform.invertX(this.previewWidth)<this.previewWidth&&(Se.transform.x=this.previewWidth*(1-Se.transform.k)),Se.transform.y<0&&(Se.transform.y=0),Se.transform.invertY(this.previewHeight)<this.previewHeight&&(Se.transform.y=this.previewHeight*(1-Se.transform.k))}}get player(){return this.context}static getTransformMatrixString(e,t,s){const i=De(e.x,e.y),n=Oe(e.k),r=Be(i,n),a=[De(s.x,s.y),Ie(t),De(-s.x,-s.y),r].reduce(Be);return je(a)}get currentRotation(){return(this.rotation+this.rotationDelta+360)%360}componentDidMount(){this.width=this.zoomContainerRef.current.clientWidth,this.height=this.zoomContainerRef.current.clientHeight,this.zoom=Ve().scaleExtent([1,4]).translateExtent([[0,0],[this.width,this.height]]).extent([[0,0],[this.width,this.height]]).on("zoom",this.zoomed),this.previewZoom=Ve().scaleExtent([.25,1]).on("zoom",this.previewZoomed),this.zoomContainerRef.current.addEventListener("mousedown",this.props.onMouseDown,!0),this.zoom(He(this.zoomContainerRef.current)),He(this.zoomContainerRef.current).on("dblclick.zoom",null),this.previewZoom(He(this.zoomPreviewRef.current)),He(this.zoomPreviewRef.current).on("dblclick.zoom",null),this.initRotation()}componentWillUnmount(){He(this.zoomContainerRef.current).on(".zoom",null),this.disposables.forEach(e=>{e instanceof f?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 s=this.width,i=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]]),!s||!i)return;const n=Le(this.zoomContainerRef.current),r=n.x*this.width/s,a=n.y*this.height/i,o=(r-n.x)/n.k,l=(a-n.y)/n.k;this.zoom.translateBy(He(this.zoomContainerRef.current),o,l)}renderError(e){return e?e instanceof bt?st.t("player.playbackTimeoutError",{count:e.count}):e instanceof Et?this.player.camera.enabled?st.t("player.cameraIsOffline"):st.t("player.cameraIsDisabled"):e instanceof zt?st.t("player.noPlayableStream"):e instanceof kt?st.t("player.noVideoTrack"):"error_code"in e&&!this.player.camera.isOnline?this.player.camera.enabled?st.t("player.cameraIsOffline"):st.t("player.cameraIsDisabled"):"code"in e?st.t("player.genericError"):"details"in e?this.player.camera.isOnline?st.t("player.genericError"):this.player.camera.enabled?st.t("player.cameraIsOffline"):st.t("player.cameraIsDisabled"):st.t("player.genericError"):null}render(){const{player:e}=this,t=`zoom-slider-${e.id}`;return i.createElement(i.Fragment,null,i.createElement("div",{className:"player-overlay"},i.createElement("div",{ref:this.zoomContainerRef,style:{position:"absolute",top:0,bottom:0,left:0,right:0},onDoubleClick:this.props.onDoubleClick||M}),i.createElement(Zt,null),i.createElement("div",{className:"indicators"},this.props.hideCameraTitle?null:i.createElement(qt,null),i.createElement("div",{style:{flex:1}}),i.createElement(Jt,null),i.createElement(_t,null)),i.createElement(p,null,()=>i.createElement(i.Fragment,null,e.loading&&i.createElement(Ot,{style:{pointerEvents:"none",position:"absolute",top:"calc(50% - 33px)",left:"calc(50% - 33px)"}}),e.error&&i.createElement("div",{style:{position:"absolute",top:0,left:0,bottom:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"}},i.createElement("span",{style:{backgroundColor:"rgba(0, 0, 0, 0.5)",padding:"8px 16px",fontSize:12}},this.renderError(e.error))))),this.props.children),i.createElement(p,null,()=>i.createElement(i.Fragment,null,i.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: white;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t`),i.createElement("div",{id:t,className:"zoom-slider"},Array.from(Array(11)).map((e,t)=>i.createElement("div",{key:t,className:"tick"})),i.createElement(qe,{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),"°")),i.createElement("div",{ref:this.zoomPreviewRef,className:"zoom-preview",style:{width:this.previewWidth,height:this.previewHeight},tabIndex:-1},i.createElement("div",{className:"zoom-value"},`${this.zoomValue}x`),i.createElement("div",{className:"zoomable"})))))}}Xt.contextType=Ue,t([ke],Xt.prototype,"zoomValue",void 0),t([ke],Xt.prototype,"zoomPreviewVisible",void 0),t([ke],Xt.prototype,"rotation",void 0),t([ke],Xt.prototype,"rotationDelta",void 0),t([we],Xt.prototype,"currentRotation",null);const Gt=new URLSearchParams(location.search.toLowerCase()),Qt=Gt.has("dash")||Gt.has("dvr");let es=class extends i.Component{constructor(e,t){super(e,t),this.disposables=[],this.videoElementRef=i.createRef(),this.zoomableRef=i.createRef(),this.containerRef=i.createRef(),this.resizeObserver=null,this.zoomed=e=>{this.zoomableRef.current&&(this.zoomableRef.current.style.transform=e,this.zoomableRef.current.style.transformOrigin="0 0")},this.onDoubleClick=e=>{e.currentTarget===e.target&&this.props.onDoubleClick&&this.props.onDoubleClick()},this.onMouseDown=e=>{e.currentTarget===e.target&&this.props.onMouseDown&&this.props.onMouseDown()};const{startTime:s,endTime:n,clip:r,camera:a}=e,o=Qt||this.props.disableWebRtc;this.controller=new Dt({camera:a,startTime:s,endTime:n,clip:r,archivesStore:this.context.archives,behaviors:{archive:e=>new wt(e,this.video),DVR:e=>{const t=!!navigator.platform&&/iPad|iPhone|iPod/.test(navigator.platform);return"MediaSource"in window||!t?new xt(e,Qt,this.video):new Ct(e,this.video)},WebRTC:o?null:e=>new Ht(e)}})}get video(){return this.videoElementRef.current}componentDidMount(){this.adapter=new pt(this.video,this.controller),this.resizeObserver=new d(e=>{for(const t of e){const e=t.contentRect.width,s=t.contentRect.height;this.controller.width=e,this.controller.height=s}}),this.resizeObserver.observe(this.containerRef.current)}componentWillUnmount(){this.disposables.forEach(e=>{e instanceof f?e.closed||e.unsubscribe():e()}),this.adapter.dispose(),this.controller.dispose(),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.startTime=this.props.startTime||null)}render(){const{muted:e,paused:t}=this.controller,s="eventSearchPanel"in this.context,n=`player ${t?"paused":""}`;return i.createElement("div",{ref:this.containerRef,id:`player-${this.controller.id}`,className:n},i.createElement("div",{ref:this.zoomableRef,className:"zoomable"},i.createElement("video",{autoPlay:!0,crossOrigin:"anonymous",playsInline:!0,ref:this.videoElementRef,muted:e,style:{objectFit:this.controller.videoResizeMode}})),i.createElement(Ue.Provider,{value:this.controller},i.createElement(Xt,{zoomed:this.zoomed,onDoubleClick:this.props.onDoubleClick,onMouseDown:this.onMouseDown,width:this.controller.width,height:this.controller.height,hideCameraTitle:this.props.hideCameraTitle},this.props.controls),s?i.createElement(ct,null):null))}};es.contextType=We,es=t([c],es);var ts=es;let ss=class extends i.Component{render(){return i.createElement(qe,{className:"control close",onClick:this.props.onClick,title:st.t("playerTools.closePlayer")},i.createElement(ot,{size:24,name:"jam-close",color:"currentColor"}))}};ss=t([c],ss);var is=ss;let ns=class extends i.Component{constructor(){super(...arguments),this.containerRef=i.createRef(),this.reflow=()=>{var e,t;const s=this.containerRef.current;if(!s)return;if(s.classList.contains("compact")&&(s.classList.remove("compact"),Array.from(s.children).filter(e=>e.classList.contains("reflowed")).forEach(e=>{e.style.position="",e.style.bottom="",e.style.right="",e.classList.remove("reflowed")})),s.classList.contains("spaced")&&(s.classList.remove("spaced"),s.querySelectorAll(".before-spacer").forEach(e=>e.classList.remove("before-spacer"))),s.scrollWidth-s.offsetWidth<=0){(null===(e=s.querySelector(".spacer"))||void 0===e?void 0:e.clientWidth)&&s.classList.add("spaced");for(const e of s.querySelectorAll(".spacer"))null===(t=e.previousElementSibling)||void 0===t||t.classList.add("before-spacer");return}s.classList.add("compact");const i=Array.from(s.children);let n=2,r=n;for(;s.scrollWidth-s.offsetWidth>0&&n<=i.length;){const e=i[i.length-n];e&&!e.classList.contains("spacer")?(e.style.position="absolute",e.style.bottom=`${8+38*(r-1)}px`,e.style.right="8px",e.classList.add("reflowed"),n++,r++):n++}},this.onMouseEnter=()=>{this.containerRef.current&&this.containerRef.current.classList.add("over")},this.onMouseLeave=()=>{this.containerRef.current&&this.containerRef.current.classList.remove("over")}}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=ze(()=>this.player.width,this.reflow))}componentWillUnmount(){this.mutationObserver.disconnect(),this.resizeReactionDisposer()}render(){return i.createElement("div",{ref:this.containerRef,className:"controls"},this.props.children)}};ns.contextType=Ue,ns.Spacer=()=>i.createElement("div",{className:"spacer"}),ns=t([c],ns);var rs=ns;let as=class extends i.Component{render(){return i.createElement(qe,{className:"control control-fullscreen",onClick:this.props.onClick,title:st.t("playerTools.fullScreen")},i.createElement(ot,{size:24,name:"fullscreen",color:"currentColor"}))}};as=t([c],as);var os=as;const ls=[{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"}];let hs=class extends i.Component{constructor(){super(...arguments),this.opened=!1,this.changePlaybackRate=e=>{e in ls?this.player.setPlaybackRate(ls[e].value):console.warn("got invalid value from reel, ignoring")}}get player(){return this.context}toggle(){this.opened=!this.opened}close(){this.opened=!1}render(){if("WebRTC"===this.player.mode)return null;const{opened:e}=this;let t=ls.findIndex(e=>e.value===this.player.playbackRate);-1===t&&(t=1);const s=i.createElement(qe,{className:"control control-playbackrate",onClick:this.toggle,title:st.t("playerTools.setPlaybackRate")},ls[t].name);return i.createElement(Ft,{target:s,opened:e,onCloseRequest:this.close},i.createElement(Ze,{from:0,to:ls.length-1,min:0,max:ls.length-1,format:e=>ls[e].name,onChange:this.changePlaybackRate,value:t}))}};hs.contextType=Ue,t([ke],hs.prototype,"opened",void 0),t([Ce.bound],hs.prototype,"toggle",null),t([Ce.bound],hs.prototype,"close",null),hs=t([c],hs);var cs=hs;let ps=class extends i.Component{render(){const e=this.context;return i.createElement(qe,{className:"control playpause",onClick:e.togglePlayback,title:e.paused?st.t("playerTools.play"):st.t("playerTools.pause")},i.createElement(ot,{size:16,name:e.paused?"jam-play":"jam-pause",color:"currentColor"}))}};ps.contextType=Ue,ps=t([c],ps);var ms=ps;let ds=class extends i.Component{render(){const e=this.context;return i.createElement(qe,{className:"control",onClick:e.toggleResizeMode,title:st.t("playerTools.changePlayerResizeMode")},i.createElement(ot,{size:16,name:"aspect-ratio",color:"currentColor"}))}};ds.contextType=Ue,ds=t([c],ds);var us=ds;let vs=class extends i.Component{constructor(){super(...arguments),this.getSnapshot=()=>{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 s=e.toDataURL("image/jpeg"),i=atob(s.substring("data:image/jpeg;base64,".length)),n=new Uint8Array(i.length);for(let e=0,t=i.length;e<t;++e)n[e]=i.charCodeAt(e);const r=new Blob([n.buffer],{type:"application/octet-stream"}),a=document.createElement("a");a.href=URL.createObjectURL(r);const o=`${this.player.camera.name} ${nt(this.player.currentTime||new Date,"yyyy:MM:dd HH:mm:ss")}`;a.download=`${o}.jpg`,document.body.appendChild(a),a.click()}}get player(){return this.context}render(){return i.createElement(qe,{className:"control",onClick:this.getSnapshot,title:st.t("playerTools.snapshot")},i.createElement(ot,{size:16,name:"jam-camera",color:"currentColor"}))}};vs.contextType=Ue,vs=t([c],vs);var gs=vs;let fs=class extends i.Component{constructor(){super(...arguments),this.opened=!1,this.close=()=>{this.opened=!1},this.toggle=()=>{this.opened=!this.opened},this.open=()=>{this.opened=!0},this.changeVolume=e=>{this.player.setVolume(Number(e.target.value)/100)},this.preventButtonClick=e=>{e.stopPropagation()}}get player(){return this.context}render(){return i.createElement(qe,{className:"volume-control control",title:st.t("playerTools.volume"),onClick:this.player.toggleMute},i.createElement(ot,{size:16,name:this.player.muted?"jam-volume-mute":"jam-volume-down",color:"currentColor"}),i.createElement("div",{onClick:this.preventButtonClick,className:"volume-range"},i.createElement("input",{type:"range",min:0,max:100,value:100*this.player.volume,onChange:this.changeVolume})))}};fs.contextType=Ue,t([ke],fs.prototype,"opened",void 0),fs=t([c],fs);var ys=fs;let bs=class extends i.Component{render(){return i.createElement(i.Fragment,null,i.createElement(rs,null,i.createElement(ms,null),i.createElement(ys,null),i.createElement(cs,null),i.createElement(us,null),i.createElement(rs.Spacer,null),i.createElement(gs,null),i.createElement(os,{onClick:this.props.onRequestToggleFullscreen}),i.createElement(is,{onClick:this.props.onRequestClose})))}};bs=t([c],bs);var Es=bs;let zs=class extends i.Component{constructor(){super(...arguments),this.playerRef=i.createRef(),this.onFullscreenRequest=()=>{this.playerRef.current&&this.playerRef.current.containerRef.current&&m&&m.toggle(this.playerRef.current.containerRef.current)}}render(){if(!h.cameras.loaded)return null;const e=this.props.cameraId?h.cameras.camerasById.get(this.props.cameraId):null;return e?i.createElement(We.Provider,{value:h},i.createElement(ts,{ref:this.playerRef,hideCameraTitle:!0,camera:e,controls:i.createElement(Es,{onRequestClose:this.props.onRequestClose,onRequestToggleFullscreen:this.onFullscreenRequest}),startTime:this.props.startTime})):null}};zs=t([c],zs);var ks=zs;export default ks;
|