Learn page 4 call catalog section UI

README.md

@@ -6,7 +6,7 @@
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](https://github.com/orcasound/orcahome/blob/master/CONTRIBUTING.md)
 [![CI](https://github.com/orcasound/orcahome/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/orcasound/orcahome/actions/workflows/ci.yml)
 
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). Developed initially as a Google Summer of Code project in 2021 by [Isabella Macchiavello](https://www.linkedin.com/in/isabella-macchiavello-223338205/), the [code is deployed via Netlify](https://orcahome.netlify.app/). 
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). Developed initially as a Google Summer of Code project in 2021 by [Isabella Macchiavello](https://www.linkedin.com/in/isabella-macchiavello-223338205/), the [code is deployed via Netlify](https://orcahome.netlify.app/).
 
 ## Getting Started
 

package.json

@@ -26,7 +26,8 @@
     "react": "17.0.2",
     "react-audio-player": "^0.17.0",
     "react-dom": "17.0.2",
-    "react-scroll": "^1.8.4"
+    "react-scroll": "^1.8.4",
+    "use-sound": "^4.0.1"
   },
   "devDependencies": {
     "@types/node": "^16.11.22",

src/components/Learn/CallCatalogGrid.jsx

@@ -0,0 +1,168 @@
+import PauseCircleIcon from '@mui/icons-material/PauseCircle'
+import PlayCircleIcon from '@mui/icons-material/PlayCircle'
+import { Box, Button, Grid, IconButton, Link, Typography } from '@mui/material'
+import Image from 'next/image'
+import React from 'react'
+import useSound from 'use-sound'
+
+import SO1 from '../../../public/audio/FO-S01.mp3'
+import SO2 from '../../../public/audio/FO-S02.mp3'
+import SO3 from '../../../public/audio/FO-S03.mp3'
+import SO4 from '../../../public/audio/FO-S04.mp3'
+import SO5 from '../../../public/audio/FO-S05.mp3'
+import SO6 from '../../../public/audio/FO-S06.mp3'
+import FOS01 from '../../../public/images/learn/FO-S01.png'
+import FOS02 from '../../../public/images/learn/FO-S02.png'
+import FOS03 from '../../../public/images/learn/FO-S03.png'
+import FOS04 from '../../../public/images/learn/FO-S04.png'
+import FOS05 from '../../../public/images/learn/FO-S05.png'
+import FOS06 from '../../../public/images/learn/FO-S06.png'
+
+const CallCatalogGrid = () => {
+  const [isPlaying, setIsPlaying] = React.useState(Array(6).fill(false))
+
+  const [playS01, { stop: stopS01 }] = useSound(SO1)
+  const [playS02, { stop: stopS02 }] = useSound(SO2)
+  const [playS03, { stop: stopS03 }] = useSound(SO3)
+  const [playS04, { stop: stopS04 }] = useSound(SO4)
+  const [playS05, { stop: stopS05 }] = useSound(SO5)
+  const [playS06, { stop: stopS06 }] = useSound(SO6)
+
+  const playArray = [playS01, playS02, playS03, playS04, playS05, playS06]
+  const stopArray = [stopS01, stopS02, stopS03, stopS04, stopS05, stopS06]
+  const spectrogram = [FOS01, FOS02, FOS03, FOS04, FOS05, FOS06]
+  const orcaCallTags = [
+    'Orca call S01',
+    'Orca call S02',
+    'Orca call S03',
+    'Orca call S04',
+    'Orca call S05',
+    'Orca call S06-L',
+  ]
+
+  function playSound(index) {
+    const updatedIsPlaying = [...isPlaying]
+    updatedIsPlaying[index] = true
+    setIsPlaying(updatedIsPlaying)
+    playArray[index]()
+  }
+
+  function stopSound(index) {
+    const updatedIsPlaying = [...isPlaying]
+    updatedIsPlaying[index] = false
+    setIsPlaying(updatedIsPlaying)
+    stopArray[index]()
+  }
+
+  return (
+    <div>
+      <Box
+        sx={{
+          borderRadius: '33px',
+          bgcolor: '#ffff',
+          my: '50px',
+          py: '50px',
+          px: '20px',
+          textAlign: 'center',
+        }}
+      >
+        <Grid
+          container
+          spacing={{ xs: 2, md: 8 }}
+          columns={{ xs: 4, sm: 8, md: 12 }}
+          px={{ xs: '5px', md: '30px' }}
+        >
+          {playArray.map((play, index) => (
+            <Grid
+              item
+              xs={12}
+              sm={6}
+              md={4}
+              key={index}
+              sx={{
+                position: 'relative',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+              }}
+            >
+              <Box
+                sx={{
+                  position: 'relative',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  height: '100%',
+                }}
+              >
+                <Image
+                  src={spectrogram[index]}
+                  alt={`Orca Call ${index}`}
+                  style={{ width: '100%' }}
+                />
+                <Box
+                  sx={{
+                    position: 'absolute',
+                    top: '40%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    marginTop: '20px',
+                  }}
+                >
+                  {isPlaying[index] ? (
+                    <IconButton
+                      onClick={() => stopSound(index)}
+                      sx={{
+                        color: '#c4c4c4',
+                      }}
+                    >
+                      <PauseCircleIcon
+                        sx={{
+                          fontSize: 100,
+                        }}
+                      />
+                    </IconButton>
+                  ) : (
+                    <IconButton
+                      onClick={() => playSound(index)}
+                      sx={{
+                        color: '#c4c4c4',
+                      }}
+                    >
+                      <PlayCircleIcon
+                        sx={{
+                          fontSize: { xs: 80, md: 90, lg: 100 },
+                        }}
+                      />
+                    </IconButton>
+                  )}
+                </Box>
+              </Box>
+              <Typography mt={1} variant="p" fontSize="20px" color="black">
+                {orcaCallTags[index]}
+              </Typography>
+            </Grid>
+          ))}
+        </Grid>
+        <Link
+          href="https://orcasound.net/data/product/SRKW/call-catalog/no-narration_flac+mp3+ogg+spectrograms/mp3/"
+          target="_blank"
+        >
+          <Button
+            variant="contained"
+            sx={{
+              borderRadius: '30px',
+              mt: 6,
+              py: 2,
+              px: 5,
+            }}
+          >
+            Access Call Catalog
+          </Button>
+        </Link>
+      </Box>
+    </div>
+  )
+}
+
+export default CallCatalogGrid

src/components/Link.tsx

@@ -7,13 +7,17 @@ import clsx from 'clsx'
 import NextLink, { LinkProps as NextLinkProps } from 'next/link'
 import { useRouter } from 'next/router'
 import { forwardRef } from 'react'
+import * as React from 'react'
 
 // Add support for the sx prop for consistency with the other branches.
 const Anchor = styled('a')({})
 
 interface NextLinkComposedProps
   extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
-    Omit<NextLinkProps, 'href' | 'as'> {
+    Omit<
+      NextLinkProps,
+      'href' | 'as' | 'onClick' | 'onMouseEnter' | 'onTouchStart'
+    > {
   to: NextLinkProps['href']
   linkAs?: NextLinkProps['as']
   href?: NextLinkProps['href']

src/pages/learn.jsx

@@ -1,3 +1,4 @@
+import { Typography } from '@mui/material'
 import Head from 'next/head'
 import Image from 'next/image'
 import ReactAudioPlayer from 'react-audio-player'
@@ -9,6 +10,7 @@ import organization1 from '../../public/images/partner1.png'
 import organization2 from '../../public/images/partner2.png'
 import roundorca from '../../public/images/roundorca.png'
 import salishsea from '../../public/images/salishsea.png'
+import CallCatalogGrid from '../components/Learn/CallCatalogGrid'
 import TopBanner from '../components/TopBanner'
 import learnStyles from '../styles/Learn.module.css'
 
@@ -18,7 +20,6 @@ export const learn = () => {
       <Head>
         <title>Orcasound</title>
       </Head>
-
       <TopBanner
         bannerImg={LearnBanner}
         pageTitle={`Learn`}
@@ -113,6 +114,21 @@ export const learn = () => {
           educational organizations in the Pudget Sound regions`}
         </p>
       </div>
+
+      <div className={learnStyles.callCatalog}>
+        <Typography variant="h1" fontSize="44px" align="left" mt={5} mb={3}>
+          Southern Resident Killer Whale Call Catalog
+        </Typography>
+        <Typography variant="p" fontSize="20px" align="left">
+          Now that you’ve familiarized youself with the 3 most common calls,
+          dive in to the call catalog to learn the vocalizations you will hear
+          when listening to the livestreaming hydrophones during orca events.
+        </Typography>
+        <br />
+        <br />
+        <CallCatalogGrid />
+      </div>
+
       <div className={learnStyles.org}>
         <Image src={organization1} alt="Seattle aquarium exhibit" />
         <a href="https://killerwhaletales.org/">

src/styles/Learn.module.css

@@ -102,6 +102,13 @@
   text-align: left;
 }
 
+.callCatalog {
+  background-color: #090f2e;
+  color: white;
+  padding: 40px 100px;
+  /* margin: top & bottom depending on sections above and below */
+}
+
 .org {
   width: 100%;
   height: auto;