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

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