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

gatsby-node.js

@@ -3,7 +3,7 @@ const fs = require(`fs`)
 const { slugify } = require("./utils/slugify")
 const { getGithubStats } = require("./utils/githubStats")
 const { getScreenshot } = require("./utils/screenshot")
-
+const { getThumbnailString } = require("./utils/thumbnail")
 // generate pages for slugs
 exports.createPages = async ({ graphql, actions }) => {
   const { createPage } = actions
@@ -152,5 +152,14 @@ exports.onCreateNode = async ({ node, actions }) => {
         value: screenshot,
       })
     }
+
+    const thumbnailString = await getThumbnailString(node.resources) 
+    if (thumbnailString) { 
+      createNodeField({ 
+        node, 
+        name: `thumbnail_string`, 
+        value: thumbnailString, 
+      }) 
+    } 
   }
 }

package.json

@@ -32,6 +32,7 @@
     "gatsby-transformer-remark": "^2.8.7",
     "gatsby-transformer-yaml": "^2.4.1",
     "gatsby-transformer-yaml-full": "^0.3.1",
+    "image-downloader": "^4.0.1",
     "node-fetch": "^2.6.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
@@ -41,7 +42,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,130 @@
+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"
+
+
+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 = item.thumbnail[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 }
@@ -42,35 +25,15 @@ const MainMedia = ({ tool }) => {
   }
 
   if (video) {
-    items.push({ type: "video", source: video })
-  }
+    const thumbJson = (tool.fields.thumbnail_string) ? 
+        JSON.parse(tool.fields.thumbnail_string) : {}
 
-  const carouselProps = {
-    responsive: {
-      all: {
-        breakpoint: { max: 3000, min: 0 },
-        items: 1,
-      },
-    },
-    infinite: true,
-    showDots: true,
+    items.push({ type: "video", source: video, thumbnail: thumbJson})
   }
 
   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>
   )
 }

src/templates/tool.js

@@ -307,6 +307,7 @@ export const query = graphql`
       fields {
         slug
         screenshot
+        thumbnail_string
         githubStats {
           stargazers_count
           created_at(formatString: "YYYY")