@evercam/ui 0.0.20 → 0.0.22-beta.1

package/dist/src/components/EVideoPlayer.vue.d.ts

@@ -0,0 +1,63 @@
+import Vue from "vue";
+export type IVideoSources = string | {
+    type: string;
+    src: string;
+}[];
+export declare const VIDEO_PLAYER_EVENTS: string[];
+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>>, {
+    playing: boolean;
+    percentagePlayed: number;
+    videoMuted: boolean;
+    videoLength: string;
+    duration: number;
+    videoDuration: number;
+    currentTime: string;
+    realtime: number;
+    isScrubbing: boolean;
+    wasPaused: boolean;
+    volume: number;
+    isFullscreen: boolean;
+    isFinished: boolean;
+    isLoading: boolean;
+    playbackRate: string;
+    isMiniPlayerMode: boolean;
+}, {
+    bindEvents(): void;
+    bindVideoEvent(which: string): void;
+    handleFullscreenChange(): void;
+    isLooped(): boolean;
+    handleEnded(): void;
+    handleLoading(): void;
+    play(): void;
+    handleVolumeChange(e: Event): void;
+    setVolume(state: number): void;
+    pause(): void;
+    togglePlay(): void;
+    setPlaying(state: boolean): void;
+    seekToPercentage(percentage: number): void;
+    convertTimeToDuration(seconds: number): string;
+    mute(): void;
+    unmute(): void;
+    toggleMute(): void;
+    setMuted(state: boolean): void;
+    closeFullscreenMode(): void;
+    openFullscreenMode(): void;
+    toggleFullscreenMode(): void;
+    toggleMiniPlayerMode(): void;
+    getDuration(): void;
+    handleTimeUpdate(): void;
+    handleTimelineUpdate(e: MouseEvent): void;
+    skip(duration?: number): void;
+    toggleScrubbing(e: MouseEvent): Promise<void>;
+    changePlaybackSpeed(): void;
+    handleKeyDown(e: KeyboardEvent): void;
+}, {
+    hasMultipleSources: boolean;
+    hasStartedOrFinished: boolean;
+    withControls: "" | "hide";
+}, {
+    sources: IVideoSources;
+    videoListeners: {};
+    videoOptions: {};
+}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
+export default _default;

package/dist/src/constants.d.ts

