reza added modal

master
ravino 3 years ago
parent 948de6f627
commit e399caa05b
  1. 3
      src/views/About/index.scss
  2. 27
      src/views/Product/Comment/Reply/index.js
  3. 15
      src/views/Product/Comment/Reply/index.scss
  4. 9
      src/views/Product/Comment/index.js
  5. 6
      src/views/Product/Comment/index.scss
  6. 68
      src/views/Product/Gallery/Modal/index.js
  7. 67
      src/views/Product/Gallery/Modal/index.scss
  8. 75
      src/views/Product/Gallery/index.js
  9. 34
      src/views/Product/Gallery/index.scss
  10. 16
      src/views/Product/index.js
  11. 38
      src/views/QR/VideoBox/React-video-js-player/index.js

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

@ -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;

@ -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;
}
}

@ -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>
<p style={{ fontSize: fontSize.desktop.p }}>{comment.text}</p>
<span style={{ fontSize: fontSize.desktop.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
<strong className="comment__user" style={{fontSize: fontSize.desktop.strong }}>{comment.username}</strong>
<p className="comment__text" style={{ fontSize: fontSize.desktop.p }}>{comment.text}</p>
<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}
</>

@ -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;

@ -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>
);
}

@ -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;
}
}
}
}

@ -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>
<div></div>
{
props.gallery.length > 3 ?
<>
<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
}
</>
);
}

@ -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{
min-width: 110px;
height: 110px;
background-color: #eee;
}
&-item{
min-width: 110px;
height: 110px;
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);
}
}
}

@ -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">
<Gallery />
<header className="product__header d-flex mt-4">
<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 : '',
},
],
},

@ -12,47 +12,49 @@ 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 (
<VideoPlayer
controls={true}
src={this.state.video.src}
onReady={this.onPlayerReady.bind(this)}
onPlay={this.onVideoPlay.bind(this)}
onPause={this.onVideoPause.bind(this)}
onTimeUpdate={this.onVideoTimeUpdate.bind(this)}
onSeeking={this.onVideoSeeking.bind(this)}
onSeeked={this.onVideoSeeked.bind(this)}
onEnd={this.onVideoEnd.bind(this)}
/>
<div style={{ width: '100%', height: '100%' }}>
<VideoPlayer
controls={true}
src={this.state.video.src}
onReady={this.onPlayerReady.bind(this)}
onPlay={this.onVideoPlay.bind(this)}
onPause={this.onVideoPause.bind(this)}
onTimeUpdate={this.onVideoTimeUpdate.bind(this)}
onSeeking={this.onVideoSeeking.bind(this)}
onSeeked={this.onVideoSeeked.bind(this)}
onEnd={this.onVideoEnd.bind(this)}
/>
</div>
);
}
}

Loading…
Cancel
Save