reza added qr scanner

package.json

@@ -71,6 +71,7 @@
     "react-dom": "^17.0.2",
     "react-elastic-carousel": "^0.11.5",
     "react-player": "^2.9.0",
+    "react-qr-reader": "^2.2.1",
     "react-qr-scanner": "^1.0.0-alpha.7",
     "react-redux": "^7.2.4",
     "react-refresh": "^0.8.3",

src/views/Auth/Login/index.js

@@ -19,7 +19,7 @@ class Login extends Component {
   async componentDidUpdate() {
     const { cellphone, otp, page } = this.state;
     if (cellphone && !otp) this.props.otp({ cellphone });
-    if (page && cellphone && otp) this.props.otp_login({ cellphone : cellphone, otp:  Number(otp) });
+    if (page && cellphone && otp) this.props.otp_login({ cellphone, otp });
   }
 
   resend = () => {

src/views/QR/VideoBox/React-video-js-player/index.scss

@@ -1,36 +1,34 @@
-.video-js{
+.video-js {
   width: 100% !important;
   height: 100% !important;
   border-radius: 20px;
-  button{
-    &:focus{
+  button {
+    &:focus {
       outline: none !important;
     }
   }
-  .vjs-tech{
-    border-radius: 20px;
+  .vjs-tech {
+    border-radius: 20px !important;
   }
-  .vjs-big-play-button{
-    font-size: 3.3em;
-    width: 50px;
-    height: 48px;
-    transform: translateX(25px);
-    background-color: #37D386;
-    border-radius: 50%;
-    border: 0px;
+  .vjs-big-play-button {
+    font-size: 3.3em !important;
+    width: 50px !important;
+    height: 48px !important;
+    transform: translateX(25px) !important;
+    background-color: #37d386 !important;
+    border-radius: 50% !important;
+    border: 0px !important;
   }
-  .vjs-control-bar{
+  .vjs-control-bar {
     direction: ltr !important;
-    border-bottom-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-    .vjs-progress-control{
-      border-bottom-left-radius: 20px;
-      border-bottom-right-radius: 20px;
+    border-bottom-left-radius: 20px !important;
+    border-bottom-right-radius: 20px !important;
+    .vjs-progress-control {
+      border-bottom-left-radius: 20px !important;
+      border-bottom-right-radius: 20px !important;
       & > * {
         direction: ltr !important;
-        
       }
     }
-    
   }
-}
+}

src/views/QRScan/Scanner/index.js

@@ -1,42 +1,36 @@
-import React, { Component } from 'react'
-import QrReader from 'react-qr-scanner'
+import React, { Component } from "react";
+import QrReader from "react-qr-reader";
 
 export default class Scanner extends Component {
-  constructor(props){
-    super(props)
+  constructor(props) {
+    super(props);
     this.state = {
       delay: 100,
-      result: '',
-    }
+      result: "",
+    };
 
-    this.handleScan = this.handleScan.bind(this)
+    this.handleScan = this.handleScan.bind(this);
   }
-  handleScan(data){
+  handleScan(data) {
     this.props.parent.setState({
       value: data,
-    })
+    });
   }
 
-  handleError(err){
-    console.error(err)
+  handleError(err) {
+    console.error(err);
   }
-  render(){
-    const previewStyle = {
-      width: 320,
-      borderRadius: '10px'
-    }
-
-    return(
+  render() {
+    return (
       <>
         <QrReader
-          delay={this.state.delay}
-          style={previewStyle}
+          delay={300}
           onError={this.handleError}
           onScan={this.handleScan}
-          legacyMode={true}
-          facingMode={'user'}
-          />
+          style={{ width: "100%" }}
+          facingMode={this.props.parent.state.facingMode}
+        />
       </>
-    )
+    );
   }
-}
+}

src/views/QRScan/index.js

@@ -12,6 +12,7 @@ import "./index.scss";
 export default class QRScan extends Component {
   state = {
     value: null,
+    facingMode: "environment",
   };
   render() {
     const { data } = this.props;
@@ -39,12 +40,23 @@ export default class QRScan extends Component {
                   قرار دهید تا اسکن دوربین انجام شود
                 </p>
               </header>
+              <div className="mobile-qr-scan__select d-flex">
+                <select
+                  onChange={(e) =>
+                    this.setState({ facingMode: e.target.value })
+                  }
+                >
+                  <option value="environment">دوربین عقب</option>
+                  <option value="user">دوربین جلو</option>
+                </select>
+              </div>
+
               <section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center">
-                <div className="mobile-qr-scan__camera--shapeTop mobile-qr-scan__camera--shape d-flex"></div>
+                {/* <div className="mobile-qr-scan__camera--shapeTop mobile-qr-scan__camera--shape d-flex"></div>
                 <div className="mobile-qr-scan__camera--shapeBottom mobile-qr-scan__camera--shape d-flex"></div>
                 <div className="mobile-qr-scan__camera--shapeLeft mobile-qr-scan__camera--shape d-flex"></div>
                 <div className="mobile-qr-scan__camera--shapeRight mobile-qr-scan__camera--shape d-flex"></div>
-                <div className="mobile-qr-scan__camera--shapeCenter d-flex"></div>
+                <div className="mobile-qr-scan__camera--shapeCenter d-flex"></div> */}
                 {this.state.value !== null ? (
                   <div
                     style={{ zIndex: 1000 }}

src/views/QRScan/index.scss

@@ -4,7 +4,7 @@
   margin: 0px auto;
   padding: 0px 10px 40px;
   direction: rtl;
-  padding-top: 70px;
+  padding-top: 90px;
   overflow-x: hidden;
   &__back {
     justify-content: flex-end;
@@ -37,10 +37,28 @@
       font-size: calc(100vw / 28);
     }
   }
+  &__select {
+    select {
+      margin-top: 10px;
+      border-radius: 4px;
+      position: relative;
+      background-color: #efefef;
+      border: 1px solid #a5a5a5;
+      font-size: 16px;
+      color: black;
+      // maxWidth : 70;
+      min-width: 80;
+      height: 35px;
+      padding: 5px;
+      font-family: numeralLight;
+      &:focus {
+        border-radius: 4;
+      }
+    }
+  }
   &__camera {
     margin-top: 20px;
-    width: 320px;
-    height: 245px;
+    width: 100%;
     border-radius: 10px;
     margin: 30px auto;
     position: relative;

yarn.lock

@@ -7405,6 +7405,11 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsqr@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/jsqr/-/jsqr-1.4.0.tgz#8efb8d0a7cc6863cb6d95116b9069123ce9eb2d1"
+  integrity sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==
+
 jss-plugin-camel-case@^10.5.1:
   version "10.6.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.6.0.tgz#93d2cd704bf0c4af70cc40fb52d74b8a2554b170"
@@ -9995,6 +10000,15 @@ react-player@^2.9.0:
     prop-types "^15.7.2"
     react-fast-compare "^3.0.1"
 
+react-qr-reader@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-qr-reader/-/react-qr-reader-2.2.1.tgz#dc89046d1c1a1da837a683dd970de5926817d55b"
+  integrity sha512-EL5JEj53u2yAOgtpAKAVBzD/SiKWn0Bl7AZy6ZrSf1lub7xHwtaXe6XSx36Wbhl1VMGmvmrwYMRwO1aSCT2fwA==
+  dependencies:
+    jsqr "^1.2.0"
+    prop-types "^15.7.2"
+    webrtc-adapter "^7.2.1"
+
 react-qr-scanner@^1.0.0-alpha.7:
   version "1.0.0-alpha.7"
   resolved "https://registry.yarnpkg.com/react-qr-scanner/-/react-qr-scanner-1.0.0-alpha.7.tgz#f63993cffe238f8cbca4984d03973accc842500b"
@@ -10591,6 +10605,13 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
+rtcpeerconnection-shim@^1.2.15:
+  version "1.2.15"
+  resolved "https://registry.yarnpkg.com/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz#e7cc189a81b435324c4949aa3dfb51888684b243"
+  integrity sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==
+  dependencies:
+    sdp "^2.6.0"
+
 run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -10748,6 +10769,11 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+sdp@^2.12.0, sdp@^2.6.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/sdp/-/sdp-2.12.0.tgz#338a106af7560c86e4523f858349680350d53b22"
+  integrity sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw==
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -12339,6 +12365,14 @@ webpack@^4.26.1:
     watchpack "^1.7.4"
     webpack-sources "^1.4.1"
 
+webrtc-adapter@^7.2.1:
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz#b2c227a6144983b35057df67bd984a7d4bfd17f1"
+  integrity sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A==
+  dependencies:
+    rtcpeerconnection-shim "^1.2.15"
+    sdp "^2.12.0"
+
 websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"