cortex-react-ui 0.1.176 → 0.1.177

package/lib/esm/types/Camera/Camera.d.ts

@@ -0,0 +1,15 @@
+import { WebcamProps } from 'react-webcam';
+declare const Camera: ({ onCapture, isOffline, mode, ...props }: CameraProps) => JSX.Element;
+export declare type CameraProps = {
+    onCapture: ({ fileStoreName, fileRowId, file }: TfileCapturedProps) => void;
+    mode?: 'photo' | 'video';
+    isOffline?: boolean;
+} & Partial<WebcamProps>;
+export declare type TfileCapturedProps = {
+    fileStoreName?: string | null;
+    fileRowId?: number | null;
+    file?: File | null;
+    imageSrc?: string | null;
+    videoSrc?: string | null;
+};
+export default Camera;

package/lib/esm/types/Camera/FileStorageDb.d.ts

@@ -0,0 +1,9 @@
+declare class FileStorageDB {
+    private dbName;
+    private storeName;
+    private db;
+    openDatabase(): Promise<IDBDatabase>;
+    storeFile(file: File): Promise<number>;
+    retrieveFile(id: number): Promise<File | null>;
+}
+export default FileStorageDB;

package/lib/esm/types/Camera/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Camera';

package/lib/esm/types/Camera/useTimer.d.ts

@@ -0,0 +1,6 @@
+export declare const useTimer: () => {
+    formatTime: (totalSeconds: number) => string;
+    startTimer: () => void;
+    stopTimer: () => void;
+    formatedTime: string;
+};

package/lib/esm/types/index.d.ts

@@ -5,6 +5,7 @@ export { default as BarLoader } from './BarLoader';
 export { default as Selected } from './Selected';
 export { default as Button } from './Button';
 export { default as Scanner } from './Scanner';
+export { default as Camera } from './Camera';
 export { default as ToggleButton } from './ToggleButton';
 export { default as Tooltip } from './Tooltip';
 export { default as TagInput } from './TagInput';

package/lib/index.d.ts

@@ -1,5 +1,6 @@
 import React$1, { CSSProperties } from 'react';
 import { IDetectedBarcode, IScannerProps } from '@yudiel/react-qr-scanner';