@@ -6,5 +6,6 @@ export declare const BadgeSizes: readonly [Size.dot, Size.xs, Size.sm, Size.md,
 export declare const AvatarSizes: readonly [Size.xs, Size.sm, Size.md, Size.lg, Size.xl, (typeof Size)["2xl"]];
 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"]];
 export declare const BadgeColors: readonly [BaseColor.warning, BaseColor.error, BaseColor.info, BaseColor.success, BaseColor.primary, BaseColor.default];
+export declare const EVENTS: string[];
 declare const _default: {};
 export default _default;

package/dist/src/index.d.ts

@@ -4,6 +4,7 @@ import EIcon from './components/EIcon.vue';
 import ESpinner from './components/ESpinner.vue';
 import ERow from './components/ERow.vue';
 import ECol from './components/ECol.vue';
+import EVideoPlayer from './components/EVideoPlayer.vue';
 import { VueConstructor } from "vue";
 export declare const components: {
     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>>, {
@@ -115,11 +116,68 @@ export declare const components: {
         xs: string | number | boolean;
         xl: string | number | boolean;
     }, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
+    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>>, {
+        playing: boolean;
+        percentagePlayed: number;
+        videoMuted: boolean;
+        videoLength: string;
+        duration: number;
+        videoDuration: number;
+        currentTime: string;
+        realtime: number;
+        isScrubbing: boolean;
+        wasPaused: boolean;
+        volume: number;
+        isFullscreen: boolean;
+        isFinished: boolean;
+        isLoading: boolean;
+        playbackRate: string;
+        isMiniPlayerMode: boolean;
+    }, {
+        bindEvents(): void;
+        bindVideoEvent(which: string): void;
+        handleFullscreenChange(): void;
+        isLooped(): boolean;
+        handleEnded(): void;
+        handleLoading(): void;
+        play(): void;
+        handleVolumeChange(e: Event): void;
+        setVolume(state: number): void;
+        pause(): void;
+        togglePlay(): void;
+        setPlaying(state: boolean): void;
+        seekToPercentage(percentage: number): void;
+        convertTimeToDuration(seconds: number): string;
+        mute(): void;
+        unmute(): void;
+        toggleMute(): void;
+        setMuted(state: boolean): void;
+        closeFullscreenMode(): void;
+        openFullscreenMode(): void;
+        toggleFullscreenMode(): void;
+        toggleMiniPlayerMode(): void;
+        getDuration(): void;
+        handleTimeUpdate(): void;
+        handleTimelineUpdate(e: MouseEvent): void;
+        skip(duration?: number): void;
+        toggleScrubbing(e: MouseEvent): Promise<void>;
+        changePlaybackSpeed(): void;
+        handleKeyDown(e: KeyboardEvent): void;
+    }, {
+        hasMultipleSources: boolean;
+        hasStartedOrFinished: boolean;
+        withControls: "" | "hide";
+    }, {
+        sources: import('./components/EVideoPlayer.vue').IVideoSources;
+        videoListeners: {};
+        videoOptions: {};
+    }, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
 };
 declare const _default: {
     install(Vue: VueConstructor): void;
 };
 export default _default;
-export { EAvatar, EBadge, EIcon, ESpinner, ERow, ECol };
+export { EAvatar, EBadge, EIcon, ESpinner, ERow, ECol, EVideoPlayer };
 export * from './constants';
 export * from './types';
+export * from './utils';

package/dist/src/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function isFullScreen(): boolean;
+export declare function makeFullScreen(element: HTMLElement): any;
+export declare function exitFullScreen(): any;

package/dist/style.css

@@ -1 +1 @@
-.e-spinner[data-v-29711f67]{vertical-align:center}.e-spinner__primary[data-v-29711f67],.e-spinner__secondary[data-v-29711f67]{stroke-width:0;animation:fade-29711f67;animation-iteration-count:infinite}@keyframes fade-29711f67{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}
+.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-428638d2]{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-428638d2]{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;margin:0 auto}.video-container.theater[data-v-428638d2],.video-container.full-screen[data-v-428638d2]{max-width:initial;width:100%}.video-container.theater[data-v-428638d2]{max-height:90vh}.video-container.full-screen[data-v-428638d2]{max-height:100vh}video[data-v-428638d2]{width:100%;height:inherit}.video-controls-container[data-v-428638d2]{position:absolute;bottom:0;left:0;right:0;color:#fff;z-index:100;opacity:0;transition:opacity .15s ease-in-out}.hide[data-v-428638d2]{display:none}.video-controls-container[data-v-428638d2]: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-428638d2],.video-container:focus-within .video-controls-container[data-v-428638d2],.video-container.paused .video-controls-container[data-v-428638d2]{opacity:1}.video-controls-container .controls[data-v-428638d2]{display:flex;gap:.5rem;padding:.25rem;align-items:center;width:100%}.video-controls-container .controls button[data-v-428638d2]{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-428638d2]:hover{opacity:1}.pause-icon[data-v-428638d2],.play-icon[data-v-428638d2],.picture-on-picture[data-v-428638d2],.open[data-v-428638d2],.close[data-v-428638d2],.speed-btn.wide-btn[data-v-428638d2]{height:24px;width:24px}.video-container.theater .tall[data-v-428638d2]{display:none}.video-container:not(.theater) .wide[data-v-428638d2]{display:none}.volume-container[data-v-428638d2]{display:flex;align-items:center}.volume-slider[data-v-428638d2]{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-428638d2],.volume-slider[data-v-428638d2]:focus-within{width:100px;transform:scaleX(1)}.duration-container[data-v-428638d2]{display:flex;align-items:center;gap:.25rem;flex-grow:1}.video-container.captions .captions-btn[data-v-428638d2]{border-bottom:3px solid red}.video-controls-container .controls button.wide-btn[data-v-428638d2]{width:50px}.timeline-container[data-v-428638d2]{width:100%;height:7px;margin-inline:.5rem;cursor:pointer;display:flex;align-items:center}.timeline[data-v-428638d2]{background-color:#64646480;height:3px;width:100%;position:relative}.timeline[data-v-428638d2]: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-428638d2]: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-428638d2]{--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-428638d2]{display:block}.video-container.scrubbing .timeline[data-v-428638d2]:before,.timeline-container:hover .timeline[data-v-428638d2]:before{display:block}.video-container.scrubbing .thumb-indicator[data-v-428638d2],.timeline-container:hover .thumb-indicator[data-v-428638d2]{--scale: 1}.video-container.scrubbing .timeline[data-v-428638d2],.timeline-container:hover .timeline[data-v-428638d2]{height:100%}