video and new shapes

demo/src/index.js

@@ -1,22 +1,52 @@
-import React, {Component} from 'react'
-import {render} from 'react-dom'
-import '../../src/css/style.css';
-import FbImageLibrary from '../../src'
+import React, { Component } from "react";
+import { render } from "react-dom";
+// import '../../src/css/style.css';
+import FbImageLibrary from "../../src";
 
-const images = ['https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350',
-    'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg',
-    'https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg',
-    'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg',
-    'https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&h=350',
-    "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350",
-    "https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg"]
+const images = [
+  {
+    media:
+      "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350",
+    type: "image",
+  },
+  {
+    media:
+      "https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg",
+    type: "image",
+  },
+  {
+    media:
+      "https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg",
+    type: "image",
+  },
+  {
+    media:
+      "https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg",
+    type: "image",
+  },
+  {
+    media:
+      "https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&h=350",
+    type: "image",
+  },
+  {
+    media:
+      "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350",
+    type: "image",
+  },
+  {
+    media:
+      "https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg",
+    type: "image",
+  },
+];
 
-class Demo extends Component {
-    render() {
-        return <div>
-            <FbImageLibrary images={images}/>
-        </div>
-    }
-}
+const Demo = () => {
+  return (
+    <div>
+      <FbImageLibrary images={images} />
+    </div>
+  );
+};
 
-render(<Demo/>, document.querySelector('#demo'))
+render(<Demo />, document.querySelector("#demo"));

package.json

@@ -20,10 +20,13 @@
     "test:watch": "nwb test-react --server"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "@material-ui/core": "^3.1.2",
     "@material-ui/icons": "^3.0.1",
