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

/* 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}
</>
);
};