Merge pull request #40 from gabrielduete/feat/use-localstorage-sounds

feat: use localstorage sounds
gabrielduete · Apr 7, 2024 · 09fb798 · 09fb798
2 parents dac1438 + 17d075c
commit 09fb798
Show file tree

Hide file tree

Showing 20 changed files with 76 additions and 53 deletions.
diff --git a/pages/_app.page.tsx b/pages/_app.page.tsx
@@ -10,10 +10,7 @@ function MyApp({ Component, pageProps }: AppProps) {
       <GlobalStyle />
       <Head>
         <title>sandevistan</title>
-        <link
-          rel='icon'
-          href='https://cdn.discordapp.com/attachments/778024116140769331/1157476264165249135/logo.png?ex=6518bf46&is=65176dc6&hm=8a17328726bd0b87caf469a81abc88716decf38c4fab756e3bc181fe08b0b5c3&'
-        />
+        <link rel='icon' href='/assets/images/logo.png' />
       </Head>
       <Component {...pageProps} />
     </>

diff --git a/pages/about/index.page.tsx b/pages/about/index.page.tsx
@@ -15,7 +15,7 @@ const About = () => {
             page. It will be automatically updated whenever I make any changes.
           </p>
           <S.Image
-            src='https://cdn.discordapp.com/attachments/778024116140769331/1169037507028066365/SandevistanApogee.webp?ex=6553f205&is=65417d05&hm=cc4b60e4129c26e12d1e2bbe59f163a06f04bfb44e0af0d14c15f44cd8e64e57&'
+            src='/assets/images/sandevistan.png'
             alt='Militech apogee Sandevistan'
           />
           <p>

diff --git a/pages/index.page.tsx b/pages/index.page.tsx
@@ -2,10 +2,8 @@ import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'
 import type { NextPage } from 'next'
 import { useEffect } from 'react'
 import { useGlitch } from 'react-powerglitch'
-import Sound from 'react-sound'
 import Equalizer from '~/src/components/Equalizer'
-import { SoundClickButton, SoundGlitch } from '~/src/utils/Sounds'
-import { settingsSound } from '~/src/utils/settingsHome'
+import { SoundClickButton, SoundGlitch } from '~/src/utils/sounds'
 
 import * as S from './styles'
 
@@ -16,17 +14,18 @@ const Home: NextPage = () => {
     const timer = setInterval(() => {
       SoundGlitch()
     }, 2090)
+
     return () => clearInterval(timer)
   }, [])
 
   const redirectToAbout = () => {
     SoundClickButton()
+
     window.open('/about', '_self', 'noreferrer')
   }
 
   return (
     <>
-      <Sound playStatus='PLAYING' {...settingsSound} />
       <S.Wrapper>
         <S.Content>
           <S.Title ref={glitch.ref}>sandevistan</S.Title>

diff --git a/public/assets/images/logo.png b/public/assets/images/logo.png
diff --git a/public/assets/images/sandevistan.png b/public/assets/images/sandevistan.png
diff --git a/public/assets/sounds/bg-sound.MP3 b/public/assets/sounds/bg-sound.MP3
diff --git a/public/assets/sounds/glitch-sound.MP3 b/public/assets/sounds/glitch-sound.MP3
diff --git a/public/assets/sounds/sound-button-click.MP3 b/public/assets/sounds/sound-button-click.MP3
diff --git a/src/components/Equalizer/Equalizer.data.ts b/src/components/Equalizer/Equalizer.data.ts
@@ -1,5 +1,10 @@
 export const settings = {
-  url: 'https://cdn.discordapp.com/attachments/778024116140769331/1157451387169415258/Cyberpunk_2077_by_Infraction_No_Copyright_Music_Free_Download_Cyber_Attack.MP3?ex=6518a81b&is=6517569b&hm=fa2bae74b8d9fca1318bb56b0ec4796f647c6203d1ad1b06dc66d1a092d2fdbe&',
+  url: '/assets/sounds/bg-sound.MP3',
   loop: true,
-  volume: 6,
+  volume: 3,
 }
+
+export const STATUS_SOUND = {
+  PLAYING: 'PLAYING',
+  PAUSED: 'PAUSED',
+} as const
diff --git a/src/components/Equalizer/index.tsx b/src/components/Equalizer/index.tsx
@@ -1,16 +1,39 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Sound from 'react-sound'
+import LOCALSTORAGES from '~/src/enums/localstorages'
 
-import { settings } from './Equalizer.data'
+import { STATUS_SOUND, settings } from './Equalizer.data'
 import * as S from './styles'
 
+export type StatusSound = 'PLAYING' | 'PAUSED'
+
 const Equalizer = () => {
-  const [isOpen, setIsOpen] = useState<boolean>(true)
+  const [status, setStatus] = useState<StatusSound>('PLAYING')
+
+  const isPlaying = status === STATUS_SOUND.PLAYING
+
+  useEffect(() => {
+    const storedStatus = localStorage.getItem(
+      LOCALSTORAGES.BG_SOUND
+    ) as StatusSound
+
+    storedStatus && setStatus(storedStatus)
+  }, [])
+
+  const toggleStatus = () => {
+    const newStatus: StatusSound = isPlaying
+      ? STATUS_SOUND.PAUSED
+      : STATUS_SOUND.PLAYING
+
+    localStorage.setItem(LOCALSTORAGES.BG_SOUND, newStatus)
+    setStatus(newStatus)
+  }
 
   return (
-    <S.Wrapper onClick={() => setIsOpen(!isOpen)}>
-      <Sound playStatus={isOpen ? 'PLAYING' : 'PAUSED'} {...settings} />
-      {isOpen ? (
+    <S.Wrapper onClick={toggleStatus}>
+      <Sound playStatus={status} {...settings} />
+
+      {isPlaying ? (
         <>
           <S.Line data-testid='equalizer_line' />
           <S.Line />

diff --git a/src/utils/breakpoints.ts → src/enums/breakpoints.ts b/src/utils/breakpoints.ts → src/enums/breakpoints.ts
diff --git a/src/enums/localstorages.ts b/src/enums/localstorages.ts
@@ -0,0 +1,5 @@
+const LOCALSTORAGES = {
+  BG_SOUND: 'BG_SOUND',
+}
+
+export default LOCALSTORAGES
diff --git a/src/enums/medias.ts b/src/enums/medias.ts
diff --git a/src/layout/components/NavBar/Desktop/index.tsx b/src/layout/components/NavBar/Desktop/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import Equalizer from '~/src/components/Equalizer'
-import { SoundClickButton } from '~/src/utils/Sounds'
+import { SoundClickButton } from '~/src/utils/sounds'
 
 import { navBarMock } from '../Navbar.mock'
 import * as S from './styles'

diff --git a/src/layout/components/NavBar/Desktop/styles.ts b/src/layout/components/NavBar/Desktop/styles.ts
@@ -3,7 +3,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import { SvgIconProps } from '@mui/material'
 import React from 'react'
 import styled from 'styled-components'
-import medias from '~/src/enums/medias'
+import { breakpoints } from '~/src/enums/breakpoints'
 
 const createIconStyles = (Icon: React.ComponentType<SvgIconProps>) => styled(
   Icon
@@ -27,7 +27,7 @@ export const Wrapper = styled.nav<{ showNavBar: boolean }>`
   overflow-y: auto;
   display: ${({ showNavBar }) => !showNavBar && 'none'};
 
-  @media (max-width: ${medias.maxTablet}) {
+  @media (max-width: ${breakpoints.Desktop}) {
     display: none;
   }
 `
@@ -44,7 +44,7 @@ export const WrapperColapsed = styled.nav<{ showNavBar: boolean }>`
   border: 1px solid var(--green-white);
   display: ${({ showNavBar }) => !showNavBar && 'none'};
 
-  @media (max-width: ${medias.maxTablet}) {
+  @media (max-width: ${breakpoints.Desktop}) {
     display: none;
   }
 `

diff --git a/src/layout/components/NavBar/Mobile/styles.ts b/src/layout/components/NavBar/Mobile/styles.ts
@@ -3,7 +3,7 @@ import MenuIcon from '@mui/icons-material/Menu'
 import { SvgIconProps } from '@mui/material'
 import React from 'react'
 import styled from 'styled-components'
-import medias from '~/src/enums/medias'
+import { breakpoints } from '~/src/enums/breakpoints'
 
 type addStyleIcon = {
   Icon: React.ComponentType<SvgIconProps>
@@ -22,7 +22,7 @@ const addStyledIcon = ({ Icon, alignSelfEnd }: addStyleIcon) => styled(Icon)`
 `
 
 export const Container = styled.nav`
-  @media (min-width: ${medias.maxTablet}) {
+  @media (min-width: ${breakpoints.Desktop}) {
     display: none;
   }
 `

diff --git a/src/layout/styles.ts b/src/layout/styles.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { breakpoints } from '../utils/breakpoints'
+import { breakpoints } from '../enums/breakpoints'
 
 export const Container = styled.main`
   color: var(--white);

diff --git a/src/utils/Sounds/index.ts b/src/utils/Sounds/index.ts
diff --git a/src/utils/settingsHome.ts b/src/utils/settingsHome.ts
diff --git a/src/utils/sounds.ts b/src/utils/sounds.ts
@@ -0,0 +1,23 @@
+const pathSounds = '/assets/sounds/'
+
+export const settingsSound = {
+  url: `${pathSounds}bg-sound.MP3`,
+  playbackRate: 2,
+  volume: 3,
+}
+
+export const SoundClickButton = () => {
+  const audio = new Audio(`${pathSounds}sound-button-click.MP3`)
+
+  audio.volume = 0.3
+
+  audio.play()
+}
+
+export const SoundGlitch = () => {
+  const audio = new Audio(`${pathSounds}glitch-sound.MP3`)
+
+  audio.volume = 0.3
+
+  audio.play()
+}