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.
 
 
 

256 lines
8.8 KiB

import React, { Component } from "react";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/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 SubjectsDropdown from "./SubjectsDropdown/index";
import BookContent from "./BookContent/index";
import NightsStayOutlinedIcon from "@material-ui/icons/NightsStayOutlined";
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 "./index.scss";
const maxDesktopSize = 1250;
class QR extends Component {
state = {
theme: true,
zoom: [10, 10],
};
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],
}));
}
};
render() {
const { QR, qrList } = 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,
},
},
};
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="qr d-flex flex-column">
<Navbar />
<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={QR.image} alt={QR.title} />
</div>
<div className="qr__sidebar--header__left d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.sidebar.h1 }}>
{QR.title}
</h1>
<h2 style={{ fontSize: fontSize.desktop.sidebar.h2 }}>
{QR.subTitle}
</h2>
<div style={{ fontSize: fontSize.desktop.sidebar.div }}>
شما در حال مطالعه <strong>صفحه {QR.sample.page}</strong>{" "}
هستید.
</div>
<div style={{ fontSize: fontSize.desktop.sidebar.div }}>
پیشرفت شما در مطالعه کتاب به{" "}
<span>{QR.sample.percent} درصد</span> رسیده است.
</div>
</div>
</header>
<SubjectsDropdown />
<BookContent data={QR.data} />
</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>
{QR.data.map((item, i) => (
<Identifier fontSize={fontSize} data={item} key={i} />
))}
</section>
</div>
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<>
<div className="mobile-qr d-flex flex-column">
<Navbar />
{qrList.length === 0 && qrList !== null ? (
<div className="d-flex flex-column">
<div className="d-flex justify-content-end">بازگشت</div>
<h1>فایلی در این صفحه موجود نیست.</h1>
</div>
) : null}
{qrList !== null ? (
<div className="d-flex pt-3">
<div className="mobile-qr__buttons d-flex flex-column align-items-center">
<img src={exit} alt="خروج" />
<button>نمایش تمامی محتواها</button>
<a
href="#voice"
className="mobile-qr__buttons--voice mobile-qr__buttons--media"
></a>
<a
href="#video"
className="mobile-qr__buttons--video mobile-qr__buttons--media"
></a>
<a
href="#ppt"
className="mobile-qr__buttons--ppt mobile-qr__buttons--media"
></a>
<a
href="#pdf"
className="mobile-qr__buttons--pdf mobile-qr__buttons--media"
></a>
<a
href="#links"
className="mobile-qr__buttons--attachment mobile-qr__buttons--media"
></a>
</div>
<div className="mobile-qr__content d-flex flex-column">
{qrList.map((item, i) => (
<Identifier data={item} key={i} />
))}
</div>
</div>
) : null}
{qrList === null ? (
<div className="d-flex flex-column align-items-center">
<div className="d-flex justify-content-end">بازگشت</div>
<h1 className="align-center">404</h1>
</div>
) : null}
</div>
</>
) : null}
</>
);
}
}
export default connect(
(state) => ({
qrList: state.qr.list,
}),
{}
)(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 === "p" ? (
<p
style={{
fontSize:
window.innerWidth > 1250 ? props.fontSize.desktop.content.p : "",
}}
>
{props.data.text}
</p>
) : null}
{props.data.type === "h1" ? (
<h1
style={{
fontSize:
window.innerWidth > 1250 ? props.fontSize.desktop.content.h1 : "",
}}
>
{props.data.text}
</h1>
) : null}
{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}
</>
);
};