adding code to show thumbnails below tool media carousel (#20)

package.json

@@ -41,7 +41,9 @@
     "react-multi-carousel": "^2.5.5",
     "react-player": "^2.6.2",
     "react-select": "^3.1.0",
+    "react-slick": "0.26",
     "react-typography": "^0.16.19",
+    "slick-carousel": "^1.8.1",
     "styled-components": "^5.1.0",
     "tailwindcss": "^1.4.6",
     "twin.macro": "^1.1.0",

src/components/tool/main-media-util-helper.js

@@ -0,0 +1,68 @@
+import { css } from "twin.macro"
+export const SliderContentImageStyle = css`
+    height: inherit;  
+    margin-left: auto;  
+    margin-right: auto;  
+  `
+export const SliderStyle = css`
+    .slick-prev:before,
+    .slick-next:before {
+      color: #222425!important;
+    }
+    .slick-slide {
+      padding: 0rem 1rem 0rem 1rem;
+    }
+  `
+export const SliderContentStyle = css`
+    margin: 1rem 0rem 1rem 0.1rem;
+    transition: transform .2s;
+    height: 8rem;
+    background: #f7f7f7;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 0.5rem;
+
+    &:hover {
+      -ms-transform: scale(1.005);
+      -webkit-transform: scale(1.005);
+      transform: scale(1.005);
+    }
+
+    &:focus {
+      outline: none;
+      -webkit-box-shadow: 0px 0px 4px 0px rgba(173,173,173,1);
+      -moz-box-shadow: 0px 0px 4px 0px rgba(173,173,173,1);
+      box-shadow: 0px 0px 4px 0px rgba(173,173,173,1);
+    }
+  ` 
+export const getSliderSetting = noOfElements => {
+  const maxSlidesToShow = noOfElements < 3 ? 2 : 3;
+  return {
+    focusOnSelect: true,
+    dots: true,
+    infinite: false,
+    speed: 500,
+    slidesToShow: maxSlidesToShow,
+    slidesToScroll: 1,
+    responsive: [{
+        breakpoint: 1200,
+        settings: {
+          slidesToShow: maxSlidesToShow,
+          slidesToScroll: 1
+        }
+      }, {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 1
+        }
+      }, {
+        breakpoint: 480,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1
+        }
+      }
+    ]
+  }
+}

src/components/tool/main-media-util.js

