@scaleflex/widget-webcam 4.8.6 → 4.8.7

package/lib/CameraScreen.js

@@ -0,0 +1,86 @@
+import { useEffect, useRef } from 'react';
+import { Photos, Video2 } from '@scaleflex/icons';
+import formatSeconds from '@scaleflex/widget-utils/lib/formatSeconds';
+import Styled from './Webcam.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function isModeAvailable(modes, mode) {
+  return modes.indexOf(mode) !== -1;
+}
+var CameraScreen = function CameraScreen(_ref) {
+  var showRecordingLength = _ref.showRecordingLength,
+    supportsRecording = _ref.supportsRecording,
+    modes = _ref.modes,
+    src = _ref.src,
+    mirror = _ref.mirror,
+    isRecording = _ref.isRecording,
+    recordingLengthSeconds = _ref.recordingLengthSeconds,
+    _ref$onSnapshot = _ref.onSnapshot,
+    onSnapshot = _ref$onSnapshot === void 0 ? function () {} : _ref$onSnapshot,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
+    _ref$onStop = _ref.onStop,
+    onStop = _ref$onStop === void 0 ? function () {} : _ref$onStop,
+    _ref$onStartRecording = _ref.onStartRecording,
+    onStartRecording = _ref$onStartRecording === void 0 ? function () {} : _ref$onStartRecording,
+    _ref$onStopRecording = _ref.onStopRecording,
+    onStopRecording = _ref$onStopRecording === void 0 ? function () {} : _ref$onStopRecording,
+    isRecordIconHidden = _ref.isRecordIconHidden;
+  var videoElement = useRef();
+  var formattedRecordingLengthSeconds = formatSeconds(recordingLengthSeconds);
+  var shouldShowRecordButton = supportsRecording && !isRecordIconHidden && (isModeAvailable(modes, 'video-only') || isModeAvailable(modes, 'audio-only') || isModeAvailable(modes, 'video-audio'));
+  var shouldShowSnapshotButton = isModeAvailable(modes, 'picture');
+  var shouldShowRecordingLength = supportsRecording && showRecordingLength && isRecording;
+  useEffect(function () {
+    onFocus();
+    return function () {
+      onStop();
+    };
+  }, []);
+  useEffect(function () {
+    if (videoElement !== null && videoElement !== void 0 && videoElement.current) {
+      videoElement.current.srcObject = src;
+    }
+  }, [src]);
+  var renderRecordingButton = function renderRecordingButton() {
+    if (isRecording) {
+      return /*#__PURE__*/_jsx(Styled.StopRecodingButton, {
+        onClick: onStopRecording,
+        children: /*#__PURE__*/_jsx(Styled.StopRecordingIcon, {})
+      });
+    }
+    return /*#__PURE__*/_jsx(Styled.IconButton, {
+      color: "primary",
+      onClick: onStartRecording,
+      children: /*#__PURE__*/_jsx(Video2, {
+        size: 26
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs(Styled.WebcamContainer, {
+    className: "filerobot filerobot-Webcam-container",
+    children: [/*#__PURE__*/_jsx(Styled.VideoContainer, {
+      className: "filerobot-Webcam-videoContainer",
+      children: /*#__PURE__*/_jsx(Styled.Video, {
+        ref: videoElement,
+        mirror: mirror,
+        autoPlay: true,
+        className: "filerobot-Webcam-video",
+        muted: true,
+        playsInline: true
+      })
+    }), /*#__PURE__*/_jsxs(Styled.ButtonsContainer, {
+      className: "filerobot-Webcam-buttonContainer",
+      children: [shouldShowRecordingLength && /*#__PURE__*/_jsxs(Styled.RecordingLengthContainer, {
+        children: [/*#__PURE__*/_jsx(Styled.RecordingIcon, {}), formattedRecordingLengthSeconds || '00:00']
+      }), shouldShowSnapshotButton && /*#__PURE__*/_jsx(Styled.IconButton, {
+        color: "primary",
+        onClick: onSnapshot,
+        hidden: isRecording,
+        children: /*#__PURE__*/_jsx(Photos, {
+          size: 26
+        })
+      }), shouldShowRecordButton && renderRecordingButton()]
+    })]
+  });
+};
+export default CameraScreen;

package/lib/PermissionsScreen.js

@@ -0,0 +1,26 @@
+import { CameraNotAvailable, CameraNoAccess } from '@scaleflex/icons';
+import Styled from './Webcam.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var PermissionsScreen = function PermissionsScreen(_ref) {
+  var hasCamera = _ref.hasCamera,
+    i18n = _ref.i18n;
+  return /*#__PURE__*/_jsxs(Styled.PermissonsWrapper, {
+    className: "filerobot-Webcam-permissons",
+    children: [/*#__PURE__*/_jsx(Styled.IconWrapper, {
+      children: hasCamera ? /*#__PURE__*/_jsx(CameraNotAvailable, {
+        className: "filerobot-Webcam-permissonsIcon",
+        size: 100
+      }) : /*#__PURE__*/_jsx(CameraNoAccess, {
+        className: "filerobot-Webcam-permissonsIcon",
+        size: 100
+      })
+    }), /*#__PURE__*/_jsx(Styled.Title, {
+      className: "filerobot-Webcam-title",
+      children: hasCamera ? i18n('webcamAllowAccessTitle') : i18n('webcamNoCameraAvailableText')
+    }), /*#__PURE__*/_jsx(Styled.Description, {
+      className: "filerobot-Webcam-description",
+      children: hasCamera ? i18n('webcamAllowAccessDescriptionText') : i18n('webcamNoCameraDescriptionText')
+    })]
+  });
+};
+export default PermissionsScreen;

package/lib/Webcam.styled.js

@@ -0,0 +1,78 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { keyframes, css } from 'styled-components';
+import { IconButton as SfxIconButton } from '@scaleflex/ui/core';
+import { FV, PC } from '@scaleflex/widget-common';
+var pluseKeyframes = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(0.95);\n    box-shadow: 0 0 0 0 rgba(246, 61, 61, 0.7);\n  }\n\n  70% {\n    transform: scale(1);\n    box-shadow: 0 0 0 10px rgba(246, 61, 61, 0);\n  }\n\n  100% {\n    transform: scale(0.95);\n    box-shadow: 0 0 0 0 rgba(246, 61, 61, 0);\n  }\n"])));
+var PulseAnimation = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  animation: ", " 2s infinite;\n"])), pluseKeyframes);
+var WebcamContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n"])));
+var VideoContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  flex: 1;\n  flex-grow: 1;\n  overflow: hidden;\n  position: relative;\n  padding: 24px;\n  background-color: ", ";\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.BackgroundActive];
+});
+var Video = styled.video(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-width: calc(100% - 48px);\n  max-height: calc(100% - 48px);\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  margin: auto;\n  transform: ", ";\n"])), function (_ref2) {
+  var mirror = _ref2.mirror;
+  return mirror ? 'scaleX(-1)' : 'scaleX  (1)';
+});
+var ButtonsContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100px;\n  padding: 24px 32px;\n  column-gap: 12px;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  border-top: 1px solid ", ";\n"])), function (_ref3) {
+  var palette = _ref3.theme.palette;
+  return palette[PC.BordersSecondary];
+});
+var IconButton = styled(SfxIconButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 52px;\n  height: 52px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  padding: 0;\n  transition: all 300ms ease-in-out;\n"])));
+var StopRecodingButton = styled(IconButton)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  border: 0;\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref4) {
+  var palette = _ref4.theme.palette;
+  return palette[PC.Error];
+}, function (_ref5) {
+  var palette = _ref5.theme.palette;
+  return palette[PC.ErrorHover];
+});
+var StopRecordingIcon = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 17.88px;\n  height: 17.88px;\n  border-radius: 2px;\n  background-color: ", ";\n"])), function (_ref6) {
+  var palette = _ref6.theme.palette;
+  return palette[PC.BackgroundSecondary];
+});
+var RecordingIcon = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: 14px;\n  height: 14px;\n  background-color: ", ";\n  border-radius: 50%;\n  ", "\n"])), function (_ref7) {
+  var palette = _ref7.theme.palette;
+  return palette[PC.Error];
+}, PulseAnimation);
+var PermissonsWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  padding: 0 32px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  row-gap: 8px;\n"])));
+var IconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  width: 100px;\n  height: 100px;\n  color: ", ";\n"])), function (_ref8) {
+  var palette = _ref8.theme.palette;
+  return palette[PC.BackgroundPrimaryStateless];
+});
+var Title = styled.p(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: 24px;\n  color: ", ";\n  ", ";\n"])), function (_ref9) {
+  var palette = _ref9.theme.palette;
+  return palette[PC.TextPrimary];
+}, function (_ref10) {
+  var typography = _ref10.theme.typography;
+  return typography.font[FV.LabelExtraLarge];
+});
+var Description = styled.p(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin: 0;\n  width: 408px;\n  text-align: center;\n  ", ";\n  color: ", ";\n"])), function (_ref11) {
+  var typography = _ref11.theme.typography;
+  return typography.font[FV.TextLarge];
+}, function (_ref12) {
+  var palette = _ref12.theme.palette;
+  return palette[PC.TextSecondary];
+});
+var RecordingLengthContainer = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 124px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 4%;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  column-gap: 12px;\n  font-size: 24px;\n  line-height: 28px;\n  font-weight: 500;\n  min-width: 119px;\n  height: 52px;\n"])), function (_ref13) {
+  var palette = _ref13.theme.palette;
+  return palette[PC.ButtonPrimaryText];
+}, function (_ref14) {
+  var palette = _ref14.theme.palette;
+  return palette[PC.Extra_0_9_Overlay];
+});
+var Styled = {
+  WebcamContainer: WebcamContainer,
+  VideoContainer: VideoContainer,
+  Video: Video,
+  ButtonsContainer: ButtonsContainer,
+  IconButton: IconButton,
+  PermissonsWrapper: PermissonsWrapper,
+  IconWrapper: IconWrapper,
+  Title: Title,
+  Description: Description,
+  StopRecodingButton: StopRecodingButton,
+  StopRecordingIcon: StopRecordingIcon,
+  RecordingIcon: RecordingIcon,
+  RecordingLengthContainer: RecordingLengthContainer
+};
+export default Styled;

