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.
112 lines
3.7 KiB
112 lines
3.7 KiB
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[0]); |
|
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={`https://dnvn.ir/api/v1/file/${selectedMedia.id}`} |
|
alt={"عکس"} |
|
/> |
|
) : null} |
|
{selectedMedia.type === "film" ? <Video /> : null} |
|
</> |
|
) : null} |
|
</div> |
|
<div className="product-gallery__list d-flex"> |
|
{props.gallery.length > 3 ? ( |
|
<> |
|
<Item |
|
active={selectedMedia === props.gallery[0]} |
|
item={props.gallery[0]} |
|
key={props.gallery[0].id} |
|
more={false} |
|
setSelectedMedia={setSelectedMedia} |
|
setModal={setModal} |
|
/> |
|
<Item |
|
active={selectedMedia === props.gallery[1]} |
|
item={props.gallery[1]} |
|
key={props.gallery[1].id} |
|
more={false} |
|
setSelectedMedia={setSelectedMedia} |
|
setModal={setModal} |
|
/> |
|
<Item |
|
active={selectedMedia === props.gallery[2]} |
|
item={props.gallery[2]} |
|
key={props.gallery[2].id} |
|
more={true} |
|
setSelectedMedia={setSelectedMedia} |
|
setModal={setModal} |
|
/> |
|
</> |
|
) : ( |
|
<> |
|
{props.gallery.map((item, i) => ( |
|
<Item |
|
active={selectedMedia === 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, active } = props; |
|
return ( |
|
<> |
|
{window.innerWidth > 1000 ? ( |
|
<div |
|
style={{ border: active ? "4px solid #1BBC6E" : "" }} |
|
className="product-gallery-item d-flex" |
|
> |
|
{item.type === "image" ? ( |
|
<img src={`https://dnvn.ir/api/v1/file/${item.id}`} alt={"عکس"} /> |
|
) : null} |
|
{item.type === "film" ? ( |
|
<Video fileId={`https://dnvn.ir/api/v1/file/${item.id}`} /> |
|
) : 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} |
|
</> |
|
); |
|
};
|
|
|