@3deye-toolkit/react-event-list 0.0.1-alpha.24 → 0.0.1-alpha.25
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-event-list.css +141 -278
- package/dist/react-event-list.js +1 -1
- package/package.json +6 -7
- package/dist/react-event-list.d.ts +0 -73
|
@@ -21,12 +21,21 @@
|
|
|
21
21
|
-moz-user-select: none;
|
|
22
22
|
-ms-user-select: none;
|
|
23
23
|
user-select: none;
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
display: inline-flex;
|
|
25
|
+
justify-content: center;
|
|
26
|
+
align-items: center;
|
|
26
27
|
border-radius: 4px;
|
|
28
|
+
letter-spacing: .0107142857em;
|
|
29
|
+
font-weight: 500;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.x-3deye-button sup {
|
|
33
|
+
position: relative;
|
|
34
|
+
top: -0.5em;
|
|
35
|
+
left: 0.25em;
|
|
27
36
|
}
|
|
28
37
|
|
|
29
|
-
.x-3deye-button.fullwidth {
|
|
38
|
+
.x-3deye-button.x-3deye-button--fullwidth {
|
|
30
39
|
width: 100%;
|
|
31
40
|
}
|
|
32
41
|
|
|
@@ -49,50 +58,49 @@
|
|
|
49
58
|
opacity: 0.4;
|
|
50
59
|
}
|
|
51
60
|
|
|
52
|
-
.x-3deye-button.x-3deye-button--ok,
|
|
53
|
-
.x-3deye-button.x-3deye-button--cancel {
|
|
54
|
-
color: white;
|
|
55
|
-
text-transform: none;
|
|
56
|
-
min-width: 80px;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.x-3deye-button.x-3deye-button--ok.fullwidth,
|
|
60
|
-
.x-3deye-button.x-3deye-button--cancel.fullwidth {
|
|
61
|
-
width: calc(100% - 8px);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
61
|
.x-3deye-button:not(:disabled) {
|
|
65
62
|
cursor: pointer;
|
|
66
63
|
}
|
|
67
64
|
|
|
68
|
-
.x-3deye-button.x-3deye-button--
|
|
69
|
-
|
|
65
|
+
.x-3deye-button.x-3deye-button--filled,
|
|
66
|
+
.x-3deye-button.x-3deye-button--text {
|
|
67
|
+
min-width: 80px;
|
|
68
|
+
text-transform: capitalize;
|
|
69
|
+
font-family: 'Roboto', sans-serif;
|
|
70
|
+
font-size: 0.875rem;
|
|
71
|
+
font-weight: 500;
|
|
72
|
+
border-radius: 0.25rem;
|
|
73
|
+
padding: 0 1rem;
|
|
70
74
|
}
|
|
71
75
|
|
|
72
|
-
.x-3deye-button.x-3deye-button--
|
|
76
|
+
.x-3deye-button.x-3deye-button--filled {
|
|
77
|
+
background-color: #27b9a1;
|
|
78
|
+
color: white;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.x-3deye-button.x-3deye-button--filled:not(:disabled):hover {
|
|
73
82
|
background-color: #61beaf;
|
|
74
83
|
}
|
|
75
84
|
|
|
76
|
-
.x-3deye-button.x-3deye-button--
|
|
85
|
+
.x-3deye-button.x-3deye-button--filled:focus {
|
|
77
86
|
transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
78
87
|
box-shadow: 0 0 0 2px rgba(39, 185, 161, 0.33);
|
|
79
88
|
}
|
|
80
89
|
|
|
81
|
-
.x-3deye-button
|
|
82
|
-
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.x-3deye-button.x-3deye-button--cancel:not(:disabled):hover {
|
|
86
|
-
background-color: rgb(142, 122, 180);
|
|
90
|
+
.x-3deye-button canvas {
|
|
91
|
+
color: rgb(var(--surface-highlight-rgb));
|
|
87
92
|
}
|
|
88
93
|
|
|
89
|
-
.x-3deye-button
|
|
90
|
-
|
|
91
|
-
|
|
94
|
+
.x-3deye-button--overlay {
|
|
95
|
+
pointer-events: auto;
|
|
96
|
+
background: rgba(0, 0, 0, 0.5);
|
|
97
|
+
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
98
|
+
color: white;
|
|
92
99
|
}
|
|
93
100
|
|
|
94
|
-
.x-3deye-button
|
|
95
|
-
|
|
101
|
+
.x-3deye-button.x-3deye-button--overlay:focus, .x-3deye-button.x-3deye-button--overlay:not(:disabled):hover {
|
|
102
|
+
background: rgba(0, 0, 0, 0.5);
|
|
103
|
+
border: 2px solid rgba(255, 255, 255, 0.5);
|
|
96
104
|
}
|
|
97
105
|
|
|
98
106
|
:root {
|
|
@@ -610,7 +618,7 @@
|
|
|
610
618
|
.react-datepicker__quarter-text--keyboard-selected,
|
|
611
619
|
.react-datepicker__year-text--keyboard-selected {
|
|
612
620
|
border-radius: 0.3rem;
|
|
613
|
-
background-color: #
|
|
621
|
+
background-color: #2579ba;
|
|
614
622
|
color: #fff;
|
|
615
623
|
}
|
|
616
624
|
.react-datepicker__day--keyboard-selected:hover,
|
|
@@ -907,7 +915,8 @@
|
|
|
907
915
|
.segmented-control-wrapper {
|
|
908
916
|
display: inline-grid;
|
|
909
917
|
border-radius: 6px;
|
|
910
|
-
background: rgba(0, 0, 0, 0.065);
|
|
918
|
+
/* background: rgba(0, 0, 0, 0.065); */
|
|
919
|
+
background-color: var(--surface-inverse);
|
|
911
920
|
}
|
|
912
921
|
|
|
913
922
|
.segmented-control {
|
|
@@ -965,277 +974,131 @@
|
|
|
965
974
|
color: black;
|
|
966
975
|
}
|
|
967
976
|
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
973
|
-
* found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
|
|
974
|
-
*/
|
|
975
|
-
@-webkit-keyframes mdc-slider-emphasize {
|
|
976
|
-
0% {
|
|
977
|
-
-webkit-animation-timing-function: ease-out;
|
|
978
|
-
animation-timing-function: ease-out;
|
|
979
|
-
}
|
|
980
|
-
50% {
|
|
981
|
-
-webkit-animation-timing-function: ease-in;
|
|
982
|
-
animation-timing-function: ease-in;
|
|
983
|
-
transform: scale(0.85);
|
|
984
|
-
}
|
|
985
|
-
100% {
|
|
986
|
-
transform: scale(0.571);
|
|
987
|
-
}
|
|
988
|
-
}
|
|
989
|
-
@keyframes mdc-slider-emphasize {
|
|
990
|
-
0% {
|
|
991
|
-
-webkit-animation-timing-function: ease-out;
|
|
992
|
-
animation-timing-function: ease-out;
|
|
993
|
-
}
|
|
994
|
-
50% {
|
|
995
|
-
-webkit-animation-timing-function: ease-in;
|
|
996
|
-
animation-timing-function: ease-in;
|
|
997
|
-
transform: scale(0.85);
|
|
998
|
-
}
|
|
999
|
-
100% {
|
|
1000
|
-
transform: scale(0.571);
|
|
1001
|
-
}
|
|
1002
|
-
}
|
|
1003
|
-
.mdc-slider {
|
|
1004
|
-
position: relative;
|
|
1005
|
-
width: 100%;
|
|
1006
|
-
height: 48px;
|
|
1007
|
-
cursor: pointer;
|
|
1008
|
-
touch-action: pan-x;
|
|
1009
|
-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
1010
|
-
}
|
|
1011
|
-
.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track {
|
|
1012
|
-
background-color: #018786;
|
|
1013
|
-
/* @alternate */
|
|
1014
|
-
background-color: var(--mdc-theme-secondary, #018786);
|
|
1015
|
-
}
|
|
1016
|
-
.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track-container::after {
|
|
1017
|
-
background-color: #018786;
|
|
1018
|
-
/* @alternate */
|
|
1019
|
-
background-color: var(--mdc-theme-secondary, #018786);
|
|
1020
|
-
opacity: 0.26;
|
|
1021
|
-
}
|
|
1022
|
-
.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track-marker-container {
|
|
1023
|
-
background-color: #018786;
|
|
1024
|
-
/* @alternate */
|
|
1025
|
-
background-color: var(--mdc-theme-secondary, #018786);
|
|
1026
|
-
}
|
|
1027
|
-
.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb {
|
|
1028
|
-
fill: #018786;
|
|
1029
|
-
/* @alternate */
|
|
1030
|
-
fill: var(--mdc-theme-secondary, #018786);
|
|
1031
|
-
stroke: #018786;
|
|
1032
|
-
/* @alternate */
|
|
1033
|
-
stroke: var(--mdc-theme-secondary, #018786);
|
|
1034
|
-
}
|
|
1035
|
-
.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__focus-ring {
|
|
1036
|
-
background-color: #018786;
|
|
1037
|
-
/* @alternate */
|
|
1038
|
-
background-color: var(--mdc-theme-secondary, #018786);
|
|
1039
|
-
}
|
|
1040
|
-
.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__pin {
|
|
1041
|
-
background-color: #018786;
|
|
1042
|
-
/* @alternate */
|
|
1043
|
-
background-color: var(--mdc-theme-secondary, #018786);
|
|
1044
|
-
}
|
|
1045
|
-
.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__pin {
|
|
1046
|
-
color: white;
|
|
1047
|
-
/* @alternate */
|
|
1048
|
-
color: var(--mdc-theme-text-primary-on-dark, white);
|
|
1049
|
-
}
|
|
1050
|
-
.mdc-slider--disabled {
|
|
1051
|
-
cursor: auto;
|
|
1052
|
-
}
|
|
1053
|
-
.mdc-slider--disabled .mdc-slider__track {
|
|
1054
|
-
background-color: #9a9a9a;
|
|
1055
|
-
}
|
|
1056
|
-
.mdc-slider--disabled .mdc-slider__track-container::after {
|
|
1057
|
-
background-color: #9a9a9a;
|
|
1058
|
-
opacity: 0.26;
|
|
1059
|
-
}
|
|
1060
|
-
.mdc-slider--disabled .mdc-slider__track-marker-container {
|
|
1061
|
-
background-color: #9a9a9a;
|
|
1062
|
-
}
|
|
1063
|
-
.mdc-slider--disabled .mdc-slider__thumb {
|
|
1064
|
-
fill: #9a9a9a;
|
|
1065
|
-
stroke: #9a9a9a;
|
|
1066
|
-
}
|
|
1067
|
-
.mdc-slider--disabled .mdc-slider__thumb {
|
|
1068
|
-
/* @alternate */
|
|
1069
|
-
stroke: white;
|
|
1070
|
-
stroke: var(--mdc-slider-bg-color-behind-component, white);
|
|
1071
|
-
}
|
|
1072
|
-
.mdc-slider:focus {
|
|
1073
|
-
outline: none;
|
|
1074
|
-
}
|
|
1075
|
-
.mdc-slider__track-container {
|
|
1076
|
-
position: absolute;
|
|
1077
|
-
top: 50%;
|
|
1078
|
-
width: 100%;
|
|
1079
|
-
height: 2px;
|
|
1080
|
-
overflow: hidden;
|
|
1081
|
-
}
|
|
1082
|
-
.mdc-slider__track-container::after {
|
|
1083
|
-
position: absolute;
|
|
1084
|
-
top: 0;
|
|
1085
|
-
left: 0;
|
|
1086
|
-
display: block;
|
|
1087
|
-
width: 100%;
|
|
1088
|
-
height: 100%;
|
|
1089
|
-
content: "";
|
|
1090
|
-
}
|
|
1091
|
-
.mdc-slider__track {
|
|
1092
|
-
position: absolute;
|
|
1093
|
-
width: 100%;
|
|
1094
|
-
height: 100%;
|
|
1095
|
-
transform-origin: left top;
|
|
1096
|
-
will-change: transform;
|
|
1097
|
-
}
|
|
1098
|
-
.mdc-slider[dir=rtl] .mdc-slider__track, [dir=rtl] .mdc-slider .mdc-slider__track {
|
|
1099
|
-
transform-origin: right top;
|
|
977
|
+
.x-3deye-slider {
|
|
978
|
+
position: relative;
|
|
979
|
+
display: flex;
|
|
980
|
+
align-items: center;
|
|
1100
981
|
}
|
|
1101
982
|
|
|
1102
|
-
.
|
|
1103
|
-
|
|
1104
|
-
margin-right: 0;
|
|
1105
|
-
margin-left: -1px;
|
|
1106
|
-
visibility: hidden;
|
|
1107
|
-
}
|
|
1108
|
-
.mdc-slider[dir=rtl] .mdc-slider__track-marker-container, [dir=rtl] .mdc-slider .mdc-slider__track-marker-container {
|
|
1109
|
-
margin-right: -1px;
|
|
1110
|
-
margin-left: 0;
|
|
983
|
+
.x-3deye-slider:focus-visible {
|
|
984
|
+
outline: none;
|
|
1111
985
|
}
|
|
1112
986
|
|
|
1113
|
-
.
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
height: 2px;
|
|
1117
|
-
content: "";
|
|
987
|
+
.x-3deye-slider.horizontal {
|
|
988
|
+
width: 100%;
|
|
989
|
+
height: 20px;
|
|
1118
990
|
}
|
|
1119
|
-
|
|
1120
|
-
|
|
991
|
+
|
|
992
|
+
.x-3deye-slider.vertical {
|
|
993
|
+
width: 20px;
|
|
994
|
+
height: 100%;
|
|
995
|
+
flex-direction: column;
|
|
1121
996
|
}
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
997
|
+
|
|
998
|
+
.x-3deye-slider__track {
|
|
999
|
+
background: var(--surface-inverse, gainsboro);
|
|
1000
|
+
position: relative;
|
|
1001
|
+
flex: 1;
|
|
1127
1002
|
}
|
|
1128
|
-
|
|
1129
|
-
|
|
1003
|
+
|
|
1004
|
+
.x-3deye-slider__bar {
|
|
1005
|
+
background-color: var(--primary-color, #0067ac);
|
|
1006
|
+
position: absolute;
|
|
1130
1007
|
}
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
left: 0;
|
|
1135
|
-
width: 21px;
|
|
1136
|
-
height: 100%;
|
|
1137
|
-
-webkit-user-select: none;
|
|
1138
|
-
-moz-user-select: none;
|
|
1139
|
-
-ms-user-select: none;
|
|
1140
|
-
user-select: none;
|
|
1141
|
-
will-change: transform;
|
|
1008
|
+
|
|
1009
|
+
.x-3deye-slider.disabled .x-3deye-slider__bar {
|
|
1010
|
+
background-color: rgb(165, 165, 165);
|
|
1142
1011
|
}
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
stroke-width: 3.5;
|
|
1149
|
-
transition: transform 100ms ease-out, fill 100ms ease-out, stroke 100ms ease-out;
|
|
1012
|
+
|
|
1013
|
+
.x-3deye-slider.horizontal .x-3deye-slider__bar {
|
|
1014
|
+
top: 0;
|
|
1015
|
+
bottom: 0;
|
|
1016
|
+
left: 0;
|
|
1150
1017
|
}
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out;
|
|
1018
|
+
|
|
1019
|
+
.x-3deye-slider.vertical .x-3deye-slider__bar {
|
|
1020
|
+
bottom: 0;
|
|
1021
|
+
left: 0;
|
|
1022
|
+
right: 0;
|
|
1157
1023
|
}
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
top: 0;
|
|
1162
|
-
left: 0;
|
|
1163
|
-
align-items: center;
|
|
1164
|
-
justify-content: center;
|
|
1165
|
-
width: 26px;
|
|
1166
|
-
height: 26px;
|
|
1167
|
-
margin-top: -2px;
|
|
1168
|
-
margin-left: -2px;
|
|
1169
|
-
transform: rotate(-45deg) scale(0) translate(0, 0);
|
|
1170
|
-
border-radius: 50% 50% 50% 0%;
|
|
1171
|
-
z-index: 1;
|
|
1172
|
-
transition: transform 100ms ease-out;
|
|
1173
|
-
}
|
|
1174
|
-
.mdc-slider__pin-value-marker {
|
|
1175
|
-
-moz-osx-font-smoothing: grayscale;
|
|
1176
|
-
-webkit-font-smoothing: antialiased;
|
|
1177
|
-
font-family: Roboto, sans-serif;
|
|
1178
|
-
/* @alternate */
|
|
1179
|
-
font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
|
|
1180
|
-
font-size: 0.875rem;
|
|
1181
|
-
/* @alternate */
|
|
1182
|
-
font-size: var(--mdc-typography-body2-font-size, 0.875rem);
|
|
1183
|
-
line-height: 1.25rem;
|
|
1184
|
-
/* @alternate */
|
|
1185
|
-
line-height: var(--mdc-typography-body2-line-height, 1.25rem);
|
|
1186
|
-
font-weight: 400;
|
|
1187
|
-
/* @alternate */
|
|
1188
|
-
font-weight: var(--mdc-typography-body2-font-weight, 400);
|
|
1189
|
-
letter-spacing: 0.0178571429em;
|
|
1190
|
-
/* @alternate */
|
|
1191
|
-
letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
|
|
1192
|
-
text-decoration: inherit;
|
|
1193
|
-
/* @alternate */
|
|
1194
|
-
-webkit-text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
|
|
1195
|
-
text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
|
|
1196
|
-
text-transform: inherit;
|
|
1197
|
-
/* @alternate */
|
|
1198
|
-
text-transform: var(--mdc-typography-body2-text-transform, inherit);
|
|
1199
|
-
transform: rotate(45deg);
|
|
1024
|
+
|
|
1025
|
+
.x-3deye-slider.horizontal .x-3deye-slider__track {
|
|
1026
|
+
height: 3px;
|
|
1200
1027
|
}
|
|
1201
1028
|
|
|
1202
|
-
.
|
|
1203
|
-
|
|
1029
|
+
.x-3deye-slider.vertical .x-3deye-slider__track {
|
|
1030
|
+
width: 3px;
|
|
1204
1031
|
}
|
|
1205
1032
|
|
|
1206
|
-
.
|
|
1207
|
-
|
|
1208
|
-
|
|
1033
|
+
.x-3deye-slider__thumb {
|
|
1034
|
+
will-change: transform box-shadow;
|
|
1035
|
+
background: white;
|
|
1036
|
+
box-shadow: 0 0 0 6px rgba(0, 100, 255, 0), 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
|
|
1037
|
+
width: 20px;
|
|
1038
|
+
height: 20px;
|
|
1039
|
+
border-radius: 50%;
|
|
1040
|
+
transition: box-shadow 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
|
|
1209
1041
|
}
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1042
|
+
|
|
1043
|
+
.x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover,
|
|
1044
|
+
.x-3deye-slider:focus .x-3deye-slider__thumb {
|
|
1045
|
+
box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
|
|
1046
|
+
1px 1px 2px 0 rgba(0, 0, 0, 0.25);
|
|
1213
1047
|
}
|
|
1214
1048
|
|
|
1215
|
-
.
|
|
1216
|
-
|
|
1049
|
+
.x-3deye-slider:focus .x-3deye-slider__thumb.active {
|
|
1050
|
+
box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
|
|
1051
|
+
1px 1px 2px 0 rgba(0, 0, 0, 0.25);
|
|
1217
1052
|
}
|
|
1218
1053
|
|
|
1219
|
-
.
|
|
1220
|
-
|
|
1221
|
-
.mdc-slider:focus:not(.mdc-slider--active) .mdc-slider__thumb-container,
|
|
1222
|
-
.mdc-slider:focus:not(.mdc-slider--active) .mdc-slider__track {
|
|
1223
|
-
transition: transform 80ms ease;
|
|
1054
|
+
.x-3deye-slider.horizontal .x-3deye-slider__thumb {
|
|
1055
|
+
margin-left: -10px;
|
|
1224
1056
|
}
|
|
1225
1057
|
|
|
1226
|
-
.
|
|
1227
|
-
|
|
1058
|
+
.x-3deye-slider.vertical .x-3deye-slider__thumb {
|
|
1059
|
+
margin-bottom: -10px;
|
|
1228
1060
|
}
|
|
1229
|
-
|
|
1230
|
-
|
|
1061
|
+
|
|
1062
|
+
.x-3deye-slider__label {
|
|
1063
|
+
pointer-events: none;
|
|
1064
|
+
touch-action: none;
|
|
1065
|
+
will-change: transform;
|
|
1066
|
+
transform: translate(-50%, -100%) scale(0);
|
|
1067
|
+
background: var(--primary-color, #0067ac);
|
|
1068
|
+
bottom: 50%;
|
|
1069
|
+
left: 50%;
|
|
1070
|
+
color: var(--on-primary-color, white);
|
|
1071
|
+
font-size: 0.75rem;
|
|
1072
|
+
border-radius: 4px;
|
|
1073
|
+
width: -webkit-fit-content;
|
|
1074
|
+
width: -moz-fit-content;
|
|
1075
|
+
width: fit-content;
|
|
1076
|
+
min-width: 24px;
|
|
1077
|
+
padding: 4px 8px;
|
|
1078
|
+
position: relative;
|
|
1079
|
+
transition: transform 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
|
|
1080
|
+
transform-origin: center bottom;
|
|
1231
1081
|
}
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1082
|
+
|
|
1083
|
+
.x-3deye-slider__label.open,
|
|
1084
|
+
.x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover .x-3deye-slider__label,
|
|
1085
|
+
.x-3deye-slider:focus .x-3deye-slider__label {
|
|
1086
|
+
transform: translate(-50%, -100%) scale(1);
|
|
1235
1087
|
}
|
|
1236
|
-
|
|
1237
|
-
|
|
1088
|
+
|
|
1089
|
+
.x-3deye-slider__label::before {
|
|
1090
|
+
content: '';
|
|
1091
|
+
display: block;
|
|
1092
|
+
position: absolute;
|
|
1093
|
+
top: 100%;
|
|
1094
|
+
left: calc(50% - 5px);
|
|
1095
|
+
width: 0;
|
|
1096
|
+
height: 0;
|
|
1097
|
+
border-left: 5px solid transparent;
|
|
1098
|
+
border-right: 5px solid transparent;
|
|
1099
|
+
border-top: 5px solid var(--primary-color, #0067ac);
|
|
1238
1100
|
}
|
|
1101
|
+
|
|
1239
1102
|
.color-selector {
|
|
1240
1103
|
display: flex;
|
|
1241
1104
|
z-index: 1;
|
|
@@ -1284,7 +1147,7 @@
|
|
|
1284
1147
|
}
|
|
1285
1148
|
|
|
1286
1149
|
.preloader-container {
|
|
1287
|
-
color: var(--
|
|
1150
|
+
color: var(--on-container);
|
|
1288
1151
|
flex: 1;
|
|
1289
1152
|
display: flex;
|
|
1290
1153
|
justify-content: center;
|
package/dist/react-event-list.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{format as e,subHours as t,startOfHour as r,isSameYear as n,isSameDay as i}from"date-fns/esm";import a from"i18next";import{from as l,Observable as o,Subscription as s,of as c,throwError as d,EMPTY as u}from"rxjs";import*as m from"react";import h,{useContext as p,useRef as f,createContext as b,useState as v,Children as g,useEffect as y,useLayoutEffect as E}from"react";import{AppContext as w,app as C}from"@3deye-toolkit/core";import{computed as x,makeObservable as O,observable as N,action as P,runInAction as j,reaction as L}from"mobx";import{subHours as T}from"date-fns";import{mergeMap as I,catchError as M,switchMap as _,mapTo as k,concatMap as S}from"rxjs/operators";import D,{components as F}from"react-select";import H from"clsx";import{observer as z,useLocalObservable as A,Observer as R}from"mobx-react-lite";import{useSpring as $,animated as V}from"@react-spring/web";import B from"react-dom";import U from"react-datepicker";import W from"react-ink";import G from"@reach/tooltip";import{MDCSlider as q}from"@material/slider";import Z from"resize-observer-polyfill";import J from"react-virtualized-auto-sizer";import Y from"react-window-infinite-loader";import{VariableSizeGrid as X}from"react-window";import Q from"@seznam/compose-react-refs";import*as K from"@sentry/browser";var ee={filter:"Filter",noEventsFound:"no events found",showEvents_one:"show {{count}} new event",showEvents_other:"show {{count}} new events"};const te=new Map,re={detection:{order:["querystring","htmlTag","navigator"],lookupQuerystring:"lang"},fallbackLng:"en",load:"all",interpolation:{escapeValue:!1}},ne=a.createInstance();function ie(t,r){const n=te.get(ne.language);return e(t,r,{locale:n})}const ae=h.createContext(null);var le,oe;function se(e,t=!1){const r=x(e);return new o((e=>{const n=r.observe_((({newValue:t})=>e.next(t)),t);return()=>n()}))}!function(e){e[e.CONNECTING=0]="CONNECTING",e[e.CONNECTED=1]="CONNECTED",e[e.RECONNECTING=2]="RECONNECTING",e[e.DISCONNECTED=3]="DISCONNECTED"}(le||(le={})),function(e){e[e.Motion=0]="Motion",e[e.Tampering=1]="Tampering",e[e.PanTiltZoom=2]="PanTiltZoom",e[e.CrossLine=3]="CrossLine",e[e.Intrusion=4]="Intrusion",e[e.LicensePlate=5]="LicensePlate",e[e.FaceDetection=6]="FaceDetection",e[e.Audio=7]="Audio",e[e.Analytic=8]="Analytic",e[e.SpeedDetection=9]="SpeedDetection",e[e.PeopleCounter=10]="PeopleCounter",e[e.Temperature=11]="Temperature",e[e.PoS=12]="PoS",e[e.GPS=13]="GPS",e[e.DigitalInput=14]="DigitalInput",e[e.Normal=15]="Normal",e[e.Suspicious=16]="Suspicious",e[e.Loitering=17]="Loitering",e[e.Vandalism=18]="Vandalism",e[e.Trespass=19]="Trespass",e[e.Emergency=20]="Emergency",e[e.LifeInDanger=21]="LifeInDanger",e[e.ErroneousAlert=22]="ErroneousAlert",e[e.Misidentification=23]="Misidentification",e[e.Fire=24]="Fire",e[e.MedicalDuress=25]="MedicalDuress",e[e.HoldUp=26]="HoldUp",e[e.CheckIn=27]="CheckIn",e[e.CheckOut=28]="CheckOut",e[e.ClockIn=29]="ClockIn",e[e.ClockOut=30]="ClockOut",e[e.ParkingStart=31]="ParkingStart",e[e.ParkingEnd=32]="ParkingEnd",e[e.ParkingViolation=33]="ParkingViolation",e[e.GateAccess=34]="GateAccess",e[e.DoorAccess=35]="DoorAccess",e[e.TemperatureCheck=36]="TemperatureCheck",e[e.IDCheck=37]="IDCheck",e[e.PPECheck=38]="PPECheck",e[e.WelfareCheck=39]="WelfareCheck",e[e.Uncategorized=40]="Uncategorized",e[e.Unknown=999]="Unknown"}(oe||(oe={}));class ce{constructor(){Object.defineProperty(this,"api",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]})}initWith(e){this.api=e,this.afterInit&&this.afterInit()}dispose(){this.disposables.forEach((e=>{e instanceof s?e.closed||e.unsubscribe():e()}))}}const de=new Set(["LicensePlate","FaceDetection","Analytic","SpeedDetection","Temperature","PoS","GPS","DigitalInput"]);class ue{constructor(e){if(Object.defineProperty(this,"cameraId",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"type",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"raw",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"thumbnailUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"detectedObjects",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"faces",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"instant",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),O(this,{id:x,startTime:x,endTime:x,acknowledged:x,isLive:x,raw:N.ref}),this.raw=e,this.type=e.eventType,this.cameraId=e.sensorId,("Analytic"===this.type||"FaceDetection"===this.type)&&e.data)try{const t=JSON.parse(e.data);t.FoundObjects&&(this.type="Analytic",this.detectedObjects=t.FoundObjects),t.Faces&&(this.type="FaceDetection",this.faces=t.Faces),this.thumbnailUrl=t.ThumbnailUrl}catch{console.warn("invalid data",e.data),this.type="Motion"}this.instant=de.has(this.type),this.detectedObjects||(this.detectedObjects=[])}get id(){return this.raw.id}get startTime(){return new Date(this.raw.startTime)}get endTime(){return new Date(this.raw.endTime)}get isLive(){return!de.has(this.type)&&+this.startTime==+this.endTime}get acknowledged(){return"sensorId"in this.raw&&!!this.raw.ackEventType}}class me extends ce{constructor(e){super(),Object.defineProperty(this,"eventsStore",{enumerable:!0,configurable:!0,writable:!0,value:e}),Object.defineProperty(this,"data",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"pendingData",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"liveUpdateMode",{enumerable:!0,configurable:!0,writable:!0,value:"auto"}),Object.defineProperty(this,"updateTrigger",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"colors",{enumerable:!0,configurable:!0,writable:!0,value:new Set}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"pageInfo",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"loading",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"loadMoreTrigger",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"retryTrigger",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"sortDirection",{enumerable:!0,configurable:!0,writable:!0,value:"DESC"}),Object.defineProperty(this,"probabilityThreshold",{enumerable:!0,configurable:!0,writable:!0,value:.5}),Object.defineProperty(this,"from",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"to",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"cameras",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"detectedObjects",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"polygons",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"eventTypes",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"loadingInited",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"flushUpdates",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.data=[...this.pendingData,...this.data],this.pendingData=[]}}),Object.defineProperty(this,"setLiveUpdateMode",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.liveUpdateMode=e}}),Object.defineProperty(this,"load",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.loadingInited||(this.loadingInited=!0,this.initDataLoading(),this.initLiveUpdates())}}),Object.defineProperty(this,"reload",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.error&&(this.retryTrigger=+!this.retryTrigger)}}),Object.defineProperty(this,"loadMore",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.error=null,this.loadMoreTrigger=+!this.loadMoreTrigger}}),Object.defineProperty(this,"requestData",{enumerable:!0,configurable:!0,writable:!0,value:({sortDirection:e,from:t,to:r,filter:n,pageInfo:i,cameras:a,polygons:l})=>this.api.cameras.GetSensorEventsPage({sensorIds:a,sensorType:"camera",sensorEventTypes:this.eventTypes,startTime:t,endTime:r,isDescending:"DESC"===e,rowsLimit:10,pageToken:null==i?void 0:i.nextPageToken},n,l).pipe(I((e=>e.success?c({events:e.resultItems,pageInfo:e.pageInfo}):d((()=>e.error)))),M((e=>(console.error(e),this.error=e,c({events:[],pageInfo:null})))))}),O(this,{data:N.ref,cameras:N.struct,detectedObjects:N.struct,from:N,to:N,sortDirection:N,probabilityThreshold:N,pendingData:N.ref,liveUpdateMode:N,setLiveUpdateMode:P,updateTrigger:N,colors:N.ref,flushUpdates:P,pageInfo:N.ref,isLive:x,loading:N,loadMoreTrigger:N,retryTrigger:N,error:N.ref,loadMore:P,filterJson:x})}get isLive(){return"DESC"==this.sortDirection&&!this.to}get totalCount(){return this.data.length}get filterJson(){if(1===this.eventTypes.length&&this.eventTypes[0]===oe.FaceDetection)return null;const{probabilityThreshold:e}=this;if(null===e)return null;const t={And:[]};return this.detectedObjects.length&&t.And.push({Or:this.detectedObjects.map((e=>({Type:e})))}),this.colors.size&&t.And.push({Or:[...this.colors].map((e=>({ObjectColors:[e]})))}),t.And.push({Or:[{Probability:e}]}),JSON.stringify(t)}initDataLoading(){const e=se((()=>({from:this.from?+this.from:void 0,to:this.to?+this.to:void 0,sortDirection:this.sortDirection,filter:this.filterJson,cameraFilters:this.cameras,polygons:this.polygons})),!0);this.disposables.push(e.pipe(_((e=>se((()=>this.retryTrigger),!0).pipe(k(e)))),_((({from:e,to:t,sortDirection:r,filter:n,cameraFilters:i,polygons:a})=>(j((()=>{this.loading=!0,this.pageInfo=null,this.error=null,this.data=[],this.pendingData=[]})),this.requestData({from:e?new Date(e):void 0,to:t?new Date(t):void 0,sortDirection:r,filter:n,cameras:i,pageInfo:this.pageInfo,polygons:a}))))).subscribe((({events:e,pageInfo:t})=>{j((()=>{var r,n,i;if(!t)return;const a=e.map(he);this.isLive?this.data=this.uniquelyConcat(this.eventsStore.getEvents({cameraIds:this.cameras,eventTypes:this.eventTypes.map((e=>oe[e])),from:null!==(n=null===(r=a[0])||void 0===r?void 0:r.startTime)&&void 0!==n?n:T(new Date,1),to:null,colors:this.colors.size?this.colors:void 0,detectedObjectTypes:this.detectedObjects,probability:null!==(i=this.probabilityThreshold)&&void 0!==i?i:void 0}),a):this.data=a,this.eventsStore.add(a),this.pageInfo=t,this.loading=!1}))}))),this.disposables.push(e.pipe(_((({from:e,to:t,sortDirection:r,filter:n,cameraFilters:i})=>se((()=>this.loadMoreTrigger)).pipe(S((()=>this.requestData({from:e?new Date(e):void 0,to:t?new Date(t):void 0,sortDirection:r,filter:n,cameras:i,pageInfo:this.pageInfo,polygons:this.polygons}))))))).subscribe((({events:e,pageInfo:t})=>{if(!t)return;const r=e.map(he);this.eventsStore.add(r),j((()=>{this.data=this.data.concat(r),this.pageInfo=t,this.loading=!1}))})))}initLiveUpdates(){this.disposables.push(se((()=>({liveUpdateMode:this.liveUpdateMode,isLive:this.isLive})),!0).pipe(_((({liveUpdateMode:e,isLive:t})=>t&&"auto"===e?se((()=>this.eventsStore.recentAdditions)):u))).subscribe((e=>{if(this.loading)return;if(!this.pageInfo&&this.error)return;const t=this.filter(e.map((e=>this.eventsStore.eventsById.get(e))));t.length&&j((()=>{this.data=[...t,...this.data]}))}))),this.disposables.push(se((()=>({liveUpdateMode:this.liveUpdateMode,isLive:this.isLive})),!0).pipe(_((({liveUpdateMode:e,isLive:t})=>t&&"manual"===e?se((()=>this.eventsStore.recentAdditions)):(this.pendingData&&j((()=>this.pendingData=[])),u)))).subscribe((e=>{if(!this.data.length)return;const t=this.filter(e.map((e=>this.eventsStore.eventsById.get(e))));t.length&&j((()=>{this.pendingData=[...t,...this.pendingData]}))})))}filter(e){let t=e;const{from:r,to:n}=this;if(r&&(t=t.filter((e=>e.startTime>=r))),n&&(t=t.filter((e=>e.startTime<=n))),this.cameras.length&&(t=t.filter((e=>this.cameras.includes(e.cameraId)))),this.eventTypes.length){const e=this.eventTypes.map((e=>oe[e]));t=t.filter((t=>e.includes(t.type)))}return this.detectedObjects.length&&(t=t.filter((e=>e.detectedObjects.some((e=>{var t;const{probabilityThreshold:r}=this;return!(null!==r&&e.Probability<r)&&(this.colors.size?this.detectedObjects.includes(e.Type)&&(null===(t=e.Colors)||void 0===t?void 0:t.some((e=>this.colors.has(e.Color)))):this.detectedObjects.includes(e.Type))}))))),t}uniquelyConcat(e,t){if(!e.length)return t.concat();if(!t.length)return e.concat();const r=e=>[e.id,e];return Array.from(new Map([...e.map(r),...t.map(r)]).values())}dispose(){this.disposables.forEach((e=>{e instanceof s?e.closed||e.unsubscribe():e()}))}}function he(e){return new ue(e)}const pe={50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",A100:"#82b1ff",A200:"#448aff",A400:"#2979ff",A700:"#2962ff"},fe={50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",A100:"#84ffff",A200:"#18ffff",A400:"#00e5ff",A700:"#00b8d4"},be={50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",A100:"#b9f6ca",A200:"#69f0ae",A400:"#00e676",A700:"#00c853"},ve={50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",A100:"#f5f5f5",A200:"#eeeeee",A400:"#bdbdbd",A700:"#616161"},ge={50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",A100:"#ff8a80",A200:"#ff5252",A400:"#ff1744",A700:"#d50000"},ye={50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",A100:"#ffff8d",A200:"#ffff00",A400:"#ffea00",A700:"#ffd600"};class Ee extends ce{constructor(e){super(),Object.defineProperty(this,"cameraFilters",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"objectFilters",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"date",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"sortDirection",{enumerable:!0,configurable:!0,writable:!0,value:"DESC"}),Object.defineProperty(this,"probabilityThreshold",{enumerable:!0,configurable:!0,writable:!0,value:.5}),Object.defineProperty(this,"facesProbabilityThreshold",{enumerable:!0,configurable:!0,writable:!0,value:.7}),Object.defineProperty(this,"colors",{enumerable:!0,configurable:!0,writable:!0,value:new Set}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"eventsLoader",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"toggleSorting",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.sortDirection="ASC"===this.sortDirection?"DESC":"ASC",null===this.date&&(this.date=t(r(new Date),1))}}),Object.defineProperty(this,"applyFilters",{enumerable:!0,configurable:!0,writable:!0,value:()=>{var e;this.eventsLoader.cameras=this.cameraFilters.map((e=>e.id)),this.eventsLoader.detectedObjects=this.objectFilters.map((e=>e.id)),this.eventsLoader.colors=this.colors,this.eventsLoader.probabilityThreshold=this.objectFilters.length?this.probabilityThreshold:null,"ASC"===this.sortDirection?(this.eventsLoader.sortDirection="ASC",this.eventsLoader.to=void 0,this.eventsLoader.from=this.date):(this.eventsLoader.sortDirection="DESC",this.eventsLoader.from=void 0,this.eventsLoader.to=null!==(e=this.date)&&void 0!==e?e:void 0)}}),Object.defineProperty(this,"getProbabilityTreshold",{enumerable:!0,configurable:!0,writable:!0,value:()=>this.probabilityThreshold}),Object.defineProperty(this,"setProbabilityTreshold",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.probabilityThreshold=e,this.applyFilters()}}),O(this,{cameraFilters:N.ref,objectFilters:N.ref,date:N,sortDirection:N,probabilityThreshold:N,setProbabilityTreshold:P,facesProbabilityThreshold:N,colors:N.ref,someAnalyticsFilterSelected:x,filters:x,setFilters:P,load:P,toggleColor:P.bound,clearColors:P.bound,applyFilters:P,toggleSorting:P}),this.eventsLoader=new me(e),this.eventsLoader.loading=!0,this.eventsLoader.probabilityThreshold=null}get someAnalyticsFilterSelected(){return!!this.objectFilters.length}get filters(){return this.objectFilters.concat(this.cameraFilters)}load(){this.eventsLoader.load()}setFilters(e){this.cameraFilters=e?e.filter((e=>!("type"in e))):[],this.objectFilters=e?e.filter((e=>"type"in e)):[]}toggleColor(e){const t=new Set(this.colors);this.colors.has(e)?t.delete(e):t.add(e),this.colors=t,this.applyFilters()}clearColors(){this.colors=new Set,this.applyFilters()}afterInit(){this.eventsLoader.initWith(this.api)}dispose(){this.disposables.forEach((e=>{e instanceof s?e.closed||e.unsubscribe():e()})),this.eventsLoader.dispose()}}var we,Ce=(we=8,{container:e=>({...e,padding:we}),control:(e,t)=>({...e,borderRadius:8,backgroundColor:t.isFocused?"white":"rgba(0, 0, 0, 0.5)",border:"none",boxShadow:null,"&:hover":{borderColor:null}}),menu:e=>({...e,width:`calc(100% - ${2*we}px)`,marginTop:we?0:e.marginTop}),option:e=>({...e,color:"black"}),multiValueRemove:e=>({...e,color:"black"}),placeholder:(e,t)=>({...e,color:t.isFocused?e.color:"hsl(0, 0%, 70%)"})});function xe(e){return t=>{const{size:r=24,color:n="currentColor",className:i,...a}=t,l=e.viewBox||"0 0 24 24",o=e.svg;return h.createElement("svg",{preserveAspectRatio:"xMinYMin",className:H("icon",i),width:r,fill:n,viewBox:l,...a},o)}}const Oe=xe({viewBox:"0 0 24 24",svg:h.createElement("g",null,h.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),h.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"}))});Oe.displayName="LabelIcon";const Ne=xe({viewBox:"0 0 24 24",svg:h.createElement("g",null,h.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),h.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"}))});Ne.displayName="CameraIcon";const Pe=xe({viewBox:"0 0 24 24",svg:h.createElement("path",{d:"M17,6h-2V3c0-0.55-0.45-1-1-1h-4C9.45,2,9,2.45,9,3v3H7C5.9,6,5,6.9,5,8v11c0,1.1,0.9,2,2,2c0,0.55,0.45,1,1,1 c0.55,0,1-0.45,1-1h6c0,0.55,0.45,1,1,1c0.55,0,1-0.45,1-1c1.1,0,2-0.9,2-2V8C19,6.9,18.1,6,17,6z M9.5,18H8V9h1.5V18z M12.75,18 h-1.5V9h1.5V18z M13.5,6h-3V3.5h3V6z M16,18h-1.5V9H16V18z"})});Pe.displayName="LuggageIcon";const je=xe({viewBox:"0 0 24 24",svg:h.createElement(h.Fragment,null,h.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),h.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"}))});je.displayName="CarIcon";const Le=xe({viewBox:"0 0 24 24",svg:h.createElement(h.Fragment,null,h.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),h.createElement("path",{d:"M20 21c-1.39 0-2.78-.47-4-1.32-2.44 1.71-5.56 1.71-8 0C6.78 20.53 5.39 21 4 21H2v2h2c1.38 0 2.74-.35 4-.99 2.52 1.29 5.48 1.29 8 0 1.26.65 2.62.99 4 .99h2v-2h-2zM3.95 19H4c1.6 0 3.02-.88 4-2 .98 1.12 2.4 2 4 2s3.02-.88 4-2c.98 1.12 2.4 2 4 2h.05l1.89-6.68c.08-.26.06-.54-.06-.78s-.34-.42-.6-.5L20 10.62V6c0-1.1-.9-2-2-2h-3V1H9v3H6c-1.1 0-2 .9-2 2v4.62l-1.29.42c-.26.08-.48.26-.6.5s-.15.52-.06.78L3.95 19zM6 6h12v3.97L12 8 6 9.97V6z"}))});Le.displayName="BoatIcon";const Te=xe({viewBox:"0 0 24 24",svg:h.createElement(h.Fragment,null,h.createElement("path",{d:"M11.74 13.36L14.14 7.71L13.06 5.5H10.5V4H14L14.73 5.5H21.75L20.75 9H16.44L17.11 10.37C17.69 10.13 18.33 10 19 10C21.76 10 24 12.24 24 15C24 17.76 21.76 20 19 20C16.24 20 14 17.76 14 15C14 13.45 14.71 12.06 15.82 11.15L15 9.5L12.25 16H9.9C9.44 18.28 7.42 20 5 20C2.24 20 0 17.76 0 15C0 12.24 2.24 10 5 10C7.59 10 9.72 11.97 10 14.5H10.58L8.3 9H7.5C7.09 9 6.75 8.66 6.75 8.25C6.75 7.84 7.09 7.5 7.5 7.5H10.25C10.66 7.5 11 7.84 11 8.25C11 8.66 10.66 9 10.25 9H9.97L11.74 13.36M5 11.5C3.07 11.5 1.5 13.07 1.5 15C1.5 16.93 3.07 18.5 5 18.5C6.59 18.5 7.93 17.45 8.36 16H4V14.5H8.47C8.22 12.8 6.76 11.5 5 11.5M19 11.5C18.57 11.5 18.15 11.58 17.77 11.72L19.7 15.68L18.35 16.34L16.5 12.55C15.88 13.18 15.5 14.05 15.5 15C15.5 16.93 17.07 18.5 19 18.5C20.93 18.5 22.5 16.93 22.5 15C22.5 13.07 20.93 11.5 19 11.5Z"}))});Te.displayName="BicycleIcon";const Ie=xe({viewBox:"0 0 24 24",svg:h.createElement("g",null,h.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),h.createElement("path",{d:"M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-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.1L6 8.3V13h2V9.6l1.8-.7"}))});Ie.displayName="DirectionsWalkIcon";const Me=xe({viewBox:"0 0 24 24",svg:h.createElement(h.Fragment,null,h.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),h.createElement("circle",{cx:"4.5",cy:"9.5",r:"2.5"}),h.createElement("circle",{cx:"9",cy:"5.5",r:"2.5"}),h.createElement("circle",{cx:"15",cy:"5.5",r:"2.5"}),h.createElement("circle",{cx:"19.5",cy:"9.5",r:"2.5"}),h.createElement("path",{d:"M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79.05c-.11.02-.22.05-.33.09-.7.24-1.28.78-1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79.29 1.02 1.02 2.03 2.33 2.32.73.15 3.06-.44 5.54-.44h.18c2.48 0 4.81.58 5.54.44 1.31-.29 2.04-1.31 2.33-2.32.31-2.04-1.3-3.49-2.61-4.8z"}))});Me.displayName="PetsIcon";const _e=xe({viewBox:"0 0 24 24",svg:h.createElement(h.Fragment,null,h.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),h.createElement("path",{d:"M4 4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H5Zm0 2h4v2h8V6h4v12H4Z"}),h.createElement("path",{d:"M9.923 10 8.43 12.433 10 15h-.8L8 13.036 6.8 15H6l1.602-2.616L6.136 10h.8l1.093 1.781L9.123 10Z"}),h.createElement("path",{d:"m13.709 10-1.492 2.433L13.787 15h-.8l-1.2-1.964L10.585 15h-.8l1.603-2.616L9.923 10h.799l1.094 1.781L12.91 10Z"}),h.createElement("path",{d:"m17.709 10-1.492 2.433L17.787 15h-.8l-1.2-1.964L14.585 15h-.8l1.603-2.616L13.923 10h.799l1.094 1.781L16.91 10Z"}))});_e.displayName="LicensePlateIcon";const ke=({data:e})=>{const t=16;return"licensePlate"===e.type?null:"detectedObject"!==e.type?h.createElement(Ne,{size:t}):"Luggage"===e.id?h.createElement(Pe,{size:t}):"Car"===e.id?h.createElement(je,{size:t}):"Person"===e.id?h.createElement(Ie,{size:t}):"Bicycle"===e.id?h.createElement(Te,{size:t}):"Boat"===e.id?h.createElement(Le,{size:t}):"Animal"===e.id?h.createElement(Me,{size:t}):"LicensePlate"===e.id?h.createElement(_e,{size:t}):h.createElement(Oe,{size:t})},Se=e=>{const{children:t,innerProps:r,...n}=e,{Option:i}=F,{data:a}=e;if("licensePlate"===a.type)return h.createElement(i,{innerProps:r,...n},h.createElement("span",{style:{paddingLeft:8,paddingRight:8,borderRadius:4,border:"1px solid black"}},t));if("detectedObject"===a.type){const e={display:"inline-flex",alignItems:"center",width:"auto"},l={...r,style:e};return h.createElement(i,{innerProps:l,...n},h.createElement(ke,{data:a}),h.createElement("div",{style:{marginLeft:4}},t))}return h.createElement(i,{...e})},De=e=>{const{children:t,innerProps:r,...n}=e,{MultiValueLabel:i}=F,{data:a}=e,l={...r,style:{display:"flex",alignItems:"center"}};return h.createElement(i,{innerProps:l,...n},h.createElement(ke,{data:a}),h.createElement("div",{style:{marginLeft:4}},t))},Fe=xe({viewBox:"0 0 24 24",svg:h.createElement(h.Fragment,null,h.createElement("path",{d:"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"}),h.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});Fe.displayName="FilterListIcon";const He={...Ce,multiValue:(e,{data:t})=>"color"in t?{...e,backgroundColor:t.color,color:"white"}:e,multiValueLabel:(e,{data:t})=>"color"in t?{...e,color:"white"}:e,multiValueRemove:(e,{data:t})=>"color"in t?{...e,color:"white",":hover":{backgroundColor:"rgba(255, 255, 255, 0.7)",color:t.color}}:{...e,color:"hsl(0, 0%, 20%)"},option:(e,{data:t,isFocused:r})=>"color"in t?"type"in t&&"licensePlate"===t.type?{...e,color:t.color,backgroundColor:r?fe[50]:"transparent",":active":{...e[":active"],backgroundColor:fe[100]}}:{...e,color:t.color}:{...e,color:"black"}},ze=e=>{const{children:t,...r}=e;return h.createElement(F.Placeholder,{...r},h.createElement(Fe,{size:16,style:{position:"relative",top:4}})," ",t)},Ae=z((({addionalFiltersEnabled:e,store:t})=>{const{cameras:r,eventSchema:n}=p(ae),i=f({opened:!1});return h.createElement(D,{closeMenuOnSelect:!1,isMulti:!0,onChange:(e,r)=>{t.setFilters(e),"remove-value"!==r.action||i.current.opened||t.applyFilters()},onMenuOpen:()=>i.current.opened=!0,onMenuClose:()=>{i.current.opened=!1,t.applyFilters()},getOptionLabel:e=>e.name,getOptionValue:e=>e.id,options:(()=>{if(!n)return[];const t=e?n.foundObjectTypesForSelect:[];return r.loaded?[].concat(t,r.data.slice()):t})(),placeholder:ne.t("filter"),value:t.filters,components:{MultiValueLabel:De,Option:Se,Placeholder:ze},styles:He})}));Ae.displayName="EventsPanelSelect";const Re=e=>`scale(${e})`,$e=({children:e,from:t,style:r})=>{const n=$({opacity:1,from:{opacity:0},config:{tension:300}});return m.createElement(V.div,{style:{...r,...n,transform:n.opacity.to(Re),transformOrigin:`${t||"bottom"} center`,width:"max-content"}},e)},Ve=document.body;class Be extends h.Component{constructor(e){super(e),Object.defineProperty(this,"el",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.el=document.createElement("div")}componentDidMount(){Ve.appendChild(this.el)}componentWillUnmount(){Ve.removeChild(this.el)}render(){return B.createPortal(this.props.children,this.el)}}const Ue=({width:e,height:t,color:r,position:n="top",style:i})=>{const a=[0,"top"===n?t:0],l=[e,a[1]],o=[e/2,t-a[1]],s=[e/4,t*("top"===n?3:1)/4],c=[.325*e,t-a[1]],d=[e-c[0],c[1]],u=[e-s[0],s[1]],m=e=>e.join(","),p=`M ${m(a)} C ${m(s)} ${m(c)} ${m(o)} ${m(d)} ${m(u)} ${m(l)} Z`;return h.createElement("svg",{className:"tip",style:i,width:e,height:t,fill:r},h.createElement("path",{d:p}))};class We extends h.Component{constructor(){super(...arguments),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:{top:0,left:0,bottom:"auto",tipPosition:"bottom",tipOffset:0}}),Object.defineProperty(this,"targetRef",{enumerable:!0,configurable:!0,writable:!0,value:h.createRef()}),Object.defineProperty(this,"popoverRef",{enumerable:!0,configurable:!0,writable:!0,value:h.createRef()}),Object.defineProperty(this,"outsideClickListener",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const t=e.target;if(this.popoverRef.current.contains(t))return;const r=this.targetRef.current;r&&r.contains(t)||this.props.onCloseRequest()}}),Object.defineProperty(this,"updatePosition",{enumerable:!0,configurable:!0,writable:!0,value:()=>{if(!this.popoverRef)return;const{disablePortal:e}=this.props,t=this.targetRef.current;if(!t)return void console.warn("popover: no target element found");const{top:r,left:n,bottom:i,height:a,width:l}=t.getBoundingClientRect();let o="calc(50% - 12px)",s="auto";const c=this.popoverRef.current;let d="bottom"===this.props.placement?i+10:r-c.clientHeight-10,u=n+l/2-c.clientWidth/2,m="bottom"===this.props.placement?"top":"bottom";d<0&&(d=i+10,m="top"),u<0&&(u=0,o=n+l/2-12),u+c.clientWidth>window.innerWidth&&(u=window.innerWidth-c.clientWidth,o=n-u+l/2-12),e&&(d=a+10,u=0,o=8,"top"===this.props.placement&&(s=d,d="auto")),this.setState({top:d,bottom:s,left:u,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:r,tipPosition:n,tipOffset:i}=this.state,{className:a,opened:l,disablePortal:o,disableAnimation:s}=this.props,c={position:"absolute",left:i};"bottom"===n?c.bottom=-8:c.top=-8;const d=H(a,"x-3deye-popover-body");let u=null;if(l){const i={zIndex:o?1:100000001,position:"absolute",top:e,bottom:r,left:t},a=h.createElement("div",{className:d,ref:this.popoverRef},this.props.children,h.createElement(Ue,{width:24,height:8,position:n,color:"white",style:c}));u=s?h.createElement("div",{style:i},a):h.createElement($e,{from:n,style:i},a)}const m=h.cloneElement(this.props.target,{ref:this.targetRef});if(o)return h.createElement("div",{className:"x-3deye-popover",onMouseLeave:this.props.onMouseLeave},m,u);const p=l&&h.createElement(Be,null,u);return h.createElement(h.Fragment,null,m,p)}startOutsideClickListening(){document.addEventListener("mousedown",this.outsideClickListener,!0)}stopOutsideClickListening(){document.removeEventListener("mousedown",this.outsideClickListener,!0)}}const Ge={background:"rgb(0 0 0 / 0.9)",color:"white",border:"none",borderRadius:"4px",padding:"0.5em 1em",fontSize:12},qe=({label:e,children:t})=>h.createElement(G,{label:e,style:Ge},t);qe.displayName="Tooltip";class Ze extends h.Component{render(){const{forwardedRef:e,children:t,className:r,fullwidth:n,type:i,title:a,...l}=this.props,o=H(r,"x-3deye-button",{fullwidth:n}),s=h.createElement("button",{ref:e,className:o,type:i||"button",...l},t,l.disabled?null:h.createElement(W,null));return a?h.createElement(qe,{label:a},s):s}}const Je=h.forwardRef(((e,t)=>h.createElement(Ze,{forwardedRef:t,...e}))),Ye=xe({viewBox:"0 0 24 24",svg:h.createElement("g",null,h.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"}),h.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});Ye.displayName="CloseIcon";const Xe=()=>{},Qe=(e,t,r,n)=>{return i=Math.floor((e-t)/r*n),a=0,l=n-1,Math.min(Math.max(i,a),l);var i,a,l},Ke=b({value:null,onPointerDown:Xe,setCurrentValue:Xe,state:{currentIdx:0,currentValue:null,options:[]}});class et{constructor(e=0){Object.defineProperty(this,"currentIdx",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"setCurrentIdx",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.currentIdx=e}}),Object.defineProperty(this,"setOptions",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.options=e}}),this.currentIdx=e,O(this,{currentIdx:N,options:N.ref,currentValue:x,setCurrentIdx:P,setOptions:P})}get currentValue(){return this.options[this.currentIdx]}}const tt=z((({value:e,onChange:t,children:r,style:n})=>{const[i,a]=v(!1),l=f(null),o=g.map(r,(e=>null==e?void 0:e.props.value))||[],s=A((()=>new et(o.indexOf(e))));s.setOptions(o);const c=g.count(r);y((()=>{s.setCurrentIdx(o.indexOf(e))}),[e]),y((()=>{var e;if(!i)return;const r=null===(e=l.current)||void 0===e?void 0:e.getBoundingClientRect();if(!r)return;const n=({clientX:e})=>{s.setCurrentIdx(Qe(e,r.left,r.width,c))},d=()=>{a(!1),t(o[s.currentIdx])};return document.addEventListener("pointermove",n),document.addEventListener("pointerup",d),()=>{document.removeEventListener("pointermove",n),document.removeEventListener("pointerup",d)}}),[i,c]);return h.createElement(Ke.Provider,{value:{value:e,state:s,onPointerDown:e=>{const t=l.current;if(!t)return;const{left:r,width:n}=t.getBoundingClientRect(),i=Qe(e.clientX,r,n,c);i!==s.currentIdx&&s.setCurrentIdx(i),a(!0)},setCurrentValue:e=>{s.setCurrentIdx(o.indexOf(e))}}},h.createElement("div",{className:"segmented-control-wrapper",style:n},h.createElement("div",{role:"radiogroup",ref:l,className:"segmented-control",style:{"--indicator-offset":100*s.currentIdx+"%"}},h.createElement("div",{"aria-hidden":!0,className:H("segmented-control-indicator",{active:i}),style:{width:100/o.length+"%"}},h.createElement("div",{className:"segmented-control-indicator-inner"})),r)))}));tt.displayName="SegmentedControl";const rt=z((({value:e,children:t})=>{const r=p(Ke);return h.createElement("button",{role:"radio","aria-checked":r.state.currentValue===e,tabIndex:0,className:H("segmented-control-button",{current:r.state.currentValue===e}),onPointerDown:r.onPointerDown,onClick:()=>r.setCurrentValue(e)},t)}));rt.displayName="SegmentedControlOption";const nt=z((({store:e})=>{const{date:t,sortDirection:r}=e,n=A((()=>({opened:!1,toggle(){this.opened=!this.opened},close(){this.opened=!1,e.applyFilters()},onDateChange(t){e.date=t},clear(){e.date=null,e.applyFilters()}}))),i=h.createElement("div",{style:{flex:1,display:"flex",position:"relative"}},h.createElement(Je,{className:"date-button",style:{flex:1,textAlign:"left",borderRadius:0},onClick:n.toggle},t?h.createElement("sup",null,"ASC"===r?"From":"To"):null,h.createElement("span",null,t?ie(t,"MMM d, HH:mm"):"live")),t?h.createElement(Je,{className:"x-3deye-button--icon",style:{position:"absolute",right:0},onClick:n.clear},h.createElement(Ye,{size:16})):null);return h.createElement("div",{className:"events-panel-datepicker"},h.createElement("div",{style:{position:"relative"}},h.createElement(We,{target:i,opened:n.opened,onCloseRequest:n.close,disableAnimation:!0,className:"popover-datetimepicker"},h.createElement(tt,{value:r,onChange:e.toggleSorting},h.createElement(rt,{value:"ASC"},"From"),h.createElement(rt,{value:"DESC"},"To")),h.createElement(U,{selected:t,onChange:n.onDateChange,showTimeSelect:!0,dateFormat:"MMM d, HH:mm",timeFormat:"HH:mm",inline:!0}),h.createElement(Je,{onClick:n.close,className:"x-3deye-button--ok"},"Ok"))))}));nt.displayName="EventsPanelDatepicker";const it=({value:e,onChange:t})=>{const r=f(null),n=f(),[i,a]=v(0);return y((()=>{if(!r.current)return;const e=new q(r.current);return n.current=e,e.listen("MDCSlider:change",(()=>{null==t||t(e.value)})),()=>{n.current=void 0,e.destroy()}}),[]),y((()=>{const e=new Z((e=>{var t;for(const r of e){const e=r.contentRect.width;e!==i&&(null===(t=n.current)||void 0===t||t.layout()),a(e)}}));return e.observe(r.current),()=>e.disconnect()}),[]),y((()=>{n.current&&(n.current.value=e)}),[e]),h.createElement("div",{ref:r,className:"mdc-slider mdc-slider--discrete mdc-slider--display-markers",tabIndex:0,role:"slider","data-step":5,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":e,"aria-label":"Select Value"},h.createElement("div",{className:"mdc-slider__track-container"},h.createElement("div",{className:"mdc-slider__track"}),h.createElement("div",{className:"mdc-slider__track-marker-container"})),h.createElement("div",{className:"mdc-slider__thumb-container"},h.createElement("div",{className:"mdc-slider__pin"},h.createElement("span",{className:"mdc-slider__pin-value-marker"})),h.createElement("svg",{className:"mdc-slider__thumb",width:"21",height:"21"},h.createElement("circle",{cx:"10.5",cy:"10.5",r:"7.875"})),h.createElement("div",{className:"mdc-slider__focus-ring"})))};it.displayName="Slider";const at=z((({getter:e,setter:t})=>{const[r,n]=v(0),i=f(null),a=Math.floor(100*e());return y((()=>L(e,(e=>{n(Math.floor(100*e))}),{fireImmediately:!0})),[e]),h.createElement("div",{ref:i,style:{paddingLeft:8,paddingRight:8,marginTop:5}},h.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},h.createElement("div",null,"CONFIDENCE"),h.createElement("div",{style:{fontSize:"1.1em"}},a,"%")),h.createElement(it,{value:r,onChange:e=>{t(e/100)}}))}));at.displayName="ProbabilitySlider";const lt=xe({viewBox:"0 0 24 24",svg:h.createElement(h.Fragment,null,h.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),h.createElement("path",{d:"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"}))});lt.displayName="DoneIcon";const ot=[{color:ge[500],name:"red",highlightColor:ge[100]},{color:be[500],name:"green",highlightColor:be[100]},{color:pe[500],name:"blue",highlightColor:pe[100]},{color:ye[500],name:"yellow",highlightColor:ye[900]},{color:"#000",name:"black",highlightColor:"#fff"},{color:"#fff",name:"white",highlightColor:"#000"},{color:ve[500],name:"dimgrey",highlightColor:ve[100]}],st=z((({value:e,clear:t,toggle:r})=>h.createElement("div",{className:"color-selector"},h.createElement("div",null,"COLOR"),h.createElement("div",{className:"color-selector__items"},ot.map((({color:t,highlightColor:n,name:i})=>h.createElement("button",{key:i,className:H("color-selector__item",{selected:e.has(i)}),style:{backgroundColor:t},onClick:r.bind(null,i)},h.createElement(lt,{color:n,size:20})))),h.createElement(Je,{className:"color-selector__clear",disabled:!e.size,onClick:t},h.createElement(Ye,{size:20}))))));st.displayName="ColorSelector";const ct=({size:e=48})=>h.createElement("svg",{width:e,height:e,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid"},h.createElement("rect",{x:"0",y:"0",width:"100",height:"100",fill:"none",className:"bk"}),h.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(0 50 50) translate(0 -30)"},h.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0s",repeatCount:"indefinite"})),h.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(30 50 50) translate(0 -30)"},h.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.08333333333333333s",repeatCount:"indefinite"})),h.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(60 50 50) translate(0 -30)"},h.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.16666666666666666s",repeatCount:"indefinite"})),h.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(90 50 50) translate(0 -30)"},h.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.25s",repeatCount:"indefinite"})),h.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(120 50 50) translate(0 -30)"},h.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.3333333333333333s",repeatCount:"indefinite"})),h.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(150 50 50) translate(0 -30)"},h.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.4166666666666667s",repeatCount:"indefinite"})),h.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(180 50 50) translate(0 -30)"},h.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.5s",repeatCount:"indefinite"})),h.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(210 50 50) translate(0 -30)"},h.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.5833333333333334s",repeatCount:"indefinite"})),h.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(240 50 50) translate(0 -30)"},h.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.6666666666666666s",repeatCount:"indefinite"})),h.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(270 50 50) translate(0 -30)"},h.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.75s",repeatCount:"indefinite"})),h.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(300 50 50) translate(0 -30)"},h.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.8333333333333334s",repeatCount:"indefinite"})),h.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(330 50 50) translate(0 -30)"},h.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.9166666666666666s",repeatCount:"indefinite"})));ct.displayName="Preloader";var dt="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},ut="object"==typeof dt&&dt&&dt.Object===Object&&dt,mt="object"==typeof self&&self&&self.Object===Object&&self,ht=ut||mt||Function("return this")(),pt=ht.Symbol,ft=pt,bt=Object.prototype,vt=bt.hasOwnProperty,gt=bt.toString,yt=ft?ft.toStringTag:void 0;var Et=function(e){var t=vt.call(e,yt),r=e[yt];try{e[yt]=void 0;var n=!0}catch(e){}var i=gt.call(e);return n&&(t?e[yt]=r:delete e[yt]),i},wt=Object.prototype.toString;var Ct=Et,xt=function(e){return wt.call(e)},Ot=pt?pt.toStringTag:void 0;var Nt=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)},Pt=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":Ot&&Ot in Object(e)?Ct(e):xt(e)},jt=Nt;var Lt,Tt=function(e){if(!jt(e))return!1;var t=Pt(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t},It=ht["__core-js_shared__"],Mt=(Lt=/[^.]+$/.exec(It&&It.keys&&It.keys.IE_PROTO||""))?"Symbol(src)_1."+Lt:"";var _t=function(e){return!!Mt&&Mt in e},kt=Function.prototype.toString;var St=Tt,Dt=_t,Ft=Nt,Ht=function(e){if(null!=e){try{return kt.call(e)}catch(e){}try{return e+""}catch(e){}}return""},zt=/^\[object .+?Constructor\]$/,At=Function.prototype,Rt=Object.prototype,$t=At.toString,Vt=Rt.hasOwnProperty,Bt=RegExp("^"+$t.call(Vt).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");var Ut=function(e){return!(!Ft(e)||Dt(e))&&(St(e)?Bt:zt).test(Ht(e))},Wt=function(e,t){return null==e?void 0:e[t]};var Gt=function(e,t){var r=Wt(e,t);return Ut(r)?r:void 0},qt=Gt(Object,"create"),Zt=qt;var Jt=function(){this.__data__=Zt?Zt(null):{},this.size=0};var Yt=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t},Xt=qt,Qt=Object.prototype.hasOwnProperty;var Kt=function(e){var t=this.__data__;if(Xt){var r=t[e];return"__lodash_hash_undefined__"===r?void 0:r}return Qt.call(t,e)?t[e]:void 0},er=qt,tr=Object.prototype.hasOwnProperty;var rr=qt;var nr=Jt,ir=Yt,ar=Kt,lr=function(e){var t=this.__data__;return er?void 0!==t[e]:tr.call(t,e)},or=function(e,t){var r=this.__data__;return this.size+=this.has(e)?0:1,r[e]=rr&&void 0===t?"__lodash_hash_undefined__":t,this};function sr(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}sr.prototype.clear=nr,sr.prototype.delete=ir,sr.prototype.get=ar,sr.prototype.has=lr,sr.prototype.set=or;var cr=sr;var dr=function(){this.__data__=[],this.size=0};var ur=function(e,t){return e===t||e!=e&&t!=t};var mr=function(e,t){for(var r=e.length;r--;)if(ur(e[r][0],t))return r;return-1},hr=mr,pr=Array.prototype.splice;var fr=mr;var br=mr;var vr=mr;var gr=dr,yr=function(e){var t=this.__data__,r=hr(t,e);return!(r<0)&&(r==t.length-1?t.pop():pr.call(t,r,1),--this.size,!0)},Er=function(e){var t=this.__data__,r=fr(t,e);return r<0?void 0:t[r][1]},wr=function(e){return br(this.__data__,e)>-1},Cr=function(e,t){var r=this.__data__,n=vr(r,e);return n<0?(++this.size,r.push([e,t])):r[n][1]=t,this};function xr(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}xr.prototype.clear=gr,xr.prototype.delete=yr,xr.prototype.get=Er,xr.prototype.has=wr,xr.prototype.set=Cr;var Or=xr,Nr=Gt(ht,"Map"),Pr=cr,jr=Or,Lr=Nr;var Tr=function(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e};var Ir=function(e,t){var r=e.__data__;return Tr(t)?r["string"==typeof t?"string":"hash"]:r.map},Mr=Ir;var _r=Ir;var kr=Ir;var Sr=Ir;var Dr=function(){this.size=0,this.__data__={hash:new Pr,map:new(Lr||jr),string:new Pr}},Fr=function(e){var t=Mr(this,e).delete(e);return this.size-=t?1:0,t},Hr=function(e){return _r(this,e).get(e)},zr=function(e){return kr(this,e).has(e)},Ar=function(e,t){var r=Sr(this,e),n=r.size;return r.set(e,t),this.size+=r.size==n?0:1,this};function Rr(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}Rr.prototype.clear=Dr,Rr.prototype.delete=Fr,Rr.prototype.get=Hr,Rr.prototype.has=zr,Rr.prototype.set=Ar;var $r=Rr;function Vr(e,t){if("function"!=typeof e||null!=t&&"function"!=typeof t)throw new TypeError("Expected a function");var r=function(){var n=arguments,i=t?t.apply(this,n):n[0],a=r.cache;if(a.has(i))return a.get(i);var l=e.apply(this,n);return r.cache=a.set(i,l)||a,l};return r.cache=new(Vr.Cache||$r),r}Vr.Cache=$r;const Br=Vr((()=>{const e=document.createElement("div");e.style.overflowY="scroll",e.style.position="absolute",e.style.top="-9999px",document.body.append(e);const t=e.offsetWidth;return e.remove(),t})),Ur=z((({data:e,children:t,onClick:r,onAuxClick:n,menuComponent:i})=>{const a=f(null),l=f(null);return h.createElement("div",{ref:a,onDragStart:t=>{var r;if(!t.dataTransfer)return;t.dataTransfer.setData("x-3deye/event",""+e.id),t.dataTransfer.dropEffect="move";const n=null===(r=a.current)||void 0===r?void 0:r.querySelector("img");if(n){const{x:e,y:r}=n.getBoundingClientRect();t.dataTransfer.setDragImage(n,t.clientX-e,t.clientY-r)}},className:"event-list-item",onClick:()=>null==r?void 0:r(e),onAuxClick:t=>null==n?void 0:n(t,e),onContextMenu:e=>{var t;e.preventDefault(),a.current&&(null===(t=l.current)||void 0===t||t.toggleAt(a.current,{top:e.clientY,left:e.clientX}))},draggable:!0},t,i&&h.createElement(i,{ref:l,data:e}))}));Ur.displayName="EventListItem";const Wr=({className:e,style:t,box:{Top:r,Left:n,Right:i,Bottom:a}})=>h.createElement(h.Fragment,null,h.createElement("div",{className:e,style:{position:"absolute",top:100*r+"%",left:100*n+"%",bottom:100*(1-a)+"%",right:100*(1-i)+"%",...t}}));Wr.displayName="LicensePlateLpr";const Gr=({Type:e,Box:t,Probability:r,width:n,height:i})=>{const{eventSchema:a}=p(ae),l=f(null),{Top:o,Left:s,Right:c,Bottom:d}=t;return E((()=>{if(!n||!i)return;if(!l.current)return;const e=l.current.getBoundingClientRect();let t=(s+c)/2*n-e.width/2,r=o*i-e.height-4;r<0&&(r=d*i+4),t<0&&(t=0),t>n-e.width&&(t=n-e.width),r>i-e.height&&(r=i-e.height),l.current.style.top=`${r}px`,l.current.style.left=`${t}px`})),h.createElement(h.Fragment,null,h.createElement(Wr,{box:t,style:{outline:`2px solid ${a.colorsByFoundObjectType.get(e)}`}}),h.createElement("div",{ref:l,className:"event-list-item__detected-object-label",title:`${e.toLowerCase()} ${Math.floor(100*r)}%`},h.createElement("div",{style:{padding:4,lineHeight:"24px"}},e.toLowerCase()),h.createElement("div",{className:"event-list-item__detected-object-label__caption",style:{backgroundColor:a.colorsByFoundObjectType.get(e)}},Math.floor(100*r),"%")))};function qr({style:e}){return h.createElement("div",{className:"frame",style:e},h.createElement("div",{className:"corner-highlight-tl"}),h.createElement("div",{className:"corner-highlight-tr"}),h.createElement("div",{className:"corner-highlight-br"}),h.createElement("div",{className:"corner-highlight-bl"}))}Gr.displayName="DetectedObjectHighlight";const Zr=({face:{Name:e,Box:t,Probability:r},url:n,thumbWidth:i,thumbHeight:a,width:l,height:o})=>{const{Top:s,Left:c,Right:d,Bottom:u}=t,m=100/i/(d-c),p={top:2},b=f(null);return E((()=>{if(!b.current)return;const e=b.current.getBoundingClientRect();let t=(c+d)/2*l-e.width/2,r=s*o-e.height-4;r<0&&(r=u*o+4),t<0&&(t=0),t>l-e.width&&(t=l-e.width),b.current.style.top=`${r}px`,b.current.style.left=`${t}px`})),c>=1-d?p.left=2:p.right=2,h.createElement(h.Fragment,null,h.createElement("div",{ref:b,className:"event-list-item__detected-object-label trigger",title:`${e} ${Math.floor(100*r)}%`},h.createElement("div",{style:{padding:4,display:"flex",alignItems:"center",maxWidth:120,whiteSpace:"break-spaces"}},e),h.createElement("div",{className:"event-list-item__detected-object-label__caption",style:{color:"black",backgroundColor:"orange"}},Math.floor(100*r),"%")),h.createElement(Wr,{className:"trigger",box:t,style:{outline:"1px solid orange"}}),h.createElement("div",{className:"event-list-item-face preview",style:{overflow:"hidden",width:i*(d-c)*m,height:a*(u-s)*m,...p}},h.createElement("img",{style:{width:i*m,height:a*m,transform:`translate(-${100*c}%, -${100*s}%)`},src:n}),h.createElement(qr,null)))};Zr.displayName="FaceHighlight";const Jr=h.memo((({value:e})=>e?h.createElement(h.Fragment,null,e.split("").map(((e,t)=>{const r=e.charCodeAt(0);return r<48||r>57?h.createElement(h.Fragment,{key:t},e):h.createElement("span",{key:t,className:"digit"},e)}))):null));Jr.displayName="LicensePlateNumber";const Yr=({detectedObject:e,height:t,width:r,url:n,thumbWidth:i,thumbHeight:a})=>{const{Type:l,Box:{Top:o,Left:s,Right:c,Bottom:d},Probability:u}=e,m=e.Value||e.Number,p=f(null);E((()=>{if(!p.current)return;const e=p.current.getBoundingClientRect();let n=(s+c)/2*r-e.width/2,i=o*t-e.height-4;i<0&&(i=d*t+4),n<0&&(n=0),n>r-e.width&&(n=r-e.width),p.current.style.top=`${i}px`,p.current.style.left=`${n}px`}));const b={top:2};s>=1-c?b.left=2:b.right=2;const v=100/i/(c-s);return h.createElement(h.Fragment,null,h.createElement("div",{ref:p,className:"event-list-item__license-plate-label trigger",title:`${l.toLowerCase()} ${Math.floor(100*u)}%`},h.createElement("div",{style:{padding:4}},h.createElement(Jr,{value:m})),h.createElement("div",{className:"event-list-item__license-plate-label__caption"},Math.floor(100*u),"%")),h.createElement(Wr,{className:"event-list-item__license-plate-trigger trigger",box:e.Box}),h.createElement("div",{className:"event-list-item__license-plate preview",style:{overflow:"hidden",width:i*(c-s)*v,height:a*(d-o)*v+16,position:"absolute",...b}},h.createElement("img",{style:{width:i*v,height:a*v,transform:`translate(-${100*s}%, -${100*o}%)`},src:n}),h.createElement("div",{className:"plate-number"},h.createElement(Jr,{value:m})),h.createElement(qr,{style:{height:a*(d-o)*v}})))};Yr.displayName="LicensePlateHighlight";const Xr=xe({viewBox:"0 0 24 24",svg:h.createElement(h.Fragment,null,h.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),h.createElement("path",{d:"M15 13V5c0-1.66-1.34-3-3-3S9 3.34 9 5v8c-1.21.91-2 2.37-2 4 0 2.76 2.24 5 5 5s5-2.24 5-5c0-1.63-.79-3.09-2-4zm-4-8c0-.55.45-1 1-1s1 .45 1 1h-1v1h1v2h-1v1h1v2h-2V5z"}))});Xr.displayName="ThermostatIcon";const Qr=z((({data:e})=>{if("Temperature"!==e.type)return null;let t=Number(e.raw.data);return t=5*(t-32)/9+273.15,h.createElement("div",{className:"event-list-item__temperature"},h.createElement(Xr,null),(t-273.15).toFixed(1),"°C / ",(9*t/5-459.67).toFixed(1),"°F")}));Qr.displayName="Temperature";const Kr=z((({data:e,cameraNameHidden:t})=>{var r;const a=p(ae),{cameras:l}=a,o=l.loaded&&(null===(r=l.camerasById.get(e.cameraId))||void 0===r?void 0:r.name)||"...";return h.createElement("div",{className:"event-list-item-caption"},h.createElement("div",{className:"event-list-item__time"},function(e,t){let r="",a="";return n(e,new Date)?i(e,new Date)?r=a="HH:mm":i(e,t)?(r="EEE d MMM HH:mm",a="HH:mm"):r=a="EEE d MMM HH:mm":n(e,t)?(r="yyyy d MMM HH:mm",a="d MMM HH:mm"):r=a="yyyy d MMM HH:mm",(e.getSeconds()||t.getSeconds())&&(r+=":ss",a+=":ss"),+e==+t?`${ie(e,r)}`:`${ie(e,r)} - ${ie(t,a)}`}(e.startTime,e.endTime)),t?null:h.createElement("div",{className:"event-list-item__camera-name",title:o},o),+e.endTime-+e.startTime>0&&h.createElement("div",{className:"event-list-item__duration"},function(e,t=!0){if((e=Math.round(e/1e3))<60)return`${e}s`;const r=e%60,n=t?`${r}`:`${r}`.padStart(2,"0");let i=(e-r)/60;if(i<60)return!r&&t?`${i}m`:`${i}m ${n}s`;const a=Math.floor(i/60);if(i-=60*a,!r&&!i&&t)return`${a}h`;const l=t?`${i}`:`${i}`.padStart(2,"0");return!r&&i&&t?`${a}h ${l}m`:`${a}h ${l}m ${n}s`}(+e.endTime-+e.startTime)),h.createElement(Qr,{data:e}))}));Kr.displayName="EventListItemCaption";const en=z((({url:e,noPreview:t,width:r})=>h.createElement(h.Fragment,null,e?h.createElement("img",{key:e,style:{position:"absolute",width:"100%",height:"100%",top:0,left:0},src:e}):null,h.createElement(W,{radius:r}),t?h.createElement("div",{className:"no-preview-overlay"}):null)));en.displayName="EventThumbnail";const tn=z((({data:e,width:t,height:r,cameraNameHidden:n,onClick:i,onAuxClick:a,menuComponent:l})=>{const o=p(ae),{eventSchema:s}=o,[c,d]=function(e){var t;const[r,n]=v(null),i=p(ae),{cameras:a,thumbnails:l}=i;y((()=>{if(e.thumbnailUrl)return void n(null);const t=l.fetchThumbnail(e.cameraId,e.startTime,e.startTime).subscribe((e=>{n(e||null)}));return()=>t.unsubscribe()}),[e.id]);let o="",s=!1;return e.thumbnailUrl?o=e.thumbnailUrl:null===r&&a.loaded?(o=(null===(t=a.camerasById.get(e.cameraId))||void 0===t?void 0:t.imageUrl)||"",s=!0):r&&(o=r.url),[o,s]}(e);let u=null,m=null,f=null;if(e.detectedObjects.length){let n,i;const{ThumbnailSize:a}=JSON.parse(e.raw.data);a&&(n=a.Width,i=a.Height),u=e.detectedObjects.filter((({Type:e})=>s.foundObjectTypes.includes(e)&&"LicensePlate"!==e)).map(((e,n)=>h.createElement(Gr,{key:n,...e,height:r,width:t}))),m=e.detectedObjects.filter((({Type:e})=>"LicensePlate"===e)).map(((e,a)=>h.createElement(Yr,{key:a,detectedObject:e,width:t,height:r,thumbWidth:n,thumbHeight:i,url:c})))}if(e.faces){const{Width:n,Height:i}=JSON.parse(e.raw.data).ThumbnailSize;f=e.faces.map(((e,a)=>h.createElement(Zr,{key:a,face:e,url:c,thumbWidth:n,thumbHeight:i,width:t,height:r})))}return h.createElement(Ur,{onClick:i,onAuxClick:a,data:e,width:t,height:r,cameraNameHidden:n,menuComponent:l},h.createElement("div",{style:{position:"absolute",top:0,left:0,bottom:0,right:0}},h.createElement(en,{url:c,noPreview:d,width:t}),u,m,f,e.acknowledged?h.createElement("div",{className:"acknowledged-overlay"},"acknowledged"):null,h.createElement(Kr,{data:e,cameraNameHidden:n})))}));tn.displayName="EventItem";class rn extends h.Component{constructor(){super(...arguments),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:{hasError:!1}})}componentDidCatch(e,t){this.setState({hasError:!0}),K.withScope((r=>{Object.keys(t).forEach((e=>{r.setExtra(e,t[e])})),K.captureException(e)})),console.error(e),console.log(t)}render(){if(!this.state.hasError)return this.props.children;const{style:e,children:t,...r}=this.props;return h.createElement("div",{style:{flex:1,padding:10,display:"grid",placeItems:"center",alignContent:"center",textAlign:"center",...this.props.style},...r},h.createElement("h1",null,"Oops. Something went wrong"),h.createElement("div",null,"We've been notified about this problem"),h.createElement(Je,{onClick:()=>this.setState({hasError:!1})},"retry"))}}const nn=z((({store:e,captionHeight:t=0,minColumnWidth:r=180,onEventClick:n,onEventAuxClick:i,eventRenderer:a=(({data:e,width:t,height:r})=>h.createElement(tn,{data:e,cameraNameHidden:!1,onClick:n,onAuxClick:i,width:t,height:r}))})=>{const l=f(),o=A((()=>({rowIndex:0,columnIndex:0,update(e,t){this.rowIndex=e,this.columnIndex=t},reset(){this.rowIndex=0,this.columnIndex=0}})));if(e.error&&!e.data.length)return o.reset(),h.createElement("div",{style:{flex:1,display:"flex",justifyContent:"center",alignItems:"center"}},h.createElement("div",{style:{textAlign:"center"}},h.createElement("div",null,"Couldn't fetch data"),h.createElement(Je,{onClick:e.reload},"Retry")));if(e.loading)return o.reset(),h.createElement("div",{style:{flex:1,display:"flex",justifyContent:"center",alignItems:"center"}},h.createElement(ct,null));if(!e.data.length)return o.reset(),h.createElement("div",{style:{flex:1,display:"flex",justifyContent:"center",alignItems:"center"}},ne.t("noEventsFound"));const s=(t,r)=>(e.loadMore(),Promise.resolve()),c=({scrollTop:t})=>{"disabled"!==e.liveUpdateMode&&e.setLiveUpdateMode(t>=1||e.pendingData.length?"manual":"auto")};return h.createElement(J,null,(({width:n,height:i})=>h.createElement(R,null,(()=>{var d;const u=Math.floor(n/r)||1,m=n/u/16*9+t,p=u*Math.floor(i/m)>=e.data.length?0:Br(),f=Math.max(1,Math.floor((n-p)/r)),b=Math.ceil(e.data.length/f),v=(n-p-2*(f-1))/f,g=v/16*9+t;return h.createElement(h.Fragment,null,h.createElement(Y,{isItemLoaded:e=>e<b,itemCount:b+((null===(d=e.pageInfo)||void 0===d?void 0:d.haveMore)?1:0),loadMoreItems:s},(({onItemsRendered:t,ref:r})=>{var s;return h.createElement(X,{key:`${n}x${i}`,ref:Q(l,r),columnCount:f,columnWidth:e=>v+(e?2:0),height:i,width:n,rowCount:b+((null===(s=e.pageInfo)||void 0===s?void 0:s.haveMore)||e.error?1:0),rowHeight:e=>g+(e?2:0),initialScrollTop:g*o.rowIndex,onScroll:c,onItemsRendered:({visibleRowStartIndex:e,visibleColumnStartIndex:r,visibleRowStopIndex:n,overscanRowStopIndex:i,overscanRowStartIndex:a})=>{o.update(e,r),t({overscanStartIndex:a,overscanStopIndex:i,visibleStartIndex:e,visibleStopIndex:n})}},(t=>({columnIndex:r,rowIndex:n,style:i})=>h.createElement(R,null,(()=>{var l,o;const s=n*t+r,c=e.data[s];return i={...i,left:i.left+(r?2:0),width:i.width-(r?2:0),top:i.top+(n?2:0),height:i.height-(n?2:0)},s===e.data.length?e.error?h.createElement("div",{style:i},h.createElement("div",{style:{position:"absolute",inset:0,display:"grid",placeItems:"center"}},h.createElement("div",{style:{textAlign:"center"}},h.createElement("div",null,"Couldn't fetch more data"),h.createElement(Je,{onClick:e.loadMore},"Retry")))):(null===(l=e.pageInfo)||void 0===l?void 0:l.haveMore)?h.createElement("div",{style:i},h.createElement("div",{style:{position:"absolute",inset:0,display:"grid",placeItems:"center"}},h.createElement(ct,{size:32}))):h.createElement("div",{style:i}):!c&&(null===(o=e.pageInfo)||void 0===o?void 0:o.haveMore)?h.createElement("div",{style:i}):c?h.createElement("div",{style:i},h.createElement(rn,null,a({data:c,width:i.width,height:i.height}))):h.createElement("div",{style:i})})))(f))})),h.createElement(R,null,(()=>e.pendingData.length?h.createElement("div",{style:{position:"absolute",top:0,left:0,right:p,pointerEvents:"none",textAlign:"center",padding:8}},h.createElement(Je,{className:"x-3deye-button--overlay",style:{background:"rgba(0, 0, 0, 0.75)",padding:"8px 16px",backdropFilter:"blur(2px)",borderRadius:32,pointerEvents:"auto"},onClick:()=>{var t;e.flushUpdates(),null===(t=l.current)||void 0===t||t.scrollTo({scrollLeft:0,scrollTop:0}),e.setLiveUpdateMode("auto")}},ne.t("showEvents",{count:e.pendingData.length}))):null)))}))))}));nn.displayName="EventGrid";const an=({onEventClick:e,style:t,...r})=>{var n;const i=null!==(n=p(w))&&void 0!==n?n:C,[a,l]=v();return y((()=>{null==a||a.dispose();const e=new Ee(i.events);e.initWith(i.api),e.load(),l(e)}),[i]),h.createElement(ae.Provider,{value:i},a?h.createElement("div",{style:{display:"flex",flexDirection:"column",...t},...r},h.createElement(Ae,{addionalFiltersEnabled:!0,store:a}),h.createElement(nt,{store:a}),a.someAnalyticsFilterSelected&&h.createElement(h.Fragment,null,h.createElement(at,{getter:a.getProbabilityTreshold,setter:a.setProbabilityTreshold}),h.createElement(st,{value:a.colors,toggle:a.toggleColor,clear:a.clearColors})),h.createElement("div",{style:{flex:1}},h.createElement(nn,{minColumnWidth:1/0,store:a.eventsLoader,eventRenderer:({data:t,width:r,height:n})=>h.createElement(tn,{data:t,cameraNameHidden:!1,onClick:e,width:r,height:n})}))):null)};var ln;an.displayName="EventList",(ln={resources:{en:{translation:ee}}})&&Object.assign(re,ln),l(ne.init(re));export{an as default};
|
|
1
|
+
import{format as e,subHours as t,startOfHour as r,isSameYear as n,isSameDay as i}from"date-fns/esm";import a from"i18next";import{from as o,Observable as l,Subscription as s,of as c,throwError as d,EMPTY as u}from"rxjs";import*as h from"react";import m,{useContext as p,useRef as f,createContext as b,useState as v,Children as g,useEffect as y,useCallback as E,useLayoutEffect as w}from"react";import{AppContext as C,app as x}from"@3deye-toolkit/core";import{computed as O,makeObservable as P,observable as N,action as L,runInAction as I,reaction as M}from"mobx";import{subHours as j}from"date-fns";import{mergeMap as T,catchError as _,switchMap as k,mapTo as S,concatMap as D}from"rxjs/operators";import F,{components as z}from"react-select";import A from"clsx";import{observer as H,useLocalObservable as $,Observer as R}from"mobx-react-lite";import{useSpring as V,animated as B}from"@react-spring/web";import U from"react-dom";import W from"react-datepicker";import G from"react-ink";import q from"@reach/tooltip";import Y from"@seznam/compose-react-refs";import X from"react-virtualized-auto-sizer";import Z from"react-window-infinite-loader";import{VariableSizeGrid as J}from"react-window";import*as K from"@sentry/browser";var Q={filter:"Filter",button:{ok:"Ok"},noEventsFound:"no events found",showEvents_one:"show {{count}} new event",showEvents_other:"show {{count}} new events"};const ee=new Map,te={detection:{order:["querystring","htmlTag","navigator"],lookupQuerystring:"lang"},fallbackLng:"en",load:"all",interpolation:{escapeValue:!1}},re=a.createInstance();function ne(t,r){const n=ee.get(re.language);return e(t,r,{locale:n})}const ie=m.createContext(null);var ae,oe;function le(e,t=!1){const r=O(e);return new l((e=>{const n=r.observe_((({newValue:t})=>e.next(t)),t);return()=>n()}))}!function(e){e[e.CONNECTING=0]="CONNECTING",e[e.CONNECTED=1]="CONNECTED",e[e.RECONNECTING=2]="RECONNECTING",e[e.DISCONNECTED=3]="DISCONNECTED"}(ae||(ae={})),function(e){e[e.Motion=0]="Motion",e[e.Tampering=1]="Tampering",e[e.PanTiltZoom=2]="PanTiltZoom",e[e.CrossLine=3]="CrossLine",e[e.Intrusion=4]="Intrusion",e[e.LicensePlate=5]="LicensePlate",e[e.FaceDetection=6]="FaceDetection",e[e.Audio=7]="Audio",e[e.Analytic=8]="Analytic",e[e.SpeedDetection=9]="SpeedDetection",e[e.PeopleCounter=10]="PeopleCounter",e[e.Temperature=11]="Temperature",e[e.PoS=12]="PoS",e[e.GPS=13]="GPS",e[e.DigitalInput=14]="DigitalInput",e[e.Normal=15]="Normal",e[e.Suspicious=16]="Suspicious",e[e.Loitering=17]="Loitering",e[e.Vandalism=18]="Vandalism",e[e.Trespass=19]="Trespass",e[e.Emergency=20]="Emergency",e[e.LifeInDanger=21]="LifeInDanger",e[e.ErroneousAlert=22]="ErroneousAlert",e[e.Misidentification=23]="Misidentification",e[e.Fire=24]="Fire",e[e.MedicalDuress=25]="MedicalDuress",e[e.HoldUp=26]="HoldUp",e[e.CheckIn=27]="CheckIn",e[e.CheckOut=28]="CheckOut",e[e.ClockIn=29]="ClockIn",e[e.ClockOut=30]="ClockOut",e[e.ParkingStart=31]="ParkingStart",e[e.ParkingEnd=32]="ParkingEnd",e[e.ParkingViolation=33]="ParkingViolation",e[e.GateAccess=34]="GateAccess",e[e.DoorAccess=35]="DoorAccess",e[e.TemperatureCheck=36]="TemperatureCheck",e[e.IDCheck=37]="IDCheck",e[e.PPECheck=38]="PPECheck",e[e.WelfareCheck=39]="WelfareCheck",e[e.Uncategorized=40]="Uncategorized",e[e.Unknown=999]="Unknown"}(oe||(oe={}));class se{constructor(){Object.defineProperty(this,"api",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]})}initWith(e){this.api=e,this.afterInit&&this.afterInit()}dispose(){this.disposables.forEach((e=>{e instanceof s?e.closed||e.unsubscribe():e()}))}}const ce=new Set(["LicensePlate","FaceDetection","Analytic","SpeedDetection","Temperature","PoS","GPS","DigitalInput"]);class de{constructor(e){if(Object.defineProperty(this,"cameraId",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"type",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"raw",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"thumbnailUrl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"detectedObjects",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"faces",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"instant",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),P(this,{id:O,startTime:O,endTime:O,acknowledged:O,isLive:O,raw:N.ref}),this.raw=e,this.type=e.eventType,this.cameraId=e.sensorId,("Analytic"===this.type||"FaceDetection"===this.type)&&e.data)try{const t=JSON.parse(e.data);t.FoundObjects&&(this.type="Analytic",this.detectedObjects=t.FoundObjects),t.Faces&&(this.type="FaceDetection",this.faces=t.Faces),this.thumbnailUrl=t.ThumbnailUrl}catch{console.warn("invalid data",e.data),this.type="Motion"}this.instant=ce.has(this.type),this.detectedObjects||(this.detectedObjects=[])}get id(){return this.raw.id}get startTime(){return new Date(this.raw.startTime)}get endTime(){return new Date(this.raw.endTime)}get isLive(){return!ce.has(this.type)&&+this.startTime==+this.endTime}get acknowledged(){return"sensorId"in this.raw&&!!this.raw.ackEventType}}class ue extends se{constructor(e){super(),Object.defineProperty(this,"eventsStore",{enumerable:!0,configurable:!0,writable:!0,value:e}),Object.defineProperty(this,"data",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"pendingData",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"liveUpdateMode",{enumerable:!0,configurable:!0,writable:!0,value:"auto"}),Object.defineProperty(this,"updateTrigger",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"colors",{enumerable:!0,configurable:!0,writable:!0,value:new Set}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"pageInfo",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"loading",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"loadMoreTrigger",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"retryTrigger",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"error",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"sortDirection",{enumerable:!0,configurable:!0,writable:!0,value:"DESC"}),Object.defineProperty(this,"probabilityThreshold",{enumerable:!0,configurable:!0,writable:!0,value:.5}),Object.defineProperty(this,"from",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"to",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"cameras",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"detectedObjects",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"polygons",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"eventTypes",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"loadingInited",{enumerable:!0,configurable:!0,writable:!0,value:!1}),Object.defineProperty(this,"flushUpdates",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.data=[...this.pendingData,...this.data],this.pendingData=[]}}),Object.defineProperty(this,"setLiveUpdateMode",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.liveUpdateMode=e}}),Object.defineProperty(this,"load",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.loadingInited||(this.loadingInited=!0,this.initDataLoading(),this.initLiveUpdates())}}),Object.defineProperty(this,"reload",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.error&&(this.retryTrigger=+!this.retryTrigger)}}),Object.defineProperty(this,"loadMore",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.error=null,this.loadMoreTrigger=+!this.loadMoreTrigger}}),Object.defineProperty(this,"requestData",{enumerable:!0,configurable:!0,writable:!0,value:({sortDirection:e,from:t,to:r,filter:n,pageInfo:i,cameras:a,polygons:o})=>this.api.cameras.GetSensorEventsPage({sensorIds:a,sensorType:"camera",sensorEventTypes:this.eventTypes,startTime:t,endTime:r,isDescending:"DESC"===e,rowsLimit:10,pageToken:null==i?void 0:i.nextPageToken},n,o).pipe(T((e=>e.success?c({events:e.resultItems,pageInfo:e.pageInfo}):d((()=>e.error)))),_((e=>(console.error(e),this.error=e,c({events:[],pageInfo:null})))))}),P(this,{data:N.ref,cameras:N.struct,detectedObjects:N.struct,from:N,to:N,sortDirection:N,probabilityThreshold:N,pendingData:N.ref,liveUpdateMode:N,setLiveUpdateMode:L,updateTrigger:N,colors:N.ref,flushUpdates:L,pageInfo:N.ref,isLive:O,loading:N,loadMoreTrigger:N,retryTrigger:N,error:N.ref,loadMore:L,filterJson:O})}get isLive(){return"DESC"==this.sortDirection&&!this.to}get totalCount(){return this.data.length}get filterJson(){const{probabilityThreshold:e}=this;if(null===e)return null;const t={And:[]};return this.detectedObjects.length&&t.And.push({Or:this.detectedObjects.map((e=>({Type:e})))}),this.colors.size&&t.And.push({Or:[...this.colors].map((e=>({ObjectColors:[e]})))}),t.And.push({Or:[{Probability:e}]}),JSON.stringify(t)}initDataLoading(){const e=le((()=>({from:this.from?+this.from:void 0,to:this.to?+this.to:void 0,sortDirection:this.sortDirection,filter:this.filterJson,cameraFilters:this.cameras,polygons:this.polygons})),!0);this.disposables.push(e.pipe(k((e=>le((()=>this.retryTrigger),!0).pipe(S(e)))),k((({from:e,to:t,sortDirection:r,filter:n,cameraFilters:i,polygons:a})=>(I((()=>{this.loading=!0,this.pageInfo=null,this.error=null,this.data=[],this.pendingData=[]})),this.requestData({from:e?new Date(e):void 0,to:t?new Date(t):void 0,sortDirection:r,filter:n,cameras:i,pageInfo:this.pageInfo,polygons:a}))))).subscribe((({events:e,pageInfo:t})=>{I((()=>{var r,n,i;if(!t)return;const a=e.map(he);this.isLive?this.data=this.uniquelyConcat(this.eventsStore.getEvents({cameraIds:this.cameras,eventTypes:this.eventTypes.map((e=>oe[e])),from:null!==(n=null===(r=a[0])||void 0===r?void 0:r.startTime)&&void 0!==n?n:j(new Date,1),to:null,colors:this.colors.size?this.colors:void 0,detectedObjectTypes:this.detectedObjects,probability:null!==(i=this.probabilityThreshold)&&void 0!==i?i:void 0}),a):this.data=a,this.eventsStore.add(a),this.pageInfo=t,this.loading=!1}))}))),this.disposables.push(e.pipe(k((({from:e,to:t,sortDirection:r,filter:n,cameraFilters:i})=>le((()=>this.loadMoreTrigger)).pipe(D((()=>this.requestData({from:e?new Date(e):void 0,to:t?new Date(t):void 0,sortDirection:r,filter:n,cameras:i,pageInfo:this.pageInfo,polygons:this.polygons}))))))).subscribe((({events:e,pageInfo:t})=>{if(!t)return;const r=e.map(he);this.eventsStore.add(r),I((()=>{this.data=this.data.concat(r),this.pageInfo=t,this.loading=!1}))})))}initLiveUpdates(){this.disposables.push(le((()=>({liveUpdateMode:this.liveUpdateMode,isLive:this.isLive})),!0).pipe(k((({liveUpdateMode:e,isLive:t})=>t&&"auto"===e?le((()=>this.eventsStore.recentAdditions)):u))).subscribe((e=>{if(this.loading)return;if(!this.pageInfo&&this.error)return;const t=this.filter(e.map((e=>this.eventsStore.eventsById.get(e))));t.length&&I((()=>{this.data=[...t,...this.data]}))}))),this.disposables.push(le((()=>({liveUpdateMode:this.liveUpdateMode,isLive:this.isLive})),!0).pipe(k((({liveUpdateMode:e,isLive:t})=>t&&"manual"===e?le((()=>this.eventsStore.recentAdditions)):(this.pendingData&&I((()=>this.pendingData=[])),u)))).subscribe((e=>{if(!this.data.length)return;const t=this.filter(e.map((e=>this.eventsStore.eventsById.get(e))));t.length&&I((()=>{this.pendingData=[...t,...this.pendingData]}))})))}filter(e){let t=e;const{from:r,to:n}=this;if(r&&(t=t.filter((e=>e.startTime>=r))),n&&(t=t.filter((e=>e.startTime<=n))),this.cameras.length&&(t=t.filter((e=>this.cameras.includes(e.cameraId)))),this.eventTypes.length){const e=this.eventTypes.map((e=>oe[e]));t=t.filter((t=>e.includes(t.type)))}return this.detectedObjects.length&&(t=t.filter((e=>e.detectedObjects.some((e=>{var t;const{probabilityThreshold:r}=this;return!(null!==r&&e.Probability<r)&&(this.colors.size?this.detectedObjects.includes(e.Type)&&(null===(t=e.Colors)||void 0===t?void 0:t.some((e=>this.colors.has(e.Color)))):this.detectedObjects.includes(e.Type))}))))),t}uniquelyConcat(e,t){if(!e.length)return t.concat();if(!t.length)return e.concat();const r=e=>[e.id,e];return Array.from(new Map([...e.map(r),...t.map(r)]).values())}dispose(){this.disposables.forEach((e=>{e instanceof s?e.closed||e.unsubscribe():e()}))}}function he(e){return new de(e)}const me={50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",A100:"#82b1ff",A200:"#448aff",A400:"#2979ff",A700:"#2962ff"},pe={50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",A100:"#84ffff",A200:"#18ffff",A400:"#00e5ff",A700:"#00b8d4"},fe={50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",A100:"#b9f6ca",A200:"#69f0ae",A400:"#00e676",A700:"#00c853"},be={50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",A100:"#f5f5f5",A200:"#eeeeee",A400:"#bdbdbd",A700:"#616161"},ve={50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",A100:"#ff8a80",A200:"#ff5252",A400:"#ff1744",A700:"#d50000"},ge={50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",A100:"#ffff8d",A200:"#ffff00",A400:"#ffea00",A700:"#ffd600"};class ye extends se{constructor(e){super(),Object.defineProperty(this,"cameraFilters",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"objectFilters",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"date",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"sortDirection",{enumerable:!0,configurable:!0,writable:!0,value:"DESC"}),Object.defineProperty(this,"probabilityThreshold",{enumerable:!0,configurable:!0,writable:!0,value:.5}),Object.defineProperty(this,"facesProbabilityThreshold",{enumerable:!0,configurable:!0,writable:!0,value:.7}),Object.defineProperty(this,"colors",{enumerable:!0,configurable:!0,writable:!0,value:new Set}),Object.defineProperty(this,"disposables",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"eventsLoader",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"toggleSorting",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.sortDirection="ASC"===this.sortDirection?"DESC":"ASC",null===this.date&&(this.date=t(r(new Date),1))}}),Object.defineProperty(this,"applyFilters",{enumerable:!0,configurable:!0,writable:!0,value:()=>{var e;this.eventsLoader.cameras=this.cameraFilters.map((e=>e.id)),this.eventsLoader.detectedObjects=this.objectFilters.map((e=>e.id)),this.eventsLoader.colors=this.colors,this.eventsLoader.probabilityThreshold=this.objectFilters.length?this.probabilityThreshold:null,"ASC"===this.sortDirection?(this.eventsLoader.sortDirection="ASC",this.eventsLoader.to=void 0,this.eventsLoader.from=this.date):(this.eventsLoader.sortDirection="DESC",this.eventsLoader.from=void 0,this.eventsLoader.to=null!==(e=this.date)&&void 0!==e?e:void 0)}}),Object.defineProperty(this,"getProbabilityTreshold",{enumerable:!0,configurable:!0,writable:!0,value:()=>this.probabilityThreshold}),Object.defineProperty(this,"setProbabilityTreshold",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.probabilityThreshold=e,this.applyFilters()}}),P(this,{cameraFilters:N.ref,objectFilters:N.ref,date:N,sortDirection:N,probabilityThreshold:N,setProbabilityTreshold:L,facesProbabilityThreshold:N,colors:N.ref,someAnalyticsFilterSelected:O,filters:O,setFilters:L,load:L,toggleColor:L.bound,clearColors:L.bound,applyFilters:L,toggleSorting:L}),this.eventsLoader=new ue(e),this.eventsLoader.loading=!0,this.eventsLoader.probabilityThreshold=null}get someAnalyticsFilterSelected(){return!!this.objectFilters.length}get filters(){return this.objectFilters.concat(this.cameraFilters)}load(){this.eventsLoader.load()}setFilters(e){this.cameraFilters=e?e.filter((e=>!("type"in e))):[],this.objectFilters=e?e.filter((e=>"type"in e)):[]}toggleColor(e){const t=new Set(this.colors);this.colors.has(e)?t.delete(e):t.add(e),this.colors=t,this.applyFilters()}clearColors(){this.colors=new Set,this.applyFilters()}afterInit(){this.eventsLoader.initWith(this.api)}dispose(){this.disposables.forEach((e=>{e instanceof s?e.closed||e.unsubscribe():e()})),this.eventsLoader.dispose()}}var Ee,we=(Ee=8,{container:e=>({...e,padding:Ee}),control:(e,t)=>({...e,borderRadius:8,backgroundColor:t.isFocused?"white":"rgba(0, 0, 0, 0.5)",border:"none",boxShadow:null,"&:hover":{borderColor:null}}),menu:e=>({...e,width:`calc(100% - ${2*Ee}px)`,marginTop:Ee?0:e.marginTop}),option:e=>({...e,color:"black"}),multiValueRemove:e=>({...e,color:"black"}),placeholder:(e,t)=>({...e,color:t.isFocused?e.color:"hsl(0, 0%, 70%)"})});function Ce(e){return t=>{const{size:r=24,color:n="currentColor",className:i,...a}=t,o=e.viewBox||"0 0 24 24",l=e.svg;return m.createElement("svg",{preserveAspectRatio:"xMinYMin",className:A("icon",i),width:r,fill:n,viewBox:o,...a},l)}}const xe=Ce({viewBox:"0 0 24 24",svg:m.createElement("g",null,m.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),m.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"}))});xe.displayName="LabelIcon";const Oe=Ce({viewBox:"0 0 24 24",svg:m.createElement("g",null,m.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),m.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"}))});Oe.displayName="CameraIcon";const Pe=Ce({viewBox:"0 0 24 24",svg:m.createElement("path",{d:"M17,6h-2V3c0-0.55-0.45-1-1-1h-4C9.45,2,9,2.45,9,3v3H7C5.9,6,5,6.9,5,8v11c0,1.1,0.9,2,2,2c0,0.55,0.45,1,1,1 c0.55,0,1-0.45,1-1h6c0,0.55,0.45,1,1,1c0.55,0,1-0.45,1-1c1.1,0,2-0.9,2-2V8C19,6.9,18.1,6,17,6z M9.5,18H8V9h1.5V18z M12.75,18 h-1.5V9h1.5V18z M13.5,6h-3V3.5h3V6z M16,18h-1.5V9H16V18z"})});Pe.displayName="LuggageIcon";const Ne=Ce({viewBox:"0 0 24 24",svg:m.createElement(m.Fragment,null,m.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),m.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"}))});Ne.displayName="CarIcon";const Le=Ce({viewBox:"0 0 24 24",svg:m.createElement(m.Fragment,null,m.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),m.createElement("path",{d:"M20 21c-1.39 0-2.78-.47-4-1.32-2.44 1.71-5.56 1.71-8 0C6.78 20.53 5.39 21 4 21H2v2h2c1.38 0 2.74-.35 4-.99 2.52 1.29 5.48 1.29 8 0 1.26.65 2.62.99 4 .99h2v-2h-2zM3.95 19H4c1.6 0 3.02-.88 4-2 .98 1.12 2.4 2 4 2s3.02-.88 4-2c.98 1.12 2.4 2 4 2h.05l1.89-6.68c.08-.26.06-.54-.06-.78s-.34-.42-.6-.5L20 10.62V6c0-1.1-.9-2-2-2h-3V1H9v3H6c-1.1 0-2 .9-2 2v4.62l-1.29.42c-.26.08-.48.26-.6.5s-.15.52-.06.78L3.95 19zM6 6h12v3.97L12 8 6 9.97V6z"}))});Le.displayName="BoatIcon";const Ie=Ce({viewBox:"0 0 24 24",svg:m.createElement(m.Fragment,null,m.createElement("path",{d:"M11.74 13.36L14.14 7.71L13.06 5.5H10.5V4H14L14.73 5.5H21.75L20.75 9H16.44L17.11 10.37C17.69 10.13 18.33 10 19 10C21.76 10 24 12.24 24 15C24 17.76 21.76 20 19 20C16.24 20 14 17.76 14 15C14 13.45 14.71 12.06 15.82 11.15L15 9.5L12.25 16H9.9C9.44 18.28 7.42 20 5 20C2.24 20 0 17.76 0 15C0 12.24 2.24 10 5 10C7.59 10 9.72 11.97 10 14.5H10.58L8.3 9H7.5C7.09 9 6.75 8.66 6.75 8.25C6.75 7.84 7.09 7.5 7.5 7.5H10.25C10.66 7.5 11 7.84 11 8.25C11 8.66 10.66 9 10.25 9H9.97L11.74 13.36M5 11.5C3.07 11.5 1.5 13.07 1.5 15C1.5 16.93 3.07 18.5 5 18.5C6.59 18.5 7.93 17.45 8.36 16H4V14.5H8.47C8.22 12.8 6.76 11.5 5 11.5M19 11.5C18.57 11.5 18.15 11.58 17.77 11.72L19.7 15.68L18.35 16.34L16.5 12.55C15.88 13.18 15.5 14.05 15.5 15C15.5 16.93 17.07 18.5 19 18.5C20.93 18.5 22.5 16.93 22.5 15C22.5 13.07 20.93 11.5 19 11.5Z"}))});Ie.displayName="BicycleIcon";const Me=Ce({viewBox:"0 0 24 24",svg:m.createElement("g",null,m.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),m.createElement("path",{d:"M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-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.1L6 8.3V13h2V9.6l1.8-.7"}))});Me.displayName="DirectionsWalkIcon";const je=Ce({viewBox:"0 0 24 24",svg:m.createElement(m.Fragment,null,m.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),m.createElement("circle",{cx:"4.5",cy:"9.5",r:"2.5"}),m.createElement("circle",{cx:"9",cy:"5.5",r:"2.5"}),m.createElement("circle",{cx:"15",cy:"5.5",r:"2.5"}),m.createElement("circle",{cx:"19.5",cy:"9.5",r:"2.5"}),m.createElement("path",{d:"M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79.05c-.11.02-.22.05-.33.09-.7.24-1.28.78-1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79.29 1.02 1.02 2.03 2.33 2.32.73.15 3.06-.44 5.54-.44h.18c2.48 0 4.81.58 5.54.44 1.31-.29 2.04-1.31 2.33-2.32.31-2.04-1.3-3.49-2.61-4.8z"}))});je.displayName="PetsIcon";const Te=Ce({viewBox:"0 0 24 24",svg:m.createElement(m.Fragment,null,m.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),m.createElement("path",{d:"M4 4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H5Zm0 2h4v2h8V6h4v12H4Z"}),m.createElement("path",{d:"M9.923 10 8.43 12.433 10 15h-.8L8 13.036 6.8 15H6l1.602-2.616L6.136 10h.8l1.093 1.781L9.123 10Z"}),m.createElement("path",{d:"m13.709 10-1.492 2.433L13.787 15h-.8l-1.2-1.964L10.585 15h-.8l1.603-2.616L9.923 10h.799l1.094 1.781L12.91 10Z"}),m.createElement("path",{d:"m17.709 10-1.492 2.433L17.787 15h-.8l-1.2-1.964L14.585 15h-.8l1.603-2.616L13.923 10h.799l1.094 1.781L16.91 10Z"}))});Te.displayName="LicensePlateIcon";const _e=({data:e})=>{const t=16;return"licensePlate"===e.type?null:"detectedObject"!==e.type?m.createElement(Oe,{size:t}):"Luggage"===e.id?m.createElement(Pe,{size:t}):"Car"===e.id?m.createElement(Ne,{size:t}):"Person"===e.id?m.createElement(Me,{size:t}):"Bicycle"===e.id?m.createElement(Ie,{size:t}):"Boat"===e.id?m.createElement(Le,{size:t}):"Animal"===e.id?m.createElement(je,{size:t}):"LicensePlate"===e.id?m.createElement(Te,{size:t}):m.createElement(xe,{size:t})},ke=e=>{const{children:t,innerProps:r,...n}=e,{Option:i}=z,{data:a}=e;if("licensePlate"===a.type)return m.createElement(i,{innerProps:r,...n},m.createElement("span",{style:{paddingLeft:8,paddingRight:8,borderRadius:4,border:"1px solid black"}},t));if("detectedObject"===a.type){const e={display:"inline-flex",alignItems:"center",width:"auto"},o={...r,style:e};return m.createElement(i,{innerProps:o,...n},m.createElement(_e,{data:a}),m.createElement("div",{style:{marginLeft:4}},t))}return m.createElement(i,{...e})},Se=e=>{const{children:t,innerProps:r,...n}=e,{MultiValueLabel:i}=z,{data:a}=e,o={...r,style:{display:"flex",alignItems:"center"}};return m.createElement(i,{innerProps:o,...n},m.createElement(_e,{data:a}),m.createElement("div",{style:{marginLeft:4}},t))},De=Ce({viewBox:"0 0 24 24",svg:m.createElement(m.Fragment,null,m.createElement("path",{d:"M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"}),m.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});De.displayName="FilterListIcon";const Fe={...we,multiValue:(e,{data:t})=>"color"in t?{...e,backgroundColor:t.color,color:"white"}:e,multiValueLabel:(e,{data:t})=>"color"in t?{...e,color:"white"}:e,multiValueRemove:(e,{data:t})=>"color"in t?{...e,color:"white",":hover":{backgroundColor:"rgba(255, 255, 255, 0.7)",color:t.color}}:{...e,color:"hsl(0, 0%, 20%)"},option:(e,{data:t,isFocused:r})=>"color"in t?"type"in t&&"licensePlate"===t.type?{...e,color:t.color,backgroundColor:r?pe[50]:"transparent",":active":{...e[":active"],backgroundColor:pe[100]}}:{...e,color:t.color}:{...e,color:"black"}},ze=e=>{const{children:t,...r}=e;return m.createElement(z.Placeholder,{...r},m.createElement(De,{size:16,style:{position:"relative",top:4}})," ",t)},Ae=H((({addionalFiltersEnabled:e,store:t})=>{const{cameras:r,eventSchema:n}=p(ie),i=f({opened:!1});return m.createElement(F,{closeMenuOnSelect:!1,isMulti:!0,onChange:(e,r)=>{t.setFilters(e),"remove-value"!==r.action||i.current.opened||t.applyFilters()},onMenuOpen:()=>i.current.opened=!0,onMenuClose:()=>{i.current.opened=!1,t.applyFilters()},getOptionLabel:e=>e.name,getOptionValue:e=>e.id,options:(()=>{if(!n)return[];const t=e?n.foundObjectTypesForSelect:[];return r.loaded?[].concat(t,r.data.slice()):t})(),placeholder:re.t("filter"),value:t.filters,components:{MultiValueLabel:Se,Option:ke,Placeholder:ze},styles:Fe})}));Ae.displayName="EventsPanelSelect";const He=e=>`scale(${e})`,$e=({children:e,from:t,style:r})=>{const n=V({opacity:1,from:{opacity:0},config:{tension:300}});return h.createElement(B.div,{style:{...r,...n,transform:n.opacity.to(He),transformOrigin:`${t||"bottom"} center`,width:"max-content"}},e)},Re=document.body;class Ve extends m.Component{constructor(e){super(e),Object.defineProperty(this,"el",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.el=document.createElement("div")}componentDidMount(){Re.appendChild(this.el)}componentWillUnmount(){Re.removeChild(this.el)}render(){return U.createPortal(this.props.children,this.el)}}const Be=({width:e,height:t,color:r,position:n="top",style:i})=>{const a=[0,"top"===n?t:0],o=[e,a[1]],l=[e/2,t-a[1]],s=[e/4,t*("top"===n?3:1)/4],c=[.325*e,t-a[1]],d=[e-c[0],c[1]],u=[e-s[0],s[1]],h=e=>e.join(","),p=`M ${h(a)} C ${h(s)} ${h(c)} ${h(l)} ${h(d)} ${h(u)} ${h(o)} Z`;return m.createElement("svg",{className:"tip",style:i,width:e,height:t,fill:r},m.createElement("path",{d:p}))};class Ue extends m.Component{constructor(){super(...arguments),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:{top:0,left:0,bottom:"auto",tipPosition:"bottom",tipOffset:0}}),Object.defineProperty(this,"targetRef",{enumerable:!0,configurable:!0,writable:!0,value:m.createRef()}),Object.defineProperty(this,"popoverRef",{enumerable:!0,configurable:!0,writable:!0,value:m.createRef()}),Object.defineProperty(this,"outsideClickListener",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const t=e.target;if(this.popoverRef.current.contains(t))return;const r=this.targetRef.current;r&&r.contains(t)||this.props.onCloseRequest()}}),Object.defineProperty(this,"updatePosition",{enumerable:!0,configurable:!0,writable:!0,value:()=>{if(!this.popoverRef)return;const{disablePortal:e}=this.props,t=this.targetRef.current;if(!t)return void console.warn("popover: no target element found");const{top:r,left:n,bottom:i,height:a,width:o}=t.getBoundingClientRect();let l="calc(50% - 12px)",s="auto";const c=this.popoverRef.current;let d="bottom"===this.props.placement?i+10:r-c.clientHeight-10,u=n+o/2-c.clientWidth/2,h="bottom"===this.props.placement?"top":"bottom";d<0&&(d=i+10,h="top"),u<0&&(u=0,l=n+o/2-12),u+c.clientWidth>window.innerWidth&&(u=window.innerWidth-c.clientWidth,l=n-u+o/2-12),e&&(d=a+10,u=0,l=8,"top"===this.props.placement&&(s=d,d="auto")),this.setState({top:d,bottom:s,left:u,tipPosition:h,tipOffset:l},(()=>{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:r,tipPosition:n,tipOffset:i}=this.state,{className:a,opened:o,disablePortal:l,disableAnimation:s}=this.props,c={position:"absolute",left:i};"bottom"===n?c.bottom=-8:c.top=-8;const d=A(a,"x-3deye-popover-body");let u=null;if(o){const i={zIndex:l?1:100000001,position:"absolute",top:e,bottom:r,left:t},a=m.createElement("div",{className:d,ref:this.popoverRef},this.props.children,m.createElement(Be,{width:24,height:8,position:n,color:"white",style:c}));u=s?m.createElement("div",{style:i},a):m.createElement($e,{from:n,style:i},a)}const h=m.cloneElement(this.props.target,{ref:this.targetRef});if(l)return m.createElement("div",{className:"x-3deye-popover",onMouseLeave:this.props.onMouseLeave},h,u);const p=o&&m.createElement(Ve,null,u);return m.createElement(m.Fragment,null,h,p)}startOutsideClickListening(){document.addEventListener("mousedown",this.outsideClickListener,!0)}stopOutsideClickListening(){document.removeEventListener("mousedown",this.outsideClickListener,!0)}}const We={background:"rgb(0 0 0 / 0.9)",color:"white",border:"none",borderRadius:"4px",padding:"0.5em 1em",fontSize:12},Ge=({label:e,children:t})=>m.createElement(q,{label:e,style:We},t);Ge.displayName="Tooltip";class qe extends m.Component{render(){const{forwardedRef:e,children:t,className:r,fullWidth:n,variant:i,type:a,title:o,...l}=this.props,s=A(r,"x-3deye-button",{"x-3deye-button--fullwidth":n},i?`x-3deye-button--${i}`:void 0),c=m.createElement("button",{ref:e,className:s,type:a||"button",...l},t,l.disabled?null:m.createElement(G,null));return o?m.createElement(Ge,{label:o},c):c}}const Ye=m.forwardRef(((e,t)=>m.createElement(qe,{forwardedRef:t,...e}))),Xe=Ce({viewBox:"0 0 24 24",svg:m.createElement("g",null,m.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"}),m.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))});Xe.displayName="CloseIcon";const Ze=(e,t,r)=>Math.min(Math.max(e,t),r),Je=()=>{},Ke=(e,t,r,n)=>Ze(Math.floor((e-t)/r*n),0,n-1),Qe=b({value:null,onPointerDown:Je,setCurrentValue:Je,state:{currentIdx:0,currentValue:null,options:[]}});class et{constructor(e=0){Object.defineProperty(this,"currentIdx",{enumerable:!0,configurable:!0,writable:!0,value:0}),Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:[]}),Object.defineProperty(this,"setCurrentIdx",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.currentIdx=e}}),Object.defineProperty(this,"setOptions",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.options=e}}),this.currentIdx=e,P(this,{currentIdx:N,options:N.ref,currentValue:O,setCurrentIdx:L,setOptions:L})}get currentValue(){return this.options[this.currentIdx]}}const tt=H((({value:e,onChange:t,children:r,style:n})=>{const[i,a]=v(!1),o=f(null),l=g.map(r,(e=>null==e?void 0:e.props.value))||[],s=$((()=>new et(l.indexOf(e))));s.setOptions(l);const c=g.count(r);y((()=>{s.setCurrentIdx(l.indexOf(e))}),[e]),y((()=>{var e;if(!i)return;const r=null===(e=o.current)||void 0===e?void 0:e.getBoundingClientRect();if(!r)return;const n=({clientX:e})=>{s.setCurrentIdx(Ke(e,r.left,r.width,c))},d=()=>{a(!1),t(l[s.currentIdx])};return document.addEventListener("pointermove",n),document.addEventListener("pointerup",d),()=>{document.removeEventListener("pointermove",n),document.removeEventListener("pointerup",d)}}),[i,c]);return m.createElement(Qe.Provider,{value:{value:e,state:s,onPointerDown:e=>{const t=o.current;if(!t)return;const{left:r,width:n}=t.getBoundingClientRect(),i=Ke(e.clientX,r,n,c);i!==s.currentIdx&&s.setCurrentIdx(i),a(!0)},setCurrentValue:e=>{s.setCurrentIdx(l.indexOf(e))}}},m.createElement("div",{className:"segmented-control-wrapper",style:n},m.createElement("div",{role:"radiogroup",ref:o,className:"segmented-control",style:{"--indicator-offset":100*s.currentIdx+"%"}},m.createElement("div",{"aria-hidden":!0,className:A("segmented-control-indicator",{active:i}),style:{width:100/l.length+"%"}},m.createElement("div",{className:"segmented-control-indicator-inner"})),r)))}));tt.displayName="SegmentedControl";const rt=H((({value:e,children:t})=>{const r=p(Qe);return m.createElement("button",{role:"radio","aria-checked":r.state.currentValue===e,tabIndex:0,className:A("segmented-control-button",{current:r.state.currentValue===e}),onPointerDown:r.onPointerDown,onClick:()=>r.setCurrentValue(e)},t)}));rt.displayName="SegmentedControlOption";const nt=H((({store:e})=>{const{date:t,sortDirection:r}=e,n=$((()=>({opened:!1,toggle(){this.opened=!this.opened},close(){this.opened=!1,e.applyFilters()},onDateChange(t){e.date=t},clear(){e.date=null,e.applyFilters()}}))),i=m.createElement("div",{style:{flex:1,display:"flex",position:"relative"}},m.createElement(Ye,{className:"date-button",style:{flex:1,alignItems:"flex-start",borderRadius:0},onClick:n.toggle},t?m.createElement("sup",null,"ASC"===r?"From":"To"):null,m.createElement("span",null,t?ne(t,"MMM d, HH:mm"):"live")),t?m.createElement(Ye,{className:"x-3deye-button--icon",style:{position:"absolute",right:0},onClick:n.clear},m.createElement(Xe,{size:16})):null);return m.createElement("div",{className:"events-panel-datepicker"},m.createElement("div",{style:{position:"relative"}},m.createElement(Ue,{target:i,opened:n.opened,onCloseRequest:n.close,disableAnimation:!0,className:"popover-datetimepicker"},m.createElement(tt,{value:r,onChange:e.toggleSorting},m.createElement(rt,{value:"ASC"},"From"),m.createElement(rt,{value:"DESC"},"To")),m.createElement(W,{selected:t,onChange:n.onDateChange,showTimeSelect:!0,dateFormat:"MMM d, HH:mm",timeFormat:"HH:mm",inline:!0}),m.createElement(Ye,{onClick:n.close,variant:"filled",style:{borderRadius:4}},re.t("button.ok")))))}));nt.displayName="EventsPanelDatepicker";const it=e=>Math.round(e),at=m.forwardRef((({value:e,onChange:t,onChangeComplete:r,orientation:n="horizontal",disabled:i=!1,labelFormat:a=(e=>`${e}`),style:o},l)=>{const s=f(null),c=f(null),[d,u]=v(!1),[h,p]=v(e);y((()=>{if(!d)return;const e=s.current;if(!e)return;let i=0,a=0;const o=e.getBoundingClientRect();if(!o)return;const l=({clientX:e,clientY:r})=>{if(!c.current)return;let l=0;"horizontal"===n?(i=Ze(e-o.x,0,o.width),l=i/o.width*100,c.current.style.transform=`translateX(${i}px)`):(a=o.height-Ze(r-o.y,0,o.height),l=a/o.height*100,c.current.style.transform=`translateY(${-a}px)`),p(l),null==t||t(it(l))},h=({clientX:e,clientY:i})=>{if(u(!1),!c.current)return;const a="horizontal"===n?Ze(e-o.x,0,o.width)/o.width*100:100*(1-Ze(i-o.y,0,o.height)/o.height);c.current.style.transform="",p(a),null==t||t(it(a)),null==r||r(it(a))},m=()=>{if(u(!1),!c.current)return;const e="horizontal"===n?i/o.width*100:a/o.height*100;c.current.style.transform="",null==t||t(it(e)),null==r||r(it(e))};return e.addEventListener("pointercancel",m),e.addEventListener("pointermove",l),e.addEventListener("pointerup",h),()=>{e.removeEventListener("pointercancel",m),e.removeEventListener("pointermove",l),e.removeEventListener("pointerup",h)}}),[d,n,t]);const b=E((({clientX:e,clientY:r,pointerId:a})=>{if(!s.current||i)return;u(!0),s.current.setPointerCapture(a);const o=s.current.getBoundingClientRect();if(!o)return;if(!c.current)return;let l=0;if("horizontal"===n){const t=Ze(e-o.x,0,o.width);l=t/o.width*100,c.current.style.transform=`translateX(${t}px)`}else{const e=o.height-Ze(r-o.y,0,o.height);l=e/o.height*100,c.current.style.transform=`translateY(${-e}px)`}p(l),null==t||t(it(l))}),[n,i]),g=E((n=>{if(i)return;let a=null;"ArrowLeft"===n.code?a=Math.max(e-1,0):"ArrowRight"===n.code?a=Math.min(e+1,100):"ArrowDown"===n.code?a=Math.max(e-1,0):"ArrowUp"===n.code&&(a=Math.min(e+1,100)),null!==a&&(n.stopPropagation(),n.preventDefault(),null==t||t(a),null==r||r(a))}),[e,t,r,n,i]);return m.createElement("div",{ref:Y(l,s),tabIndex:0,onKeyDown:g,className:A("x-3deye-slider",n,{disabled:i}),onPointerDown:b,style:o},m.createElement("div",{className:"x-3deye-slider__track"},m.createElement("div",{className:"x-3deye-slider__bar",style:{width:"horizontal"===n?`${d?h:e}%`:void 0,height:"vertical"===n?`${d?h:e}%`:void 0}})),m.createElement("div",{ref:c,className:A("x-3deye-slider__thumb",{active:d}),style:{touchAction:"none",userSelect:"none",position:"absolute",left:"horizontal"===n?d?0:`${e}%`:"auto",bottom:"vertical"===n?d?0:`${e}%`:"auto"}},m.createElement("div",{className:"x-3deye-slider__label "+(d?"open":"")},a(d?it(h):e))))}));at.displayName="Slider";const ot=H((({getter:e,setter:t})=>{const[r,n]=v(0),i=f(null),a=Math.floor(100*e());return y((()=>M(e,(e=>{n(Math.floor(100*e))}),{fireImmediately:!0})),[e]),m.createElement("div",{ref:i,style:{paddingLeft:8,paddingRight:8,marginTop:5}},m.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},m.createElement("div",null,"CONFIDENCE"),m.createElement("div",{style:{fontSize:"1.1em"}},a,"%")),m.createElement("div",{style:{padding:"0 10px"}},m.createElement(at,{value:r,labelFormat:e=>`${e}%`,onChangeComplete:e=>{t(e/100)}})))}));ot.displayName="ProbabilitySlider";const lt=Ce({viewBox:"0 0 24 24",svg:m.createElement(m.Fragment,null,m.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),m.createElement("path",{d:"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"}))});lt.displayName="DoneIcon";const st=[{color:ve[500],name:"red",highlightColor:ve[100]},{color:fe[500],name:"green",highlightColor:fe[100]},{color:me[500],name:"blue",highlightColor:me[100]},{color:ge[500],name:"yellow",highlightColor:ge[900]},{color:"#000",name:"black",highlightColor:"#fff"},{color:"#fff",name:"white",highlightColor:"#000"},{color:be[500],name:"dimgrey",highlightColor:be[100]}],ct=H((({value:e,clear:t,toggle:r})=>m.createElement("div",{className:"color-selector"},m.createElement("div",null,"COLOR"),m.createElement("div",{className:"color-selector__items"},st.map((({color:t,highlightColor:n,name:i})=>m.createElement("button",{key:i,className:A("color-selector__item",{selected:e.has(i)}),style:{backgroundColor:t},onClick:r.bind(null,i)},m.createElement(lt,{color:n,size:20})))),m.createElement(Ye,{className:"color-selector__clear",disabled:!e.size,onClick:t},m.createElement(Xe,{size:20}))))));ct.displayName="ColorSelector";const dt=({size:e=48})=>m.createElement("svg",{width:e,height:e,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid"},m.createElement("rect",{x:"0",y:"0",width:"100",height:"100",fill:"none",className:"bk"}),m.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(0 50 50) translate(0 -30)"},m.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0s",repeatCount:"indefinite"})),m.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(30 50 50) translate(0 -30)"},m.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.08333333333333333s",repeatCount:"indefinite"})),m.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(60 50 50) translate(0 -30)"},m.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.16666666666666666s",repeatCount:"indefinite"})),m.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(90 50 50) translate(0 -30)"},m.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.25s",repeatCount:"indefinite"})),m.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(120 50 50) translate(0 -30)"},m.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.3333333333333333s",repeatCount:"indefinite"})),m.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(150 50 50) translate(0 -30)"},m.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.4166666666666667s",repeatCount:"indefinite"})),m.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(180 50 50) translate(0 -30)"},m.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.5s",repeatCount:"indefinite"})),m.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(210 50 50) translate(0 -30)"},m.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.5833333333333334s",repeatCount:"indefinite"})),m.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(240 50 50) translate(0 -30)"},m.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.6666666666666666s",repeatCount:"indefinite"})),m.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(270 50 50) translate(0 -30)"},m.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.75s",repeatCount:"indefinite"})),m.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(300 50 50) translate(0 -30)"},m.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.8333333333333334s",repeatCount:"indefinite"})),m.createElement("rect",{x:"46.5",y:"38",width:"7",height:"24",rx:"5",ry:"5",fill:"currentColor",transform:"rotate(330 50 50) translate(0 -30)"},m.createElement("animate",{attributeName:"opacity",from:"1",to:"0",dur:"1s",begin:"0.9166666666666666s",repeatCount:"indefinite"})));dt.displayName="Preloader";var ut="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},ht="object"==typeof ut&&ut&&ut.Object===Object&&ut,mt="object"==typeof self&&self&&self.Object===Object&&self,pt=ht||mt||Function("return this")(),ft=pt.Symbol,bt=ft,vt=Object.prototype,gt=vt.hasOwnProperty,yt=vt.toString,Et=bt?bt.toStringTag:void 0;var wt=function(e){var t=gt.call(e,Et),r=e[Et];try{e[Et]=void 0;var n=!0}catch(e){}var i=yt.call(e);return n&&(t?e[Et]=r:delete e[Et]),i},Ct=Object.prototype.toString;var xt=wt,Ot=function(e){return Ct.call(e)},Pt=ft?ft.toStringTag:void 0;var Nt=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)},Lt=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":Pt&&Pt in Object(e)?xt(e):Ot(e)},It=Nt;var Mt,jt=function(e){if(!It(e))return!1;var t=Lt(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t},Tt=pt["__core-js_shared__"],_t=(Mt=/[^.]+$/.exec(Tt&&Tt.keys&&Tt.keys.IE_PROTO||""))?"Symbol(src)_1."+Mt:"";var kt=function(e){return!!_t&&_t in e},St=Function.prototype.toString;var Dt=jt,Ft=kt,zt=Nt,At=function(e){if(null!=e){try{return St.call(e)}catch(e){}try{return e+""}catch(e){}}return""},Ht=/^\[object .+?Constructor\]$/,$t=Function.prototype,Rt=Object.prototype,Vt=$t.toString,Bt=Rt.hasOwnProperty,Ut=RegExp("^"+Vt.call(Bt).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");var Wt=function(e){return!(!zt(e)||Ft(e))&&(Dt(e)?Ut:Ht).test(At(e))},Gt=function(e,t){return null==e?void 0:e[t]};var qt=function(e,t){var r=Gt(e,t);return Wt(r)?r:void 0},Yt=qt(Object,"create"),Xt=Yt;var Zt=function(){this.__data__=Xt?Xt(null):{},this.size=0};var Jt=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t},Kt=Yt,Qt=Object.prototype.hasOwnProperty;var er=function(e){var t=this.__data__;if(Kt){var r=t[e];return"__lodash_hash_undefined__"===r?void 0:r}return Qt.call(t,e)?t[e]:void 0},tr=Yt,rr=Object.prototype.hasOwnProperty;var nr=function(e){var t=this.__data__;return tr?void 0!==t[e]:rr.call(t,e)},ir=Yt;var ar=function(e,t){var r=this.__data__;return this.size+=this.has(e)?0:1,r[e]=ir&&void 0===t?"__lodash_hash_undefined__":t,this},or=Zt,lr=Jt,sr=er,cr=nr,dr=ar;function ur(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}ur.prototype.clear=or,ur.prototype.delete=lr,ur.prototype.get=sr,ur.prototype.has=cr,ur.prototype.set=dr;var hr=ur;var mr=function(){this.__data__=[],this.size=0};var pr=function(e,t){return e===t||e!=e&&t!=t};var fr=function(e,t){for(var r=e.length;r--;)if(pr(e[r][0],t))return r;return-1},br=fr,vr=Array.prototype.splice;var gr=function(e){var t=this.__data__,r=br(t,e);return!(r<0)&&(r==t.length-1?t.pop():vr.call(t,r,1),--this.size,!0)},yr=fr;var Er=function(e){var t=this.__data__,r=yr(t,e);return r<0?void 0:t[r][1]},wr=fr;var Cr=fr;var xr=function(e,t){var r=this.__data__,n=Cr(r,e);return n<0?(++this.size,r.push([e,t])):r[n][1]=t,this},Or=mr,Pr=gr,Nr=Er,Lr=function(e){return wr(this.__data__,e)>-1},Ir=xr;function Mr(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}Mr.prototype.clear=Or,Mr.prototype.delete=Pr,Mr.prototype.get=Nr,Mr.prototype.has=Lr,Mr.prototype.set=Ir;var jr=Mr,Tr=qt(pt,"Map"),_r=hr,kr=jr,Sr=Tr;var Dr=function(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e};var Fr=function(e,t){var r=e.__data__;return Dr(t)?r["string"==typeof t?"string":"hash"]:r.map},zr=Fr;var Ar=Fr;var Hr=Fr;var $r=Fr;var Rr=function(e,t){var r=$r(this,e),n=r.size;return r.set(e,t),this.size+=r.size==n?0:1,this},Vr=function(){this.size=0,this.__data__={hash:new _r,map:new(Sr||kr),string:new _r}},Br=function(e){var t=zr(this,e).delete(e);return this.size-=t?1:0,t},Ur=function(e){return Ar(this,e).get(e)},Wr=function(e){return Hr(this,e).has(e)},Gr=Rr;function qr(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}qr.prototype.clear=Vr,qr.prototype.delete=Br,qr.prototype.get=Ur,qr.prototype.has=Wr,qr.prototype.set=Gr;var Yr=qr;function Xr(e,t){if("function"!=typeof e||null!=t&&"function"!=typeof t)throw new TypeError("Expected a function");var r=function(){var n=arguments,i=t?t.apply(this,n):n[0],a=r.cache;if(a.has(i))return a.get(i);var o=e.apply(this,n);return r.cache=a.set(i,o)||a,o};return r.cache=new(Xr.Cache||Yr),r}Xr.Cache=Yr;const Zr=Xr((()=>{const e=document.createElement("div");e.style.overflowY="scroll",e.style.position="absolute",e.style.top="-9999px",document.body.append(e);const t=e.offsetWidth;return e.remove(),t})),Jr=H((({data:e,children:t,onClick:r,onAuxClick:n,menuComponent:i})=>{const a=f(null),o=f(null);return m.createElement("div",{ref:a,onDragStart:t=>{var r;if(!t.dataTransfer)return;t.dataTransfer.setData("x-3deye/event",""+e.id),t.dataTransfer.setData("x-3deye/camera",""+e.cameraId),t.dataTransfer.setData("x-3deye/starttime",e.startTime.toISOString()),t.dataTransfer.dropEffect="move";const n=null===(r=a.current)||void 0===r?void 0:r.querySelector("img");if(n){const{x:e,y:r}=n.getBoundingClientRect();t.dataTransfer.setDragImage(n,t.clientX-e,t.clientY-r)}},className:"event-list-item",onClick:()=>null==r?void 0:r(e),onAuxClick:t=>null==n?void 0:n(t,e),onContextMenu:e=>{var t;e.preventDefault(),a.current&&(null===(t=o.current)||void 0===t||t.toggleAt(a.current,{top:e.clientY,left:e.clientX}))},draggable:!0},t,i&&m.createElement(i,{ref:o,data:e}))}));Jr.displayName="EventListItem";const Kr=({className:e,style:t,box:{Top:r,Left:n,Right:i,Bottom:a}})=>m.createElement(m.Fragment,null,m.createElement("div",{className:e,style:{position:"absolute",top:100*r+"%",left:100*n+"%",bottom:100*(1-a)+"%",right:100*(1-i)+"%",...t}}));Kr.displayName="LicensePlateLpr";const Qr=({Type:e,Box:t,Probability:r,width:n,height:i})=>{const{eventSchema:a}=p(ie),o=f(null),{Top:l,Left:s,Right:c,Bottom:d}=t;return w((()=>{if(!n||!i)return;if(!o.current)return;const e=o.current.getBoundingClientRect();let t=(s+c)/2*n-e.width/2,r=l*i-e.height-4;r<0&&(r=d*i+4),t<0&&(t=0),t>n-e.width&&(t=n-e.width),r>i-e.height&&(r=i-e.height),o.current.style.top=`${r}px`,o.current.style.left=`${t}px`})),m.createElement(m.Fragment,null,m.createElement(Kr,{box:t,style:{outline:`2px solid ${a.colorsByFoundObjectType.get(e)}`}}),m.createElement("div",{ref:o,className:"event-list-item__detected-object-label",title:`${e.toLowerCase()} ${Math.floor(100*r)}%`},m.createElement("div",{style:{padding:4,lineHeight:"24px"}},e.toLowerCase()),m.createElement("div",{className:"event-list-item__detected-object-label__caption",style:{backgroundColor:a.colorsByFoundObjectType.get(e)}},Math.floor(100*r),"%")))};function en({style:e}){return m.createElement("div",{className:"frame",style:e},m.createElement("div",{className:"corner-highlight-tl"}),m.createElement("div",{className:"corner-highlight-tr"}),m.createElement("div",{className:"corner-highlight-br"}),m.createElement("div",{className:"corner-highlight-bl"}))}Qr.displayName="DetectedObjectHighlight";const tn=({face:{Name:e,Box:t,Probability:r},url:n,thumbWidth:i,thumbHeight:a,width:o,height:l})=>{const{Top:s,Left:c,Right:d,Bottom:u}=t,h=100/i/(d-c),p={top:2},b=f(null);return w((()=>{if(!b.current)return;const e=b.current.getBoundingClientRect();let t=(c+d)/2*o-e.width/2,r=s*l-e.height-4;r<0&&(r=u*l+4),t<0&&(t=0),t>o-e.width&&(t=o-e.width),b.current.style.top=`${r}px`,b.current.style.left=`${t}px`})),c>=1-d?p.left=2:p.right=2,m.createElement(m.Fragment,null,m.createElement("div",{ref:b,className:"event-list-item__detected-object-label trigger",title:`${e} ${Math.floor(100*r)}%`},m.createElement("div",{style:{padding:4,display:"flex",alignItems:"center",maxWidth:120,whiteSpace:"break-spaces"}},e),m.createElement("div",{className:"event-list-item__detected-object-label__caption",style:{color:"black",backgroundColor:"orange"}},Math.floor(100*r),"%")),m.createElement(Kr,{className:"trigger",box:t,style:{outline:"1px solid orange"}}),m.createElement("div",{className:"event-list-item-face preview",style:{overflow:"hidden",width:i*(d-c)*h,height:a*(u-s)*h,...p}},m.createElement("img",{style:{width:i*h,height:a*h,transform:`translate(-${100*c}%, -${100*s}%)`},src:n}),m.createElement(en,null)))};tn.displayName="FaceHighlight";const rn=m.memo((({value:e})=>e?m.createElement(m.Fragment,null,e.split("").map(((e,t)=>{const r=e.charCodeAt(0);return r<48||r>57?m.createElement(m.Fragment,{key:t},e):m.createElement("span",{key:t,className:"digit"},e)}))):null));rn.displayName="LicensePlateNumber";const nn=({detectedObject:e,height:t,width:r,url:n,thumbWidth:i,thumbHeight:a})=>{const{Type:o,Box:{Top:l,Left:s,Right:c,Bottom:d},Probability:u}=e,h=e.Value||e.Number,p=f(null);w((()=>{if(!p.current)return;const e=p.current.getBoundingClientRect();let n=(s+c)/2*r-e.width/2,i=l*t-e.height-4;i<0&&(i=d*t+4),n<0&&(n=0),n>r-e.width&&(n=r-e.width),p.current.style.top=`${i}px`,p.current.style.left=`${n}px`}));const b={top:2};s>=1-c?b.left=2:b.right=2;const v=100/i/(c-s);return m.createElement(m.Fragment,null,m.createElement("div",{ref:p,className:"event-list-item__license-plate-label trigger",title:`${o.toLowerCase()} ${Math.floor(100*u)}%`},m.createElement("div",{style:{padding:4}},m.createElement(rn,{value:h})),m.createElement("div",{className:"event-list-item__license-plate-label__caption"},Math.floor(100*u),"%")),m.createElement(Kr,{className:"event-list-item__license-plate-trigger trigger",box:e.Box}),m.createElement("div",{className:"event-list-item__license-plate preview",style:{overflow:"hidden",width:i*(c-s)*v,height:a*(d-l)*v+16,position:"absolute",...b}},m.createElement("img",{style:{width:i*v,height:a*v,transform:`translate(-${100*s}%, -${100*l}%)`},src:n}),m.createElement("div",{className:"plate-number"},m.createElement(rn,{value:h})),m.createElement(en,{style:{height:a*(d-l)*v}})))};nn.displayName="LicensePlateHighlight";const an=Ce({viewBox:"0 0 24 24",svg:m.createElement(m.Fragment,null,m.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),m.createElement("path",{d:"M15 13V5c0-1.66-1.34-3-3-3S9 3.34 9 5v8c-1.21.91-2 2.37-2 4 0 2.76 2.24 5 5 5s5-2.24 5-5c0-1.63-.79-3.09-2-4zm-4-8c0-.55.45-1 1-1s1 .45 1 1h-1v1h1v2h-1v1h1v2h-2V5z"}))});an.displayName="ThermostatIcon";const on=H((({data:e})=>{if("Temperature"!==e.type)return null;let t=Number(e.raw.data);return t=5*(t-32)/9+273.15,m.createElement("div",{className:"event-list-item__temperature"},m.createElement(an,null),(t-273.15).toFixed(1),"°C / ",(9*t/5-459.67).toFixed(1),"°F")}));on.displayName="Temperature";const ln=H((({data:e,cameraNameHidden:t})=>{var r;const a=p(ie),{cameras:o}=a,l=o.loaded&&(null===(r=o.camerasById.get(e.cameraId))||void 0===r?void 0:r.name)||"...";return m.createElement("div",{className:"event-list-item-caption"},m.createElement("div",{className:"event-list-item__time"},function(e,t){let r="",a="";return n(e,new Date)?i(e,new Date)?r=a="HH:mm":i(e,t)?(r="EEE d MMM HH:mm",a="HH:mm"):r=a="EEE d MMM HH:mm":n(e,t)?(r="yyyy d MMM HH:mm",a="d MMM HH:mm"):r=a="yyyy d MMM HH:mm",(e.getSeconds()||t.getSeconds())&&(r+=":ss",a+=":ss"),+e==+t?`${ne(e,r)}`:`${ne(e,r)} - ${ne(t,a)}`}(e.startTime,e.endTime)),t?null:m.createElement("div",{className:"event-list-item__camera-name",title:l},l),+e.endTime-+e.startTime>0&&m.createElement("div",{className:"event-list-item__duration"},function(e,t=!0){if((e=Math.round(e/1e3))<60)return`${e}s`;const r=e%60,n=t?`${r}`:`${r}`.padStart(2,"0");let i=(e-r)/60;if(i<60)return!r&&t?`${i}m`:`${i}m ${n}s`;const a=Math.floor(i/60);if(i-=60*a,!r&&!i&&t)return`${a}h`;const o=t?`${i}`:`${i}`.padStart(2,"0");return!r&&i&&t?`${a}h ${o}m`:`${a}h ${o}m ${n}s`}(+e.endTime-+e.startTime)),m.createElement(on,{data:e}))}));ln.displayName="EventListItemCaption";const sn=H((({url:e,noPreview:t,width:r})=>m.createElement(m.Fragment,null,e?m.createElement("img",{key:e,style:{position:"absolute",width:"100%",height:"100%",top:0,left:0},src:e}):null,m.createElement(G,{radius:r}),t?m.createElement("div",{className:"no-preview-overlay"}):null)));sn.displayName="EventThumbnail";const cn=H((({data:e,width:t,height:r,cameraNameHidden:n,onClick:i,onAuxClick:a,menuComponent:o})=>{const l=p(ie),{eventSchema:s}=l,[c,d]=function(e){var t;const[r,n]=v(null),i=p(ie),{cameras:a,thumbnails:o}=i;y((()=>{if(e.thumbnailUrl)return void n(null);const t=o.fetchThumbnail(e.cameraId,e.startTime,e.startTime).subscribe((e=>{n(e||null)}));return()=>t.unsubscribe()}),[e.id]);let l="",s=!1;return e.thumbnailUrl?l=e.thumbnailUrl:null===r&&a.loaded?(l=(null===(t=a.camerasById.get(e.cameraId))||void 0===t?void 0:t.imageUrl)||"",s=!0):r&&(l=r.url),[l,s]}(e);let u=null,h=null,f=null;if(e.detectedObjects.length){let n,i;const{ThumbnailSize:a}=JSON.parse(e.raw.data);a&&(n=a.Width,i=a.Height),u=e.detectedObjects.filter((({Type:e})=>s.foundObjectTypes.includes(e)&&"LicensePlate"!==e)).map(((e,n)=>m.createElement(Qr,{key:n,...e,height:r,width:t}))),h=e.detectedObjects.filter((({Type:e})=>"LicensePlate"===e)).map(((e,a)=>m.createElement(nn,{key:a,detectedObject:e,width:t,height:r,thumbWidth:n,thumbHeight:i,url:c})))}if(e.faces){const{Width:n,Height:i}=JSON.parse(e.raw.data).ThumbnailSize;f=e.faces.map(((e,a)=>m.createElement(tn,{key:a,face:e,url:c,thumbWidth:n,thumbHeight:i,width:t,height:r})))}return m.createElement(Jr,{onClick:i,onAuxClick:a,data:e,width:t,height:r,cameraNameHidden:n,menuComponent:o},m.createElement("div",{style:{position:"absolute",top:0,left:0,bottom:0,right:0}},m.createElement(sn,{url:c,noPreview:d,width:t}),u,h,f,e.acknowledged?m.createElement("div",{className:"acknowledged-overlay"},"acknowledged"):null,m.createElement(ln,{data:e,cameraNameHidden:n})))}));cn.displayName="EventItem";class dn extends m.Component{constructor(){super(...arguments),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:{hasError:!1}})}componentDidCatch(e,t){this.setState({hasError:!0}),K.withScope((r=>{Object.keys(t).forEach((e=>{r.setExtra(e,t[e])})),K.captureException(e)})),console.error(e),console.log(t)}render(){if(!this.state.hasError)return this.props.children;const{style:e,children:t,...r}=this.props;return m.createElement("div",{style:{flex:1,padding:10,display:"grid",placeItems:"center",alignContent:"center",textAlign:"center",...this.props.style},...r},m.createElement("h1",null,"Oops. Something went wrong"),m.createElement("div",null,"We've been notified about this problem"),m.createElement(Ye,{onClick:()=>this.setState({hasError:!1})},"retry"))}}const un=H((({store:e,captionHeight:t=0,minColumnWidth:r=180,onEventClick:n,onEventAuxClick:i,eventRenderer:a=(({data:e,width:t,height:r})=>m.createElement(cn,{data:e,cameraNameHidden:!1,onClick:n,onAuxClick:i,width:t,height:r}))})=>{const o=f(),l=$((()=>({rowIndex:0,columnIndex:0,update(e,t){this.rowIndex=e,this.columnIndex=t},reset(){this.rowIndex=0,this.columnIndex=0}})));if(e.error&&!e.data.length)return l.reset(),m.createElement("div",{style:{flex:1,display:"flex",justifyContent:"center",alignItems:"center"}},m.createElement("div",{style:{textAlign:"center"}},m.createElement("div",null,"Couldn't fetch data"),m.createElement(Ye,{onClick:e.reload},"Retry")));if(e.loading)return l.reset(),m.createElement("div",{style:{flex:1,display:"flex",justifyContent:"center",alignItems:"center"}},m.createElement(dt,null));if(!e.data.length)return l.reset(),m.createElement("div",{style:{flex:1,display:"flex",justifyContent:"center",alignItems:"center"}},re.t("noEventsFound"));const s=(t,r)=>(e.loadMore(),Promise.resolve()),c=({scrollTop:t})=>{"disabled"!==e.liveUpdateMode&&e.setLiveUpdateMode(t>=1||e.pendingData.length?"manual":"auto")};return m.createElement(X,null,(({width:n,height:i})=>m.createElement(R,null,(()=>{var d;const u=Math.floor(n/r)||1,h=n/u/16*9+t,p=u*Math.floor(i/h)>=e.data.length?0:Zr(),f=Math.max(1,Math.floor((n-p)/r)),b=Math.ceil(e.data.length/f),v=(n-p-2*(f-1))/f,g=v/16*9+t;return m.createElement(m.Fragment,null,m.createElement(Z,{isItemLoaded:e=>e<b,itemCount:b+((null===(d=e.pageInfo)||void 0===d?void 0:d.haveMore)?1:0),loadMoreItems:s},(({onItemsRendered:t,ref:r})=>{var s;return m.createElement(J,{key:`${n}x${i}`,ref:Y(o,r),columnCount:f,columnWidth:e=>v+(e?2:0),height:i,width:n,rowCount:b+((null===(s=e.pageInfo)||void 0===s?void 0:s.haveMore)||e.error?1:0),rowHeight:e=>g+(e?2:0),initialScrollTop:g*l.rowIndex,onScroll:c,onItemsRendered:({visibleRowStartIndex:e,visibleColumnStartIndex:r,visibleRowStopIndex:n,overscanRowStopIndex:i,overscanRowStartIndex:a})=>{l.update(e,r),t({overscanStartIndex:a,overscanStopIndex:i,visibleStartIndex:e,visibleStopIndex:n})}},(t=>({columnIndex:r,rowIndex:n,style:i})=>m.createElement(R,null,(()=>{var o,l;const s=n*t+r,c=e.data[s];return i={...i,left:i.left+(r?2:0),width:i.width-(r?2:0),top:i.top+(n?2:0),height:i.height-(n?2:0)},s===e.data.length?e.error?m.createElement("div",{style:i},m.createElement("div",{style:{position:"absolute",inset:0,display:"grid",placeItems:"center"}},m.createElement("div",{style:{textAlign:"center"}},m.createElement("div",null,"Couldn't fetch more data"),m.createElement(Ye,{onClick:e.loadMore},"Retry")))):(null===(o=e.pageInfo)||void 0===o?void 0:o.haveMore)?m.createElement("div",{style:i},m.createElement("div",{style:{position:"absolute",inset:0,display:"grid",placeItems:"center"}},m.createElement(dt,{size:32}))):m.createElement("div",{style:i}):!c&&(null===(l=e.pageInfo)||void 0===l?void 0:l.haveMore)?m.createElement("div",{style:i}):c?m.createElement("div",{style:i},m.createElement(dn,null,a({data:c,width:i.width,height:i.height}))):m.createElement("div",{style:i})})))(f))})),m.createElement(R,null,(()=>e.pendingData.length?m.createElement("div",{style:{position:"absolute",top:0,left:0,right:p,pointerEvents:"none",textAlign:"center",padding:8}},m.createElement(Ye,{className:"x-3deye-button--overlay",style:{background:"rgba(0, 0, 0, 0.75)",padding:"8px 16px",backdropFilter:"blur(2px)",borderRadius:32,pointerEvents:"auto"},onClick:()=>{var t;e.flushUpdates(),null===(t=o.current)||void 0===t||t.scrollTo({scrollLeft:0,scrollTop:0}),e.setLiveUpdateMode("auto")}},re.t("showEvents",{count:e.pendingData.length}))):null)))}))))}));un.displayName="EventGrid";const hn=({onEventClick:e,style:t,...r})=>{var n;const i=null!==(n=p(C))&&void 0!==n?n:x,[a,o]=v();return y((()=>{null==a||a.dispose();const e=new ye(i.events);e.initWith(i.api),e.load(),o(e)}),[i]),m.createElement(ie.Provider,{value:i},a?m.createElement("div",{style:{display:"flex",flexDirection:"column",...t},...r},m.createElement(Ae,{addionalFiltersEnabled:!0,store:a}),m.createElement(nt,{store:a}),a.someAnalyticsFilterSelected&&m.createElement(m.Fragment,null,m.createElement(ot,{getter:a.getProbabilityTreshold,setter:a.setProbabilityTreshold}),m.createElement(ct,{value:a.colors,toggle:a.toggleColor,clear:a.clearColors})),m.createElement("div",{style:{flex:1}},m.createElement(un,{minColumnWidth:1/0,store:a.eventsLoader,eventRenderer:({data:t,width:r,height:n})=>m.createElement(cn,{data:t,cameraNameHidden:!1,onClick:e,width:r,height:n})}))):null)};var mn;hn.displayName="EventList",(mn={resources:{en:{translation:Q}}})&&Object.assign(te,mn),o(re.init(te));export{hn as default};
|
package/package.json
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@3deye-toolkit/react-event-list",
|
|
3
|
-
"version": "0.0.1-alpha.
|
|
3
|
+
"version": "0.0.1-alpha.25",
|
|
4
4
|
"module": "dist/react-event-list.js",
|
|
5
5
|
"types": "dist/react-event-list.d.ts",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
8
8
|
],
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@3deye-toolkit/core": "
|
|
11
|
-
"@
|
|
12
|
-
"@reach/tooltip": "^0.15.3",
|
|
10
|
+
"@3deye-toolkit/core": "*",
|
|
11
|
+
"@reach/tooltip": "^0.17.0",
|
|
13
12
|
"@react-spring/web": "^9.4.2",
|
|
14
13
|
"@sentry/browser": "^5.15.5",
|
|
15
14
|
"@seznam/compose-react-refs": "^1.0.6",
|
|
@@ -25,7 +24,6 @@
|
|
|
25
24
|
"react-virtualized-auto-sizer": "^1.0.6",
|
|
26
25
|
"react-window": "^1.8.6",
|
|
27
26
|
"react-window-infinite-loader": "^1.0.7",
|
|
28
|
-
"resize-observer-polyfill": "^1.5.1",
|
|
29
27
|
"rxjs": "^7.5.3"
|
|
30
28
|
},
|
|
31
29
|
"peerDependencies": {
|
|
@@ -35,5 +33,6 @@
|
|
|
35
33
|
"sideEffects": [
|
|
36
34
|
"*.css"
|
|
37
35
|
],
|
|
38
|
-
"license": "mit"
|
|
39
|
-
|
|
36
|
+
"license": "mit",
|
|
37
|
+
"gitHead": "a26dbd4db41d2a0079b82f6c2fc1b03809f3fd4c"
|
|
38
|
+
}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { default as React_2 } from 'react';
|
|
2
|
-
|
|
3
|
-
declare class CameraEvent {
|
|
4
|
-
cameraId: number;
|
|
5
|
-
type: EventType;
|
|
6
|
-
raw: RawSensorEvent;
|
|
7
|
-
thumbnailUrl: string;
|
|
8
|
-
detectedObjects: DetectedObject[];
|
|
9
|
-
faces: Face[];
|
|
10
|
-
instant: boolean;
|
|
11
|
-
get id(): number;
|
|
12
|
-
get startTime(): Date;
|
|
13
|
-
get endTime(): Date;
|
|
14
|
-
get isLive(): boolean;
|
|
15
|
-
get acknowledged(): boolean;
|
|
16
|
-
constructor(raw: RawSensorEvent);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
declare interface DetectedObject {
|
|
20
|
-
Type: string;
|
|
21
|
-
Value?: string;
|
|
22
|
-
Number?: string;
|
|
23
|
-
Box: {
|
|
24
|
-
Left: number;
|
|
25
|
-
Top: number;
|
|
26
|
-
Right: number;
|
|
27
|
-
Bottom: number;
|
|
28
|
-
};
|
|
29
|
-
Probability: number;
|
|
30
|
-
Colors?: {
|
|
31
|
-
Color: string;
|
|
32
|
-
}[];
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
declare const EventList: React_2.FC<Props>;
|
|
36
|
-
export default EventList;
|
|
37
|
-
|
|
38
|
-
declare type EventType = 'Motion' | 'Tampering' | 'PanTiltZoom' | 'CrossLine' | 'Intrusion' | 'LicensePlate' | 'FaceDetection' | 'Audio' | 'Analytic' | 'SpeedDetection' | 'PeopleCounter' | 'Temperature' | 'PoS' | 'GPS' | 'DigitalInput' | 'Normal' | 'Suspicious' | 'Loitering' | 'Vandalism' | 'Trespass' | 'Emergency' | 'LifeInDanger' | 'ErroneousAlert' | 'Misidentification' | 'Fire' | 'MedicalDuress' | 'HoldUp' | 'CheckIn' | 'CheckOut' | 'ClockIn' | 'ClockOut' | 'ParkingStart' | 'ParkingEnd' | 'ParkingViolation' | 'GateAccess' | 'DoorAccess' | 'TemperatureCheck' | 'IDCheck' | 'PPECheck' | 'WelfareCheck' | 'Uncategorized' | 'Unknown';
|
|
39
|
-
|
|
40
|
-
declare interface Face {
|
|
41
|
-
PersonId: number;
|
|
42
|
-
Name: string;
|
|
43
|
-
Box: {
|
|
44
|
-
Left: number;
|
|
45
|
-
Top: number;
|
|
46
|
-
Right: number;
|
|
47
|
-
Bottom: number;
|
|
48
|
-
};
|
|
49
|
-
Probability: number;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
declare interface Props extends React_2.HTMLAttributes<HTMLDivElement> {
|
|
53
|
-
onEventClick: (event: CameraEvent) => void;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
declare interface RawSensorEvent {
|
|
57
|
-
message: string;
|
|
58
|
-
data: string | null;
|
|
59
|
-
id: number;
|
|
60
|
-
customerId: number;
|
|
61
|
-
sensorId: number;
|
|
62
|
-
sensorType: 'CameraSensor' | 'MotionSensor' | 'IntrusionSensor' | 'AudioSensor' | 'TemperatureSensor' | 'SpeedSensor' | 'Unknown';
|
|
63
|
-
eventType: EventType;
|
|
64
|
-
ackEventType: string;
|
|
65
|
-
description?: any;
|
|
66
|
-
tags?: any;
|
|
67
|
-
customerData?: any;
|
|
68
|
-
startTime: string;
|
|
69
|
-
endTime: string;
|
|
70
|
-
userId: string;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
export { }
|