@a-type/ui 0.5.0 → 0.5.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/dist/cjs/components/camera/Camera.d.ts +1 -0
- package/dist/cjs/components/camera/Camera.js +10 -9
- package/dist/cjs/components/camera/Camera.js.map +1 -1
- package/dist/cjs/components/camera/Camera.stories.d.ts +1 -0
- package/dist/cjs/components/camera/Camera.stories.js +8 -3
- package/dist/cjs/components/camera/Camera.stories.js.map +1 -1
- package/dist/esm/components/camera/Camera.d.ts +1 -0
- package/dist/esm/components/camera/Camera.js +10 -9
- package/dist/esm/components/camera/Camera.js.map +1 -1
- package/dist/esm/components/camera/Camera.stories.d.ts +1 -0
- package/dist/esm/components/camera/Camera.stories.js +7 -2
- package/dist/esm/components/camera/Camera.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/camera/Camera.stories.tsx +13 -3
- package/src/components/camera/Camera.tsx +17 -6
|
@@ -4,6 +4,7 @@ export interface CameraRootProps {
|
|
|
4
4
|
onCapture?: (data: File) => void;
|
|
5
5
|
children?: ReactNode;
|
|
6
6
|
format?: 'image/png' | 'image/jpeg';
|
|
7
|
+
facingMode?: 'user' | 'environment';
|
|
7
8
|
}
|
|
8
9
|
export declare const CameraRoot: import("react").ForwardRefExoticComponent<CameraRootProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
9
10
|
export interface CameraShutterButtonProps {
|
|
@@ -31,7 +31,7 @@ const CameraContext = (0, react_1.createContext)({
|
|
|
31
31
|
devices: [],
|
|
32
32
|
});
|
|
33
33
|
exports.CameraRoot = (0, react_1.forwardRef)(function Camera(_a, ref) {
|
|
34
|
-
var { className, onCapture, children, format = 'image/png' } = _a, rest = __rest(_a, ["className", "onCapture", "children", "format"]);
|
|
34
|
+
var { className, onCapture, children, facingMode, format = 'image/png' } = _a, rest = __rest(_a, ["className", "onCapture", "children", "facingMode", "format"]);
|
|
35
35
|
const videoRef = (0, react_1.useRef)(null);
|
|
36
36
|
const triggerCapture = () => {
|
|
37
37
|
var _a;
|
|
@@ -47,24 +47,25 @@ exports.CameraRoot = (0, react_1.forwardRef)(function Camera(_a, ref) {
|
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
49
|
const [devices, setDevices] = (0, react_1.useState)([]);
|
|
50
|
+
const [stream, setStream] = (0, react_1.useState)();
|
|
50
51
|
(0, react_1.useEffect)(() => {
|
|
51
|
-
|
|
52
|
+
var _a;
|
|
53
|
+
(_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.enumerateDevices().then((devices) => {
|
|
52
54
|
setDevices(devices.filter((device) => device.kind === 'videoinput'));
|
|
53
55
|
});
|
|
54
|
-
}, []);
|
|
56
|
+
}, [!!stream]);
|
|
55
57
|
const [selectedDeviceId, setSelectedDeviceId] = (0, react_1.useState)();
|
|
56
|
-
const [stream, setStream] = (0, react_1.useState)();
|
|
57
58
|
(0, react_1.useEffect)(() => {
|
|
58
|
-
|
|
59
|
-
|
|
59
|
+
var _a;
|
|
60
|
+
(_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia({
|
|
60
61
|
video: {
|
|
61
62
|
deviceId: selectedDeviceId,
|
|
63
|
+
facingMode,
|
|
62
64
|
},
|
|
63
|
-
})
|
|
64
|
-
.then((s) => {
|
|
65
|
+
}).then((s) => {
|
|
65
66
|
setStream(s);
|
|
66
67
|
});
|
|
67
|
-
}, [selectedDeviceId]);
|
|
68
|
+
}, [selectedDeviceId, facingMode]);
|
|
68
69
|
(0, react_1.useEffect)(() => {
|
|
69
70
|
return () => {
|
|
70
71
|
stream === null || stream === void 0 ? void 0 : stream.getTracks().forEach((track) => track.stop());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../../../src/components/camera/Camera.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,iCASe;AACf,4CAAsC;AACtC,wCAAkC;AAClC,4CAAgF;AAChF,qDAA4C;AAC5C,6CAA+C;AAE/C,MAAM,aAAa,GAAG,IAAA,qBAAa,EAKhC;IACF,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;IACxB,gBAAgB,EAAE,SAAS;IAC3B,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;IACxB,OAAO,EAAE,EAAE;CACX,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../../../src/components/camera/Camera.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.Default = void 0;
|
|
4
|
+
exports.BackCamera = exports.Default = void 0;
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const Camera_js_1 = require("./Camera.js");
|
|
7
7
|
const react_1 = require("react");
|
|
@@ -19,9 +19,14 @@ exports.Default = {
|
|
|
19
19
|
return (0, jsx_runtime_1.jsx)(CameraDemo, {});
|
|
20
20
|
},
|
|
21
21
|
};
|
|
22
|
-
|
|
22
|
+
exports.BackCamera = {
|
|
23
|
+
render() {
|
|
24
|
+
return (0, jsx_runtime_1.jsx)(CameraDemo, { facingMode: "environment" });
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
function CameraDemo({ facingMode }) {
|
|
23
28
|
const [latest, setLatest] = (0, react_1.useState)();
|
|
24
29
|
const dataUri = (0, react_1.useMemo)(() => (latest ? URL.createObjectURL(latest) : undefined), [latest]);
|
|
25
|
-
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(Camera_js_1.CameraRoot, Object.assign({ onCapture: setLatest, className: "w-64 h-64" }, { children: [(0, jsx_runtime_1.jsx)(Camera_js_1.CameraShutterButton, {}), (0, jsx_runtime_1.jsx)(Camera_js_1.CameraDeviceSelector, {})] })), latest && (0, jsx_runtime_1.jsx)("img", { src: dataUri, className: "w-full" })] }));
|
|
30
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(Camera_js_1.CameraRoot, Object.assign({ facingMode: facingMode, onCapture: setLatest, className: "w-64 h-64" }, { children: [(0, jsx_runtime_1.jsx)(Camera_js_1.CameraShutterButton, {}), (0, jsx_runtime_1.jsx)(Camera_js_1.CameraDeviceSelector, {})] })), latest && (0, jsx_runtime_1.jsx)("img", { src: dataUri, className: "w-full" })] }));
|
|
26
31
|
}
|
|
27
32
|
//# sourceMappingURL=Camera.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Camera.stories.js","sourceRoot":"","sources":["../../../../src/components/camera/Camera.stories.tsx"],"names":[],"mappings":";;;;AACA,2CAIqB;AACrB,
|
|
1
|
+
{"version":3,"file":"Camera.stories.js","sourceRoot":"","sources":["../../../../src/components/camera/Camera.stories.tsx"],"names":[],"mappings":";;;;AACA,2CAIqB;AACrB,iCAA0C;AAE1C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;IACD,IAAI,EAAE,EAAE;CACO,CAAC;AAEjB,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM;QACL,OAAO,uBAAC,UAAU,KAAG,CAAC;IACvB,CAAC;CACD,CAAC;AAEW,QAAA,UAAU,GAAU;IAChC,MAAM;QACL,OAAO,uBAAC,UAAU,IAAC,UAAU,EAAC,aAAa,GAAG,CAAC;IAChD,CAAC;CACD,CAAC;AAEF,SAAS,UAAU,CAAC,EAAE,UAAU,EAA2C;IAC1E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,GAAoB,CAAC;IACzD,MAAM,OAAO,GAAG,IAAA,eAAO,EACtB,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EACxD,CAAC,MAAM,CAAC,CACR,CAAC;IAEF,OAAO,CACN,4CACC,wBAAC,sBAAU,kBACV,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAC,WAAW,iBAErB,uBAAC,+BAAmB,KAAG,EACvB,uBAAC,gCAAoB,KAAG,KACZ,EACZ,MAAM,IAAI,gCAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAC,QAAQ,GAAG,IAC9C,CACN,CAAC;AACH,CAAC"}
|
|
@@ -4,6 +4,7 @@ export interface CameraRootProps {
|
|
|
4
4
|
onCapture?: (data: File) => void;
|
|
5
5
|
children?: ReactNode;
|
|
6
6
|
format?: 'image/png' | 'image/jpeg';
|
|
7
|
+
facingMode?: 'user' | 'environment';
|
|
7
8
|
}
|
|
8
9
|
export declare const CameraRoot: import("react").ForwardRefExoticComponent<CameraRootProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
9
10
|
export interface CameraShutterButtonProps {
|
|
@@ -25,7 +25,7 @@ const CameraContext = createContext({
|
|
|
25
25
|
devices: [],
|
|
26
26
|
});
|
|
27
27
|
export const CameraRoot = forwardRef(function Camera(_a, ref) {
|
|
28
|
-
var { className, onCapture, children, format = 'image/png' } = _a, rest = __rest(_a, ["className", "onCapture", "children", "format"]);
|
|
28
|
+
var { className, onCapture, children, facingMode, format = 'image/png' } = _a, rest = __rest(_a, ["className", "onCapture", "children", "facingMode", "format"]);
|
|
29
29
|
const videoRef = useRef(null);
|
|
30
30
|
const triggerCapture = () => {
|
|
31
31
|
var _a;
|
|
@@ -41,24 +41,25 @@ export const CameraRoot = forwardRef(function Camera(_a, ref) {
|
|
|
41
41
|
}
|
|
42
42
|
};
|
|
43
43
|
const [devices, setDevices] = useState([]);
|
|
44
|
+
const [stream, setStream] = useState();
|
|
44
45
|
useEffect(() => {
|
|
45
|
-
|
|
46
|
+
var _a;
|
|
47
|
+
(_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.enumerateDevices().then((devices) => {
|
|
46
48
|
setDevices(devices.filter((device) => device.kind === 'videoinput'));
|
|
47
49
|
});
|
|
48
|
-
}, []);
|
|
50
|
+
}, [!!stream]);
|
|
49
51
|
const [selectedDeviceId, setSelectedDeviceId] = useState();
|
|
50
|
-
const [stream, setStream] = useState();
|
|
51
52
|
useEffect(() => {
|
|
52
|
-
|
|
53
|
-
|
|
53
|
+
var _a;
|
|
54
|
+
(_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia({
|
|
54
55
|
video: {
|
|
55
56
|
deviceId: selectedDeviceId,
|
|
57
|
+
facingMode,
|
|
56
58
|
},
|
|
57
|
-
})
|
|
58
|
-
.then((s) => {
|
|
59
|
+
}).then((s) => {
|
|
59
60
|
setStream(s);
|
|
60
61
|
});
|
|
61
|
-
}, [selectedDeviceId]);
|
|
62
|
+
}, [selectedDeviceId, facingMode]);
|
|
62
63
|
useEffect(() => {
|
|
63
64
|
return () => {
|
|
64
65
|
stream === null || stream === void 0 ? void 0 : stream.getTracks().forEach((track) => track.stop());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../../../src/components/camera/Camera.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAGN,aAAa,EACb,UAAU,EACV,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,GACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,aAAa,GAAG,aAAa,CAKhC;IACF,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;IACxB,gBAAgB,EAAE,SAAS;IAC3B,cAAc,EAAE,GAAG,EAAE,GAAE,CAAC;IACxB,OAAO,EAAE,EAAE;CACX,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../../../src/components/camera/Camera.tsx"],"names":[],"mappings":"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"}
|
|
@@ -16,9 +16,14 @@ export const Default = {
|
|
|
16
16
|
return _jsx(CameraDemo, {});
|
|
17
17
|
},
|
|
18
18
|
};
|
|
19
|
-
|
|
19
|
+
export const BackCamera = {
|
|
20
|
+
render() {
|
|
21
|
+
return _jsx(CameraDemo, { facingMode: "environment" });
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
function CameraDemo({ facingMode }) {
|
|
20
25
|
const [latest, setLatest] = useState();
|
|
21
26
|
const dataUri = useMemo(() => (latest ? URL.createObjectURL(latest) : undefined), [latest]);
|
|
22
|
-
return (_jsxs("div", { children: [_jsxs(CameraRoot, Object.assign({ onCapture: setLatest, className: "w-64 h-64" }, { children: [_jsx(CameraShutterButton, {}), _jsx(CameraDeviceSelector, {})] })), latest && _jsx("img", { src: dataUri, className: "w-full" })] }));
|
|
27
|
+
return (_jsxs("div", { children: [_jsxs(CameraRoot, Object.assign({ facingMode: facingMode, onCapture: setLatest, className: "w-64 h-64" }, { children: [_jsx(CameraShutterButton, {}), _jsx(CameraDeviceSelector, {})] })), latest && _jsx("img", { src: dataUri, className: "w-full" })] }));
|
|
23
28
|
}
|
|
24
29
|
//# sourceMappingURL=Camera.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Camera.stories.js","sourceRoot":"","sources":["../../../../src/components/camera/Camera.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACN,oBAAoB,EACpB,UAAU,EACV,mBAAmB,GACnB,MAAM,aAAa,CAAC;AACrB,OAAO,
|
|
1
|
+
{"version":3,"file":"Camera.stories.js","sourceRoot":"","sources":["../../../../src/components/camera/Camera.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACN,oBAAoB,EACpB,UAAU,EACV,mBAAmB,GACnB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;IACD,IAAI,EAAE,EAAE;CACO,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM;QACL,OAAO,KAAC,UAAU,KAAG,CAAC;IACvB,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAChC,MAAM;QACL,OAAO,KAAC,UAAU,IAAC,UAAU,EAAC,aAAa,GAAG,CAAC;IAChD,CAAC;CACD,CAAC;AAEF,SAAS,UAAU,CAAC,EAAE,UAAU,EAA2C;IAC1E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAoB,CAAC;IACzD,MAAM,OAAO,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EACxD,CAAC,MAAM,CAAC,CACR,CAAC;IAEF,OAAO,CACN,0BACC,MAAC,UAAU,kBACV,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAC,WAAW,iBAErB,KAAC,mBAAmB,KAAG,EACvB,KAAC,oBAAoB,KAAG,KACZ,EACZ,MAAM,IAAI,cAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAC,QAAQ,GAAG,IAC9C,CACN,CAAC;AACH,CAAC"}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
CameraRoot,
|
|
5
5
|
CameraShutterButton,
|
|
6
6
|
} from './Camera.js';
|
|
7
|
-
import {
|
|
7
|
+
import { useMemo, useState } from 'react';
|
|
8
8
|
|
|
9
9
|
const meta = {
|
|
10
10
|
title: 'Camera',
|
|
@@ -25,7 +25,13 @@ export const Default: Story = {
|
|
|
25
25
|
},
|
|
26
26
|
};
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
export const BackCamera: Story = {
|
|
29
|
+
render() {
|
|
30
|
+
return <CameraDemo facingMode="environment" />;
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
function CameraDemo({ facingMode }: { facingMode?: 'user' | 'environment' }) {
|
|
29
35
|
const [latest, setLatest] = useState<File | undefined>();
|
|
30
36
|
const dataUri = useMemo(
|
|
31
37
|
() => (latest ? URL.createObjectURL(latest) : undefined),
|
|
@@ -34,7 +40,11 @@ function CameraDemo() {
|
|
|
34
40
|
|
|
35
41
|
return (
|
|
36
42
|
<div>
|
|
37
|
-
<CameraRoot
|
|
43
|
+
<CameraRoot
|
|
44
|
+
facingMode={facingMode}
|
|
45
|
+
onCapture={setLatest}
|
|
46
|
+
className="w-64 h-64"
|
|
47
|
+
>
|
|
38
48
|
<CameraShutterButton />
|
|
39
49
|
<CameraDeviceSelector />
|
|
40
50
|
</CameraRoot>
|
|
@@ -32,11 +32,19 @@ export interface CameraRootProps {
|
|
|
32
32
|
onCapture?: (data: File) => void;
|
|
33
33
|
children?: ReactNode;
|
|
34
34
|
format?: 'image/png' | 'image/jpeg';
|
|
35
|
+
facingMode?: 'user' | 'environment';
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
|
|
38
39
|
function Camera(
|
|
39
|
-
{
|
|
40
|
+
{
|
|
41
|
+
className,
|
|
42
|
+
onCapture,
|
|
43
|
+
children,
|
|
44
|
+
facingMode,
|
|
45
|
+
format = 'image/png',
|
|
46
|
+
...rest
|
|
47
|
+
},
|
|
40
48
|
ref,
|
|
41
49
|
) {
|
|
42
50
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
@@ -55,26 +63,29 @@ export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
|
|
|
55
63
|
};
|
|
56
64
|
|
|
57
65
|
const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
|
|
66
|
+
const [stream, setStream] = useState<MediaStream | undefined>();
|
|
67
|
+
|
|
58
68
|
useEffect(() => {
|
|
59
|
-
navigator.mediaDevices
|
|
69
|
+
navigator.mediaDevices?.enumerateDevices().then((devices): void => {
|
|
60
70
|
setDevices(devices.filter((device) => device.kind === 'videoinput'));
|
|
61
71
|
});
|
|
62
|
-
}, []);
|
|
72
|
+
}, [!!stream]);
|
|
73
|
+
|
|
63
74
|
const [selectedDeviceId, setSelectedDeviceId] = useState<
|
|
64
75
|
string | undefined
|
|
65
76
|
>();
|
|
66
|
-
const [stream, setStream] = useState<MediaStream | undefined>();
|
|
67
77
|
useEffect(() => {
|
|
68
78
|
navigator.mediaDevices
|
|
69
|
-
|
|
79
|
+
?.getUserMedia({
|
|
70
80
|
video: {
|
|
71
81
|
deviceId: selectedDeviceId,
|
|
82
|
+
facingMode,
|
|
72
83
|
},
|
|
73
84
|
})
|
|
74
85
|
.then((s) => {
|
|
75
86
|
setStream(s);
|
|
76
87
|
});
|
|
77
|
-
}, [selectedDeviceId]);
|
|
88
|
+
}, [selectedDeviceId, facingMode]);
|
|
78
89
|
useEffect(() => {
|
|
79
90
|
return () => {
|
|
80
91
|
stream?.getTracks().forEach((track) => track.stop());
|