@evercam/ui 0.0.45-beta.0 → 0.0.45-beta.1
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/README.md +47 -47
- package/dist/attributes.json +81 -37
- package/dist/index.mjs +7108 -1324
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +6 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/src/components/ETimeline.vue.d.ts +26 -8
- package/dist/src/components/EVideoPlayer.vue.d.ts +4 -1
- package/dist/src/index.d.ts +28 -9
- package/dist/style.css +1 -1
- package/dist/styles.css +3211 -3211
- package/dist/tags.json +10 -1
- package/dist/web-types.json +85 -1
- package/package.json +76 -76
|
@@ -46,7 +46,6 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, a
|
|
|
46
46
|
zoomBehavior: d3.ZoomBehavior<SVGSVGElement, unknown>;
|
|
47
47
|
isMouseDown: boolean;
|
|
48
48
|
axisHeight: number;
|
|
49
|
-
barChartHeight: number;
|
|
50
49
|
eventGroupPadding: number;
|
|
51
50
|
isHoveringEvent: boolean;
|
|
52
51
|
hoveredEvent: TimelineEvent;
|
|
@@ -63,7 +62,6 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, a
|
|
|
63
62
|
translation: number;
|
|
64
63
|
scale: number;
|
|
65
64
|
};
|
|
66
|
-
defaultLineGraphChartHeight: number;
|
|
67
65
|
yScale: d3.ScaleLinear<any, any, never>;
|
|
68
66
|
hoveredCounts: {
|
|
69
67
|
count: number;
|
|
@@ -73,6 +71,11 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, a
|
|
|
73
71
|
dotsByTimestamp: Record<string, d3.Selection<SVGCircleElement, any, any, any>[]>;
|
|
74
72
|
visibleFrom: Date;
|
|
75
73
|
visibleTo: Date;
|
|
74
|
+
curtainHandleWidth: number;
|
|
75
|
+
leftCurtainWidth: number;
|
|
76
|
+
rightCurtainWidth: number;
|
|
77
|
+
isHoveringCurtain: boolean;
|
|
78
|
+
isDraggingCurtain: boolean;
|
|
76
79
|
}, {
|
|
77
80
|
initTimeline(startDate?: string, endDate?: string): void;
|
|
78
81
|
initRefs(): void;
|
|
@@ -109,6 +112,16 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, a
|
|
|
109
112
|
handleLabelMouseOver(groupType: string): void;
|
|
110
113
|
handleLabelMouseLeave(groupType: string): void;
|
|
111
114
|
handleZoom(event: D3ZoomEvent<SVGSVGElement, any>): void;
|
|
115
|
+
emitCurtainChange(): void;
|
|
116
|
+
calculateDateRangeFromCurtains(): {
|
|
117
|
+
startDate: Date;
|
|
118
|
+
endDate: Date;
|
|
119
|
+
};
|
|
120
|
+
updateCurtainsOnResize(timelineWidth: number): void;
|
|
121
|
+
handleDragStart(): void;
|
|
122
|
+
handleDragEnd(): void;
|
|
123
|
+
handleLeftDrag(event: d3.D3DragEvent<SVGRectElement, any, any>): void;
|
|
124
|
+
handleRightDrag(event: d3.D3DragEvent<SVGRectElement, any, any>): void;
|
|
112
125
|
zoomToStartAndEndDates(): void;
|
|
113
126
|
rescaleAxis(axisName: string, newScale: d3.ScaleTime<any, any, unknown>): void;
|
|
114
127
|
translateTicksText(axisName: string): void;
|
|
@@ -117,6 +130,7 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, a
|
|
|
117
130
|
updateLineGraphHoverZones(): void;
|
|
118
131
|
getEventRectX(d: TimelineEvent): any;
|
|
119
132
|
getEventRectWidth(d: TimelineEvent): number;
|
|
133
|
+
initCurtains(): void;
|
|
120
134
|
drawEventsGroups(): void;
|
|
121
135
|
drawLineGraphEventsGroups(): void;
|
|
122
136
|
drawLineGraph({ events, gElement, color, type, }: {
|
|
@@ -168,12 +182,7 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, a
|
|
|
168
182
|
fillTimeGaps(events: TimelineEvent[]): TimelineEvent[];
|
|
169
183
|
getNormalizedEvents(events: TimelineEvent[]): TimelineEvent[];
|
|
170
184
|
}, {
|
|
171
|
-
classes:
|
|
172
|
-
wrapper: string;
|
|
173
|
-
background: string;
|
|
174
|
-
tooltipSlot: string;
|
|
175
|
-
eventTooltipSlot: string;
|
|
176
|
-
};
|
|
185
|
+
classes: Record<string, string | Record<string, boolean>>;
|
|
177
186
|
lineGraphGroups: TimelineEventsByType;
|
|
178
187
|
lineGraphChartHeight: number;
|
|
179
188
|
barGroups: TimelineEventsByType;
|
|
@@ -188,6 +197,7 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, a
|
|
|
188
197
|
allLineChartTimestamps: string[];
|
|
189
198
|
placeholderLineChartGroup: TimelineEvent[];
|
|
190
199
|
normalizedLineGraphGroups: TimelineEventsByType;
|
|
200
|
+
isInteractingWithCurtain: boolean;
|
|
191
201
|
}, {
|
|
192
202
|
eventsGroups: {};
|
|
193
203
|
xAxesConfig: TimelineAxesConfig;
|
|
@@ -199,5 +209,13 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, a
|
|
|
199
209
|
disableZoom: boolean;
|
|
200
210
|
normalizeEvents: boolean;
|
|
201
211
|
flattenLineGraphEnds: boolean;
|
|
212
|
+
curtains: boolean;
|
|
213
|
+
showLabels: boolean;
|
|
214
|
+
rectMinWidth: number;
|
|
215
|
+
barChartHeight: number;
|
|
216
|
+
lineGraphMinHeight: number;
|
|
217
|
+
minZoom: number;
|
|
218
|
+
maxZoom: number;
|
|
219
|
+
cursorTimestamp: string | undefined;
|
|
202
220
|
}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
|
|
203
221
|
export default _default;
|
|
@@ -2,7 +2,9 @@ import Vue from "vue";
|
|
|
2
2
|
export type VideoSource = {
|
|
3
3
|
type: string;
|
|
4
4
|
src: string;
|
|
5
|
+
srcObject?: MediaStream;
|
|
5
6
|
};
|
|
7
|
+
export type MediaType = "video" | "webRtc" | "ptz" | "hls";
|
|
6
8
|
export declare const VIDEO_PLAYER_EVENTS: string[];
|
|
7
9
|
declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>, {
|
|
8
10
|
playing: boolean;
|
|
@@ -19,7 +21,7 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, a
|
|
|
19
21
|
isLoading: boolean;
|
|
20
22
|
isError: boolean;
|
|
21
23
|
}, {
|
|
22
|
-
handle404Error(): void;
|
|
24
|
+
handle404Error(e: any): void;
|
|
23
25
|
bindEvents(): void;
|
|
24
26
|
unbindEvents(): void;
|
|
25
27
|
bindVideoEvent(which: string): void;
|
|
@@ -53,6 +55,7 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, a
|
|
|
53
55
|
hasStartedOrFinished: boolean;
|
|
54
56
|
withControls: "" | "hide";
|
|
55
57
|
}, {
|
|
58
|
+
type: string;
|
|
56
59
|
sources: string | VideoSource[];
|
|
57
60
|
videoListeners: {};
|
|
58
61
|
videoOptions: {};
|
package/dist/src/index.d.ts
CHANGED
|
@@ -132,7 +132,7 @@ export declare const components: {
|
|
|
132
132
|
isLoading: boolean;
|
|
133
133
|
isError: boolean;
|
|
134
134
|
}, {
|
|
135
|
-
handle404Error(): void;
|
|
135
|
+
handle404Error(e: any): void;
|
|
136
136
|
bindEvents(): void;
|
|
137
137
|
unbindEvents(): void;
|
|
138
138
|
bindVideoEvent(which: string): void;
|
|
@@ -166,6 +166,7 @@ export declare const components: {
|
|
|
166
166
|
hasStartedOrFinished: boolean;
|
|
167
167
|
withControls: "" | "hide";
|
|
168
168
|
}, {
|
|
169
|
+
type: string;
|
|
169
170
|
sources: string | import('./components/EVideoPlayer.vue').VideoSource[];
|
|
170
171
|
videoListeners: {};
|
|
171
172
|
videoOptions: {};
|
|
@@ -184,7 +185,6 @@ export declare const components: {
|
|
|
184
185
|
zoomBehavior: import("d3-zoom").ZoomBehavior<SVGSVGElement, unknown>;
|
|
185
186
|
isMouseDown: boolean;
|
|
186
187
|
axisHeight: number;
|
|
187
|
-
barChartHeight: number;
|
|
188
188
|
eventGroupPadding: number;
|
|
189
189
|
isHoveringEvent: boolean;
|
|
190
190
|
hoveredEvent: import('./components/ETimeline.vue').TimelineEvent;
|
|
@@ -201,7 +201,6 @@ export declare const components: {
|
|
|
201
201
|
translation: number;
|
|
202
202
|
scale: number;
|
|
203
203
|
};
|
|
204
|
-
defaultLineGraphChartHeight: number;
|
|
205
204
|
yScale: import("d3-scale").ScaleLinear<any, any, never>;
|
|
206
205
|
hoveredCounts: {
|
|
207
206
|
count: number;
|
|
@@ -211,6 +210,11 @@ export declare const components: {
|
|
|
211
210
|
dotsByTimestamp: Record<string, import("d3-selection").Selection<SVGCircleElement, any, any, any>[]>;
|
|
212
211
|
visibleFrom: Date;
|
|
213
212
|
visibleTo: Date;
|
|
213
|
+
curtainHandleWidth: number;
|
|
214
|
+
leftCurtainWidth: number;
|
|
215
|
+
rightCurtainWidth: number;
|
|
216
|
+
isHoveringCurtain: boolean;
|
|
217
|
+
isDraggingCurtain: boolean;
|
|
214
218
|
}, {
|
|
215
219
|
initTimeline(startDate?: string | undefined, endDate?: string | undefined): void;
|
|
216
220
|
initRefs(): void;
|
|
@@ -247,6 +251,16 @@ export declare const components: {
|
|
|
247
251
|
handleLabelMouseOver(groupType: string): void;
|
|
248
252
|
handleLabelMouseLeave(groupType: string): void;
|
|
249
253
|
handleZoom(event: import("d3-zoom").D3ZoomEvent<SVGSVGElement, any>): void;
|
|
254
|
+
emitCurtainChange(): void;
|
|
255
|
+
calculateDateRangeFromCurtains(): {
|
|
256
|
+
startDate: Date;
|
|
257
|
+
endDate: Date;
|
|
258
|
+
};
|
|
259
|
+
updateCurtainsOnResize(timelineWidth: number): void;
|
|
260
|
+
handleDragStart(): void;
|
|
261
|
+
handleDragEnd(): void;
|
|
262
|
+
handleLeftDrag(event: import("d3-drag").D3DragEvent<SVGRectElement, any, any>): void;
|
|
263
|
+
handleRightDrag(event: import("d3-drag").D3DragEvent<SVGRectElement, any, any>): void;
|
|
250
264
|
zoomToStartAndEndDates(): void;
|
|
251
265
|
rescaleAxis(axisName: string, newScale: import("d3-scale").ScaleTime<any, any, unknown>): void;
|
|
252
266
|
translateTicksText(axisName: string): void;
|
|
@@ -255,6 +269,7 @@ export declare const components: {
|
|
|
255
269
|
updateLineGraphHoverZones(): void;
|
|
256
270
|
getEventRectX(d: import('./components/ETimeline.vue').TimelineEvent): any;
|
|
257
271
|
getEventRectWidth(d: import('./components/ETimeline.vue').TimelineEvent): number;
|
|
272
|
+
initCurtains(): void;
|
|
258
273
|
drawEventsGroups(): void;
|
|
259
274
|
drawLineGraphEventsGroups(): void;
|
|
260
275
|
drawLineGraph({ events, gElement, color, type, }: {
|
|
@@ -306,12 +321,7 @@ export declare const components: {
|
|
|
306
321
|
fillTimeGaps(events: import('./components/ETimeline.vue').TimelineEvent[]): import('./components/ETimeline.vue').TimelineEvent[];
|
|
307
322
|
getNormalizedEvents(events: import('./components/ETimeline.vue').TimelineEvent[]): import('./components/ETimeline.vue').TimelineEvent[];
|
|
308
323
|
}, {
|
|
309
|
-
classes:
|
|
310
|
-
wrapper: string;
|
|
311
|
-
background: string;
|
|
312
|
-
tooltipSlot: string;
|
|
313
|
-
eventTooltipSlot: string;
|
|
314
|
-
};
|
|
324
|
+
classes: Record<string, string | Record<string, boolean>>;
|
|
315
325
|
lineGraphGroups: import('./components/ETimeline.vue').TimelineEventsByType;
|
|
316
326
|
lineGraphChartHeight: number;
|
|
317
327
|
barGroups: import('./components/ETimeline.vue').TimelineEventsByType;
|
|
@@ -326,6 +336,7 @@ export declare const components: {
|
|
|
326
336
|
allLineChartTimestamps: string[];
|
|
327
337
|
placeholderLineChartGroup: import('./components/ETimeline.vue').TimelineEvent[];
|
|
328
338
|
normalizedLineGraphGroups: import('./components/ETimeline.vue').TimelineEventsByType;
|
|
339
|
+
isInteractingWithCurtain: boolean;
|
|
329
340
|
}, {
|
|
330
341
|
eventsGroups: {};
|
|
331
342
|
xAxesConfig: import('./types').TimelineAxesConfig;
|
|
@@ -337,6 +348,14 @@ export declare const components: {
|
|
|
337
348
|
disableZoom: boolean;
|
|
338
349
|
normalizeEvents: boolean;
|
|
339
350
|
flattenLineGraphEnds: boolean;
|
|
351
|
+
curtains: boolean;
|
|
352
|
+
showLabels: boolean;
|
|
353
|
+
rectMinWidth: number;
|
|
354
|
+
barChartHeight: number;
|
|
355
|
+
lineGraphMinHeight: number;
|
|
356
|
+
minZoom: number;
|
|
357
|
+
maxZoom: number;
|
|
358
|
+
cursorTimestamp: string | undefined;
|
|
340
359
|
}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
|
|
341
360
|
};
|
|
342
361
|
declare const _default: {
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.e-spinner[data-v-
|
|
1
|
+
.e-spinner[data-v-f6962f4a]{vertical-align:center}.e-spinner__primary[data-v-f6962f4a],.e-spinner__secondary[data-v-f6962f4a]{stroke-width:0;animation:fade-f6962f4a;animation-iteration-count:infinite}@keyframes fade-f6962f4a{0%{fill-opacity:0}50%{fill-opacity:1}to{fill-opacity:0}}.e-row.e-row--no-gutters{margin:0}.e-row.e-row--no-gutters>.e-col{padding:0}.e-col{padding:.75rem}.spinner-container[data-v-9bce97aa]{position:absolute;background:linear-gradient(to top,rgba(0,0,0,.65),transparent);inset:0;display:flex;justify-content:center;align-items:center;vertical-align:middle}.video-container[data-v-9bce97aa]{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;margin:0 auto}.video-container.full-screen[data-v-9bce97aa]{max-width:initial;width:100%;max-height:100vh}video[data-v-9bce97aa]{width:100%;height:inherit}.video-controls-container[data-v-9bce97aa]{position:absolute;bottom:0;left:0;right:0;color:#fff;z-index:100;opacity:0;transition:opacity .15s ease-in-out}.hide[data-v-9bce97aa]{display:none}.video-controls-container[data-v-9bce97aa]:before{content:"";position:absolute;bottom:0;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);width:100%;aspect-ratio:6 / 1;z-index:-1;pointer-events:none}.video-container:hover .video-controls-container[data-v-9bce97aa],.video-container:focus-within .video-controls-container[data-v-9bce97aa],.video-container.paused .video-controls-container[data-v-9bce97aa]{opacity:1}.video-controls-container .controls[data-v-9bce97aa]{display:flex;gap:.5rem;padding:.75rem 1rem;align-items:center;width:100%}.video-controls-container .controls button[data-v-9bce97aa]{background:none;border:none;color:inherit;padding:0;height:32px;width:32px;font-size:1.35rem;cursor:pointer;opacity:.85;transition:opacity .15s ease-in-out}.video-controls-container .controls button[data-v-9bce97aa]:hover{opacity:1}.duration-container[data-v-9bce97aa]{display:flex;align-items:center;gap:.25rem;flex-grow:1}.video-container.captions .captions-btn[data-v-9bce97aa]{border-bottom:3px solid red}.video-controls-container .controls button.wide-btn[data-v-9bce97aa]{width:50px}.timeline-container[data-v-9bce97aa]{width:100%;height:7px;margin-inline:.5rem;cursor:pointer;display:flex;align-items:center}.timeline[data-v-9bce97aa]{background-color:#64646480;height:3px;width:100%;position:relative}.timeline[data-v-9bce97aa]:before{content:"";position:absolute;left:0;top:0;bottom:0;right:calc(100% - var(--preview-position) * 100%);background-color:#969696;display:none}.timeline[data-v-9bce97aa]:after{content:"";position:absolute;left:0;top:0;bottom:0;right:calc(100% - var(--progress-position) * 100%);background-color:red}.timeline .thumb-indicator[data-v-9bce97aa]{--scale: 0;position:absolute;transform:translate(-50%) scale(var(--scale));height:200%;top:-50%;left:calc(var(--progress-position) * 100%);background-color:red;border-radius:50%;transition:transform .15s ease-in-out;aspect-ratio:1 / 1}.video-container.scrubbing .thumbnail-img[data-v-9bce97aa]{display:block}.video-container.scrubbing .timeline[data-v-9bce97aa]:before,.timeline-container:hover .timeline[data-v-9bce97aa]:before{display:block}.video-container.scrubbing .thumb-indicator[data-v-9bce97aa],.timeline-container:hover .thumb-indicator[data-v-9bce97aa]{--scale: 1}.video-container.scrubbing .timeline[data-v-9bce97aa],.timeline-container:hover .timeline[data-v-9bce97aa]{height:100%}.e-timeline svg{display:block}.e-timeline .x-axis-overview .domain,.e-timeline .x-axis-detailed .domain,.e-timeline .x-axis-overviewBackground .domain,.e-timeline .x-axis-detailedBackground .domain{display:none}.e-timeline .x-axis-detailedBackground .domain,.e-timeline .x-axis-detailedBackground text{display:none}.e-timeline .x-axis-overview>g.tick>line{opacity:.1;stroke-width:3;stroke-linecap:round}.e-timeline .x-axis-detailed>g.tick>line{opacity:.1;stroke-linecap:round}.e-timeline .x-axis-detailedBackground>g.tick>line{opacity:.075;stroke-linecap:round}.e-timeline--dark .tick line{stroke:#fff}.e-timeline--dark .tick text{fill:#fff}@keyframes moveGradient{0%{transform:translate(-50%)}to{transform:translate(100%)}}@keyframes pulse-rect{0%{filter:saturate(3.5) drop-shadow(0 0 1px #0008)}50%{filter:saturate(.5) drop-shadow(0 0 0 #0000)}to{filter:saturate(3.5) drop-shadow(0 0 1px #0008)}}@keyframes pulse-circle{0%{r:4px}50%{r:1px}to{r:4px}}.loading-indicator{animation:moveGradient 1.5s ease-in infinite}.line-graph-dot--active{animation:pulse-circle 1s ease-in-out infinite}.event-rect--hovered{animation:pulse-rect 1s ease-in-out infinite}@keyframes dash{0%{filter:saturate(1) drop-shadow(0 0 0 #0000)}50%{stroke-width:2px;filter:saturate(2.5) drop-shadow(0 0 0 #0006)}to{filter:saturate(1) drop-shadow(0 0 0 #0000)}}.line-graph-group--highlighted path{animation:dash 1s ease-in-out infinite}.e-timeline--dragging{cursor:ew-resize}.curtain{cursor:ew-resize;fill:#3332;stroke-width:1px;stroke:#3338;transition:stroke-width .2s}.e-timeline--dragging .curtain{stroke-width:3px}.e-timeline--dark .curtain{fill:#fff3;stroke:#fff7}
|