camera feature detection

react/src/components/dashboard/qrModal/qrModal.js

@@ -13,7 +13,7 @@ class QRModal extends React.Component {
     super(props);
     this.state = {
       modalIsOpen: false,
-      error: ''
+      error: null,
     };
     this.openModal = this.openModal.bind(this);
     this.closeModal = this.closeModal.bind(this);
@@ -21,7 +21,7 @@ class QRModal extends React.Component {
     this.handleError = this.handleError.bind(this);
     document.body.addEventListener('click', this.closeModal);
   }
-  
+
   handleScan(data) {
     if (data !== null) {
       if (this.props.mode === 'scan') {
@@ -32,23 +32,35 @@ class QRModal extends React.Component {
   }
 
   handleError(err) {
-    this.setState({error: err});
+    this.setState({
+      error: err,
+    });
   }
 
   openModal() {
-    this.setState({modalIsOpen: true});
+    this.setState({
+      modalIsOpen: true
+    });
+
     if (this.props.mode === 'scan') {
       ReactDOM.render(
-        <QrReader 
+        <QrReader
-          delay={50} 
+          delay={50}
-          style={{ height: 281, width: 500, transform: 'scaleX(-1)' }} 
+          style={{
-          onError={this.handleError} 
+            height: 281,
-          onScan={this.handleScan} />, document.getElementById('webcam'));
+            width: 500,
+            transform: 'scaleX(-1)'
+          }}
+          onError={ this.handleError }
+          onScan={ this.handleScan } />, document.getElementById('webcam'));
     }
   }
 
   closeModal() {
-    this.setState({modalIsOpen: false});
+    this.setState({
+      modalIsOpen: false,
+    });
+
     if (this.props.mode === 'scan') {
       ReactDOM.unmountComponentAtNode(document.getElementById('webcam'));
     }

react/src/components/dashboard/qrModal/qrModal.render.js

@@ -7,35 +7,29 @@ export const QRModalRender = function () {
     <span>
       <span className="label label-default margin-left-10 action"
         title={ translate('INDEX.QRCODE') }
-        onClick={this.openModal}>
+        onClick={ this.openModal }>
-        <i className="icon fa-qrcode" aria-hidden="true"></i>
+        <i className="icon fa-qrcode"></i>
       </span>
       <div
         className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
-        id="QRModal"
+        id="QRModal">
-        aria-hidden="true"
-        aria-labelledby="QRModal"
-        role="dialog"
-        tabIndex="-1">
         <div className="modal-dialog modal-center modal-sm">
           <div className="modal-content">
             <div className="modal-header bg-orange-a400 wallet-send-header">
               <button
                 type="button"
                 className="close white"
-                aria-label="Close"
                 onClick={ this.closeModal }>
-                <span aria-hidden="true">×</span>
+                <span>×</span>
               </button>
               <h4 className="modal-title white text-left">{ translate('INDEX.SCAN_QR_CODE') }</h4>
             </div>
             <div className="modal-body">
               <div className="animsition vertical-align fade-in">
                 <div className="page-content vertical-align-middle">
-                  <QRCode 
+                  <QRCode
-                    value={this.props.content}
+                    value={ this.props.content }
-                    size={198}
+                    size={ 198 } />
-                  />
                 </div>
               </div>
             </div>
@@ -52,25 +46,21 @@ export const QRModalReaderRender = function () {
     <span>
       <button type="button"
         className="btn btn-default"
-        onClick={this.openModal}>
+        onClick={ this.openModal }>
-        <i className="icon fa-qrcode" aria-hidden="true"></i>
+        <i className="icon fa-qrcode"></i>
         { translate('INDEX.SCAN_QRCODE_WEBCAM') }
       </button>
-      <div className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
+      <div
-        id="QRReadModal"
+        className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
-        aria-hidden="true"
+        id="QRReadModal">
-        aria-labelledby="QRReadModal"
-        role="dialog"
-        tabIndex="-1">
           <div className="modal-dialog modal-center modal-md">
             <div className="modal-content">
               <div className="modal-header bg-orange-a400 wallet-send-header">
                 <button
                   type="button"
                   className="close white"
-                  aria-label="Close"
                   onClick={ this.closeModal }>
-                  <span aria-hidden="true">×</span>
+                  <span>×</span>
                 </button>
                 <h4 className="modal-title white text-left">{ translate('INDEX.SCAN_QRCODE_WEBCAM') }</h4>
               </div>
@@ -78,7 +68,7 @@ export const QRModalReaderRender = function () {
                 <div className="animsition vertical-align fade-in">
                   <div className="page-content vertical-align-middle">
                     <div id="webcam">
-                      {this.state.error}
+                      { this.state.error }
                     </div>
                   </div>
                 </div>

react/src/components/dashboard/sendCoin/sendCoin.js

@@ -55,6 +55,7 @@ class SendCoin extends React.Component {
       currentStackLength: 0,
       totalStackLength: 0,
       utxoMethodInProgress: false,
+      isCameraFeatureDetected: false,
     };
     this.updateInput = this.updateInput.bind(this);
     this.handleBasiliskSend = this.handleBasiliskSend.bind(this);
@@ -65,14 +66,33 @@ class SendCoin extends React.Component {
     this._fetchNewUTXOData = this._fetchNewUTXOData.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
     this.setRecieverFromScan = this.setRecieverFromScan.bind(this);
+    this.detectCamera = this.detectCamera.bind(this);
     socket.on('messages', msg => this.updateSocketsData(msg));
   }
 
+  // test device camera capabilities
+  detectCamera() {
+    const _getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
+
+    _getUserMedia(
+      { 'video': true },
+      function() {
+        this.setState({
+          isCameraFeatureDetected: true,
+        });
+      },
+      function() {
+        console.warn('this device doesn\'t have camera!');
+      }
+    );
+  }
+
   setRecieverFromScan(receiver) {
     this.setState({
       sendTo: receiver
     });
-    document.getElementById('edexcoinSendTo').focus()
+
+    document.getElementById('edexcoinSendTo').focus();
   }
 
   componentWillMount() {
@@ -81,6 +101,8 @@ class SendCoin extends React.Component {
       this.handleClickOutside,
       false
     );
+
+    this.detectCamera();
   }
 
   componentWillUnmount() {
@@ -181,7 +203,7 @@ class SendCoin extends React.Component {
         this,
         refreshCacheData,
         isReadyToUpdate,
-        waitUntilCallIsFinished,  
+        waitUntilCallIsFinished,
         timestamp
       );
     }

react/src/components/dashboard/sendCoin/sendCoin.render.js

@@ -11,10 +11,10 @@ export const UTXOCacheInfoRender = function(refreshCacheData, isReadyToUpdate, w
   return (
     <div className="col-lg-12">
       <hr />
-      { translate('SEND.TOTAL_UTXO_AVAILABLE') }: 
+      { translate('SEND.TOTAL_UTXO_AVAILABLE') }:
       { refreshCacheData ? refreshCacheData.data && refreshCacheData.data.length : translate('SEND.PRESS_UPDATE_BTN') }<br />
       <div className={ !timestamp ? 'hide' : '' }>
-        { translate('SEND.LAST_UPDATED') } @ 
+        { translate('SEND.LAST_UPDATED') } @
         { secondsToString(refreshCacheData ? refreshCacheData.timestamp : 0, true) }&nbsp;|&nbsp;
         { secondsElapsedToString(timestamp || 0) }&nbps;
         { translate('SEND.AGO') }<br />
@@ -156,12 +156,13 @@ export const SendApiTypeSelectorRender = function () {
           </div>
         </span>
       </div>
-      <div className="col-lg-4 text-right">
+      { this.stateisCameraFeatureDetected &&
-        <QRModal
+        <div className="col-lg-4 text-right">
-          mode="scan"
+          <QRModal
-          setRecieverFromScan={this.setRecieverFromScan}
+            mode="scan"
-        />
+            setRecieverFromScan={this.setRecieverFromScan} />
-      </div>
+        </div>
+      }
     </div>
   );
 };