ablok-photobooth 0.0.1

package/dist/components/photo-app.vue.d.ts

@@ -0,0 +1,343 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    enableDragDrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableLocalFileUpload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableCamera: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableSwitchCamera: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    defaultRearCamera: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableFileList: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableTogglePlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableButtonIcons: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableButtonCaptions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableLegacyInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableInstantUpload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableAutoSave: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableRemoveBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableMirrorCamera: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableGuide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableReview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    downScaleImages: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    guideSrc: {
+        type: StringConstructor;
+        default: string;
+    };
+    acceptButton: {
+        type: BooleanConstructor;
+        default: string;
+    };
+    captureCountdown: {
+        type: NumberConstructor;
+        default: number;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    i18n: {};
+    messages: {
+        default: () => {
+            title: string;
+            launchCamera: string;
+            localFileTitle: string;
+            dropTarget: string;
+            coverSelectFileCta: string;
+            captureTitle: string;
+            reviewTitle: string;
+            dragDrop: string;
+            selectFile: string;
+            camera: string;
+            save: string;
+            fileTooLarge: string;
+            cancel: string;
+            shoot: string;
+            accept: string;
+        };
+    };
+    apiEndpoint: {
+        type: StringConstructor;
+        default: string;
+    };
+    apiEndpointSuffix: {
+        type: StringConstructor;
+        default: string;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxFileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fixedResolution: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ratio: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    enableDragDrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableLocalFileUpload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableCamera: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableSwitchCamera: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    defaultRearCamera: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableFileList: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableTogglePlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableButtonIcons: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableButtonCaptions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableLegacyInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableInstantUpload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableAutoSave: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableRemoveBackground: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableMirrorCamera: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableGuide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableReview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    downScaleImages: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    guideSrc: {
+        type: StringConstructor;
+        default: string;
+    };
+    acceptButton: {
+        type: BooleanConstructor;
+        default: string;
+    };
+    captureCountdown: {
+        type: NumberConstructor;
+        default: number;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    i18n: {};
+    messages: {
+        default: () => {
+            title: string;
+            launchCamera: string;
+            localFileTitle: string;
+            dropTarget: string;
+            coverSelectFileCta: string;
+            captureTitle: string;
+            reviewTitle: string;
+            dragDrop: string;
+            selectFile: string;
+            camera: string;
+            save: string;
+            fileTooLarge: string;
+            cancel: string;
+            shoot: string;
+            accept: string;
+        };
+    };
+    apiEndpoint: {
+        type: StringConstructor;
+        default: string;
+    };
+    apiEndpointSuffix: {
+        type: StringConstructor;
+        default: string;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxFileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fixedResolution: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ratio: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    required: boolean;
+    modelValue: string;
+    enableSwitchCamera: boolean;
+    defaultRearCamera: boolean;
+    enableMirrorCamera: boolean;
+    enableGuide: boolean;
+    guideSrc: string;
+    ratio: string;
+    color: string;
+    enableDragDrop: boolean;
+    enableLocalFileUpload: boolean;
+    enableCamera: boolean;
+    enableFileList: boolean;
+    enableTogglePlay: boolean;
+    enableButtonIcons: boolean;
+    enableButtonCaptions: boolean;
+    enableLegacyInput: boolean;
+    enableInstantUpload: boolean;
+    enableAutoSave: boolean;
+    enableRemoveBackground: boolean;
+    enableTitle: boolean;
+    enableReview: boolean;
+    downScaleImages: boolean;
+    acceptButton: boolean;
+    captureCountdown: number;
+    backgroundColor: string;
+    messages: {
+        title: string;
+        launchCamera: string;
+        localFileTitle: string;
+        dropTarget: string;
+        coverSelectFileCta: string;
+        captureTitle: string;
+        reviewTitle: string;
+        dragDrop: string;
+        selectFile: string;
+        camera: string;
+        save: string;
+        fileTooLarge: string;
+        cancel: string;
+        shoot: string;
+        accept: string;
+    };
+    apiEndpoint: string;
+    apiEndpointSuffix: string;
+    variant: string;
+    maxFileSize: number;
+    fixedResolution: number;
+}>;
+export default _default;

package/dist/components/web-cam.vue.d.ts

@@ -0,0 +1,87 @@
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        default: null;
+    };
+    config: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+    };
+    messages: {
+        type: ObjectConstructor;
+        default: {};
+    };
+    assets: {
+        type: {
+            (arrayLength: number): any[];
+            (...items: any[]): any[];
+            new (arrayLength: number): any[];
+            new (...items: any[]): any[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: never[];
+    };
+    exportToSvg: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoSelect: NumberConstructor;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        default: null;
+    };
+    config: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+    };
+    messages: {
+        type: ObjectConstructor;
+        default: {};
+    };
+    assets: {
+        type: {
+            (arrayLength: number): any[];
+            (...items: any[]): any[];
+            new (arrayLength: number): any[];
+            new (...items: any[]): any[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: never[];
+    };
+    exportToSvg: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoSelect: NumberConstructor;
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    value: null;
+    config: Record<string, any>;
+    messages: Record<string, any>;
+    variant: string;
+    assets: any[];
+    exportToSvg: boolean;
+}>;
+export default _default;

package/dist/i18n.d.ts

@@ -0,0 +1,76 @@
+declare const i18n: import("vue-i18n").I18n<{
+    en: {
+        welcome: string;
+        common: {
+            id: string;
+            name: string;
+            type: string;
+            yes: string;
+            no: string;
+            ok: string;
+            all: string;
+            accept: string;
+            approve: string;
+            reject: string;
+            review: string;
+            featured: string;
+            pending: string;
+            cancel: string;
+            submit: string;
+            select: string;
+            close: string;
+            back: string;
+            prev: string;
+            previous: string;
+            next: string;
+            play: string;
+            start: string;
+            stop: string;
+            pause: string;
+            reset: string;
+            undo: string;
+            redo: string;
+            forward: string;
+            rewind: string;
+            time: string;
+            moves: string;
+            congratulations: string;
+            thanks: string;
+            participants: string;
+            moderate: string;
+            active: string;
+            success: string;
+            save: string;
+            or: string;
+            skip: string;
+            readMore: string;
+            download: string;
+        };
+        cameraInput: {
+            waitForCameraNotification: string;
+            camera: string;
+            switch: string;
+            capture: string;
+        };
+        fileInput: {
+            coverTitle: string;
+            coverLaunchCta: string;
+            coverLocalSelectTitle: string;
+            coverDropTarget: string;
+            coverLocalFileCta: string;
+            captureTitle: string;
+            reviewTitle: string;
+            dragDropCta: string;
+            selectFileDialogCta: string;
+            selectCameraCta: string;
+            dropTargetLabel: string;
+            shoot: string;
+            fileTooLarge: string;
+        };
+        photoBooth: {
+            removeBackgroundCaption: string;
+            saveMergedCaption: string;
+        };
+    };
+}, {}, {}, string, false>;
+export default i18n;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CameraInput } from './components/camera-input.vue';
+export { default as PhotoApp } from './components/photo-app.vue';
+export { default as WebCam } from './components/web-cam.vue';

package/dist/locales/en.d.ts

@@ -0,0 +1,74 @@
+export declare const messages: {
+    welcome: string;
+    common: {
+        id: string;
+        name: string;
+        type: string;
+        yes: string;
+        no: string;
+        ok: string;
+        all: string;
+        accept: string;
+        approve: string;
+        reject: string;
+        review: string;
+        featured: string;
+        pending: string;
+        cancel: string;
+        submit: string;
+        select: string;
+        close: string;
+        back: string;
+        prev: string;
+        previous: string;
+        next: string;
+        play: string;
+        start: string;
+        stop: string;
+        pause: string;
+        reset: string;
+        undo: string;
+        redo: string;
+        forward: string;
+        rewind: string;
+        time: string;
+        moves: string;
+        congratulations: string;
+        thanks: string;
+        participants: string;
+        moderate: string;
+        active: string;
+        success: string;
+        save: string;
+        or: string;
+        skip: string;
+        readMore: string;
+        download: string;
+    };
+    cameraInput: {
+        waitForCameraNotification: string;
+        camera: string;
+        switch: string;
+        capture: string;
+    };
+    fileInput: {
+        coverTitle: string;
+        coverLaunchCta: string;
+        coverLocalSelectTitle: string;
+        coverDropTarget: string;
+        coverLocalFileCta: string;
+        captureTitle: string;
+        reviewTitle: string;
+        dragDropCta: string;
+        selectFileDialogCta: string;
+        selectCameraCta: string;
+        dropTargetLabel: string;
+        shoot: string;
+        fileTooLarge: string;
+    };
+    photoBooth: {
+        removeBackgroundCaption: string;
+        saveMergedCaption: string;
+    };
+};
+export default messages;

package/dist/main.d.ts

@@ -0,0 +1,3 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap";
+import '/node_modules/ablok-components/dist/style.css';

package/dist/style.css

@@ -0,0 +1 @@
+.camera-input{position:relative}.camera-input__preview{position:relative;height:100%}.camera-input__preview canvas{position:absolute;left:0;top:0;width:100%;height:100%}.camera-input__preview img,.camera-input__preview video{display:block;width:100%;height:100%;object-fit:cover}.camera-input__controls{position:absolute;bottom:0;width:100%;background:rgba(255,255,255,.5)}.camera-input.mirror-cam img,.camera-input.mirror-cam video{transform:scaleX(-1)}.camera-input__switch-cam{position:absolute;z-index:1;right:0;top:0}.camera-input__switch-cam .v-btn{display:block;background-color:#ffffff3d;border-radius:.3125rem}.camera-input__switch-cam .svg-icon{display:block;font-size:1.6667rem}.camera-input__bg-notification{position:absolute;z-index:0;left:0;top:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.camera-input__bg-notification+video{position:relative;z-index:1}.camera-input .camera-input__guide{position:absolute;left:0;top:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none;object-fit:contain}.camera-input__countdown-overlay{position:absolute;left:0;top:0;z-index:2;width:100%;height:100%;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(4px);overflow:hidden}.camera-input__countdown-overlay .countdown{position:relative;font-size:6rem;color:#fffc;font-weight:700}.camera-input__countdown-overlay .countdown:before,.camera-input__countdown-overlay .countdown:after{position:absolute;left:0;top:0;z-index:1;content:attr(data-countdown);transform-origin:center;animation-name:pulse;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-out}.camera-input__countdown-overlay .countdown:after{animation-duration:.1 .25s;animation-delay:.25s}.camera-input button{appearance:none;background:none;border:none}@keyframes blur{0%{backdrop-filter:blur(4px)}to{backdrop-filter:blur(0)}}@keyframes pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(5);opacity:0}}:root,*:before,*:after{--media-container-border-width: thick;--media-container-border-color: var(--bs-primary);--media-container-border-type: solid}.media-container{position:relative;border:var(--media-container-border-width) var(--media-container-border-type) var(--media-container-border-color);border-radius:1rem}.media-container--ratio-1-1{padding-bottom:100%}.media-container--ratio-16-9{padding-bottom:56.25%}.media-container--ratio-9-16{padding-bottom:177.7777778%}.media-container--ratio-4-3{padding-bottom:75%}.media-container--ratio-3-4{padding-bottom:133.333333%}.media-container>*{position:absolute;width:100%;height:100%}.media-container img,.media-container video,.media-container canvas{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}.web-cam__thumbnails .photo-booth__thumbnail{width:17.647059%;margin-right:10px}

package/dist/utilities/indexed-db-api.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Central indexed db api
+ */
+declare class IndexedDBApi {
+    private store;
+    private dbname;
+    private db;
+    clearLocalState(): Promise<void>;
+    storeLocalState(localState: any): Promise<void>;
+    getStateFromDb(): Promise<unknown>;
+    getDb(): Promise<unknown>;
+    private initDb;
+    constructor(database: string, store: any);
+}
+export default IndexedDBApi;

package/dist/utilities/media-helpers.d.ts

@@ -0,0 +1,15 @@
+export declare function readAsDataURL(src: string): Promise<unknown>;
+export declare function fileToDataUrl(file: File): Promise<any>;
+export declare function imageToDataUrl(src: string): Promise<any>;
+export declare function svgToDataUrl(svg: string): string;
+export declare function loadImage(src: string): Promise<HTMLImageElement>;
+export declare function dataURItoBlob(dataURI: any): Blob;
+export declare function createColorLayer(color: string): string;
+export declare function resizeImage(src: string, width?: number, height?: number): Promise<string>;
+export declare function cropImage(src: string, outputImageAspectRatio?: number): Promise<string>;
+export declare const getOrientation: (file: File) => Promise<number>;
+export declare function convertRotationToDegrees(rotation: number): number;
+export declare function getRotation(file: File): Promise<number>;
+export declare function rotateImage(src: string, rotation: number): Promise<string>;
+export declare function mirrorImage(src: string, x?: number, y?: number, horizontal?: boolean, vertical?: boolean): Promise<string>;
+export declare function loadFromJSON(canvas: any, canvasObject: any): Promise<any>;

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "ablok-photobooth",
+  "private": false,
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "build-lib-bak": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
+    "build-lib": "vite build && vue-tsc --emitDeclarationOnly"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.6",
+    "ablok-components": "0.0.42",
+    "bootstrap": "^5.2.0",
+    "fabric": "^5.2.1",
+    "lodash": "^4.17.21",
+    "pinia": "^2.0.14",
+    "vue": "^3.2.25",
+    "vue-i18n": "^9.2.0-beta.36",
+    "vue-upload-component": "^3.1.2"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.182",
+    "@types/node": "^17.0.45",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "path": "^0.12.7",
+    "sass": "^1.52.3",
+    "typescript": "^4.5.4",
+    "vite": "^2.9.9",
+    "vite-plugin-dts": "^1.4.1",
+    "vue-svg-sprite": "^2.2.1",
+    "vue-tsc": "^0.35.2"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/ablok-photobooth.umd.js",
+  "module": "./dist/ablok-photobooth.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/ablok-photobooth.es.js",
+      "require": "./dist/ablok-photobooth.umd.js"
+    }
+  },
+  "types": "./dist/types/index.d.ts"
+}