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 { &--right {
width: 48%; width: 48%;
height: 100%; height: 100%;
& img{
width: 100%;
}
} }
&--left { &--left {
padding-top: 20px; 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 React from "react";
import moment from "jalali-moment"; import moment from "jalali-moment";
import Reply from './Reply/index';
import "./index.scss"; import "./index.scss";
@ -27,13 +28,15 @@ export default function Comment(props) {
<strong style={{ fontSize: fontSize.mobile.strong }}>{comment.username}</strong> <strong style={{ fontSize: fontSize.mobile.strong }}>{comment.username}</strong>
<p style={{ fontSize: fontSize.mobile.p }}>{comment.text}</p> <p style={{ fontSize: fontSize.mobile.p }}>{comment.text}</p>
<span style={{ fontSize: fontSize.mobile.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span> <span style={{ fontSize: fontSize.mobile.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
{comment.reply ? <Reply reply={comment.reply} /> : null}
</div> </div>
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<div className="comment d-flex flex-column"> <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> </div>
) : null} ) : null}
</> </>

@ -36,16 +36,16 @@
color: #72891edc; color: #72891edc;
position: relative; position: relative;
width: 100%; width: 100%;
p{ &__text{
text-align: justify; text-align: justify;
font-family: numeralLight; font-family: numeralLight;
} }
strong{ &__user{
font-family: numeralMedium; font-family: numeralMedium;
margin-bottom: 5px; margin-bottom: 5px;
} }
span{ &__date{
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 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'; import './index.scss';
export default function Gallery(props) { export default function Gallery(props) {
const [selectedMedia,setSelectedMedia] = useState(props.gallery[1]);
const [modal, setModal] = useState(null);
return( return(
<> <>
{ {
window.innerWidth > 1000 ? window.innerWidth > 1000 ?
<section className="product-gallery d-flex flex-column"> <section className="product-gallery d-flex flex-column">
<div className="product-gallery__top"> <div className="product-gallery__top">
{
selectedMedia ?
<>
{
selectedMedia.type === 'image' ?
<img src={selectedMedia.value} alt={'عکس'} /> : null
}
{
selectedMedia.type === 'film' ?
<Video /> : null
}
</> : null
}
</div> </div>
<div className="product-gallery__list d-flex"> <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> </div>
{
modal ?
<Modal first={modal} gallery={props.gallery} setModal={setModal} /> : null
}
</section> : 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; height: 320px;
background-color: #eee; background-color: #eee;
border-radius: 20px; border-radius: 20px;
& img{
width: 100%;
height: 100%;
border-radius: 20px;
}
} }
&__list{ &__list{
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
& div{ }
min-width: 110px; &-item{
height: 110px; min-width: 110px;
background-color: #eee; height: 110px;
max-width: 110px;
border-radius: 20px;
position: relative;
margin: 5px;
cursor: pointer;
& img{
width: 100%;
height: 100%;
border-radius: 20px; 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 book3 from '../../assets/images/book3.png';
import book4 from '../../assets/images/book4.png'; import book4 from '../../assets/images/book4.png';
import book5 from '../../assets/images/book5.png'; import book5 from '../../assets/images/book5.png';
import film from '../../assets/Video/film.mp4';
import "./index.scss"; import "./index.scss";
@ -36,8 +37,8 @@ export default class Product extends Component {
<div className="product d-flex flex-column"> <div className="product d-flex flex-column">
<Navbar /> <Navbar />
<Breadcrumbs /> <Breadcrumbs />
<header class="product__header d-flex mt-4"> <header className="product__header d-flex mt-4">
<Gallery /> <Gallery gallery={product.gallery} />
<Info <Info
subTitle={product.subTitle} subTitle={product.subTitle}
title={product.title} 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: description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت", "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
comments: [ comments: [
@ -250,6 +257,7 @@ Product.defaultProps = {
date: new Date(), date: new Date(),
text: "عالی بود. ممنون از سایت زیباتون", text: "عالی بود. ممنون از سایت زیباتون",
score: 4, score: 4,
reply: 'ممنون از شما که به ما اعتماد کردید'
}, },
{ {
id: 1, id: 1,
@ -257,6 +265,7 @@ Product.defaultProps = {
date: new Date(), date: new Date(),
text: "عالی بود. ممنون از سایت زیباتون", text: "عالی بود. ممنون از سایت زیباتون",
score: 2.5, score: 2.5,
reply : '',
}, },
{ {
id: 2, id: 2,
@ -264,6 +273,7 @@ Product.defaultProps = {
date: new Date(), date: new Date(),
text: "عالی بود. ممنون از سایت زیباتون", text: "عالی بود. ممنون از سایت زیباتون",
score: 5, score: 5,
reply : '',
}, },
{ {
id: 3, id: 3,
@ -271,6 +281,7 @@ Product.defaultProps = {
date: new Date(), date: new Date(),
text: "عالی بود. ممنون از سایت زیباتون", text: "عالی بود. ممنون از سایت زیباتون",
score: 3.7, score: 3.7,
reply : '',
}, },
{ {
id: 4, id: 4,
@ -278,6 +289,7 @@ Product.defaultProps = {
date: new Date(), date: new Date(),
text: "عالی بود. ممنون از سایت زیباتون", text: "عالی بود. ممنون از سایت زیباتون",
score: 2, score: 2,
reply : '',
}, },
], ],
}, },

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

Loading…
Cancel
Save