+import { WebcamProps } from 'react-webcam';
 
 declare const PopperPlacement: {
     readonly Center: "center";
@@ -98,6 +99,20 @@ declare type ScannerProps = {
     onScan?: (detectedCodes: IDetectedBarcode[]) => void;
 } & IScannerProps;
 
+declare const Camera: ({ onCapture, isOffline, mode, ...props }: CameraProps) => JSX.Element;
+declare type CameraProps = {
+    onCapture: ({ fileStoreName, fileRowId, file }: TfileCapturedProps) => void;
+    mode?: 'photo' | 'video';
+    isOffline?: boolean;
+} & Partial<WebcamProps>;
+declare type TfileCapturedProps = {
+    fileStoreName?: string | null;
+    fileRowId?: number | null;
+    file?: File | null;
+    imageSrc?: string | null;
+    videoSrc?: string | null;
+};
+
 interface ToggleButtonProps {
     selected?: boolean;
     value?: string;
@@ -307,4 +322,4 @@ interface Props {
 }
 declare const CrossIcon: React$1.FC<Props>;
 
-export { AuthDownloadLink, BarLoader, Button, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ConfirmDialog, ContextMenu, CrossIcon, Dialog, DialogActions, DialogContent$1 as DialogContent, DialogFooter, DialogHeader, DialogContent as DialogTitle, Divider, DomContainer, ErrorDialog, Menu, MenuGroup, MenuItem, Popper, PopupMenu, Scanner, Selected, Spinner, TagInput, ToggleButton, Tooltip, WarningDialog };
+export { AuthDownloadLink, BarLoader, Button, Camera, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ConfirmDialog, ContextMenu, CrossIcon, Dialog, DialogActions, DialogContent$1 as DialogContent, DialogFooter, DialogHeader, DialogContent as DialogTitle, Divider, DomContainer, ErrorDialog, Menu, MenuGroup, MenuItem, Popper, PopupMenu, Scanner, Selected, Spinner, TagInput, ToggleButton, Tooltip, WarningDialog };

package/lib/styles/Camera/index.scss

@@ -0,0 +1,218 @@
+@import "../global.scss";
+
+@mixin camera($props: null, $options: null) {
+    $internal-props: (
+        bgColor: #ffffff,
+        fgColor: $color-grey-darker,
+        captureButtonBg: #2196f3,
+        captureButtonHover: #1976d2,
+        recordButtonBg: #f44336,
+        recordButtonHover: #d32f2f,
+        downloadButtonBg: #4caf50,
+        downloadButtonHover: #388e3c,
+        resetButtonBg: #9e9e9e,
+        resetButtonHover: #757575,
+        offlineModeColor: #d32f2f
+    );
+
+    $internal-props: safe-map-merge($internal-props, $props);
+
+    .camera-container {
+        width: 100%;
+        height: 100%;
+        background-color: #000;
+    }
+
+    .camera-switch-btn {
+        all: initial;
+        display: flex;
+        cursor: pointer;
+    }
+
+    .camera-recording-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: map-get($internal-props, recordButtonBg);
+        animation: clignote 1s infinite;
+    }
+    
+    .camera-recording-timer {
+        z-index: 99;
+        position: absolute;
+        top: 1rem;
+        left: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, .2);
+        border-radius: 4px;
+        padding: 3px 7px;
+        font-size: 12px;
+        color: #fff;
+        font-family: sans-serif;
+        gap: 6px;
+    }
+
+    .camera-offline-mode {
+        position: absolute;
+        top: 1rem;
+        right: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, .2);
+        border-radius: 4px;
+        padding: 3px 7px;
+        font-size: 12px;
+        color: red;
+        font-family: sans-serif;
+    }
+
+    .camera-mode {
+        z-index: 9999;
+        position: absolute;
+        bottom: 2rem;
+        right: 20px;
+        padding: 0.5rem;
+        border-radius: 6px;
+        color: #ffffff;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 7px;
+        background-color: map-get($internal-props, captureButtonBg);
+        transition: background-color 0.3s ease;
+    }
+
+    .camera-preview {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .camera-controls {
+        z-index: 999;
+        position: absolute;
+        bottom: 2rem;
+        left: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+    }
+
+    .video-play-btn {
+        all: initial;
+        position: absolute;
+        bottom: 10%;
+        left: 50%;
+        z-index: 9;
+        width: 1em;
+        height: 1em;
+        min-width: 15px;
+        min-height: 15px;
+        transform: translate(-50%, -50%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        border: 1px solid;
+        padding: 20px 20px;
+        background-color: map-get($internal-props, bgColor);
+        cursor: pointer;
+    }
+
+    .camera-button {
+        padding: 0.5rem;
+        border-radius: 6px;
+        color: #ffffff;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 7px;
+        transition: background-color 0.3s ease;
+
+        &--capture {
+            border-radius: 50%;
+            color: initial;
+            width: 50px;
+            height: 50px;
+            border: 1px solid black;
+            background-color: map-get($internal-props, bgColor);
+        }
+
+        &--record {
+            border-radius: 50%;
+            color: red;
+            width: 50px;
+            height: 50px;
+            border: 1px solid black;
+            background-color: map-get($internal-props, bgColor);
+        }
+
+        &--download {
+            background-color: map-get($internal-props, downloadButtonBg);
+            &:hover {
+                background-color: map-get($internal-props, downloadButtonHover);
+            }
+        }
+
+        &--reset {
+            background-color: map-get($internal-props, resetButtonBg);
+            &:hover {
+                background-color: map-get($internal-props, resetButtonHover);
+            }
+        }
+    }
+
+    .camera-offline-mode {
+        font-size: 0.875rem;
+        font-family: sans-serif;
+        color: map-get($internal-props, offlineModeColor);
+    }
+
+    .camera-screen-animation {
+        animation: fadeIn .3s;
+    }
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes pulse {
+        0% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale(1.05);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+
+    @keyframes clignote {
+        0% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+}
+
+@include camera();

package/lib/styles/index.scss

@@ -13,7 +13,7 @@
 @import "ToggleButton";
 @import "Selected";
 @import "BarLoader";
-
+@import "Camera";
 
 @include icons();
 @include popper();
@@ -28,6 +28,7 @@
 @include toggleButton();
 @include selected();
 @include barLoader();
+@include camera();
 
 // @include popper();
 // @include popper(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cortex-react-ui",
-  "version": "0.1.176",
+  "version": "0.1.177",
   "description": "React UI",
   "author": "Anthony",
   "license": "MIT",
@@ -87,9 +87,12 @@
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.1",
+    "lodash": "^4.17.21",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-icons": "^5.3.0",
     "react-scripts": "^4.0.3",
+    "react-webcam": "^7.2.0",
     "rollup": "^2.60.2",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-dts": "^4.0.1",