parent
							
								
									5ebdff6f92
								
							
						
					
					
						commit
						9368cfcf96
					
				
				 8 changed files with 110 additions and 53 deletions
			
			
		
									
										Binary file not shown.
									
								
							
						@ -1,36 +1,34 @@ | 
				
			|||||||
.video-js{ | 
					.video-js { | 
				
			||||||
  width: 100% !important; | 
					  width: 100% !important; | 
				
			||||||
  height: 100% !important; | 
					  height: 100% !important; | 
				
			||||||
  border-radius: 20px; | 
					  border-radius: 20px; | 
				
			||||||
  button{ | 
					  button { | 
				
			||||||
    &:focus{ | 
					    &:focus { | 
				
			||||||
      outline: none !important; | 
					      outline: none !important; | 
				
			||||||
    } | 
					    } | 
				
			||||||
  } | 
					  } | 
				
			||||||
  .vjs-tech{ | 
					  .vjs-tech { | 
				
			||||||
    border-radius: 20px; | 
					    border-radius: 20px !important; | 
				
			||||||
  } | 
					  } | 
				
			||||||
  .vjs-big-play-button{ | 
					  .vjs-big-play-button { | 
				
			||||||
    font-size: 3.3em; | 
					    font-size: 3.3em !important; | 
				
			||||||
    width: 50px; | 
					    width: 50px !important; | 
				
			||||||
    height: 48px; | 
					    height: 48px !important; | 
				
			||||||
    transform: translateX(25px); | 
					    transform: translateX(25px) !important; | 
				
			||||||
    background-color: #37D386; | 
					    background-color: #37d386 !important; | 
				
			||||||
    border-radius: 50%; | 
					    border-radius: 50% !important; | 
				
			||||||
    border: 0px; | 
					    border: 0px !important; | 
				
			||||||
  } | 
					  } | 
				
			||||||
  .vjs-control-bar{ | 
					  .vjs-control-bar { | 
				
			||||||
    direction: ltr !important; | 
					    direction: ltr !important; | 
				
			||||||
    border-bottom-left-radius: 20px; | 
					    border-bottom-left-radius: 20px !important; | 
				
			||||||
    border-bottom-right-radius: 20px; | 
					    border-bottom-right-radius: 20px !important; | 
				
			||||||
    .vjs-progress-control{ | 
					    .vjs-progress-control { | 
				
			||||||
      border-bottom-left-radius: 20px; | 
					      border-bottom-left-radius: 20px !important; | 
				
			||||||
      border-bottom-right-radius: 20px; | 
					      border-bottom-right-radius: 20px !important; | 
				
			||||||
      & > * { | 
					      & > * { | 
				
			||||||
        direction: ltr !important; | 
					        direction: ltr !important; | 
				
			||||||
         | 
					 | 
				
			||||||
      } | 
					      } | 
				
			||||||
    } | 
					    } | 
				
			||||||
     | 
					 | 
				
			||||||
  } | 
					  } | 
				
			||||||
} | 
					} | 
				
			||||||
@ -1,42 +1,36 @@ | 
				
			|||||||
import React, { Component } from 'react' | 
					import React, { Component } from "react"; | 
				
			||||||
import QrReader from 'react-qr-scanner' | 
					import QrReader from "react-qr-reader"; | 
				
			||||||
 | 
					
 | 
				
			||||||
export default class Scanner extends Component { | 
					export default class Scanner extends Component { | 
				
			||||||
  constructor(props){ | 
					  constructor(props) { | 
				
			||||||
    super(props) | 
					    super(props); | 
				
			||||||
    this.state = { | 
					    this.state = { | 
				
			||||||
      delay: 100, | 
					      delay: 100, | 
				
			||||||
      result: '', | 
					      result: "", | 
				
			||||||
    } | 
					    }; | 
				
			||||||
 | 
					
 | 
				
			||||||
    this.handleScan = this.handleScan.bind(this) | 
					    this.handleScan = this.handleScan.bind(this); | 
				
			||||||
  } | 
					  } | 
				
			||||||
  handleScan(data){ | 
					  handleScan(data) { | 
				
			||||||
    this.props.parent.setState({ | 
					    this.props.parent.setState({ | 
				
			||||||
      value: data, | 
					      value: data, | 
				
			||||||
    }) | 
					    }); | 
				
			||||||
  } | 
					  } | 
				
			||||||
 | 
					
 | 
				
			||||||
  handleError(err){ | 
					  handleError(err) { | 
				
			||||||
    console.error(err) | 
					    console.error(err); | 
				
			||||||
  } | 
					 | 
				
			||||||
  render(){ | 
					 | 
				
			||||||
    const previewStyle = { | 
					 | 
				
			||||||
      width: 320, | 
					 | 
				
			||||||
      borderRadius: '10px' | 
					 | 
				
			||||||
  } | 
					  } | 
				
			||||||
 | 
					  render() { | 
				
			||||||
    return( | 
					    return ( | 
				
			||||||
      <> | 
					      <> | 
				
			||||||
        <QrReader | 
					        <QrReader | 
				
			||||||
          delay={this.state.delay} | 
					          delay={300} | 
				
			||||||
          style={previewStyle} | 
					 | 
				
			||||||
          onError={this.handleError} | 
					          onError={this.handleError} | 
				
			||||||
          onScan={this.handleScan} | 
					          onScan={this.handleScan} | 
				
			||||||
          legacyMode={true} | 
					          style={{ width: "100%" }} | 
				
			||||||
          facingMode={'user'} | 
					          facingMode={this.props.parent.state.facingMode} | 
				
			||||||
        /> | 
					        /> | 
				
			||||||
      </> | 
					      </> | 
				
			||||||
    ) | 
					    ); | 
				
			||||||
  } | 
					  } | 
				
			||||||
} | 
					} | 
				
			||||||
					Loading…
					
					
				
		Reference in new issue