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.
369 lines
12 KiB
369 lines
12 KiB
/* eslint-disable jsx-a11y/anchor-has-content */ |
|
import React, { Component } from "react"; |
|
import { Link } from "react-router-dom"; |
|
import Navbar from "../Home/Navbar/index"; |
|
import Footer from "../Home/Footer/index"; |
|
import Loader from "~/components/Loader/index"; |
|
import Image from "./Image/index"; |
|
import VoiceBox from "./VoiceBox/index.js"; |
|
import VideoBox from "./VideoBox/index"; |
|
import PDF from "./PDF/index"; |
|
import PowerPoint from "./PowerPoint/index"; |
|
import Links from "./Links/index"; |
|
import BookContent from "./BookContent/index"; |
|
import MoreVertIcon from "@material-ui/icons/MoreVert"; |
|
|
|
import { connect } from "react-redux"; |
|
import { qr } from "~/Redux/actions"; |
|
|
|
import exit from "../../assets/icons/exit.svg"; |
|
import sciense_7 from "../../assets/images/sciense-7.png"; |
|
import { useHistory } from "react-router-dom"; |
|
|
|
import "./index.scss"; |
|
function Navigate({ path }) { |
|
let history = useHistory(); |
|
return <>{history.push(path)}</>; |
|
} |
|
const maxDesktopSize = 1250; |
|
const grades = [ |
|
window.t("اول"), |
|
window.t("دوم"), |
|
window.t("سوم"), |
|
window.t("چهارم"), |
|
window.t("پنجم"), |
|
window.t("ششم"), |
|
window.t("هفتم"), |
|
window.t("هشتم"), |
|
window.t("نهم"), |
|
window.t("دهم"), |
|
window.t("یازدهم"), |
|
window.t("دوازدهم"), |
|
]; |
|
class QR extends Component { |
|
state = { |
|
theme: true, |
|
zoom: [10, 10], |
|
menu: true, |
|
}; |
|
|
|
handleZoom = (type) => { |
|
if (type === "increase") { |
|
this.setState((prevState) => ({ |
|
zoom: |
|
prevState.zoom[0] === 18 |
|
? prevState.zoom |
|
: [prevState.zoom[0] + 2, prevState.zoom[1] - 2], |
|
})); |
|
} else { |
|
this.setState((prevState) => ({ |
|
zoom: |
|
prevState.zoom[0] === 6 |
|
? prevState.zoom |
|
: [prevState.zoom[0] - 2, prevState.zoom[1] + 2], |
|
})); |
|
} |
|
}; |
|
|
|
componentDidMount() { |
|
window.scrollTo(0, 0); |
|
if (window.location.search) { |
|
let tail = window.location.search.slice( |
|
window.location.search.lastIndexOf("=") + 1, |
|
window.location.search.length |
|
); |
|
this.props.info({ tail: tail }); |
|
} |
|
} |
|
|
|
componentDidUpdate(prevProps, prevState) { |
|
const { qrList } = this.props; |
|
if (prevProps.qrList !== qrList && !qrList.activationCode) { |
|
localStorage.setItem( |
|
"latestQr", |
|
JSON.stringify({ |
|
name: qrList.book.name, |
|
pagesNum: qrList.book.pagesNum, |
|
gradeId: qrList.book.gradeId, |
|
link: window.location.search, |
|
fileIds: qrList.book.fileIds, |
|
}) |
|
); |
|
} |
|
} |
|
|
|
render() { |
|
const { qrList, loading } = this.props; |
|
const fontSize = { |
|
desktop: { |
|
sidebar: { |
|
h1: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95, |
|
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120, |
|
div: |
|
window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120, |
|
}, |
|
content: { |
|
h1: |
|
window.innerWidth > maxDesktopSize |
|
? this.state.zoom[0] * 2 |
|
: window.innerWidth / (this.state.zoom[1] * 7), |
|
p: |
|
window.innerWidth > maxDesktopSize |
|
? this.state.zoom[0] * 1.4 |
|
: window.innerWidth / (this.state.zoom[1] * 12), |
|
h2: |
|
window.innerWidth > maxDesktopSize |
|
? this.state.zoom[0] * 1.2 |
|
: (window.innerWidth / this.state.zoom[1]) * 12, |
|
}, |
|
}, |
|
}; |
|
if (+qrList?.activationCode === 1) return <Navigate path={"/mybooks"} />; |
|
|
|
return ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
!loading ? ( |
|
<> |
|
<div className="qr d-flex flex-column"> |
|
<Navbar /> |
|
{qrList ? ( |
|
<div className="d-flex"> |
|
<section className="qr__sidebar d-flex flex-column p-2"> |
|
<header className="qr__sidebar--header d-flex"> |
|
<div className="qr__sidebar--header__right d-flex"> |
|
<img |
|
src={`https://dnvn.ir/api/v1/file/${qrList.book.fileIds}`} |
|
alt={qrList.book.name} |
|
/> |
|
</div> |
|
<div className="qr__sidebar--header__left d-flex flex-column"> |
|
<h1 style={{ fontSize: fontSize.desktop.sidebar.h1 }}> |
|
{qrList.book.name} |
|
</h1> |
|
<h2 style={{ fontSize: fontSize.desktop.sidebar.h2 }}> |
|
پایه {grades[qrList.book.gradeId]} |
|
</h2> |
|
<div |
|
style={{ fontSize: fontSize.desktop.sidebar.div }} |
|
> |
|
شما در حال مطالعه{" "} |
|
<strong>صفحه {qrList.book.pagesNum}</strong> هستید. |
|
</div> |
|
</div> |
|
</header> |
|
{/* <SubjectsDropdown /> */} |
|
<BookContent data={qrList.qr.content} /> |
|
</section> |
|
<section className="qr__content d-flex flex-column"> |
|
<header className="qr__content--header d-flex justify-content-end"> |
|
<div className="qr__content--header__tools d-flex"> |
|
{/* <span |
|
className="d-flex justify-content-center align-items-center" |
|
onClick={() => |
|
this.setState({ theme: !this.state.theme }) |
|
} |
|
> |
|
<NightsStayOutlinedIcon |
|
style={{ |
|
fontSize: 20, |
|
color: this.state.theme ? "#7dc241" : "white", |
|
}} |
|
/> |
|
</span> */} |
|
<span |
|
className="d-flex justify-content-center align-items-center" |
|
onClick={() => this.handleZoom("increase")} |
|
> |
|
+ |
|
</span> |
|
<span |
|
className="d-flex justify-content-center align-items-center" |
|
onClick={() => this.handleZoom("decrease")} |
|
> |
|
- |
|
</span> |
|
</div> |
|
</header> |
|
{qrList.qr.content.map((item, i) => ( |
|
<Identifier fontSize={fontSize} data={item} key={i} /> |
|
))} |
|
</section> |
|
</div> |
|
) : ( |
|
<div className="qr__notAccess d-flex flex-column p-3"> |
|
<h1>محتوایی برای این صفحه در دسترس نیست.!</h1> |
|
</div> |
|
)} |
|
</div> |
|
<Footer /> |
|
</> |
|
) : ( |
|
<div |
|
className="d-flex justify-content-center align-items-center" |
|
style={{ height: "100vh", width: "100vw" }} |
|
> |
|
<Loader /> |
|
</div> |
|
) |
|
) : null} |
|
{window.innerWidth < 1000 ? ( |
|
!loading ? ( |
|
<> |
|
<div className="mobile-qr d-flex flex-column"> |
|
<Navbar /> |
|
{qrList ? ( |
|
<div className="d-flex p-3"> |
|
{this.state.menu ? ( |
|
<div |
|
className="mobile-qr__buttons d-flex flex-column align-items-center" |
|
ref={(div) => { |
|
this.buttons = div; |
|
}} |
|
> |
|
<div> |
|
<img |
|
src={exit} |
|
alt={window.t("انصراف")} |
|
onClick={() => |
|
// this.props.logout({}) |
|
this.setState({ menu: !this.state.menu }) |
|
} |
|
/> |
|
</div> |
|
<button>نمایش تمامی محتواها</button> |
|
{qrList.qr.content.map((item, i) => ( |
|
<MenuIdentifier data={item} key={i} /> |
|
))} |
|
</div> |
|
) : ( |
|
<div |
|
className="mobile-qr__buttons d-flex flex-column align-items-center" |
|
ref={(div) => { |
|
this.buttons = div; |
|
}} |
|
> |
|
<MoreVertIcon |
|
style={{ fontSize: 40, color: "grey" }} |
|
onClick={() => |
|
this.setState({ menu: !this.state.menu }) |
|
} |
|
/> |
|
</div> |
|
)} |
|
<div |
|
className="mobile-qr__content d-flex flex-column" |
|
ref={(div) => { |
|
this.content = div; |
|
}} |
|
> |
|
{qrList.qr.content.map((item, i) => ( |
|
<Identifier data={item} key={i} /> |
|
))} |
|
</div> |
|
</div> |
|
) : ( |
|
<div className="mobile-qr__notAccess d-flex flex-column p-3"> |
|
<h1>محتوایی برای این صفحه در دسترس نیست.!</h1> |
|
<div className="mobile-qr-scan__back d-flex mb-2"> |
|
<Link to="/">بازگشت</Link> |
|
</div> |
|
</div> |
|
)} |
|
</div> |
|
</> |
|
) : ( |
|
<div |
|
className="d-flex justify-content-center align-items-center" |
|
style={{ height: "100vh", width: "100vw" }} |
|
> |
|
<Loader /> |
|
</div> |
|
) |
|
) : null} |
|
</> |
|
); |
|
} |
|
} |
|
|
|
export default connect( |
|
(state) => ({ |
|
qrList: state.qr.list, |
|
loading: state.qr.loading, |
|
}), |
|
{ info: qr.info } |
|
)(QR); |
|
|
|
QR.defaultProps = { |
|
QR: { |
|
id: 1, |
|
image: sciense_7, |
|
title: "منفجر کردن مغز خود را به ما بسپارید", |
|
subTitle: "پایه ششم ابتدایی", |
|
date: new Date(), |
|
sample: { |
|
page: 67, |
|
percent: 60, |
|
}, |
|
}, |
|
}; |
|
|
|
const Identifier = (props) => { |
|
return ( |
|
<> |
|
{props.data.type === "voice" ? ( |
|
<VoiceBox fontSize={props.fontSize} data={props.data} /> |
|
) : null} |
|
{props.data.type === "video" ? ( |
|
<VideoBox fontSize={props.fontSize} data={props.data} /> |
|
) : null} |
|
{props.data.type === "pdf" ? <PDF data={props.data} /> : null} |
|
{props.data.type === "ppt" ? <PowerPoint data={props.data} /> : null} |
|
{props.data.type === "links" ? <Links data={props.data} /> : null} |
|
{props.data.type === "image" ? <Image data={props.data} /> : null} |
|
</> |
|
); |
|
}; |
|
|
|
const MenuIdentifier = (props) => { |
|
return ( |
|
<> |
|
{props.data.type === "image" ? ( |
|
<a |
|
href="#image" |
|
className="mobile-qr__buttons--image mobile-qr__buttons--media" |
|
></a> |
|
) : null} |
|
{props.data.type === "voice" ? ( |
|
<a |
|
href="#voice" |
|
className="mobile-qr__buttons--voice mobile-qr__buttons--media" |
|
></a> |
|
) : null} |
|
{props.data.type === "video" ? ( |
|
<a |
|
href="#video" |
|
className="mobile-qr__buttons--video mobile-qr__buttons--media" |
|
></a> |
|
) : null} |
|
{props.data.type === "pdf" ? ( |
|
<a |
|
href="#pdf" |
|
className="mobile-qr__buttons--pdf mobile-qr__buttons--media" |
|
></a> |
|
) : null} |
|
{props.data.type === "ppt" ? ( |
|
<a |
|
href="#ppt" |
|
className="mobile-qr__buttons--ppt mobile-qr__buttons--media" |
|
></a> |
|
) : null} |
|
{props.data.type === "links" ? ( |
|
<a |
|
href="#links" |
|
className="mobile-qr__buttons--attachment mobile-qr__buttons--media" |
|
></a> |
|
) : null} |
|
</> |
|
); |
|
};
|
|
|