You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
5.3 KiB
162 lines
5.3 KiB
import React, { Component } from "react"; |
|
import Navbar from "../Home/Navbar/index"; |
|
import Footer from "../Home/Footer/index"; |
|
import { Link } from "react-router-dom"; |
|
|
|
import Scanner from "./Scanner/index"; |
|
import LastQr from "./LastQr/index"; |
|
import Modal from "./Modal/index"; |
|
import ReplayIcon from "@material-ui/icons/Replay"; |
|
import FlipCameraIosIcon from "@material-ui/icons/FlipCameraIos"; |
|
|
|
import { connect } from "react-redux"; |
|
import { qr } from "~/Redux/actions"; |
|
|
|
import sciense_6 from "../../assets/images/sciense-6.png"; |
|
|
|
import "./index.scss"; |
|
|
|
const maxDesktopSize = 1250; |
|
|
|
const fontSize = { |
|
desktop: { |
|
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70, |
|
p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90, |
|
}, |
|
}; |
|
|
|
class QRScan extends Component { |
|
state = { |
|
value: null, |
|
facingMode: 0, |
|
tail: null, |
|
}; |
|
|
|
async componentDidUpdate() { |
|
if (this.state.value) { |
|
let tail = this.state.value.slice( |
|
this.state.value.lastIndexOf("/") + 1, |
|
this.state.value.length |
|
); |
|
this.props.info({ tail: tail }); |
|
console.log(this.props.list, tail); |
|
this.setState({ value: null, tail: tail }); |
|
} |
|
} |
|
|
|
render() { |
|
const { data } = this.props; |
|
return ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
<> |
|
<div className="qr-scan d-flex flex-column align-items-center"> |
|
<Navbar /> |
|
<div className="qr-scan__box d-flex flex-column"> |
|
<header className="qr-scan__box--header d-flex flex-column"> |
|
<h1 style={{ fontSize: fontSize.desktop.h1 }}>نکته</h1> |
|
<p style={{ fontSize: fontSize.desktop.p }}> |
|
لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار |
|
دهید تا اسکن دوربین انجام شود |
|
</p> |
|
</header> |
|
<div className="qr-scan__box--select d-flex"> |
|
<select |
|
onChange={(e) => |
|
this.setState({ facingMode: e.target.value }) |
|
} |
|
> |
|
<option value="environment">دوربین عقب</option> |
|
<option value="user">دوربین جلو</option> |
|
</select> |
|
</div> |
|
<section className="qr-scan__box--camera d-flex justify-content-center align-items-center"> |
|
{this.state.value !== null ? ( |
|
<div |
|
style={{ zIndex: 1000 }} |
|
onClick={() => this.setState({ value: null })} |
|
> |
|
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> |
|
</div> |
|
) : ( |
|
<Scanner parent={this} /> |
|
)} |
|
</section> |
|
{this.state.tail === null ? null : ( |
|
<Modal tail={this.state.tail} /> |
|
)} |
|
</div> |
|
</div> |
|
<Footer /> |
|
</> |
|
) : null} |
|
{window.innerWidth < 1000 ? ( |
|
<> |
|
<div className="mobile-qr-scan d-flex flex-column"> |
|
<Navbar page="qr-scan" /> |
|
{/* <div className="mobile-qr-scan__back d-flex"> |
|
<Link to="/">بازگشت</Link> |
|
</div> */} |
|
<header className="mobile-qr-scan__header d-flex flex-column"></header> |
|
|
|
<section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center"> |
|
<FlipCameraIosIcon |
|
style={{ |
|
fontSize: 35, |
|
position: "absolute", |
|
left: 10, |
|
top: 10, |
|
zIndex: 100, |
|
color: "white", |
|
}} |
|
onClick={() => |
|
this.setState({ facingMode: this.state.facingMode ? 0 : 1 }) |
|
} |
|
/> |
|
{this.state.value !== null ? ( |
|
<div |
|
style={{ zIndex: 1000 }} |
|
onClick={() => this.setState({ value: null })} |
|
> |
|
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> |
|
</div> |
|
) : ( |
|
<Scanner parent={this} /> |
|
)} |
|
</section> |
|
{this.state.tail === null ? null : ( |
|
<Modal parent={this} tail={this.state.tail} /> |
|
)} |
|
{localStorage.getItem("latestQr") ? ( |
|
<section className="mobile-qr-scan__lasts d-flex flex-column"> |
|
<h2>آخرین مشاهدات</h2> |
|
{data.map((item, i) => ( |
|
<LastQr |
|
data={JSON.parse(localStorage.getItem("latestQr"))} |
|
key={i} |
|
/> |
|
))} |
|
</section> |
|
) : null} |
|
</div> |
|
</> |
|
) : null} |
|
</> |
|
); |
|
} |
|
} |
|
|
|
export default connect((state) => ({ list: state.qr.list }), { info: qr.info })( |
|
QRScan |
|
); |
|
|
|
QRScan.defaultProps = { |
|
data: [ |
|
{ |
|
title: "ریاضیات گسسته خیلی پیشرفته", |
|
subTitle: "پایه هفتم ابتدایی", |
|
page: 13, |
|
image: sciense_6, |
|
}, |
|
], |
|
};
|
|
|