|  |  |  | @ -2,6 +2,7 @@ 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 VoiceBox from "./VoiceBox/index.js"; | 
			
		
	
		
			
				
					|  |  |  |  | import VideoBox from "./VideoBox/index"; | 
			
		
	
		
			
				
					|  |  |  |  | import PDF from "./PDF/index"; | 
			
		
	
	
		
			
				
					|  |  |  | @ -48,8 +49,15 @@ class QR extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |   }; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |   componentDidMount() { | 
			
		
	
		
			
				
					|  |  |  |  |     console.log(typeof this.props.qrList); | 
			
		
	
		
			
				
					|  |  |  |  |     if (window.location.search) { | 
			
		
	
		
			
				
					|  |  |  |  |       let tail = window.location.search.slice( | 
			
		
	
		
			
				
					|  |  |  |  |         window.location.search.lastIndexOf("/") + 1, | 
			
		
	
		
			
				
					|  |  |  |  |         window.location.search.length | 
			
		
	
		
			
				
					|  |  |  |  |       ); | 
			
		
	
		
			
				
					|  |  |  |  |       this.props.info({ tail: tail }); | 
			
		
	
		
			
				
					|  |  |  |  |     } | 
			
		
	
		
			
				
					|  |  |  |  |   } | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |   render() { | 
			
		
	
		
			
				
					|  |  |  |  |     const { QR, qrList } = this.props; | 
			
		
	
		
			
				
					|  |  |  |  |     const fontSize = { | 
			
		
	
	
		
			
				
					|  |  |  | @ -80,9 +88,11 @@ class QR extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |     return ( | 
			
		
	
		
			
				
					|  |  |  |  |       <> | 
			
		
	
		
			
				
					|  |  |  |  |         {window.innerWidth > 1000 ? ( | 
			
		
	
		
			
				
					|  |  |  |  |           !this.props.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"> | 
			
		
	
	
		
			
				
					|  |  |  | @ -96,18 +106,22 @@ class QR extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |                           <h2 style={{ fontSize: fontSize.desktop.sidebar.h2 }}> | 
			
		
	
		
			
				
					|  |  |  |  |                             {QR.subTitle} | 
			
		
	
		
			
				
					|  |  |  |  |                           </h2> | 
			
		
	
		
			
				
					|  |  |  |  |                       <div style={{ fontSize: fontSize.desktop.sidebar.div }}> | 
			
		
	
		
			
				
					|  |  |  |  |                         شما در حال مطالعه <strong>صفحه {QR.sample.page}</strong>{" "} | 
			
		
	
		
			
				
					|  |  |  |  |                         هستید. | 
			
		
	
		
			
				
					|  |  |  |  |                           <div | 
			
		
	
		
			
				
					|  |  |  |  |                             style={{ fontSize: fontSize.desktop.sidebar.div }} | 
			
		
	
		
			
				
					|  |  |  |  |                           > | 
			
		
	
		
			
				
					|  |  |  |  |                             شما در حال مطالعه{" "} | 
			
		
	
		
			
				
					|  |  |  |  |                             <strong>صفحه {QR.sample.page}</strong> هستید. | 
			
		
	
		
			
				
					|  |  |  |  |                           </div> | 
			
		
	
		
			
				
					|  |  |  |  |                       <div style={{ fontSize: fontSize.desktop.sidebar.div }}> | 
			
		
	
		
			
				
					|  |  |  |  |                           <div | 
			
		
	
		
			
				
					|  |  |  |  |                             style={{ fontSize: fontSize.desktop.sidebar.div }} | 
			
		
	
		
			
				
					|  |  |  |  |                           > | 
			
		
	
		
			
				
					|  |  |  |  |                             پیشرفت شما در مطالعه کتاب به{" "} | 
			
		
	
		
			
				
					|  |  |  |  |                             <span>{QR.sample.percent} درصد</span> رسیده است. | 
			
		
	
		
			
				
					|  |  |  |  |                           </div> | 
			
		
	
		
			
				
					|  |  |  |  |                         </div> | 
			
		
	
		
			
				
					|  |  |  |  |                       </header> | 
			
		
	
		
			
				
					|  |  |  |  |                       <SubjectsDropdown /> | 
			
		
	
		
			
				
					|  |  |  |  |                   <BookContent data={QR.data} /> | 
			
		
	
		
			
				
					|  |  |  |  |                       <BookContent data={qrList.content} /> | 
			
		
	
		
			
				
					|  |  |  |  |                     </section> | 
			
		
	
		
			
				
					|  |  |  |  |                     <section className="qr__content d-flex flex-column"> | 
			
		
	
		
			
				
					|  |  |  |  |                       <header className="qr__content--header d-flex justify-content-end"> | 
			
		
	
	
		
			
				
					|  |  |  | @ -139,20 +153,34 @@ class QR extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |                           </span> | 
			
		
	
		
			
				
					|  |  |  |  |                         </div> | 
			
		
	
		
			
				
					|  |  |  |  |                       </header> | 
			
		
	
		
			
				
					|  |  |  |  |                   {QR.data.map((item, i) => ( | 
			
		
	
		
			
				
					|  |  |  |  |                       {qrList.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 ? ( | 
			
		
	
		
			
				
					|  |  |  |  |           !this.props.loading ? ( | 
			
		
	
		
			
				
					|  |  |  |  |             <> | 
			
		
	
		
			
				
					|  |  |  |  |               <div className="mobile-qr d-flex flex-column"> | 
			
		
	
		
			
				
					|  |  |  |  |                 <Navbar /> | 
			
		
	
		
			
				
					|  |  |  |  |               {this.props.qrList ? ( | 
			
		
	
		
			
				
					|  |  |  |  |                 {qrList ? ( | 
			
		
	
		
			
				
					|  |  |  |  |                   <div className="d-flex p-3"> | 
			
		
	
		
			
				
					|  |  |  |  |                     {this.state.menu ? ( | 
			
		
	
		
			
				
					|  |  |  |  |                       <div className="mobile-qr__buttons d-flex flex-column align-items-center"> | 
			
		
	
	
		
			
				
					|  |  |  | @ -184,7 +212,7 @@ class QR extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |                       <div className="mobile-qr-scan__back d-flex mb-2"> | 
			
		
	
		
			
				
					|  |  |  |  |                         <Link to="/">بازگشت</Link> | 
			
		
	
		
			
				
					|  |  |  |  |                       </div> | 
			
		
	
		
			
				
					|  |  |  |  |                     {qrList.map((item, i) => ( | 
			
		
	
		
			
				
					|  |  |  |  |                       {qrList.content.map((item, i) => ( | 
			
		
	
		
			
				
					|  |  |  |  |                         <Identifier data={item} key={i} /> | 
			
		
	
		
			
				
					|  |  |  |  |                       ))} | 
			
		
	
		
			
				
					|  |  |  |  |                     </div> | 
			
		
	
	
		
			
				
					|  |  |  | @ -199,6 +227,14 @@ class QR extends Component { | 
			
		
	
		
			
				
					|  |  |  |  |                 )} | 
			
		
	
		
			
				
					|  |  |  |  |               </div> | 
			
		
	
		
			
				
					|  |  |  |  |             </> | 
			
		
	
		
			
				
					|  |  |  |  |           ) : ( | 
			
		
	
		
			
				
					|  |  |  |  |             <div | 
			
		
	
		
			
				
					|  |  |  |  |               className="d-flex justify-content-center align-items-center" | 
			
		
	
		
			
				
					|  |  |  |  |               style={{ height: "100vh", width: "100vw" }} | 
			
		
	
		
			
				
					|  |  |  |  |             > | 
			
		
	
		
			
				
					|  |  |  |  |               <Loader /> | 
			
		
	
		
			
				
					|  |  |  |  |             </div> | 
			
		
	
		
			
				
					|  |  |  |  |           ) | 
			
		
	
		
			
				
					|  |  |  |  |         ) : null} | 
			
		
	
		
			
				
					|  |  |  |  |       </> | 
			
		
	
		
			
				
					|  |  |  |  |     ); | 
			
		
	
	
		
			
				
					|  |  |  | @ -208,8 +244,9 @@ class QR extends Component { | 
			
		
	
		
			
				
					|  |  |  |  | export default connect( | 
			
		
	
		
			
				
					|  |  |  |  |   (state) => ({ | 
			
		
	
		
			
				
					|  |  |  |  |     qrList: state.qr.list, | 
			
		
	
		
			
				
					|  |  |  |  |     loading: state.qr.loading, | 
			
		
	
		
			
				
					|  |  |  |  |   }), | 
			
		
	
		
			
				
					|  |  |  |  |   {} | 
			
		
	
		
			
				
					|  |  |  |  |   { info: qr.info } | 
			
		
	
		
			
				
					|  |  |  |  | )(QR); | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | QR.defaultProps = { | 
			
		
	
	
		
			
				
					|  |  |  | @ -229,26 +266,6 @@ QR.defaultProps = { | 
			
		
	
		
			
				
					|  |  |  |  | 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} | 
			
		
	
	
		
			
				
					|  |  |  | 
 |