@@ -0,0 +1,167 @@
+import React, { useState, useEffect } from "react"
+import tw, { css } from "twin.macro"
+import ReactPlayer from "react-player/lazy"
+import "slick-carousel/slick/slick.css"
+import "slick-carousel/slick/slick-theme.css"
+import Slider from "react-slick"
+import {
+  SliderContentImageStyle, 
+  SliderStyle, 
+  SliderContentStyle,
+  getSliderSetting
+} from "./main-media-util-helper"
+
+/**
+ * 
+ * **Credits**  
+ *    Author : yangshun
+ *    Gist link : https://gist.github.com/yangshun/9892961
+ */
+const parseVideo = url => {
+  url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(&\S+)?/);
+
+  const type = RegExp.$3.indexOf("youtu") > -1 ? "youtube" :
+              RegExp.$3.indexOf("vimeo") > -1 ? "vimeo" 
+              : undefined
+
+  return {
+    type: type,
+    id: RegExp.$6
+  }
+}
+
+const getVideoThumbnailUrl = async url => {
+  const video = parseVideo(url)
+  if (video.type === "youtube")
+    return video.id ? "https://img.youtube.com/vi/" + video.id + "/maxresdefault.jpg" : "#"
+  if (video.type === "vimeo") {
+    const fetched = (async videoId => {
+      let result = {}
+      try {
+        const response = await fetch("https://vimeo.com/api/v2/video/" + videoId + ".json")
+        result = await response.json()
+        return result[0].thumbnail_large
+      } catch (e) {
+        console.error("Error while fetching Vimeo video data", e)
+      }
+    })
+    return fetched(video.id)
+  }
+}
+
+const renderMainMediaDisplayElement = {
+  video: video => {
+    return (
+      <div tw="h-full text-center" key={video.key} id={video.key} css={video.css}>
+        <ReactPlayer url={video.url} width="100%" controls={true}/>
+      </div>
+    )
+  },
+  image: image => (
+    <a href={image.url} tw="w-full text-center" css={image.css}
+    key={image.key} id={image.key}>
+      <img
+        alt={`Screenshot of ${image.name} website`}
+        tw="border-4 max-w-full inline-block"
+        src={image.src}
+      />
+    </a>
+  ),
+}
+
+const renderMainMediaSliderElement = {
+  video: video => sliderThumbnail(video),
+  image: image => sliderThumbnail(image)
+}
+
+const sliderThumbnail = props => {
+  props = props || {}
+  const src = props.src || props.thumbnailSrc || "#"
+  const alt = props.name || "Thumbnail"
+  return (
+    <div css={[SliderContentStyle]} 
+    id={props.key}
+    key={props.key}
+    onClick={props.onClick}
+    aria-hidden="true">
+      <img 
+      alt={alt}
+      id={props.key + "_img"}
+      key={props.key + "_img"}
+      src={src}
+      css={[
+        tw`border-4 max-w-full`,
+        SliderContentImageStyle
+      ]}
+      />
+    </div>
+  )
+}
+
+export const MainMediaUtil = ({data}) => {
+  const [items] = useState(data)
+  const [index, setIndex] = useState(0)
+  const [isRendered, setIsRendered] = useState(false)
+  const [hasThumbnails, setHasThumbnails] = useState(false)
+  const sliderSetting = getSliderSetting(items.length)
+
+  const toggleDisplayStatusOfElement = options => {
+    options = options || {}
+    const idForElementToDisplay = "#main_media_util_in_display_" + index
+    const elementToDisplay = document.querySelector(idForElementToDisplay)
+    elementToDisplay.setAttribute('style', options.style || 'display:block')
+
+    if (isRendered) return
+    const idForElementToFocus = "#main_media_util_" + index
+    const elementToFocus = document.querySelector(idForElementToFocus)
+    elementToFocus.focus({ preventScroll: true })
+    setIsRendered(true)
+  }
+
+  const populateVideoThumbnails = async () => {
+    items.map(async item => {
+      if (item.type !== "video") return
+      const url = await getVideoThumbnailUrl(item.source.url)
+      const target = document.querySelector("#" + item.source.key + "_img")
+      target.setAttribute("src", url)
+    })
+    setHasThumbnails(true)
+  }
+
+  useEffect(() => {
+    if (items.length > 1) toggleDisplayStatusOfElement()
+    if (!hasThumbnails) populateVideoThumbnails()
+  })
+
+  return items && items.length > 1 ? (
+    <>
+      <div tw="items-center h-full mb-1">
+        {items.map((item, itemIndex) => {
+          item.source.key = "main_media_util_in_display_" + itemIndex
+          item.source.css = css`display:none;`
+          return renderMainMediaDisplayElement[item.type](item.source)
+        })}
+      </div>
+      <div tw="items-center h-full ml-2 mr-2">
+        <Slider {...sliderSetting} css={[SliderStyle]}>
+          {items.map((item, itemIndex) => {
+            item.source.key = "main_media_util_" + itemIndex 
+            item.source.onClick = () => { 
+              if (itemIndex === index) return
+              toggleDisplayStatusOfElement({style : 'display:none' })
+              setIndex(itemIndex) 
+            }
+            return renderMainMediaSliderElement[item.type](item.source)
+          })}
+        </Slider>
+      </div>
+    </>
+  ) : (
+    <div tw="flex justify-center items-center h-full mb-5 pb-4">
+      {items && items.map(item => {
+        item.source.key = "main_media_util_in_display_0"
+        return renderMainMediaDisplayElement[item.type](item.source)
+      })}
+    </div>
+  )
+}

src/components/tool/main-media.js

@@ -1,7 +1,6 @@
 import React from "react"
 import "twin.macro"
-import ReactPlayer from "react-player/lazy"
-import Carousel from "react-multi-carousel"
+import { MainMediaUtil } from "./main-media-util"
 
 const getVideo = resources => {
   if (!resources) {
@@ -15,22 +14,6 @@ const getVideo = resources => {
   }
 }
 
-const renders = {
-  video: video => (
-    <ReactPlayer tw="max-w-full" url={video.url} width="100%" controls="true" />
-  ),
-  image: image => (
-    <a href={image.url} tw="w-full text-center">
-      <img
-        alt={`Screenshot of ${image.name} website`}
-        tw="border-4 max-w-full inline-block"
-        src={image.src}
-        height="360"
-      />
-    </a>
-  ),
-}
-
 const MainMedia = ({ tool }) => {
   const { name, homepage, resources } = tool
   let screenshot = { name, url: homepage, src: tool.fields.screenshot }
@@ -45,32 +28,9 @@ const MainMedia = ({ tool }) => {
     items.push({ type: "video", source: video })
   }
 
-  const carouselProps = {
-    responsive: {
-      all: {
-        breakpoint: { max: 3000, min: 0 },
-        items: 1,
-      },
-    },
-    infinite: true,
-    showDots: true,
-  }
-
   return (
     <div tw="mb-5">
-      {items.length > 1 ? (
-        <Carousel {...carouselProps}>
-          {items.map(item => (
-            <div tw="flex justify-center items-center h-full mb-5 pb-4">
-              {renders[item.type](item.source)}
-            </div>
-          ))}
-        </Carousel>
-      ) : (
-        <div tw="flex justify-center items-center h-full mb-5 pb-4">
-          {renders[items[0].type](items[0].source)}
-        </div>
-      )}
+      <MainMediaUtil data={items} />
     </div>
   )
 }