package/lib/common.slice.js

@@ -0,0 +1,30 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { createSlice } from '@reduxjs/toolkit';
+import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+var initialState = {
+  cameraReady: false,
+  hasCamera: null,
+  cameraError: null,
+  recordingLengthSeconds: 0,
+  isRecording: false
+};
+var commonSlice = createSlice({
+  name: PLUGINS_IDS.WEBCAM,
+  initialState: initialState,
+  reducers: {
+    webcamCommonStateUpdated: function webcamCommonStateUpdated(state, action) {
+      return _objectSpread(_objectSpread({}, state), action.payload);
+    }
+  }
+});
+var webcamCommonStateUpdated = commonSlice.actions.webcamCommonStateUpdated;
+export { webcamCommonStateUpdated };
+export var selectWebcamCommonState = function selectWebcamCommonState(state) {
+  return state[PLUGINS_IDS.WEBCAM];
+};
+export default commonSlice.reducer;

package/lib/defaultLocale.js

@@ -0,0 +1,13 @@
+export default {
+  webcamSmileInfo: 'Smile!',
+  webcamTakePictureTitle: 'Take a picture',
+  webcamStartRecordingTitle: 'Begin video recording',
+  webcamStopRecordingTitle: 'Stop video recording',
+  webcamAllowAccessTitle: 'Please allow access to your camera',
+  webcamAllowAccessDescriptionText: 'In order to take pictures or record video with your camera, please allow camera access for this site.',
+  webcamNoCameraAvailableText: 'Camera Not Available',
+  webcamNoCameraDescriptionText: 'In order to take pictures or record video, please connect a camera device',
+  webcamRecordingStoppedMaxSizeInfo: 'Recording stopped because the file size is about to exceed the limit',
+  webcamRecordingLengthLabel: 'Recording length %{recording_length}',
+  webcamWaitFewSecsAndTryInfo: 'Preparing camera, please wait few seconds and click record again'
+};