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.
 
 
 

124 lines
4.0 KiB

import React, { 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);
//FIXME:
if (props.gallery[0] !== selectedMedia) setSelectedMedia(props.gallery[0]);
return (
<>
{window.innerWidth > 1000 ? (
<section
className={`product-gallery d-flex flex-column ${
window.lang === "en" ? "align-items-end" : ""
}`}
>
<div className="product-gallery__top">
{selectedMedia ? (
<>
{selectedMedia.type === "image" ? (
<img
src={`https://dnvn.ir/api/v1/file/${selectedMedia.id}`}
alt={window.t("عکس")}
/>
) : null}
{selectedMedia.type === "film" ? <Video /> : null}
</>
) : null}
</div>
<div
className={`product-gallery__list d-flex ${
window.lang === "en" ? "flex-row-reverse" : ""
}`}
>
{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={{ boxShadow: active ? "0px 0px 10px #1BBC6EEE" : "" }}
className="product-gallery-item d-flex"
>
{item.type === "image" ? (
<img
src={`https://dnvn.ir/api/v1/file/${item.id}`}
alt={window.t("عکس")}
/>
) : 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}
</>
);
};