@evercam/ui 0.0.20 → 0.0.21
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 +12 -20
- package/dist/index.mjs +1241 -897
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/src/components/ERow.vue.d.ts +0 -6
- package/dist/src/components/EVideoPlayer.vue.d.ts +66 -0
- package/dist/src/constants.d.ts +1 -0
- package/dist/src/index.d.ts +61 -7
- package/dist/src/utils.d.ts +3 -0
- package/dist/style.css +1 -1
- package/dist/styles.css +2973 -3101
- package/dist/tags.json +8 -5
- package/dist/web-types.json +39 -46
- package/package.json +70 -70
|
@@ -1,17 +1,11 @@
|
|
|
1
1
|
import Vue from "vue";
|
|
2
2
|
import { FlexAlignContent, FlexAlignItems, FlexJustifyContent } from '../types';
|
|
3
3
|
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>>, unknown, unknown, {
|
|
4
|
-
justifyClasses: Record<string, boolean>;
|
|
5
4
|
rowClasses: Record<string, boolean>;
|
|
6
5
|
}, {
|
|
7
6
|
align: FlexAlignItems;
|
|
8
7
|
alignContent: FlexAlignContent;
|
|
9
8
|
justify: FlexJustifyContent;
|
|
10
|
-
justifyXs: FlexJustifyContent;
|
|
11
|
-
justifySm: FlexJustifyContent;
|
|
12
|
-
justifyMd: FlexJustifyContent;
|
|
13
|
-
justifyLg: FlexJustifyContent;
|
|
14
|
-
justifyXl: FlexJustifyContent;
|
|
15
9
|
noGutters: boolean;
|
|
16
10
|
}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
|
|
17
11
|
export default _default;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import Vue from "vue";
|
|
2
|
+
export type IVideoSources = string | {
|
|
3
|
+
type: string;
|
|
4
|
+
src: string;
|
|
5
|
+
}[];
|
|
6
|
+
export declare const EVENTS: string[];
|
|
7
|
+
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
|
+
isSeeking: boolean;
|
|
9
|
+
playing: boolean;
|
|
10
|
+
percentagePlayed: number;
|
|
11
|
+
videoMuted: boolean;
|
|
12
|
+
videoLength: string;
|
|
13
|
+
duration: number;
|
|
14
|
+
videoDuration: number;
|
|
15
|
+
currentTime: string;
|
|
16
|
+
realtime: number;
|
|
17
|
+
isScrubbing: boolean;
|
|
18
|
+
wasPaused: boolean;
|
|
19
|
+
volume: number;
|
|
20
|
+
isFullscreen: boolean;
|
|
21
|
+
isFinished: boolean;
|
|
22
|
+
isLoading: boolean;
|
|
23
|
+
playbackRate: string;
|
|
24
|
+
isMiniPlayerMode: boolean;
|
|
25
|
+
}, {
|
|
26
|
+
bindEvents(): void;
|
|
27
|
+
bindVideoEvent(which: string): void;
|
|
28
|
+
handleFullscreenChange(): void;
|
|
29
|
+
seeking(): void;
|
|
30
|
+
seeked(): void;
|
|
31
|
+
isLooped(): boolean;
|
|
32
|
+
handleEnded(): void;
|
|
33
|
+
handleLoading(): void;
|
|
34
|
+
play(): void;
|
|
35
|
+
handleVolumeChange(e: InputEvent): void;
|
|
36
|
+
setVolume(state: number): void;
|
|
37
|
+
pause(): void;
|
|
38
|
+
togglePlay(): void;
|
|
39
|
+
setPlaying(state: boolean): void;
|
|
40
|
+
seekToPercentage(percentage: number): void;
|
|
41
|
+
convertTimeToDuration(seconds: number): string;
|
|
42
|
+
mute(): void;
|
|
43
|
+
unmute(): void;
|
|
44
|
+
toggleMute(): void;
|
|
45
|
+
setMuted(state: boolean): void;
|
|
46
|
+
closeFullscreenMode(): void;
|
|
47
|
+
openFullscreenMode(): void;
|
|
48
|
+
toggleFullscreenMode(): void;
|
|
49
|
+
toggleMiniPlayerMode(): void;
|
|
50
|
+
getDuration(): void;
|
|
51
|
+
handleTimeUpdate(): void;
|
|
52
|
+
handleTimelineUpdate(e: MouseEvent): void;
|
|
53
|
+
skip(duration?: number): void;
|
|
54
|
+
toggleScrubbing(e: MouseEvent): Promise<void>;
|
|
55
|
+
changePlaybackSpeed(): void;
|
|
56
|
+
handleKeyDown(e: KeyboardEvent): void;
|
|
57
|
+
}, {
|
|
58
|
+
hasMultipleSources: boolean;
|
|
59
|
+
hasStartedOrFinished: boolean;
|
|
60
|
+
withControls: "" | "hide";
|
|
61
|
+
}, {
|
|
62
|
+
sources: IVideoSources;
|
|
63
|
+
videoListeners: {};
|
|
64
|
+
videoOptions: {};
|
|
65
|
+
}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
|
|
66
|
+
export default _default;
|
package/dist/src/constants.d.ts
CHANGED
|
@@ -6,5 +6,6 @@ export declare const BadgeSizes: readonly [Size.dot, Size.xs, Size.sm, Size.md,
|
|
|
6
6
|
export declare const AvatarSizes: readonly [Size.xs, Size.sm, Size.md, Size.lg, Size.xl, (typeof Size)["2xl"]];
|
|
7
7
|
export declare const IconSizes: readonly [Size.xs, Size.sm, Size.md, Size.md, Size.lg, Size.xl, (typeof Size)["2xl"], (typeof Size)["3xl"], (typeof Size)["4xl"], (typeof Size)["5xl"], (typeof Size)["6xl"], (typeof Size)["7xl"], (typeof Size)["8xl"], (typeof Size)["9xl"]];
|
|
8
8
|
export declare const BadgeColors: readonly [BaseColor.warning, BaseColor.error, BaseColor.info, BaseColor.success, BaseColor.primary, BaseColor.default];
|
|
9
|
+
export declare const EVENTS: string[];
|
|
9
10
|
declare const _default: {};
|
|
10
11
|
export default _default;
|
package/dist/src/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import EIcon from './components/EIcon.vue';
|
|
|
4
4
|
import ESpinner from './components/ESpinner.vue';
|
|
5
5
|
import ERow from './components/ERow.vue';
|
|
6
6
|
import ECol from './components/ECol.vue';
|
|
7
|
+
import EVideoPlayer from './components/EVideoPlayer.vue';
|
|
7
8
|
import { VueConstructor } from "vue";
|
|
8
9
|
export declare const components: {
|
|
9
10
|
EAvatar: import("vue/types/vue").ExtendedVue<import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>>, {
|
|
@@ -81,17 +82,11 @@ export declare const components: {
|
|
|
81
82
|
opacity: string | number;
|
|
82
83
|
}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
|
|
83
84
|
ERow: import("vue/types/vue").ExtendedVue<import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>>, unknown, unknown, {
|
|
84
|
-
justifyClasses: Record<string, boolean>;
|
|
85
85
|
rowClasses: Record<string, boolean>;
|
|
86
86
|
}, {
|
|
87
87
|
align: import('./types').FlexAlignItems;
|
|
88
88
|
alignContent: import('./types').FlexAlignContent;
|
|
89
89
|
justify: import('./types').FlexJustifyContent;
|
|
90
|
-
justifyXs: import('./types').FlexJustifyContent;
|
|
91
|
-
justifySm: import('./types').FlexJustifyContent;
|
|
92
|
-
justifyMd: import('./types').FlexJustifyContent;
|
|
93
|
-
justifyLg: import('./types').FlexJustifyContent;
|
|
94
|
-
justifyXl: import('./types').FlexJustifyContent;
|
|
95
90
|
noGutters: boolean;
|
|
96
91
|
}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
|
|
97
92
|
ECol: import("vue/types/vue").ExtendedVue<import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>>, unknown, {
|
|
@@ -115,11 +110,70 @@ export declare const components: {
|
|
|
115
110
|
xs: string | number | boolean;
|
|
116
111
|
xl: string | number | boolean;
|
|
117
112
|
}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
|
|
113
|
+
EVideoPlayer: import("vue/types/vue").ExtendedVue<import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>>, {
|
|
114
|
+
isSeeking: boolean;
|
|
115
|
+
playing: boolean;
|
|
116
|
+
percentagePlayed: number;
|
|
117
|
+
videoMuted: boolean;
|
|
118
|
+
videoLength: string;
|
|
119
|
+
duration: number;
|
|
120
|
+
videoDuration: number;
|
|
121
|
+
currentTime: string;
|
|
122
|
+
realtime: number;
|
|
123
|
+
isScrubbing: boolean;
|
|
124
|
+
wasPaused: boolean;
|
|
125
|
+
volume: number;
|
|
126
|
+
isFullscreen: boolean;
|
|
127
|
+
isFinished: boolean;
|
|
128
|
+
isLoading: boolean;
|
|
129
|
+
playbackRate: string;
|
|
130
|
+
isMiniPlayerMode: boolean;
|
|
131
|
+
}, {
|
|
132
|
+
bindEvents(): void;
|
|
133
|
+
bindVideoEvent(which: string): void;
|
|
134
|
+
handleFullscreenChange(): void;
|
|
135
|
+
seeking(): void;
|
|
136
|
+
seeked(): void;
|
|
137
|
+
isLooped(): boolean;
|
|
138
|
+
handleEnded(): void;
|
|
139
|
+
handleLoading(): void;
|
|
140
|
+
play(): void;
|
|
141
|
+
handleVolumeChange(e: InputEvent): void;
|
|
142
|
+
setVolume(state: number): void;
|
|
143
|
+
pause(): void;
|
|
144
|
+
togglePlay(): void;
|
|
145
|
+
setPlaying(state: boolean): void;
|
|
146
|
+
seekToPercentage(percentage: number): void;
|
|
147
|
+
convertTimeToDuration(seconds: number): string;
|
|
148
|
+
mute(): void;
|
|
149
|
+
unmute(): void;
|
|
150
|
+
toggleMute(): void;
|
|
151
|
+
setMuted(state: boolean): void;
|
|
152
|
+
closeFullscreenMode(): void;
|
|
153
|
+
openFullscreenMode(): void;
|
|
154
|
+
toggleFullscreenMode(): void;
|
|
155
|
+
toggleMiniPlayerMode(): void;
|
|
156
|
+
getDuration(): void;
|
|
157
|
+
handleTimeUpdate(): void;
|
|
158
|
+
handleTimelineUpdate(e: MouseEvent): void;
|
|
159
|
+
skip(duration?: number): void;
|
|
160
|
+
toggleScrubbing(e: MouseEvent): Promise<void>;
|
|
161
|
+
changePlaybackSpeed(): void;
|
|
162
|
+
handleKeyDown(e: KeyboardEvent): void;
|
|
163
|
+
}, {
|
|
164
|
+
hasMultipleSources: boolean;
|
|
165
|
+
hasStartedOrFinished: boolean;
|
|
166
|
+
withControls: "" | "hide";
|
|
167
|
+
}, {
|
|
168
|
+
sources: import('./components/EVideoPlayer.vue').IVideoSources;
|
|
169
|
+
videoListeners: {};
|
|
170
|
+
videoOptions: {};
|
|
171
|
+
}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
|
|
118
172
|
};
|
|
119
173
|
declare const _default: {
|
|
120
174
|
install(Vue: VueConstructor): void;
|
|
121
175
|
};
|
|
122
176
|
export default _default;
|
|
123
|
-
export { EAvatar, EBadge, EIcon, ESpinner, ERow, ECol };
|
|
177
|
+
export { EAvatar, EBadge, EIcon, ESpinner, ERow, ECol, EVideoPlayer };
|
|
124
178
|
export * from './constants';
|
|
125
179
|
export * from './types';
|
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-6978f420]{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-6978f420]{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;margin:0 auto}.video-container.theater[data-v-6978f420],.video-container.full-screen[data-v-6978f420]{max-width:initial;width:100%}.video-container.theater[data-v-6978f420]{max-height:90vh}.video-container.full-screen[data-v-6978f420]{max-height:100vh}video[data-v-6978f420]{width:100%;height:inherit}.video-controls-container[data-v-6978f420]{position:absolute;bottom:0;left:0;right:0;color:#fff;z-index:100;opacity:0;transition:opacity .15s ease-in-out}.hide[data-v-6978f420]{display:none}.video-controls-container[data-v-6978f420]: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-6978f420],.video-container:focus-within .video-controls-container[data-v-6978f420],.video-container.paused .video-controls-container[data-v-6978f420]{opacity:1}.video-controls-container .controls[data-v-6978f420]{display:flex;gap:.5rem;padding:.25rem;align-items:center;width:100%}.video-controls-container .controls button[data-v-6978f420]{background:none;border:none;color:inherit;padding:0;height:24px;width:24px;font-size:1.1rem;cursor:pointer;opacity:.85;transition:opacity .15s ease-in-out}.video-controls-container .controls button[data-v-6978f420]:hover{opacity:1}.pause-icon[data-v-6978f420],.play-icon[data-v-6978f420],.picture-on-picture[data-v-6978f420],.open[data-v-6978f420],.close[data-v-6978f420],.speed-btn.wide-btn[data-v-6978f420]{height:24px;width:24px}.video-container.theater .tall[data-v-6978f420]{display:none}.video-container:not(.theater) .wide[data-v-6978f420]{display:none}.volume-container[data-v-6978f420]{display:flex;align-items:center}.volume-slider[data-v-6978f420]{width:0;transform-origin:left;transform:scaleX(0);transition:width .15s ease-in-out,transform .15s ease-in-out}.volume-container:hover .volume-slider[data-v-6978f420],.volume-slider[data-v-6978f420]:focus-within{width:100px;transform:scaleX(1)}.duration-container[data-v-6978f420]{display:flex;align-items:center;gap:.25rem;flex-grow:1}.video-container.captions .captions-btn[data-v-6978f420]{border-bottom:3px solid red}.video-controls-container .controls button.wide-btn[data-v-6978f420]{width:50px}.timeline-container[data-v-6978f420]{width:100%;height:7px;margin-inline:.5rem;cursor:pointer;display:flex;align-items:center}.timeline[data-v-6978f420]{background-color:#64646480;height:3px;width:100%;position:relative}.timeline[data-v-6978f420]: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-6978f420]: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-6978f420]{--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-6978f420]{display:block}.video-container.scrubbing .timeline[data-v-6978f420]:before,.timeline-container:hover .timeline[data-v-6978f420]:before{display:block}.video-container.scrubbing .thumb-indicator[data-v-6978f420],.timeline-container:hover .thumb-indicator[data-v-6978f420]{--scale: 1}.video-container.scrubbing .timeline[data-v-6978f420],.timeline-container:hover .timeline[data-v-6978f420]{height:100%}
|