Add weather sounds

package.json

@@ -13,10 +13,13 @@
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv": "^16.0.0",
+    "howler": "^2.2.3",
     "react": "^17.0.2",
     "react-bootstrap": "^2.2.1",
     "react-dom": "^17.0.2",
     "react-google-autocomplete": "^2.6.1",
+    "react-howler": "^5.2.0",
+    "react-icons": "^4.3.1",
     "react-lottie": "^1.2.3",
     "react-multi-carousel": "^2.8.0",
     "react-places-autocomplete": "^7.3.0",

src/App.js

@@ -7,6 +7,7 @@ import HourlyForecast from "./components/HourlyForecast/HourlyForecast.js";
 import Suggestions from "./components/SuggestedItems/SuggestedItems";
 import SongRecommendation from "./components/SongRecommendation/SongRecommendation";
 import Background from "./components/Background";
+import WeatherSounds from "./components/WeatherSound/WeatherSound";
 
 const App = () => {
   const [error, setError] = useState(null);
@@ -164,6 +165,7 @@ const App = () => {
       <>
         <img className="logo" src={logo} alt="MLH Prep Logo"></img>
         <div>
+
           <h2>Enter a city below 👇</h2>
 
           <SearchBox setCity={setCity} />
@@ -172,7 +174,11 @@ const App = () => {
             {!isLoaded && <h2>Loading...</h2>}
             {isLoaded && results && (
               <>
+
+              <WeatherSounds weatherName={results.weather[0].main} />
+
                 <Background currweather={results.weather[0].main} />
+
                 <h3>{results.weather[0].main}</h3>
                 <p>Feels like {feels_like}</p>
                 <i>

src/components/SuggestedItems/SuggestionCard.js

@@ -6,12 +6,12 @@ const SuggestionCard = ({ item }) => {
     '.json');
 
   return (
-    <div className='card'>
-      <div className='card-img'>
+    <div className='suggestion-card'>
+      <div className='suggestion-card-img'>
         <LottieControl animationData={file} />
       </div>
 
-      <h2 className='primary-text'>
+      <h2 className='suggestion-primary-text'>
         {' '}
         {item} <br />
       </h2>

src/components/SuggestedItems/suggestions.css

@@ -44,14 +44,14 @@
     color: #777777;
   }
 
-  .card{
+  .suggestion-card{
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(35px);
     border-top: 2px solid rgba(255, 255, 255, 0.1);
     border-bottom: 2px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
 }
-.card-img{
+.suggestion-card-img{
     height: 120px;
     width: 120px;
     justify-content: space-around;
@@ -63,7 +63,7 @@
 }
 
 
-.primary-text{
+.suggestion-primary-text{
     color: #d5d5d5;
     font-weight: 600;
     letter-spacing: 0.7px;

src/components/WeatherSound/WeatherSound.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Howl } from 'howler';
+import ReactHowler from 'react-howler';
+import './weatherSounds.css';
+import rain from '../../assets/sounds/LightRain.mp3';
+import snow from '../../assets/sounds/Snow.mp3';
+import drizzle from '../../assets/sounds/RainBackVerandah.mp3';
+import thunderstorm from '../../assets/sounds/RollingThunder.mp3';
+import wind from '../../assets/sounds/Wind.mp3';
+import {BsFillVolumeMuteFill, BsFillVolumeUpFill} from 'react-icons/bs';
+
+const soundMap = {
+  Thunderstorm: thunderstorm,
+  Drizzle: drizzle,
+  Rain: rain,
+  Snow: snow,
+  Wind: wind
+};
+
+class WeatherSounds extends React.Component {
+
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      playing: false
+    }
+    this.handlePlay = this.handlePlay.bind(this)
+    this.handlePause = this.handlePause.bind(this)
+  }
+
+  handlePlay () {
+    this.setState({
+      playing: true
+    })
+  }
+
+  handlePause () {
+    this.setState({
+      playing: false
+    })
+  }
+
+  render () {
+
+      return (
+        <div>
+          <ReactHowler
+            src={soundMap[this.props.weatherName] ?? rain}
+            playing={this.state.playing}
+          />
+          {
+            this.state.playing ? 
+            <BsFillVolumeUpFill  onClick={this.handlePause} size = {32}></BsFillVolumeUpFill>:
+            <BsFillVolumeMuteFill onClick={this.handlePlay} size = {32}></BsFillVolumeMuteFill>
+          }
+        </div>
+      )
+  }
+}
+
+export default WeatherSounds;

src/components/WeatherSound/weatherSounds.css

@@ -0,0 +1,61 @@
+
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+  }
+
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .soundslider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+  }
+
+  .soundslider:before {
+    position: absolute;
+    content: '';
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+  }
+
+  input:checked + .soundslider {
+    background-color: #dfbe13;
+  }
+
+  input:focus + .soundslider {
+    box-shadow: 0 0 1px #2196f3;
+  }
+
+  input:checked + .soundslider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+  }
+
+  /* Rounded sliders */
+  .soundslider.round {
+    border-radius: 34px;
+  }
+
+  .soundslider.round:before {
+    border-radius: 50%;
+  }

yarn.lock

@@ -2216,6 +2216,7 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.22.tgz#38b6c4b9b2f3ed9f2e376cce42a298fb2375251e"
   integrity sha512-8FwbVoG4fy+ykY86XCAclKZDORttqE5/s7dyWZKLXTdv3vRy5HozBEinG5IqhvPXXzIZEcTVbuHlQEI6iuwcmw==
 
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@@ -3717,9 +3718,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001317:
-  version "1.0.30001319"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001319.tgz#eb4da4eb3ecdd409f7ba1907820061d56096e88f"
-  integrity sha512-xjlIAFHucBRSMUo1kb5D4LYgcN1M45qdKP++lhqowDpwJwGkpIRTt5qQqnhxjj1vHcI7nrJxWhCC1ATrCEBTcw==
+  version "1.0.30001320"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001320.tgz#8397391bec389b8ccce328636499b7284ee13285"
+  integrity sha512-MWPzG54AGdo3nWx7zHZTefseM5Y1ccM7hlQKHRqJkPozUaw3hNbBTMmLn16GG2FUzjR13Cr3NPfhIieX5PzXDA==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -5121,9 +5122,10 @@ ejs@^2.6.1:
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
 electron-to-chromium@^1.3.564, electron-to-chromium@^1.4.84:
-  version "1.4.90"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.90.tgz#4a518590f118828d54fff045728f547fef08143f"
-  integrity sha512-ZwKgSA0mQMyEhz+NR0F8dRzkrCLeHLzLkjx/CWf16+zV85hQ6meXPQbKanvhnpkYb7b2uJNj+enQJ/N877ND4Q==
+  version "1.4.92"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.92.tgz#88996e9aceb3a500710fd439abfa89b6cc1ac56c"
+  integrity sha512-YAVbvQIcDE/IJ/vzDMjD484/hsRbFPW2qXJPaYTfOhtligmfYEYOep+5QojpaEU9kq6bMvNeC2aG7arYvTHYsA==
+
 
 elliptic@^6.5.3:
   version "6.5.4"
@@ -6529,6 +6531,11 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
+howler@^2.2.0, howler@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.3.tgz#a2eff9b08b586798e7a2ee17a602a90df28715da"
+  integrity sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg==
+
 hosted-git-info@^4.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-4.1.0.tgz#827b82867e9ff1c8d0c4d9d53880397d2c86d224"
@@ -6543,6 +6550,7 @@ hosted-git-info@^5.0.0:
   dependencies:
     lru-cache "^7.5.1"
 
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
@@ -8762,6 +8770,7 @@ minimatch@^3.0.4, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+
 minimatch@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.0.1.tgz#fb9022f7528125187c92bd9e9b6366be1cf3415b"
@@ -10735,7 +10744,7 @@ prop-types-extra@^1.1.0:
     react-is "^16.3.2"
     warning "^4.0.0"
 
-prop-types@^15.5.0, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.0, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -10990,6 +10999,19 @@ react-google-autocomplete@^2.6.1:
     lodash.debounce "^4.0.8"
     prop-types "^15.5.0"
 
+react-howler@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-howler/-/react-howler-5.2.0.tgz#fceef108f7c691f570155afee1c1436265218219"
+  integrity sha512-oDK+zML0MHf3nVNM4lMxh+re87NDa7fHowea2WK8197yqnMiZfPVHoMXtfb/PtuoOsWLO06vmEAtovwTRWpTFg==
+  dependencies:
+    howler "^2.2.0"
+    prop-types "^15.5.6"
+
+react-icons@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
+  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
+
 react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"