@nyris/nyris-webapp 0.3.46 → 0.3.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.46",
+  "version": "0.3.47",
   "homepage": "./",
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
@@ -13,8 +13,8 @@
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "^0.3.46",
-    "@nyris/nyris-react-components": "^0.3.46",
+    "@nyris/nyris-api": "^0.3.47",
+    "@nyris/nyris-react-components": "^0.3.47",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",
@@ -57,7 +57,7 @@
     "react-scripts": "^3.4.1",
     "react-select": "^5.2.2",
     "react-table": "^7.7.0",
-    "react-webcam": "^7.0.1",
+    "react-webcam": "^7.2.0",
     "redux": "^4.0.4",
     "redux-observable": "^1.1.0",
     "redux-thunk": "^2.4.1",

package/src/components/ImagePreviewMobile.tsx

@@ -41,7 +41,6 @@ function ImagePreviewMobileComponent({
   const { t } = useTranslation();
   const { refine }: any = rest;
   const [editActive, setEditActive] = useState(false);
-  const [showShrinkAnimation, setShrinkAnimation] = useState(false);
   const settings = useAppSelector(state => state.settings);
   const { preFilter } = useAppSelector(state => state.search);
   const isAlgoliaEnabled = settings.algolia?.enabled;
@@ -51,7 +50,6 @@ function ImagePreviewMobileComponent({
 
   const handleArrowClick = () => {
     setEditActive(s => !s);
-    setShrinkAnimation(true);
   };
 
   const searchQuery = query.get('query') || '';
@@ -117,12 +115,14 @@ function ImagePreviewMobileComponent({
         marginBottom: '15px',
       }}
     >
-      {editActive && (
-        <div>
-          <Box className="box-preview">
-            <Box
-              className="preview-item expand-animation"
-              style={{ backgroundColor: 'transparent' }}
+      <div>
+        <Box className="box-preview">
+          <Box>
+            <div
+              className="preview-item"
+              style={{
+                backgroundColor: 'transparent',
+              }}
             >
               <Preview
                 key={requestImage?.id}
@@ -133,104 +133,51 @@ function ImagePreviewMobileComponent({
                 image={requestImage?.canvas}
                 selection={imageSelection || DEFAULT_REGION}
                 regions={filteredRegions}
-                maxWidth={240}
-                maxHeight={240}
-                dotColor={'#FBD914'}
-                minCropWidth={60}
-                minCropHeight={60}
+                minWidth={80}
+                minHeight={80}
+                maxWidth={255}
+                maxHeight={255}
+                dotColor={editActive ? '#FBD914' : ''}
+                minCropWidth={editActive ? 60 : 5}
+                minCropHeight={editActive ? 60 : 5}
                 rounded={false}
-                expandAnimation={true}
-              />
-            </Box>
-            {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
-              <Box
-                className="box-title_col-left"
-                alignItems="center"
-                style={{
-                  backgroundColor: '#3E36DC',
-                  display: 'flex',
-                  columnGap: '6px',
-                  padding: '5px',
-                  width: 'fit-content',
+                expandAnimation={editActive}
+                shrinkAnimation={!editActive}
+                onExpand={() => {
+                  setEditActive(true);
                 }}
-              >
-                <IconInfo color="white" />
-                <Typography
-                  style={{
-                    fontSize: 10,
-                    color: '#fff',
-                  }}
-                >
-                  {showAdjustInfo
-                    ? t('Crop the image for better results')
-                    : 'Crop the image for better results'}
-                </Typography>
-              </Box>
-            )}
+                showGrip={editActive}
+              />
+            </div>
           </Box>
-          <Hidden>
-            <Box
-              sx={{
-                position: 'absolute',
-                left: '15px',
-                top: '25px',
-                padding: '4px',
-              }}
-              onClick={onImageRemove}
-            >
-              <Box
-                sx={{
-                  width: '24px',
-                  height: '24px',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  display: 'flex',
-                  borderRadius: '100%',
-                }}
-              >
-                <Trash color="white" fill="white" />
-              </Box>
-            </Box>
-          </Hidden>
-
-          <Hidden mdUp>
+          {(showAdjustInfoBasedOnConfidence || showAdjustInfo) && (
             <Box
-              className="slideDown"
-              sx={{
-                position: 'absolute',
-                bottom: '25px',
-                right: '20px',
+              className="box-title_col-left"
+              alignItems="center"
+              style={{
+                backgroundColor: '#3E36DC',
+                display: 'flex',
+                columnGap: '6px',
+                padding: '5px',
+                width: 'fit-content',
+                minWidth: '180px',
               }}
-              onClick={handleArrowClick}
             >
-              <Box
-                bgcolor={'white'}
-                sx={{
-                  width: '24px',
-                  height: '24px',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  display: 'flex',
-                  borderRadius: '100%',
+              <IconInfo color="white" />
+              <Typography
+                style={{
+                  fontSize: 10,
+                  color: '#fff',
                 }}
               >
-                <ArrowUp color="black" />
-              </Box>
+                {showAdjustInfo
+                  ? t('Crop the image for better results')
+                  : 'Crop the image for better results'}
+              </Typography>
             </Box>
-          </Hidden>
-        </div>
-      )}
-      {!editActive && (
-        <Box
-          className={showShrinkAnimation ? 'shrink-animation' : ''}
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: 80,
-            width: '100%',
-          }}
-        >
+          )}
+        </Box>
+        <>
           <Hidden>
             <Box
               sx={{
@@ -242,7 +189,6 @@ function ImagePreviewMobileComponent({
               onClick={onImageRemove}
             >
               <Box
-                // className={showShrinkAnimation ? 'slideUp' : ''}
                 sx={{
                   width: '24px',
                   height: '24px',
@@ -256,49 +202,19 @@ function ImagePreviewMobileComponent({
               </Box>
             </Box>
           </Hidden>
-          <Box
-            sx={{
-              display: 'flex',
-              height: '100%',
-              width: '100%',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-            onClick={handleArrowClick}
-          >
-            {requestImage && requestImage?.canvas?.toDataURL && (
-              <img
-                src={requestImage?.canvas?.toDataURL()}
-                style={{
-                  width: '80px',
-                  height: '80px',
-                  objectFit: 'contain',
-                  background: 'white',
-                }}
-                alt="preview"
-              />
-            )}
 
-            <div
-              className={
-                showShrinkAnimation
-                  ? 'shrink-animation circle-layer'
-                  : 'circle-layer'
-              }
-            ></div>
-          </Box>
           <Hidden mdUp>
             <Box
+              className="slideDown"
               sx={{
                 position: 'absolute',
-                right: '25px',
-                padding: '4px',
+                bottom: '25px',
+                right: '20px',
               }}
               onClick={handleArrowClick}
             >
               <Box
                 bgcolor={'white'}
-                className={showShrinkAnimation ? 'slideUp' : ''}
                 sx={{
                   width: '24px',
                   height: '24px',
@@ -308,12 +224,13 @@ function ImagePreviewMobileComponent({
                   borderRadius: '100%',
                 }}
               >
-                <ArrowDown color="black" fill="black" />
+                {editActive && <ArrowUp color="black" />}
+                {!editActive && <ArrowDown color="black" fill="black" />}
               </Box>
             </Box>
           </Hidden>
-        </Box>
-      )}
+        </>
+      </div>
     </Box>
   );
 }

package/src/components/Inquiry/InquiryBanner.tsx

@@ -6,6 +6,7 @@ import InquiryModal from './InquiryModal';
 import { useAppSelector } from 'Store/Store';
 import { ReactComponent as EmailIcon } from 'common/assets/icons/icon_email.svg';
 import { ReactComponent as CallIcon } from 'common/assets/icons/call.svg';
+import { useTranslation } from 'react-i18next';
 
 function InquiryBanner({
   requestImage,
@@ -31,6 +32,8 @@ function InquiryBanner({
   const { secondaryColor } =
     useAppSelector(state => state.settings.theme) || {};
 
+  const { t } = useTranslation();
+
   return (
     <>
       {isInquiryModalOpen && (
@@ -94,8 +97,8 @@ function InquiryBanner({
                 }}
               >
                 {isMobile
-                  ? 'No matches found?'
-                  : 'No matches found for your request?'}
+                  ? `${t('No matches found')}?`
+                  : `${t('No matches found for your request')}?`}
               </Box>
               <Box
                 style={{

package/src/components/SidePanel.tsx

@@ -82,28 +82,35 @@ function SidePanel({
               >
                 <div
                   style={{
+                    display: 'flex',
+                    justifyContent: 'center',
                     backgroundColor: '#F3F3F5',
                     width: '100%',
                     paddingTop: '16px',
                     paddingBottom: '16px',
                   }}
                 >
-                  <Preview
-                    key={requestImage?.id}
-                    onSelectionChange={(r: RectCoords) => {
-                      setImageSelection(r);
-                      debouncedOnImageSelectionChange(r);
+                  <div
+                    style={{
+                      width: '288px',
+                      height: 'fit-content',
                     }}
-                    image={requestImage?.canvas}
-                    selection={imageSelection || DEFAULT_REGION}
-                    regions={filteredRegions}
-                    maxWidth={288}
-                    maxHeight={288}
-                    dotColor={'#FBD914'}
-                    minCropWidth={60}
-                    minCropHeight={60}
-                    rounded={true}
-                  />
+                  >
+                    <Preview
+                      key={requestImage?.id}
+                      onSelectionChange={(r: RectCoords) => {
+                        setImageSelection(r);
+                        debouncedOnImageSelectionChange(r);
+                      }}
+                      image={requestImage?.canvas}
+                      selection={imageSelection || DEFAULT_REGION}
+                      regions={filteredRegions}
+                      dotColor={'#FBD914'}
+                      minCropWidth={60}
+                      minCropHeight={60}
+                      rounded={true}
+                    />
+                  </div>
                 </div>
               </Box>
             </Box>

package/src/components/appMobile.scss

@@ -514,6 +514,12 @@
 
       video {
         overflow: hidden;
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        min-width: 100%;
+        min-height: 100%;
+
       }
     }
 
@@ -706,6 +712,7 @@
     border-radius: 100%;
     padding: 30px;  
     .outer {
+      display: block;
       border-radius: 100%;
       padding: 3px;
       background: linear-gradient(180deg, #AAABB5 0%, #FFFFFF 100%);

package/src/components/drawer/cameraCustom.tsx

@@ -6,7 +6,6 @@ import { RectCoords } from '@nyris/nyris-api';
 import ReverseCamera from 'common/assets/icons/reverse_camera.svg';
 import { isEmpty } from 'lodash';
 import React, { useCallback, useRef, useState } from 'react';
-import { useDropzone } from 'react-dropzone';
 import { useHistory } from 'react-router-dom';
 import Webcam from 'react-webcam';
 import { createImage, find, findRegions } from 'services/image';
@@ -43,9 +42,9 @@ function CameraCustom(props: Props) {
 
   const videoConstraints = {
     width: 1080,
-    height: 1080,
-    aspectRatio: 1.33333333333,
+    aspectRatio: 1.11111,
   };
+
   const handleClick = useCallback(() => {
     setFacingMode(prevState =>
       prevState === FACING_MODE_USER
@@ -63,7 +62,6 @@ function CameraCustom(props: Props) {
     let region: RectCoords | undefined;
     let imageConvert = await createImage(image);
     dispatch(setRequestImage(imageConvert));
-    dispatch(setImageSearchInput(image));
     dispatch(onToggleModalItemDetail(false));
     handlerCloseModal();
 
@@ -114,60 +112,6 @@ function CameraCustom(props: Props) {
     onToggleModal();
   };
 
-  const { getInputProps } = useDropzone({
-    onDrop: async (fs: File[]) => {
-      let payload: any;
-      let filters: any[] = [];
-      let region: RectCoords | undefined;
-      dispatch(updateStatusLoading(true));
-      dispatch(setImageSearchInput(URL.createObjectURL(fs[0])));
-      let image = await createImage(fs[0]);
-      dispatch(setRequestImage(image));
-      if (settings.regions) {
-        let res = await findRegions(image, settings);
-        dispatch(setRegions(res.regions));
-        region = res.selectedRegion;
-        dispatch(setSelectedRegion(region));
-      }
-
-      const preFilterValues = [
-        {
-          key: settings.visualSearchFilterKey,
-          values: Object.keys(preFilter) as string[],
-        },
-      ];
-      return find({
-        image,
-        settings,
-        filters: !isEmpty(preFilter) ? preFilterValues : undefined,
-        region,
-      })
-        .then((res: any) => {
-          res?.results.map((item: any) => {
-            filters.push({
-              sku: item.sku,
-              score: item.score,
-            });
-          });
-          payload = {
-            ...res,
-            filters,
-          };
-          dispatch(setSearchResults(payload));
-          setTimeout(() => {
-            dispatch(updateStatusLoading(false));
-            handlerCloseModal();
-            history.push('/result');
-          }, 500);
-        })
-        .catch((e: any) => {
-          console.log('err camera_custom', e);
-          dispatch(updateStatusLoading(false));
-          handlerCloseModal();
-        });
-    },
-  });
-
   return (
     <Box className="box-camera-custom">
       <Drawer
@@ -222,6 +166,7 @@ function CameraCustom(props: Props) {
                   onClick={() => {
                     const imageSrc = getScreenshot();
                     handlerFindImage(imageSrc);
+                    dispatch(setImageSearchInput(imageSrc));
                   }}
                   className="btn-capture-camera"
                 >
@@ -285,12 +230,17 @@ function CameraCustom(props: Props) {
               id="icon-button-file"
               type="file"
               style={{ display: 'none' }}
-              {...getInputProps({
-                accept: 'image/png,image/jpeg',
-                onClick: e => {
-                  e.stopPropagation();
-                },
-              })}
+              onChange={(fs: any) => {
+                const file = fs.target?.files[0];
+                if (!file) return;
+                dispatch(setImageSearchInput(URL.createObjectURL(file)));
+                handlerFindImage(file);
+              }}
+              accept="image/jpeg,image/png,image/webp"
+              onClick={event => {
+                // @ts-ignore
+                event.target.value = '';
+              }}
             />
             <label htmlFor="icon-button-file">
               <IconButton

package/src/translations.ts

@@ -25,6 +25,8 @@ export const translations = {
         'No products were found matching your search criteria.',
       'Please upload an image or enter a keyword to search.':
         'Please upload an image or enter a keyword to search.',
+      'No matches found': 'No matches found',
+      'No matches found for your request': 'No matches found for your request',
     },
   },
   de: {
@@ -53,6 +55,9 @@ export const translations = {
         'Keine Produkte entsprechen Ihren Suchkriterien.',
       'Please upload an image or enter a keyword to search.':
         'Für die Suche bitte Bild hochladen oder Stichwort eingeben.',
+      'No matches found': 'Keine Treffer für Ihre Anfrage gefunden',
+      'No matches found for your request':
+        'Keine Treffer für Ihre Anfrage gefunden',
     },
   },
   pt: {
@@ -82,6 +87,8 @@ export const translations = {
         'Nenhum produto foi encontrado com estes critérios ',
       'Please upload an image or enter a keyword to search.':
         'Faça o upload de uma imagem ou busque via texto',
+      'No matches found': 'No matches found',
+      'No matches found for your request': 'No matches found for your request',
     },
   },
 };