reza added modal

src/views/About/index.scss

@@ -100,6 +100,9 @@
     &--right {
       width: 48%;
       height: 100%;
+      & img{
+        width: 100%;
+      }
     }
     &--left {
       padding-top: 20px;

src/views/Product/Comment/Reply/index.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+
+import './index.scss';
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 550;
+
+const fontSize = {
+  desktop : {
+    strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
+    p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
+  }
+}
+const Replay = (props) => {
+  return(
+    <>
+      {window.innerWidth > 1000 ?
+      <div className="reply d-flex flex-column justify-content-center">
+          <strong style={{ fontSize: fontSize.desktop.strong }}>پاسخ مدیریت سایت</strong>
+          <p style={{ fontSize: fontSize.desktop.p }}>{props.reply}</p>
+      </div> : null
+      }
+    </>
+  );
+}
+
+export default Replay;

src/views/Product/Comment/Reply/index.scss

@@ -0,0 +1,15 @@
+.reply{
+  width: 100%;
+  padding-right: 10px;
+  border-right: 4px solid #02733c;
+  strong{
+    font-family: numeralMedium;
+    color: #02733C;
+  }
+  p{
+    font-family: numeralLight;
+    color: #02733C;
+    margin: 0px;
+    margin-top: 5px;
+  }
+}

src/views/Product/Comment/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import moment from "jalali-moment";
+import Reply from './Reply/index';
 
 import "./index.scss";
 
@@ -27,13 +28,15 @@ export default function Comment(props) {
           <strong style={{ fontSize: fontSize.mobile.strong }}>{comment.username}</strong>
           <p style={{ fontSize: fontSize.mobile.p }}>{comment.text}</p>
           <span style={{ fontSize: fontSize.mobile.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
+          {comment.reply ? <Reply reply={comment.reply} /> : null}
         </div>
       ) : null}
       {window.innerWidth > 1000 ? (
         <div className="comment d-flex flex-column">
-          <strong style={{fontSize: fontSize.desktop.strong }}>{comment.username}</strong>
+          <strong className="comment__user" style={{fontSize: fontSize.desktop.strong }}>{comment.username}</strong>
-          <p style={{ fontSize: fontSize.desktop.p }}>{comment.text}</p>
+          <p className="comment__text" style={{ fontSize: fontSize.desktop.p }}>{comment.text}</p>
-          <span style={{ fontSize: fontSize.desktop.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
+          <span className="comment__date" style={{ fontSize: fontSize.desktop.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
+          {comment.reply ? <Reply reply={comment.reply} /> : null}
         </div>
       ) : null}
     </>

src/views/Product/Comment/index.scss

@@ -36,16 +36,16 @@
   color: #72891edc;
   position: relative;
   width: 100%;
-  p{
+  &__text{
     text-align: justify;
     font-family: numeralLight;
   }
-  strong{
+  &__user{
     font-family: numeralMedium;
     margin-bottom: 5px;
   }
   
-  span{
+  &__date{
     position: absolute;
     left: 10px;
     top: 10px;

src/views/Product/Gallery/Modal/index.js

@@ -0,0 +1,68 @@
+import React, {useState} from 'react';
+import Carousel from 'react-elastic-carousel';
+import Video from '../../../QR/VideoBox/React-video-js-player/index';
+import exit from '../../../../assets/icons/exit.svg';
+
+import './index.scss';
+const Modal = (props) => {
+  const [displayed, setDisplayed] = useState(props.first ? props.first : props.gallery[0])
+  const {gallery, setModal} = props;
+  return(
+    <>
+      {
+        window.innerWidth > 1000 ?
+        <section className="modal d-flex flex-column align-items-center justify-content-center">
+          <img className="modal__exit" src={exit} alt="خروح" onClick={() => setModal(null)} />
+          <div className="modal__display">
+            {
+              displayed.type === 'image' ?
+              <img src={displayed.value} alt="عکس" /> : null
+            }
+            {
+              displayed.type === 'film' ?
+              <Video /> : null
+            }
+          </div>
+          <footer className="modal__footer d-flex">
+            <Carousel
+                itemsToShow={4}
+                isRTL={true}
+                enableTilt={false}
+                showArrows={true}
+                pagination={false}
+              >
+                {gallery.map((item, i) => (
+                  <Item
+                    data={item}
+                    key={i}
+                    setDisplayed={setDisplayed}
+                    active={item === displayed}
+                  />
+                ))}
+              </Carousel>
+          </footer>
+        </section> : null
+      }
+    </>
+  );
+}
+
+export default Modal;
+
+const Item = (props) => {
+  return(
+    <div className="modal-carousel-item">
+      {
+        props.data.type === 'image' ?
+        <img src={props.data.value} alt="عکس" /> : null
+      }
+      {
+        props.data.type === 'film' ?
+        <Video /> : null
+      }
+      <div style={{ border: props.active ? '4px solid #1BBC6E' : '' }} className="modal-carousel-item__cover" onClick={() => props.setDisplayed(props.data)}>
+
+      </div>
+    </div>
+  );
+} 

src/views/Product/Gallery/Modal/index.scss

@@ -0,0 +1,67 @@
+.modal{
+  width: 100vw;
+  height : 100vh;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  background-color: rgba(0, 0, 0, 0.89);
+  &__exit{
+    position: fixed;
+    right: 30px;
+    top: 30px;
+    z-index: 400;
+    cursor: pointer;
+  }
+  &__display{
+    width: 100%;
+    max-width: 900px;
+    height: 70vh;
+    max-height: 600px;
+    min-height: 500px;
+    & img{
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  &__footer{
+    width: 100%;
+    max-width: 650px;
+    margin-top: 40px;
+    position: relative;
+    .rec-arrow-left{
+      position: absolute;
+      right: -30px;
+    }
+    .rec-arrow-right{
+      position: absolute;
+      left: -30px;
+    }
+    .modal-carousel-item{
+      width: 100px;
+      height: 100px;  
+      position: relative;
+      border-radius: 20px;
+      z-index: 100;
+      
+      .video-js{
+        z-index: 100;
+      }
+      & img{
+        width: 100%;
+        height: 100%;
+        border-radius: 20px;
+      }
+      &__cover{
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        z-index: 800;
+        width: 100%;
+        height: 100%;
+        border-radius: 20px;
+      }
+    }
+  }
+
+}

src/views/Product/Gallery/index.js

@@ -1,22 +1,87 @@
-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
+import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
+import Video from '../../QR/VideoBox/React-video-js-player/index';
+import Modal from './Modal/index';
 
 import './index.scss';
 export default function Gallery(props) {
+  const [selectedMedia,setSelectedMedia] = useState(props.gallery[1]);
+  const [modal, setModal] = useState(null);
+
   return(
     <>
       {
         window.innerWidth > 1000 ? 
         <section className="product-gallery d-flex flex-column">
           <div className="product-gallery__top">
-
+            {
+              selectedMedia ? 
+              <>
+                {
+                  selectedMedia.type === 'image' ?
+                  <img src={selectedMedia.value} alt={'عکس'} /> : null
+                }
+                {
+                  selectedMedia.type === 'film' ?
+                  <Video /> : null
+                }
+              </> : null
+            }
           </div>
           <div className="product-gallery__list d-flex">
-            <div></div>
+            {
-            <div></div>
+              props.gallery.length > 3 ?
-            <div></div>
+              <>
+                <Item item={props.gallery[0]} key={props.gallery[0].id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} />
+                <Item item={props.gallery[1]} key={props.gallery[1].id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} />
+                <Item item={props.gallery[2]} key={props.gallery[2].id} more={true} setSelectedMedia={setSelectedMedia} setModal={setModal} />
+              </> :
+              <>
+              {
+                props.gallery.map((item, i) => (
+                  <Item item={item} key={item.id} more={false} setSelectedMedia={setSelectedMedia} setModal={setModal} />
+                ))
+              }
+              </>
+            }
           </div>
+          {
+            modal ?
+            <Modal first={modal} gallery={props.gallery} setModal={setModal} /> : null
+          }
         </section> : null
       }
     </>
   );
 }
+
+const Item = (props) => {
+  const {item, more, setSelectedMedia, setModal} = props;
+  return(
+    <>
+      {
+        window.innerWidth > 1000 ?
+        <div className="product-gallery-item d-flex">
+          {
+            item.type === 'image' ?
+            <img src={item.value} alt={'عکس'} /> : null
+          }
+          {
+            item.type === 'film' ?
+            <Video /> : null
+          }
+          {
+            !more ?
+            <div className="product-gallery-item__cover" onClick={() => setSelectedMedia(item)}>
+
+            </div> : 
+            <div className="product-gallery-item__cover product-gallery-item__more d-flex justify-content-center align-items-center" onClick={() => setModal(item)}>
+              <MoreHorizIcon style={{ fontSize: 60, color: 'white'}} />
+            </div>
+          }
+        </div> : null
+      }
+    </>
+    
+  );
+}

src/views/Product/Gallery/index.scss

@@ -7,15 +7,41 @@
     height: 320px;
     background-color: #eee;
     border-radius: 20px;
+    & img{
+      width: 100%;
+      height: 100%;
+      border-radius: 20px;
+    }
   }
   &__list{
     width: 100%;
     justify-content: space-between;
-    & div{
+  }
+  &-item{
     min-width: 110px;
     height: 110px;
-      background-color: #eee;
+    max-width: 110px;
     border-radius: 20px;
+    position: relative;
+    margin: 5px;
+    cursor: pointer;
+    & img{
+      width: 100%;
+      height: 100%;
+      border-radius: 20px;
+
+    }
+    &__cover{
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      width: 100%;
+      height: 100%;
+      z-index: 100;
+      border-radius: 20px;
+    }
+    &__more{
+      background-color : rgba(0, 0, 0, 0.767);
     }
   }
 }

src/views/Product/index.js

@@ -16,6 +16,7 @@ import book1 from '../../assets/images/book1.png';
 import book3 from '../../assets/images/book3.png';
 import book4 from '../../assets/images/book4.png';
 import book5 from '../../assets/images/book5.png';
+import film from '../../assets/Video/film.mp4';
 
 import "./index.scss";
 
@@ -36,8 +37,8 @@ export default class Product extends Component {
             <div className="product d-flex flex-column">
               <Navbar />
               <Breadcrumbs />
-              <header class="product__header d-flex mt-4">
+              <header className="product__header d-flex mt-4">
-                <Gallery />
+                <Gallery gallery={product.gallery} />
                 <Info
                   subTitle={product.subTitle}
                   title={product.title}
@@ -241,6 +242,12 @@ Product.defaultProps = {
       "عینک واقعیت مجازی",
       "کارت گرافیک مناسب جهت اجرای بازی",
     ],
+    gallery: [
+      {id : 0, value: film, type : 'film',},
+      {id : 1, value: book1, type : 'image',},
+      {id : 2, value: book2, type : 'image',},
+      {value: book3, type : 'image',},
+    ],
     description:
       "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
     comments: [
@@ -250,6 +257,7 @@ Product.defaultProps = {
         date: new Date(),
         text: "عالی بود. ممنون از سایت زیباتون",
         score: 4,
+        reply: 'ممنون از شما که به ما اعتماد کردید'
       },
       {
         id: 1,
@@ -257,6 +265,7 @@ Product.defaultProps = {
         date: new Date(),
         text: "عالی بود. ممنون از سایت زیباتون",
         score: 2.5,
+        reply : '',
       },
       {
         id: 2,
@@ -264,6 +273,7 @@ Product.defaultProps = {
         date: new Date(),
         text: "عالی بود. ممنون از سایت زیباتون",
         score: 5,
+        reply : '',
       },
       {
         id: 3,
@@ -271,6 +281,7 @@ Product.defaultProps = {
         date: new Date(),
         text: "عالی بود. ممنون از سایت زیباتون",
         score: 3.7,
+        reply : '',
       },
       {
         id: 4,
@@ -278,6 +289,7 @@ Product.defaultProps = {
         date: new Date(),
         text: "عالی بود. ممنون از سایت زیباتون",
         score: 2,
+        reply : '',
       },
     ],
   },

src/views/QR/VideoBox/React-video-js-player/index.js

@@ -12,36 +12,37 @@ class VideoApp extends Component {
   };
 
   onPlayerReady(player) {
-    console.log("Player is ready: ", player);
+    // console.log("Player is ready: ", player);
     this.player = player;
   }
 
   onVideoPlay(duration) {
-    console.log("Video played at: ", duration);
+    // console.log("Video played at: ", duration);
   }
 
   onVideoPause(duration) {
-    console.log("Video paused at: ", duration);
+    // console.log("Video paused at: ", duration);
   }
 
   onVideoTimeUpdate(duration) {
-    console.log("Time updated: ", duration);
+    // console.log("Time updated: ", duration);
   }
 
   onVideoSeeking(duration) {
-    console.log("Video seeking: ", duration);
+    // console.log("Video seeking: ", duration);
   }
 
   onVideoSeeked(from, to) {
-    console.log(`Video seeked from ${from} to ${to}`);
+    // console.log(`Video seeked from ${from} to ${to}`);
   }
 
   onVideoEnd() {
-    console.log("Video ended");
+    // console.log("Video ended");
   }
 
   render() {
     return (
+      <div style={{ width: '100%', height: '100%' }}>
         <VideoPlayer
           controls={true}
           src={this.state.video.src}
@@ -53,6 +54,7 @@ class VideoApp extends Component {
           onSeeked={this.onVideoSeeked.bind(this)}
           onEnd={this.onVideoEnd.bind(this)}
         />
+      </div>
     );
   }
 }