feat: fade error notification

src/components/Player/index.tsx

@@ -8,11 +8,13 @@ export const Player = () => {
   const { t } = useTranslation();
   const { station, play, pause, stop, error, playing, loading } = usePlayer();
 
+  const closeNotification = () => stop();
+
   if (!station) return null;
 
   if (error) {
     return (
-      <ErrorNotification>
+      <ErrorNotification onAnimationEnd={closeNotification}>
         <AlertCircle /> <p>{t.player.error}</p>
       </ErrorNotification>
     );

src/components/Player/style.ts

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { fadeInAndOut } from "@/css/animations";
 
 export const Container = styled.footer`
   display: grid;
@@ -30,6 +31,7 @@ export const ErrorNotification = styled.div`
   background: var(--error);
   font-size: var(--sz4);
   padding: var(--sz5) var(--sz4);
+  animation: ${fadeInAndOut} linear 5s;
 `;
 
 export const Controls = styled.section`

src/css/animations.ts

@@ -0,0 +1,19 @@
+import { keyframes } from "@emotion/core";
+
+export const fadeInAndOut = keyframes`
+0% {
+    opacity: 0;
+}
+
+10% {
+    opacity: 1;
+}
+
+90% {
+    opacity: 1;
+}
+
+100% {
+    opacity: 0
+}
+`;

src/lib/hooks/usePlayer.ts

@@ -38,65 +38,59 @@ export function usePlayer() {
     });
   };
 
-  const onPlaying = () => {
+  const onPlaying = () =>
     setState((state) => ({
       ...state,
       error: false,
       paused: false,
       loading: false,
       playing: true,
     }));
-  };
 
-  const onPause = () => {
+  const onPause = () =>
     setState((state) => ({
       ...state,
       error: false,
       paused: true,
       loading: false,
       playing: false,
     }));
-  };
 
-  const onCanPlayThrough = () => {
+  const onCanPlayThrough = () =>
     setState((state) => ({
       ...state,
       error: false,
       paused: false,
       loading: false,
       playing: true,
     }));
-  };
 
-  const onLoadStart = () => {
+  const onLoadStart = () =>
     setState((state) => ({
       ...state,
       error: false,
       paused: false,
       loading: true,
       playing: false,
     }));
-  };
 
-  const onError = () => {
+  const onError = () =>
     setState((state) => ({
       ...state,
       error: true,
       paused: false,
       loading: false,
       playing: false,
     }));
-  };
 
-  const onEnded = () => {
+  const onEnded = () =>
     setState((state) => ({
       ...state,
       error: false,
       paused: false,
       playing: false,
       station: null,
     }));
-  };
 
   useEffect(() => {
     audio.current.addEventListener("error", onError);