-    "react-bootstrap": "^0.32.4",
-    "react-image-lightbox": "^5.0.0"
+    "@mui/material": "^5.10.6",
+    "react-icons": "^4.4.0",
+    "react-player": "^2.11.0"
   },
   "peerDependencies": {
     "react": "16.x"

src/components/FbCarousel/CarouselShapes/FirstShape.js

@@ -0,0 +1,76 @@
+import { Grid } from "@mui/material";
+import React, { Fragment, useState } from "react";
+import ReactPlayer from "react-player";
+import { oneImageBackground } from "./ShapesStyles";
+
+const FirstShape = ({ images, openModal, cover, coverThreePhotos, sharp }) => {
+  const [paddingTop, setPaddingTop] = useState(0);
+
+  const onImageLoad = async ({ target, current }) => {
+    const calculatedPadding = (target.height / target.width) * 100;
+    calculatedPadding < 100
+      ? setPaddingTop(calculatedPadding)
+      : setPaddingTop(100);
+  };
+  return (
+    <Fragment>
+      <Grid
+        container
+        sx={{
+          maxHeight: "600px",
+          overflow: "hidden",
+        }}
+      >
+        {images[0].type.includes("image") ? (
+          <Grid
+            item
+            xs={12}
+            sx={{
+              ...oneImageBackground,
+              border: !sharp && "2px solid white;",
+              borderRadius: !sharp && "6px;",
+              width: 1,
+              paddingTop: `${
+                (cover && 100) || (coverThreePhotos && 40) || paddingTop
+              }%`,
+              backgroundImage: `url(${images[0].media})`,
+              backgroundSize: cover || coverThreePhotos ? "cover" : "contain",
+            }}
+            onClick={() => openModal(0)}
+          >
+            <img
+              src={images[0].media}
+              style={{ display: "none" }}
+              alt=""
+              onLoad={onImageLoad}
+            />
+          </Grid>
+        ) : (
+          <Grid
+            item
+            xs={12}
+            sx={{
+              width: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "black",
+            }}
+            onClick={() => openModal(0)}
+          >
+            <ReactPlayer
+              url={images[0].media}
+              controls
+              width={"100%"}
+              style={{
+                maxHeight: "600px",
+              }}
+            />
+          </Grid>
+        )}
+      </Grid>
+    </Fragment>
+  );
+};
+
+export default FirstShape;

src/components/FbCarousel/CarouselShapes/IfVideoPreview.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { Fragment } from "react";
+import { HiPlay } from "react-icons/hi";
+
+export const IfVideoPreview = ({ item }) => {
+  return (
+    <Fragment>
+      {item.type.includes("video") && (
+        <Box sx={{ height: 1, position: "relative" }}>
+          <Box
+            sx={{
+              position: "absolute",
+              top: "50%",
+              right: "50%",
+              transform: "translate(50%, -50%)",
+              color: "rgba(0, 0, 0, 0.6)",
+              // "& :hover": { color: "rgba(0, 0, 0, 0.8)" },
+            }}
+          >
+            <HiPlay size={60} />
+          </Box>
+          <video style={{ width: "100%", height: "100%" }} src={item.media} />
+        </Box>
+      )}
+    </Fragment>
+  );
+};

src/components/FbCarousel/CarouselShapes/SecondShape.js

@@ -0,0 +1,70 @@
+import React from "react";
+import { Grid } from "@mui/material";
+import { IfVideoPreview } from "./IfVideoPreview";
+import { imageBackground } from "./ShapesStyles";
+
+const checkImage = (item) => {
+  if (item.type.includes("image")) {
+    return true;
+  }
+  return false;
+};
+
+const SecondShape = ({ images, openModal, sharp, cover }) => {
+  const conditionalRender = [3, 4].includes(images.length);
+  return (
+    <Grid container sx={{ height: 1 }}>
+      <Grid
+        item
+        xs={6}
+        container
+        direction="column"
+        onClick={() => openModal(conditionalRender ? 1 : 0)}
+        sx={{
+          ...imageBackground,
+          border: !sharp && "2px solid white;",
+          borderRadius: !sharp && "6px;",
+          width: 0.5,
+          pt:
+            checkImage(conditionalRender ? images[1] : images[0]) &&
+            (cover ? "100%" : "50%"),
+          backgroundImage: `url(${
+            conditionalRender ? images[1].media : images[0].media
+          })`,
+          backgroundColor: "black",
+          backgroundSize: "cover",
+        }}
+      >
+        <Grid item xs={12} sx={{ height: 1, backgroundColor: "black" }}>
+          <IfVideoPreview item={conditionalRender ? images[1] : images[0]} />
+        </Grid>
+      </Grid>
+      <Grid
+        item
+        xs={6}
+        container
+        direction="column"
+        onClick={() => openModal(conditionalRender ? 2 : 1)}
+        sx={{
+          ...imageBackground,
+          border: !sharp && "2px solid white;",
+          borderRadius: !sharp && "6px;",
+          width: 0.5,
+          pt:
+            checkImage(conditionalRender ? images[2] : images[1]) &&
+            (cover ? "100%" : "50%"),
+          background: `url(${
+            conditionalRender ? images[2].media : images[1].media
+          })`,
+          backgroundColor: "black",
+        }}
+      >
+        <Grid item xs={12} sx={{ height: 1, backgroundColor: "black" }}>
+          <IfVideoPreview item={conditionalRender ? images[2] : images[1]} />
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default SecondShape;

src/components/FbCarousel/CarouselShapes/ShapesStyles.js

@@ -0,0 +1,36 @@
+export const imageBackground = {
+  backgroundSize: "cover !important",
+  backgroundPosition: "center !important",
+  backgroundRepeat: "no-repeat !important",
+  cursor: "pointer",
+};
+
+export const oneImageBackground = {
+  backgroundSize: "contain !important",
+  backgroundPosition: "center !important",
+  backgroundRepeat: "no-repeat !important",
+  cursor: "pointer",
+};
+
+export const Cover = {
+  backgroundColor: "#222",
+  opacity: 0.8,
+  position: "absolute",
+  right: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  borderRadius: "6px",
+};
+
+export const CoverText = {
+  right: "50%",
+  color: "white",
+  fontSize: "7%",
+  position: "absolute",
+  top: "50%",
+  "-webkit-transform": "translate(50%, -50%)",
+  "-ms-transform": "translate(50%, -50%)",
+  transform: "translate(50%, -50%)",
+  textAlign: "center",
+};