@up-group-ui/react-controls
Version:
Up shared react controls
101 lines • 6.89 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var typestyle_1 = require("typestyle");
var UpButton_1 = (0, tslib_1.__importDefault)(require("../Button/UpButton"));
var Toggle_1 = (0, tslib_1.__importDefault)(require("../Toggle"));
var LoadingIndicator_1 = (0, tslib_1.__importDefault)(require("../../Display/LoadingIndicator"));
var Notification_1 = (0, tslib_1.__importDefault)(require("../../Display/Notification"));
var Box_1 = (0, tslib_1.__importDefault)(require("../../Containers/Box"));
var theming_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming"));
var eventListener_1 = require("../../../Common/utils/eventListener");
var styles_1 = require("./styles");
var defaultLabels = {
activation: 'Activer la caméra :',
takePicture: 'Prendre une photo',
noCameraSupported: "Vatre navigateur ne supporte pas l'accès à la caméra ou vous n'avez pas autorisé celui-ci",
};
function UpPicture(_a) {
var _b = _a.theme, theme = _b === void 0 ? theming_1.default : _b, _c = _a.name, name = _c === void 0 ? 'pucture' : _c, width = _a.width, height = _a.height, labels = _a.labels, customStyles = _a.customStyles, onChange = _a.onChange;
var supportsCamera = react_1.default.useState('mediaDevices' in navigator)[0];
var _d = react_1.default.useState(false), enableVideo = _d[0], setEnableVideo = _d[1];
var _e = react_1.default.useState(null), image = _e[0], setImage = _e[1];
var _f = react_1.default.useState(false), isCameraReady = _f[0], setIsCameraReady = _f[1];
var video = react_1.default.useRef(null);
var picture = react_1.default.useRef(null);
var takeImage = react_1.default.useCallback(function () {
if (picture.current) {
picture.current.width = width || video.current.videoWidth;
picture.current.height = height || video.current.videoHeight;
picture.current.getContext('2d').drawImage(video.current, 0, 0, picture.current.width, picture.current.height);
var newImage = {
data: picture.current.toDataURL(),
width: picture.current.width,
height: picture.current.height,
};
setImage(newImage);
if (onChange)
onChange((0, eventListener_1.eventFactory)(name, newImage), newImage);
}
}, []);
var onActivationVideoChange = react_1.default.useCallback(function () {
var newState = !enableVideo;
setEnableVideo(newState);
if (!newState) {
video.current &&
video.current.srcObject &&
video.current.srcObject.getVideoTracks().forEach(function (videoTrack) {
videoTrack.stop();
});
video.current.srcObject = null;
setIsCameraReady(false);
setImage(null);
}
else {
navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
video.current.srcObject = stream;
setIsCameraReady(true);
});
}
}, [enableVideo]);
var currentLabels = labels || defaultLabels;
var cameraWrapperStyles = (0, typestyle_1.style)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, styles_1.getCameraWrapperStyles)({ theme: theme, width: width, height: height, labels: labels, customStyles: customStyles }, {
supportsCamera: supportsCamera,
enableVideo: enableVideo,
isCameraReady: isCameraReady,
image: image,
})), (0, styles_1.getPictureCustomStyle)('cameraWrapper', customStyles, { theme: theme, width: width, height: height, labels: labels, customStyles: customStyles }, {
supportsCamera: supportsCamera,
enableVideo: enableVideo,
isCameraReady: isCameraReady,
image: image,
})));
var pictureWrapperStyles = (0, typestyle_1.style)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, styles_1.getPictureWrapperStyles)({ theme: theme, width: width, height: height, labels: labels, customStyles: customStyles }, {
supportsCamera: supportsCamera,
enableVideo: enableVideo,
isCameraReady: isCameraReady,
image: image,
})), (0, styles_1.getPictureCustomStyle)('pictureWrapper', customStyles, { theme: theme, width: width, height: height, labels: labels, customStyles: customStyles }, {
supportsCamera: supportsCamera,
enableVideo: enableVideo,
isCameraReady: isCameraReady,
image: image,
})));
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!supportsCamera && (0, jsx_runtime_1.jsx)(Notification_1.default, (0, tslib_1.__assign)({ intent: 'warning' }, { children: labels['noCameraSupported'] }), void 0), supportsCamera && ((0, jsx_runtime_1.jsx)(Toggle_1.default, (0, tslib_1.__assign)({ value: true, checked: enableVideo, onChange: onActivationVideoChange }, { children: currentLabels['activation'] }), void 0)), enableVideo && ((0, jsx_runtime_1.jsxs)(Box_1.default, (0, tslib_1.__assign)({ flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', className: "up-camera-wrapper " + cameraWrapperStyles }, { children: [(0, jsx_runtime_1.jsx)(LoadingIndicator_1.default, { isLoading: !isCameraReady, displayMode: 'inline' }, void 0), (0, jsx_runtime_1.jsx)("video", { ref: video, controls: false, autoPlay: true, style: { width: '100%', maxWidth: 300 } }, void 0), (0, jsx_runtime_1.jsx)(Box_1.default, (0, tslib_1.__assign)({ className: (0, typestyle_1.style)({ margin: '10px 0px' }) }, { children: (0, jsx_runtime_1.jsx)(UpButton_1.default, (0, tslib_1.__assign)({ onClick: takeImage, actionType: 'photo-camera', intent: 'primary' }, { children: currentLabels['takePicture'] }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("canvas", { className: "up-picture-wrapper " + pictureWrapperStyles, width: image ? image.width : width, height: image ? image.height : height, ref: function (c) {
picture.current = c;
if (picture.current && image) {
var context_1 = picture.current.getContext('2d');
var imageObj = new Image();
imageObj.onload = function () {
context_1.drawImage(this, 0, 0, image.width, image.height);
};
imageObj.src = image.data;
}
}, style: {
display: image ? 'inline-block' : 'none',
} }, void 0)] }), void 0))] }, void 0));
}
exports.default = UpPicture;
//# sourceMappingURL=UpPicture.js.map